/* Parent company tokens. Product colours appear only inside a product's own canvas. */
:root{
  --bg:#F5F4F0; --surface:#FFFFFF; --ink:#16161A; --muted:#5D5B63; --line:#E2DFD8;
  --accent:#0F6E64; --seg:#DEDBD3; --focus:#0F6E64;
  /* Product canvas: fixed product art, the same in both themes (documented exception) */
  --cv-bg:#15244A; --cv-card:rgba(22,36,72,.72); --cv-ink:#F3F6FF; --cv-muted:#B8C4E0; --cv-line:rgba(160,180,240,.22); --cv-cyan:#01BEFE; --cv-on-cyan:#00323F;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#111113; --surface:#19191C; --ink:#EDEBE7; --muted:#A3A1A8; --line:#2A2A30;
  --accent:#5FD3C0; --seg:#2E2E35; --focus:#5FD3C0;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#111113; --surface:#19191C; --ink:#EDEBE7; --muted:#A3A1A8; --line:#2A2A30;
  --accent:#5FD3C0; --seg:#2E2E35; --focus:#5FD3C0;
  color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
h1,h2,h3,h4{font-family:"Bricolage Grotesque",Figtree,system-ui,sans-serif;font-weight:650;letter-spacing:-.02em;line-height:1.05;text-wrap:balance;margin:0}
p{margin:0}
.label{font:600 .75rem/1.4 Figtree,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;z-index:10}
.skip:focus{left:8px}
section,[id]{scroll-margin-top:84px}

/* Header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;column-gap:16px;row-gap:2px;min-height:64px;padding-block:8px}
.brand{text-decoration:none;font-family:"Bricolage Grotesque",sans-serif;font-weight:750;font-size:1.125rem;letter-spacing:-.02em}
.brand span{color:var(--accent)}
.top nav{margin-left:auto;display:flex;align-items:center;gap:clamp(12px,3vw,28px);font-size:.9375rem}
.top nav a{text-decoration:none;color:var(--muted);white-space:nowrap}
.top nav a:hover{color:var(--ink)}
.theme{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:none}
.theme svg{width:16px;height:16px}
@media (max-width:560px){.top nav .hide-sm{display:none}}
@media (max-width:420px){.brand{font-size:1rem}.top .wrap{column-gap:12px}}

/* Hero: compact studio intro + a large product canvas, asymmetric */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:stretch;padding-block:clamp(24px,4vw,48px) clamp(56px,8vw,96px)}
.intro{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding-block:clamp(8px,2vw,24px);min-width:0}
.intro h1{font-size:clamp(2.5rem,5.2vw,4.25rem);font-weight:650;letter-spacing:-.03em;line-height:1.02}
.intro h1 em{font-style:normal;color:var(--accent)}
.intro-foot{display:grid;gap:18px;max-width:40ch}
.intro-foot p{color:var(--muted);font-size:1.0625rem}
.jump{display:flex;flex-wrap:wrap;gap:8px 20px;font-weight:600;font-size:.9375rem}
.jump a{text-underline-offset:4px;text-decoration-thickness:1px}

