@charset "UTF-8";
/* ==========================================================================
   AWGCOR — awgcor.css
   Build. Automate. Scale.

   0.  Design tokens
   1.  Reset & base
   2.  Typography
   3.  Layout utilities
   4.  Motion system (reveal / split / clip)
   5.  Buttons & links
   6.  Chrome logo
   7.  Preloader
   8.  Chrome furniture (progress, cursor, section rail, back-to-top)
   9.  Header, nav, mega menu
   10. Mobile menu
   11. Hero
   12. Marquee
   13. Stats
   14. Services bento
   15. Approach (pinned story)
   16. Console (dashboard)
   17. Process rail
   18. Work grid + filters
   19. Why grid
   20. Testimonials slider
   21. Pricing + scoping estimator
   22. FAQ accordion
   23. Final CTA
   24. Contact
   25. Footer
   26. Command palette
   27. Toasts
   28. Page transition curtain
   29. Responsive
   30. Sub-page conversion furniture
   31. Content blocks
   32. Reduced motion / print
   ========================================================================== */

/* ==========================================================================
   0. DESIGN TOKENS
   ========================================================================== */
:root{
  /* ---- ink ---- */
  --ink-900:#08090C;
  --ink-850:#0C0E13;
  --ink-800:#111319;
  --ink-750:#161922;
  --ink-700:#1C202B;
  --ink-650:#232838;

  /* ---- paper ---- */
  --paper:#FFFFFF;
  --paper-soft:#F5F6F8;
  --paper-warm:#EFF1F4;
  --paper-line:#E4E7EC;

  /* ---- brand ---- */
  --blue:#2F5FFF;
  --blue-deep:#1B3DD1;
  --blue-dark:#132A8F;
  --cyan:#00E0FF;
  --violet:#7B5CFF;
  --mint:#22E5A7;
  --amber:#FFB020;
  --rose:#E5484D;

  /* ---- chrome (logo + metal accents) ---- */
  --chrome-hi:#FFFFFF;
  --chrome-mid:#C6CCD6;
  --chrome-lo:#767D89;

  /* ---- text on dark ---- */
  --t-hi:#FFFFFF;
  --t-mid:#B9C0CE;
  --t-low:#7A8296;
  --t-dim:#5A6172;

  /* ---- text on light ---- */
  --t-ink-hi:#08090C;
  --t-ink-mid:#4A5163;
  --t-ink-low:#767F92;

  /* ---- lines ---- */
  --line-d:rgba(255,255,255,.09);
  --line-d2:rgba(255,255,255,.16);
  --line-d3:rgba(255,255,255,.28);
  --line-l:rgba(8,9,12,.10);
  --line-l2:rgba(8,9,12,.18);

  /* ---- geometry ---- */
  --r-xs:8px;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:30px;
  --pill:999px;
  --header-h:78px;

  /* ---- elevation ---- */
  --sh-1:0 2px 6px -2px rgba(8,9,12,.16);
  --sh-2:0 18px 36px -22px rgba(8,9,12,.34);
  --sh-3:0 34px 64px -34px rgba(8,9,12,.42);
  --sh-4:0 60px 110px -52px rgba(8,9,12,.55);
  --sh-glow:0 18px 46px -18px rgba(47,95,255,.72);

  /* ---- motion ---- */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,.05,.36,1);
  --e-soft:cubic-bezier(.25,.8,.3,1);
  --e-back:cubic-bezier(.34,1.56,.64,1);

  /* ---- type ---- */
  --f-display:'Clash Display','Satoshi',system-ui,-apple-system,sans-serif;
  --f-body:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --f-serif:'Zodiak','Iowan Old Style','Times New Roman',serif;
  --f-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  /* ---- fluid scale ---- */
  --gut:clamp(20px,5vw,40px);
  --sec-y:clamp(84px,11vw,152px);
  --h1:clamp(2.4rem,1.05rem + 5.3vw,5.05rem);
  --h2:clamp(2rem,1.25rem + 3.4vw,3.35rem);
  --h3:clamp(1.35rem,1.15rem + .8vw,1.7rem);
  --lead:clamp(1.02rem,.96rem + .42vw,1.24rem);
  --body:clamp(.94rem,.9rem + .18vw,1rem);
  --micro:.78rem;
}

/* ==========================================================================
   1. RESET & BASE
   ========================================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 24px);
  background:var(--ink-900);
}

body{
  font-family:var(--f-body);
  font-size:var(--body);
  line-height:1.6;
  background:var(--ink-900);
  color:var(--t-ink-hi);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;                 /* clip (not hidden) keeps position:sticky alive */
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
}
body.is-locked{overflow:hidden;}

img,svg,video,canvas{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
ul,ol{list-style:none;}
input,textarea,select,button{font:inherit;color:inherit;}
table{border-collapse:collapse;width:100%;}
summary{list-style:none;}
summary::-webkit-details-marker{display:none;}

::selection{background:var(--blue);color:#fff;}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px;}
:focus:not(:focus-visible){outline:none;}

.sr-only{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:fixed;top:-100px;left:16px;z-index:600;
  background:#fff;color:#08090C;padding:12px 20px;border-radius:var(--pill);
  font-weight:700;font-size:.88rem;transition:top .3s var(--e-out);
}
.skip:focus{top:16px;}

/* thin scrollbars on the dark shell */
@supports (scrollbar-color: auto){
  html{scrollbar-color:rgba(255,255,255,.22) transparent;scrollbar-width:thin;}
}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:10px;border:3px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3);background-clip:content-box;}

/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */
h1,h2,h3,h4,h5{
  font-family:var(--f-display);
  font-weight:600;
  /* 1.05 rather than 1.02 — the Zodiak italic accents carry real descenders
     and collided with the next line at tighter leading */
  line-height:1.05;
  letter-spacing:-.028em;
  text-wrap:balance;
}
p{text-wrap:pretty;}

.ital{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.015em;
}
.grad{
  background:linear-gradient(96deg,var(--blue) 0%,var(--cyan) 58%,var(--violet) 108%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.metal{
  background:linear-gradient(178deg,#fff 8%,#E7EBF2 26%,#9BA3B2 49%,#6E7583 51%,#C9D0DA 66%,#FFFFFF 82%,#B7BEC9 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.mono{font-family:var(--f-mono);font-size:.86em;letter-spacing:-.01em;}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);margin-bottom:22px;
}
.eyebrow::before{
  content:"";width:26px;height:1px;flex:none;
  background:linear-gradient(90deg,transparent,currentColor);
}
.s-dark .eyebrow,.s-dark-2 .eyebrow,.cta .eyebrow{color:var(--cyan);}

/* ==========================================================================
   3. LAYOUT UTILITIES
   ========================================================================== */
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--gut);}
.wrap-wide{width:100%;max-width:1480px;margin-inline:auto;padding-inline:var(--gut);}
.wrap-nar{width:100%;max-width:920px;margin-inline:auto;padding-inline:var(--gut);}

/* Flex and grid items default to min-width:auto, which resolves to their
   min-content width — a single long word or a nowrap pill inside then refuses
   to shrink and pushes the whole page sideways on a 320px phone. These are the
   containers that actually did it; measured, not guessed. */
.story-steps,.dash-copy,.dsd,.console-main,.dsd-mock,.story-panel,
.price-grid > *,.contact > *,.dash > *,.proc > *,.feat > *{min-width:0;}

section{position:relative;padding-block:var(--sec-y);}
[id]{scroll-margin-top:calc(var(--header-h) + 20px);}

.s-dark{background:var(--ink-900);color:var(--t-hi);}
.s-dark-2{background:var(--ink-850);color:var(--t-hi);}
.s-light{background:var(--paper);color:var(--t-ink-hi);}
.s-soft{background:var(--paper-soft);color:var(--t-ink-hi);}

.s-head{max-width:46ch;margin-bottom:clamp(48px,6vw,80px);}
/* `ch` resolves against this block's font-size (~1rem), not the h2's display
   size, so a centred 46ch head squeezed long titles into four cramped lines.
   Centred heads get a real width; the paragraph keeps its reading measure. */
.s-head.center{margin-inline:auto;text-align:center;max-width:min(50rem,100%);}
/* 46ch on .s-head resolves against the block's ~1rem font-size, not the h2's
   display size — about 368px, which folds a normal heading onto three lines.
   Content-block headings opt into a width measured in the heading's own terms. */
.s-head.wide{max-width:min(46rem,100%);}
.s-head.wide h2{max-width:22ch;}
.s-head.center .eyebrow{justify-content:center;}
.s-head h2{font-size:var(--h2);}
/* :not(.eyebrow) — a bare `p` rule here outranks .eyebrow and would restyle it */
.s-head p:not(.eyebrow){font-size:var(--lead);color:var(--t-ink-mid);margin-top:20px;line-height:1.62;max-width:54ch;}
.s-head.center p:not(.eyebrow){margin-inline:auto;}
.s-dark .s-head p:not(.eyebrow),.s-dark-2 .s-head p:not(.eyebrow){color:var(--t-mid);}

.s-head-row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;
  margin-bottom:clamp(40px,5vw,66px);
}
.s-head-row .s-head{margin-bottom:0;}

.hr-soft{height:1px;background:var(--line-l);border:0;}
.s-dark .hr-soft,.s-dark-2 .hr-soft{background:var(--line-d);}

.noise{
  position:absolute;inset:0;pointer-events:none;opacity:.42;mix-blend-mode:overlay;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ==========================================================================
   4. MOTION SYSTEM
   ========================================================================== */
[data-reveal]{
  opacity:0;
  transform:translate3d(var(--rx,0),var(--ry,30px),0) scale(var(--rs,1));
  transition:opacity .9s var(--e-out),transform 1.05s var(--e-out);
  transition-delay:var(--rd,0ms);
  will-change:opacity,transform;
}
[data-reveal="fade"]{--ry:0px;}
[data-reveal="scale"]{--ry:20px;--rs:.965;}
[data-reveal="left"]{--rx:-34px;--ry:0px;}
[data-reveal="right"]{--rx:34px;--ry:0px;}
[data-reveal="up-lg"]{--ry:58px;}
[data-reveal].is-in{opacity:1;transform:translate3d(0,0,0) scale(1);will-change:auto;}

/* split-word headline mask.
   The mask box has to reach below the baseline or serif-italic descenders
   (y, p, g) get sliced off; the negative margin cancels the extra height so
   line spacing is unaffected. 145% then guarantees the word still starts
   fully outside that taller box. */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.28em;margin-bottom:-.28em;}
.split .w-i{
  display:inline-block;transform:translate3d(0,145%,0);
  transition:transform 1.05s var(--e-out);
  transition-delay:calc(var(--i,0) * 42ms);
}
.split.is-in .w-i{transform:translate3d(0,0,0);}

/* character stagger (used on small kickers) */
.chars .c{display:inline-block;opacity:0;transform:translateY(.5em);
  transition:opacity .5s var(--e-out),transform .6s var(--e-out);
  transition-delay:calc(var(--i,0) * 24ms);}
.chars.is-in .c{opacity:1;transform:none;}

/* clip-reveal for media */
.clipin{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--e-out);}
.clipin.is-in{clip-path:inset(0 0 0% 0);}

/* line draw */
.drawin{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  transition:stroke-dashoffset 1.8s var(--e-out);}
.is-in .drawin,.drawin.is-in{stroke-dashoffset:0;}

/* ==========================================================================
   5. BUTTONS & LINKS
   ========================================================================== */
.btn{
  --bg:transparent;--fg:currentColor;--bd:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:.92rem;font-weight:600;letter-spacing:-.005em;
  padding:13px 26px;min-height:46px;border-radius:var(--pill);
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  isolation:isolate;overflow:hidden;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),
             background .35s var(--e-out),color .35s var(--e-out),border-color .35s var(--e-out);
}
.btn svg{width:15px;height:15px;flex:none;transition:transform .5s var(--e-out);}
.btn:hover svg:not(.no-slide){transform:translateX(3px);}
.btn:active{transform:translateY(-1px) scale(.985);}
.btn-lg{padding:16px 32px;min-height:54px;font-size:.98rem;}
.btn-sm{padding:9px 18px;min-height:38px;font-size:.84rem;}
.btn-block{width:100%;}

.btn-primary{
  --fg:#fff;
  background:linear-gradient(120deg,var(--blue-deep),var(--blue) 42%,var(--cyan) 130%);
  box-shadow:0 10px 30px -12px rgba(47,95,255,.75),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(120deg,var(--cyan),var(--blue) 60%);
  transition:opacity .45s var(--e-out);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 42px -14px rgba(47,95,255,.85);}
.btn-primary:hover::after{opacity:1;}

.btn-glass{--fg:var(--t-hi);--bd:var(--line-d2);background:rgba(255,255,255,.04);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.btn-glass:hover{--bd:rgba(255,255,255,.4);background:rgba(255,255,255,.09);transform:translateY(-3px);}

.btn-ink{--fg:#fff;background:var(--ink-900);}
.btn-ink:hover{transform:translateY(-3px);box-shadow:0 18px 36px -16px rgba(8,9,12,.6);}

.btn-line{--fg:var(--t-ink-hi);--bd:var(--line-l2);}
.btn-line:hover{--bd:var(--ink-900);background:var(--ink-900);--fg:#fff;transform:translateY(-3px);}

.btn-ghost{--fg:currentColor;}
.btn-ghost:hover{background:rgba(127,127,127,.10);}

.btn-row{display:flex;gap:14px;flex-wrap:wrap;}
.btn-row.center{justify-content:center;}

/* ripple */
.ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 68%);
  transform:translate(-50%,-50%) scale(0);opacity:.85;
  animation:rippleOut .72s var(--e-out) forwards;
  z-index:0;
}
@keyframes rippleOut{to{transform:translate(-50%,-50%) scale(1);opacity:0;}}
.btn-line .ripple,.btn-ghost .ripple{background:radial-gradient(circle,rgba(8,9,12,.28),rgba(8,9,12,0) 68%);}

/* underline link */
.ulink{position:relative;display:inline-block;font-weight:600;}
.ulink::after{
  content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .55s var(--e-out);
}
.ulink:hover::after{transform:scaleX(1);transform-origin:0 50%;}

/* arrow link */
.alink{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;}
.alink svg{width:14px;height:14px;transition:transform .45s var(--e-out);}
.alink:hover svg{transform:translateX(4px);}

/* ==========================================================================
   6. CHROME LOGO
   ========================================================================== */
.logo{
  display:inline-flex;align-items:center;gap:11px;line-height:1;
  -webkit-tap-highlight-color:transparent;
}
.logo .logo-svg{
  height:23px;width:auto;flex:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));
  transition:transform .55s var(--e-out),filter .55s var(--e-out);
}
.logo:hover .logo-svg{transform:translateY(-1px);filter:drop-shadow(0 4px 14px rgba(0,224,255,.35));}

/* sheen sweep across the chrome wordmark */
.logo-sheen{
  pointer-events:none;
  transform:translateX(-40%);
  animation:sheenSweep 6.5s var(--e-io) infinite;
}
@keyframes sheenSweep{
  0%,62%{transform:translateX(-45%);}
  86%,100%{transform:translateX(145%);}
}

.logo-lg .logo-svg{height:clamp(26px,4.4vw,40px);}
.logo-xl .logo-svg{height:clamp(38px,9vw,86px);}

/* ==========================================================================
   7. PRELOADER
   ========================================================================== */
#preload{
  position:fixed;inset:0;z-index:999;background:var(--ink-900);
  display:grid;place-items:center;
  transition:opacity .7s var(--e-out),visibility .7s;
}
#preload.done{opacity:0;visibility:hidden;pointer-events:none;}
.pl-inner{text-align:center;position:relative;z-index:1;padding-inline:24px;}
.pl-glow{
  position:absolute;width:min(70vw,620px);height:min(70vw,620px);
  left:50%;top:50%;transform:translate(-50%,-50%);
  border-radius:50%;filter:blur(90px);opacity:.55;
  background:radial-gradient(circle,rgba(47,95,255,.5),transparent 66%);
}
.pl-logo{
  width:min(62vw,340px);margin-inline:auto;
  opacity:0;transform:translateY(14px) scale(.96);
  animation:plIn .9s var(--e-out) .1s forwards;
}
@keyframes plIn{to{opacity:1;transform:none;}}
.pl-bar{
  margin:26px auto 0;height:2px;width:min(240px,54vw);background:rgba(255,255,255,.12);
  border-radius:2px;overflow:hidden;
}
.pl-bar i{
  display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transition:width .3s linear;
}
.pl-meta{
  margin-top:16px;display:flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.22em;color:var(--t-dim);text-transform:uppercase;
}
.pl-meta b{color:var(--t-mid);font-weight:600;min-width:3.2em;text-align:right;}

/* ==========================================================================
   8. CHROME FURNITURE
   ========================================================================== */
#prog{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:130;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--violet));
  pointer-events:none;
}

.cursor,.cursor-dot{
  position:fixed;top:0;left:0;z-index:900;pointer-events:none;
  border-radius:50%;mix-blend-mode:difference;opacity:0;
  transition:opacity .35s ease,width .35s var(--e-out),height .35s var(--e-out);
}
.cursor{width:34px;height:34px;border:1px solid rgba(255,255,255,.75);}
.cursor-dot{width:5px;height:5px;background:#fff;}
body.cursor-on .cursor,body.cursor-on .cursor-dot{opacity:1;}
.cursor-label{
  position:fixed;top:0;left:0;z-index:901;pointer-events:none;
  font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#08090C;background:#fff;padding:6px 11px;border-radius:var(--pill);
  opacity:0;transform:scale(.7);transform-origin:0 0;
  transition:opacity .3s var(--e-out),transform .35s var(--e-back);
  white-space:nowrap;
}
.cursor-label.on{opacity:1;transform:scale(1);}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot,.cursor-label{display:none !important;}}

/* section rail */
#rail-dots{
  position:fixed;right:max(14px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);
  z-index:105;display:flex;flex-direction:column;gap:4px;padding:8px 6px;
  border-radius:var(--pill);
  opacity:0;visibility:hidden;transition:opacity .5s var(--e-out),visibility .5s;
}
#rail-dots.on{opacity:1;visibility:visible;}
#rail-dots a{
  position:relative;display:block;width:22px;height:20px;
}
#rail-dots i{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  display:block;width:7px;height:7px;border-radius:50%;
  background:currentColor;opacity:.28;
  transition:opacity .35s,width .4s var(--e-out),background .35s;
}
#rail-dots a:hover i{opacity:.7;}
#rail-dots a.on i{opacity:1;width:16px;border-radius:var(--pill);background:linear-gradient(90deg,var(--blue),var(--cyan));}
#rail-dots span{
  position:absolute;right:26px;top:50%;transform:translate(6px,-50%);
  font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  background:rgba(8,9,12,.86);color:#fff;padding:5px 10px;border-radius:var(--pill);
  border:1px solid var(--line-d);white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .3s var(--e-out),transform .35s var(--e-out);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
#rail-dots a:hover span{opacity:1;transform:translate(0,-50%);}
body.rail-light #rail-dots{color:var(--ink-900);}
body:not(.rail-light) #rail-dots{color:#fff;}

/* back to top */
#totop{
  position:fixed;right:max(18px,env(safe-area-inset-right));
  /* --totop-lift gets set when the sticky conversion bar is up, so the two
     never stack on top of each other on a narrow screen. */
  bottom:calc(max(18px,env(safe-area-inset-bottom)) + var(--totop-lift,0px));
  z-index:106;width:46px;height:46px;border-radius:50%;
  transition:bottom .5s var(--e-out);
  display:grid;place-items:center;
  background:rgba(8,9,12,.7);border:1px solid var(--line-d2);color:#fff;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .45s var(--e-out),transform .5s var(--e-out),visibility .45s,background .35s;
}
#totop.on{opacity:1;visibility:visible;transform:none;}
#totop:hover{background:var(--blue);border-color:transparent;transform:translateY(-3px);}
#totop svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
#totop .ringp{
  position:absolute;inset:-1px;border-radius:50%;transform:rotate(-90deg);
}
#totop .ringp circle{fill:none;stroke:var(--cyan);stroke-width:2;
  stroke-dasharray:var(--c,144);stroke-dashoffset:var(--o,144);transition:stroke-dashoffset .15s linear;}

/* ==========================================================================
   9. HEADER, NAV, MEGA MENU
   ========================================================================== */
#hdr{
  position:fixed;top:0;left:0;right:0;z-index:120;
  padding-block:18px;
  padding-top:max(18px,env(safe-area-inset-top));
  transform:translateY(0);
  border-bottom:1px solid transparent;
  transition:transform .55s var(--e-out),padding .5s var(--e-out),
             background .5s var(--e-out),backdrop-filter .5s var(--e-out),
             border-color .5s var(--e-out);
}
#hdr.stuck{
  padding-block:11px;
  background:rgba(8,9,12,.72);
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  border-bottom-color:var(--line-d);
}
#hdr.hide{transform:translateY(-115%);}
#hdr .wrap-wide{display:flex;align-items:center;justify-content:space-between;gap:18px;}

