/* ============================================================================
   Apis Advisory — site atmosphere, motion & components
   Tokens come from colors_and_type.css. Dark editorial · ONE accent.
   ============================================================================ */

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink-950);
  color: var(--text-body);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  overflow-x: hidden;
}
*, *::before, *::after { box-sizing: border-box; }
::selection { background: var(--selection-bg); color: #fff; }

.wrap { margin: 0 auto; max-width: var(--max-content); padding: 0 28px; }
.wrap-wide { margin: 0 auto; max-width: var(--max-wide); padding: 0 28px; }

/* ── Film grain ─────────────────────────────────────────────────────────── */
.grain::before {
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ── Honeycomb brand texture — extremely subtle, fixed ───────────────────── */
.hivebg::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.4;
  background-image:url("assets/honeycomb-tile.svg");
  background-size:132px; background-position:center;
  -webkit-mask-image:radial-gradient(120% 90% at 80% 0%, rgba(0,0,0,.5), transparent 70%);
  mask-image:radial-gradient(120% 90% at 80% 0%, rgba(0,0,0,.5), transparent 70%);
}
/* ── Cursor spotlight ────────────────────────────────────────────────────── */
.spotlight::after {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; transition:opacity .6s ease;
  background:radial-gradient(540px circle at var(--mx,50%) var(--my,8%), rgba(79,124,255,.07), transparent 60%);
}
@media (prefers-reduced-motion: reduce),(pointer:coarse){ .spotlight::after{display:none} .hivebg::before{opacity:.28} }

/* ── Focus ring ──────────────────────────────────────────────────────────── */
.focus-ring:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--ink-950),0 0 0 4px var(--accent); border-radius:6px; }

/* ── Hairline / rules ────────────────────────────────────────────────────── */
.hairline{ height:1px; background:linear-gradient(to right,transparent,rgba(255,255,255,.08) 18%,rgba(255,255,255,.08) 82%,transparent); }

/* ── Kicker / mono ───────────────────────────────────────────────────────── */
.kicker{ font-family:var(--font-mono); font-feature-settings:'tnum' 1,'zero' 1; letter-spacing:.18em; text-transform:uppercase; }
.tnum{ font-variant-numeric:tabular-nums; }
.text-stroke{ -webkit-text-stroke:1px rgba(255,255,255,.12); color:transparent; }

/* ── Animated underline link ─────────────────────────────────────────────── */
.link-underline{ position:relative; }
.link-underline::after{
  content:''; position:absolute; left:0; bottom:-2px; height:1px; width:100%; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .34s cubic-bezier(0.22,1,0.36,1);
}
.link-underline:hover::after,.link-underline:focus-visible::after{ transform:scaleX(1); transform-origin:left; }
@media (prefers-reduced-motion: reduce){ .link-underline::after{ transition:none; } }

/* ── Scroll reveal (JS-driven, default-visible) ──────────────────────────── */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(0.22,1,0.36,1),transform .7s cubic-bezier(0.22,1,0.36,1); }
.reveal[data-revealed="true"]{ opacity:1; transform:none; }

/* ── Hero entrance — kept STATIC-visible. (Transition/animation clocks freeze
   at frame 0 in headless capture, which would hide above-the-fold content; the
   hero's motion is the honeycomb canvas, not the text.) ──────────────────── */
.anim-rise{ opacity:1; }
.anim-line{ display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; }
.anim-line>span{ display:block; }

/* ── Headlines ───────────────────────────────────────────────────────────── */
.hero-h1 { font-family: var(--font-display); font-weight: 600; line-height: 0.95; letter-spacing: -0.045em; color: #fff; font-size: var(--hero-h1); margin: 0; }
.hero-h1 .em { color: var(--accent-bright); }

/* ── Pulse dot ───────────────────────────────────────────────────────────── */
@keyframes pulse-dot{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.8)} }
.pulse-dot{ animation:pulse-dot 2.4s ease-in-out infinite; }
@keyframes halo{ 0%{transform:scale(1);opacity:.5} 70%{transform:scale(2.6);opacity:0} 100%{opacity:0} }
.pulse-halo{ animation:halo 2.4s ease-out infinite; }

