/* ============================================================================
   CANDY WRAPPER — "THE BROWSER FOR GETTING THINGS DONE" (alt marketing site)
   A NEW, second landing page. Browser-window-with-tabs is the hero metaphor.
   Self-contained: no build, no deps, no network, no frameworks.

   Brand tokens reused verbatim from the app theme (public/css/theme.css) and
   the existing bright site (site/index.html): the candy palette, the signature
   gradient, SF fonts, the candy-wrapper 2x2 logo mark. Re-staged BRIGHT:
   white space, big type, candy as ACCENT — Linear/Vercel-clean meets candy.
   ========================================================================== */

:root{
  /* ---- candy accents (from the app theme) ---- */
  --pink:#ff4d9d; --grape:#a855f7; --blue:#4c8dff; --mint:#1fc7a8; --orange:#ff9f43; --yellow:#ffcf33;
  --pink-soft:#ffe3f0; --grape-soft:#f0e6ff; --blue-soft:#e3edff; --mint-soft:#d9f7f0; --orange-soft:#ffeedb; --yellow-soft:#fff4cc;

  /* ---- BRIGHT canvas ---- */
  --paper:#ffffff;
  --sugar:#fff8fc;          /* faint pink-white page bg */
  --sugar-2:#f6f3ff;        /* faint grape-white band */
  --cloud:#f3f6ff;          /* faint blue-white band */
  --ink-1:#1a1430;          /* near-black plum, headings */
  --ink-2:#4a4368;          /* body text */
  --ink-3:#857caa;          /* muted */
  --ink-faint:#a99fc8;      /* faintest */
  --line:#eee6f5;           /* hairline on white */
  --line-2:#e3d8f0;         /* stronger hairline */

  /* ---- signature gradients (kept candy) ---- */
  --grad-candy:linear-gradient(120deg,#ff4d9d,#a855f7 52%,#4c8dff);
  --grad-mint:linear-gradient(120deg,#34e5c4,#4c8dff);
  --grad-warm:linear-gradient(120deg,#ffb24d,#ff4d9d);
  --grad-text:linear-gradient(110deg,#ff4d9d 0%,#a855f7 50%,#4c8dff 100%);

  /* ---- soft candy shadows ---- */
  --sh-sm:0 2px 8px -2px rgba(168,85,247,.14);
  --sh-md:0 14px 36px -16px rgba(168,85,247,.30);
  --sh-lg:0 30px 70px -28px rgba(168,85,247,.40);
  --sh-pink:0 18px 44px -18px rgba(255,77,157,.45);
  --sh-blue:0 18px 44px -18px rgba(76,141,255,.40);

  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:36px; --r-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1); --fast:.16s; --med:.32s;
  --font-ui:-apple-system,"SF Pro Display","SF Pro Text","Helvetica Neue","Inter",system-ui,sans-serif;
  --font-mono:"SF Mono","JetBrains Mono","Menlo",ui-monospace,monospace;
  --maxw:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-ui); color:var(--ink-2); line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background:var(--sugar);
  background-image:
    radial-gradient(1100px 720px at 8% -6%, var(--pink-soft), transparent 60%),
    radial-gradient(1000px 680px at 100% 2%, var(--blue-soft), transparent 55%),
    radial-gradient(900px 800px at 50% 122%, var(--grape-soft), transparent 60%);
  background-attachment:fixed;
}
::selection{background:rgba(255,77,157,.18);color:var(--ink-1)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------------------------------------------------------- shared atoms */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.section{position:relative;padding:92px 0}
@media(max-width:760px){.section{padding:60px 0}}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--grape);
  background:var(--grape-soft);border-radius:var(--r-pill);padding:7px 15px;font-weight:600}
h1,h2,h3{color:var(--ink-1);letter-spacing:-.02em;line-height:1.04;font-weight:800}
h2.big{font-size:clamp(32px,5vw,56px);margin:18px 0 0}
.lead{font-size:clamp(16px,1.7vw,20px);color:var(--ink-2);max-width:62ch;line-height:1.6}
.gradtext{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}

.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;
  padding:15px 28px;border-radius:var(--r-pill);border:none;cursor:pointer;transition:var(--med);
  font-family:var(--font-ui);position:relative;overflow:hidden}