.nav{
  position:relative;
  display:flex;align-items:center;gap:2px;
  padding:5px;border-radius:var(--pill);
  border:1px solid var(--line-d);background:rgba(255,255,255,.03);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.nav > a,.nav > .nav-item > a,.nav > .nav-item > button{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:6px;
  font-size:.845rem;font-weight:500;color:var(--t-mid);
  padding:8px 15px;border-radius:var(--pill);
  transition:color .3s var(--e-out);
  white-space:nowrap;
}
.nav a:hover,.nav a.on,.nav button:hover,.nav .nav-item.open > button{color:#fff;}
.nav .caret{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--e-out);}
.nav .nav-item.open .caret{transform:rotate(180deg);}
.nav-pill{
  position:absolute;z-index:0;height:calc(100% - 10px);top:5px;left:0;
  border-radius:var(--pill);background:rgba(255,255,255,.10);
  border:1px solid var(--line-d);
  opacity:0;transform-origin:0 50%;
  transition:transform .55s var(--e-out),width .55s var(--e-out),opacity .35s;
}
.nav-item{position:static;}

/* mega menu */
.mega{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,10px);
  width:min(880px,calc(100vw - 40px));
  background:rgba(12,14,19,.92);
  border:1px solid var(--line-d2);border-radius:var(--r-lg);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
  backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  padding:22px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .4s var(--e-out),transform .5s var(--e-out),visibility .4s;
  z-index:5;
}
.nav-item.open .mega{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto;}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.mega-link{
  display:flex;gap:13px;padding:14px;border-radius:var(--r-md);
  border:1px solid transparent;
  transition:background .35s var(--e-out),border-color .35s var(--e-out),transform .4s var(--e-out);
}
.mega-link:hover{background:rgba(255,255,255,.05);border-color:var(--line-d);transform:translateY(-2px);}
.mega-ico{
  width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(47,95,255,.9),rgba(0,224,255,.8));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.mega-ico svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.mega-link b{display:block;font-size:.9rem;font-weight:600;color:#fff;margin-bottom:3px;letter-spacing:-.01em;}
.mega-link span{display:block;font-size:.78rem;color:var(--t-low);line-height:1.45;}
.mega-foot{
  margin-top:14px;padding-top:16px;border-top:1px solid var(--line-d);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.mega-foot p{font-size:.82rem;color:var(--t-low);}
.mega-foot b{color:#fff;font-weight:600;}

.hdr-cta{display:flex;align-items:center;gap:10px;}

.icon-btn{
  width:42px;height:42px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  border:1px solid var(--line-d);background:rgba(255,255,255,.04);color:#fff;
  transition:border-color .35s,background .35s,transform .45s var(--e-out);
}
.icon-btn:hover{border-color:var(--line-d3);background:rgba(255,255,255,.1);transform:translateY(-2px);}
.icon-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.icon-btn kbd{
  font-family:var(--f-mono);font-size:.6rem;color:var(--t-low);
  border:1px solid var(--line-d);border-radius:5px;padding:1px 4px;
}

.burger{
  display:none;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line-d);background:rgba(255,255,255,.04);
  place-items:center;flex:none;
}
.burger i{
  display:block;width:17px;height:1.5px;background:#fff;border-radius:2px;
  transition:transform .45s var(--e-out),opacity .3s;
}
.burger i+i{margin-top:5px;}
/* bar centres are 6.5px apart (1.5px bar + 5px gap) — meet in the middle */
body.menu-open .burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
body.menu-open .burger i:nth-child(2){opacity:0;}
body.menu-open .burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ==========================================================================
   10. MOBILE MENU
   ========================================================================== */
/* `display:block` + `min-height:100%` on the inner box, NOT flex centring on
   the scroller itself: with `justify-content:center` an overflowing menu
   pushes its own top out of reach and it can never be scrolled back. */
#menu{
  position:fixed;inset:0;z-index:110;background:var(--ink-900);
  display:block;
  padding:calc(var(--header-h) + 20px) var(--gut) 32px;
  clip-path:circle(0% at calc(100% - 46px) 44px);
  transition:clip-path .8s var(--e-out);
  visibility:hidden;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
body.menu-open #menu{clip-path:circle(150% at calc(100% - 46px) 44px);visibility:visible;}
#menu::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 50% at 80% 15%,rgba(47,95,255,.22),transparent 70%);
}
.menu-inner{
  position:relative;width:100%;min-height:100%;
  display:flex;flex-direction:column;justify-content:center;
}
.menu-links{display:flex;flex-direction:column;gap:0;}
.menu-links > a,.menu-acc > button{
  font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.7rem,8.4vw,2.6rem);color:#fff;
  padding:9px 0;display:flex;align-items:baseline;gap:14px;width:100%;text-align:left;
  opacity:0;transform:translateY(26px);
  transition:opacity .6s var(--e-out),transform .7s var(--e-out);
}
body.menu-open .menu-links > a,body.menu-open .menu-acc > button{
  opacity:1;transform:translateY(0);transition-delay:calc(.2s + var(--i,0) * .05s);
}
.menu-links em,.menu-acc em{
  font-family:var(--f-body);font-style:normal;font-size:.6rem;font-weight:700;
  letter-spacing:.16em;color:var(--t-low);flex:none;
}
.menu-acc > button .caret{
  margin-left:auto;width:18px;height:18px;stroke:var(--t-low);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;align-self:center;
  transition:transform .45s var(--e-out),stroke .3s;
}
.menu-acc.open > button .caret{transform:rotate(180deg);stroke:var(--cyan);}
.menu-sub{
  overflow:hidden;height:0;
  transition:height .55s var(--e-out);
}
.menu-sub ul{padding:4px 0 14px 34px;display:flex;flex-direction:column;gap:1px;}
.menu-sub a{
  display:block;padding:9px 0;font-size:1rem;font-weight:500;color:var(--t-mid);
  transition:color .3s,padding-left .35s var(--e-out);
}
.menu-sub a:hover{color:#fff;padding-left:6px;}

.menu-foot{
  position:relative;margin-top:34px;padding-top:24px;border-top:1px solid var(--line-d);
  display:flex;flex-direction:column;gap:12px;
  opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--e-out) .5s,transform .6s var(--e-out) .5s;
}
body.menu-open .menu-foot{opacity:1;transform:translateY(0);}
.menu-foot .btn{width:100%;}
.menu-foot .mail{font-size:.92rem;color:var(--t-mid);}
.menu-socials{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;}
.menu-socials a{
  font-size:.76rem;font-weight:600;color:var(--t-mid);
  padding:7px 13px;border-radius:var(--pill);border:1px solid var(--line-d);
  transition:color .3s,border-color .3s,background .3s;
}
.menu-socials a:hover{color:#fff;border-color:var(--line-d3);background:rgba(255,255,255,.06);}

/* ==========================================================================
   11. HERO
   ========================================================================== */
.hero{
  position:relative;background:var(--ink-900);color:var(--t-hi);
  padding-top:calc(var(--header-h) + clamp(46px,8vw,96px));
  padding-bottom:clamp(56px,7vw,100px);
  overflow:hidden;isolation:isolate;
}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
#field{position:absolute;inset:0;width:100%;height:100%;opacity:.9;}
.hero-grid{
  position:absolute;inset:-1px;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:clamp(38px,7vw,72px) clamp(38px,7vw,72px);
  -webkit-mask-image:radial-gradient(ellipse 95% 68% at 50% 12%,#000 30%,transparent 82%);
  mask-image:radial-gradient(ellipse 95% 68% at 50% 12%,#000 30%,transparent 82%);
}
.aur{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform;}
.aur-1{width:52vw;height:52vw;min-width:340px;min-height:340px;left:-10vw;top:-14vw;
  background:radial-gradient(circle,rgba(47,95,255,.62),transparent 66%);animation:float1 17s ease-in-out infinite;}
.aur-2{width:44vw;height:44vw;min-width:300px;min-height:300px;right:-8vw;top:2vw;
  background:radial-gradient(circle,rgba(0,224,255,.36),transparent 66%);animation:float2 21s ease-in-out infinite;}
.aur-3{width:40vw;height:40vw;min-width:280px;min-height:280px;left:32%;bottom:-18vw;
  background:radial-gradient(circle,rgba(123,92,255,.34),transparent 66%);animation:float1 25s ease-in-out infinite reverse;}
@keyframes float1{0%,100%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(5%,7%,0) scale(1.13);}}
@keyframes float2{0%,100%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(-7%,5%,0) scale(1.1);}}
.hero-spot{
  position:absolute;inset:0;transition:background .35s ease-out;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,22%),rgba(255,255,255,.07),transparent 62%);
}

.hero-inner{position:relative;z-index:2;max-width:1060px;margin-inline:auto;text-align:center;}
.hero .eyebrow{justify-content:center;}
.hero h1{font-size:var(--h1);letter-spacing:-.038em;margin-bottom:26px;}
.hero h1 .ital{letter-spacing:-.02em;}
.hero-lead{font-size:var(--lead);color:var(--t-mid);max-width:60ch;margin:0 auto 16px;line-height:1.62;}
.hero-sub{
  font-size:clamp(.88rem,.84rem + .2vw,.98rem);color:var(--t-low);
  max-width:64ch;margin:0 auto clamp(30px,4vw,44px);line-height:1.72;
}
.hero .btn-row{justify-content:center;}

.hero-badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:clamp(28px,4vw,40px);}
.hero-badges span{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.76rem;font-weight:600;letter-spacing:.02em;color:var(--t-mid);
  padding:8px 15px;border-radius:var(--pill);
  border:1px solid var(--line-d);background:rgba(255,255,255,.03);
  transition:border-color .4s,background .4s,transform .5s var(--e-out);
}
.hero-badges span:hover{border-color:var(--line-d3);background:rgba(255,255,255,.07);transform:translateY(-2px);}
.hero-badges span::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--cyan);box-shadow:0 0 10px var(--cyan);
  animation:blink 2.6s ease-in-out infinite;
}
.hero-badges span:nth-child(2)::before{animation-delay:.5s;background:var(--blue);box-shadow:0 0 10px var(--blue);}
.hero-badges span:nth-child(3)::before{animation-delay:1s;background:var(--violet);box-shadow:0 0 10px var(--violet);}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.28;}}

/* demo signpost — the interactive sections are the best thing on the page
   and they sit below the fold, so say so up front */
.demo-bar{
  margin-top:clamp(30px,4vw,44px);padding:clamp(18px,2.2vw,24px);
  border:1px solid var(--line-d);border-radius:var(--r-lg);
  background:linear-gradient(140deg,rgba(47,95,255,.12),rgba(0,224,255,.04) 55%,transparent);
  text-align:left;
}
.db-live{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:10px;
}
.db-live::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 9px var(--cyan);animation:blink 2.2s ease-in-out infinite;
}
.demo-bar > p{font-size:.92rem;color:var(--t-mid);margin-bottom:14px;line-height:1.55;}
.db-links{display:flex;flex-wrap:wrap;gap:8px;}
.db-links a{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.82rem;font-weight:600;color:#fff;
  padding:9px 15px;border-radius:var(--pill);
  border:1px solid var(--line-d2);background:rgba(255,255,255,.05);
  transition:border-color .35s,background .35s,transform .4s var(--e-out);
}
.db-links a:hover{border-color:var(--cyan);background:rgba(0,224,255,.1);transform:translateY(-2px);}
.db-links svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--e-out);}
.db-links a:hover svg{transform:translateX(3px);}

/* hero network visual */
.net{position:relative;margin-top:clamp(28px,4.2vw,58px);}
.net svg{width:100%;height:auto;overflow:visible;}
.net-line{fill:none;stroke:url(#gLine);stroke-width:1.35;
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  transition:stroke-dashoffset 1.8s var(--e-out);}
.net.is-in .net-line{stroke-dashoffset:0;}
.net-ring{fill:rgba(8,9,12,.86);stroke:rgba(255,255,255,.14);stroke-width:1;
  transition:stroke .4s,fill .4s;}
.net-node:hover .net-ring{stroke:rgba(0,224,255,.7);fill:rgba(0,224,255,.08);}
.net-lbl{font-family:var(--f-body);font-size:11px;font-weight:700;letter-spacing:.1em;fill:var(--t-mid);
  transition:fill .4s;}
.net-node:hover .net-lbl{fill:#fff;}
.net-core-lbl{font-family:var(--f-display);font-size:16px;font-weight:600;fill:#fff;letter-spacing:.02em;}
.net-node{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);
  transition:opacity .6s var(--e-out),transform .8s var(--e-out);
  transition-delay:calc(var(--i,0) * 90ms);cursor:pointer;}
.net.is-in .net-node{opacity:1;transform:scale(1);}
.net-pulse{filter:drop-shadow(0 0 7px var(--cyan));}
.net-halo{transform-box:fill-box;transform-origin:center;animation:halo 3.4s ease-out infinite;}
@keyframes halo{0%{transform:scale(.82);opacity:.55;}70%{transform:scale(1.35);opacity:0;}100%{opacity:0;}}
.net-desktop{display:block;}
.net-mobile{display:none;}

/* ==========================================================================
   12. MARQUEE
   ========================================================================== */
.mq-band{
  background:var(--ink-900);padding-block:clamp(14px,2.4vw,20px);
  border-block:1px solid var(--line-d);overflow:hidden;position:relative;
}
.mq-band + .mq-band{border-top:0;}
.mq-band::before,.mq-band::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(40px,9vw,140px);z-index:2;pointer-events:none;
}
.mq-band::before{left:0;background:linear-gradient(90deg,var(--ink-900),transparent);}
.mq-band::after{right:0;background:linear-gradient(270deg,var(--ink-900),transparent);}
.mq{display:flex;width:max-content;will-change:transform;}
.mq-track{display:flex;align-items:center;gap:clamp(26px,4vw,50px);padding-right:clamp(26px,4vw,50px);}
.mq-item{
  display:inline-flex;align-items:center;gap:14px;flex:none;
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(1rem,2.4vw,1.55rem);letter-spacing:-.02em;color:var(--t-mid);
  white-space:nowrap;transition:color .4s;
}
.mq-item:hover{color:#fff;}
.mq-item svg{width:14px;height:14px;stroke:var(--cyan);fill:none;stroke-width:2;opacity:.8;}
.mq-item.alt{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.3);}
.mq-item.alt:hover{-webkit-text-stroke:1px rgba(0,224,255,.75);}
.mq-sm .mq-item{font-size:clamp(.8rem,1.5vw,.95rem);font-family:var(--f-body);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--t-low);}
.mq-sm .mq-item svg{width:11px;height:11px;}

/* ==========================================================================
   13. STATS
   ========================================================================== */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line-d);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent);
}
.stat{padding:clamp(24px,3vw,36px);border-right:1px solid var(--line-d);position:relative;overflow:hidden;}
.stat:last-child{border-right:0;}
.stat::before{
  content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(300px circle at var(--cx,50%) var(--cy,50%),rgba(47,95,255,.14),transparent 65%);
  transition:opacity .45s var(--e-out);
}
.stat:hover::before{opacity:1;}
.stat b{
  position:relative;display:block;font-family:var(--f-display);font-weight:600;
  font-size:clamp(2.2rem,5vw,3.3rem);letter-spacing:-.04em;line-height:1;
  background:linear-gradient(150deg,#fff 25%,rgba(255,255,255,.42));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat span{position:relative;display:block;margin-top:12px;font-size:.86rem;color:var(--t-low);line-height:1.5;max-width:24ch;}
.stat::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transition:width 1.1s var(--e-out) .25s;
}
.stat.is-in::after{width:100%;}

/* ==========================================================================
   14. SERVICES BENTO
   ========================================================================== */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.card{
  position:relative;background:var(--paper);border:1px solid var(--line-l);
  border-radius:var(--r-lg);padding:clamp(26px,2.6vw,34px);overflow:hidden;
  transition:transform .6s var(--e-out),box-shadow .6s var(--e-out),border-color .5s var(--e-out);
  display:flex;flex-direction:column;
}
.card::before{
  content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(340px circle at var(--cx,50%) var(--cy,50%),rgba(47,95,255,.09),transparent 62%);
  transition:opacity .45s var(--e-out);
}
.card:hover{transform:translateY(-5px);border-color:rgba(47,95,255,.35);box-shadow:0 28px 50px -30px rgba(8,9,12,.4);}
.card:hover::before{opacity:1;}
.card > *{position:relative;}
.card.span2{grid-column:span 2;}
a.card:focus-visible{outline-offset:5px;}

.ico{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:22px;flex:none;
  background:linear-gradient(140deg,var(--blue),var(--cyan));
  box-shadow:0 10px 22px -12px rgba(47,95,255,.85),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .55s var(--e-back);
}
.card:hover .ico{transform:translateY(-2px) rotate(-4deg) scale(1.06);}
.ico svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

.card h3{font-size:var(--h3);margin-bottom:9px;}
.card > p{font-size:.92rem;color:var(--t-ink-mid);line-height:1.6;margin-bottom:20px;max-width:46ch;}
.tags{display:flex;flex-wrap:wrap;gap:7px;}
.tags li{
  font-size:.755rem;font-weight:600;color:var(--t-ink-mid);
  padding:6px 12px;border-radius:var(--pill);
  border:1px solid var(--line-l);background:var(--paper-soft);
  transition:background .35s,color .35s,border-color .35s,transform .4s var(--e-out);
}
.card:hover .tags li{border-color:rgba(47,95,255,.22);}
.tags li:hover{transform:translateY(-2px);background:#fff;}
.card-num{
  position:absolute;top:22px;right:26px;
  font-family:var(--f-display);font-size:.8rem;font-weight:600;color:var(--t-ink-low);opacity:.55;
}
.card-go{
  margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:8px;
  font-size:.84rem;font-weight:700;color:var(--blue);letter-spacing:-.01em;
}
.card-go svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--e-out);}
.card:hover .card-go svg{transform:translateX(4px);}

/* featured bento visual — browser mock */
.feat{display:grid;grid-template-columns:1fr .95fr;gap:32px;align-items:center;}
.mock{
  border-radius:14px;overflow:hidden;background:var(--ink-850);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 60px -32px rgba(8,9,12,.65);
}
.mock-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line-d);}
.mock-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16);}
.mock-bar i:nth-child(1){background:rgba(229,72,77,.5);}
.mock-bar i:nth-child(2){background:rgba(255,176,32,.5);}
.mock-bar i:nth-child(3){background:rgba(34,229,167,.5);}
.mock-url{
  margin-left:8px;flex:1;height:20px;border-radius:5px;background:rgba(255,255,255,.05);
  font-size:.62rem;color:var(--t-low);display:flex;align-items:center;padding-inline:9px;letter-spacing:.03em;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--f-mono);
}
.mock-body{padding:18px;display:grid;gap:11px;}
.sk{height:9px;border-radius:5px;background:rgba(255,255,255,.08);position:relative;overflow:hidden;}
.sk::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);
  animation:shimmer 2.6s var(--e-io) infinite;
}
@keyframes shimmer{to{transform:translateX(100%);}}
.sk.w70{width:70%;}.sk.w45{width:45%;}.sk.w90{width:90%;}
.sk.hero-sk{height:56px;border-radius:9px;background:linear-gradient(120deg,rgba(47,95,255,.4),rgba(0,224,255,.16));}
.sk-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.sk-row div{height:38px;border-radius:8px;background:rgba(255,255,255,.055);border:1px solid var(--line-d);}

/* inverted CTA card */
.card.invert{background:var(--ink-900);border-color:transparent;color:#fff;}
.card.invert h3{color:#fff;}
.card.invert > p{color:var(--t-mid);}
.card.invert::before{background:radial-gradient(340px circle at var(--cx,50%) var(--cy,50%),rgba(0,224,255,.14),transparent 62%);}
.card.invert:hover{border-color:rgba(0,224,255,.35);}

/* ==========================================================================
   15. APPROACH (PINNED STORY)
   ========================================================================== */
.story{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(40px,5vw,80px);align-items:start;}
.story-steps{display:flex;flex-direction:column;gap:clamp(60px,12vh,130px);padding-block:6vh 12vh;}
.story-step{opacity:.32;transition:opacity .6s var(--e-out);}
.story-step.on{opacity:1;}
.story-step .k{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:16px;
}
.story-step .k b{
  font-family:var(--f-display);font-size:.78rem;letter-spacing:.06em;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-d2);color:#fff;
}
.story-step h3{font-size:clamp(1.5rem,2.9vw,2.2rem);margin-bottom:14px;}
.story-step > p{font-size:1rem;color:var(--t-mid);line-height:1.68;max-width:42ch;}
.story-step ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.story-step ul li{
  font-size:.76rem;font-weight:600;color:var(--t-mid);
  padding:6px 13px;border-radius:var(--pill);border:1px solid var(--line-d);
  transition:border-color .4s,color .3s;
}
.story-step.on ul li{border-color:var(--line-d2);}
.story-visual{
  position:sticky;top:calc(var(--header-h) + 5vh);height:min(580px,74vh);
  display:grid;place-items:center;
}
.story-panel{
  grid-area:1/1;width:100%;
  opacity:0;transform:translateY(26px) scale(.97);
  transition:opacity .7s var(--e-out),transform .8s var(--e-out);
  pointer-events:none;
}
.story-panel.on{opacity:1;transform:none;pointer-events:auto;}

/* chat mock */
.chat{padding:20px;display:grid;gap:12px;}
.msg{max-width:82%;padding:12px 15px;border-radius:14px;font-size:.85rem;line-height:1.55;
  opacity:0;transform:translateY(10px);transition:opacity .5s var(--e-out),transform .6s var(--e-out);}
.story-panel.on .msg{opacity:1;transform:none;transition-delay:calc(.25s + var(--i,0) * .28s);}
.msg.them{background:rgba(255,255,255,.055);border:1px solid var(--line-d);color:var(--t-mid);border-bottom-left-radius:4px;}
.msg.us{margin-left:auto;background:linear-gradient(130deg,var(--blue),var(--blue-deep));color:#fff;border-bottom-right-radius:4px;
  box-shadow:0 12px 26px -16px rgba(47,95,255,.9);}
.typing{display:inline-flex;gap:4px;align-items:center;}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--t-low);animation:dot 1.3s ease-in-out infinite;}
.typing i:nth-child(2){animation-delay:.18s;}
.typing i:nth-child(3){animation-delay:.36s;}
@keyframes dot{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}
.chat-meta{
  display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--line-d);
  font-size:.78rem;color:var(--t-mid);
}
.chat-meta .av{width:24px;height:24px;border-radius:50%;background:linear-gradient(140deg,var(--blue),var(--cyan));flex:none;}
.chat-meta .live{
  margin-left:auto;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);
  display:inline-flex;align-items:center;gap:6px;
}
.chat-meta .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 9px var(--cyan);animation:blink 2s infinite;}

/* flow mock */
.flow{padding:24px;display:grid;gap:12px;}
.flow-node{
  display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:12px;
  background:rgba(255,255,255,.035);border:1px solid var(--line-d);
  font-size:.85rem;color:var(--t-mid);
  opacity:.45;transition:opacity .5s var(--e-out),border-color .5s,background .5s,transform .5s var(--e-out);
}
.flow-node.lit{opacity:1;border-color:rgba(0,224,255,.4);background:rgba(0,224,255,.06);transform:translateX(3px);}
.flow-node .n{
  width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--blue),var(--cyan));
}
.flow-node .n svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2;}
.flow-node .tick{margin-left:auto;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-low);white-space:nowrap;flex:none;}
.flow-node.lit .tick{color:var(--cyan);}
.flow-arrow{height:16px;width:1px;background:var(--line-d2);margin-left:31px;}

