/* ============================================================
   AWESOMIST — design system (shared across all pages)
   ============================================================ */
:root{
  /* ground + neutrals — cool (Direction B · Studio) */
  --bg:        #FFFFFF;
  --bg-elev:   #F5F8FD;
  --bg-band:   linear-gradient(178deg,#F4F7FC 0%,#E9F0FD 62%,#F8FBFE 100%);
  --ink:       #05060A;
  --ink-2:     #2B313C;
  --muted:     #666E7C;
  --line:      #E4E9F0;
  --line-soft: #EEF1F6;

  /* one brand hue */
  --blue:      #1C5CFF;
  --blue-deep: #0F42D6;
  --blue-tint: #EEF3FF;
  --blue-ink:  #0A3FCC;
  /* brand secondary — the arc inside the logo's "o". Not in UI chrome. */
  --brand-yellow: #F4BB2A;

  /* data-viz only — never UI chrome */
  --violet:    #8A6BFF;
  --amber:     #C98A12;
  --amber-tint:#FBF3E1;
  --green:     #2F6045;
  --green-tint:#DCE7DE;
  --mint:      #5EE0A0;

  /* together.ai tint cards */
  --tint-1:    #C6DAFF;
  --tint-2:    #FDE3F6;
  --tint-3:    #FFDCCD;
  --tint-4:    #DFDDFE;

  /* saturated illustration plate (supermemory) */
  --plate:     #1C5CFF;
  --p-dot:     rgba(255,255,255,.26);
  --p-dash:    rgba(255,255,255,.52);
  --p-line:    #FFFFFF;
  --p-face-t:  #FFFFFF;
  --p-face-r:  #C2D3FF;
  --p-face-l:  #5480FF;
  --p-slab-t:  #DAE4FF;
  --p-slab-r:  #9BB4FF;
  --p-slab-l:  #4770F0;

  --dark:      #010120;
  --dark-2:    #0A0A2E;
  --dark-line: rgba(255,255,255,.09);
  --dark-mut:  rgba(235,238,245,.55);

  --radius:    4px;
  --radius-sm: 3px;
  --radius-btn:4px;
  --shadow-sm: 0 1px 2px rgba(5,6,10,.05), 0 4px 16px rgba(5,6,10,.05);
  --shadow-md: 0 2px 6px rgba(5,6,10,.06), 0 18px 48px -12px rgba(5,6,10,.14);
  --shadow-blue: 0 10px 30px -10px rgba(28,92,255,.40);
  --font-d: 'Space Grotesk', system-ui, sans-serif;
  --font-b: 'Inter', system-ui, sans-serif;
  --font-s: 'Space Grotesk', system-ui, sans-serif;
  --font-m: 'IBM Plex Mono', ui-monospace, monospace;
  --nav-h: 74px;
  --ease: cubic-bezier(.22,.9,.28,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-b); color:var(--ink); background:var(--bg);
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--blue);color:#fff}
img,svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none}
input,textarea{font:inherit}

.container{max-width:1180px;margin-inline:auto;padding-inline:26px}
section{scroll-margin-top:calc(var(--nav-h) + 10px)}

/* ---------- type helpers ---------- */
.eyebrow{
  font-family:var(--font-m); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue);
  display:inline-flex; align-items:center; gap:10px;
}
.h-display{font-family:var(--font-d); font-weight:500; letter-spacing:-.038em; line-height:1.05}
.serif-it{font-family:var(--font-d); font-style:normal; font-weight:500; letter-spacing:-.038em; color:var(--muted)}
.mono{font-family:var(--font-m)}
.lede{color:var(--ink-2); font-size:17.5px; line-height:1.65}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:34px;margin-bottom:58px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(34px,4.4vw,54px);margin-top:16px}
.sec-head .side{max-width:340px;color:var(--muted);font-size:14.5px;padding-bottom:6px}
.sec-num{font-family:var(--font-m);font-size:11px;color:var(--muted);letter-spacing:.14em;display:block;margin-bottom:14px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:var(--radius-btn);
  font-family:var(--font-m);font-weight:500;font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, color .25s, border-color .25s;
  will-change:transform;
}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:var(--shadow-blue)}
.btn-primary:hover{background:var(--blue-deep);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid rgba(14,16,23,.22)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 14px 40px -10px rgba(255,255,255,.35)}
.btn-sm{padding:10px 18px;font-size:11px}
.link-arrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-m);font-weight:500;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--blue)}
.link-arrow .arr{transition:transform .3s var(--ease)}
.link-arrow:hover .arr{transform:translateX(5px)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .35s, border-color .35s, box-shadow .35s, backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav-inner{display:flex;align-items:center;gap:34px;width:100%;max-width:1180px;margin-inline:auto;padding-inline:26px}
.brand{display:inline-flex;align-items:center;flex:0 0 auto}
.brand img,.brand .logo{height:26px;width:auto;aspect-ratio:414/55;display:block;overflow:visible}
.foot-brand .brand img,.foot-brand .brand .logo{height:32px}
/* logo mark: on hover each dot swells and settles on its own rhythm
   (different lengths and offsets, so they never fall into step) */
.logo-mark circle{transform-box:fill-box;transform-origin:center}
.brand:hover .logo-mark circle,.brand:focus-visible .logo-mark circle{animation:logo-dot 1.5s ease-in-out infinite}
.brand:hover .logo-mark .hub,.brand:focus-visible .logo-mark .hub{animation-name:logo-hub}
.brand .logo-mark circle:nth-of-type(1){animation-duration:1.27s;animation-delay:0.0s}
.brand .logo-mark circle:nth-of-type(2){animation-duration:1.61s;animation-delay:0.3s}
.brand .logo-mark circle:nth-of-type(3){animation-duration:1.42s;animation-delay:0.15s}
.brand .logo-mark circle:nth-of-type(4){animation-duration:1.76s;animation-delay:0.49s}
.brand .logo-mark circle:nth-of-type(5){animation-duration:1.31s;animation-delay:0.22s}
.brand .logo-mark circle:nth-of-type(6){animation-duration:1.65s;animation-delay:0.08s}
.brand .logo-mark circle:nth-of-type(7){animation-duration:1.5s;animation-delay:0.41s}
.brand .logo-mark circle:nth-of-type(8){animation-duration:1.35s;animation-delay:0.19s}
.brand .logo-mark circle:nth-of-type(9){animation-duration:1.95s;animation-delay:0.08s}
@keyframes logo-dot{0%,100%{transform:scale(1)}45%{transform:scale(1.28)}88%{transform:scale(1)}}
@keyframes logo-hub{0%,100%{transform:scale(1)}45%{transform:scale(1.12)}88%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.brand .logo-mark circle{animation:none!important}}
.brand b{color:var(--blue);font-weight:500}
.nav-links{display:flex;gap:6px;margin-left:auto}
.nav-links a{
  font-size:14px;font-weight:500;color:var(--ink-2);padding:8px 13px;border-radius:4px;
  transition:color .2s, background .2s;position:relative;
}
.nav-links a:hover{color:var(--ink);background:rgba(14,16,23,.05)}
.nav-links a.active{color:var(--blue)}
.nav-links a.active::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px;background:var(--blue);
}
.nav-cta{margin-left:8px}
/* the logo is already blue, so keep the nav CTA dark and let
   only one blue mass sit in the bar (hero CTA stays blue). */