.btn.primary{color:#fff;background:var(--grad-candy);box-shadow:var(--sh-pink)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 24px 54px -16px rgba(255,77,157,.6)}
/* shimmer-glow on primary buttons (matches the app's intake/verify language) */
.btn.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  background-size:220% 100%;background-position:200% center;animation:sheen 4.5s linear infinite}
.btn.ghost{color:var(--ink-1);background:#fff;border:1.5px solid var(--line-2);box-shadow:var(--sh-sm)}
.btn.ghost:hover{transform:translateY(-2px);border-color:var(--grape);box-shadow:var(--sh-md)}
.btn .k{font-family:var(--font-mono);font-size:12px;opacity:.7;font-weight:600}

.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:12px;
  letter-spacing:.04em;color:var(--ink-3);background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 13px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(31,199,168,.5);animation:livepulse 2s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(31,199,168,.55)}70%{box-shadow:0 0 0 8px rgba(31,199,168,0)}100%{box-shadow:0 0 0 0 rgba(31,199,168,0)}}
@keyframes sheen{to{background-position:-200% center}}
@keyframes bob{0%,100%{transform:translateY(-4px)}50%{transform:translateY(5px)}}
@keyframes drift{0%{transform:translate(0,0)}50%{transform:translate(16px,-12px)}100%{transform:translate(0,0)}}
@keyframes blink{0%,100%{opacity:.35}50%{opacity:1}}