/* analytics mock */
.anly{padding:22px;}
.anly-top{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px;}
.anly-top b{font-family:var(--f-display);font-size:1.85rem;font-weight:600;color:#fff;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;}
.anly-top small{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t-low);margin-bottom:6px;}
.anly-chip{font-size:.72rem;font-weight:700;color:#04140f;background:var(--cyan);padding:4px 10px;border-radius:var(--pill);}
.spark{width:100%;height:auto;}
.spark path.ln{fill:none;stroke:url(#gLine2);stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:700;stroke-dashoffset:700;}
.story-panel.on .spark path.ln{animation:draw 1.6s var(--e-out) forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
.spark path.fill{fill:url(#gFill);opacity:0;transition:opacity .9s .5s;}
.story-panel.on .spark path.fill{opacity:1;}
.bars{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:74px;margin-top:20px;}
.bars i{
  display:block;border-radius:5px 5px 2px 2px;height:0;
  background:linear-gradient(180deg,var(--cyan),rgba(47,95,255,.55));
  transition:height 1s var(--e-out);
}
.story-panel.on .bars i{height:var(--h);}

/* ==========================================================================
   16. CONSOLE (DASHBOARD)
   ========================================================================== */
.dash{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(38px,4.4vw,64px);align-items:center;}
.dash-copy h2{font-size:var(--h2);margin-bottom:20px;}
.dash-copy > p:not(.eyebrow){font-size:var(--lead);color:var(--t-ink-mid);line-height:1.66;margin-bottom:28px;max-width:46ch;}
.dash-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
.dash-list li{display:flex;align-items:center;gap:11px;font-size:.9rem;color:var(--t-ink-mid);font-weight:500;}
.dash-list li svg{width:15px;height:15px;flex:none;stroke:var(--blue);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* the app shell */
.console{
  background:var(--ink-850);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-4);color:var(--t-hi);
  display:grid;grid-template-columns:186px 1fr;
  min-height:520px;
}
.console-side{
  border-right:1px solid var(--line-d);padding:16px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.028),transparent);
  display:flex;flex-direction:column;gap:4px;
}
.console-brand{display:flex;align-items:center;gap:9px;padding:6px 10px 16px;}
.console-brand .logo-svg{height:15px;}
.console-side h5{
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t-dim);
  padding:14px 10px 7px;font-family:var(--f-body);font-weight:700;
}
.side-item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;
  font-size:.795rem;color:var(--t-mid);cursor:pointer;width:100%;text-align:left;
  transition:background .3s,color .3s;
}
.side-item svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.side-item:hover{background:rgba(255,255,255,.05);color:#fff;}
.side-item.on{background:rgba(47,95,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(47,95,255,.3);}
.side-item .badge{
  margin-left:auto;font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:var(--pill);
  background:rgba(0,224,255,.14);color:var(--cyan);
}
.console-side .side-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-d);}

.console-main{display:flex;flex-direction:column;min-width:0;}
.console-top{
  display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line-d);
}
.console-search{
  flex:1;min-width:0;display:flex;align-items:center;gap:9px;height:32px;padding:0 12px;
  border-radius:var(--pill);background:rgba(255,255,255,.05);border:1px solid var(--line-d);
  transition:border-color .35s,background .35s;
}
.console-search:focus-within{border-color:rgba(47,95,255,.6);background:rgba(255,255,255,.075);}
.console-search svg{width:13px;height:13px;flex:none;stroke:var(--t-low);fill:none;stroke-width:2;stroke-linecap:round;}
.console-search input{
  flex:1;min-width:0;border:0;background:none;outline:none;font-size:.78rem;color:#fff;
}
.console-search input::placeholder{color:var(--t-dim);}
.console-av{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:.66rem;font-weight:700;color:#fff;
  background:linear-gradient(140deg,var(--blue),var(--cyan));
}
.console-top .pip{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1px solid var(--line-d);color:var(--t-mid);position:relative;
}
.console-top .pip svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;}
.console-top .pip::after{
  content:"";position:absolute;top:3px;right:4px;width:5px;height:5px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 8px var(--cyan);
}

.console-tabs{display:flex;gap:2px;padding:10px 14px 0;border-bottom:1px solid var(--line-d);overflow-x:auto;
  scrollbar-width:none;}
.console-tabs::-webkit-scrollbar{display:none;}
.console-tab{
  position:relative;padding:8px 13px 12px;font-size:.79rem;font-weight:600;color:var(--t-low);
  white-space:nowrap;transition:color .3s;
}
.console-tab::after{
  content:"";position:absolute;left:13px;right:13px;bottom:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0);transform-origin:50%;transition:transform .45s var(--e-out);
}
.console-tab:hover{color:var(--t-mid);}
.console-tab.on{color:#fff;}
.console-tab.on::after{transform:scaleX(1);}

.console-body{padding:18px;display:grid;gap:14px;flex:1;align-content:start;min-width:0;}
.console-pane{display:none;gap:14px;}
.console-pane.on{display:grid;animation:paneIn .5s var(--e-out);}
@keyframes paneIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

.balance{
  border:1px solid var(--line-d);border-radius:var(--r-md);padding:20px;
  background:linear-gradient(140deg,rgba(47,95,255,.14),rgba(0,224,255,.05) 45%,transparent 75%);
  position:relative;overflow:hidden;
}
.balance::after{
  content:"";position:absolute;right:-40px;top:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,224,255,.16),transparent 68%);pointer-events:none;
}
.balance small{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t-low);margin-bottom:8px;}
.balance .big{
  font-family:var(--f-display);font-weight:600;letter-spacing:-.035em;line-height:1;
  font-size:clamp(1.9rem,3.6vw,2.6rem);color:#fff;font-variant-numeric:tabular-nums;
}
.balance .delta{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:.74rem;font-weight:700;color:#04140f;background:var(--mint);
  padding:3px 9px;border-radius:var(--pill);
}
.balance .delta svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.6;}

.acct-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.acct{
  border:1px solid var(--line-d);border-radius:var(--r-md);padding:15px;
  background:rgba(255,255,255,.028);
  transition:border-color .4s,background .4s,transform .5s var(--e-out);
}
.acct:hover{border-color:var(--line-d2);background:rgba(255,255,255,.05);transform:translateY(-2px);}
.acct .hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;}
.acct .hd span{font-size:.74rem;color:var(--t-low);}
.acct .hd em{font-style:normal;font-size:.62rem;color:var(--t-dim);font-family:var(--f-mono);}
.acct b{display:block;font-family:var(--f-display);font-size:1.45rem;font-weight:600;letter-spacing:-.03em;color:#fff;
  font-variant-numeric:tabular-nums;}
.acct .foot{display:flex;align-items:center;gap:7px;margin-top:11px;flex-wrap:wrap;}
.pill-t{
  font-size:.63rem;font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:var(--pill);
  background:rgba(255,255,255,.07);color:var(--t-mid);
}
.pill-t.blue{background:rgba(47,95,255,.18);color:#9DB4FF;}
.pill-t.cyan{background:rgba(0,224,255,.14);color:var(--cyan);}
.pill-t.mint{background:rgba(34,229,167,.14);color:var(--mint);}
.pill-t.amber{background:rgba(255,176,32,.14);color:var(--amber);}

.insight{
  border:1px solid var(--line-d);border-radius:var(--r-md);padding:16px;
  background:rgba(255,255,255,.028);
}
.insight .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.insight .hd b{font-size:.84rem;font-weight:600;color:#fff;}
.insight p{font-size:.79rem;color:var(--t-mid);line-height:1.6;}
.insight p b{color:#fff;font-weight:700;}

.tx-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.tx-head b{font-size:.86rem;font-weight:600;color:#fff;}
.chips{display:flex;gap:6px;flex-wrap:wrap;}
.chip{
  font-size:.7rem;font-weight:600;color:var(--t-mid);
  padding:5px 11px;border-radius:var(--pill);border:1px solid var(--line-d);
  background:rgba(255,255,255,.02);
  transition:color .3s,border-color .3s,background .3s;
}
.chip:hover{color:#fff;border-color:var(--line-d2);}
.chip.on{color:#08090C;background:#fff;border-color:#fff;}

.tx{border:1px solid var(--line-d);border-radius:var(--r-md);overflow:hidden;}
.tx table{font-size:.78rem;}
.tx thead th{
  text-align:left;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t-dim);
  font-weight:700;padding:11px 14px;border-bottom:1px solid var(--line-d);background:rgba(255,255,255,.02);
}
.tx thead th:last-child,.tx td:last-child{text-align:right;}
.tx td{padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--t-mid);vertical-align:middle;}
.tx tbody tr:last-child td{border-bottom:0;}
.tx tbody tr{transition:background .3s;}
.tx tbody tr:hover{background:rgba(255,255,255,.035);}
.tx .desc{color:#fff;font-weight:600;display:block;}
.tx .sub{display:block;font-size:.68rem;color:var(--t-dim);margin-top:2px;font-family:var(--f-mono);}
.tx .amt{font-variant-numeric:tabular-nums;font-weight:700;color:#fff;white-space:nowrap;}
.tx .amt.neg{color:var(--t-mid);}
.tx .amt.pos{color:var(--mint);}
.tx-empty{padding:26px 14px;text-align:center;font-size:.8rem;color:var(--t-dim);}
.tx tbody tr.hidden{display:none;}

.meter{padding:2px 0;}
.meter + .meter{margin-top:12px;}
.meter-top{display:flex;justify-content:space-between;font-size:.78rem;color:var(--t-low);margin-bottom:9px;}
.meter-top b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums;}
.track{height:6px;border-radius:var(--pill);background:rgba(255,255,255,.07);overflow:hidden;}
.track i{display:block;height:100%;width:0;border-radius:var(--pill);
  background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width 1.4s var(--e-out) .3s;}
.console.is-in .track i{width:var(--w,70%);}

.row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-d);border-radius:11px;padding:13px 15px;
  transition:border-color .4s,background .4s;
}
.row:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05);}
.row .lbl{display:flex;align-items:center;gap:11px;font-size:.82rem;color:var(--t-mid);min-width:0;}
.row .lbl .sq{width:9px;height:9px;border-radius:3px;flex:none;background:linear-gradient(140deg,var(--blue),var(--cyan));}
.row .lbl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.row .val{font-size:.72rem;font-weight:700;letter-spacing:.04em;flex:none;
  padding:4px 10px;border-radius:var(--pill);background:rgba(0,224,255,.1);color:var(--cyan);}
.row .val.grey{background:rgba(255,255,255,.06);color:var(--t-low);}
.row .val.mint{background:rgba(34,229,167,.12);color:var(--mint);}

.mini-chart{width:100%;height:auto;overflow:visible;}
.mini-chart .mc-fill{fill:url(#gFill2);opacity:0;transition:opacity .9s .35s;}
.mini-chart .mc-line{fill:none;stroke:url(#gLine3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:620;stroke-dashoffset:620;transition:stroke-dashoffset 1.7s var(--e-out) .15s;}
.console.is-in .mini-chart .mc-fill{opacity:1;}
.console.is-in .mini-chart .mc-line{stroke-dashoffset:0;}
.mini-chart .mc-dot{opacity:0;transition:opacity .5s 1.4s;}
.console.is-in .mini-chart .mc-dot{opacity:1;}
.mc-grid line{stroke:rgba(255,255,255,.06);stroke-width:1;}

/* ==========================================================================
   16b. DROPSHIP DEMO
   A click-through mini product-store: import → launch ads → live results →
   payout. --acc is the per-demo accent, cycled by the storefront edit button
   and read by the CTA gradient, chart line and rocket glow below.
   ========================================================================== */
.dsd{display:flex;flex-direction:column;gap:14px;}

.dsd-rail{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:5px;border-radius:var(--pill);
  border:1px solid var(--line-d);background:rgba(255,255,255,.03);
}
.s-soft .dsd-rail{border-color:var(--line-l);background:var(--paper);}
.dsd-step{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:600;color:var(--t-ink-low);
  padding:7px 13px 7px 7px;border-radius:var(--pill);
  transition:color .4s var(--e-out);
}
.dsd-n{
  width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--f-display);font-size:.72rem;font-weight:600;font-style:normal;
  background:var(--paper-soft);color:var(--t-ink-low);border:1px solid var(--line-l);
  transition:background .4s var(--e-out),color .4s,border-color .4s,transform .5s var(--e-back);
}
.dsd-step.on{color:var(--t-ink-hi);}
.dsd-step.on .dsd-n{
  background:linear-gradient(140deg,var(--blue),var(--cyan));border-color:transparent;color:#fff;
  box-shadow:0 0 0 5px rgba(47,95,255,.12);
}
.dsd-step.done .dsd-n{
  background:var(--ink-900);border-color:transparent;color:var(--mint);
  font-size:0;
}
.dsd-step.done .dsd-n::before{content:"✓";font-size:.72rem;}
.dsd-restart{
  margin-left:auto;width:34px;height:34px;border-radius:50%;flex:none;
  display:grid;place-items:center;color:var(--t-ink-low);
  transition:color .3s,background .3s,transform .6s var(--e-out);
}
.dsd-restart:hover{color:var(--t-ink-hi);background:rgba(127,127,127,.1);transform:rotate(-70deg);}
.dsd-restart svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;}

.dsd-mock{position:relative;}
.dsd-body{
  padding:20px;display:flex;flex-direction:column;gap:22px;
  max-height:min(560px,64vh);overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;
}
/* Touch devices get no inner scroller at all. A ~500px scroll box sitting in
   the middle of the page swallows every vertical swipe that starts inside it,
   which is what made the demo feel broken on a phone. Let it grow instead and
   scroll the page to new content. */
@media (max-width:900px),(hover:none){
  .dsd-body{max-height:none;overflow:visible;overscroll-behavior:auto;}
}
.dsd-blk{
  display:flex;flex-direction:column;gap:14px;
  animation:dsdIn .55s var(--e-out);
}
/* a plain class rule outranks the UA [hidden] default at equal specificity —
   without this, "hidden" blocks would render as flex anyway */
.dsd-blk[hidden]{display:none;}
@keyframes dsdIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

.dsd-kicker{
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--t-low);
}
.dsd-storehead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.dsd-headline{
  font-family:var(--f-display);font-weight:600;font-size:1.28rem;letter-spacing:-.025em;color:#fff;
  margin:6px 0 5px;transition:opacity .25s;
}
.dsd-sub{font-size:.79rem;color:var(--t-mid);transition:opacity .25s;}
.dsd-edit{
  width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid var(--line-d);background:rgba(255,255,255,.04);color:var(--t-mid);
  transition:border-color .35s,color .35s,background .35s,transform .5s var(--e-out);
}
.dsd-edit:hover{border-color:var(--acc,var(--blue));color:#fff;transform:rotate(-8deg) scale(1.06);}
.dsd-edit svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

.dsd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.dsd-slot{
  aspect-ratio:1;border-radius:12px;border:1.5px dashed var(--line-d2);
  position:relative;overflow:hidden;
  transition:border-color .4s,background .4s;
}
.dsd-slot::after{
  content:"No product";position:absolute;inset:0;display:grid;place-items:center;
  font-size:.62rem;font-weight:600;color:var(--t-dim);text-align:center;padding:6px;
}
.dsd-slot.filled{
  border-style:solid;border-color:transparent;
  background:linear-gradient(150deg,var(--acc,var(--blue)),rgba(0,224,255,.55));
  animation:dsdPop .6s var(--e-back);
}
.dsd-slot.filled::after{content:"";}
.dsd-slot.filled::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.5),transparent 55%);
}
.dsd-slot-badge{
  position:absolute;left:6px;bottom:6px;z-index:1;
  font-size:.6rem;font-weight:700;color:#fff;background:rgba(8,9,12,.55);
  padding:3px 7px;border-radius:var(--pill);backdrop-filter:blur(4px);
}
@keyframes dsdPop{0%{transform:scale(.6);opacity:0;}70%{transform:scale(1.05);}100%{transform:scale(1);opacity:1;}}

.dsd-cta{width:100%;position:relative;}
.dsd-cta .dsd-spin{
  width:15px;height:15px;border-radius:50%;flex:none;display:none;
  border:2px solid rgba(255,255,255,.28);border-top-color:#fff;
  animation:spin .7s linear infinite;
}
.dsd-cta.busy .dsd-spin{display:block;}
.dsd-cta.busy svg{display:none;}
.dsd-cta.busy{pointer-events:none;opacity:.88;}
.dsd-cta.done{
  background:rgba(34,229,167,.14) !important;color:var(--mint) !important;
  box-shadow:none !important;pointer-events:none;
}
.dsd-cta.done::after{display:none;}

.dsd-adrow{display:grid;gap:10px;}
.dsd-adplat{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  border:1px solid var(--line-d);background:rgba(255,255,255,.03);
  transition:border-color .4s,background .4s;
}
.dsd-adplat[data-live="1"]{border-color:rgba(34,229,167,.4);background:rgba(34,229,167,.06);}
.dsd-adico{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  color:#fff;font-family:var(--f-display);font-weight:700;font-size:.86rem;
}
.dsd-adtx{flex:1;min-width:0;}
.dsd-adtx b{display:block;font-size:.85rem;font-weight:600;color:#fff;}
.dsd-adtx span{display:block;font-size:.72rem;color:var(--t-low);margin-top:1px;}
.pill-t.live{background:rgba(34,229,167,.16);color:var(--mint);display:inline-flex;align-items:center;gap:6px;}
.pill-t.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 8px var(--mint);animation:blink 2s ease-in-out infinite;}

.dsd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.dsd-stat{
  border:1px solid var(--line-d);border-radius:12px;padding:13px 14px;background:rgba(255,255,255,.03);
}
.dsd-stat small{display:block;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t-low);margin-bottom:7px;}
.dsd-stat b{
  display:block;font-family:var(--f-display);font-weight:600;letter-spacing:-.025em;color:#fff;
  font-size:clamp(1.05rem,2.4vw,1.3rem);font-variant-numeric:tabular-nums;
}

.dsd-chart-wrap{position:relative;}
.dsd-chart{width:100%;height:auto;display:block;}
.dsd-fill{fill:url(#dsdFill);opacity:0;transition:opacity .5s;}
.dsd-line{stroke-dasharray:900;stroke-dashoffset:900;}
.dsd-rocket{
  position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;
  opacity:0;transform:translate(0,0) rotate(0deg);
  filter:drop-shadow(0 0 5px var(--acc,var(--cyan))) drop-shadow(0 2px 3px rgba(0,0,0,.5));
  transition:opacity .3s;
}
.dsd-rocket svg{width:100%;height:100%;fill:#fff;stroke:rgba(8,9,12,.35);stroke-width:.6;}

.dsd-amt{white-space:nowrap;font-weight:700;color:var(--mint);}
.dsd-payout{
  display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:12px;
  background:linear-gradient(120deg,rgba(34,229,167,.16),rgba(34,229,167,.04));
  border:1px solid rgba(34,229,167,.35);
  opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--e-out),transform .6s var(--e-out);
}
.dsd-payout[hidden]{display:none;}
.dsd-payout.on{opacity:1;transform:none;}
.dsd-payout-ico{
  width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--mint);color:#04140f;
}
.dsd-payout-ico svg{width:16px;height:16px;}
.dsd-payout b{display:block;font-size:.88rem;font-weight:600;color:#fff;}
.dsd-payout span{display:block;font-size:.79rem;color:var(--t-mid);margin-top:2px;font-variant-numeric:tabular-nums;}

/* ==========================================================================
   17. PROCESS RAIL
   ========================================================================== */
.proc{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(36px,6vw,90px);align-items:start;}
.proc .s-head{margin-bottom:0;position:sticky;top:calc(var(--header-h) + 46px);}
.rail{position:relative;display:grid;gap:0;}
.rail-line{
  position:absolute;left:26px;top:26px;bottom:26px;width:2px;
  background:var(--line-l);border-radius:2px;overflow:hidden;
}
.rail-line i{
  display:block;width:100%;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--blue),var(--cyan));
  transition:height .25s linear;
}
.step{
  display:grid;grid-template-columns:54px 1fr;gap:clamp(18px,2.4vw,30px);
  padding-bottom:clamp(38px,5vw,62px);position:relative;
}
.step:last-child{padding-bottom:0;}
.step-n{
  width:54px;height:54px;border-radius:50%;background:var(--paper);
  border:1.5px solid var(--line-l);display:grid;place-items:center;
  font-family:var(--f-display);font-weight:600;font-size:1rem;color:var(--t-ink-low);
  position:relative;z-index:2;flex:none;
  transition:border-color .5s var(--e-out),color .5s,box-shadow .5s,background .5s;
}
.step.is-in .step-n{
  border-color:transparent;color:#fff;
  background:linear-gradient(140deg,var(--blue),var(--cyan));
  box-shadow:0 0 0 6px rgba(47,95,255,.09),0 12px 26px -14px rgba(47,95,255,.8);
}
.step-b{padding-top:9px;}
.step-b h3{font-size:1.14rem;margin-bottom:8px;}
.step-b p{font-size:.94rem;color:var(--t-ink-mid);line-height:1.62;max-width:48ch;}
.step-b .meta{
  display:inline-flex;align-items:center;gap:7px;margin-top:11px;
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);
}
.step-b .meta::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;}

/* ==========================================================================
   18. WORK GRID + FILTERS
   ========================================================================== */
