/* Infinity Strategist — design system.
 *
 * LIGHT BY DEFAULT. Dark is punctuation, not decoration: it appears where the
 * page changes register — the "then vs now" comparison, the numbers band, the
 * closing call to action. Those dark sections use the same near-black as the
 * Citely product UI, so the agency and the tool read as one company.
 *
 * Motion is scroll-driven and additive: every animated element is fully legible
 * with JavaScript off and with prefers-reduced-motion set. Nothing important
 * fades in and then relies on the fade to be readable.
 */

:root{
  /* Ink */
  --ink:#0E1116;
  --ink-2:#454E5C;
  --ink-3:#6B7484;

  /* Paper */
  --paper:#FFFFFF;
  --paper-2:#F6F7FB;
  --paper-3:#EEF0F7;

  /* Night — the dark sections, shared with the Citely app */
  --night:#0B0A1A;
  --night-2:#16143A;

  /* Accent */
  --violet:#6C5CE7;
  --violet-2:#8B7CFF;
  --cyan:#22C1DC;
  --grad:linear-gradient(100deg,var(--violet),var(--cyan));

  --line:rgba(14,17,22,.10);
  --line-2:rgba(14,17,22,.06);
  --line-dark:rgba(255,255,255,.13);

  --shadow-sm:0 1px 2px rgba(14,17,22,.05), 0 4px 14px rgba(14,17,22,.05);
  --shadow:0 10px 40px rgba(14,17,22,.09);
  --shadow-lg:0 30px 80px rgba(14,17,22,.14);

  --r:14px;
  --r-lg:22px;
  --wrap:1180px;
  --gut:clamp(20px,5vw,40px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:rgba(108,92,231,.2)}

/* ---------- type ---------- */
/* Inter Tight is a tighter face than Unbounded was, so it wants more negative
   tracking at display sizes to hold together as a word-shape. */
h1,h2,h3,h4{font-family:'Inter Tight',Inter,sans-serif;font-weight:600;line-height:1.06;letter-spacing:-.034em}
h1{font-size:clamp(38px,5.6vw,68px)}
h2{font-size:clamp(30px,3.8vw,46px)}
h3{font-size:clamp(20px,2vw,25px);line-height:1.25}
h4{font-size:17px;line-height:1.35;letter-spacing:-.01em}
p{color:var(--ink-2)}
.lead{font-size:clamp(17px,1.8vw,21px);line-height:1.6;color:var(--ink-2)}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--violet);
  padding:7px 14px;border-radius:99px;
  background:rgba(108,92,231,.08);border:1px solid rgba(108,92,231,.18);
}
.eyebrow::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--violet)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:800px;margin:0 auto;padding-inline:var(--gut)}
section{position:relative}
.sec{padding:clamp(64px,9vw,120px) 0}
.sec-tight{padding:clamp(48px,6vw,80px) 0}
.alt{background:var(--paper-2)}
.sec-head{max-width:720px;margin-bottom:clamp(34px,4.5vw,58px)}
.sec-head .eyebrow{margin-bottom:18px}
.sec-head h2{margin-bottom:16px}
.center{text-align:center;margin-inline:auto}