/* Night-sky canvas: deep indigo, soft nebula glows, a faint milky-way band, and static stars (no motion) */
.canvas{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;color:var(--cv-ink);
  background:
    linear-gradient(128deg,transparent 28%,rgba(190,200,255,.10) 41%,rgba(215,190,255,.18) 50%,rgba(170,215,255,.10) 59%,transparent 72%),
    radial-gradient(55% 45% at 88% 6%,rgba(1,190,254,.38),transparent 70%),
    radial-gradient(50% 55% at 8% 96%,rgba(132,94,255,.40),transparent 70%),
    radial-gradient(35% 30% at 58% 52%,rgba(236,120,220,.12),transparent 70%),
    linear-gradient(160deg,#1B2D5A 0%,var(--cv-bg) 55%,#121D3E 100%);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,250px);gap:24px;padding:clamp(24px,3.5vw,40px);min-height:540px;min-width:0}
.canvas::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.85;
  background:url("/assets/stars.svg") 0 0/520px 520px repeat}
.cv-copy{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-width:0}
.cv-top{display:grid;gap:14px}
.pill{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;width:fit-content;font-size:.8125rem;font-weight:600;color:var(--cv-ink);border:1px solid var(--cv-line);border-radius:999px;padding:5px 12px}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--cv-cyan);box-shadow:0 0 0 3px rgba(1,190,254,.25)}
.canvas h2{font-size:clamp(3.5rem,8vw,6.5rem);font-weight:800;letter-spacing:-.05em;line-height:.9}
.cv-bottom{display:grid;gap:18px}
.cv-bottom p{font-size:clamp(1.125rem,1.8vw,1.375rem);line-height:1.35;max-width:22ch}
.visit{display:inline-flex;align-items:center;gap:8px;width:fit-content;min-height:46px;padding:0 20px;border-radius:999px;background:var(--cv-cyan);color:var(--cv-on-cyan);font-weight:600;font-size:.9375rem;text-decoration:none;transition:background-color .15s ease-out}
.visit:hover{background:#4FD3FF}
.visit svg{width:16px;height:16px}
.visit::after{content:"";position:absolute;inset:0;z-index:1}  /* the whole canvas opens MCR */
.visit:focus-visible{outline-color:var(--cv-cyan)}

/* Illustrative screen inside the canvas */
.screen{align-self:center;background:var(--cv-card);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--cv-line);border-radius:26px;padding:18px;display:grid;gap:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);min-width:0}
.sc-h{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;font-weight:600;color:var(--cv-muted)}
.sc-title{font:650 1.25rem/1.15 "Bricolage Grotesque",sans-serif;letter-spacing:-.01em}
.sc-sub{font-size:.8125rem;color:var(--cv-muted)}
.likes{display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.likes b{font:800 2.75rem/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.04em}
.likes span{color:var(--cv-muted);font-weight:600;font-size:.875rem}
.track{height:8px;border-radius:999px;background:var(--cv-line);overflow:hidden}
.track i{display:block;height:100%;width:100%;background:var(--cv-cyan);border-radius:inherit}
.sc-qr{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;padding-top:12px;border-top:1px solid var(--cv-line);font-size:.8125rem;color:var(--cv-muted)}
.qr{width:64px;height:64px;padding:5px;background:#FFFFFF;border-radius:8px}
.qr svg{display:block;width:100%;height:100%}
.sc-qr b{display:block;color:var(--cv-ink);font-weight:600}
@media (max-width:1100px){
  .hero{grid-template-columns:minmax(0,1fr)}
  /* Stacked: headline left, intro + links right */
  .intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(24px,5vw,56px);align-items:end;padding-block:16px 0}
  .intro-foot{max-width:none}
  .canvas{min-height:400px;grid-template-columns:minmax(0,1fr) minmax(0,280px);align-items:center}
}
@media (max-width:700px){.intro{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){.canvas{grid-template-columns:minmax(0,1fr);min-height:0}.screen{max-width:300px;width:100%;justify-self:start}}

/* Pipeline: the full inventory, compact */
.sec-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;margin-bottom:20px}
.sec-h h2{font-size:clamp(1.625rem,2.6vw,2.25rem);letter-spacing:-.025em}
.pipe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 clamp(16px,2.4vw,28px)}
.pipe li{display:grid;grid-template-rows:auto auto 1fr auto;gap:8px;padding-block:18px 4px;border-top:2px solid var(--line);min-width:0}
.pipe li.live{border-top-color:var(--accent)}
.pipe h3{font-size:1.25rem;letter-spacing:-.015em}
.pipe .kind{font-size:.8125rem;font-weight:600;color:var(--muted)}
.pipe p{color:var(--muted);font-size:.9375rem;line-height:1.5}
.st{display:grid;gap:6px;padding-top:6px;font-size:.875rem}
.st b{font-weight:600}
.st small{color:var(--muted);font-size:.8125rem}
.st a{font-weight:600;text-underline-offset:3px}
.meter{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;width:100px}
.meter i{height:5px;border-radius:3px;background:var(--seg)}
.meter i.on{background:var(--accent)}
.legend{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.8125rem;color:var(--muted);counter-reset:st}
.legend::before{content:"Stages:";font-weight:600}
.legend li::before{content:counter(st) " ";counter-increment:st;font-variant-numeric:tabular-nums;font-weight:600}
@media (max-width:900px){.pipe{grid-template-columns:repeat(2,minmax(0,1fr))}.pipe li.live{grid-column:1/-1}}
@media (max-width:440px){.pipe{grid-template-columns:minmax(0,1fr)}.pipe li{grid-template-rows:auto}}

.consult{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:clamp(32px,5vw,48px);padding:20px 24px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.consult div{display:grid;gap:4px;max-width:62ch}
.consult h3{font-size:1.1875rem;letter-spacing:-.01em}
.consult p{color:var(--muted);font-size:.9375rem}
.btn-line{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line);font-weight:600;font-size:.9375rem;text-decoration:none;transition:border-color .15s ease-out}
.btn-line:hover{border-color:var(--ink)}

/* Founder note + contact, editorial */
.founder{margin-top:clamp(72px,10vw,128px);padding-block:clamp(48px,7vw,88px);border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,80px);align-items:end}
.founder blockquote{margin:16px 0 0;font:500 clamp(1.625rem,3vw,2.5rem)/1.18 "Bricolage Grotesque",sans-serif;letter-spacing:-.03em;text-wrap:balance}
.founder blockquote span{color:var(--muted)}
.founder .by{margin-top:20px;color:var(--muted)}
.founder .by strong{color:var(--ink);font-weight:600}
.contact{display:grid;gap:12px;padding:24px;border-radius:20px;background:var(--surface);border:1px solid var(--line)}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.mail a{font-weight:600;font-size:1.0625rem;word-break:break-all;text-underline-offset:3px}
.copy{appearance:none;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:5px 12px;font:600 .8125rem Figtree,sans-serif;cursor:pointer}
.copy:hover{border-color:var(--muted)}
.contact p{color:var(--muted);font-size:.9375rem}
@media (max-width:820px){.founder{grid-template-columns:minmax(0,1fr)}}

footer{border-top:1px solid var(--line);padding-block:28px 40px;color:var(--muted);font-size:.875rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ink);text-decoration:underline}

@media (prefers-reduced-motion:no-preference){
  .intro > *, .canvas{animation:rise .55s cubic-bezier(.2,.7,.2,1) both}
  .canvas{animation-delay:.08s}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- Shared additions for the production pages ---------- */
figure{margin:0}
.notfound{min-height:min(70vh,640px);display:grid;align-content:center;gap:20px;padding-block:clamp(48px,8vw,96px);max-width:52ch}
.notfound h1{font-size:clamp(2.5rem,6vw,4.5rem);letter-spacing:-.035em}
.notfound p{color:var(--muted);font-size:1.125rem}
.notfound ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}