.note{font-size:.85rem;color:var(--t-ink-low);max-width:62ch;margin:-22px 0 30px;}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px;}
.filter{
  font-size:.8rem;font-weight:600;color:var(--t-ink-mid);
  padding:9px 17px;border-radius:var(--pill);border:1px solid var(--line-l);background:var(--paper);
  transition:color .3s,border-color .3s,background .3s,transform .4s var(--e-out);
}
.filter:hover{border-color:var(--line-l2);transform:translateY(-2px);}
.filter.on{background:var(--ink-900);border-color:var(--ink-900);color:#fff;}
.filter .n{opacity:.5;margin-left:6px;font-variant-numeric:tabular-nums;}

.works{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);}
.work{
  border-radius:var(--r-lg);overflow:hidden;background:var(--paper);
  border:1px solid var(--line-l);display:flex;flex-direction:column;
  transition:transform .65s var(--e-out),box-shadow .65s var(--e-out),opacity .45s var(--e-out);
}
.work:hover{transform:translateY(-8px);box-shadow:0 40px 60px -34px rgba(8,9,12,.4);}
.work.out{opacity:0;transform:scale(.94);pointer-events:none;}
.work.gone{display:none;}
.work-media{aspect-ratio:4/3;position:relative;display:grid;place-items:center;overflow:hidden;}
.work-media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 26% 18%,rgba(255,255,255,.14),transparent 58%),
    linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35));
}
.work-media .mesh{
  position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:26px 26px;
  transition:transform 1.1s var(--e-out);
}
.work:hover .work-media .mesh{transform:scale(1.12) rotate(1.5deg);}
.work-media > svg{
  width:58px;height:58px;stroke:rgba(255,255,255,.9);fill:none;stroke-width:1.25;
  position:relative;z-index:1;transition:transform .8s var(--e-out);
  stroke-linecap:round;stroke-linejoin:round;
}
.work:hover .work-media > svg{transform:translateY(-5px) scale(1.06);}
.work-open{
  position:absolute;z-index:2;right:14px;bottom:14px;
  display:inline-flex;align-items:center;gap:7px;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#08090C;
  background:#fff;padding:8px 13px;border-radius:var(--pill);
  opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--e-out),transform .5s var(--e-out);
}
.work:hover .work-open,.work:focus-within .work-open{opacity:1;transform:none;}
.work-open svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.work-b{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column;}
.work-tag{
  display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin-bottom:9px;
}
.work-b h3{font-size:1.04rem;margin-bottom:7px;}
.work-b p{font-size:.855rem;color:var(--t-ink-mid);line-height:1.55;}
.work-stats{display:flex;gap:14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-l);}
.work-stats div{font-size:.7rem;color:var(--t-ink-low);}
.work-stats b{display:block;font-family:var(--f-display);font-size:1.02rem;color:var(--t-ink-hi);font-weight:600;
  letter-spacing:-.02em;margin-bottom:1px;}

/* ==========================================================================
   19. WHY GRID
   ========================================================================== */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line-d);border:1px solid var(--line-d);border-radius:var(--r-lg);overflow:hidden;}
.why-i{background:var(--ink-900);padding:clamp(24px,2.6vw,32px);transition:background .5s var(--e-out);position:relative;}
.why-i:hover{background:var(--ink-800);}
.why-i .chk{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:18px;
  border:1px solid var(--line-d);background:rgba(255,255,255,.03);
  transition:border-color .45s,background .45s,transform .5s var(--e-back);
}
.why-i:hover .chk{border-color:rgba(0,224,255,.45);background:rgba(0,224,255,.08);transform:rotate(-6deg) scale(1.05);}
.why-i .chk svg{width:15px;height:15px;stroke:var(--cyan);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.why-i h3{font-size:.98rem;font-weight:600;letter-spacing:-.01em;color:#fff;}
.why-i p{font-size:.8rem;color:var(--t-low);margin-top:7px;line-height:1.5;}

/* ==========================================================================
   20. TESTIMONIALS SLIDER
   ========================================================================== */
.slider{position:relative;}
.slider-vp{overflow:hidden;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
  cursor:grab;}
.slider-vp.dragging{cursor:grabbing;}
.slider-tr{display:flex;gap:clamp(14px,1.6vw,20px);will-change:transform;}
.quote{
  flex:0 0 clamp(280px,32%,420px);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid var(--line-d);border-radius:var(--r-lg);
  padding:clamp(26px,2.8vw,34px);display:flex;flex-direction:column;
  transition:border-color .5s,transform .6s var(--e-out);
  -webkit-user-select:none;user-select:none;
}
.quote:hover{border-color:var(--line-d2);transform:translateY(-4px);}
.quote .mk{font-family:var(--f-serif);font-style:italic;font-size:2.6rem;line-height:.6;
  color:var(--cyan);opacity:.55;margin-bottom:18px;}
.quote .stars{display:flex;gap:3px;margin-bottom:14px;}
.quote .stars svg{width:13px;height:13px;fill:var(--amber);stroke:none;}
.quote p{font-size:.96rem;line-height:1.7;color:var(--t-mid);flex:1;margin-bottom:26px;}
.who{display:flex;align-items:center;gap:12px;}
.who .av{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:600;font-size:.86rem;color:#fff;
  background:linear-gradient(140deg,var(--blue),var(--cyan));
}
.who b{display:block;font-size:.87rem;font-weight:600;color:#fff;}
.who small{display:block;font-size:.76rem;color:var(--t-low);}
.slider-nav{display:flex;align-items:center;gap:10px;margin-top:26px;}
.slider-nav button{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-d);color:#fff;
  transition:background .35s,border-color .35s,transform .45s var(--e-out),opacity .3s;
}
.slider-nav button:hover:not(:disabled){background:rgba(255,255,255,.08);border-color:var(--line-d3);transform:translateY(-2px);}
.slider-nav button:disabled{opacity:.3;cursor:not-allowed;}
.slider-nav svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.slider-bar{flex:1;height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;margin-left:8px;}
.slider-bar i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--cyan));
  width:30%;transition:transform .5s var(--e-out),width .5s var(--e-out);}

/* ==========================================================================
   21. PRICING + SCOPING ESTIMATOR
   ========================================================================== */
.price{
  position:relative;background:var(--paper);border:1px solid var(--line-l);
  border-radius:var(--r-xl);padding:clamp(30px,4vw,54px);
  overflow:hidden;box-shadow:0 50px 90px -56px rgba(8,9,12,.35);
}
.price::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 55% at 50% 0%,rgba(47,95,255,.09),transparent 68%);
}
.price > *{position:relative;}
.price-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:start;}
.price h3{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:14px;}
.price .intro{font-size:.98rem;color:var(--t-ink-mid);line-height:1.66;margin-bottom:26px;max-width:46ch;}
.price-pts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px;}
.price-pts span{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.82rem;font-weight:600;color:var(--t-ink-hi);
  padding:8px 15px;border-radius:var(--pill);border:1px solid var(--line-l);background:var(--paper-soft);
}
.price-pts span::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,var(--blue),var(--cyan));}

.est{
  border:1px solid var(--line-l);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,26px);
  background:var(--paper-soft);
}
.est h4{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t-ink-low);
  font-family:var(--f-body);font-weight:700;margin-bottom:16px;}
.est-opts{display:grid;gap:8px;margin-bottom:20px;}
.est-opt{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  border:1px solid var(--line-l);background:var(--paper);cursor:pointer;
  transition:border-color .35s,background .35s,transform .4s var(--e-out);
  -webkit-tap-highlight-color:transparent;
}
.est-opt:hover{border-color:var(--line-l2);transform:translateY(-1px);}
.est-opt input{position:absolute;opacity:0;width:0;height:0;}
.est-box{
  width:19px;height:19px;border-radius:6px;flex:none;display:grid;place-items:center;
  border:1.5px solid var(--line-l2);background:#fff;
  transition:background .3s,border-color .3s;
}
.est-box svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transform:scale(.5);transition:opacity .25s,transform .35s var(--e-back);}
.est-opt input:checked ~ .est-box{background:linear-gradient(140deg,var(--blue),var(--cyan));border-color:transparent;}
.est-opt input:checked ~ .est-box svg{opacity:1;transform:none;}
.est-opt input:focus-visible ~ .est-box{outline:2px solid var(--cyan);outline-offset:2px;}
.est-opt .txt{flex:1;min-width:0;}
.est-opt .txt b{display:block;font-size:.87rem;font-weight:600;letter-spacing:-.01em;}
.est-opt .txt span{display:block;font-size:.74rem;color:var(--t-ink-low);margin-top:1px;}
.est-opt .wk{font-size:.7rem;font-weight:700;color:var(--t-ink-low);white-space:nowrap;font-variant-numeric:tabular-nums;}
.est-opt.sel{border-color:rgba(47,95,255,.4);background:#fff;box-shadow:0 6px 20px -14px rgba(47,95,255,.9);}
.est-out{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;border-radius:12px;
  background:var(--ink-900);color:#fff;margin-bottom:16px;
}
.est-out div small{display:block;font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t-low);margin-bottom:5px;}
.est-out div b{font-family:var(--f-display);font-size:1.3rem;font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;display:block;}
.est-note{font-size:.74rem;color:var(--t-ink-low);line-height:1.55;margin-top:12px;}

/* ==========================================================================
   22. FAQ ACCORDION
   ========================================================================== */
.faq{display:grid;gap:10px;max-width:880px;margin-inline:auto;}
.faq-i{
  border:1px solid var(--line-l);border-radius:var(--r-md);background:var(--paper);overflow:hidden;
  transition:border-color .4s,box-shadow .4s;
}
.faq-i.open{border-color:rgba(47,95,255,.35);box-shadow:0 22px 44px -34px rgba(8,9,12,.45);}
.faq-q{
  width:100%;display:flex;align-items:center;gap:16px;text-align:left;
  padding:19px 22px;font-size:1rem;font-weight:600;letter-spacing:-.012em;
  font-family:var(--f-display);
}
.faq-q .qm{
  width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid var(--line-l2);margin-left:auto;position:relative;
  transition:background .4s,border-color .4s,transform .5s var(--e-out);
}
.faq-i.open .qm{background:var(--ink-900);border-color:var(--ink-900);transform:rotate(135deg);}
.qm::before,.qm::after{
  content:"";position:absolute;background:currentColor;border-radius:2px;transition:background .4s;
}
.qm::before{width:10px;height:1.6px;}
.qm::after{width:1.6px;height:10px;}
.faq-i.open .qm::before,.faq-i.open .qm::after{background:#fff;}
.faq-a{height:0;overflow:hidden;transition:height .5s var(--e-out);}
.faq-a-in{padding:0 22px 21px;font-size:.92rem;color:var(--t-ink-mid);line-height:1.68;max-width:66ch;}
.faq-a-in a{color:var(--blue);font-weight:600;}
.faq-a-in a:hover{text-decoration:underline;}

/* ==========================================================================
   23. FINAL CTA
   ========================================================================== */
.cta-wrap{background:var(--paper-soft);padding-block:clamp(60px,8vw,110px);}
.cta{
  position:relative;background:var(--ink-900);color:var(--t-hi);border-radius:var(--r-xl);
  padding:clamp(52px,7vw,100px) clamp(24px,5vw,60px);text-align:center;overflow:hidden;
}
.cta::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 90% at 50% 0%,rgba(47,95,255,.3),transparent 68%);
}
.cta::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000,transparent 75%);
}
.cta > *{position:relative;z-index:1;}
/* display:flex, not the inherited inline-flex — `justify-content` on an
   inline-flex box only arranges its own children and left the wordmark
   sitting well off centre. */
.cta .logo{display:flex;justify-content:center;margin-bottom:26px;}
.cta h2{font-size:clamp(2rem,4.6vw,3.5rem);margin-bottom:20px;}
.cta p:not(.eyebrow){font-size:var(--lead);color:var(--t-mid);max-width:58ch;margin:0 auto 38px;line-height:1.62;}
.cta-meta{
  margin-top:30px;display:flex;gap:22px;justify-content:center;flex-wrap:wrap;
  font-size:.78rem;color:var(--t-low);
}
.cta-meta span{display:inline-flex;align-items:center;gap:8px;}
.cta-meta svg{width:13px;height:13px;stroke:var(--cyan);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* ==========================================================================
   24. CONTACT
   ========================================================================== */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,5vw,72px);}
.c-info h2{font-size:var(--h2);margin-bottom:34px;}
.c-info h3{font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--t-ink-low);margin-bottom:9px;font-weight:700;
  font-family:var(--f-body);}
.c-info .big{
  display:inline-block;font-family:var(--f-display);font-size:clamp(1.05rem,2.2vw,1.35rem);
  font-weight:500;margin-bottom:30px;letter-spacing:-.02em;position:relative;
}
.c-info a.big:hover{color:var(--blue);}
.c-info .socials{display:flex;gap:9px;flex-wrap:wrap;}
.c-info .socials a{
  font-size:.8rem;font-weight:600;padding:8px 14px;border-radius:var(--pill);
  border:1px solid var(--line-l);transition:border-color .35s,background .35s,color .35s,transform .4s var(--e-out);
}
.c-info .socials a:hover{border-color:var(--ink-900);background:var(--ink-900);color:#fff;transform:translateY(-2px);}

.form{display:grid;gap:16px;}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{position:relative;}
.field label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-ink-low);margin-bottom:8px;}
.field label .opt{text-transform:none;letter-spacing:0;font-weight:500;color:var(--t-ink-low);opacity:.8;}
.field input,.field textarea,.field select{
  width:100%;padding:14px 16px;border-radius:12px;font-size:16px; /* 16px stops iOS zoom */
  border:1px solid var(--line-l);background:var(--paper-soft);color:var(--t-ink-hi);
  transition:border-color .35s,background .35s,box-shadow .35s;
  -webkit-appearance:none;appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%234A5163' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:42px;cursor:pointer;
}
.field input::placeholder,.field textarea::placeholder{color:var(--t-ink-low);}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--blue);background:var(--paper);
  box-shadow:0 0 0 4px rgba(47,95,255,.11);
}
.field.err input,.field.err textarea,.field.err select{border-color:var(--rose);box-shadow:0 0 0 4px rgba(229,72,77,.1);}
.field textarea{resize:vertical;min-height:132px;}
.field .msg{display:none;font-size:.75rem;color:var(--rose);margin-top:7px;font-weight:600;}
.field.err .msg{display:block;}
.field .count{
  position:absolute;right:14px;bottom:12px;font-size:.68rem;color:var(--t-ink-low);
  font-variant-numeric:tabular-nums;pointer-events:none;background:var(--paper-soft);padding:2px 4px;border-radius:4px;
}
.f-note{font-size:.86rem;font-weight:600;display:none;padding:14px 16px;border-radius:12px;}
.f-note.show{display:block;animation:paneIn .45s var(--e-out);}
.f-note.ok{color:#0B6B48;background:rgba(34,229,167,.14);border:1px solid rgba(34,229,167,.35);}
.f-note.bad{color:#9B1D22;background:rgba(229,72,77,.1);border:1px solid rgba(229,72,77,.3);}
.f-fine{font-size:.76rem;color:var(--t-ink-low);line-height:1.55;}
.f-fine a{color:var(--blue);font-weight:600;}

.btn .spin{
  width:15px;height:15px;border-radius:50%;flex:none;
  border:2px solid rgba(255,255,255,.28);border-top-color:#fff;
  animation:spin .7s linear infinite;display:none;
}
@keyframes spin{to{transform:rotate(360deg);}}
.btn.busy .spin{display:block;}
.btn.busy svg{display:none;}
.btn.busy{pointer-events:none;opacity:.85;}

/* ==========================================================================
   25. FOOTER
   ========================================================================== */
footer{background:var(--ink-900);color:var(--t-hi);padding-top:clamp(64px,8vw,100px);overflow:hidden;position:relative;}
.f-top{
  display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:clamp(26px,3vw,44px);
  padding-bottom:clamp(44px,5vw,66px);border-bottom:1px solid var(--line-d);
}
.f-brand p{font-size:.88rem;color:var(--t-low);margin-top:18px;line-height:1.66;max-width:36ch;}
.f-brand .logo{margin-bottom:2px;}
.f-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;}
.f-badges span{
  font-size:.68rem;font-weight:700;letter-spacing:.08em;color:var(--t-low);
  padding:6px 11px;border-radius:var(--pill);border:1px solid var(--line-d);
}
.f-col h4{font-size:.68rem;text-transform:uppercase;letter-spacing:.15em;color:var(--t-low);margin-bottom:18px;font-weight:700;
  font-family:var(--f-body);}
.f-col li{margin-bottom:11px;}
.f-col a{font-size:.875rem;color:var(--t-mid);transition:color .3s,padding-left .35s var(--e-out);display:inline-block;}
.f-col a:hover{color:#fff;padding-left:4px;}
.f-col a .ext{width:10px;height:10px;display:inline-block;margin-left:5px;opacity:.5;vertical-align:baseline;}

.f-bot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-block:26px;}
.f-bot p{font-size:.79rem;color:var(--t-low);}
.f-bot .legal{display:flex;gap:18px;flex-wrap:wrap;}
.f-bot .legal a{font-size:.79rem;color:var(--t-low);transition:color .3s;}
.f-bot .legal a:hover{color:#fff;}
.f-status{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;color:var(--t-low);}
.f-status i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint);
  animation:blink 2.8s ease-in-out infinite;}

.f-mark{
  padding-inline:var(--gut);padding-bottom:clamp(22px,3vw,34px);
  -webkit-user-select:none;user-select:none;pointer-events:none;
  opacity:.14;
}
.f-mark svg{width:100%;height:auto;}

/* ==========================================================================
   26. COMMAND PALETTE
   ========================================================================== */
.cmdk{
  position:fixed;inset:0;z-index:500;display:grid;justify-items:center;align-items:start;
  padding:clamp(40px,12vh,140px) var(--gut) var(--gut);
  background:rgba(6,7,10,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--e-out),visibility .35s;
}
.cmdk.open{opacity:1;visibility:visible;}
.cmdk-box{
  width:100%;max-width:620px;
  /* opaque on purpose: at 96% the hero buttons behind it ghosted through the
     result rows and read as stray outlines */
  background:#0D0F15;border:1px solid var(--line-d2);border-radius:var(--r-lg);
  box-shadow:0 60px 120px -50px rgba(0,0,0,.95);overflow:hidden;color:var(--t-hi);
  transform:translateY(-16px) scale(.97);transition:transform .45s var(--e-out);
}
.cmdk.open .cmdk-box{transform:none;}
.cmdk-in{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line-d);}
.cmdk-in svg{width:17px;height:17px;flex:none;stroke:var(--t-low);fill:none;stroke-width:2;stroke-linecap:round;}
.cmdk-in input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:1rem;color:#fff;}
.cmdk-in input::placeholder{color:var(--t-dim);}
.cmdk-in kbd{
  font-family:var(--f-mono);font-size:.66rem;color:var(--t-low);
  border:1px solid var(--line-d);border-radius:6px;padding:3px 7px;flex:none;
}
.cmdk-list{max-height:min(50vh,420px);overflow-y:auto;overscroll-behavior:contain;padding:8px;}
.cmdk-group{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t-dim);
  padding:12px 12px 7px;font-weight:700;}
.cmdk-item{
  display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:11px;width:100%;text-align:left;
  color:var(--t-mid);transition:background .2s,color .2s;
}
.cmdk-item:hover,.cmdk-item.act{background:rgba(255,255,255,.07);color:#fff;}
.cmdk-item .ic{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line-d);background:rgba(255,255,255,.04);
}
.cmdk-item .ic svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.cmdk-item .tx{flex:1;min-width:0;}
.cmdk-item .tx b{display:block;font-size:.88rem;font-weight:600;color:#fff;letter-spacing:-.01em;}
.cmdk-item .tx span{display:block;font-size:.73rem;color:var(--t-dim);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cmdk-item .path{font-family:var(--f-mono);font-size:.68rem;color:var(--t-dim);flex:none;}
.cmdk-empty{padding:34px 16px;text-align:center;color:var(--t-dim);font-size:.86rem;}
.cmdk-foot{
  display:flex;align-items:center;gap:16px;padding:11px 18px;border-top:1px solid var(--line-d);
  font-size:.7rem;color:var(--t-dim);flex-wrap:wrap;
}
.cmdk-foot span{display:inline-flex;align-items:center;gap:6px;}
.cmdk-foot kbd{font-family:var(--f-mono);font-size:.64rem;border:1px solid var(--line-d);border-radius:5px;padding:2px 5px;}

/* ==========================================================================
   27. TOASTS
   ========================================================================== */
/* Top-right, under the header. The bottom-right corner is already a stack of
   back-to-top + chat launcher + cookie bar, and toasts landing there swallowed
   clicks meant for the button underneath. */
#toasts{
  position:fixed;z-index:700;
  right:calc(18px + env(safe-area-inset-right));
  top:calc(var(--header-h) + 14px);
  display:flex;flex-direction:column;gap:9px;align-items:flex-end;
  pointer-events:none;width:min(380px,calc(100vw - 32px));
}
.toast{transform:translateY(-16px) scale(.96);}
.toast{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:13px 16px;border-radius:14px;
  background:rgba(14,16,22,.94);border:1px solid var(--line-d2);color:#fff;
  box-shadow:0 24px 50px -26px rgba(0,0,0,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-size:.85rem;
  opacity:0;transform:translateY(16px) scale(.96);
  transition:opacity .4s var(--e-out),transform .5s var(--e-out);
  pointer-events:auto;
}
.toast.in{opacity:1;transform:none;}
.toast .ti{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(0,224,255,.14);}
.toast .ti svg{width:12px;height:12px;stroke:var(--cyan);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.toast.ok .ti{background:rgba(34,229,167,.14);}
.toast.ok .ti svg{stroke:var(--mint);}
.toast.bad .ti{background:rgba(229,72,77,.16);}
.toast.bad .ti svg{stroke:var(--rose);}
.toast b{font-weight:600;}
.toast span{color:var(--t-mid);}

/* ==========================================================================
   28. PAGE TRANSITION CURTAIN
   ========================================================================== */
#curtain{
  position:fixed;inset:0;z-index:800;pointer-events:none;
  display:grid;place-items:center;
  background:var(--ink-900);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .62s var(--e-io);
}
#curtain.in{clip-path:inset(0 0 0% 0);pointer-events:auto;}
#curtain.out{clip-path:inset(100% 0 0 0);}
#curtain .cur-inner{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  opacity:0;transform:translateY(10px);transition:opacity .4s .12s,transform .5s .12s;
}
#curtain.in .cur-inner{opacity:1;transform:none;}
#curtain .logo-svg{height:26px;}
#curtain .cur-path{
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.16em;color:var(--t-low);text-transform:lowercase;
}
#curtain .cur-bar{width:120px;height:2px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden;}
#curtain .cur-bar i{display:block;height:100%;width:40%;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  animation:curRun 1s var(--e-io) infinite;}
@keyframes curRun{0%{transform:translateX(-110%);}100%{transform:translateX(280%);}}

/* ==========================================================================
   28b. SERVICE RECOMMENDER QUIZ
   ========================================================================== */