/* ── Marquee ─────────────────────────────────────────────────────────────── */
.marquee-mask{ -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent); }
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.animate-marquee{ animation:marquee 40s linear infinite; }
.marquee-mask:hover .animate-marquee{ animation-play-state:paused; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary{
  display:inline-flex; align-items:center; gap:9px; border:none; cursor:pointer;
  border-radius:999px; background:var(--accent); color:#fff; font-weight:600; font-size:15px;
  padding:14px 24px; box-shadow:var(--shadow-accent); transition:background .2s,transform .05s,box-shadow .2s;
  font-family:var(--font-sans); position:relative;
}
.btn-primary:hover{ background:var(--accent-bright); box-shadow:0 10px 38px -8px rgba(79,124,255,.75); }
.btn-primary:active{ background:var(--accent-dim); }
.btn-primary .arr{ transition:transform .25s cubic-bezier(0.22,1,0.36,1); }
.btn-primary:hover .arr{ transform:translateX(3px); }
.btn-ghost{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; border-radius:999px;
  border:1px solid rgba(255,255,255,.15); background:transparent; color:#fff; font-weight:500; font-size:14px;
  padding:9px 18px; transition:border-color .2s,background .2s; font-family:var(--font-sans);
}
.btn-ghost:hover{ border-color:var(--accent); background:var(--accent-soft); }

/* ── Fields ──────────────────────────────────────────────────────────────── */
.field{
  width:100%; border-radius:var(--radius-field); border:1px solid rgba(255,255,255,.09);
  background:rgba(11,12,17,.7); padding:12px 14px; font-size:15px; color:#fff; font-family:var(--font-sans);
  transition:border-color .2s, box-shadow .2s;
}
.field::placeholder{ color:var(--text-muted); }
.field:hover{ border-color:rgba(255,255,255,.2); }
.field:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.form-label { display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); margin-bottom:9px; }
.form-err { margin:7px 0 0; font-size:12px; color:var(--danger); }

/* ── Ruled / indexed rows ────────────────────────────────────────────────── */
.ruled-row{ transition:border-color .35s, background .35s; }
.ruled-row:hover{ border-color:rgba(255,255,255,.2) !important; }
.nav-link:hover { color:#fff; }
.nav-link:hover .nav-idx { color: var(--accent); }
.service-row:hover .service-idx, .track-row:hover .track-idx, .step-row:hover .step-idx { color: var(--accent); }
.primary-card:hover { border-color:rgba(79,124,255,.55) !important; }
.cred-row:hover .cred-cell { color: var(--accent); }

/* ── Hex cell decorations ────────────────────────────────────────────────── */
.hex-chip{ display:inline-grid; place-items:center; }
.contact-direct { display:none; }

/* ── Reduced motion contract ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .animate-marquee{ animation:none !important; }
  .pulse-dot,.pulse-halo{ animation:none !important; }
  .link-underline::after{ transition:none !important; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
.services-head { display:flex; flex-direction: column; gap: 24px; }
.steps-grid { display:grid; gap:20px; grid-template-columns:1fr; }
.proof-grid { display:grid; gap:1px; grid-template-columns:repeat(2,1fr); }
.footer-wm { font-size: 44px; }
.footer-top { display: flex; flex-direction: column; }
.footer-meta { display: flex; flex-direction: column; }
.brand-full { display: none; }
.brand-mono { display: inline-flex; }
@media (min-width: 768px) {
  .brand-full { display: inline-flex; }
  .brand-mono { display: none; }
  .about-grid { grid-template-columns: 1.45fr 1fr; gap: 80px; }
  .services-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .primary-inner { grid-template-columns: 1.1fr 1fr; gap: 48px; }
  .service-row { grid-template-columns: auto 1fr; gap: 32px; }
  .service-body { grid-template-columns: 1.1fr 1fr; gap: 48px; }
  .track-row { grid-template-columns: 2.5rem minmax(0,16rem) 1fr; column-gap: 40px; }
  .contact-grid { grid-template-columns: 1fr 1.05fr; gap: 80px; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .footer-top { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .footer-meta { flex-direction: row; align-items: center; justify-content: space-between; }
  .contact-direct { display: flex; }
  .footer-wm { font-size: 64px; }
  .hero-support { grid-template-columns: 1fr minmax(0,30rem); gap: 64px; }
  .hero-ctas { order: 1; }
  .hero-sub { order: 2; justify-self: end; border-left: 1px solid rgba(255,255,255,.1); padding-left: 32px; }
  .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .proof-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
  .nav-desktop { display: none !important; }
  .nav-toggle { display: inline-flex !important; }
  .hero-guide { display: none; }
  .track-row { grid-template-columns: auto 1fr; column-gap: 20px; row-gap: 8px; }
  .track-val { grid-column: span 2; }
  .footer-wm { font-size: 44px; }
  .nav-sub { display:none !important; }
}