/* ============================================================================
   Creoglyph homepage v2
   Dark, locked. One accent, rationed. Everything is built from frames, lines
   and nodes on a shared 4px sub-grid, which is the same vocabulary as the logo.

   Spacing rule: every padding, margin and gap comes from --s-* below. There are
   no off-scale values in this file. build/lint.py fails on any that appear.
   ============================================================================ */

@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/plus-jakarta-sans-var.woff2") format("woff2-variations");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-var.woff2") format("woff2-variations");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  /* surfaces */
  --bg:#08080a; --bg-1:#0e0e11; --bg-2:#141418;
  /* ink */
  --ink:#f7f7f8; --ink-2:#a0a0a9; --ink-3:#72727b; --ink-4:#4e4e57;
  /* lines */
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12); --line-3:rgba(255,255,255,.2);
  /* the single accent */
  --accent:#ff4a0a; --accent-hi:#ff7337;
  --accent-dim:rgba(255,74,10,.08); --accent-bd:rgba(255,74,10,.45);

  --font-d:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  --font-b:"Manrope",ui-sans-serif,system-ui,sans-serif;
  --font-m:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* spacing scale. Nothing outside this list. */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px; --s-11:80px; --s-12:96px;
  --s-13:120px; --s-14:160px;

  --r-pill:999px; --r-lg:16px; --r-md:12px; --r-sm:8px;

  --nav-h:72px;
  --wrap:1200px;
  --gutter:var(--s-6);
  --sec:var(--s-12);

  --ease:cubic-bezier(.16,1,.3,1);
  --t-fast:150ms; --t:300ms; --t-slow:600ms;
  color-scheme:dark;
}
@media (min-width:1024px){:root{--gutter:var(--s-8)}}
@media (max-width:900px){:root{--sec:var(--s-10);--nav-h:64px}}
@media (max-width:600px){:root{--sec:var(--s-9);--gutter:var(--s-5)}}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + var(--s-7))}
body{background:var(--bg);color:var(--ink);font-family:var(--font-b);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.is-locked{overflow:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:600;letter-spacing:-.028em;line-height:1.1}
dl,dd{margin:0}

/* ---------- a11y primitives ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
:focus:not(:focus-visible){outline:none}
main:focus{outline:none}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;top:var(--s-3);left:var(--s-3);z-index:90;padding:var(--s-3) var(--s-5);background:var(--ink);color:var(--bg);border-radius:var(--r-pill);font-weight:600;font-size:15px;transform:translateY(-200%);transition:transform var(--t) var(--ease)}
.skip:focus{transform:translateY(0)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec)}
.rule-top{border-top:1px solid var(--line)}

/* Section header. One consistent shape everywhere, so rhythm never drifts. */
.shead{max-width:44rem;margin-bottom:var(--s-10)}
.shead .h2{margin-bottom:var(--s-4)}
@media (max-width:900px){.shead{margin-bottom:var(--s-9)}}

.kicker{display:flex;align-items:center;gap:var(--s-3);line-height:1;margin-bottom:var(--s-5);font-family:var(--font-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.kicker::before{content:"";width:22px;height:2px;border-radius:1px;background:var(--accent);flex:none}

/* ---------- type ---------- */
.display{font-size:clamp(30px,5.2vw,64px);letter-spacing:-.038em;line-height:1.04;text-wrap:balance}
.h2{font-size:clamp(25px,3.2vw,42px);letter-spacing:-.032em;line-height:1.12;text-wrap:balance}
.h3{font-size:19px;letter-spacing:-.02em;line-height:1.3}
.h4{font-size:16px;letter-spacing:-.014em}
.lead{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--ink-2);max-width:56ch;text-wrap:pretty}
.body{color:var(--ink-2);max-width:64ch;text-wrap:pretty}
.small{font-size:15px;line-height:1.6;color:var(--ink-2);max-width:58ch}
.tiny{font-size:13px;line-height:1.5;color:var(--ink-3)}
.mono{font-family:var(--font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums}

.ic{width:1em;height:1em;flex:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);white-space:nowrap;min-height:48px;padding:var(--s-3) var(--s-6);border:1px solid var(--line-2);border-radius:var(--r-pill);font-weight:600;font-size:15px;line-height:1;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.btn:hover{border-color:var(--line-3);background:rgba(255,255,255,.05)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.btn-primary:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
.btn-sm{min-height:40px;padding:var(--s-2) var(--s-4);font-size:14px}
.btn-block{width:100%}
.btn .ic{width:14px;height:14px;flex:none;fill:currentColor}

.tlink{display:inline-flex;align-items:center;gap:var(--s-2);font-size:15px;font-weight:600;padding-block:var(--s-1)}
.tlink .ic{width:12px;height:12px;fill:var(--ink-4)}


/* ============================================================================
   LABEL MOTION
   Carried over from the previous Creoglyph site, which ran a character scramble
   on its CTAs. Rebuilt so it can never move the layout:
     .fx-a  the real text, sits in flow, owns the width and the height
     .fx-b  absolutely positioned, so it contributes nothing to sizing
     .fx    a fixed mask with overflow hidden, so nothing can escape the box
   Character widths inside .fx-b are locked once in JS, so swapping a character
   for a glitch character cannot change a width either.
   ============================================================================ */
.fx{position:relative;display:inline-block;overflow:hidden;white-space:pre;
    height:1.35em;line-height:1.35em;vertical-align:middle}
.fx-a,.fx-b{display:block;height:1.35em;line-height:1.35em;white-space:pre;
    transition:transform 440ms var(--ease)}
.fx-b{position:absolute;left:0;top:0;transform:translateY(105%)}
.fx-b span{display:inline-block}

.btn:hover .fx-a, .btn:focus-visible .fx-a,
.nav-links a:hover .fx-a, .nav-links a:focus-visible .fx-a{transform:translateY(-105%)}
.btn:hover .fx-b, .btn:focus-visible .fx-b,
.nav-links a:hover .fx-b, .nav-links a:focus-visible .fx-b{transform:translateY(0)}

/* the glitch characters take the accent for the moment they exist, then resolve */
.fx-b span[data-g]{color:var(--accent)}
.btn-primary .fx-b span[data-g]{color:#ffd9c9}

/* ---------- text links: the rule leaves to the right, the accent enters from
     the left. Both are absolutely positioned pseudo elements, so the link box
     never changes. ---------- */
.tlink{position:relative;border-bottom:0;padding-bottom:4px}
.tlink::after,.tlink::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px}
.tlink::after{background:var(--line-2);transform:scaleX(1);transform-origin:100% 50%;
    transition:transform 300ms var(--ease) 180ms}
.tlink::before{background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
    transition:transform 300ms var(--ease)}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(0);transition-delay:0ms}
.tlink:hover::before,.tlink:focus-visible::before{transform:scaleX(1);transition-delay:180ms}
.tlink:hover .ic,.tlink:focus-visible .ic{fill:var(--ink-2);transform:translate(2px,-2px)}
.tlink .ic{transition:fill 200ms var(--ease),transform 300ms var(--ease)}

@media (prefers-reduced-motion:reduce){
  .fx{overflow:visible;height:auto;line-height:inherit}
  .fx-a{transform:none !important}
  .fx-b{display:none}
  .tlink::before{transform:scaleX(0) !important}
  .tlink::after{transform:scaleX(1) !important}
  .tlink:hover::after{background:var(--accent)}
}

/* ---------- logo ---------- */
.logo{width:132px;height:23px;color:var(--ink)}
.logo path{fill:currentColor}
.brand{display:inline-flex;align-items:center;min-height:48px}
@media (max-width:600px){.logo{width:116px;height:20px}}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav-h);display:flex;align-items:center;border-bottom:1px solid transparent;transition:background var(--t) var(--ease),border-color var(--t) var(--ease)}
.nav.is-stuck{background:rgba(8,8,10,.72);backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);border-bottom-color:var(--line)}
@supports not (backdrop-filter:blur(2px)){.nav.is-stuck{background:rgba(8,8,10,.97)}}
@media (prefers-reduced-transparency:reduce){.nav.is-stuck{background:rgba(8,8,10,.98);backdrop-filter:none}}
.nav-in{display:flex;align-items:center;gap:var(--s-6)}
.nav-links{display:flex;align-items:center;gap:var(--s-1);margin-left:auto}
.nav-links a{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--s-3);border-radius:var(--r-pill);font-size:15px;font-weight:500;color:var(--ink-2);transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.nav-toggle{display:none}
@media (max-width:960px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;width:48px;height:48px;border:1px solid var(--line-2);border-radius:var(--r-pill)}
  .nav-toggle .ic{width:18px;height:18px;fill:currentColor}
}