.quiz{
  max-width:820px;margin-inline:auto;
  background:var(--paper);border:1px solid var(--line-l);border-radius:var(--r-xl);
  padding:clamp(26px,4vw,48px);box-shadow:var(--sh-3);position:relative;overflow:hidden;
}
.quiz::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 60% at 50% 0%,rgba(47,95,255,.08),transparent 70%);
}
.quiz > *{position:relative;}
.quiz-top{display:flex;align-items:center;gap:14px;margin-bottom:26px;}
.quiz-prog{flex:1;height:5px;border-radius:var(--pill);background:var(--paper-warm);overflow:hidden;}
.quiz-prog i{
  display:block;height:100%;width:0;border-radius:var(--pill);
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transition:width .6s var(--e-out);
}
.quiz-count{
  font-family:var(--f-mono);font-size:.74rem;color:var(--t-ink-low);flex:none;
  font-variant-numeric:tabular-nums;
}
.quiz-step{display:none;}
.quiz-step.on{display:block;animation:paneIn .5s var(--e-out);}
.quiz-q{font-size:clamp(1.25rem,2.6vw,1.75rem);margin-bottom:8px;}
.quiz-hint{font-size:.9rem;color:var(--t-ink-low);margin-bottom:22px;}
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.quiz-opt{
  display:flex;align-items:center;gap:13px;text-align:left;width:100%;
  padding:16px 18px;border-radius:var(--r-md);
  border:1.5px solid var(--line-l);background:var(--paper-soft);
  transition:border-color .35s,background .35s,transform .4s var(--e-out),box-shadow .4s;
  -webkit-tap-highlight-color:transparent;
}
.quiz-opt:hover{border-color:var(--line-l2);transform:translateY(-2px);background:#fff;}
.quiz-opt.sel{
  border-color:var(--blue);background:#fff;
  box-shadow:0 10px 26px -18px rgba(47,95,255,.9),inset 0 0 0 1px rgba(47,95,255,.25);
}
.quiz-opt .qi{
  width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--paper-warm);color:var(--t-ink-mid);
  transition:background .35s,color .35s;
}
.quiz-opt.sel .qi{background:linear-gradient(140deg,var(--blue),var(--cyan));color:#fff;}
.quiz-opt .qi svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.quiz-opt .qt{flex:1;min-width:0;}
.quiz-opt .qt b{display:block;font-size:.94rem;font-weight:600;letter-spacing:-.012em;}
.quiz-opt .qt span{display:block;font-size:.79rem;color:var(--t-ink-low);margin-top:2px;}
.quiz-nav{display:flex;align-items:center;gap:10px;margin-top:26px;flex-wrap:wrap;}
.quiz-back{font-size:.86rem;font-weight:600;color:var(--t-ink-low);padding:10px 4px;}
.quiz-back:hover{color:var(--t-ink-hi);}
.quiz-nav .btn{margin-left:auto;}

/* result */
.quiz-res{display:none;}
.quiz-res.on{display:block;animation:paneIn .55s var(--e-out);}
.quiz-res .rk{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);margin-bottom:14px;
}
.quiz-res h3{font-size:clamp(1.45rem,3.2vw,2.1rem);margin-bottom:12px;}
.quiz-res > p{font-size:1rem;color:var(--t-ink-mid);line-height:1.66;margin-bottom:24px;max-width:56ch;}
.quiz-picks{display:grid;gap:10px;margin-bottom:26px;}
.quiz-pick{
  display:flex;align-items:center;gap:13px;padding:15px 17px;border-radius:var(--r-md);
  border:1px solid var(--line-l);background:var(--paper-soft);
  opacity:0;transform:translateY(10px);
  animation:pickIn .55s var(--e-out) forwards;
  animation-delay:calc(var(--i,0) * 110ms);
}
@keyframes pickIn{to{opacity:1;transform:none;}}
.quiz-pick .pn{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--f-display);font-size:.74rem;font-weight:600;color:#fff;
  background:linear-gradient(140deg,var(--blue),var(--cyan));
}
.quiz-pick .pt{flex:1;min-width:0;}
.quiz-pick .pt b{display:block;font-size:.9rem;font-weight:600;}
.quiz-pick .pt span{display:block;font-size:.78rem;color:var(--t-ink-low);margin-top:1px;}
.quiz-pick .pl{
  font-size:.72rem;font-weight:700;color:var(--blue);flex:none;
  display:inline-flex;align-items:center;gap:6px;
}
.quiz-pick .pl svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* ==========================================================================
   28c. ROI CALCULATOR
   ========================================================================== */
.roi{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start;}
.roi-controls{display:grid;gap:24px;}
.roi-field label{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:.84rem;font-weight:600;color:var(--t-mid);margin-bottom:12px;
}
.roi-field label b{
  font-family:var(--f-display);font-size:1.12rem;font-weight:600;color:#fff;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.roi-field input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--pill);
  background:linear-gradient(90deg,var(--blue) 0%,var(--cyan) var(--pct,30%),rgba(255,255,255,.1) var(--pct,30%));
  outline:none;cursor:pointer;
}
.roi-field input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:#fff;border:3px solid var(--blue);cursor:grab;
  box-shadow:0 4px 14px -4px rgba(47,95,255,.9);
  transition:transform .25s var(--e-back);
}
.roi-field input[type=range]::-webkit-slider-thumb:active{transform:scale(1.18);cursor:grabbing;}
.roi-field input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--blue);
  cursor:grab;box-shadow:0 4px 14px -4px rgba(47,95,255,.9);
}
.roi-field input[type=range]:focus-visible{outline:2px solid var(--cyan);outline-offset:5px;}
.roi-field .rng{display:flex;justify-content:space-between;font-size:.7rem;color:var(--t-dim);margin-top:8px;}

.roi-out{
  border:1px solid var(--line-d);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(160deg,rgba(47,95,255,.12),rgba(0,224,255,.04) 50%,transparent);
}
.roi-hd{padding:20px 22px 0;}
.roi-hd small{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t-low);margin-bottom:8px;}
.roi-hd .big{
  font-family:var(--f-display);font-weight:600;letter-spacing:-.035em;line-height:1;
  font-size:clamp(2rem,4.4vw,2.9rem);color:#fff;font-variant-numeric:tabular-nums;
}
.roi-hd .sub{font-size:.82rem;color:var(--t-mid);margin-top:10px;line-height:1.55;}
.roi-chart{padding:16px 0 0;}
.roi-chart svg{width:100%;height:auto;display:block;}
.roi-bars{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;align-items:end;height:120px;padding:20px 22px;}
.roi-bars i{
  display:block;border-radius:6px 6px 3px 3px;height:var(--h,10%);position:relative;
  background:linear-gradient(180deg,var(--cyan),rgba(47,95,255,.5));
  transition:height .7s var(--e-out);
}
.roi-bars i.base{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05));}
.roi-grid2{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-d);}
.roi-cell{padding:16px 22px;}
.roi-cell + .roi-cell{border-left:1px solid var(--line-d);}
.roi-cell small{display:block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t-low);margin-bottom:6px;}
.roi-cell b{font-family:var(--f-display);font-size:1.3rem;font-weight:600;color:#fff;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;display:block;}
.roi-note{font-size:.74rem;color:var(--t-dim);line-height:1.55;padding:0 22px 20px;}

/* ==========================================================================
   28d. COMPARISON TABLE
   ========================================================================== */
.cmp{border:1px solid var(--line-l);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);}
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.cmp table{min-width:600px;font-size:.88rem;}
.cmp th,.cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line-l);vertical-align:middle;}
.cmp thead th{
  font-family:var(--f-body);font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--t-ink-low);background:var(--paper-soft);white-space:nowrap;
}
.cmp thead th.us{color:#fff;background:var(--ink-900);position:relative;}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0;}
.cmp tbody th{font-weight:600;font-family:var(--f-body);font-size:.88rem;color:var(--t-ink-hi);}
.cmp td.us{background:rgba(47,95,255,.045);font-weight:600;}
.cmp tbody tr{transition:background .3s;}
.cmp tbody tr:hover{background:var(--paper-soft);}
.cmp tbody tr:hover td.us{background:rgba(47,95,255,.08);}
.cmp .yes,.cmp .no,.cmp .part{
  display:inline-flex;align-items:center;gap:8px;font-size:.84rem;
}
.cmp .yes{color:#0B6B48;font-weight:600;}
.cmp .no{color:var(--t-ink-low);}
.cmp .part{color:#8A5A00;}
.cmp .yes svg,.cmp .no svg,.cmp .part svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.cmp-hint{
  display:none;font-size:.75rem;color:var(--t-ink-low);padding:11px 18px;
  border-top:1px solid var(--line-l);background:var(--paper-soft);
  align-items:center;gap:8px;
}
.cmp-hint svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;}

/* ==========================================================================
   28e. TECH STACK GRID
   ========================================================================== */
.stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
.stack-i{
  position:relative;padding:20px 18px;border-radius:var(--r-md);
  border:1px solid var(--line-d);background:rgba(255,255,255,.025);
  text-align:left;overflow:hidden;
  transition:border-color .4s,background .4s,transform .5s var(--e-out);
}
.stack-i:hover,.stack-i.on{
  border-color:rgba(0,224,255,.4);background:rgba(0,224,255,.055);transform:translateY(-3px);
}
.stack-i b{display:block;font-family:var(--f-display);font-size:.98rem;font-weight:600;color:#fff;letter-spacing:-.015em;}
.stack-i em{display:block;font-style:normal;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cyan);margin-top:5px;font-weight:700;}
.stack-i p{
  font-size:.8rem;color:var(--t-mid);line-height:1.55;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--e-out),opacity .4s,margin-top .4s;
}
.stack-i:hover p,.stack-i.on p{max-height:8em;opacity:1;margin-top:10px;}

/* ==========================================================================
   28f. GLOSSARY  (crawlable definition content)
   ========================================================================== */
.gloss{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.gloss-i{
  border:1px solid var(--line-l);border-radius:var(--r-md);background:var(--paper);overflow:hidden;
  transition:border-color .35s;
}
.gloss-i.open{border-color:rgba(47,95,255,.35);}
.gloss-q{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:16px 18px;
  font-family:var(--f-display);font-size:.98rem;font-weight:600;letter-spacing:-.012em;
}
.gloss-q .gp{
  margin-left:auto;width:20px;height:20px;flex:none;position:relative;
  transition:transform .45s var(--e-out);
}
.gloss-i.open .gp{transform:rotate(45deg);}
.gloss-q .gp::before,.gloss-q .gp::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--t-ink-low);border-radius:2px;
  transform:translate(-50%,-50%);
}
.gloss-q .gp::before{width:11px;height:1.6px;}
.gloss-q .gp::after{width:1.6px;height:11px;}
.gloss-a{height:0;overflow:hidden;transition:height .45s var(--e-out);}
.gloss-a-in{padding:0 18px 18px;font-size:.87rem;color:var(--t-ink-mid);line-height:1.66;}
.gloss-a-in a{color:var(--blue);font-weight:600;}

/* ==========================================================================
   28g. CRM REVENUE CONSOLE
   A client record + revenue picture + AWGCOR's read on how to grow it.
   ========================================================================== */
.crm{
  display:grid;grid-template-columns:300px 1fr;
  border:1px solid var(--line-d);border-radius:var(--r-lg);overflow:hidden;
  background:var(--ink-850);color:var(--t-hi);box-shadow:var(--sh-4);
}

/* ---- left: the record ---- */
.crm-rec{border-right:1px solid var(--line-d);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);}
.crm-switch{display:flex;gap:4px;padding:12px;border-bottom:1px solid var(--line-d);}
.crm-tab{
  flex:1;min-width:0;padding:8px 6px;border-radius:9px;
  font-size:.74rem;font-weight:600;color:var(--t-low);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .3s,color .3s;
}
.crm-tab:hover{color:#fff;background:rgba(255,255,255,.05);}
.crm-tab.on{background:rgba(47,95,255,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(47,95,255,.32);}

.crm-card{padding:20px;}
.crm-id{display:flex;align-items:center;gap:13px;margin-bottom:18px;}
.crm-av{
  width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:700;font-size:1.05rem;color:#fff;
  background:linear-gradient(140deg,var(--blue),var(--cyan));
  box-shadow:0 10px 22px -12px rgba(47,95,255,.9);
}
.crm-id .who2{min-width:0;}
.crm-id b{display:block;font-family:var(--f-display);font-size:1.04rem;font-weight:600;color:#fff;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* scoped to .who2 on purpose — a bare `.crm-id span` also matched .crm-av
   (higher specificity than the .crm-av rule) and turned the avatar letter
   into tiny grey top-left text */
.crm-id .who2 > span{display:block;font-size:.76rem;color:var(--t-low);margin-top:2px;}

.crm-fields{display:grid;gap:1px;background:var(--line-d);border:1px solid var(--line-d);border-radius:12px;overflow:hidden;}
.crm-f{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--ink-850);min-width:0;}
.crm-f svg{width:14px;height:14px;flex:none;stroke:var(--t-dim);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.crm-f small{font-size:.68rem;color:var(--t-dim);flex:none;width:62px;}
.crm-f span{
  font-size:.79rem;color:var(--t-mid);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.crm-stage{padding:16px 20px 20px;}
.crm-stage h5{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t-dim);
  font-family:var(--f-body);font-weight:700;margin-bottom:11px;}
.crm-pipe{display:flex;gap:4px;}
.crm-pipe i{
  flex:1;height:5px;border-radius:var(--pill);background:rgba(255,255,255,.09);
  transition:background .5s var(--e-out);
}
.crm-pipe i.done{background:linear-gradient(90deg,var(--blue),var(--cyan));}
.crm-stage p{font-size:.76rem;color:var(--t-low);margin-top:10px;}
.crm-stage p b{color:#fff;font-weight:600;}

/* ---- right: revenue + insights ---- */
.crm-main{display:flex;flex-direction:column;min-width:0;}
.crm-rev{padding:20px 22px;border-bottom:1px solid var(--line-d);}
.crm-rev-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.crm-rev small{display:block;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--t-low);margin-bottom:8px;}
.crm-now{
  font-family:var(--f-display);font-weight:600;letter-spacing:-.035em;line-height:1;
  font-size:clamp(1.9rem,4vw,2.7rem);color:#fff;font-variant-numeric:tabular-nums;
}
.crm-proj{text-align:right;}
.crm-proj .up{
  font-family:var(--f-display);font-weight:600;letter-spacing:-.03em;line-height:1;
  font-size:clamp(1.4rem,3vw,2rem);color:var(--mint);font-variant-numeric:tabular-nums;
}
.crm-proj em{display:block;font-style:normal;font-size:.7rem;color:var(--t-low);margin-top:7px;}

.crm-input{display:flex;align-items:center;gap:11px;margin-top:16px;flex-wrap:wrap;}
.crm-input label{font-size:.76rem;color:var(--t-mid);white-space:nowrap;}
.crm-input .box{
  display:flex;align-items:center;gap:6px;flex:1;min-width:170px;
  border:1px solid var(--line-d);border-radius:var(--pill);padding:0 14px;height:40px;
  background:rgba(255,255,255,.04);
  transition:border-color .35s,background .35s,box-shadow .35s;
}
.crm-input .box:focus-within{border-color:var(--cyan);background:rgba(255,255,255,.07);
  box-shadow:0 0 0 4px rgba(0,224,255,.1);}
.crm-input .box i{font-style:normal;color:var(--t-low);font-size:.9rem;flex:none;}
.crm-input input{
  flex:1;min-width:0;border:0;background:none;outline:none;color:#fff;
  font-size:16px;font-variant-numeric:tabular-nums;font-weight:600;
  -moz-appearance:textfield;appearance:textfield;
}
.crm-input input::-webkit-outer-spin-button,
.crm-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

.crm-chart{padding:18px 22px;border-bottom:1px solid var(--line-d);}
.crm-bars{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;align-items:end;height:96px;}
.crm-bars i{
  display:block;border-radius:4px 4px 2px 2px;height:var(--h,20%);position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.08));
  transition:height .7s var(--e-out),background .5s;
}
.crm-bars i.lift{background:linear-gradient(180deg,var(--cyan),rgba(47,95,255,.55));}
.crm-legend{display:flex;gap:16px;margin-top:13px;font-size:.71rem;color:var(--t-low);flex-wrap:wrap;}
.crm-legend span{display:inline-flex;align-items:center;gap:7px;}
.crm-legend i{width:9px;height:9px;border-radius:3px;flex:none;background:rgba(255,255,255,.24);}
.crm-legend i.lift{background:linear-gradient(140deg,var(--cyan),var(--blue));}

.crm-ins{padding:18px 22px 22px;}
.crm-ins-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.crm-ins-hd b{font-size:.88rem;font-weight:600;color:#fff;display:inline-flex;align-items:center;gap:9px;}
.crm-ins-hd b::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--cyan);box-shadow:0 0 9px var(--cyan);animation:blink 2.6s ease-in-out infinite;
}
.crm-ins-list{display:grid;gap:9px;}
.crm-fix{
  display:flex;align-items:flex-start;gap:13px;padding:14px 15px;border-radius:12px;
  border:1px solid var(--line-d);background:rgba(255,255,255,.025);width:100%;text-align:left;
  transition:border-color .35s,background .35s,transform .4s var(--e-out);
  -webkit-tap-highlight-color:transparent;
}
.crm-fix:hover{border-color:var(--line-d2);background:rgba(255,255,255,.05);}
.crm-fix.on{border-color:rgba(34,229,167,.42);background:rgba(34,229,167,.06);}
.crm-check{
  width:20px;height:20px;border-radius:6px;flex:none;display:grid;place-items:center;margin-top:1px;
  border:1.5px solid var(--line-d2);background:rgba(255,255,255,.03);
  transition:background .3s,border-color .3s;
}
.crm-check svg{width:11px;height:11px;stroke:#04140f;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transform:scale(.5);transition:opacity .25s,transform .35s var(--e-back);}
.crm-fix.on .crm-check{background:var(--mint);border-color:transparent;}
.crm-fix.on .crm-check svg{opacity:1;transform:none;}
.crm-fix .ft{flex:1;min-width:0;}
.crm-fix .ft b{display:block;font-size:.88rem;font-weight:600;color:#fff;letter-spacing:-.012em;}
.crm-fix .ft span{display:block;font-size:.79rem;color:var(--t-mid);margin-top:3px;line-height:1.5;}
.crm-fix .fv{
  font-family:var(--f-display);font-size:.94rem;font-weight:600;color:var(--mint);flex:none;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.crm-fix:not(.on) .fv{color:var(--t-dim);}
.crm-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line-d);
}
.crm-foot p{font-size:.78rem;color:var(--t-low);max-width:44ch;line-height:1.55;}
.crm-foot p b{color:var(--mint);font-weight:700;}

/* ==========================================================================
   28h. COOKIE CONSENT
   ========================================================================== */
#cookie{
  position:fixed;z-index:400;left:max(18px,env(safe-area-inset-left));
  bottom:max(18px,env(safe-area-inset-bottom));
  width:min(400px,calc(100vw - 36px));
  background:rgba(13,15,21,.97);border:1px solid var(--line-d2);border-radius:var(--r-lg);
  box-shadow:0 34px 70px -28px rgba(0,0,0,.9);color:var(--t-hi);padding:20px 22px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transform:translateY(18px);
  transition:opacity .5s var(--e-out),transform .55s var(--e-out),visibility .5s;
}
#cookie.on{opacity:1;visibility:visible;transform:none;}
/* The consent bar owns the bottom of the screen while it is up. */
@media (max-width:680px){
  body.cookie-open #totop{opacity:0;visibility:hidden;pointer-events:none;}
}
#cookie h4{font-size:1rem;margin-bottom:8px;}
#cookie p{font-size:.82rem;color:var(--t-mid);line-height:1.6;margin-bottom:16px;}
#cookie p a{color:var(--cyan);font-weight:600;}
#cookie .ck-row{display:flex;gap:9px;flex-wrap:wrap;}
#cookie .btn{flex:1;min-width:120px;}

/* ==========================================================================
   28i. NEWSLETTER
   ========================================================================== */
.news{
  border:1px solid var(--line-d);border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgba(47,95,255,.1),transparent 60%);
  padding:clamp(24px,3.4vw,40px);
  display:grid;grid-template-columns:1fr auto;gap:clamp(20px,3vw,42px);align-items:center;
}
.news-tx h3{font-size:clamp(1.2rem,2.4vw,1.6rem);margin-bottom:8px;}
.news-tx p{font-size:.9rem;color:var(--t-mid);line-height:1.6;max-width:46ch;}
.news-form{display:flex;gap:9px;flex-wrap:wrap;min-width:min(340px,100%);}
.news-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.news-form input{
  flex:1;min-width:180px;padding:14px 17px;border-radius:var(--pill);font-size:16px;
  border:1px solid var(--line-d2);background:rgba(255,255,255,.05);color:#fff;
  transition:border-color .35s,background .35s,box-shadow .35s;
}
.news-form input::placeholder{color:var(--t-dim);}
.news-form input:focus{outline:none;border-color:var(--cyan);background:rgba(255,255,255,.09);
  box-shadow:0 0 0 4px rgba(0,224,255,.12);}
.news-form.err input{border-color:var(--rose);box-shadow:0 0 0 4px rgba(229,72,77,.14);}
.news-msg{font-size:.8rem;font-weight:600;margin-top:10px;display:none;width:100%;}
.news-msg.show{display:block;}
.news-msg.ok{color:var(--mint);}
.news-msg.bad{color:#FF8A8E;}

/* ==========================================================================
   28j. KEYBOARD SHORTCUTS MODAL
   ========================================================================== */
.kbd-modal{
  position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:var(--gut);
  background:rgba(6,7,10,.65);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--e-out),visibility .35s;
}
.kbd-modal.open{opacity:1;visibility:visible;}
.kbd-box{
  width:100%;max-width:480px;background:#0D0F15;border:1px solid var(--line-d2);
  border-radius:var(--r-lg);box-shadow:0 50px 100px -40px rgba(0,0,0,.95);
  color:var(--t-hi);overflow:hidden;
  transform:translateY(-14px) scale(.97);transition:transform .45s var(--e-out);
}
.kbd-modal.open .kbd-box{transform:none;}
.kbd-hd{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 20px;border-bottom:1px solid var(--line-d);}
.kbd-hd h3{font-size:1.05rem;}
.kbd-hd button{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  color:var(--t-low);transition:color .3s,background .3s;}
.kbd-hd button:hover{color:#fff;background:rgba(255,255,255,.08);}
.kbd-hd button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;}
.kbd-list{padding:10px 20px 20px;}
.kbd-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.kbd-row:last-child{border-bottom:0;}
.kbd-row span{font-size:.88rem;color:var(--t-mid);}
.kbd-row kbd{
  font-family:var(--f-mono);font-size:.72rem;color:#fff;
  border:1px solid var(--line-d2);background:rgba(255,255,255,.06);
  border-radius:6px;padding:4px 8px;box-shadow:0 2px 0 rgba(255,255,255,.06);
}
.kbd-keys{display:flex;gap:5px;align-items:center;flex:none;}
.kbd-keys em{font-style:normal;color:var(--t-dim);font-size:.72rem;}