/* ---------- dark sections ---------- */
.night{background:var(--night);color:#F2F1FA;overflow:hidden}
.night h1,.night h2,.night h3,.night h4{color:#fff}
.night p{color:#A8AEC4}
.night .eyebrow{color:var(--violet-2);background:rgba(139,124,255,.12);border-color:rgba(139,124,255,.3)}
.night .eyebrow::before{background:var(--violet-2)}
.night::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(680px 380px at 12% -10%,rgba(108,92,231,.30),transparent 65%),
    radial-gradient(560px 340px at 88% 110%,rgba(34,193,220,.16),transparent 62%);
}
.night > *{position:relative;z-index:1}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:15px;line-height:1;
  padding:16px 26px;border-radius:99px;border:1px solid transparent;cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s ease,background .2s ease,color .2s ease;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
/* Solid ink, not the brand gradient. A gradient on every button spends the
   brand's most distinctive asset on its most repeated element — by the fifth
   one it reads as decoration rather than emphasis. The gradient is now kept for
   data (coverage bars, keyword demand), where it actually encodes something. */
.btn-primary{background:var(--ink);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:#000;box-shadow:var(--shadow)}
.night .btn-primary{background:#fff;color:var(--ink)}
.night .btn-primary:hover{background:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.night .btn-ghost{color:#fff;border-color:var(--line-dark)}
.night .btn-ghost:hover{background:#fff;color:var(--night);border-color:#fff}
.btn-sm{padding:11px 18px;font-size:14px}
.btn .ar{transition:transform .22s cubic-bezier(.2,.8,.3,1)}
.btn:hover .ar{transform:translateX(4px)}
.btns{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s ease,box-shadow .3s ease;
}
.site-head.stuck{border-bottom-color:var(--line-2);box-shadow:0 1px 20px rgba(14,17,22,.05)}
.head-in{display:flex;align-items:center;gap:28px;height:74px}
.brand{display:flex;align-items:center;gap:10px;font-family:'Inter Tight',Inter,sans-serif;font-weight:700;font-size:19px;letter-spacing:-.02em;flex:none}
.brand .mark{
  width:30px;height:30px;border-radius:9px;background:var(--grad);flex:none;
  display:grid;place-items:center;color:#fff;font-size:15px;
  box-shadow:0 4px 14px rgba(108,92,231,.35);
}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{
  position:relative;padding:9px 14px;border-radius:9px;font-size:15px;font-weight:500;
  color:var(--ink-2);transition:color .18s ease,background .18s ease;
}
.nav a:hover{color:var(--ink);background:var(--paper-2)}
.nav a.on{color:var(--ink);font-weight:600}
.head-cta{display:flex;align-items:center;gap:10px;flex:none}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:11px;background:none;cursor:pointer;place-items:center}
.burger span{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:transform .25s ease,background .2s ease}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:17px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger.open span{background:transparent}
.burger.open span::before{transform:translateY(6px) rotate(45deg)}
.burger.open span::after{transform:translateY(-6px) rotate(-45deg)}

/* dropdown for services */
.has-sub{position:relative}
.sub{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:290px;padding:10px;border-radius:16px;background:#fff;
  border:1px solid var(--line-2);box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transition:opacity .2s ease,transform .22s cubic-bezier(.2,.8,.3,1),visibility .2s;
}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.sub a{display:block;padding:10px 12px;border-radius:10px;font-size:14.5px;line-height:1.35}
.sub a b{display:block;font-weight:600;color:var(--ink)}
.sub a span{font-size:12.5px;color:var(--ink-3)}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,8vw,96px) 0 clamp(56px,8vw,104px);position:relative;overflow:hidden}
.hero::before{
  content:'';position:absolute;inset:-20% -10% auto -10%;height:70%;pointer-events:none;z-index:0;
  background:radial-gradient(50% 60% at 50% 0%,rgba(108,92,231,.14),transparent 70%);
}
.hero .wrap{position:relative;z-index:1}
.hero h1{margin:20px 0 22px;max-width:16ch}
.hero .lead{max-width:56ch;margin-bottom:32px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}

/* the animated "then vs now" visual in the hero */
.shift-card{
  border-radius:var(--r-lg);background:var(--night);color:#F2F1FA;padding:26px;
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
}
.shift-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(420px 240px at 80% -20%,rgba(108,92,231,.4),transparent 65%);
}
.shift-card > *{position:relative}
.shift-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-dark)}
.shift-row:last-child{border-bottom:0}
.shift-ic{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;font-size:14px;
  background:rgba(255,255,255,.07);border:1px solid var(--line-dark);
}
.shift-row b{display:block;font-size:14px;color:#fff}
.shift-row span{font-size:12px;color:#9AA1B8}
.shift-row.win .shift-ic{background:rgba(34,193,220,.16);border-color:rgba(34,193,220,.4);color:#5FE3F5}
.shift-row.lose{opacity:.55}
.shift-tag{
  display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#9AA1B8;margin-bottom:14px;
}

/* ---------- cards ---------- */
.grid{display:grid;gap:clamp(16px,2vw,22px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:clamp(22px,2.5vw,30px);
  transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s ease,border-color .28s ease;
  position:relative;overflow:hidden;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.card .ic{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:20px;
  background:var(--paper-2);border:1px solid var(--line-2);margin-bottom:18px;
  transition:transform .28s cubic-bezier(.2,.8,.3,1);
}
.card:hover .ic{transform:scale(1.08) rotate(-4deg)}
.card h3{margin-bottom:9px}
.card p{font-size:15px}
.card-link{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:14.5px;font-weight:600;color:var(--violet)}
.card-link .ar{transition:transform .22s ease}
.card:hover .card-link .ar{transform:translateX(4px)}
/* a thin accent that draws itself on hover */
.card::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.2,.8,.3,1)}
.card:hover::after{transform:scaleX(1)}

/* ---------- stats band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,40px)}
.stat b{display:block;font-family:'Inter Tight',Inter,sans-serif;font-size:clamp(32px,4.4vw,52px);line-height:1;letter-spacing:-.03em}
.stat span{display:block;margin-top:10px;font-size:14px;color:#A8AEC4}
.night .stat b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;gap:6px}
.step{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--line-2)}
.step:last-child{border-bottom:0}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:var(--violet);
  flex:none;width:44px;padding-top:3px;
}
.step h4{margin-bottom:5px}
.step p{font-size:15px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-weight:600;font-size:17px;line-height:1.4;transition:color .18s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--violet)}
.faq summary::after{
  content:'';position:absolute;right:8px;top:27px;width:11px;height:11px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .26s cubic-bezier(.2,.8,.3,1);
}
.faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--violet)}
.faq .ans{padding:0 44px 24px 0;font-size:16px;color:var(--ink-2);animation:ansIn .32s cubic-bezier(.2,.8,.3,1)}
@keyframes ansIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- CTA band ---------- */
.cta-band{border-radius:var(--r-lg);padding:clamp(38px,5vw,64px);text-align:center;position:relative;overflow:hidden}
.cta-band h2{margin-bottom:14px}
.cta-band p{max-width:52ch;margin:0 auto 28px}
.cta-band .btns{justify-content:center}

/* ---------- footer ---------- */
.site-foot{background:var(--night);color:#A8AEC4;padding:clamp(52px,6vw,76px) 0 34px;position:relative;overflow:hidden}
.site-foot::before{content:'';position:absolute;inset:0;background:radial-gradient(600px 300px at 15% 0%,rgba(108,92,231,.2),transparent 65%);pointer-events:none}
.site-foot .wrap{position:relative}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(24px,4vw,48px);padding-bottom:38px;border-bottom:1px solid var(--line-dark)}
.site-foot .brand{color:#fff;margin-bottom:14px}
.site-foot p{font-size:14.5px;max-width:34ch}
.foot-col h5{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:14px;font-family:'IBM Plex Mono',monospace;font-weight:500}
.foot-col a{display:block;padding:5px 0;font-size:14.5px;color:#A8AEC4;transition:color .18s ease,transform .18s ease}
.foot-col a:hover{color:#fff;transform:translateX(3px)}
.foot-bot{display:flex;justify-content:space-between;gap:16px;padding-top:22px;font-size:13.5px;flex-wrap:wrap}

/* ---------- motion ----------
   Everything below is additive. With JS off the .reveal class is never
   applied, and the fallback rule at the end keeps content fully visible. */
html.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal-l{opacity:0;transform:translateX(-24px);transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
html.js .reveal-r{opacity:0;transform:translateX(24px);transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
html.js .reveal-l.in,html.js .reveal-r.in{opacity:1;transform:none}
html.js .reveal-s{opacity:0;transform:scale(.96);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1)}
html.js .reveal-s.in{opacity:1;transform:none}

/* a slow drift on the hero glow, so the page is never completely static */
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2%,-2%,0) scale(1.06)}}
.hero::before{animation:drift 16s ease-in-out infinite}

/* marquee of platforms */
.marq{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq-in{display:flex;gap:52px;width:max-content;animation:marq 34s linear infinite}
.marq:hover .marq-in{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marq span{font-family:'Inter Tight',Inter,sans-serif;font-weight:700;font-size:20px;color:var(--ink-3);opacity:.5;white-space:nowrap;transition:opacity .2s ease,color .2s ease}
.marq span:hover{opacity:1;color:var(--violet)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .reveal,.reveal-l,.reveal-r,.reveal-s{opacity:1!important;transform:none!important}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .stats{grid-template-columns:repeat(2,1fr);gap:28px}
}
@media (max-width:860px){
  .burger{display:grid}
  .nav{
    position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:2px;
    background:#fff;border-bottom:1px solid var(--line);padding:14px var(--gut) 22px;
    transform:translateY(-12px);opacity:0;visibility:hidden;transition:.24s cubic-bezier(.2,.8,.3,1);
    max-height:calc(100vh - 74px);overflow-y:auto;
  }
  .nav.open{transform:none;opacity:1;visibility:visible}
  .nav a{padding:13px 12px;font-size:16px}
  .sub{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;padding:0 0 0 12px;min-width:0}
  .head-cta .btn-ghost{display:none}
}
/* At 375px the brand lockup plus "Talk to us" plus the burger measured ~393px
   against a 375px viewport, so the header pushed the whole document wider than
   the screen. body{overflow-x:hidden} hid the scrollbar but the layout was
   still overflowing. Shrink the two flexible parts instead. */
@media (max-width:430px){
  .brand{font-size:17px;gap:8px}
  .brand .mark{width:26px;height:26px;border-radius:8px;font-size:13px}
  .head-in{gap:12px}
  .btn-sm{padding:10px 14px;font-size:13.5px}
  .burger{width:38px;height:38px}
}
@media (max-width:620px){
  body{font-size:16px}
  .g2,.g3{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .step{gap:14px}
  .step::before{width:32px}
}

/* ---------- editor content (guides, generic pages) ----------
   Narrow measure, generous rhythm. These pages exist to be read properly and
   quoted; a full-width wall of text is neither. */
.entry{font-size:17.5px;line-height:1.75}
.entry > * + *{margin-top:1.15em}
.entry h2{font-size:clamp(25px,3vw,34px);margin-top:1.9em}
.entry h3{font-size:clamp(20px,2.2vw,25px);margin-top:1.6em}
.entry p{color:var(--ink-2)}
.entry a{color:var(--violet);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.entry a:hover{color:var(--ink)}
.entry ul,.entry ol{padding-left:1.3em}
.entry li{margin-top:.5em;color:var(--ink-2)}
.entry li::marker{color:var(--violet)}
.entry blockquote{
  margin-left:0;padding:4px 0 4px 22px;border-left:3px solid var(--violet);
  font-size:19px;line-height:1.6;color:var(--ink);
}
.entry img{border-radius:var(--r)}
.entry code{
  font-family:'IBM Plex Mono',monospace;font-size:.9em;padding:2px 6px;border-radius:6px;
  background:var(--paper-2);border:1px solid var(--line-2);
}
.entry pre{background:var(--night);color:#E6E8F0;padding:20px;border-radius:var(--r);overflow-x:auto}
.entry pre code{background:none;border:0;color:inherit;padding:0}
.entry hr{border:0;border-top:1px solid var(--line-2);margin:2.4em 0}
.entry table{width:100%;border-collapse:collapse;font-size:15.5px}
.entry th,.entry td{padding:11px 14px;border-bottom:1px solid var(--line-2);text-align:left}
.entry th{font-weight:600;background:var(--paper-2)}

/* pagination */
.page-numbers{
  display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 14px;border-radius:11px;
  font-size:14.5px;font-weight:600;color:var(--ink-2);border:1px solid var(--line-2);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.page-numbers:hover{color:var(--ink);border-color:var(--ink)}
.page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ═══════════════════ HOME v3 — the 3D layer ═══════════════════
   All depth is CSS transforms on a perspective stage. Nothing here loads a
   library, nothing blocks paint, and every effect degrades to a flat, fully
   legible layout under prefers-reduced-motion or on touch devices. */

/* ---- hero: aurora field ---- */
.fx-hero{position:relative;overflow:hidden;padding:clamp(56px,8vw,100px) 0 clamp(64px,9vw,120px)}
.fx-aur{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.55;will-change:transform}
.fx-aur.a{width:560px;height:560px;background:rgba(108,92,231,.28);top:-220px;left:-120px;animation:aur 18s ease-in-out infinite}
.fx-aur.b{width:480px;height:480px;background:rgba(34,193,220,.20);top:10%;right:-160px;animation:aur 22s ease-in-out -6s infinite reverse}
.fx-aur.c{width:380px;height:380px;background:rgba(255,92,138,.12);bottom:-180px;left:34%;animation:aur 26s ease-in-out -12s infinite}
@keyframes aur{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4%,-5%,0) scale(1.12)}}
.fx-hero .wrap{position:relative;z-index:1}
.fx-hero h1{margin:20px 0 20px}
.hero-copy .lead{max-width:50ch}
.hero-note{margin-top:16px;font-size:13.5px;color:var(--ink-3)}

/* ---- hero: the 3D dashboard ---- */
.scene3d{perspective:1400px;perspective-origin:60% 40%}
.dash-pose{position:relative;transform:rotateY(-13deg) rotateX(7deg);transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.scene3d:hover .dash-pose{transform:rotateY(-8deg) rotateX(4deg)}
.dash{
  background:var(--night);border-radius:18px;overflow:hidden;color:#E7EAF4;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 90px rgba(14,17,22,.28), 0 0 0 1px rgba(108,92,231,.12), 0 0 80px rgba(108,92,231,.14);
  transform-style:preserve-3d;transition:transform .18s ease-out;
}
.dash-top{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03)}
.dd{width:10px;height:10px;border-radius:50%}
.dd.r{background:#FF5F57}.dd.y{background:#FEBC2E}.dd.g{background:#28C840}
.dash-url{margin-left:10px;font-size:11px;color:#8E96B0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:99px;padding:4px 12px}
.dash-body{display:flex;min-height:330px}
.dash-side{flex:0 0 148px;border-right:1px solid rgba(255,255,255,.08);padding:14px 10px;display:flex;flex-direction:column;gap:4px}
.ds{font-size:11.5px;color:#8E96B0;padding:8px 10px;border-radius:8px;white-space:nowrap}
.ds.on{color:#fff;background:rgba(108,92,231,.22);border:1px solid rgba(139,124,255,.35)}
.dash-main{flex:1;padding:16px 18px;min-width:0}
.dash-h{font-family:'Inter Tight',Inter,sans-serif;font-size:14px;color:#fff;margin-bottom:12px}
.dash-stats{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.dash-stats span{font-size:10.5px;color:#8E96B0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:5px 10px}
.dash-stats b{color:#5FE3F5;font-family:'IBM Plex Mono',monospace;margin-right:4px}
.dash-rows{display:flex;flex-direction:column;gap:5px}
.dr{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;background:rgba(255,255,255,.035);position:relative;overflow:hidden}
.dr.sub{margin-left:20px}
.dr i{width:6px;height:6px;border-radius:2px;background:var(--violet-2);flex:none}
.dr.sub i{background:rgba(139,124,255,.5)}
.dr span{font-size:11.5px;color:#D5D9E6;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{font-size:8.5px;font-style:normal;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:99px;flex:none}
.pill.c{color:#5FE3F5;border:1px solid rgba(34,193,220,.4);background:rgba(34,193,220,.1)}
.pill.s{color:#B8A9FF;border:1px solid rgba(139,124,255,.35);background:rgba(139,124,255,.1)}
.dr u{position:absolute;left:0;bottom:0;height:2px;width:var(--w,40%);background:var(--grad);text-decoration:none;opacity:.7}
.dash-kw{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 12px;border-radius:10px;background:rgba(34,193,220,.08);border:1px solid rgba(34,193,220,.28)}
.dash-kw span{font-size:11.5px;color:#DDE1EC;flex:1;min-width:0}
.dash-kw b{font-size:11px;color:#5FE3F5;font-family:'IBM Plex Mono',monospace}
.dash-kw em{font-size:10px;font-style:normal;color:#3ADFA5;white-space:nowrap}

/* floating badges at different depths of the same 3D stage */
.fchip{
  position:absolute;font-size:12px;font-weight:600;color:#fff;white-space:nowrap;
  padding:9px 14px;border-radius:99px;background:rgba(22,20,58,.92);
  border:1px solid rgba(139,124,255,.4);box-shadow:0 14px 34px rgba(14,17,22,.3), 0 0 24px rgba(108,92,231,.22);
  backdrop-filter:blur(6px);animation:fl 6s ease-in-out infinite;
}
.fchip.f1{top:-16px;right:8%;transform:translateZ(60px);color:#3ADFA5;border-color:rgba(58,223,165,.45);animation-delay:0s}
.fchip.f2{bottom:22%;left:-34px;transform:translateZ(90px);animation-delay:-2s}
.fchip.f3{bottom:-14px;right:16%;transform:translateZ(40px);color:#5FE3F5;border-color:rgba(34,193,220,.45);animation-delay:-4s}
@keyframes fl{0%,100%{margin-top:0}50%{margin-top:-10px}}

/* ---- orbit ---- */
.orb-sec{overflow:hidden}
.orbit-stage{height:520px;display:grid;place-items:center}
.orbit{position:relative;width:480px;height:480px;flex:none}
.orbit::before,.orbit::after{
  content:'';position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(255,255,255,.14);
}
.orbit::after{inset:80px}
.o-core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  text-align:center;padding:20px 26px;border-radius:18px;background:rgba(22,20,58,.95);
  border:1px solid rgba(139,124,255,.45);box-shadow:0 0 60px rgba(108,92,231,.35);
}
.o-core b{display:block;font-size:15px;color:#fff}
.o-core .mono{font-size:10.5px;color:#8E96B0}
.o-ring{position:absolute;top:50%;left:50%;width:0;height:0;animation:orb 56s linear infinite}
.o-ring.r2{animation-duration:84s;animation-direction:reverse}
@keyframes orb{to{transform:rotate(360deg)}}
.o-chip{
  position:absolute;top:0;left:0;
  transform:rotate(var(--a)) translateX(160px) rotate(calc(-1 * var(--a)));
}
.o-ring.r2 .o-chip{transform:rotate(var(--a)) translateX(238px) rotate(calc(-1 * var(--a)))}
.o-chip span{
  display:inline-block;transform:translate(-50%,-50%);white-space:nowrap;
  font-size:13px;font-weight:600;color:#D5D9E6;padding:9px 16px;border-radius:99px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  animation:orbR 56s linear infinite;
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.o-ring.r2 .o-chip span{animation-duration:84s;animation-direction:reverse}
@keyframes orbR{to{transform:translate(-50%,-50%) rotate(-360deg)}}
.o-ring.r2 .o-chip span{animation-name:orbR2}
@keyframes orbR2{to{transform:translate(-50%,-50%) rotate(360deg)}}
.o-chip:hover span{background:rgba(139,124,255,.28);border-color:rgba(139,124,255,.7);color:#fff;box-shadow:0 0 26px rgba(108,92,231,.4)}
.orbit:hover .o-ring,.orbit:hover .o-chip span{animation-play-state:paused}
.orb-hint{text-align:center;font-size:11.5px;color:#8E96B0;margin-top:6px}

/* ---- why-now rows + the standalone answer mock ---- */
.shift-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.why-rows{display:flex;flex-direction:column;gap:16px}
.why-row{display:flex;gap:16px;align-items:baseline}
.why-row b{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--violet);flex:none}
.why-row p{font-size:17px;color:var(--ink-2)}
.why-row em{font-style:normal;color:var(--ink);font-weight:600}
.ansmock{border-radius:var(--r-lg);padding:22px}
.ansmock.standalone{
  background:var(--night);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 70px rgba(14,17,22,.18), 0 0 60px rgba(108,92,231,.1);
}
.ansmock-q{font-size:12.5px;color:#8E96B0;margin-bottom:14px}
.ansmock-a{background:rgba(108,92,231,.14);border:1px solid rgba(139,124,255,.32);border-radius:13px;padding:14px 16px;margin-bottom:16px}
.ansmock-tag{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--violet-2);margin-bottom:8px}
.ansmock-a p{font-size:14px;line-height:1.6;color:#DDE1EC}
.ansmock-src > .mono{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8E96B0;margin-bottom:9px}
.src-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;font-size:13px;color:#A8AEC4;margin-bottom:5px;background:rgba(255,255,255,.04)}
.src-row i{font-style:normal;width:19px;height:19px;border-radius:5px;flex:none;display:grid;place-items:center;font-size:10.5px;background:rgba(255,255,255,.08);color:#8E96B0}
.src-row.win{background:rgba(34,193,220,.13);border:1px solid rgba(34,193,220,.35);color:#fff}
.src-row.win i{background:var(--cyan);color:#04202a}
.src-row.win b{margin-left:auto;font-size:11.5px;color:#5FE3F5;font-weight:600}

/* ---- deliverables: three mini product UIs ---- */
.mock-card{
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:18px 18px 24px;
  transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s ease;
}
.mock-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.mock-card h3{margin:18px 4px 8px;font-size:19px}
.mock-card > p{font-size:14.5px;margin-inline:4px}
.mock{
  background:var(--night);border-radius:14px;padding:14px;min-height:196px;
  border:1px solid rgba(255,255,255,.08);
}
.mk-t{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#8E96B0;margin-bottom:11px}
.mk-row{display:flex;align-items:center;gap:9px;font-size:12px;color:#D5D9E6;padding:6px 8px;border-radius:7px;background:rgba(255,255,255,.04);margin-bottom:5px}
.mk-row.in{margin-left:18px}
.mk-row span{width:6px;height:6px;border-radius:2px;background:var(--violet-2);flex:none}
.mk-row.in span{background:rgba(139,124,255,.45)}
.mk-row em{margin-left:auto;font-style:normal;font-size:10.5px;color:#8E96B0;font-family:'IBM Plex Mono',monospace}
.kw-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:7px;background:rgba(255,255,255,.04);margin-bottom:5px}
.kw-row span{font-size:11.5px;color:#D5D9E6;flex:0 0 46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kw-row u{flex:1;height:4px;border-radius:3px;background:rgba(255,255,255,.08);position:relative;text-decoration:none}
.kw-row u::after{content:'';position:absolute;left:0;top:0;bottom:0;width:var(--w,50%);border-radius:3px;background:var(--grad)}
.kw-row b{font-size:10.5px;color:#5FE3F5;font-family:'IBM Plex Mono',monospace;flex:none}
.bf-answer{font-size:12.5px;color:#fff;background:rgba(108,92,231,.16);border:1px solid rgba(139,124,255,.3);border-radius:8px;padding:9px 11px;margin-bottom:10px}
.bf-h{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#8E96B0;margin:11px 0 7px}
.bf-line{height:8px;border-radius:4px;background:rgba(255,255,255,.09);margin-bottom:6px}
.bf-line.w95{width:95%}.bf-line.w85{width:85%}.bf-line.w80{width:80%}.bf-line.w70{width:70%}.bf-line.w60{width:60%}
.bf-line.hl{background:rgba(58,223,165,.35)}

/* ---- how it works: one line, four stops ---- */
.hsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px);position:relative}
.hsteps::before{
  content:'';position:absolute;left:4%;right:4%;top:23px;height:2px;
  background:linear-gradient(90deg,var(--violet),var(--cyan));opacity:.3;
}
.hstep{position:relative;text-align:left;padding-top:60px}
.hs-n{
  position:absolute;top:0;left:0;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;font-family:'Inter Tight',Inter,sans-serif;font-size:16px;font-weight:700;
  color:#fff;background:var(--grad);box-shadow:0 8px 22px rgba(108,92,231,.35);
  border:4px solid var(--paper);
}
.hs-when{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);margin-bottom:7px}
.hstep h3{font-size:18px;margin-bottom:6px}
.hstep p{font-size:14px}

/* ---- service cards, accent-aware ---- */
.card.svc .ic{color:var(--ac);background:color-mix(in srgb,var(--ac) 9%,white);border-color:color-mix(in srgb,var(--ac) 22%,white)}
.card.svc:hover{box-shadow:0 14px 44px color-mix(in srgb,var(--ac) 22%,transparent)}
.card.svc::after{background:var(--ac)}

/* ---- final CTA: perspective grid floor + inline scan ---- */
.cta-fx{overflow:hidden}
.gridfloor{
  position:absolute;left:-20%;right:-20%;bottom:-38%;height:75%;pointer-events:none;
  background:
    linear-gradient(rgba(139,124,255,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(139,124,255,.16) 1px,transparent 1px);
  background-size:52px 52px;
  transform:perspective(600px) rotateX(62deg);
  mask-image:linear-gradient(180deg,transparent,#000 36%);
  animation:floor 3.2s linear infinite;
}
@keyframes floor{to{background-position:0 52px,0 0}}
.scanline{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.scanline input{
  flex:1 1 260px;max-width:340px;min-width:0;padding:16px 20px;font:inherit;font-size:16px;
  color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);
  border-radius:99px;outline:none;transition:border-color .2s ease,background .2s ease;
}
.scanline input::placeholder{color:#8E96B0}
.scanline input:focus{border-color:var(--violet-2);background:rgba(255,255,255,.1)}

/* thin scroll progress bar, injected by main.js */
.scrollbar-top{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:300;pointer-events:none;
  background:var(--grad);transform:scaleX(0);transform-origin:left;
}

/* ---- responsive + reduced motion ---- */
@media (max-width:1000px){
  .scene3d{perspective:none;margin-top:8px}
  .dash-pose{transform:none}
  .fchip{display:none}
  .shift-two{grid-template-columns:1fr}
  .hsteps{grid-template-columns:1fr 1fr;gap:26px}
  .hsteps::before{display:none}
}
@media (max-width:640px){
  .orbit-stage{height:340px}
  .orbit{transform:scale(.62)}
  .hsteps{grid-template-columns:1fr}
  .dash-side{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fx-aur,.gridfloor,.o-ring,.o-chip span,.fchip{animation:none!important}
  .dash-pose{transform:none!important}
}
/* ═══════════════════ HOME v3.1 — motion pass ═══════════════════
   Every animation below either demonstrates the product working (bars filling,
   an answer typing itself, rows booting in) or gives the page depth (shine,
   shimmer, satellites). Decorative-only motion is kept slow and quiet so it
   reads as atmosphere, not noise. All of it dies under prefers-reduced-motion. */

/* ---- rotating headline ---- */
.rotword{display:inline-block;transition:transform .3s cubic-bezier(.2,.8,.3,1),opacity .3s ease;will-change:transform}
.rotword.out{transform:translateY(-55%);opacity:0}
.rotword.inw{animation:rotIn .34s cubic-bezier(.2,.8,.3,1)}
@keyframes rotIn{from{transform:translateY(55%);opacity:0}to{transform:none;opacity:1}}

/* ---- gradient text shimmer — slow, barely-there ---- */
.grad-text{background-size:220% 100%;animation:gradShift 8s ease-in-out infinite}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* The periodic shine sweep across every primary button, and the pinging dot on
   every eyebrow, were both removed. They ran forever, on elements that repeat
   several times per page, drawing the eye away from whatever the visitor was
   actually reading. Motion that never stops stops meaning anything.
   `ping` is kept as a keyframe — the hero's cited badge still uses it. */
@keyframes ping{0%,100%{opacity:1}50%{opacity:.35}}

/* ---- dashboard boot sequence ----
   The mock behaves like software: rows arrive one by one, coverage bars fill,
   the cited badge breathes. Runs once on load — it is above the fold. */
.dash-rows .dr{animation:drIn .5s cubic-bezier(.2,.8,.3,1) backwards}
.dash-rows .dr:nth-child(1){animation-delay:.55s}
.dash-rows .dr:nth-child(2){animation-delay:.7s}
.dash-rows .dr:nth-child(3){animation-delay:.85s}
.dash-rows .dr:nth-child(4){animation-delay:1s}
.dash-rows .dr:nth-child(5){animation-delay:1.15s}
@keyframes drIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.dr u{width:0;animation:barGrow 1s cubic-bezier(.2,.8,.3,1) forwards}
.dash-rows .dr:nth-child(1) u{animation-delay:.9s}
.dash-rows .dr:nth-child(2) u{animation-delay:1.05s}
.dash-rows .dr:nth-child(3) u{animation-delay:1.2s}
.dash-rows .dr:nth-child(4) u{animation-delay:1.35s}
.dash-rows .dr:nth-child(5) u{animation-delay:1.5s}
@keyframes barGrow{to{width:var(--w,40%)}}
.dash-stats span{animation:drIn .45s ease backwards}
.dash-stats span:nth-child(1){animation-delay:.3s}
.dash-stats span:nth-child(2){animation-delay:.42s}
.dash-stats span:nth-child(3){animation-delay:.54s}
.dash-kw{animation:drIn .5s ease 1.7s backwards}
.dash-kw em{animation:ping 2s ease-in-out 2.2s infinite}

/* ---- orbit satellites + core pulse ---- */
.o-sat{
  position:absolute;top:0;left:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 14px var(--cyan);
  transform:rotate(var(--a)) translateX(160px);
}
.o-ring.r2 .o-sat{transform:rotate(var(--a)) translateX(238px);background:var(--violet-2);box-shadow:0 0 14px var(--violet-2)}
.o-core::after{
  content:'';position:absolute;inset:-10px;border-radius:24px;
  border:1px solid rgba(139,124,255,.55);pointer-events:none;
  animation:corePulse 3.2s ease-out infinite;
}
@keyframes corePulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.55);opacity:0}}

/* ---- the AI answer types itself (JS drives the text; this is the caret) ---- */
.ansmock-a p.typing::after{content:'▍';color:var(--violet-2);animation:caret 1s steps(1) infinite;margin-left:2px}
@keyframes caret{50%{opacity:0}}
.ansmock.anim .src-row{opacity:0;transform:translateX(-10px)}
.ansmock.anim .src-row.in{opacity:1;transform:none;transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.3,1)}

/* ---- keyword-bank bars grow when the card scrolls in ---- */
html.js .mock-card .kw-row u::after{width:0;transition:width 1.1s cubic-bezier(.2,.8,.3,1) .25s}
html.js .mock-card.in .kw-row u::after{width:var(--w,50%)}
html.js .mock-card .kw-row:nth-child(3) u::after{transition-delay:.4s}
html.js .mock-card .kw-row:nth-child(4) u::after{transition-delay:.55s}
html.js .mock-card .kw-row:nth-child(5) u::after{transition-delay:.7s}

/* ---- brief skeleton shimmer: reads as "generating" ---- */
.bf-line{position:relative;overflow:hidden}
.bf-line::after{
  content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  animation:shimmer 2.6s ease-in-out infinite;
}
.bf-line:nth-child(odd)::after{animation-delay:1.2s}
@keyframes shimmer{60%,100%{transform:translateX(100%)}}

/* ---- how-it-works line draws itself when the steps arrive ---- */
html.js .hsteps::before{transform:scaleX(0);transform-origin:left;transition:transform 1.3s cubic-bezier(.2,.8,.3,1) .15s}
html.js .hsteps:has(.hstep.in)::before{transform:scaleX(1)}
html.js .hstep .hs-n{transition:transform .45s cubic-bezier(.34,1.56,.64,1) .1s,opacity .3s ease}
html.js .hstep:not(.in) .hs-n{transform:scale(.4);opacity:0}

/* ---- service card icons: gentle lift-tilt on hover ---- */
.card.svc .ic{transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease}
.card.svc:hover .ic{transform:translateY(-3px) scale(1.1) rotate(-5deg)}

@media (prefers-reduced-motion:reduce){
  .rotword,.grad-text,.btn-primary::after,.eyebrow::before,
  .dash-rows .dr,.dr u,.dash-stats span,.dash-kw,.dash-kw em,
  .o-sat,.o-core::after,.bf-line::after{animation:none!important}
  .dr u{width:var(--w,40%)}
}