/* ---------- mobile menu ---------- */
.menu{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;padding-block:var(--s-3) var(--s-8);overflow-y:auto;opacity:0;visibility:hidden;transition:opacity var(--t) var(--ease),visibility var(--t)}
.menu[data-open="true"]{opacity:1;visibility:visible}
.menu-top{display:flex;align-items:center;height:var(--nav-h)}
.menu-close{margin-left:auto;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:var(--r-pill)}
.menu-close .ic{width:18px;height:18px;fill:currentColor}
.menu-nav{margin-top:var(--s-8);display:grid}
.menu-nav a{display:flex;align-items:center;justify-content:space-between;min-height:56px;font-family:var(--font-d);font-size:26px;font-weight:600;letter-spacing:-.03em;padding-block:var(--s-3);border-bottom:1px solid var(--line);color:var(--ink-2)}
.menu-nav a .ic{width:14px;height:14px;fill:var(--ink-4)}
.menu-foot{margin-top:auto;padding-top:var(--s-9);display:grid;gap:var(--s-3)}

/* ============================================================================
   1. HERO
   ============================================================================ */
.hero{padding-top:calc(var(--nav-h) + var(--s-12));padding-bottom:var(--s-11)}
@media (max-width:900px){.hero{padding-top:calc(var(--nav-h) + var(--s-10));padding-bottom:var(--s-10)}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:var(--s-11);align-items:center}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;gap:var(--s-10)}}
.hero-copy .display{max-width:15ch}
.hero-copy .lead{margin-top:var(--s-6)}
.hero-cta{margin-top:var(--s-8);display:flex;flex-wrap:wrap;gap:var(--s-3)}
.hero-fig{margin:0}
.hero-fig svg{width:100%;height:auto}