/* ==========================================================================
   28k. SUB-PAGE LAYOUTS
   Everything below is used only by the generated pages, not the homepage.
   ========================================================================== */

/* ---- page masthead ---- */
.p-hero{
  position:relative;background:var(--ink-900);color:var(--t-hi);overflow:hidden;isolation:isolate;
  padding-top:calc(var(--header-h) + clamp(48px,7vw,90px));
  padding-bottom:clamp(48px,6vw,84px);
}
.p-hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.p-hero .aur-1{width:46vw;height:46vw;left:-12vw;top:-18vw;opacity:.45;}
.p-hero .aur-2{width:38vw;height:38vw;right:-10vw;top:-8vw;opacity:.35;}
.p-hero h1{font-size:clamp(2.2rem,1.2rem + 4vw,4rem);letter-spacing:-.035em;margin-bottom:20px;max-width:20ch;}
.p-lede{font-size:var(--lead);color:var(--t-mid);max-width:62ch;line-height:1.62;}
.p-lede a{color:var(--cyan);}

.crumbs{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:.76rem;color:var(--t-low);margin-bottom:24px;
}
.crumbs a{color:var(--t-low);transition:color .3s;}
.crumbs a:hover{color:#fff;}
.crumbs [aria-current]{color:var(--t-mid);}
.crumbs .sep{opacity:.4;}

/* ---- two-column body + side card ---- */
.two-col{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:start;}

.prose{max-width:70ch;}
.prose h2{font-size:clamp(1.35rem,2.4vw,1.85rem);margin:clamp(30px,3.6vw,46px) 0 14px;}
.prose h2:first-child{margin-top:0;}
.prose h3{font-size:1.1rem;margin:26px 0 10px;}
.prose p{font-size:1rem;color:var(--t-ink-mid);line-height:1.72;margin-bottom:16px;}
.prose p.muted{color:var(--t-ink-low);font-size:.92rem;}
.prose ul,.prose ol{margin:0 0 18px;padding-left:0;}
.prose ul li,.prose ol li{
  position:relative;padding-left:26px;margin-bottom:10px;
  font-size:1rem;color:var(--t-ink-mid);line-height:1.66;
}
.prose ul li::before{
  content:"";position:absolute;left:6px;top:.62em;width:6px;height:6px;border-radius:50%;
  background:linear-gradient(140deg,var(--blue),var(--cyan));
}
.prose ol{counter-reset:pl;}
.prose ol li{counter-increment:pl;}
.prose ol li::before{
  content:counter(pl);position:absolute;left:0;top:.05em;
  font-family:var(--f-display);font-size:.78rem;font-weight:600;color:var(--blue);
}
.prose li b{color:var(--t-ink-hi);}
.prose a{color:var(--blue);font-weight:600;}
.prose a:hover{text-decoration:underline;}
.prose code{font-family:var(--f-mono);font-size:.86em;background:var(--paper-warm);
  padding:2px 6px;border-radius:5px;}
.s-dark .prose p,.s-dark .prose li{color:var(--t-mid);}
.s-dark .prose a{color:var(--cyan);}

.steps-list{counter-reset:pl;}

.side-card{
  position:sticky;top:calc(var(--header-h) + 28px);
  border:1px solid var(--line-l);border-radius:var(--r-lg);
  background:var(--paper-soft);padding:clamp(22px,2.6vw,30px);
}
.side-card h3{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t-ink-low);
  font-family:var(--f-body);font-weight:700;margin-bottom:16px;}
.facts{display:grid;grid-template-columns:auto 1fr;gap:11px 16px;margin-bottom:22px;}
.facts dt{font-size:.8rem;color:var(--t-ink-low);}
.facts dd{font-size:.86rem;font-weight:600;color:var(--t-ink-hi);text-align:right;}

/* ---- value / phase grids ---- */
.val-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;}
.val{
  padding:clamp(22px,2.4vw,30px);border-radius:var(--r-lg);
  border:1px solid var(--line-d);background:rgba(255,255,255,.025);
  transition:border-color .4s,background .4s,transform .5s var(--e-out);
}
.val:hover{border-color:var(--line-d2);background:rgba(255,255,255,.05);transform:translateY(-3px);}
.val b{display:block;font-family:var(--f-display);font-size:.8rem;font-weight:600;color:var(--cyan);
  letter-spacing:.06em;margin-bottom:14px;}
.val h3{font-size:1.05rem;margin-bottom:9px;color:#fff;}
.val p{font-size:.87rem;color:var(--t-mid);line-height:1.6;}
.s-light .val{border-color:var(--line-l);background:var(--paper-soft);}
.s-light .val:hover{background:#fff;}
.s-light .val b{color:var(--blue);}
.s-light .val h3{color:var(--t-ink-hi);}
.s-light .val p{color:var(--t-ink-mid);}

.phase-list{display:grid;gap:14px;}
.phase{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.6vw,32px);align-items:start;
  padding:clamp(24px,3vw,36px);border-radius:var(--r-lg);
  border:1px solid var(--line-l);background:var(--paper-soft);
  transition:border-color .4s,background .4s,transform .5s var(--e-out);
}
.phase:hover{border-color:rgba(47,95,255,.3);background:#fff;transform:translateY(-3px);}
.phase-n{
  font-family:var(--f-display);font-weight:600;font-size:clamp(1.6rem,3.4vw,2.4rem);
  letter-spacing:-.04em;line-height:1;
  background:linear-gradient(150deg,var(--blue),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.phase h2{font-size:clamp(1.25rem,2.4vw,1.7rem);margin-bottom:10px;}
.phase p{font-size:.96rem;color:var(--t-ink-mid);line-height:1.68;max-width:62ch;}
.phase-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;}
.phase-tags li{font-size:.74rem;font-weight:600;color:var(--t-ink-mid);
  padding:6px 12px;border-radius:var(--pill);border:1px solid var(--line-l);background:#fff;}

/* ---- "see the live demo" nudge ---- */
.demo-nudge{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,40px);
  flex-wrap:wrap;margin-top:clamp(34px,4vw,56px);
  padding:clamp(24px,3vw,38px);border-radius:var(--r-xl);
  background:var(--ink-900);color:var(--t-hi);position:relative;overflow:hidden;
}
.demo-nudge::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 130% at 15% 0%,rgba(47,95,255,.3),transparent 65%);
}
.demo-nudge > *{position:relative;}
.dn-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:12px;
}
.dn-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 9px var(--cyan);animation:blink 2.4s ease-in-out infinite;}
.demo-nudge h3{font-size:clamp(1.15rem,2.2vw,1.55rem);margin-bottom:9px;color:#fff;}
.demo-nudge p{font-size:.92rem;color:var(--t-mid);line-height:1.6;max-width:52ch;}
.demo-nudge .btn{flex:none;}

/* ---- "in progress" placeholder ---- */
.soon{
  border:1px solid var(--line-l);border-radius:var(--r-xl);
  background:var(--paper-soft);padding:clamp(28px,4vw,52px);position:relative;overflow:hidden;
}
.soon::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 0%,rgba(47,95,255,.07),transparent 70%);
}
.soon > *{position:relative;}
.soon-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);margin-bottom:16px;
}
.soon-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 9px var(--amber);}
.soon h2{font-size:clamp(1.3rem,2.8vw,1.9rem);margin-bottom:12px;}
.soon > p{font-size:1rem;color:var(--t-ink-mid);line-height:1.7;margin-bottom:22px;max-width:60ch;}
.soon-list{display:grid;gap:10px;margin-bottom:28px;}
.soon-list li{display:flex;align-items:flex-start;gap:11px;font-size:.94rem;color:var(--t-ink-mid);line-height:1.55;}
.soon-list li svg{width:15px;height:15px;flex:none;margin-top:3px;
  stroke:var(--blue);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}

/* ---- legal pages ---- */
.lg-updated{font-size:.8rem;color:var(--t-ink-low);margin-bottom:26px;}
.legal{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(30px,5vw,68px);align-items:start;}
.lg-toc{position:sticky;top:calc(var(--header-h) + 28px);}
.lg-toc h4{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t-ink-low);
  font-family:var(--f-body);font-weight:700;margin-bottom:12px;}
.lg-toc ul{display:grid;gap:2px;}
.lg-toc a{
  display:block;font-size:.85rem;color:var(--t-ink-mid);padding:7px 11px;border-radius:8px;
  border-left:2px solid transparent;transition:color .3s,background .3s,border-color .3s;
}
.lg-toc a:hover{color:var(--t-ink-hi);background:var(--paper-soft);border-left-color:var(--blue);}
.lg-sec{scroll-margin-top:calc(var(--header-h) + 28px);}
.lg-sec + .lg-sec{margin-top:clamp(30px,3.6vw,44px);}

/* ---- pricing tiers ---- */
.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;}
.tier{
  border:1px solid var(--line-l);border-radius:var(--r-lg);background:var(--paper);
  padding:clamp(24px,2.8vw,34px);position:relative;
  transition:border-color .4s,transform .5s var(--e-out),box-shadow .5s var(--e-out);
}
.tier:hover{transform:translateY(-4px);box-shadow:var(--sh-3);}
.tier.feat{border-color:rgba(47,95,255,.4);box-shadow:0 24px 50px -32px rgba(47,95,255,.55);}
.tier-tag{
  position:absolute;top:-11px;left:clamp(24px,2.8vw,34px);
  font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:linear-gradient(140deg,var(--blue),var(--cyan));padding:5px 12px;border-radius:var(--pill);
}
.tier h3{font-size:1.2rem;margin-bottom:6px;}
.tier-r{font-family:var(--f-display);font-size:1.6rem;font-weight:600;letter-spacing:-.03em;
  color:var(--blue);margin-bottom:14px;}
.tier-d{font-size:.9rem;color:var(--t-ink-mid);line-height:1.6;margin-bottom:20px;}
.tier-l{display:grid;gap:9px;}
.tier-l li{display:flex;align-items:flex-start;gap:10px;font-size:.87rem;color:var(--t-ink-mid);}
.tier-l li svg{width:14px;height:14px;flex:none;margin-top:3px;
  stroke:var(--blue);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}

/* ---- case study stats ---- */
.cs-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.cs-stat{border:1px solid var(--line-l);border-radius:var(--r-md);background:var(--paper-soft);
  padding:clamp(18px,2.2vw,26px);}
.cs-stat b{display:block;font-family:var(--f-display);font-weight:600;letter-spacing:-.035em;
  font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1;
  background:linear-gradient(150deg,var(--blue),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.cs-stat span{display:block;margin-top:9px;font-size:.8rem;color:var(--t-ink-low);}

/* ---- feature / help card grids ---- */
.feat-grid,.help-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;}
.fcard,.hcard{
  border:1px solid var(--line-l);border-radius:var(--r-lg);background:var(--paper-soft);
  padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;
  transition:border-color .4s,background .4s,transform .5s var(--e-out),box-shadow .5s var(--e-out);
}
.hcard:hover,.fcard:hover{border-color:rgba(47,95,255,.32);background:#fff;transform:translateY(-4px);box-shadow:var(--sh-2);}
.fcard h3,.hcard h3{font-size:1.06rem;margin-bottom:9px;}
.fcard p,.hcard p{font-size:.89rem;color:var(--t-ink-mid);line-height:1.6;}
.hcard .card-go{margin-top:auto;padding-top:16px;}

/* ---- status ---- */
.status-banner{
  display:flex;align-items:center;gap:15px;padding:clamp(20px,2.4vw,28px);
  border-radius:var(--r-lg);border:1px solid rgba(34,229,167,.4);
  background:linear-gradient(120deg,rgba(34,229,167,.12),rgba(34,229,167,.03));
  margin-bottom:22px;
}
.sb-dot{width:13px;height:13px;border-radius:50%;flex:none;background:var(--mint);
  box-shadow:0 0 0 5px rgba(34,229,167,.18),0 0 14px var(--mint);
  animation:blink 2.8s ease-in-out infinite;}
.status-banner b{display:block;font-family:var(--f-display);font-size:1.1rem;font-weight:600;letter-spacing:-.02em;}
.status-banner span{display:block;font-size:.85rem;color:var(--t-ink-low);margin-top:2px;}
.status-list{border:1px solid var(--line-l);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);}
.st-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 20px;border-bottom:1px solid var(--line-l);}
.st-row:last-child{border-bottom:0;}
.st-name{font-size:.92rem;font-weight:600;}
.st-ok{font-size:.78rem;font-weight:700;color:#0B6B48;background:rgba(34,229,167,.14);
  padding:5px 12px;border-radius:var(--pill);}

/* ---- 404 ---- */
.e404-code{
  font-family:var(--f-display);font-weight:600;letter-spacing:-.05em;line-height:.9;
  font-size:clamp(4.5rem,18vw,9rem);margin-bottom:10px;
  background:linear-gradient(170deg,#fff 20%,rgba(255,255,255,.22));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.e404-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:36px;}
.e404-links a{
  font-size:.83rem;font-weight:600;color:var(--t-mid);padding:9px 15px;
  border-radius:var(--pill);border:1px solid var(--line-d);
  transition:color .3s,border-color .3s,background .3s,transform .4s var(--e-out);
}
.e404-links a:hover{color:#fff;border-color:var(--line-d3);background:rgba(255,255,255,.06);transform:translateY(-2px);}

.e404-hero{padding-bottom:clamp(48px,6vw,80px);}
.e404-search{
  position:relative;display:flex;align-items:center;gap:12px;
  max-width:580px;margin:34px auto 0;padding:5px 6px 5px 18px;
  border-radius:var(--pill);border:1px solid var(--line-d2);
  background:rgba(255,255,255,.05);backdrop-filter:blur(14px);
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.e404-search:focus-within{
  border-color:rgba(47,95,255,.7);background:rgba(255,255,255,.09);
  box-shadow:0 0 0 4px rgba(47,95,255,.18);
}
.e404-search > svg{
  width:19px;height:19px;flex:none;fill:none;stroke:var(--t-dim);
  stroke-width:2;stroke-linecap:round;
}
.e404-search input{
  flex:1 1 auto;min-width:0;background:none;border:0;outline:none;
  font-family:inherit;font-size:1rem;color:#fff;padding:15px 12px 15px 0;
}
.e404-search input::placeholder{color:var(--t-dim);}
.e404-search input::-webkit-search-cancel-button{filter:invert(1);opacity:.5;}
.e404-count{
  margin-top:14px;font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:700;color:var(--t-dim);
}

.e404-grid{
  display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(min(100%,262px),1fr));
  margin-top:clamp(24px,3vw,38px);
}
.e404-card{
  position:relative;overflow:hidden;min-width:0;
  display:flex;flex-direction:column;gap:7px;
  padding:20px 20px 46px;border-radius:var(--r-lg);
  border:1px solid var(--paper-line);background:var(--paper);
  color:var(--t-ink-hi);text-decoration:none;
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),border-color .4s;
}
.e404-card[hidden]{display:none;}
.e404-card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;transform:scaleX(0);
  transform-origin:left;transition:transform .55s var(--e-out);
  background:linear-gradient(90deg,var(--blue),var(--cyan));
}
.e404-card:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:transparent;}
.e404-card:hover::after{transform:scaleX(1);}
.e404-cat{
  font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  color:var(--blue);
}
.e404-card b{font-family:var(--f-display);font-size:1.05rem;font-weight:600;letter-spacing:-.02em;}
.e404-card i{font-style:normal;font-size:.86rem;color:var(--t-ink-low);line-height:1.6;}
.e404-go{
  position:absolute;left:20px;bottom:16px;display:inline-flex;align-items:center;gap:7px;
  font-size:.79rem;font-weight:600;color:var(--t-ink-mid);
  transition:gap .4s var(--e-out),color .3s;
}
.e404-card:hover .e404-go{gap:12px;color:var(--blue);}
.e404-go svg{width:13px;height:13px;flex:none;}

.e404-empty{
  text-align:center;padding:52px 20px;color:var(--t-ink-mid);
}
.e404-empty[hidden]{display:none;}
.e404-empty b{display:block;font-family:var(--f-display);font-size:1.15rem;
  color:var(--t-ink-hi);margin-bottom:8px;}
.e404-empty span{font-size:.92rem;}

@media (prefers-reduced-motion:reduce){
  .e404-card,.e404-go,.e404-search{transition:none;}
}

/* ---- guides ---- */
/* The "short version" card sits on a light section, so the .assure pills it
   reuses need light-surface colours rather than the dark-hero ones. */
.g-short{
  border:1px solid var(--line-l);border-left:3px solid var(--blue);
  border-radius:var(--r-lg);background:var(--paper-soft);
  padding:clamp(22px,3vw,32px);margin-bottom:clamp(34px,4.4vw,56px);
}
.g-short h2{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  font-family:var(--f-body);font-weight:700;color:var(--t-ink-low);margin-bottom:16px;
}
.g-short-list{margin-top:0;flex-direction:column;align-items:flex-start;gap:11px;}
.g-short-list li{
  display:flex;align-items:flex-start;gap:11px;padding:0;border:0;background:none;
  border-radius:0;font-size:.97rem;color:var(--t-ink-mid);line-height:1.6;
}
.g-short-list li:hover{transform:none;background:none;border:0;color:var(--t-ink-mid);}
.g-short-list svg{width:16px;height:16px;margin-top:3px;stroke:var(--blue);}

/* ---- html sitemap ---- */
.sm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(24px,3vw,42px);}
.sm-col h3{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t-ink-low);
  font-family:var(--f-body);font-weight:700;margin-bottom:14px;}
.sm-col li{margin-bottom:3px;}
.sm-col a{display:inline-block;font-size:.9rem;color:var(--t-ink-mid);padding:6px 0;
  transition:color .3s,padding-left .35s var(--e-out);}
.sm-col a:hover{color:var(--blue);padding-left:5px;}

/* ==========================================================================
   29. RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .console{grid-template-columns:150px 1fr;}
  .f-top{grid-template-columns:1.4fr repeat(3,1fr);}
  .f-col:nth-child(5){grid-column:2;}
}

@media (max-width:1080px){
  .bento{grid-template-columns:repeat(2,1fr);}
  .card.span2{grid-column:span 2;}
  .why{grid-template-columns:repeat(2,1fr);}
  .works{grid-template-columns:repeat(2,1fr);}
  .price-grid{grid-template-columns:1fr;}
  .f-top{grid-template-columns:1fr 1fr 1fr;}
  .f-brand{grid-column:1/-1;}
  .f-col:nth-child(5){grid-column:auto;}
  #rail-dots{display:none;}
}

@media (max-width:900px){
  :root{--header-h:68px;}
  .nav{display:none;}
  .burger{display:grid;}
  .hdr-cta .btn{display:none;}
  .hdr-cta .icon-btn.cmd{display:none;}

  /* the sticky visual can't work in a single column — each step carries its own */
  .story{grid-template-columns:1fr;gap:0;}
  .story-visual{position:relative;top:auto;height:auto;display:block;}
  .story-visual:empty{display:none;}
  .story-panel{position:relative;grid-area:auto;opacity:1;transform:none;pointer-events:auto;}
  .story-visual > .story-panel{display:none;}
  .story-visual > .story-panel.on{display:block;}
  .story-step .story-panel{margin-top:22px;}
  .story-steps{gap:16px;padding-block:0;}
  .story-step{opacity:1;padding:24px 22px;border:1px solid var(--line-d);border-radius:var(--r-lg);
    background:rgba(255,255,255,.02);}
  .story-step.on{border-color:rgba(0,224,255,.28);background:rgba(0,224,255,.035);}
  .flow-node{padding:12px 13px;font-size:.8rem;gap:11px;}
  .flow-node .tick{font-size:.6rem;}
  .flow-arrow{margin-left:26px;}

  .dash{grid-template-columns:1fr;}
  .console{grid-template-columns:1fr;min-height:0;}
  .console-side{
    flex-direction:row;align-items:center;gap:6px;overflow-x:auto;
    border-right:0;border-bottom:1px solid var(--line-d);padding:10px 12px;
    scrollbar-width:none;
  }
  .console-side::-webkit-scrollbar{display:none;}
  .console-side h5,.console-side .side-foot,.console-brand{display:none;}
  .side-item{width:auto;white-space:nowrap;flex:none;}
  .side-item .badge{display:none;}

  .proc{grid-template-columns:1fr;gap:44px;}
  .proc .s-head{position:static;}
  .contact{grid-template-columns:1fr;}
  .feat{grid-template-columns:1fr;gap:26px;}
  .stats{grid-template-columns:1fr 1fr;}
  .stat:nth-child(2n){border-right:0;}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line-d);}
  .quote{flex:0 0 min(84%,380px);}
  .mega{display:none;}
}