/* reveal-on-scroll */
.rise{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rise.in{opacity:1;transform:none}
.rise.d1{transition-delay:.07s}.rise.d2{transition-delay:.14s}.rise.d3{transition-delay:.21s}.rise.d4{transition-delay:.28s}

/* ============================================================================
   NAV
   ========================================================================== */
.nav{position:sticky;top:0;z-index:80;backdrop-filter:saturate(180%) blur(16px);
  background:rgba(255,248,252,.78);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:17px;color:var(--ink-1)}
.brand .mk{width:34px;height:34px;flex:none}
.brand .nm b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav .links{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav .links a{font-size:14px;font-weight:600;color:var(--ink-2);padding:9px 14px;border-radius:var(--r-pill);transition:var(--fast)}
.nav .links a:hover{color:var(--ink-1);background:#fff;box-shadow:var(--sh-sm)}
.nav .cta{color:#fff!important;background:var(--grad-candy);box-shadow:var(--sh-pink)}
@media(max-width:860px){.nav .links a.hideable{display:none}}

/* ============================================================================
   HERO — the BROWSER WINDOW with TABS
   ========================================================================== */
#hero{padding:72px 0 58px;position:relative}
.hero-head{text-align:center;max-width:880px;margin:0 auto}
.kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12.5px;
  letter-spacing:.08em;color:var(--ink-1);background:#fff;border:1px solid var(--line-2);
  border-radius:var(--r-pill);padding:8px 15px;box-shadow:var(--sh-sm);font-weight:600}
.kicker .spark{font-size:14px}
.hero-head h1{font-size:clamp(38px,6.2vw,72px);margin:22px 0 0;line-height:.98}
.hero-head h1 .gradtext{background-size:200% auto;animation:sheen 8s linear infinite alternate}
.hero-head .lead{margin:20px auto 0;font-size:clamp(17px,1.9vw,21px)}
.hero-head .cta-row{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.hero-head .trust{margin-top:22px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;color:var(--ink-3);font-size:13.5px}

/* ---- the browser chrome ---- */
.browser{position:relative;margin:54px auto 0;max-width:1020px;border-radius:var(--r-xl);
  background:#fff;box-shadow:var(--sh-lg);border:1px solid var(--line);overflow:hidden}
/* soft candy caustics behind the glass */
.browser .caustic{position:absolute;inset:-2px;border-radius:var(--r-xl);overflow:hidden;pointer-events:none;z-index:0}
.browser .caustic::before,.browser .caustic::after{content:"";position:absolute;border-radius:50%;filter:blur(34px);opacity:.42}
.browser .caustic::before{width:240px;height:240px;left:-50px;top:-40px;background:var(--pink);animation:drift 12s ease-in-out infinite}
.browser .caustic::after{width:260px;height:260px;right:-60px;bottom:-50px;background:var(--blue);animation:drift 14s ease-in-out infinite reverse}
.browser > *{position:relative;z-index:1}

/* traffic-light + window title row */
.bz-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fcfbff;border-bottom:1px solid var(--line)}
.bz-bar .tl{display:flex;gap:7px}
.bz-bar .tl i{width:12px;height:12px;border-radius:50%}
.bz-bar .tl i:nth-child(1){background:#ff6b81}.bz-bar .tl i:nth-child(2){background:#ffcf33}.bz-bar .tl i:nth-child(3){background:#34e5c4}
.bz-bar .winmk{display:flex;align-items:center;gap:8px;margin-left:6px;font-size:12.5px;font-weight:800;color:var(--ink-2)}
.bz-bar .winmk svg{width:18px;height:18px}
.bz-bar .winmk b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.bz-bar .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.bz-bar .meter{font-family:var(--font-mono);font-size:11px;color:var(--mint);background:var(--mint-soft);border-radius:var(--r-pill);padding:4px 11px;font-weight:700}

/* TAB STRIP */
.bz-tabs{display:flex;align-items:flex-end;gap:4px;padding:8px 12px 0;background:#fcfbff;overflow-x:auto;scrollbar-width:none}
.bz-tabs::-webkit-scrollbar{display:none}
.bz-tab{display:inline-flex;align-items:center;gap:9px;flex:none;cursor:pointer;white-space:nowrap;
  font-size:13.5px;font-weight:700;color:var(--ink-3);background:transparent;border:1px solid transparent;border-bottom:none;
  border-radius:14px 14px 0 0;padding:11px 16px;transition:var(--fast);position:relative;user-select:none}
.bz-tab .em{font-size:16px;line-height:1}
.bz-tab .x{font-family:var(--font-mono);font-size:13px;color:var(--ink-faint);opacity:0;transition:var(--fast);margin-left:1px}
.bz-tab:hover{color:var(--ink-1);background:#fff;box-shadow:var(--sh-sm)}
.bz-tab:hover .x{opacity:.6}
.bz-tab[aria-selected="true"]{color:var(--ink-1);background:#fff;border-color:var(--line);box-shadow:0 -3px 14px -8px rgba(168,85,247,.4)}
/* the candy underline that marks the active tab + bleeds into the page */
.bz-tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--grad-candy);border-radius:3px}
.bz-tab.addtab{color:var(--grape);font-weight:800}
.bz-tab.addtab:hover{background:var(--grape-soft);box-shadow:none}

/* ADDRESS / CHAT BAR */
.bz-omni{display:flex;align-items:center;gap:11px;padding:12px 14px;background:#fff;border-bottom:1px solid var(--line)}
.bz-omni .navbtns{display:flex;gap:5px;color:var(--ink-faint)}
.bz-omni .navbtns span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:14px}
.bz-omni .navbtns span:nth-child(3){color:var(--mint)}
.bz-omni .field{flex:1;display:flex;align-items:center;gap:10px;background:var(--sugar-2);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:11px 16px}
.bz-omni .field .lk{color:var(--mint);font-size:13px;flex:none}
.bz-omni .field .typed{font-size:14.5px;color:var(--ink-1);font-weight:500;white-space:nowrap;overflow:hidden}
.bz-omni .field .caret{display:inline-block;width:2px;height:1.05em;background:var(--pink);vertical-align:-.18em;margin-left:1px;animation:caretblink 1s steps(1) infinite}
@keyframes caretblink{0%,100%{opacity:1}50%{opacity:0}}
.bz-omni .go{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;background:var(--grad-candy);font-size:16px;box-shadow:var(--sh-pink)}
.bz-omni .mic{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;background:var(--grad-warm);font-size:16px;box-shadow:var(--sh-sm);position:relative}
.bz-omni .mic .ring{position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(255,77,157,.5);animation:livepulse 1.8s infinite}
@media(max-width:560px){.bz-omni .navbtns,.bz-omni .mic{display:none}}

/* TAB PANEL — the "what this crew does" reveal */
.bz-panel{padding:26px 26px 28px;min-height:300px;background:
  radial-gradient(620px 320px at 18% -10%, var(--grape-soft), transparent 62%),#fff}
.panel{display:none;animation:panelIn .42s var(--ease)}
.panel.on{display:block}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center}
@media(max-width:780px){.panel-grid{grid-template-columns:1fr;gap:22px}}
.panel .crew-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;border-radius:var(--r-pill);padding:6px 13px;font-weight:700}
.panel h3{font-size:clamp(23px,3vw,32px);margin:14px 0 10px;line-height:1.08}
.panel .blurb{font-size:15px;color:var(--ink-2);line-height:1.6;max-width:48ch}
.panel .deliver{list-style:none;margin-top:18px;display:grid;gap:10px}
.panel .deliver li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--ink-2);font-weight:600}
.panel .deliver li .ck{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;color:#fff;margin-top:1px;background:var(--grad-candy)}
.panel .crew-cta{margin-top:22px;display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:14px;color:var(--ink-1);
  background:#fff;border:1.5px solid var(--line-2);border-radius:var(--r-pill);padding:11px 20px;box-shadow:var(--sh-sm);transition:var(--med);cursor:pointer}
.panel .crew-cta:hover{transform:translateY(-2px);border-color:var(--grape);box-shadow:var(--sh-md)}

/* faux "crew at work" snippet beside each panel */
.crewlog{border-radius:var(--r-md);background:#fcfbff;border:1px solid var(--line);overflow:hidden;box-shadow:var(--sh-sm)}
.crewlog .clhead{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:#fff}
.crewlog .clhead .nm{font-size:12px;font-weight:800;color:var(--ink-1);display:flex;align-items:center;gap:7px}
.crewlog .clhead .nm svg{width:16px;height:16px}
.crewlog .clhead .st{margin-left:auto;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mint);display:flex;align-items:center;gap:6px}
.crewlog .body{padding:14px;display:flex;flex-direction:column;gap:10px;min-height:188px}
.crewlog .line{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.45;opacity:0;transform:translateY(6px);animation:logline .5s var(--ease) forwards}
.crewlog .line .who{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:var(--sugar-2);border:1px solid var(--line)}
.crewlog .line .txt{color:var(--ink-2)}
.crewlog .line .txt b{color:var(--ink-1);font-weight:800}
.crewlog .line .txt .role{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--grape);display:block;margin-bottom:1px}
.crewlog .line.coo .txt .role{color:var(--orange)}
.crewlog .line.done .who{background:var(--mint-soft);border-color:transparent}
@keyframes logline{to{opacity:1;transform:none}}
.crewlog .signoff{margin-top:auto;display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;color:var(--ink-1);
  background:var(--mint-soft);border-radius:12px;padding:9px 12px}
.crewlog .signoff .ic{font-size:14px}

/* per-tab accent (the active tab dictates the panel + crew colors) */
.panel[data-accent="grape"] .crew-tag{background:var(--grad-candy)} .panel[data-accent="grape"] .deliver li .ck{background:var(--grad-candy)}
.panel[data-accent="blue"]  .crew-tag{background:linear-gradient(120deg,#4c8dff,#34e5c4)} .panel[data-accent="blue"]  .deliver li .ck{background:linear-gradient(120deg,#4c8dff,#34e5c4)}
.panel[data-accent="pink"]  .crew-tag{background:var(--grad-warm)} .panel[data-accent="pink"]  .deliver li .ck{background:var(--grad-warm)}
.panel[data-accent="mint"]  .crew-tag{background:var(--grad-mint)} .panel[data-accent="mint"]  .deliver li .ck{background:var(--grad-mint)}
.panel[data-accent="orange"]{}.panel[data-accent="orange"] .crew-tag{background:linear-gradient(120deg,#ff9f43,#ffcf33)} .panel[data-accent="orange"] .deliver li .ck{background:linear-gradient(120deg,#ff9f43,#ffcf33)}

.hero-hint{text-align:center;margin-top:20px;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--ink-faint)}
.hero-hint b{color:var(--grape)}

/* ============================================================================
   THE WHY — AI is the new OS
   ========================================================================== */
#why{background:linear-gradient(180deg,transparent,var(--cloud) 26%,var(--cloud) 74%,transparent)}
.why-wrap{max-width:880px;margin:0 auto;text-align:center}
.why-wrap .bigsay{font-size:clamp(26px,4vw,46px);font-weight:800;color:var(--ink-1);line-height:1.16;letter-spacing:-.02em;margin-top:18px}
.why-wrap .bigsay b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.why-wrap .sub{margin:24px auto 0;font-size:clamp(16px,1.8vw,20px);color:var(--ink-2);max-width:60ch;line-height:1.6}
/* the OS → chatbox → wrapper triad */
.os-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;text-align:left}
@media(max-width:780px){.os-row{grid-template-columns:1fr}}
.os{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-sm);transition:var(--med)}
.os:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.os .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:24px;box-shadow:var(--sh-sm);margin-bottom:14px}
.os h3{font-size:18px;margin-bottom:6px}
.os p{font-size:14px;color:var(--ink-2);line-height:1.55}
.os.a .ic{background:var(--grape-soft)} .os.b .ic{background:var(--blue-soft)} .os.c .ic{background:var(--pink-soft)}
.os.c{border:2px solid var(--pink);box-shadow:var(--sh-pink)}
.os .me{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);font-weight:700;margin-top:10px;display:inline-block}

/* ============================================================================
   HOW IT WORKS — the crew + the COO sign-off + skills
   ========================================================================== */
.hops{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
@media(max-width:860px){.hops{grid-template-columns:1fr}}
.hop{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh-sm);transition:var(--med);overflow:hidden}
.hop:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.hop .glow{position:absolute;inset:auto -30px -40px auto;width:140px;height:140px;border-radius:50%;filter:blur(40px);opacity:.45}
.hop .step{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--ink-faint)}
.hop .em{font-size:34px;margin:6px 0 12px}
.hop h3{font-size:21px;margin-bottom:8px}
.hop p{font-size:14.5px;color:var(--ink-2);line-height:1.55}
.hop.s1 .glow{background:var(--pink)} .hop.s1 .step b{color:var(--pink)}
.hop.s2 .glow{background:var(--grape)} .hop.s2 .step b{color:var(--grape)}
.hop.s3 .glow{background:var(--blue)} .hop.s3 .step b{color:var(--blue)}
.hop .tag{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--grape);background:var(--grape-soft);border-radius:var(--r-pill);padding:5px 12px}

/* the COO sign-off org-lite strip */
.coo-card{margin-top:40px;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-lg);overflow:hidden}
.coo-top{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);background:#fcfbff}
.coo-top .nm{font-weight:800;color:var(--ink-1);font-size:14px;display:flex;align-items:center;gap:9px}
.coo-top .nm svg{width:20px;height:20px}
.coo-top .badge{margin-left:auto;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);background:var(--orange-soft);border-radius:var(--r-pill);padding:5px 11px;font-weight:700}
.coo-body{display:grid;grid-template-columns:1fr;gap:0}
.flowstrip{position:relative;padding:30px 26px;background:radial-gradient(600px 300px at 50% -20%,var(--grape-soft),transparent 60%)}
.tier-row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.tier-row .col{display:flex;flex-direction:column;align-items:center;gap:10px}
.agent{width:128px;background:#fff;border:1px solid var(--line-2);border-radius:16px;padding:12px;text-align:center;box-shadow:var(--sh-sm);transition:var(--med)}
.agent:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.agent .av{width:44px;height:44px;border-radius:50%;margin:0 auto 7px;display:grid;place-items:center;font-size:23px;background:var(--sugar-2);border:2px solid #fff;box-shadow:0 6px 14px -8px rgba(168,85,247,.5);position:relative}
.agent .av .st{position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;border:2px solid #fff;background:var(--mint);box-shadow:0 0 0 0 rgba(31,199,168,.5);animation:livepulse 2s infinite}
.agent .nm{font-size:13px;font-weight:800;color:var(--ink-1);line-height:1.1}
.agent .role{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;margin-top:3px}
.agent .perm{margin-top:7px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.04em;border-radius:var(--r-pill);padding:3px 8px;display:inline-block;font-weight:700}
.agent.coo{border-color:var(--orange);box-shadow:var(--sh-md)} .agent.coo .av{border-color:var(--orange)} .agent.coo .role{color:var(--orange)}
.agent.coo .perm{background:var(--orange-soft);color:#b3601a}
.agent.rw .role{color:var(--grape)} .agent.rw .perm{background:var(--grape-soft);color:#7c3aed}
.agent.ro .role{color:var(--blue)} .agent.ro .perm{background:var(--blue-soft);color:#2b5fc7}
.tier-arrow{font-size:20px;color:var(--ink-faint);align-self:center}
.flowstrip .updown{display:flex;justify-content:center;gap:30px;margin-top:8px;font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}
.coo-foot{padding:18px 24px;border-top:1px solid var(--line);background:#fcfbff;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;font-size:13px;color:var(--ink-2);font-weight:600}
.coo-foot b{color:var(--ink-1)}
.coo-foot .sign{display:inline-flex;align-items:center;gap:8px;background:var(--mint-soft);border-radius:var(--r-pill);padding:7px 14px;font-weight:700;color:#0e8f78}

/* skills strip */
.skills{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
@media(max-width:720px){.skills{grid-template-columns:1fr}}
.skill{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-sm);text-align:left}
.skill .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:23px;box-shadow:var(--sh-sm);margin-bottom:13px}
.skill h3{font-size:18px;margin-bottom:6px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.skill p{font-size:14px;color:var(--ink-2);line-height:1.55}
.skill .tagn{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-pill);padding:3px 9px;font-weight:700}
.skill.built .ic{background:var(--mint-soft)} .skill.built .tagn{background:var(--mint-soft);color:#0e8f78}
.skill.prem .ic{background:var(--yellow-soft)} .skill.prem .tagn{background:var(--grad-warm);color:#fff}
.skill .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.skill .chips span{font-size:12px;font-weight:700;color:var(--ink-2);background:var(--sugar-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px}

/* ============================================================================
   THE TABS / WHAT YOU CAN BUILD — domain card grid
   ========================================================================== */
#build{background:linear-gradient(180deg,transparent,var(--sugar-2) 24%,var(--sugar-2) 76%,transparent)}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
@media(max-width:920px){.dgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.dgrid{grid-template-columns:1fr}}
.dcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-sm);transition:var(--med);overflow:hidden;cursor:pointer;text-align:left}
.dcard:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--line-2)}
.dcard .top{display:flex;align-items:center;gap:12px}
.dcard .ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:25px;box-shadow:var(--sh-sm);flex:none}
.dcard h3{font-size:19px}
.dcard .tabish{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--ink-faint);margin-top:2px}
.dcard p{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-top:14px}
.dcard .crew{margin-top:14px;display:flex;flex-wrap:wrap;gap:7px}
.dcard .crew span{font-size:11px;font-weight:700;color:var(--ink-3);background:var(--sugar-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 10px}
.dcard .open{position:absolute;top:20px;right:20px;font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);transition:var(--fast)}
.dcard:hover .open{color:var(--grape)}
.ic.pink{background:var(--pink-soft)} .ic.grape{background:var(--grape-soft)} .ic.blue{background:var(--blue-soft)} .ic.mint{background:var(--mint-soft)} .ic.orange{background:var(--orange-soft)} .ic.yellow{background:var(--yellow-soft)}
.dcard.more{display:grid;place-items:center;text-align:center;border-style:dashed;border-color:var(--line-2);background:var(--sugar)}
.dcard.more .big{font-size:34px;margin-bottom:8px}
.dcard.more h3{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.dcard.more p{margin-top:6px}

/* ============================================================================
   CTA / FOOTER
   ========================================================================== */
#cta{position:relative}
.cta-card{position:relative;border-radius:var(--r-xl);padding:60px 40px;text-align:center;overflow:hidden;
  background:linear-gradient(135deg,#fff,var(--pink-soft) 40%,var(--blue-soft));border:1px solid var(--line);box-shadow:var(--sh-lg)}
.cta-card .blob{position:absolute;border-radius:50%;filter:blur(50px);opacity:.5}
.cta-card .blob.a{width:260px;height:260px;left:-60px;top:-60px;background:var(--pink);animation:drift 12s ease-in-out infinite}
.cta-card .blob.b{width:300px;height:300px;right:-70px;bottom:-80px;background:var(--blue);animation:drift 14s ease-in-out infinite reverse}
.cta-card h2{position:relative;font-size:clamp(30px,5vw,50px)}
.cta-card .lead{position:relative;margin:18px auto 0}
.cta-card .cta-row{position:relative;margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-card .fine{position:relative;margin-top:18px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-3)}

.foot{padding:54px 0 44px;border-top:1px solid var(--line);margin-top:30px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.foot .brand{font-size:15px}
.foot .cols{display:flex;gap:34px;flex-wrap:wrap}
.foot .col h5{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-family:var(--font-mono);margin-bottom:10px}
.foot .col a{display:block;font-size:13.5px;color:var(--ink-2);padding:3px 0}
.foot .col a:hover{color:var(--grape)}
.foot .legal{width:100%;text-align:center;margin-top:30px;color:var(--ink-faint);font-size:12px;font-family:var(--font-mono);letter-spacing:.04em}

/* ============================================================================
   THE IDEA HOOK — "you had the idea for Uber a decade ago"
   ========================================================================== */
#idea{position:relative}
#idea .lead{margin-left:auto;margin-right:auto}
.idea-wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:22px;margin-top:44px;align-items:center;text-align:left}
@media(max-width:820px){.idea-wrap{grid-template-columns:1fr;gap:18px}}
/* the strikethrough "too late" ideas list */
.toolate{display:flex;flex-direction:column;gap:12px}
.toolate .lt{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;box-shadow:var(--sh-sm);font-size:14.5px;color:var(--ink-3);font-weight:600;transition:var(--med)}
.toolate .lt:hover{transform:translateX(4px);box-shadow:var(--sh-md);border-color:var(--line-2)}
.toolate .lt .em{font-size:20px;flex:none}
.toolate .lt s{color:var(--ink-faint);text-decoration-color:var(--pink)}
.toolate .lt .who{margin-left:auto;font-family:var(--font-mono);font-size:12px;font-weight:800;letter-spacing:.02em;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;flex:none}
/* the flip card: now you can build it */
.idea-flip{position:relative;border-radius:var(--r-xl);padding:34px 32px;overflow:hidden;
  background:linear-gradient(135deg,#fff,var(--grape-soft) 55%,var(--blue-soft));border:2px solid var(--grape);box-shadow:var(--sh-lg)}
.idea-flip .blob{position:absolute;border-radius:50%;filter:blur(48px);opacity:.5;pointer-events:none}
.idea-flip .blob.a{width:200px;height:200px;left:-50px;top:-60px;background:var(--pink);animation:drift 13s ease-in-out infinite}
.idea-flip .blob.b{width:220px;height:220px;right:-60px;bottom:-70px;background:var(--blue);animation:drift 15s ease-in-out infinite reverse}
.idea-flip>*{position:relative;z-index:1}
.idea-flip .lockchip{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--grad-candy);border-radius:var(--r-pill);padding:6px 13px;font-weight:700;box-shadow:var(--sh-pink)}
.idea-flip h3{font-size:clamp(24px,3.4vw,34px);margin:14px 0 10px;line-height:1.06}
.idea-flip p{font-size:15px;color:var(--ink-2);line-height:1.6;max-width:46ch}
.idea-flip .crew-cta{margin-top:20px;display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:14.5px;color:#fff;
  background:var(--grad-candy);border:none;border-radius:var(--r-pill);padding:13px 22px;box-shadow:var(--sh-pink);transition:var(--med);cursor:pointer}
.idea-flip .crew-cta:hover{transform:translateY(-2px);box-shadow:0 24px 54px -16px rgba(255,77,157,.6)}

/* ============================================================================
   THE VERTICAL FLOW — "how Cloud Nine actually works" (the showpiece)
   Work streams DOWN a glowing spine; a current/spark rides the wire; each
   stage lights as the signal arrives. You → Dorian → crew (∥) → ✓ signed off.
   ========================================================================== */
.vflow-head{max-width:760px;margin-left:auto;margin-right:auto;text-align:center}
.vflow-title{font-size:clamp(26px,3.6vw,38px);margin-top:14px;line-height:1.08}
.vflow{position:relative;max-width:560px;margin:40px auto 0;padding:8px 0 4px}

/* the spine the work travels down + the live "current" running through it */
.vwire{position:absolute;left:50%;top:14px;bottom:14px;width:4px;margin-left:-2px;border-radius:4px;z-index:0;
  background:linear-gradient(180deg,var(--line-2),var(--line-2));overflow:visible}
.vwire::before{content:"";position:absolute;inset:0;border-radius:4px;
  background:linear-gradient(180deg,var(--pink),var(--grape) 50%,var(--blue));opacity:.30}
/* a bright packet of light that slides top→bottom = the signal on the wire */
.vwire .spark{position:absolute;left:50%;top:0;width:14px;height:14px;margin-left:-7px;border-radius:50%;
  background:radial-gradient(circle,#fff,var(--pink) 55%,transparent 72%);
  box-shadow:0 0 16px 5px rgba(255,77,157,.65);animation:vsignal 3.6s var(--ease) infinite}
@keyframes vsignal{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}

/* each stage node sits over the spine */
.vnode{position:relative;z-index:1;display:flex;justify-content:center}
.vcard{position:relative;display:flex;align-items:center;gap:14px;width:100%;max-width:440px;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:15px 18px;box-shadow:var(--sh-sm);
  transition:transform var(--med) var(--ease),box-shadow var(--med) var(--ease),border-color var(--med) var(--ease)}
.vav{position:relative;width:50px;height:50px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:25px;
  background:var(--sugar-2);border:2px solid #fff;box-shadow:0 8px 18px -10px rgba(168,85,247,.55)}
.vav .vdot{position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border-radius:50%;border:2px solid #fff;background:var(--ink-faint);transition:var(--med)}
.vmeta{flex:1;min-width:0}
.vrole{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--grape);font-weight:700}
.vrole.rw{color:var(--grape)} .vrole.ro{color:var(--blue)}
.vname{font-size:15px;font-weight:800;color:var(--ink-1);line-height:1.2;margin:2px 0 3px}
.vdoing{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.vstage{position:absolute;top:-10px;left:-10px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:800;color:#fff;background:var(--grad-candy);box-shadow:var(--sh-sm);font-family:var(--font-mono)}
.vstage.done{background:var(--grad-mint)}

/* role-tinted nodes */
.vnode.you .vcard{border-color:var(--pink-soft)} .vnode.you .vrole{color:var(--pink)}
.vnode.coo .vcard{border-color:var(--orange)} .vnode.coo .vrole{color:var(--orange)} .vnode.coo .vstage{background:linear-gradient(120deg,#ff9f43,#ff4d9d)}
.vnode.signoff .vcard{border-color:var(--mint)} .vnode.signoff .vrole{color:#0e8f78} .vnode.signoff .vname{color:#0e8f78}

/* the crew tier — three in parallel, fed by the split */
.vtier{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:2px 0}
@media(max-width:620px){.vtier{grid-template-columns:1fr;gap:10px;max-width:440px;margin-left:auto;margin-right:auto}}
.vtier .vnode{display:block}
.vtier .vcard{flex-direction:column;align-items:flex-start;text-align:left;gap:9px;max-width:none;padding:16px 15px}
.vtier .vav{width:42px;height:42px;font-size:21px}
.vtier .vname{font-size:14px}
.vtier .vdoing{font-size:11.5px}

/* connectors between stages — chevrons that hint the downward direction */
.vconn{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:60px;height:34px;color:var(--ink-faint)}
.vconn .vchev{font-size:22px;line-height:1;animation:vdrop 1.8s var(--ease) infinite}
.vconn .vchev:nth-child(2){animation-delay:.18s} .vconn .vchev:nth-child(3){animation-delay:.36s}
.vconn.split{gap:clamp(40px,18vw,118px)} .vconn.merge .vchev{animation-delay:.1s}
@media(max-width:620px){.vconn.split{gap:0}.vconn.split .vchev:nth-child(1),.vconn.split .vchev:nth-child(3){display:none}}
@keyframes vdrop{0%{transform:translateY(-5px);opacity:.25}50%{transform:translateY(3px);opacity:1}100%{transform:translateY(-5px);opacity:.25}}

/* ===== the lit / active states the JS drives as the signal passes ===== */
.vnode.lit .vcard{border-color:var(--grape);box-shadow:var(--sh-md);transform:translateY(-2px)}
.vnode.lit .vdot{background:var(--mint);box-shadow:0 0 0 0 rgba(31,199,168,.5)}
.vnode.you.lit .vcard{border-color:var(--pink)}
.vnode.coo.lit .vcard{border-color:var(--orange)}
.vnode.signoff.lit .vcard{border-color:var(--mint);background:linear-gradient(135deg,#fff,var(--mint-soft))}
/* the ACTIVE node = the one the signal is on right now: glow + breathe */
.vnode.active .vcard{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,77,157,.16),var(--sh-lg);transform:translateY(-3px) scale(1.012)}
.vnode.active .vav{animation:vpop 1.15s var(--ease) infinite}
.vnode.active .vdot{background:var(--mint);animation:livepulse 1.4s infinite}
.vnode.coo.active .vcard{box-shadow:0 0 0 3px rgba(255,159,67,.2),var(--sh-lg)}
.vnode.signoff.active .vcard{box-shadow:0 0 0 3px rgba(31,199,168,.22),var(--sh-lg)}
@keyframes vpop{0%,100%{box-shadow:0 8px 18px -10px rgba(168,85,247,.55)}50%{box-shadow:0 8px 26px -6px rgba(255,77,157,.7)}}

/* ============================================================================
   THE MODES — "same engine, pick your comfort level"
   ========================================================================== */
#modes{background:linear-gradient(180deg,transparent,var(--cloud) 24%,var(--cloud) 76%,transparent)}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
@media(max-width:860px){.mgrid{grid-template-columns:1fr}}
.mcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;box-shadow:var(--sh-sm);transition:var(--med);overflow:hidden}
.mcard:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.mcard .ribbon{position:absolute;top:16px;right:-34px;transform:rotate(45deg);width:140px;text-align:center;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:#fff;padding:4px 0;box-shadow:var(--sh-sm)}
.mcard .badge{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:27px;box-shadow:var(--sh-sm);margin-bottom:14px}
.mcard h3{font-size:22px}
.mcard .tagn{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:3px 0 12px}
.mcard p{font-size:14px;color:var(--ink-2);line-height:1.55}
.mcard .mlevel{display:flex;align-items:center;gap:10px;margin-top:16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--ink-3);font-weight:700}
.mcard .mlevel .dots{display:inline-flex;gap:5px}
.mcard .mlevel .dots i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.mcard.m1 .badge{background:var(--pink-soft)} .mcard.m1 .ribbon{background:var(--grad-warm)} .mcard.m1 .mlevel .dots i.on{background:var(--pink)}
.mcard.m2{border:2px solid var(--grape);box-shadow:var(--sh-md)} .mcard.m2 .badge{background:var(--grape-soft)} .mcard.m2 .ribbon{background:var(--grad-candy)} .mcard.m2 .mlevel .dots i.on{background:var(--grape)}
.mcard.m3 .badge{background:var(--blue-soft)} .mcard.m3 .ribbon{background:linear-gradient(120deg,#4c8dff,#a855f7)} .mcard.m3 .mlevel .dots i.on{background:var(--blue)}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto}
  .rise{opacity:1;transform:none}
  .panel{animation:none}
  .crewlog .line{opacity:1;transform:none;animation:none}
  /* vertical flow: no signal, no loop — rest in the fully-lit state */
  .vwire .spark{display:none}
  .vconn .vchev{animation:none;opacity:.7}
  .idea-flip .blob{animation:none}
  .vnode.lit .vcard,.vnode.active .vcard{transform:none}
  .vnode .vdot,.vnode.lit .vdot{background:var(--mint)}
}