.nav-cta.btn-primary{background:var(--ink);box-shadow:none}
.nav-cta.btn-primary:hover{background:#1A1F2B}
/* light / dark switch: shows the moon in light mode, the sun in dark */
.theme-toggle{
  width:38px;height:38px;border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-2);border:1px solid var(--line);transition:color .2s, background .2s, border-color .2s;flex:none;
}
.theme-toggle:hover{color:var(--ink);background:rgba(14,16,23,.05)}
.theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-sun,[data-theme="dark"] .theme-toggle .i-moon{display:none}
[data-theme="dark"] .theme-toggle .i-sun{display:block}
.burger{display:none;flex-direction:column;gap:5px;padding:10px;margin-left:auto}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease), opacity .2s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{
  position:fixed;inset:0;z-index:99;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;padding:0 30px;gap:6px;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{
  font-family:var(--font-d);font-size:clamp(30px,8vw,44px);font-weight:500;letter-spacing:-.03em;
  padding:10px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;
}
.mobile-menu a .mono{font-size:11px;color:var(--muted)}
.mobile-menu .btn{margin-top:26px;justify-content:center}

/* ============================================================
   SVG ILLUSTRATION SYSTEM
   Utility classes for animating inline SVG parts.
   (transform-box keeps rotations centred on each element)
   ============================================================ */
.a-spin      {transform-box:fill-box;transform-origin:center;animation:spin 40s linear infinite}
.a-spin-slow {transform-box:fill-box;transform-origin:center;animation:spin 70s linear infinite}
.a-spin-fast {transform-box:fill-box;transform-origin:center;animation:spin 14s linear infinite}
.a-spin-rev  {transform-box:fill-box;transform-origin:center;animation:spinRev 50s linear infinite}
.a-pulse     {transform-box:fill-box;transform-origin:center;animation:pulseScale 3.2s var(--ease) infinite}
.a-float     {transform-box:fill-box;transform-origin:center;animation:floatY 5.5s ease-in-out infinite}
.a-float-d1  {animation-delay:.9s}
.a-float-d2  {animation-delay:1.8s}
.a-float-d3  {animation-delay:2.7s}
.a-twinkle   {animation:twinkle 3s ease-in-out infinite}
.a-twinkle-d1{animation-delay:.7s}
.a-twinkle-d2{animation-delay:1.4s}
.a-twinkle-d3{animation-delay:2.1s}
.a-blink     {animation:blink 1.8s ease-in-out infinite}
.a-radar     {transform-box:fill-box;transform-origin:center;animation:radar 2.6s var(--ease) infinite}
.a-swing     {transform-box:fill-box;transform-origin:center;animation:needleSwing 5s ease-in-out infinite}
.a-bar       {transform-box:fill-box;transform-origin:50% 100%;animation:barGrow 2.6s var(--ease) infinite}
.a-drawloop  {stroke-dasharray:1;stroke-dashoffset:1;animation:drawLoop 3.4s var(--ease) infinite}
.a-dashflow  {stroke-dasharray:4 5;animation:dashFlow 1.4s linear infinite}
.a-scan      {transform-box:fill-box;animation:scanY 4s var(--ease) infinite}
.a-scanx     {transform-box:fill-box;animation:scanX 4.5s var(--ease) infinite}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinRev{to{transform:rotate(-360deg)}}
@keyframes pulseScale{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.07);opacity:1}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes twinkle{0%,100%{opacity:.12}50%{opacity:.95}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes radar{0%{transform:scale(.35);opacity:.9}100%{transform:scale(2.4);opacity:0}}
@keyframes needleSwing{0%,100%{transform:rotate(-28deg)}50%{transform:rotate(28deg)}}
@keyframes barGrow{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes drawLoop{0%{stroke-dashoffset:1}42%,58%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
@keyframes dashFlow{to{stroke-dashoffset:-9}}
@keyframes scanY{0%,100%{transform:translateY(0)}50%{transform:translateY(46px)}}
@keyframes scanX{0%,100%{transform:translateX(0)}50%{transform:translateX(52px)}}
@keyframes flowX{0%{left:9%;opacity:0}6%{opacity:1}94%{opacity:1}100%{left:91%;opacity:0}}
@keyframes ping{0%{transform:scale(.5);opacity:.9}80%,100%{transform:scale(1.6);opacity:0}}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* scroll-triggered line drawing: paths need pathLength="1" + class .dl */
.dl{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.7s var(--ease)}
.in .dl{stroke-dashoffset:0}

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--nav-h) + 46px) 0 80px;overflow:hidden;
  background:var(--bg-band);
}
.hero-grid-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(14,16,23,.045) 1px, transparent 1px),
    linear-gradient(rgba(14,16,23,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 30%, #000 30%, transparent 75%);
}
.hero-inner{
  position:relative;z-index:2;display:grid;grid-template-columns:1.04fr .96fr;gap:40px;align-items:center;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-m);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);background:rgba(255,255,255,.7);border:1px solid var(--line);
  padding:9px 16px;border-radius:4px;box-shadow:var(--shadow-sm);backdrop-filter:blur(6px);
}
.hero-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--blue);position:relative}
.hero-eyebrow .dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--blue);
  animation:ping 2.2s var(--ease) infinite;
}
.hero h1{font-size:clamp(40px,5vw,62px);margin:26px 0 22px;max-width:17ch}
.hero h1 .serif-it{color:var(--muted)}
.hero-lede{font-size:clamp(16.5px,1.8vw,20px);line-height:1.6;color:var(--ink-2);max-width:560px}
.hero-lede strong{color:var(--ink);font-weight:600}
.hero-sub{margin-top:18px;font-size:14.5px;color:var(--muted);max-width:500px;display:flex;gap:10px;align-items:baseline}
.hero-ctas{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}
.hero-meta{
  margin-top:56px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  font-family:var(--font-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.hero-meta .sep{width:4px;height:4px;border-radius:50%;background:var(--muted);opacity:.5}
.hero-ill{position:relative;display:flex;justify-content:center}
.hero-ill svg{width:min(100%,540px);height:auto;filter:drop-shadow(0 30px 60px rgba(28,92,255,.12))}
.scroll-hint{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--font-m);font-size:10px;letter-spacing:.2em;color:var(--muted);
  display:none;flex-direction:column;align-items:center;gap:8px;text-transform:uppercase;
}
.scroll-hint::after{content:"";width:1px;height:34px;background:linear-gradient(var(--muted),transparent);animation:drop 2s var(--ease) infinite}

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero{
  position:relative;padding:calc(var(--nav-h) + 74px) 0 76px;overflow:hidden;
  background:var(--bg-band);
}
.page-hero .hero-grid-bg{mask-image:radial-gradient(ellipse 90% 90% at 70% 0%, #000 20%, transparent 70%);-webkit-mask-image:radial-gradient(ellipse 90% 90% at 70% 0%, #000 20%, transparent 70%)}
.breadcrumb{
  font-family:var(--font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:10px;margin-bottom:26px;
}
.breadcrumb a{color:var(--blue);transition:color .2s}
.breadcrumb a:hover{color:var(--blue-deep)}
.breadcrumb .sep{opacity:.5}
.page-hero h1{font-size:clamp(40px,5.6vw,72px);max-width:16ch;margin:20px 0 22px}
.page-hero h1 .serif-it{color:var(--muted)}
.page-hero .lede{max-width:600px;font-size:clamp(16px,1.8vw,19px)}
.page-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;position:relative;z-index:2}
.page-hero-ill{display:flex;justify-content:center}
.page-hero-ill svg{width:min(100%,460px);height:auto}

/* ============================================================
   LOGO STRIP
   ============================================================ */
.logos{padding:44px 0;border-block:1px solid var(--line);background:var(--bg-elev)}
.logos-row{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.logos-label{font-family:var(--font-m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.client-logo{display:block;height:auto;width:100%;opacity:.75;transition:opacity .2s}
.client-logo:hover{opacity:1}
.logos-row:has(.logos-scroll){flex-wrap:nowrap;gap:34px}
.logos-row .logos-label{flex:none}
.logos-scroll{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logos-track{display:flex;width:max-content;animation:logos-scroll 45s linear infinite}
.logos-scroll:hover .logos-track,.logos-scroll:focus-within .logos-track{animation-play-state:paused}
.logos-set{display:flex;align-items:center;gap:52px;padding-right:52px}
.logos-set .client-logo{width:112px;flex:none}
@keyframes logos-scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.logos-scroll{overflow-x:auto;scrollbar-width:none}.logos-track{animation:none}.logos-set[aria-hidden]{display:none}}
@media(max-width:640px){.logos-row:has(.logos-scroll){flex-direction:column;align-items:stretch;gap:16px}.logos-row .logos-label{text-align:center}.logos-set{gap:36px;padding-right:36px}.logos-set .client-logo{width:96px}}
.wordmark{
  font-family:var(--font-d);font-weight:500;font-size:17px;letter-spacing:-.01em;color:#9AA1AD;
  transition:color .3s;white-space:nowrap;
}
.wordmark:hover{color:var(--ink)}

/* ============================================================
   SHIFT — dark statement band
   ============================================================ */
.shift{background:var(--dark);color:#EDEFF5;padding:130px 0;position:relative;overflow:hidden}
.shift::before{
  content:"";position:absolute;width:900px;height:900px;border-radius:50%;
  background:radial-gradient(circle, rgba(28,92,255,.22), transparent 62%);
  top:-380px;right:-260px;pointer-events:none;
}
.shift .eyebrow{color:#789AFF}
.shift-statement{font-size:clamp(38px,6vw,76px);max-width:18ch;margin-top:26px}
.shift-statement .glow{
  background:linear-gradient(100deg,#789AFF,#1C5CFF 55%,#9D7EFF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.shift-body{margin-top:34px;max-width:620px;color:var(--dark-mut);font-size:clamp(16px,1.6vw,19px);line-height:1.65}
.shift-tag{
  margin-top:38px;display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-m);font-size:12px;letter-spacing:.1em;color:#C6CCDC;
  border:1px solid var(--dark-line);border-radius:4px;padding:11px 20px;background:rgba(255,255,255,.03);
}
.shift-tag b{color:#fff;font-weight:600}
.shift-spark{margin-top:56px;opacity:.9}
.shift-spark svg{width:100%;max-width:560px;height:auto}

/* ============================================================
   PRINCIPLES
   ============================================================ */
.principles{padding:130px 0 120px}
.principle{
  display:grid;grid-template-columns:120px 1.15fr 1fr;gap:34px;align-items:center;
  padding:44px 34px;border-top:1px solid var(--line);position:relative;
  transition:background .35s var(--ease), box-shadow .35s var(--ease);border-radius:var(--radius);
}
.principle:last-of-type{border-bottom:1px solid var(--line)}
.principle:hover{background:var(--bg-elev);box-shadow:var(--shadow-sm)}
.principle .p-ill{width:96px;height:96px;display:flex;align-items:center;justify-content:center}
.principle .p-ill svg{width:100%;height:auto}
.principle h3{font-family:var(--font-d);font-size:clamp(23px,2.7vw,34px);font-weight:500;letter-spacing:-.028em;line-height:1.14}
.principle h3 .serif-it{color:var(--muted)}
.principle .detail p{color:var(--muted);font-size:15px;max-width:400px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.chip{
  font-family:var(--font-m);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--acc-ink,var(--blue-deep));background:var(--acc-bg,var(--blue-tint));
  padding:6px 12px;border-radius:4px;
}
.p-blue{--acc:var(--blue);--acc-ink:var(--blue-deep);--acc-bg:var(--blue-tint)}
.p-amber{--acc:var(--blue);--acc-ink:var(--blue-deep);--acc-bg:var(--blue-tint)}
.p-green{--acc:var(--blue);--acc-ink:var(--blue-deep);--acc-bg:var(--blue-tint)}

/* ============================================================
   PROOF / FLAGSHIP CASE
   ============================================================ */
.proof{padding:120px 0;background:var(--bg-elev);border-block:1px solid var(--line)}
.proof-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:70px;align-items:center}
.case-visual{position:relative}
.dash{
  background:var(--dark);border-radius:4px;padding:26px;color:#E8EBF2;
  box-shadow:0 30px 80px -20px rgba(10,12,18,.5), 0 0 0 1px rgba(255,255,255,.06) inset;
  position:relative;overflow:hidden;
}
.dash::before{
  content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle, rgba(28,92,255,.28), transparent 65%);
  top:-190px;right:-150px;pointer-events:none;
}
.dash-top{display:flex;align-items:center;gap:8px;margin-bottom:22px}
.dash-top .d{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.dash-top .d:first-child{background:#FF5F57}.dash-top .d:nth-child(2){background:#FEBC2E}.dash-top .d:nth-child(3){background:#28C840}
.dash-title{margin-left:auto;font-family:var(--font-m);font-size:10px;letter-spacing:.12em;color:rgba(232,235,242,.5);text-transform:uppercase}
.dash-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.kpi{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:4px;padding:13px 14px}
.kpi .k{font-family:var(--font-m);font-size:9.5px;letter-spacing:.1em;color:rgba(232,235,242,.48);text-transform:uppercase}
.kpi .v{font-family:var(--font-d);font-size:20px;font-weight:500;margin-top:5px;letter-spacing:-.02em}
.kpi .v em{font-style:normal;font-size:11px;color:var(--mint);font-family:var(--font-m);margin-left:5px}
.dash-chart{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:4px;padding:18px 18px 12px}
.chart-label{display:flex;justify-content:space-between;font-family:var(--font-m);font-size:9.5px;letter-spacing:.1em;color:rgba(232,235,242,.48);text-transform:uppercase;margin-bottom:14px}
.chart-label b{color:#8AA3FF;font-weight:500}
.bars{display:flex;align-items:flex-end;gap:7px;height:110px}
.bars i{
  flex:1;border-radius:3px 3px 2px 2px;background:rgba(255,255,255,.13);
  transform:scaleY(0);transform-origin:bottom;transition:transform 1s var(--ease);
}
.bars i.hot{background:linear-gradient(180deg,#789AFF,#1C5CFF)}
.in .bars i{transform:scaleY(1)}
.bars i:nth-child(1){transition-delay:.05s}.bars i:nth-child(2){transition-delay:.1s}.bars i:nth-child(3){transition-delay:.15s}
.bars i:nth-child(4){transition-delay:.2s}.bars i:nth-child(5){transition-delay:.25s}.bars i:nth-child(6){transition-delay:.3s}
.bars i:nth-child(7){transition-delay:.35s}.bars i:nth-child(8){transition-delay:.4s}.bars i:nth-child(9){transition-delay:.45s}
.bars i:nth-child(10){transition-delay:.5s}.bars i:nth-child(11){transition-delay:.55s}.bars i:nth-child(12){transition-delay:.6s}
.spark{margin-top:16px}
.spark polyline{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 2s var(--ease) .3s}
.in .spark polyline{stroke-dashoffset:0}
.case-float{
  position:absolute;right:-16px;bottom:34px;background:#fff;border-radius:4px;box-shadow:var(--shadow-md);
  padding:14px 18px;display:flex;align-items:center;gap:12px;border:1px solid var(--line);
  animation:float 5s ease-in-out infinite;
}
.case-float .pulse-dot{width:9px;height:9px;border-radius:50%;background:#28C840;box-shadow:0 0 0 4px rgba(40,200,64,.18)}
.case-float .t{font-family:var(--font-m);font-size:10px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.case-float .s{font-size:13px;font-weight:600;color:var(--ink)}
.proof-copy .eyebrow{color:var(--blue)}
.proof-copy h3{font-family:var(--font-d);font-size:clamp(28px,3.4vw,42px);font-weight:500;letter-spacing:-.03em;line-height:1.1;margin:18px 0 22px}
.story-steps{display:flex;flex-direction:column;margin:8px 0 30px}
.story-step{display:grid;grid-template-columns:96px 1fr;gap:18px;padding:15px 0;border-top:1px solid var(--line-soft);font-size:14.5px}
.story-step:last-child{border-bottom:1px solid var(--line-soft)}
.story-step .lab{font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:4px}
.story-step p{color:var(--ink-2)}
.big-metric{display:flex;align-items:baseline;gap:18px;margin:6px 0 26px;flex-wrap:wrap}
.big-metric .n{font-family:var(--font-d);font-size:clamp(64px,7vw,96px);font-weight:500;letter-spacing:-.045em;line-height:1;color:var(--blue)}
.big-metric .d{max-width:220px;font-size:14.5px;color:var(--ink-2);line-height:1.45}
.mini-metrics{display:flex;gap:34px;margin-bottom:34px;flex-wrap:wrap}
.mini-metrics .m .v{font-family:var(--font-d);font-size:24px;font-weight:500;letter-spacing:-.02em}
.mini-metrics .m .k{font-family:var(--font-m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* ============================================================
   CONTINUUM
   ============================================================ */
.continuum{padding:120px 0 110px}
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;margin-top:20px}
.flow::before{
  content:"";position:absolute;top:7px;left:calc(10% + 4px);right:calc(10% + 4px);height:1.5px;
  background:linear-gradient(90deg,var(--blue),#8AA3FF,var(--blue));opacity:.5;
}
.flow-pulse{
  position:absolute;top:3px;width:9px;height:9px;border-radius:50%;background:var(--blue);
  box-shadow:0 0 0 5px rgba(28,92,255,.16), 0 0 14px rgba(28,92,255,.6);
  animation:flowX 6s linear infinite;z-index:2;
}
.flow-node{padding:0 14px;text-align:center;position:relative}
.flow-node .node-dot{
  width:15px;height:15px;border-radius:50%;background:var(--bg);border:2px solid var(--blue);
  margin:0 auto 26px;position:relative;z-index:1;transition:background .3s, box-shadow .3s;
}
.flow-node:hover .node-dot{background:var(--blue);box-shadow:0 0 0 6px rgba(28,92,255,.14)}
.flow-node .stage{font-family:var(--font-m);font-size:9.5px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;margin-bottom:9px}
.flow-node h4{font-family:var(--font-d);font-size:17.5px;font-weight:500;letter-spacing:-.02em;margin-bottom:8px}
.flow-node p{font-size:13px;color:var(--muted);line-height:1.55;max-width:200px;margin:0 auto}
.flow-node .tag{
  display:inline-block;margin-top:12px;font-family:var(--font-m);font-size:9.5px;letter-spacing:.08em;
  color:var(--blue-deep);background:var(--blue-tint);border-radius:4px;padding:4px 9px;text-transform:uppercase;
}

/* ============================================================
   SERVICES — overview + lifecycle
   ============================================================ */
.services{padding:120px 0;background:var(--bg-elev);border-block:1px solid var(--line)}
.lifecycle{display:flex;justify-content:center;padding:10px 0 30px}
.lifecycle svg{width:min(100%,560px);height:auto}
.svc-groups{display:flex;flex-direction:column;gap:46px;margin-top:40px}
.svc-group{display:grid;grid-template-columns:230px 1fr;gap:40px;align-items:start}
.svc-group .stage-h{position:sticky;top:calc(var(--nav-h) + 24px)}
.svc-group .stage-n{
  font-family:var(--font-m);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);display:flex;align-items:center;gap:10px;margin-bottom:12px;
}
.svc-group .stage-n::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--blue)}
.svc-group .stage-d{font-size:13.5px;color:var(--muted);max-width:200px}
.svc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px}
.svc-card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px 22px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s, background .3s;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
}
.svc-card::after{
  content:"";position:absolute;inset:auto 0 0;height:2.5px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.svc-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent;background:#fff}
.svc-card:hover::after{transform:scaleX(1)}
.svc-icon{
  width:46px;height:46px;border-radius:4px;background:var(--blue-tint);color:var(--blue-deep);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  transition:transform .4s var(--ease);
}
.svc-card:hover .svc-icon{transform:scale(1.08) rotate(-4deg)}
.svc-card h4{font-family:var(--font-d);font-size:18px;font-weight:500;letter-spacing:-.02em;margin-bottom:9px}
.svc-card p{font-size:13.5px;color:var(--muted);line-height:1.55;flex:1}
.svc-card .more{
  margin-top:18px;font-family:var(--font-m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);display:flex;align-items:center;gap:8px;font-weight:600;
}
.svc-card .more .arr{transition:transform .3s var(--ease)}
.svc-card:hover .more .arr{transform:translateX(5px)}
.svc-reassure{
  margin-top:56px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  background:var(--blue-tint);border:1px solid rgba(28,92,255,.18);border-radius:var(--radius);padding:28px 34px;
}
.svc-reassure p{font-family:var(--font-d);font-size:clamp(17px,2vw,21px);font-weight:500;letter-spacing:-.02em;max-width:520px}
.svc-reassure p span{color:var(--blue-deep)}

/* ============================================================
   SERVICE DETAIL
   ============================================================ */
.svc-hero{
  position:relative;padding:calc(var(--nav-h) + 60px) 0 70px;overflow:hidden;
  background:var(--bg-band);
}
.svc-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center;position:relative;z-index:2}
.svc-hero h1{font-size:clamp(38px,5vw,64px);margin:18px 0 20px;max-width:14ch}
.svc-hero h1 .serif-it{color:var(--muted)}
.svc-hero .lede{max-width:520px}
.svc-hero .chips{margin-top:26px}
.svc-hero-ill{display:flex;justify-content:center}
.svc-hero-ill svg{width:min(100%,430px);height:auto;filter:drop-shadow(0 24px 48px rgba(28,92,255,.12))}
.svc-body{padding:100px 0}
.svc-block{display:grid;grid-template-columns:280px 1fr;gap:56px;padding:52px 0;border-top:1px solid var(--line)}
.svc-block:first-child{border-top:none;padding-top:0}
.svc-block .b-label{position:sticky;top:calc(var(--nav-h) + 24px);align-self:start}
.svc-block .b-label .n{
  font-family:var(--font-m);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--blue);
  display:flex;align-items:center;gap:10px;margin-bottom:14px;text-transform:uppercase;
}
.svc-block .b-label .n::before{content:"";width:22px;height:1.5px;background:var(--blue)}
.svc-block .b-label h3{font-family:var(--font-d);font-size:clamp(22px,2.6vw,30px);font-weight:500;letter-spacing:-.026em;line-height:1.16}
.pain-list{display:flex;flex-direction:column;gap:14px}
.pain{
  display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start;
  background:var(--bg-elev);border:1px solid var(--line);border-radius:4px;padding:20px 22px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.pain:hover{transform:translateX(6px);box-shadow:var(--shadow-sm)}
.pain .p-n{font-family:var(--font-m);font-size:11px;font-weight:600;color:var(--amber);padding-top:3px}
.pain h5{font-family:var(--font-d);font-size:16px;font-weight:500;letter-spacing:-.015em;margin-bottom:4px}
.pain p{font-size:13.5px;color:var(--muted)}
.deliver-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.deliver{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:4px;padding:22px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.deliver:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.deliver .d-art{
  font-family:var(--font-m);font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue-deep);background:var(--blue-tint);border-radius:4px;padding:4px 9px;display:inline-block;margin-bottom:14px;
}
.deliver h5{font-family:var(--font-d);font-size:16.5px;font-weight:500;letter-spacing:-.018em;margin-bottom:6px}
.deliver p{font-size:13.5px;color:var(--muted)}
.fit-strip{display:flex;align-items:stretch;gap:0;position:relative}
.fit-node{
  flex:1;text-align:center;padding:22px 12px 20px;border:1px solid var(--line);background:var(--bg-elev);
  position:relative;transition:all .3s;
}
.fit-node:first-child{border-radius:4px 0 0 4px}
.fit-node:last-child{border-radius:0 4px 4px 0;border-left:none}
.fit-node:not(:first-child){border-left:none}
.fit-node .f-k{font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.fit-node .f-t{font-family:var(--font-d);font-size:14.5px;font-weight:500;letter-spacing:-.015em}
.fit-node.active{background:var(--dark);border-color:var(--dark);color:#fff;z-index:1;box-shadow:0 14px 34px -12px rgba(10,12,18,.4)}
.fit-node.active .f-k{color:#789AFF}
.fit-note{margin-top:16px;font-size:13px;color:var(--muted);display:flex;gap:9px;align-items:baseline}
.fit-note::before{content:"→";font-family:var(--font-m);color:var(--blue)}
.proof-band{
  background:var(--dark);color:#E8EBF2;border-radius:4px;padding:44px 46px;position:relative;overflow:hidden;
  display:flex;align-items:center;gap:44px;flex-wrap:wrap;
}
.proof-band::before{
  content:"";position:absolute;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle, rgba(28,92,255,.3), transparent 62%);top:-240px;right:-140px;
}
.proof-band .pb-n{font-family:var(--font-d);font-size:clamp(56px,7vw,88px);font-weight:500;letter-spacing:-.045em;line-height:1;color:#8AA3FF;position:relative}
.proof-band .pb-body{position:relative;max-width:440px}
.proof-band .pb-body .pb-k{font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,235,242,.5);margin-bottom:10px}
.proof-band .pb-body p{font-size:15.5px;line-height:1.6;color:#D5DAE6}
.related{padding:0 0 110px}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}

/* ============================================================
   HOW WE WORK
   ============================================================ */
.how{padding:130px 0}
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:start;margin-top:10px}
.steps{position:relative;padding-left:34px}
.steps::before{
  content:"";position:absolute;left:8px;top:14px;bottom:14px;width:1.5px;
  background:linear-gradient(var(--line), var(--blue) 55%, var(--line));
}
.step{position:relative;padding:0 0 40px}
.step:last-child{padding-bottom:0}
.step .marker{
  position:absolute;left:-34px;top:2px;width:17px;height:17px;border-radius:50%;
  background:#fff;border:2px solid #C9CDD6;transition:border-color .3s, box-shadow .3s;
}
.step:hover .marker{border-color:var(--blue);box-shadow:0 0 0 6px rgba(28,92,255,.12)}
.step.hl .marker{border-color:var(--blue)}
.step.hl:hover .marker{box-shadow:0 0 0 6px rgba(28,92,255,.14)}
.step .s-num{font-family:var(--font-m);font-size:10px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.step h4{font-family:var(--font-d);font-size:21px;font-weight:500;letter-spacing:-.02em;margin:6px 0 8px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.step p{font-size:14.5px;color:var(--muted);max-width:420px}
.step .hl-tag{
  font-family:var(--font-m);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#8F610A;background:var(--amber-tint);border-radius:4px;padding:4px 9px;
}
.how-visual{position:sticky;top:calc(var(--nav-h) + 30px)}
.agent-card{
  background:var(--dark);border-radius:4px;padding:26px 24px 20px;color:#E8EBF2;
  box-shadow:0 30px 80px -24px rgba(10,12,18,.45);
}
.agent-card .ac-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.agent-card .ac-title{font-family:var(--font-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,235,242,.55)}
.agent-card .ac-live{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--font-m);font-size:9.5px;letter-spacing:.1em;
  color:var(--mint);text-transform:uppercase;
}
.agent-card .ac-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);animation:blink 1.6s infinite}
.agent-card svg{width:100%;height:auto}
.agent-note{margin-top:16px;font-size:12.5px;color:var(--muted);display:flex;gap:9px;align-items:baseline}
.agent-note::before{content:"*";font-family:var(--font-m);color:var(--blue);font-weight:600}
.ag-node rect{fill:#151926;stroke:rgba(255,255,255,.14);stroke-width:1}
.ag-node.core rect{fill:rgba(28,92,255,.16);stroke:var(--blue)}
.ag-node text{fill:#E8EBF2;font-family:var(--font-m);font-size:8.5px;letter-spacing:.08em}
.ag-node .sub{fill:rgba(232,235,242,.45);font-size:7px}
.ag-path{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.2;stroke-dasharray:4 5;animation:dashFlow 1.4s linear infinite}
.ag-path.ret{stroke:rgba(94,224,160,.4);animation-direction:reverse}
.ag-pulse{fill:#789AFF}
.ag-pulse.ret{fill:var(--mint)}

/* ============================================================
   WORK
   ============================================================ */
.work{padding:120px 0;background:var(--bg-elev);border-block:1px solid var(--line)}
.flagship{
  display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--line);border-radius:4px;
  overflow:hidden;background:var(--dark);color:#E8EBF2;margin-bottom:22px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.flagship:hover{transform:translateY(-5px);box-shadow:0 30px 80px -24px rgba(10,12,18,.5)}
.flagship .fl-visual{
  position:relative;min-height:340px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(520px 360px at 50% 40%, rgba(28,92,255,.10), transparent 70%), #EEF3FF;
}
.flagship .fl-visual svg{width:100%;height:auto;max-height:380px}
.flagship .fl-body{padding:44px 46px;display:flex;flex-direction:column;justify-content:center}
.flagship .fl-body .eyebrow{color:#789AFF}
.flagship h3{font-family:var(--font-d);font-size:clamp(24px,2.8vw,34px);font-weight:500;letter-spacing:-.028em;line-height:1.14;margin:18px 0 14px}
.flagship p{color:var(--dark-mut);font-size:15px;max-width:420px}
.flagship .fl-metric{display:flex;align-items:baseline;gap:16px;margin:26px 0}
.flagship .fl-metric .n{font-family:var(--font-d);font-size:56px;font-weight:500;letter-spacing:-.04em;color:#8AA3FF;line-height:1}
.flagship .fl-metric .d{font-size:13.5px;color:var(--dark-mut);max-width:190px;line-height:1.5}
.flagship .link-arrow{color:#8AA3FF}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.case-card{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);overflow:hidden;
  display:flex;flex-direction:column;position:relative;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s;
}
.case-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);background:#fff}
.case-art{
  height:190px;background:radial-gradient(260px 160px at 50% 45%, rgba(28,92,255,.08), transparent 70%), #EEF3FF;
  position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.case-art svg{width:90%;height:90%}
.case-card .cc-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.case-card .cc-ind{
  font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:8px;margin-bottom:16px;
}
.case-card .cc-ind::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue)}
.case-card h4{font-family:var(--font-d);font-size:19.5px;font-weight:500;letter-spacing:-.024em;line-height:1.24;margin-bottom:10px}
.case-card p{font-size:13.5px;color:var(--muted);flex:1}
.case-card .res{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft);
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
}
.case-card .res .v{font-family:var(--font-d);font-size:25px;font-weight:500;letter-spacing:-.03em;color:var(--blue)}
.case-card .res .k{font-family:var(--font-m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:right;max-width:120px;line-height:1.5}

/* ============================================================
   CASE STUDY DETAIL
   ============================================================ */
.cs-hero{padding:calc(var(--nav-h) + 70px) 0 80px;background:var(--dark);color:#EDEFF5;position:relative;overflow:hidden}
.cs-hero::before{
  content:"";position:absolute;width:820px;height:820px;border-radius:50%;
  background:radial-gradient(circle, rgba(28,92,255,.24), transparent 62%);top:-400px;right:-240px;
}
.cs-hero .breadcrumb{color:rgba(235,238,245,.5);position:relative;z-index:2}
.cs-hero .breadcrumb a{color:#8AA3FF}
.cs-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:end;position:relative;z-index:2}
.cs-hero h1{font-size:clamp(34px,4.6vw,60px);max-width:18ch;margin:22px 0 20px}
.cs-hero h1 .serif-it{color:#8AA3FF}
.cs-hero .lede{color:var(--dark-mut);max-width:520px}
.cs-hero-metric{text-align:right}
.cs-hero-metric .n{font-family:var(--font-d);font-size:clamp(72px,9vw,130px);font-weight:500;letter-spacing:-.05em;line-height:.95;color:#8AA3FF}
.cs-hero-metric .d{font-family:var(--font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(235,238,245,.5);margin-top:12px}
.cs-facts{display:flex;gap:34px;margin-top:44px;padding-top:26px;border-top:1px solid var(--dark-line);flex-wrap:wrap;position:relative;z-index:2}
.cs-facts .f .k{font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(235,238,245,.42);margin-bottom:6px}
.cs-facts .f .v{font-size:14px;font-weight:600;color:#E8EBF2}
.cs-body{padding:100px 0}
.cs-section{display:grid;grid-template-columns:250px 1fr;gap:60px;padding:48px 0;border-top:1px solid var(--line)}
.cs-section:first-child{border-top:none;padding-top:0}
.cs-section .cs-label{position:sticky;top:calc(var(--nav-h) + 24px);align-self:start}
.cs-section .cs-label .n{
  font-family:var(--font-m);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--blue);
  display:flex;align-items:center;gap:10px;text-transform:uppercase;margin-bottom:12px;
}
.cs-section .cs-label .n::before{content:"";width:22px;height:1.5px;background:var(--blue)}
.cs-section .cs-label h3{font-family:var(--font-d);font-size:26px;font-weight:500;letter-spacing:-.026em}
.cs-section .cs-content p{color:var(--ink-2);font-size:16px;margin-bottom:16px;max-width:640px}
.cs-section .cs-content ul{margin:0 0 16px;padding-left:20px}
.cs-section .cs-content li{color:var(--ink-2);font-size:15px;margin-bottom:8px}
.cs-visual{margin:26px 0 6px}
.cs-quote{
  border-left:3px solid var(--blue);padding:6px 0 6px 26px;margin:28px 0;
  font-family:var(--font-d);font-style:normal;font-weight:500;font-size:clamp(19px,2.2vw,24px);line-height:1.5;color:var(--ink);
}
.cs-quote cite{display:block;font-family:var(--font-m);font-style:normal;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:14px}
.result-band{background:var(--dark);border-radius:4px;padding:48px;color:#E8EBF2;position:relative;overflow:hidden}
.result-band::before{
  content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle, rgba(28,92,255,.26), transparent 62%);bottom:-300px;left:-160px;
}
.result-band .rb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative}
.result-band .rb .v{font-family:var(--font-d);font-size:clamp(34px,4vw,50px);font-weight:500;letter-spacing:-.04em;color:#8AA3FF}
.result-band .rb .k{font-family:var(--font-m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(232,235,242,.5);margin-top:10px;line-height:1.6}
.next-case{
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--radius);padding:30px 36px;background:var(--bg-elev);
  transition:box-shadow .35s var(--ease), transform .35s var(--ease);margin-top:60px;
}
.next-case:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.next-case .nc-k{font-family:var(--font-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.next-case h4{font-family:var(--font-d);font-size:22px;font-weight:500;letter-spacing:-.02em}

/* ============================================================
   ABOUT
   ============================================================ */
.about{padding:130px 0}
.about-mission{font-size:clamp(32px,4.6vw,58px);max-width:21ch;margin:22px 0 60px}
.about-mission .serif-it{color:var(--muted)}
.about-cols{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start}
.about-story p{color:var(--ink-2);font-size:16px;margin-bottom:18px;max-width:520px}
.values{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:34px}
.value{
  border:1px solid var(--line);border-radius:4px;padding:18px 20px;background:var(--bg-elev);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.value:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.value .v-t{font-family:var(--font-d);font-weight:500;font-size:15px;letter-spacing:-.015em;display:flex;gap:10px;align-items:baseline}
.value .v-t::before{content:"→";color:var(--blue);font-family:var(--font-m);font-size:12px}
.value p{font-size:12.5px;color:var(--muted);margin-top:6px}
.map-ill{
  background:var(--dark);border-radius:4px;padding:20px 18px 12px;position:relative;overflow:hidden;
  box-shadow:0 30px 80px -24px rgba(10,12,18,.45);margin-bottom:16px;
}
.map-ill svg{width:100%;height:auto}
.map-ill .map-cap{
  display:flex;justify-content:space-between;font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(232,235,242,.45);padding:8px 6px 6px;
}
.presence{display:flex;flex-direction:column;gap:14px}
.pres-card{
  border-radius:var(--radius);padding:24px 26px;border:1px solid var(--line);background:var(--bg-elev);
  display:flex;gap:18px;align-items:flex-start;transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.pres-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.pres-card .pc-icon{
  width:46px;height:46px;border-radius:4px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--blue-tint);
}
.pres-card h4{font-family:var(--font-d);font-size:18px;font-weight:500;letter-spacing:-.02em}
.pres-card .pc-k{font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.pres-card p{font-size:13.5px;color:var(--muted);margin-top:6px}
.pres-card.ar{background:var(--dark);color:#E8EBF2;border-color:transparent;align-items:center;justify-content:space-between}
.pres-card.ar .ar-txt{font-family:'Instrument Serif',serif;font-size:26px;direction:rtl}
.pres-card.ar p{color:var(--dark-mut);margin:0;font-size:13px}
.pres-card.ar .ar-l{max-width:300px}
.pres-card.ar h4{color:#fff}
.pres-card.ar .pc-k{color:rgba(235,238,245,.45)}
.team{padding:0 0 120px}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.person{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-elev);padding:24px;
  text-align:center;transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.person:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.person .avatar{
  width:76px;height:76px;border-radius:50%;margin:0 auto 18px;position:relative;
  background:linear-gradient(135deg,var(--blue),var(--blue-deep));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-weight:500;font-size:24px;color:#fff;letter-spacing:-.02em;
}
.person .avatar::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px dashed rgba(28,92,255,.4);
  animation:spin 24s linear infinite;
}
.person h4{font-family:var(--font-d);font-size:16.5px;font-weight:500;letter-spacing:-.015em}
.person .role{font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:7px}

/* ============================================================
   INSIGHTS
   ============================================================ */
.insights{padding:120px 0;background:var(--bg-elev);border-block:1px solid var(--line)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:36px}
.filter-chip{
  font-family:var(--font-m);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 16px;border-radius:4px;border:1.5px solid var(--line);color:var(--muted);
  transition:all .25s;background:transparent;
}
.filter-chip:hover{border-color:var(--blue);color:var(--blue)}
.filter-chip.active{background:var(--ink);border-color:var(--ink);color:#fff}
.ins-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:20px}
.ins-feature{
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--dark);color:#E8EBF2;
  display:flex;flex-direction:column;min-height:430px;position:relative;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.ins-feature:hover{transform:translateY(-5px);box-shadow:0 30px 70px -20px rgba(10,12,18,.5)}
.ins-art{
  flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(500px 300px at 80% 0%, rgba(28,92,255,.35), transparent 60%),
    radial-gradient(400px 300px at 0% 100%, rgba(28,92,255,.16), transparent 60%);
}
.ins-art svg{width:78%;height:auto}
.ins-body{padding:26px 28px 24px}
.ins-meta{display:flex;gap:14px;align-items:center;font-family:var(--font-m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;flex-wrap:wrap}
.ins-meta .cat{color:#8AA3FF}
.ins-meta .mut{color:rgba(232,235,242,.45)}
.ins-feature h4{font-family:var(--font-d);font-size:clamp(21px,2.4vw,27px);font-weight:500;letter-spacing:-.025em;line-height:1.18;max-width:22ch}
.ins-list{display:flex;flex-direction:column;gap:14px}
.ins-item{
  flex:1;border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px;background:var(--bg);
  display:flex;align-items:center;gap:22px;transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, opacity .3s;
}
.ins-item:hover{transform:translateX(6px);box-shadow:var(--shadow-sm);background:#fff}
.ins-item.hide{display:none}
.ins-item .ins-meta{margin-bottom:8px}
.ins-meta .cat2{color:var(--blue)}
.ins-item h5{font-family:var(--font-d);font-size:16.5px;font-weight:500;letter-spacing:-.02em;line-height:1.3}
.ins-item .go{
  margin-left:auto;flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .3s var(--ease);
}
.ins-item:hover .go{background:var(--blue);border-color:var(--blue);color:#fff;transform:rotate(-45deg)}

/* ============================================================
   ARTICLE
   ============================================================ */
.article-hero{padding:calc(var(--nav-h) + 70px) 0 60px;text-align:center;position:relative;overflow:hidden}
.article-hero .ins-meta{justify-content:center}
.article-hero h1{font-size:clamp(34px,4.8vw,60px);max-width:22ch;margin:20px auto 24px}
.article-hero .lede{max-width:620px;margin:0 auto;color:var(--muted)}
.article-art{padding:0 0 60px}
.article-art .art-frame{
  background:var(--dark);border-radius:4px;overflow:hidden;position:relative;
  min-height:320px;display:flex;align-items:center;justify-content:center;
  background-image:radial-gradient(600px 340px at 70% 10%, rgba(28,92,255,.32), transparent 62%),
                   radial-gradient(500px 300px at 10% 100%, rgba(28,92,255,.14), transparent 60%);
}
.article-art svg{width:min(72%,560px);height:auto}
.prose{max-width:690px;margin:0 auto;padding:0 0 70px}
.prose p{font-size:17px;line-height:1.75;color:var(--ink-2);margin-bottom:24px}
.prose h2{font-family:var(--font-d);font-size:clamp(24px,3vw,32px);font-weight:500;letter-spacing:-.026em;margin:48px 0 18px}
.prose ul{margin:0 0 24px;padding-left:22px}
.prose li{font-size:16px;line-height:1.7;color:var(--ink-2);margin-bottom:10px}
.prose li b{color:var(--ink)}
.pull{
  border-left:3px solid var(--blue);padding:8px 0 8px 26px;margin:38px 0;
  font-family:var(--font-d);font-style:normal;font-weight:500;font-size:clamp(20px,2.4vw,26px);line-height:1.5;color:var(--ink);
}
.prose .inline-cta{
  background:var(--dark);color:#E8EBF2;border-radius:4px;padding:30px 34px;margin:44px 0;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;position:relative;overflow:hidden;
}
.prose .inline-cta::before{
  content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle, rgba(28,92,255,.3), transparent 62%);top:-190px;right:-90px;
}
.prose .inline-cta h4{font-family:var(--font-d);font-size:19px;font-weight:500;letter-spacing:-.02em;position:relative;max-width:340px}
.author-card{
  display:flex;gap:18px;align-items:center;border:1px solid var(--line);border-radius:4px;
  padding:22px 26px;background:var(--bg-elev);margin:44px 0 0;
}
.author-card .avatar{
  width:56px;height:56px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,var(--blue),var(--blue-deep));
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-d);font-weight:500;font-size:18px;
}
.author-card .a-name{font-family:var(--font-d);font-weight:500;font-size:15.5px}
.author-card .a-role{font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.related-posts{padding:0 0 110px}
.related-posts .ins-list{max-width:690px;margin:30px auto 0}

/* ============================================================
   BOOK A CALL
   ============================================================ */
.book{padding:0 0 120px}
.book-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:70px;align-items:start;margin-top:14px}
.call-ill{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;margin-bottom:30px;box-shadow:var(--shadow-sm);
}
.call-ill svg{width:100%;height:auto}
.book-why{display:flex;flex-direction:column}
.why-item{display:grid;grid-template-columns:1fr;gap:18px;padding:22px 0;border-top:1px solid var(--line)}
.why-item:last-child{border-bottom:1px solid var(--line)}
.why-item .wi{
  width:44px;height:44px;border-radius:4px;background:var(--blue-tint);color:var(--blue-deep);
  display:flex;align-items:center;justify-content:center;
}
.why-item h4{font-family:var(--font-d);font-size:17px;font-weight:500;letter-spacing:-.02em;margin-bottom:5px}
.why-item p{font-size:14px;color:var(--muted)}
.book-alt{margin-top:30px;display:flex;gap:26px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.book-alt a{color:var(--ink);font-weight:600;border-bottom:1.5px solid var(--blue);padding-bottom:1px;transition:color .2s}
.book-alt a:hover{color:var(--blue)}
.booking{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:4px;box-shadow:var(--shadow-md);
  padding:30px 30px 28px;position:relative;overflow:hidden;
}
.booking::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),#8AA3FF,var(--blue));
}
.sched{border:1px solid var(--line-soft);border-radius:4px;padding:18px;background:var(--bg);margin-bottom:24px}
.sched-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.sched-head .m{font-family:var(--font-d);font-weight:500;font-size:14.5px;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.sched-head .tz{font-family:var(--font-m);font-size:9.5px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:12px}
.day{
  text-align:center;padding:9px 0 8px;border-radius:4px;border:1px solid transparent;
  font-size:12px;font-weight:600;color:var(--ink-2);position:relative;transition:all .25s;
}
.day small{display:block;font-family:var(--font-m);font-size:8.5px;letter-spacing:.08em;color:var(--muted);font-weight:500;margin-bottom:3px;text-transform:uppercase}
.day.avail{cursor:pointer}
.day.avail:hover{border-color:var(--blue);color:var(--blue)}
.day.sel{background:var(--blue);color:#fff;box-shadow:var(--shadow-blue)}
.day.sel small{color:rgba(255,255,255,.75)}
.day.off{opacity:.32}
.slots{display:flex;gap:7px;flex-wrap:wrap}
.slot{
  font-family:var(--font-m);font-size:11px;font-weight:500;padding:8px 14px;border-radius:4px;
  border:1px solid var(--line);color:var(--ink-2);cursor:pointer;transition:all .25s;
}
.slot:hover{border-color:var(--blue);color:var(--blue)}
.slot.sel{background:var(--ink);color:#fff;border-color:var(--ink)}
.bform{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--font-m);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{
  border:1.5px solid var(--line);border-radius:4px;padding:13px 15px;font-size:14.5px;color:var(--ink);
  background:#FDFDFC;transition:border-color .25s, box-shadow .25s;outline:none;resize:vertical;
}
.field input:focus,.field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(28,92,255,.12)}
.field ::placeholder{color:#A6ACB8}
.bform .btn{grid-column:1/-1;justify-content:center;margin-top:6px}
.form-note{grid-column:1/-1;text-align:center;font-size:12px;color:var(--muted)}
.form-success{display:none;text-align:center;padding:56px 20px}
.form-success.show{display:block;animation:fadeup .6s var(--ease)}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.form-success .tick{
  width:64px;height:64px;border-radius:50%;background:var(--green-tint);color:var(--green);
  display:flex;align-items:center;justify-content:center;margin:0 auto 22px;
}
.form-success h4{font-family:var(--font-d);font-size:24px;letter-spacing:-.02em;margin-bottom:10px}
.form-success p{color:var(--muted);font-size:14.5px;max-width:340px;margin:0 auto}

/* ============================================================
   FINAL CTA + FOOTER
   ============================================================ */
.cta-band{background:var(--dark);color:#F0F2F8;padding:120px 0;position:relative;overflow:hidden;text-align:center}
.cta-band::before{
  content:"";position:absolute;width:760px;height:760px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(28,92,255,.25),transparent 62%);top:-420px;left:50%;transform:translateX(-50%);
}
.cta-twinkles{position:absolute;inset:0;pointer-events:none}
.cta-twinkles svg{position:absolute}
.cta-band .eyebrow{color:#789AFF;justify-content:center}
.cta-band .eyebrow::before{display:none}
.cta-band h2{font-size:clamp(34px,5vw,62px);max-width:20ch;margin:22px auto 20px;position:relative}
.cta-band h2 .serif-it{color:#8AA3FF}
.cta-band p{color:var(--dark-mut);max-width:480px;margin:0 auto 40px;font-size:16.5px;position:relative}
.cta-band .btn{font-size:13px;padding:18px 34px;position:relative}

.footer{background:var(--dark);color:var(--dark-mut);border-top:1px solid var(--dark-line);padding:70px 0 0;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:44px;padding-bottom:56px}
.foot-brand .brand{color:#fff;font-size:23px}
.foot-brand p{margin:16px 0 22px;max-width:270px;font-size:13.5px;line-height:1.6}
.socials{display:flex;gap:10px}
.socials a{
  width:38px;height:38px;border-radius:4px;border:1px solid var(--dark-line);
  display:flex;align-items:center;justify-content:center;color:var(--dark-mut);transition:all .3s;
}
.socials a:hover{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.2)}
.foot-col h5{font-family:var(--font-m);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(235,238,245,.4);margin-bottom:18px}
.foot-col a{display:block;padding:5px 0;color:var(--dark-mut);transition:color .2s;font-size:13.5px}
.foot-col a:hover{color:#fff}
.foot-col .fc-line{padding:5px 0;font-size:13.5px;display:flex;gap:9px;align-items:baseline}
.foot-col .fc-line b{color:rgba(235,238,245,.75);font-weight:500}
.foot-bottom{
  border-top:1px solid var(--dark-line);padding:22px 0;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  font-family:var(--font-m);font-size:11px;letter-spacing:.06em;color:rgba(235,238,245,.38);
}
.foot-bottom .spacer{flex:1}
.foot-bottom a{transition:color .2s}
.foot-bottom a:hover{color:#fff}
.lang-toggle{
  border:1px solid var(--dark-line);border-radius:4px;padding:7px 15px;color:var(--dark-mut);
  font-family:var(--font-m);font-size:11px;transition:all .25s;display:inline-flex;gap:8px;align-items:center;
}
.lang-toggle:hover{color:#fff;border-color:rgba(255,255,255,.25)}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}
.reveal-d4{transition-delay:.32s}.reveal-d5{transition-delay:.4s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1020px){
  .hero-inner,.page-hero-grid,.svc-hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-ill svg{max-width:440px}
  .proof-grid,.how-grid,.about-cols,.book-grid,.cs-hero-grid{grid-template-columns:1fr;gap:56px}
  .cs-hero-metric{text-align:left}
  .how-visual{position:static}
  .work-grid{grid-template-columns:1fr 1fr}
  .flagship{grid-template-columns:1fr}
  .ins-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
  .flow{grid-template-columns:repeat(5,minmax(150px,1fr));overflow-x:auto;padding-bottom:12px}
  .flow-pulse{display:none}
  .svc-group{grid-template-columns:1fr;gap:20px}
  .svc-group .stage-h{position:static;display:flex;align-items:baseline;gap:18px}
  .svc-block,.cs-section{grid-template-columns:1fr;gap:26px}
  .svc-block .b-label,.cs-section .cs-label{position:static}
  .team-grid{grid-template-columns:1fr 1fr}
  .result-band .rb-grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media(max-width:760px){
  .nav-links,.nav-cta{display:none}
  .theme-toggle{margin-left:auto}
  .burger{display:flex;margin-left:4px}
  .principle{grid-template-columns:1fr;gap:18px;padding:34px 22px}
  .principle .p-ill{width:76px;height:76px}
  .work-grid{grid-template-columns:1fr}
  .bform{grid-template-columns:1fr}
  .sec-head{margin-bottom:42px}
  .case-float{right:10px;bottom:-14px}
  .hero-meta{gap:12px}
  .days{gap:4px}
  .day{font-size:11px;padding:8px 0 7px}
  .foot-grid{grid-template-columns:1fr;gap:34px}
  .shift,.principles,.how,.about,.svc-body,.cs-body{padding:90px 0}
  .proof,.services,.work,.insights,.continuum{padding:80px 0}
  .cta-band{padding:90px 0}
  .scroll-hint{display:none}
  .team-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .deliver-grid{grid-template-columns:1fr}
  .fit-strip{flex-direction:column}
  .fit-node{border-left:1px solid var(--line)!important;border-radius:0!important}
  .fit-node:first-child{border-radius:4px 4px 0 0!important}
  .fit-node:last-child{border-radius:0 0 4px 4px!important}
  .proof-band{padding:34px 28px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .bars i{transform:scaleY(1)}
  .spark polyline{stroke-dashoffset:0}
  .ag-pulse,.flow-pulse,.cta-twinkles{display:none}
  .ag-path{animation:none}
  .dl{stroke-dashoffset:0}
}

/* ============================================================
   DIRECTION B ADDITIONS — supermemory illustration language
   Primitive layer: plate · dotted field · construction rule ·
   selection bbox · mono index rail.  See REDESIGN-PLAN.md §5.1
   ============================================================ */

/* ---------- saturated illustration plate ---------- */
.plate{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background-color:var(--plate);
  background-image:radial-gradient(var(--p-dot) 1px, transparent 1px);
  background-size:14px 14px;
  aspect-ratio:420/340;
}
.plate svg{width:100%;height:100%;display:block}
.plate.tall{aspect-ratio:420/400}

/* iso primitives — faces are tinted through tokens so one
   stylesheet change re-skins every illustration on the site */
.f-t{fill:var(--p-face-t)} .f-r{fill:var(--p-face-r)} .f-l{fill:var(--p-face-l)}
.s-t{fill:var(--p-slab-t)} .s-r{fill:var(--p-slab-r)} .s-l{fill:var(--p-slab-l)}
.f-t,.f-r,.f-l,.s-t,.s-r,.s-l{stroke:var(--p-line);stroke-width:.9;stroke-linejoin:round}
.guide{fill:none;stroke:var(--p-dash);stroke-width:1;stroke-dasharray:4 4}
.conn{fill:none;stroke:var(--p-line);stroke-width:1.4;stroke-dasharray:5 4}
.node{fill:var(--p-line)}
.lead{stroke:var(--p-line);stroke-width:1;fill:none}
.lbl{
  font-family:var(--font-m);font-size:9px;font-weight:600;
  letter-spacing:.14em;fill:var(--p-line);text-transform:uppercase;
}

/* ---------- mono section index rail ---------- */
.ix{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  font-family:var(--font-m);font-size:10.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  border-top:1px solid var(--line);padding-top:14px;margin-bottom:44px;
}
.ix b{color:var(--blue);font-weight:600}
.ix .n{font-variant-numeric:tabular-nums}
.dark-band .ix,.shift .ix,.cta-band .ix{border-top-color:var(--dark-line);color:var(--dark-mut)}
.dark-band .ix b,.shift .ix b,.cta-band .ix b{color:#8AA3FF}

/* ---------- selection bbox (dashed + square corner handles) ---------- */
.bbox{position:relative;padding:3px}
.bbox::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1px dashed var(--blue);opacity:.55;
}
.bbox .hd{position:absolute;width:7px;height:7px;background:var(--blue)}
.bbox .hd.tl{left:-3.5px;top:-3.5px}   .bbox .hd.tr{right:-3.5px;top:-3.5px}
.bbox .hd.bl{left:-3.5px;bottom:-3.5px} .bbox .hd.br{right:-3.5px;bottom:-3.5px}

/* ---------- the gap: legacy-vs-us split ---------- */
.gap-sec{padding:104px 0}
.gapsplit{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius-sm);overflow:hidden;
}
.gapsplit > div{padding:34px 36px}
.gapsplit > div:first-child{border-right:1px solid var(--line);background:var(--bg-elev)}
.gapsplit .tag{
  display:flex;align-items:center;gap:8px;margin-bottom:18px;
  font-family:var(--font-m);font-size:10px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;
}
.gapsplit .no  .tag{color:var(--muted)}
.gapsplit .yes .tag{color:var(--blue)}
.gapsplit h3{
  font-family:var(--font-d);font-weight:500;font-size:clamp(19px,2.2vw,23px);
  line-height:1.28;letter-spacing:-.026em;margin-bottom:22px;max-width:22ch;
}
.gapsplit .no h3{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.gapsplit ul{list-style:none;margin:0;padding:0}
.gapsplit li{display:flex;gap:11px;font-size:14.5px;line-height:1.5;margin-bottom:12px}
.gapsplit li:last-child{margin-bottom:0}
.gapsplit .mk{flex:none;font-family:var(--font-m);font-size:11px;padding-top:.24em}
.gapsplit .no li,.gapsplit .no .mk{color:var(--muted)}
.gapsplit .yes li{color:var(--ink-2)}
.gapsplit .yes .mk{color:var(--blue)}

/* ---------- tint stat cards (together.ai) ---------- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{
  border-radius:var(--radius-sm);padding:24px 22px 22px;min-height:180px;
  display:flex;flex-direction:column;justify-content:space-between;color:#05060A;
}
.stat:nth-child(1){background:var(--tint-1)}
.stat:nth-child(2){background:var(--tint-2)}
.stat:nth-child(3){background:var(--tint-3)}
.stat:nth-child(4){background:var(--tint-4)}
.stat .k{
  font-family:var(--font-m);font-size:9.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;opacity:.55;
}
.stat .v{
  font-family:var(--font-d);font-weight:500;font-size:clamp(34px,4.2vw,46px);
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;
}
.stat .v small{font-size:.44em;letter-spacing:-.01em;margin-left:6px}
.stat .d{font-size:12.5px;line-height:1.45;opacity:.62;margin-top:9px}

@media(max-width:1020px){
  .stat-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .gapsplit{grid-template-columns:1fr}
  .gapsplit > div:first-child{border-right:none;border-bottom:1px solid var(--line)}
  .stat-row{grid-template-columns:1fr}
  .gap-sec{padding:72px 0}
}

/* ---------- plates inside existing illustration slots ---------- */
.hero-ill,.page-hero-ill,.svc-hero-ill{display:block;width:100%}
.hero-ill .plate{width:min(100%,540px);margin-inline:auto}
/* brand banner sits directly on the hero band — the saturated plate
   fights its five-colour palette, so it gets no frame. */
.hero-ill img{width:min(100%,580px);height:auto;margin-inline:auto;display:block}
.page-hero-ill .plate,.svc-hero-ill .plate{width:min(100%,460px);margin-inline:auto}
.hero-ill .plate svg,.page-hero-ill .plate svg,.svc-hero-ill .plate svg{
  width:100%;height:100%;max-width:none;filter:none;
}

/* ---------- hero banner (inlined SVG so its motion actually runs;
   an <img>-referenced SVG does not execute CSS animation in Chrome) ---------- */
.hero-ill > svg{width:min(100%,580px);height:auto;margin-inline:auto;display:block;filter:none}
.hero-ill .blk{animation:bnr-bob 5.4s ease-in-out infinite}
.hero-ill .b-rag {animation-duration:5.4s; animation-delay:0s}
.hero-ill .b-mcp {animation-duration:6.3s; animation-delay:-1.1s}
.hero-ill .b-mem {animation-duration:5.8s; animation-delay:-2.3s}
.hero-ill .b-api {animation-duration:6.8s; animation-delay:-3.1s}
.hero-ill .b-core{animation-name:bnr-bob-core; animation-duration:9s; animation-delay:-.5s}
@keyframes bnr-bob     {0%,100%{transform:translateY(0)}50%{transform:translateY(-42px)}}
@keyframes bnr-bob-core{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
/* context flowing along the links, into the core */
.hero-ill .lnk > path{animation:bnr-flow 2.8s linear infinite}
@keyframes bnr-flow{to{stroke-dashoffset:-109.18}}
/* dashed ellipse reads as spin without breaking the isometric plane */
.hero-ill .ring{animation:bnr-ring 5.4s linear infinite}
@keyframes bnr-ring{to{stroke-dashoffset:-62.82}}

/* ============================================================
   ISOMETRIC MACHINE KIT — see assets/js/machines.js
   Style after supermemory's product illustrations; ramp is ours.
   ============================================================ */
:root{
  --k-top:#FFFFFF; --k-top2:#F2F4F8; --k-left:#E4E6EA; --k-right:#CFD4DC; --k-edge:#B4BAC4;
  --k-blue:var(--blue); --k-blued:var(--blue-deep); --k-blued2:#0A34AC;
  --k-bluel:#7FA3FF; --k-blues:#B9CCFF;
  --k-void:#0A1B3D; --k-void2:#05102A;
}
.mach{position:relative;width:100%}
.mach svg{width:min(100%,540px);height:auto;margin-inline:auto;display:block;filter:none;max-width:none}
.k-t{fill:var(--k-top)} .k-t2{fill:var(--k-top2)}
.k-l{fill:var(--k-left)} .k-r{fill:var(--k-right)} .k-edge{fill:var(--k-edge)}
.k-blue{fill:var(--k-blue)} .k-blued{fill:var(--k-blued)} .k-blued2{fill:var(--k-blued2)}
.k-bluel{fill:var(--k-bluel)} .k-blues{fill:var(--k-blues)}
.k-void{fill:var(--k-void)} .k-void2{fill:var(--k-void2)}