@media (max-width:680px){
  /* phones were burning a lot of screen on whitespace — tighten the rhythm */
  :root{
    --h1:clamp(2.5rem,10.5vw,3.2rem);
    --sec-y:clamp(58px,13vw,84px);
  }
  .s-head{margin-bottom:34px;}
  .s-head p:not(.eyebrow){margin-top:14px;}
  .eyebrow{margin-bottom:16px;}
  .s-head-row{gap:20px;margin-bottom:30px;}
  .dash{gap:32px;}
  .dash-copy > p:not(.eyebrow){margin-bottom:22px;}
  /* two short columns read better than one tall list on a phone */
  .dash-list{grid-template-columns:1fr 1fr;gap:10px 14px;}
  .dash-list li{font-size:.83rem;gap:8px;}
  .dash-list li svg{width:13px;height:13px;}
  .hero{padding-top:calc(var(--header-h) + 40px);}
  .hero-inner{text-align:left;}
  .hero .eyebrow{justify-content:flex-start;}
  .hero-lead,.hero-sub{margin-inline:0;}
  .hero .btn-row{justify-content:stretch;flex-direction:column;}
  .hero .btn-row .btn{width:100%;}
  .hero-badges{justify-content:flex-start;}
  .net-desktop{display:none;}
  .net-mobile{display:block;}

  .bento{grid-template-columns:1fr;}
  .card.span2{grid-column:span 1;}
  .why{grid-template-columns:1fr;}
  .works{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr;}
  .stat{border-right:0;border-bottom:1px solid var(--line-d);}
  .stat:last-child{border-bottom:0;}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line-d);}

  .acct-row{grid-template-columns:1fr;}
  .est-out{grid-template-columns:1fr;gap:14px;}
  .f-row{grid-template-columns:1fr;}
  .f-top{grid-template-columns:1fr 1fr;}
  .price-pts{flex-direction:column;align-items:stretch;}
  .price-pts span{justify-content:center;}
  .cta .btn-row,.price .btn-row{flex-direction:column;}
  .cta .btn,.price .btn{width:100%;}
  .btn-lg{padding:15px 24px;min-height:52px;}

  /* comfortable thumb targets for the dense link lists */
  .f-col a{padding-block:8px;}
  .f-col li{margin-bottom:2px;}
  .logo{padding-block:8px;}
  .menu-foot .mail{padding-block:8px;}
  .c-info a.big{padding-block:4px;}
  .note{margin-top:-14px;}
  .rail-line{left:20px;}
  .step{grid-template-columns:42px 1fr;gap:16px;}
  .step-n{width:42px;height:42px;font-size:.86rem;}
  .step-b{padding-top:5px;}
  .f-bot{flex-direction:column;align-items:flex-start;gap:6px;}
  .f-bot .legal{gap:6px 16px;}
  .f-bot .legal a,.f-status a{padding-block:9px;display:inline-block;}
  #toasts{
    left:12px;right:12px;width:auto;align-items:stretch;
    top:calc(var(--header-h) + 10px);
  }
  .console-body{padding:14px;}
  .tx thead th:nth-child(2),.tx td:nth-child(2){display:none;}
  #totop{width:42px;height:42px;}

  .dsd-rail{padding:6px;}
  .dsd-step{font-size:.76rem;padding:6px 10px 6px 6px;}
  .dsd-body{padding:16px;gap:18px;}
  .dsd-stats{grid-template-columns:1fr;gap:8px;}
  .dsd-stat{padding:12px 14px;display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
  .dsd-stat small{margin-bottom:0;font-size:.7rem;}
  .dsd-stat b{font-size:1.15rem;}
  .dsd-headline{font-size:1.14rem;}
  .dsd-adplat{padding:12px 13px;}
  .dsd-grid{gap:8px;}

  /* ---- new sections on phones ---- */
  .quiz{padding:22px 18px;border-radius:var(--r-lg);}
  .quiz-opts{grid-template-columns:1fr;}
  .quiz-opt{padding:14px 15px;}
  .quiz-nav{flex-direction:column-reverse;align-items:stretch;}
  .quiz-nav .btn{margin-left:0;width:100%;}
  .quiz-back{text-align:center;}
  .roi{grid-template-columns:1fr;gap:28px;}
  .roi-bars{height:96px;padding:16px;}
  .roi-cell{padding:14px 16px;}
  .roi-hd{padding:16px 16px 0;}
  .roi-note{padding:0 16px 16px;}
  .gloss{grid-template-columns:1fr;}
  .stack{grid-template-columns:1fr 1fr;}
  .stack-i{padding:16px 14px;}
  .stack-i p{max-height:none;opacity:1;margin-top:8px;}
  .news{grid-template-columns:1fr;gap:20px;}
  .news-form{min-width:0;}
  .news-form input,.news-form .btn{width:100%;flex:none;}
  .cmp-hint{display:flex;}
  #cookie{left:12px;right:12px;width:auto;padding:18px;}
  #cookie .ck-row{flex-direction:column;}
  #cookie .btn{width:100%;}

  /* ---- sub-pages ---- */
  .two-col,.legal{grid-template-columns:1fr;gap:28px;}
  .side-card,.lg-toc{position:static;}
  .lg-toc{border:1px solid var(--line-l);border-radius:var(--r-md);padding:16px;background:var(--paper-soft);}
  .lg-toc ul{grid-template-columns:1fr;}
  .p-hero h1{max-width:none;}
  .phase{grid-template-columns:1fr;gap:12px;}
  .demo-nudge{flex-direction:column;align-items:stretch;}
  .demo-nudge .btn{width:100%;}
  .soon{padding:22px 18px;}
  .soon .btn-row{flex-direction:column;}
  .soon .btn{width:100%;}
  .facts dd{text-align:left;}
  .cs-stats{grid-template-columns:1fr 1fr;}
  .status-banner{padding:18px;}
  .st-row{padding:13px 15px;}

  .crm{grid-template-columns:1fr;}
  .crm-rec{border-right:0;border-bottom:1px solid var(--line-d);}
  .crm-card{padding:16px;}
  .crm-stage{padding:0 16px 16px;}
  .crm-rev,.crm-chart,.crm-ins{padding:16px;}
  .crm-rev-top{flex-direction:column;gap:14px;}
  .crm-proj{text-align:left;}
  .crm-bars{height:76px;gap:3px;}
  .crm-fix{padding:13px;gap:11px;}
  .crm-fix .fv{font-size:.86rem;}
  .crm-foot .btn{width:100%;}

  /* the mock UIs were rendering 9.6–10.9px text — unreadable on a phone */
  .mock-url{font-size:.72rem;height:22px;}
  .flow-node .tick,.dsd-slot::after{font-size:.68rem;}
  .chat-meta{font-size:.82rem;}
  .chat-meta .live,.pill-t,.dsd-kicker,.anly-top small{font-size:.7rem;}
  .console-top .console-search input{font-size:.82rem;}
  .balance small,.acct .hd span,.tx thead th{font-size:.72rem;}
  .acct .hd em,.tx .sub{font-size:.7rem;}
  .row .val,.chip{font-size:.74rem;}
  .stat span,.why-i p{font-size:.85rem;}
}

@media (max-width:420px){
  .hero-badges span{font-size:.7rem;padding:7px 12px;}
  .mq-item{font-size:1rem;}
  .logo .logo-svg{height:20px;}
  .console-tab{padding:8px 10px 12px;font-size:.75rem;}
  .quote{flex:0 0 88%;}
  .filters{gap:6px;}
  .filter{padding:8px 14px;font-size:.76rem;}
}

/* very short viewports — stop the pinned story from clipping */
@media (max-height:620px) and (min-width:901px){
  .story-visual{height:auto;top:calc(var(--header-h) + 12px);}
}

/* ==========================================================================
   30. SUB-PAGE CONVERSION FURNITURE
   --------------------------------------------------------------------------
   Shared components every generated page gets: the sticky conversion bar,
   the KPI trust strip under the masthead, hero assurance chips, and the
   "where to next" internal-link grid. Keeping them here rather than inline
   in the generator means one edit changes all 36 pages.
   ========================================================================== */

/* --- sticky conversion bar ------------------------------------------------ */
.scta{
  position:fixed;z-index:115;left:50%;
  bottom:max(16px,env(safe-area-inset-bottom));
  width:min(680px,calc(100% - 28px));
  transform:translate(-50%,calc(100% + 30px));
  opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .62s var(--e-out),opacity .4s var(--e-out),visibility .5s;
}
.scta.is-up{transform:translate(-50%,0);opacity:1;visibility:visible;pointer-events:auto;}
/* --totop-lift is set from JS, measured off the two boxes — see the stickycta
   module. A breakpoint cannot get this right: the bar wraps to two lines on a
   narrow screen, and it reaches the back-to-top button well before any phone
   width. */

.scta-in{
  display:flex;align-items:center;gap:14px;
  padding:11px 12px 11px 20px;border-radius:var(--pill);
  background:rgba(12,14,19,.94);border:1px solid var(--line-d2);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.86);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  color:var(--t-hi);
}
.scta-dot{
  flex:none;width:8px;height:8px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 0 rgba(34,229,167,.55);animation:sctaPulse 2.6s var(--e-io) infinite;
}
@keyframes sctaPulse{
  0%{box-shadow:0 0 0 0 rgba(34,229,167,.5);}
  70%{box-shadow:0 0 0 9px rgba(34,229,167,0);}
  100%{box-shadow:0 0 0 0 rgba(34,229,167,0);}
}
.scta-t{flex:1 1 auto;min-width:0;line-height:1.25;}
.scta-t b{display:block;font-size:.92rem;font-weight:700;letter-spacing:-.01em;}
.scta-t span{display:block;font-size:.76rem;color:var(--t-low);margin-top:1px;}
.scta .btn{flex:none;}
.scta-x{
  flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-d);
  background:transparent;color:var(--t-low);font-size:1.05rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:color .3s,border-color .3s,background .3s,transform .3s;
}
.scta-x:hover{color:var(--t-hi);border-color:var(--line-d3);background:rgba(255,255,255,.07);transform:rotate(90deg);}

@media (max-width:620px){
  .scta{width:calc(100% - 20px);bottom:max(12px,env(safe-area-inset-bottom));}
  .scta-in{gap:10px;padding:10px 10px 10px 16px;}
  /* the sub-line is the first thing to go — the offer and the button matter */
  .scta-t span{display:none;}
  .scta-t b{font-size:.84rem;}
  .scta-x{display:none;}
  /* the dot costs 18px of a 370px bar — dropping it is often the difference
     between one line of copy and two */
  .scta-dot{display:none;}
}

/* --- KPI trust strip ------------------------------------------------------ */
.kpi-strip{
  padding-block:clamp(30px,4.4vw,52px);
  background:var(--ink-850);border-block:1px solid var(--line-d);
  position:relative;overflow:hidden;
}
.kpi-strip::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 130% at 50% 0%,rgba(47,95,255,.16),transparent 72%);
}
.kpis{
  position:relative;display:grid;gap:clamp(16px,2.4vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
}
.kpi{
  min-width:0;text-align:center;padding:6px 8px;
  border-left:1px solid var(--line-d);
}
.kpi:first-child{border-left:0;}
.kpi b{
  display:block;font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.85rem,1.1rem + 2.5vw,2.9rem);line-height:1;
  letter-spacing:-.03em;
  background:linear-gradient(180deg,#fff 12%,var(--chrome-mid) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.kpi span{
  display:block;margin-top:9px;font-size:.79rem;color:var(--t-low);
  letter-spacing:.05em;text-transform:uppercase;
}
@media (max-width:640px){
  .kpis{grid-template-columns:repeat(2,1fr);gap:22px 10px;}
  .kpi{border-left:0;}
  .kpi:nth-child(even){border-left:1px solid var(--line-d);}
}

/* --- hero assurance chips ------------------------------------------------- */
/* left-aligned by default: the page masthead it sits in is left-aligned */
.assure{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:clamp(20px,2.6vw,30px);
}
.center > .assure,.assure.center{justify-content:center;}
.assure li{
  display:inline-flex;align-items:center;gap:7px;list-style:none;
  padding:7px 14px;border-radius:var(--pill);
  border:1px solid var(--line-d2);background:rgba(255,255,255,.045);
  font-size:.79rem;color:var(--t-mid);
  transition:transform .4s var(--e-out),border-color .35s,background .35s,color .35s;
}
.assure li:hover{
  transform:translateY(-2px);border-color:var(--line-d3);
  background:rgba(255,255,255,.09);color:var(--t-hi);
}
.assure svg{width:13px;height:13px;flex:none;fill:none;stroke:var(--mint);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;}

/* --- "where to next" internal links --------------------------------------- */
.rel{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  margin-top:clamp(30px,4vw,46px);
}
.rel-i{
  min-width:0;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:6px;
  padding:22px 22px 46px;border-radius:var(--r-lg);
  border:1px solid var(--paper-line);background:var(--paper);
  color:var(--t-ink-hi);text-decoration:none;
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),border-color .4s;
}
.rel-i::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--e-out);
}
.rel-i:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:transparent;}
.rel-i:hover::after{transform:scaleX(1);}
.rel-k{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);font-weight:700;
}
.rel-i b{font-family:var(--f-display);font-size:1.14rem;font-weight:600;letter-spacing:-.02em;}
.rel-i i{font-style:normal;font-size:.9rem;color:var(--t-ink-low);line-height:1.55;}
.rel-go{
  position:absolute;left:22px;bottom:18px;
  display:inline-flex;align-items:center;gap:7px;
  font-size:.82rem;font-weight:600;color:var(--t-ink-mid);
  transition:gap .4s var(--e-out),color .35s;
}
.rel-i:hover .rel-go{gap:12px;color:var(--blue);}
.rel-go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}

/* dark-section variant, so the block works under either background */
.s-dark .rel-i,.s-dark-2 .rel-i{
  background:rgba(255,255,255,.035);border-color:var(--line-d);color:var(--t-hi);
}
.s-dark .rel-i i,.s-dark-2 .rel-i i{color:var(--t-low);}
.s-dark .rel-go,.s-dark-2 .rel-go{color:var(--t-mid);}
.s-dark .rel-i:hover,.s-dark-2 .rel-i:hover{
  background:rgba(255,255,255,.07);border-color:var(--line-d3);box-shadow:none;
}
.s-dark .rel-i:hover .rel-go,.s-dark-2 .rel-i:hover .rel-go{color:var(--cyan);}

/* ==========================================================================
   31. CONTENT BLOCKS
   --------------------------------------------------------------------------
   The shared component library the generated pages are built from
   (tools/blocks.py). Every one of these appears on more than one page, so
   they live here rather than being restyled per page.
   ========================================================================== */

/* --- 31a. feature grid ---------------------------------------------------- */
.fx-grid{
  display:grid;gap:clamp(14px,1.8vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
}
.fx-grid[data-cols="2"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));}
.fx{
  min-width:0;position:relative;overflow:hidden;
  padding:clamp(22px,2.6vw,30px);border-radius:var(--r-lg);
  border:1px solid var(--paper-line);background:var(--paper);
  transition:transform .55s var(--e-out),box-shadow .55s var(--e-out),border-color .4s;
}
.fx::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(58% 90% at 50% 0%,rgba(47,95,255,.09),transparent 70%);
  transition:opacity .5s var(--e-out);
}
.fx:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:transparent;}
.fx:hover::before{opacity:1;}
.fx-ico{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  margin-bottom:18px;position:relative;
  background:linear-gradient(140deg,rgba(47,95,255,.14),rgba(0,224,255,.1));
  border:1px solid rgba(47,95,255,.2);
}
.fx-ico svg{width:21px;height:21px;fill:none;stroke:var(--blue);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}
.fx h3{font-size:1.1rem;letter-spacing:-.02em;margin-bottom:9px;position:relative;}
.fx p{font-size:.93rem;color:var(--t-ink-low);line-height:1.66;position:relative;}

.s-dark .fx,.s-dark-2 .fx{background:rgba(255,255,255,.035);border-color:var(--line-d);}
.s-dark .fx p,.s-dark-2 .fx p{color:var(--t-low);}
.s-dark .fx:hover,.s-dark-2 .fx:hover{background:rgba(255,255,255,.07);border-color:var(--line-d3);box-shadow:none;}
.s-dark .fx-ico svg,.s-dark-2 .fx-ico svg{stroke:var(--cyan);}

/* --- 31b. numbered steps -------------------------------------------------- */
.stps{list-style:none;display:grid;gap:clamp(16px,2.2vw,26px);counter-reset:none;}
.stp{
  min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,2.4vw,32px);align-items:start;
  padding:clamp(22px,2.6vw,32px);border-radius:var(--r-lg);
  border:1px solid var(--line-d);background:rgba(255,255,255,.03);
  transition:border-color .45s,background .45s,transform .5s var(--e-out);
}
.stp:hover{border-color:var(--line-d3);background:rgba(255,255,255,.055);transform:translateX(4px);}
.stp-n{
  width:52px;height:52px;flex:none;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--blue),var(--blue-dark));
  box-shadow:var(--sh-glow);
}
.stp-n span{font-family:var(--f-display);font-size:1.02rem;font-weight:600;color:#fff;letter-spacing:.02em;}
.stp-b{min-width:0;}
.stp-b h3{font-size:clamp(1.15rem,1.6vw,1.4rem);letter-spacing:-.022em;margin-bottom:9px;}
.stp-b > p{font-size:.98rem;color:var(--t-mid);line-height:1.68;}
.stp-l{list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px;}
.stp-l li{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.83rem;color:var(--t-low);
}
.stp-l svg{width:13px;height:13px;flex:none;fill:none;stroke:var(--mint);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;}

.s-light .stp,.s-soft .stp{border-color:var(--paper-line);background:var(--paper);}
.s-light .stp:hover,.s-soft .stp:hover{background:var(--paper);box-shadow:var(--sh-2);border-color:transparent;}
.s-light .stp-b > p,.s-soft .stp-b > p{color:var(--t-ink-mid);}
.s-light .stp-l li,.s-soft .stp-l li{color:var(--t-ink-low);}

@media (max-width:640px){
  .stp{grid-template-columns:1fr;gap:16px;}
  .stp-n{width:44px;height:44px;border-radius:13px;}
}

/* --- 31c. comparison table ------------------------------------------------ */
.ct-wrap{
  overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--paper-line);
  background:var(--paper);-webkit-overflow-scrolling:touch;
}
.ct-wrap:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
.ct{width:100%;border-collapse:collapse;min-width:560px;}
.ct th,.ct td{padding:15px clamp(12px,1.6vw,22px);text-align:left;font-size:.92rem;}
.ct thead th{
  font-family:var(--f-display);font-size:.85rem;font-weight:600;letter-spacing:.02em;
  color:var(--t-ink-hi);border-bottom:1px solid var(--paper-line);
  position:sticky;top:0;background:var(--paper);z-index:1;
}
.ct tbody th{
  font-weight:500;color:var(--t-ink-mid);font-size:.9rem;
  border-bottom:1px solid var(--paper-line);width:34%;
}
.ct tbody td{color:var(--t-ink-low);border-bottom:1px solid var(--paper-line);}
.ct tbody tr:last-child th,.ct tbody tr:last-child td{border-bottom:0;}
.ct tbody tr{transition:background .3s;}
.ct tbody tr:hover{background:var(--paper-soft);}
.ct .hl{background:rgba(47,95,255,.055);}
.ct thead .hl{color:var(--blue);background:rgba(47,95,255,.09);}
.ct-y,.ct-n{display:inline-flex;align-items:center;gap:8px;font-weight:600;}
.ct-y{color:#0E8A5F;}
.ct-n{color:var(--t-ink-low);}
.ct-y svg,.ct-n svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.ct-y em,.ct-n em{font-style:normal;font-size:.86rem;}

/* --- 31d. timeline -------------------------------------------------------- */
.tl{list-style:none;position:relative;padding-left:38px;}
.tl-rail{
  position:absolute;left:11px;top:6px;bottom:6px;width:2px;
  background:var(--line-d);border-radius:2px;overflow:hidden;
}
.tl-rail i{
  display:block;width:100%;height:100%;transform-origin:top;transform:scaleY(var(--p,0));
  background:linear-gradient(180deg,var(--blue),var(--cyan));
  transition:transform .25s linear;
}
.tl-i{position:relative;padding-bottom:clamp(30px,4vw,46px);}
.tl-i:last-child{padding-bottom:0;}
.tl-dot{
  position:absolute;left:-33px;top:5px;width:16px;height:16px;border-radius:50%;
  background:var(--ink-900);border:2px solid var(--line-d2);
  transition:border-color .5s var(--e-out),box-shadow .5s var(--e-out),transform .5s var(--e-back);
}
.tl-i.is-in .tl-dot{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,224,255,.14);transform:scale(1.1);}
.tl-mark{
  display:inline-block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:8px;
}
.tl-i h3{font-size:clamp(1.1rem,1.5vw,1.32rem);letter-spacing:-.02em;margin-bottom:8px;}
.tl-i p{font-size:.96rem;color:var(--t-mid);line-height:1.7;}
.s-light .tl-dot,.s-soft .tl-dot{background:var(--paper);border-color:var(--paper-line);}
.s-light .tl-rail,.s-soft .tl-rail{background:var(--paper-line);}
.s-light .tl-mark,.s-soft .tl-mark{color:var(--blue);}
.s-light .tl-i p,.s-soft .tl-i p{color:var(--t-ink-mid);}

/* --- 31e. proof quotes ---------------------------------------------------- */
.pq-grid{
  display:grid;gap:clamp(14px,1.8vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(285px,1fr));
}
.pq{
  min-width:0;position:relative;padding:clamp(24px,2.8vw,32px);
  border-radius:var(--r-lg);border:1px solid var(--line-d);
  background:rgba(255,255,255,.035);
  transition:transform .55s var(--e-out),border-color .4s,background .4s;
}
.pq:hover{transform:translateY(-4px);border-color:var(--line-d3);background:rgba(255,255,255,.07);}
.pq-mark{width:26px;height:26px;fill:var(--blue);opacity:.5;margin-bottom:16px;}
.pq blockquote{font-size:1rem;line-height:1.72;color:var(--t-mid);}
.pq figcaption{display:flex;align-items:center;gap:11px;margin-top:22px;flex-wrap:wrap;}
.pq-av{
  width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--blue),var(--violet));
  font-family:var(--f-display);font-size:.9rem;font-weight:600;color:#fff;
}
.pq figcaption b{font-size:.92rem;color:var(--t-hi);}
.pq figcaption i{font-style:normal;font-size:.8rem;color:var(--t-low);width:100%;padding-left:47px;margin-top:-4px;}
.s-light .pq,.s-soft .pq{background:var(--paper);border-color:var(--paper-line);}
.s-light .pq blockquote,.s-soft .pq blockquote{color:var(--t-ink-mid);}
.s-light .pq figcaption b,.s-soft .pq figcaption b{color:var(--t-ink-hi);}
.s-light .pq figcaption i,.s-soft .pq figcaption i{color:var(--t-ink-low);}