/* ============================================================================
   2. CREDIBILITY STRIP
   Unequal columns, hairline dividers, no boxes. Weight comes from the numerals.
   ============================================================================ */
.cred-sec{padding-bottom:var(--s-4)}
.cred{display:grid;grid-template-columns:.7fr .7fr 1.6fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);align-items:start}
.cred-cell{padding:var(--s-8) var(--s-7) var(--s-8) 0}
.cred-cell + .cred-cell{border-left:1px solid var(--line);padding-left:var(--s-7)}
.cred-n{font-family:var(--font-d);font-size:clamp(38px,4vw,54px);font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.cred-plus{color:var(--ink-3);font-size:.62em;vertical-align:.22em;margin-left:2px}
.cred-k{margin-top:var(--s-3);font-size:15px;line-height:1.4;color:var(--ink-2);max-width:24ch}
.cred-apps{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}
.cred-app{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:var(--r-pill);font-size:13px;color:var(--ink-2)}

@media (max-width:760px){
  .cred{grid-template-columns:1fr}
  .cred-cell{padding:var(--s-6) 0}
  .cred-cell + .cred-cell{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .cred-n{font-size:40px}
  .cred-k{max-width:none}
}

/* ============================================================================
   3. THE SHIFT
   ============================================================================ */
.shift-list{display:grid;gap:0}
.shift-row{display:grid;grid-template-columns:320px minmax(0,1fr);gap:var(--s-9);align-items:baseline;padding-block:var(--s-8);border-top:1px solid var(--line)}
.shift-l{display:flex;align-items:baseline;gap:var(--s-4)}
.shift-row:last-child{border-bottom:1px solid var(--line)}
.shift-n{font-family:var(--font-m);font-size:12px;letter-spacing:.1em;color:var(--ink-4);flex:none}
.shift-row.is-now .shift-n{color:var(--accent)}

@media (max-width:820px){.shift-row{grid-template-columns:1fr;gap:var(--s-3);padding-block:var(--s-7)}}

/* ============================================================================
   4. ECOSYSTEM
   ============================================================================ */
.eco{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s-10);align-items:start}
@media (max-width:960px){.eco{grid-template-columns:1fr;gap:var(--s-9)}}
.eco-fig{position:sticky;top:calc(var(--nav-h) + var(--s-8))}
@media (max-width:960px){.eco-fig{position:static}}
.figbox{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-1);padding:var(--s-7);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.figbox > svg{width:100%;height:auto;display:block}
.figcap{margin-top:var(--s-6);font-size:13px;line-height:1.5;color:var(--ink-3)}

.eco-steps{display:grid;gap:var(--s-9);padding-block:var(--s-6)}
@media (max-width:960px){.eco-steps{gap:var(--s-8);padding-block:0}}
.step{opacity:.4;padding-left:var(--s-6);border-left:2px solid rgba(255,255,255,.16);transition:opacity var(--t-slow) var(--ease),border-color var(--t) var(--ease)}
.step.is-on{opacity:1;border-left-color:var(--accent)}
.step-h{margin-bottom:var(--s-3)}
@media (max-width:960px){.step{opacity:1;padding-left:var(--s-5)}}

/* ============================================================================
   5. CREOGEN MODULES
   ============================================================================ */
.mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
@media (max-width:900px){.mods{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.mods{grid-template-columns:1fr}}
.mod{display:flex;flex-direction:column;padding:var(--s-7);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-1);box-shadow:inset 0 1px 0 rgba(255,255,255,.03);transition:border-color var(--t) var(--ease)}
.mod:hover{border-color:var(--line-2)}
.mod-gl{width:44px;height:44px;margin-bottom:var(--s-6);flex:none}
.mod .h4{margin-bottom:var(--s-2)}
.mod p{font-size:14px;line-height:1.58;color:var(--ink-2)}
.mod-tags{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:auto;padding-top:var(--s-5)}
.mod-tag{font-family:var(--font-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s-1) var(--s-2)}

/* ============================================================================
   6. CREOBOT
   ============================================================================ */
.figbox-wide{margin:0}
.figbox-wide > svg{width:100%;height:auto;display:block}
.bot-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s-8);margin-top:var(--s-9)}
.bot-point{padding-block:var(--s-6);border-top:1px solid var(--line)}
.bot-point dt{font-family:var(--font-d);font-size:15px;font-weight:600;color:var(--ink);margin-bottom:var(--s-2)}
.bot-point dd{font-size:14px;line-height:1.58;color:var(--ink-2)}
@media (max-width:860px){.bot-points{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.bot-points{grid-template-columns:1fr}}

/* ============================================================================
   7. APPS CARD STACK
   ============================================================================ */
.stack{display:block;isolation:isolate}
.stack-item + .stack-item{margin-top:var(--s-4)}
.stack-item{position:sticky;top:calc(var(--nav-h) + var(--s-6) + var(--i) * 16px)}
.appcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:var(--s-9);align-items:center;background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:var(--s-9);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transform-origin:center top;will-change:transform,filter;transition:transform var(--t) var(--ease),filter var(--t) var(--ease)}
/* Depth cue for cards sitting under the stack.
   NEVER opacity. These cards physically overlap, so any alpha below 1 lets the
   card underneath read straight through and the deck turns into ghost text.
   brightness() dims the rendered result without touching the alpha channel, so
   the background stays fully opaque and nothing bleeds. */
