/* Citelx — inner pages (services, about, contact, guides, cases, pillar, scan).
 *
 * Ported from the previous agency theme. Both themes share variable names, so
 * these components inherit the new palette automatically — nothing here hard-codes
 * a colour.
 *
 * Loaded on every page EXCEPT the front page, which has its own home.css. That
 * split matters: both define .hero, and they mean different things — a dark
 * full-viewport landing stage here, a short page header there.
 */

/* ---------- two-column split ----------
 * Contact, About and every service page each carried this grid as an inline
 * style, and an inline style cannot be overridden by a media query, so none of
 * them ever collapsed on a phone. On a 375px screen the contact page resolved
 * to `46px 282.688px` and the message form measured zero pixels wide.
 *
 * minmax(0,…) rather than a bare fr for the same reason it mattered in the
 * schema section: a plain fr track has an auto minimum, so one wide child sets
 * the width of the whole row. That is what squeezed the form to nothing.
 *
 * Both columns are heading-then-content in source order, so stacking needs no
 * reordering.
 */
.split-2{
  display:grid;gap:clamp(28px,5vw,60px);align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.split-2.lead-l{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.split-2.lead-r{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
@media (max-width:820px){
  .split-2,.split-2.lead-l,.split-2.lead-r{grid-template-columns:minmax(0,1fr);gap:30px}
}

/* ---------- About: hero + surfaces card ----------
 * The hero carries .night, so the copy inside it needs the dark palette
 * explicitly — .hero was written for a light page header. */
.about-hero-in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,4vw,56px);align-items:center;
}
/* The global h1 clamps up to 70px, which is right for a landing page and far
   too loud for an About header sitting beside a graphic. */
.about-hero-copy h1{color:#fff;max-width:15ch;font-size:clamp(30px,3.5vw,44px);margin:18px 0 18px}

/* ---- the sourced bullets ---- */
.why-list{list-style:none;display:grid;gap:20px;margin:0 0 22px;padding:0}
.why-list li{position:relative;padding-left:28px}
.why-list li::before{
  content:'';position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;
  background:var(--grad);box-shadow:0 0 0 4px rgba(124,108,255,.12);
}
.why-list b{display:block;font-size:16px;font-weight:600;color:var(--ink);margin-bottom:5px;letter-spacing:-.01em}
.why-list span{display:block;font-size:15px;line-height:1.65;color:var(--ink-2)}
/* The figure is the point of the sentence, so it gets the weight and the ink.
   Not --violet: the brand value on white measured 3.86:1, under AA — and a
   statistic nobody can read comfortably is worse than no statistic. */
.why-list span b{display:inline;font-size:inherit;font-weight:700;color:#5B45D4;margin:0}
.why-src{font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.why-src a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.why-src a:hover{color:var(--violet)}
.about-hero-copy .lead{color:var(--night-ink-2);max-width:48ch}
.about-hero-copy .btns{margin-top:30px}
.about-hero-vis{position:relative;min-width:0}
@media (max-width:900px){
  .about-hero-in{grid-template-columns:minmax(0,1fr);gap:20px}
  /* The orbit reads as decoration on a phone; the copy and the CTA are the
     reason the page exists, so they come first. */
  .about-hero-vis{order:2}
  .about-hero-copy{order:1}
}

.surf-card{background:var(--paper-2)}
.surf-card h3{margin-bottom:8px}
.surf-note{font-size:14px;line-height:1.6;color:var(--ink-3);margin-bottom:18px}
.surf-list{list-style:none;display:grid;gap:2px;margin:0 0 20px;padding:0}
.surf-list li{display:flex;align-items:center;gap:11px}
.surf-list a{
  display:flex;flex-direction:column;gap:1px;padding:9px 0;min-width:0;flex:1;
  transition:transform .18s cubic-bezier(.2,.8,.3,1);
}
.surf-list a:hover{transform:translateX(3px)}
.surf-list b{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3}
.surf-list a:hover b{color:var(--violet)}
.surf-list i{font-style:normal;font-size:12px;color:var(--ink-3);line-height:1.35}
.surf-ic{
  width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;
  color:var(--violet);background:rgba(124,108,255,.1);border:1px solid rgba(124,108,255,.18);
}
.surf-cta{display:flex;gap:9px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--line-2)}
@media (max-width:560px){ .surf-cta .btn{flex:1;justify-content:center} }

/* ---------- 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)}

/* Teaser list inside the two hub cards. */
.res-list{
  list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line-2);
  font-size:14px;color:var(--ink-2);display:grid;gap:8px;
}
.res-list li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res-list .mono{font-size:11px;color:#9AA1B8;margin-right:8px}
/* 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}

/* ---------- 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:10px;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 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:10.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:10.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:10px;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}

/* ---- 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}
.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%)}
}

/* ---------- related services (internal linking) ---------- */
.rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,20px)}
.rel-card{
  display:flex;flex-direction:column;gap:8px;
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:22px 20px;transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s ease,border-color .22s ease;
}
.rel-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(124,108,255,.28)}
.rel-ic{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  font-size:17px;color:#fff;margin-bottom:6px;
  background:var(--ac,var(--violet));box-shadow:0 8px 20px color-mix(in srgb,var(--ac,var(--violet)) 34%,transparent);
}
.rel-card b{font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.rel-sub{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.rel-go{margin-top:auto;padding-top:10px;font-size:13px;font-weight:600;color:var(--violet)}
.rel-go .ar{display:inline-block;transition:transform .2s cubic-bezier(.2,.8,.3,1)}
.rel-card:hover .rel-go .ar{transform:translateX(4px)}

@media (max-width:1000px){ .rel-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .rel-grid{grid-template-columns:1fr} }