/* --- 31f. split feature --------------------------------------------------- */
.spf{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,5vw,72px);align-items:center;
}
.spf-flip .spf-copy{order:2;}
.spf-copy{min-width:0;}
.spf-copy h2{font-size:var(--h2);margin:16px 0 20px;}
.spf-copy p{font-size:1rem;color:var(--t-ink-mid);line-height:1.72;margin-bottom:15px;}
.spf-copy ul{list-style:none;margin:20px 0 4px;}
.spf-copy ul li{
  position:relative;padding-left:27px;margin-bottom:11px;
  font-size:.96rem;color:var(--t-ink-mid);line-height:1.62;
}
.spf-copy ul li::before{
  content:"";position:absolute;left:5px;top:.6em;width:7px;height:7px;border-radius:50%;
  background:linear-gradient(140deg,var(--blue),var(--cyan));
}
.spf-copy .btn-row{margin-top:26px;}
.spf-vis{min-width:0;position:relative;}
.s-dark .spf-copy p,.s-dark-2 .spf-copy p,
.s-dark .spf-copy ul li,.s-dark-2 .spf-copy ul li{color:var(--t-mid);}
@media (max-width:900px){
  .spf{grid-template-columns:1fr;gap:34px;}
  .spf-flip .spf-copy{order:0;}
}

/* --- 31g. code block ------------------------------------------------------ */
.cb{
  border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line-d);
  background:var(--ink-850);margin:22px 0;
}
.cb figcaption{
  padding:12px 18px 0;font-size:.84rem;color:var(--t-low);
}
.cb-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px 10px 18px;border-bottom:1px solid var(--line-d);
}
.cb-lang{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-dim);
}
.cb-copy{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:6px 12px;border-radius:var(--pill);
  border:1px solid var(--line-d2);background:transparent;color:var(--t-mid);
  font-size:.76rem;font-weight:600;
  transition:color .3s,border-color .3s,background .3s;
}
.cb-copy:hover{color:#fff;border-color:var(--line-d3);background:rgba(255,255,255,.07);}
.cb-copy svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}
.cb-copy.is-done{color:var(--mint);border-color:rgba(34,229,167,.4);}
.cb-scroll{position:relative;}
/* fade the right edge so a sample that runs off-screen reads as scrollable
   instead of as truncated */
.cb-scroll::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:38px;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,14,19,0),var(--ink-850));
  opacity:0;transition:opacity .3s;
}
.cb-scroll.is-over::after{opacity:1;}
.cb pre{
  margin:0;padding:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  font-family:var(--f-mono);font-size:.82rem;line-height:1.72;color:#D6DCE8;
  scrollbar-width:thin;
}
@media (max-width:560px){.cb pre{font-size:.75rem;padding:15px;}}
.cb code{font-family:inherit;white-space:pre;}

/* --- 31h. filterable list ------------------------------------------------- */
.fl{margin-top:clamp(26px,3.4vw,40px);}
.fl-bar{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:4px 4px 4px 46px;border-radius:var(--pill);
  border:1px solid var(--paper-line);background:var(--paper);
  margin-bottom:clamp(26px,3.4vw,40px);
  transition:border-color .35s,box-shadow .35s;
}
.fl-bar:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(47,95,255,.13);}
.fl-mag{
  position:absolute;left:17px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;fill:none;stroke:var(--t-ink-low);stroke-width:2;
  stroke-linecap:round;pointer-events:none;
}
.fl-in{
  flex:1 1 auto;min-width:0;border:0;background:transparent;outline:none;
  font-family:inherit;font-size:.96rem;color:var(--t-ink-hi);padding:13px 0;
}
.fl-in::placeholder{color:var(--t-ink-low);}
.fl-in::-webkit-search-cancel-button{display:none;}
.fl-clear{
  flex:none;width:30px;height:30px;border-radius:50%;cursor:pointer;
  border:1px solid var(--paper-line);background:transparent;color:var(--t-ink-low);
  font-size:1.05rem;line-height:1;display:grid;place-items:center;
  transition:color .3s,border-color .3s,transform .3s;
}
.fl-clear:hover{color:var(--t-ink-hi);border-color:var(--line-l2);transform:rotate(90deg);}
.fl-count{
  flex:none;padding-right:16px;font-size:.78rem;color:var(--t-ink-low);
  font-variant-numeric:tabular-nums;
}
.fl-g{margin-bottom:clamp(30px,4vw,48px);}
.fl-g[hidden]{display:none;}
.fl-h{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-ink-low);margin-bottom:16px;font-weight:700;
}
.fl-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));}
.fl-i{
  min-width:0;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:7px;
  padding:20px 20px 46px;border-radius:var(--r-md);
  border:1px solid var(--paper-line);background:var(--paper);
  color:var(--t-ink-hi);text-decoration:none;
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),border-color .4s;
}
.fl-i[hidden]{display:none;}
a.fl-i:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:transparent;}
.fl-tag{
  font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue);font-weight:700;
}
.fl-i b{font-family:var(--f-display);font-size:1.04rem;font-weight:600;letter-spacing:-.018em;}
.fl-i i{font-style:normal;font-size:.88rem;color:var(--t-ink-low);line-height:1.6;}
.fl-go{
  position:absolute;left:20px;bottom:16px;display:inline-flex;align-items:center;gap:6px;
  font-size:.8rem;font-weight:600;color:var(--t-ink-mid);
  transition:gap .4s var(--e-out),color .3s;
}
a.fl-i:hover .fl-go{gap:11px;color:var(--blue);}
.fl-go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.fl-i.is-soon{opacity:.72;}
.fl-i.is-soon .fl-go{display:none;}
.fl-soon{
  position:absolute;left:20px;bottom:16px;font-size:.74rem;color:var(--t-ink-low);
  padding:3px 10px;border-radius:var(--pill);border:1px dashed var(--line-l2);
}
.fl-empty{
  text-align:center;padding:48px 20px;color:var(--t-ink-low);font-size:.96rem;
  border:1px dashed var(--paper-line);border-radius:var(--r-lg);
}
.s-dark .fl-bar,.s-dark-2 .fl-bar{background:rgba(255,255,255,.04);border-color:var(--line-d);}
.s-dark .fl-in,.s-dark-2 .fl-in{color:var(--t-hi);}
.s-dark .fl-i,.s-dark-2 .fl-i{background:rgba(255,255,255,.035);border-color:var(--line-d);color:var(--t-hi);}
.s-dark .fl-i i,.s-dark-2 .fl-i i{color:var(--t-low);}

/* --- 31i. uptime history -------------------------------------------------- */
.up{display:grid;gap:clamp(18px,2.4vw,26px);}
.up-row{
  min-width:0;padding:clamp(18px,2.2vw,24px);border-radius:var(--r-lg);
  border:1px solid var(--paper-line);background:var(--paper);
}
.up-meta{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
.up-meta b{font-family:var(--f-display);font-size:1.02rem;font-weight:600;letter-spacing:-.02em;}
.up-meta span{font-size:.84rem;color:var(--t-ink-low);}
.up-bars{display:flex;gap:2px;align-items:stretch;height:34px;min-width:0;overflow:hidden;}
.ub{
  flex:1 1 0;min-width:2px;border-radius:2px;position:relative;
  transform:scaleY(.35);transform-origin:bottom;
  transition:transform .5s var(--e-out),filter .25s;
  transition-delay:calc(var(--i,0) * 6ms);
}
.up-row.is-in .ub{transform:scaleY(1);}
.ub-up{background:linear-gradient(180deg,#2BD69B,#12A97A);}
.ub-part{background:linear-gradient(180deg,#FFC64D,#E59A10);}
.ub-down{background:linear-gradient(180deg,#F2686C,#CE3237);}
.ub:hover{filter:brightness(1.25);}
.ub::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 9px);left:50%;
  transform:translateX(-50%) translateY(4px);
  padding:6px 10px;border-radius:8px;white-space:nowrap;
  background:var(--ink-800);color:#fff;font-size:.72rem;
  border:1px solid var(--line-d2);box-shadow:var(--sh-2);
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;z-index:3;
}
.ub:hover::after{opacity:1;transform:translateX(-50%) translateY(0);}
.up-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:11px;font-size:.76rem;color:var(--t-ink-low);
}
.up-foot b{font-size:.86rem;color:#0E8A5F;font-variant-numeric:tabular-nums;}
/* the figure always covers the full window even when the bars are windowed
   down on a phone — say so rather than letting the axis imply otherwise */
.up-foot b em{font-style:normal;color:var(--t-ink-low);font-weight:500;font-size:.76rem;}
.up-foot em{font-style:normal;}
.up-narrow{display:none;}

/* 90 bars will not fit a phone — each one bottoms out at 2px wide and the row
   overflows the page. Below 640px we show the most recent half and relabel the
   axis to match, rather than shrinking bars into invisibility. */
@media (max-width:640px){
  .up-bars{gap:1px;}
  .ub:nth-child(-n+45){display:none;}
  .up-wide{display:none;}
  .up-narrow{display:inline;}
}

/* --- 31j. line chart ------------------------------------------------------ */
.lc{position:relative;}
.lc svg{width:100%;height:clamp(150px,22vw,200px);display:block;overflow:visible;}
.lc-area{opacity:0;transition:opacity .9s var(--e-out) .5s;}
.lc.is-in .lc-area{opacity:1;}
.lc-dots circle{
  fill:var(--cyan);stroke:var(--ink-900);stroke-width:2;
  opacity:0;transform:scale(0);transform-origin:center;transform-box:fill-box;
  transition:opacity .3s var(--e-out),transform .45s var(--e-back);
  transition-delay:calc(var(--i,0) * 55ms + .45s);
}
.lc.is-in .lc-dots circle{opacity:1;transform:scale(1);}
.lc-x{
  display:flex;justify-content:space-between;gap:6px;margin-top:10px;
  font-size:.72rem;color:var(--t-low);font-family:var(--f-mono);
}
.lc figcaption{margin-top:12px;font-size:.84rem;color:var(--t-low);}
.s-light .lc-x,.s-soft .lc-x,.s-light .lc figcaption,.s-soft .lc figcaption{color:var(--t-ink-low);}

/* --- 31k. before / after -------------------------------------------------- */
.ba{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--line-d);background:var(--ink-850);
  aspect-ratio:16/10;touch-action:pan-y;user-select:none;
  --split:50%;
}
.ba-pane{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(18px,3vw,34px);}
.ba-after{clip-path:inset(0 0 0 var(--split));}
.ba-before{clip-path:inset(0 calc(100% - var(--split)) 0 0);}
.ba-tag{
  position:absolute;top:14px;padding:5px 12px;border-radius:var(--pill);
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  background:rgba(8,9,12,.72);border:1px solid var(--line-d2);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.ba-before .ba-tag{left:14px;}
.ba-after .ba-tag{right:14px;}
.ba-handle{
  position:absolute;top:0;bottom:0;left:var(--split);width:44px;
  transform:translateX(-50%);cursor:ew-resize;border:0;background:transparent;
  display:grid;place-items:center;z-index:2;
}
.ba-handle::before{
  content:"";position:absolute;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,#fff 12%,#fff 88%,transparent);
  opacity:.9;
}
.ba-handle span{
  width:40px;height:40px;border-radius:50%;position:relative;
  background:rgba(255,255,255,.96);box-shadow:0 8px 26px -8px rgba(0,0,0,.7);
  display:grid;place-items:center;
  transition:transform .4s var(--e-back);
}
.ba-handle:hover span,.ba-handle:focus-visible span{transform:scale(1.12);}
.ba-handle:focus-visible{outline:none;}
.ba-handle:focus-visible span{box-shadow:0 0 0 4px rgba(47,95,255,.5);}
.ba-handle span::before,.ba-handle span::after{
  content:"";position:absolute;width:0;height:0;border-block:5px solid transparent;
}
.ba-handle span::before{border-right:7px solid var(--ink-800);left:9px;}
.ba-handle span::after{border-left:7px solid var(--ink-800);right:9px;}

/* --- 31l. tabs ------------------------------------------------------------ */
.tb-bar{
  position:relative;display:flex;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:5px;border-radius:var(--pill);border:1px solid var(--paper-line);
  background:var(--paper-soft);margin-bottom:clamp(22px,2.8vw,32px);
  scrollbar-width:none;
}
.tb-bar::-webkit-scrollbar{display:none;}
.tb-b{
  position:relative;z-index:1;flex:none;cursor:pointer;white-space:nowrap;
  padding:11px 20px;border-radius:var(--pill);border:0;background:transparent;
  font-family:inherit;font-size:.88rem;font-weight:600;color:var(--t-ink-low);
  transition:color .35s;
}
.tb-b.is-on{color:#fff;}
.tb-b:hover:not(.is-on){color:var(--t-ink-hi);}
.tb-ink{
  position:absolute;z-index:0;top:5px;height:calc(100% - 10px);left:0;width:0;
  border-radius:var(--pill);background:linear-gradient(135deg,var(--blue),var(--blue-deep));
  box-shadow:var(--sh-glow);
  transition:transform .55s var(--e-out),width .55s var(--e-out);
}
.tb-p[hidden]{display:none;}
.tb-p{animation:tbIn .5s var(--e-out) both;}
@keyframes tbIn{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}}
.s-dark .tb-bar,.s-dark-2 .tb-bar{background:rgba(255,255,255,.045);border-color:var(--line-d);}
.s-dark .tb-b,.s-dark-2 .tb-b{color:var(--t-low);}
.s-dark .tb-b:hover:not(.is-on),.s-dark-2 .tb-b:hover:not(.is-on){color:var(--t-hi);}

/* --- 31m. callout --------------------------------------------------------- */
.co{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px 20px;border-radius:var(--r-md);margin:22px 0;
  border:1px solid var(--paper-line);background:var(--paper-soft);
  border-left:3px solid var(--blue);
}
.co svg{width:19px;height:19px;flex:none;margin-top:2px;fill:none;stroke:var(--blue);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.co b{display:block;font-size:.94rem;margin-bottom:5px;color:var(--t-ink-hi);}
.co p{font-size:.9rem;color:var(--t-ink-mid);line-height:1.66;margin:0;}
.co-warn{border-left-color:var(--amber);}
.co-warn svg{stroke:var(--amber);}
.co-tip{border-left-color:var(--mint);}
.co-tip svg{stroke:#0E8A5F;}
.s-dark .co,.s-dark-2 .co{background:rgba(255,255,255,.04);border-color:var(--line-d);border-left-color:var(--blue);}
.s-dark .co b,.s-dark-2 .co b{color:var(--t-hi);}
.s-dark .co p,.s-dark-2 .co p{color:var(--t-mid);}

/* --- 31n. tab panel prose ------------------------------------------------- */
.tbp h3{font-size:clamp(1.15rem,1.7vw,1.42rem);letter-spacing:-.022em;margin:0 0 12px;}
.tbp h3 + p{margin-top:0;}
.tbp > h3:not(:first-child){margin-top:clamp(28px,3.4vw,40px);}
.tbp p{font-size:.98rem;color:var(--t-ink-mid);line-height:1.72;margin-bottom:16px;}
/* `:not(pre) >` matters: without it this also paints the <code> inside a
   .cb block, which already has its own dark treatment — the sample came out
   as light chips on a dark panel. */
.tbp :not(pre) > code{
  font-family:var(--f-mono);font-size:.86em;padding:2px 6px;border-radius:6px;
  background:var(--paper-warm);color:var(--blue-dark);
}
.s-dark .tbp p,.s-dark-2 .tbp p{color:var(--t-mid);}
.s-dark .tbp :not(pre) > code,.s-dark-2 .tbp :not(pre) > code{background:rgba(255,255,255,.08);color:var(--cyan);}

.chk{list-style:none;margin:6px 0 4px;}
.chk li{
  position:relative;padding-left:30px;margin-bottom:12px;
  font-size:.97rem;color:var(--t-ink-mid);line-height:1.65;
}
.chk li::before{
  content:"";position:absolute;left:2px;top:.28em;width:17px;height:17px;border-radius:50%;
  background:rgba(34,229,167,.15);border:1px solid rgba(34,229,167,.4);
}
.chk li::after{
  content:"";position:absolute;left:7px;top:.62em;width:6px;height:3px;
  border-left:2px solid #0E8A5F;border-bottom:2px solid #0E8A5F;
  transform:rotate(-45deg);
}
.chk li b{color:var(--t-ink-hi);font-weight:700;}
.s-dark .chk li,.s-dark-2 .chk li{color:var(--t-mid);}
.s-dark .chk li b,.s-dark-2 .chk li b{color:var(--t-hi);}
.s-dark .chk li::after,.s-dark-2 .chk li::after{border-color:var(--mint);}

/* --- 31o. definition-list Q&A -------------------------------------------- */
.qa{margin:0;}
.qa dt{
  font-family:var(--f-display);font-size:1.04rem;font-weight:600;letter-spacing:-.02em;
  color:var(--t-ink-hi);margin-top:26px;
}
.qa dt:first-child{margin-top:0;}
.qa dd{
  margin:9px 0 0;font-size:.96rem;color:var(--t-ink-mid);line-height:1.72;
  padding-left:16px;border-left:2px solid var(--paper-line);
}
.qa dd a{color:var(--blue);font-weight:600;}
.s-dark .qa dt,.s-dark-2 .qa dt{color:var(--t-hi);}
.s-dark .qa dd,.s-dark-2 .qa dd{color:var(--t-mid);border-left-color:var(--line-d);}

/* --- 31p. incident log ---------------------------------------------------- */
.inc{list-style:none;display:grid;gap:14px;}
.inc-i{
  min-width:0;padding:clamp(20px,2.4vw,26px);border-radius:var(--r-lg);
  border:1px solid var(--paper-line);background:var(--paper);
  transition:border-color .4s,box-shadow .45s var(--e-out);
}
.inc-i:hover{border-color:transparent;box-shadow:var(--sh-2);}
.inc-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.inc-h b{font-family:var(--f-display);font-size:1.02rem;font-weight:600;letter-spacing:-.02em;flex:1 1 auto;min-width:0;}
.inc-h time{font-size:.79rem;color:var(--t-ink-low);font-variant-numeric:tabular-nums;}
.inc-sev{
  flex:none;padding:4px 11px;border-radius:var(--pill);
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
}
.inc-down{background:rgba(229,72,77,.13);color:#B7252A;border:1px solid rgba(229,72,77,.3);}
.inc-part{background:rgba(255,176,32,.15);color:#9A6208;border:1px solid rgba(255,176,32,.35);}
.inc-i p{font-size:.94rem;color:var(--t-ink-mid);line-height:1.7;margin-bottom:10px;}
.inc-i p:last-child{margin-bottom:0;}
.inc-fix{
  padding:12px 14px;border-radius:var(--r-sm);background:var(--paper-soft);
  font-size:.9rem !important;
}
.inc-fix b{color:var(--t-ink-hi);}

/* --- 31q. before/after browser mock --------------------------------------- */
.ba-demo{
  width:100%;height:100%;border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;position:relative;
  font-family:var(--f-body);
}
.ba-demo-old{background:#EDEFF2;color:#3A4050;}
.ba-demo-new{background:linear-gradient(150deg,#0B1030,#132A8F 55%,#0C3E84);color:#fff;}
.bad-bar{
  display:flex;gap:6px;padding:11px 14px;flex:none;
  border-bottom:1px solid rgba(0,0,0,.09);
}
.ba-demo-new .bad-bar{border-bottom-color:rgba(255,255,255,.14);}
.bad-bar span{width:9px;height:9px;border-radius:50%;background:rgba(0,0,0,.16);}
.ba-demo-new .bad-bar span{background:rgba(255,255,255,.24);}
.bad-hero{
  flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
  gap:9px;padding:clamp(16px,3.4vw,30px);text-align:left;
}
.bad-hero b{
  font-family:var(--f-display);font-weight:600;letter-spacing:-.028em;
  font-size:clamp(1.05rem,3.1vw,1.85rem);line-height:1.12;
}
.bad-hero i{font-style:normal;font-size:clamp(.76rem,1.5vw,.94rem);opacity:.72;}
.bad-btn{
  align-self:flex-start;margin-top:6px;padding:9px 18px;border-radius:var(--pill);
  font-size:clamp(.72rem,1.4vw,.84rem);font-weight:600;
  background:rgba(0,0,0,.08);color:#3A4050;
}
.bad-btn-live{
  background:linear-gradient(135deg,var(--blue),var(--cyan));color:#04122E;
  box-shadow:0 10px 26px -10px rgba(0,224,255,.7);
}
.bad-rows{display:flex;flex-direction:column;gap:7px;padding:0 clamp(16px,3.4vw,30px) 16px;}
.bad-rows i{height:7px;border-radius:4px;background:rgba(0,0,0,.09);}
.bad-rows i:nth-child(2){width:82%;}
.bad-rows i:nth-child(3){width:64%;}
.bad-rows i:nth-child(4){width:73%;}
.ba-demo-new .bad-rows i{background:rgba(255,255,255,.16);}
.bad-score{
  position:absolute;right:clamp(12px,2.4vw,20px);bottom:clamp(12px,2.4vw,20px);
  width:clamp(54px,9vw,72px);height:clamp(54px,9vw,72px);border-radius:50%;
  display:grid;place-items:center;text-align:center;line-height:1.05;
  border:2px solid currentColor;
}
.bad-score b{display:block;font-family:var(--f-display);font-size:clamp(.95rem,2.4vw,1.4rem);font-weight:600;}
.bad-score span{display:block;font-size:clamp(.44rem,1vw,.56rem);letter-spacing:.1em;text-transform:uppercase;opacity:.8;}
.bad-bad{color:#CE3237;background:rgba(206,50,55,.1);}
.bad-good{color:#2BD69B;background:rgba(43,214,155,.14);}

@media (max-width:560px){
  .ba{aspect-ratio:4/5;}
  .bad-rows{display:none;}
}

/* ==========================================================================
   32. REDUCED MOTION / PRINT
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0ms !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important;}
  .split .w-i,.chars .c{transform:none !important;opacity:1 !important;}
  .clipin{clip-path:none !important;}
  .sk::after{display:none;}
  #field{display:none;}
  .drawin{stroke-dashoffset:0 !important;}
  .net-line{stroke-dashoffset:0 !important;}
}

@media print{
  #hdr,#menu,#prog,#totop,#rail-dots,.cursor,.cursor-dot,.cursor-label,
  #preload,#curtain,.cmdk,#toasts,.mq-band,.hero-bg,.scta{display:none !important;}
  body{background:#fff;color:#000;}
  section{padding-block:24px;break-inside:avoid;}
  .s-dark,.s-dark-2,.cta,footer{background:#fff !important;color:#000 !important;}
  .s-dark *,.s-dark-2 *,.cta *,footer *{color:#000 !important;}
  a[href^="/"]::after{content:" (awgcor.com" attr(href) ")";font-size:.8em;color:#555;}
}