.appcard.is-under{transform:scale(.975);filter:brightness(.66)}
.app-top{display:flex;align-items:center;gap:var(--s-4);margin-bottom:var(--s-6)}
.app-gl{width:40px;height:40px;flex:none}
.app-idx{font-family:var(--font-m);font-size:11px;letter-spacing:.12em;color:var(--ink-4);margin-left:auto}
.appcard .h3{margin-bottom:var(--s-2)}
.app-line{font-size:17px;color:var(--ink);margin-bottom:var(--s-3)}
.appcard .small{margin-bottom:var(--s-6)}
.app-fig svg{width:100%;height:auto;display:block}
.app-act{display:flex;flex-wrap:wrap;gap:var(--s-5);align-items:center}
.tag{display:inline-flex;align-items:center;font-size:12px;font-weight:600;color:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-pill);padding:var(--s-1) var(--s-3)}
.app-fig{border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-2);padding:var(--s-5)}
.app-fig svg{width:100%;height:auto}
@media (max-width:860px){
  .appcard{grid-template-columns:1fr;gap:var(--s-6);padding:var(--s-7)}
  .stack-item{position:static}
}

/* ============================================================================
   8 and 9. PARTNER
   ============================================================================ */
.partner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-12);align-items:start}
@media (max-width:900px){.partner{grid-template-columns:1fr;gap:var(--s-9)}}
.partner-body{margin-top:var(--s-4)}
.partner-cta{margin-top:var(--s-8);display:flex;flex-wrap:wrap;gap:var(--s-3)}
.qual{display:grid;gap:var(--s-8)}
.qual-g .h4{margin-bottom:var(--s-5)}
.qual-g ul{display:grid;gap:var(--s-3)}
.qual-g li{display:flex;gap:var(--s-3);align-items:flex-start;font-size:15px;line-height:1.5;color:var(--ink-2)}
.qual-g li span{flex:1}
.qual-g li .ic{width:14px;height:14px;flex:none;margin-top:var(--s-1);fill:var(--ink-2)}
.qual-no li .ic{fill:var(--ink-4)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding-block:var(--s-10)}
.foot-in{display:flex;flex-wrap:wrap;gap:var(--s-9);justify-content:space-between;align-items:flex-start}
.foot-line{margin-top:var(--s-4);max-width:32ch}
.foot-right{display:grid;gap:var(--s-4);justify-items:flex-start}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--s-6)}
.foot-legal{color:var(--ink-4)}

/* ============================================================================
   ILLUSTRATION SYSTEM
   One stroke weight, one radius language, one accent element per figure.
   ============================================================================ */
.il-frame{fill:none;stroke:var(--line-2);stroke-width:1}
.il-fill{fill:rgba(255,255,255,.028);stroke:var(--line-2);stroke-width:1}
.il-solid{fill:rgba(255,255,255,.055);stroke:none}
.il-line{fill:none;stroke:var(--line-2);stroke-width:1}
.il-node{fill:var(--bg-2);stroke:var(--line-3);stroke-width:1}
.il-dot{fill:var(--ink-4)}
.il-t{font-family:var(--font-d);font-size:13px;font-weight:600;fill:var(--ink-2)}
.il-s{font-family:var(--font-b);font-size:11px;fill:var(--ink-4)}
.il-m{font-family:var(--font-m);font-size:9px;letter-spacing:.12em;fill:var(--ink-3)}
/* the one accent element per figure */
.il-on{stroke:var(--accent-bd)}
.il-on-f{fill:var(--accent-dim);stroke:var(--accent-bd);stroke-width:1}
.il-on-d{fill:var(--accent)}
.il-on-t{fill:var(--ink)}

/* module glyphs share one canvas and one stroke */
.gl{fill:none;stroke:var(--ink-3);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.gl .a{stroke:var(--accent)}
.gl .f{fill:rgba(255,255,255,.05);stroke:none}

/* ecosystem diagram state */
.dg-node .fl{transition:stroke var(--t) var(--ease),fill var(--t) var(--ease)}
.dg-node .t,.dg-node .s,.dg-node .m{transition:fill var(--t) var(--ease)}
.dg-node.is-on .fl{fill:rgba(255,74,10,.1);stroke:rgba(255,74,10,.62)}
.dg-node.is-on .t{fill:var(--ink)}
.dg-node.is-on .m{fill:var(--accent)}

.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:var(--s-4)}
.quote{padding:var(--s-7);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-1)}
.quote blockquote{font-size:15px;line-height:1.6;color:var(--ink)}
.quote figcaption{margin-top:var(--s-5)}

/* ---------- reveal ---------- */
.js [data-rise]{opacity:0;transform:translate3d(0,20px,0)}
.js [data-rise].is-in{opacity:1;transform:none;transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js [data-rise]{opacity:1 !important;transform:none !important}
  .step{opacity:1}
  .appcard.is-under{transform:none;filter:none}
}

/* ---------- print ---------- */
@media print{.nav,.menu,.skip{display:none !important}body{background:#fff;color:#000}}