/* ============================================================================
   Syntyaxis — design system. Dark only; the site does not follow the device appearance.
   No JavaScript, no web fonts, no third-party requests. CSP is style-src 'self',
   so there are no inline style attributes anywhere in the HTML.

   CONTRAST — WCAG 2.2 AA minimum; body copy held at AAA (7:1) where possible.
   DARK (default)                        LIGHT
     text  #F2F5FA on bg   18.4:1 AAA      text  #0E1116 on bg  18.9:1 AAA
     text  #F2F5FA on surf 16.1:1 AAA      muted #545C69 on bg   7.4:1 AAA
     muted #9BA5B6 on bg    8.4:1 AAA      accent#0A6558 on bg   6.3:1 AA+
     muted #9BA5B6 on surf  7.4:1 AAA      ok    #0F6A3C on bg   6.2:1 AA+
     accent#5FE3C6 on bg   13.6:1 AAA      focus #0A66C2 on bg   5.0:1
     accent#5FE3C6 on surf 11.9:1 AAA      app   #B35B00 on bg   5.0:1 AA
     ok    #56D98A on bg   11.5:1 AAA      border-strong #AFB5C0 3.0:1 (non-text)
     focus #8CC0FF on bg   10.3:1          border #E1E3E8 decorative hairline
     app   #FF9F0A on bg   10.6:1 AAA
     accent-ink #042019 on accent fill 12.3:1 AAA
     border-strong #39414F on bg 3.1:1 (meets 3:1 for non-text UI)
     border #22272F on bg 1.5:1 — decorative hairline, never a sole indicator
   The Supercharge orange never carries text meaning below 24px and is never a
   button fill or link colour in either theme.
   ========================================================================== */
:root{
  color-scheme: dark;
  /* surfaces */
  --bg:#08090C; --bg-alt:#0B0D11; --surface:#13161D; --surface-2:#191D26;
  --border:#22272F; --border-strong:#39414F;
  /* ink */
  --text:#F2F5FA; --muted:#9BA5B6;
  /* accent */
  --accent:#5FE3C6; --accent-hi:#96F2DE; --accent-ink:#042019;
  --accent-soft:#0D2621; --accent-line:#1E5B4F;
  --ok:#56D98A; --app:#FF9F0A; --focus:#8CC0FF;
  /* depth */
  --glow: radial-gradient(48% 58% at 22% 0%, rgba(95,227,198,.20), transparent 72%), radial-gradient(46% 50% at 78% 6%, rgba(120,150,255,.10), transparent 70%);
  --ring: inset 0 1px 0 rgba(255,255,255,.05);
  --lift: 0 1px 0 rgba(255,255,255,.05), 0 18px 40px -22px rgba(0,0,0,.9);
  --lift-2: 0 1px 0 rgba(255,255,255,.08), 0 28px 60px -24px rgba(0,0,0,1);
  /* geometry */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-full:999px;
  --wrap:1120px;
  --gut:20px;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
@media (min-width:600px){ :root{ --gut:32px } }
@media (min-width:900px){ :root{ --gut:40px } }
/* Dark is the only theme: the studio site does not follow the device appearance. */

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 16px/1.65 var(--sans); letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block }
h1,h2,h3,h4{ margin:0; font-weight:640; letter-spacing:-.022em; line-height:1.12 }
p,ul,ol{ margin:0 }
a{ color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px }
a:hover{ color:var(--accent-hi) }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:6px }
::selection{ background:var(--accent); color:var(--accent-ink) }
hr{ border:0; border-top:1px solid var(--border); margin:0 }
.skip{
  position:absolute; left:-9999px; top:0; z-index:50;
  background:var(--surface); color:var(--text); border:1px solid var(--border-strong);
  padding:10px 16px; border-radius:var(--r-md); text-decoration:none;
}
.skip:focus{ left:12px; top:12px }
.wrap{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline: calc(var(--gut) + env(safe-area-inset-left)) calc(var(--gut) + env(safe-area-inset-right));
}
.section{ padding-block:56px; position:relative }
@media (min-width:900px){ .section{ padding-block:96px } }
.section.alt{ background:var(--bg-alt); border-block:1px solid var(--border) }
.prose{ max-width:70ch }
.prose > * + *{ margin-top:16px }
.prose h2{ margin-top:40px }
.prose h2:first-child{ margin-top:0 }
.prose ul,.prose ol{ padding-left:1.15em }
.prose li + li{ margin-top:8px }
/* ---------- type ---------- */
.display{ font-size:clamp(2.25rem,1.35rem + 3.9vw,4rem); line-height:1.04; letter-spacing:-.035em; font-weight:680 }
h1{ font-size:clamp(1.9rem,1.4rem + 2.1vw,2.6rem) }
h2{ font-size:clamp(1.5rem,1.2rem + 1.3vw,2rem); letter-spacing:-.028em }
h3{ font-size:1.2rem; letter-spacing:-.018em }
h4{ font-size:1.0625rem; letter-spacing:-.012em; line-height:1.35 }
.lead{ font-size:clamp(1.06rem,1rem + .45vw,1.3rem); line-height:1.55; color:var(--text) }
.small{ font-size:.875rem; line-height:1.55; color:var(--muted) }
.micro{ font-size:.75rem; line-height:1.45; font-weight:500; color:var(--muted) }
.eyebrow{
  display:inline-block; font-size:.75rem; font-weight:640; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:14px;
}
.eyebrow::before{
  content:""; display:inline-block; width:18px; height:1px; vertical-align:middle;
  margin-right:10px; background:var(--accent-line);
}
.section-head{ max-width:64ch; margin-bottom:36px }
.section-head .lead{ margin-top:14px; color:var(--muted) }
/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
}
.site-header .wrap{ display:flex; align-items:center; gap:16px; min-height:60px; justify-content:space-between }
.wordmark{
  display:inline-flex; align-items:center; gap:9px; color:var(--text);
  text-decoration:none; font-weight:640; font-size:1.0625rem; letter-spacing:-.02em;
}
.wordmark .mark{ width:22px; height:22px; flex:none; color:var(--accent) }
.wordmark:hover{ color:var(--text) }
.nav{ display:flex; align-items:center; gap:4px }
.nav a{
  color:var(--muted); text-decoration:none; font-size:.9375rem; font-weight:500;
  padding:10px 10px; border-radius:var(--r-sm); min-height:44px; display:inline-flex; align-items:center;
}
.nav a:hover{ color:var(--text); background:var(--surface-2) }
.nav a[aria-current="page"]{ color:var(--text); box-shadow:inset 0 -2px 0 var(--accent) }
@media (max-width:379px){ .nav a{ font-size:.8125rem; padding:10px 7px } .site-header .wrap{ gap:8px } }
/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding-block:64px 56px; border-bottom:1px solid var(--border) }
@media (min-width:900px){ .hero{ padding-block:112px 96px } }
.hero::before{
  content:""; position:absolute; inset:-40% -20% auto -20%; height:120%;
  background:var(--glow); pointer-events:none;
  animation: breathe 14s ease-in-out infinite alternate;
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:radial-gradient(circle at 1px 1px, var(--border-strong) 1px, transparent 0);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(52% 65% at 50% 6%, #000, transparent 70%);
  mask-image:radial-gradient(52% 65% at 50% 6%, #000, transparent 70%);
}
.hero > .wrap{ position:relative; z-index:1 }
@keyframes breathe{ from{ transform:translate3d(0,0,0) scale(1); opacity:.75 } to{ transform:translate3d(0,3%,0) scale(1.12); opacity:1 } }
.hero-studio{ max-width:22ch }
.hero .lead{ margin-top:22px; max-width:56ch; color:var(--muted) }
.hero .lead strong{ color:var(--text); font-weight:600 }
.hero-note{ margin-top:26px; display:flex; flex-wrap:wrap; gap:8px }
.chip{
  display:inline-flex; align-items:center; gap:7px; font-size:.8125rem; font-weight:550;
  color:var(--muted); background:var(--surface); border:1px solid var(--border);
  padding:6px 12px; border-radius:var(--r-full);
}
.chip::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--accent) }
/* ---------- badges & CTA ---------- */
.badge{
  display:inline-flex; align-items:center; gap:7px; font-size:.75rem; font-weight:640;
  letter-spacing:.09em; text-transform:uppercase; padding:5px 11px; border-radius:var(--r-full);
  background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line);
}
.badge.app{ background:transparent; color:var(--app); border-color:var(--app) }
.badge.ok{ color:var(--ok); border-color:var(--ok); background:transparent }
.badge.ok svg{ width:14px; height:14px }
.cta{ margin-top:28px; display:flex; flex-direction:column; align-items:flex-start; gap:14px }
.cta-block{
  display:inline-flex; align-items:center; gap:12px; padding:14px 20px;
  border-radius:var(--r-md); border:1px dashed var(--border-strong);
  background:var(--surface); color:var(--text); font-weight:600; font-size:1rem;
}
.cta-block::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--app); flex:none }
.btn{
  display:inline-flex; align-items:center; gap:8px; min-height:48px;
  padding:12px 22px; border-radius:var(--r-md); font-weight:620; font-size:1rem;
  text-decoration:none; background:var(--accent); color:var(--accent-ink);
  border:1px solid transparent; transition:background .12s ease, transform .12s ease;
}
.btn:hover{ background:var(--accent-hi); color:var(--accent-ink) }
.btn.ghost{ background:transparent; color:var(--text); border-color:var(--border-strong) }
.btn.ghost:hover{ background:var(--surface-2); color:var(--text) }
.arrow{ color:var(--accent); text-decoration:none; font-weight:600 }
.arrow:hover{ text-decoration:underline }
/* ---------- studio: apps catalogue ---------- */
.catalogue{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) }
@media (min-width:900px){ .catalogue{ gap:24px; grid-template-columns:2fr 1fr; align-items:stretch } }
.roadmap{ grid-column:1/-1; display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) }
@media (min-width:900px){ .roadmap{ grid-column:auto; grid-template-columns:1fr; gap:24px } }
.app-card{
  position:relative; grid-column:1/-1; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-xl); padding:24px;
  box-shadow:var(--lift); overflow:hidden;
}
@media (min-width:900px){ .app-card{ grid-column:auto; padding:36px 40px } }
.app-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 120% at 0% 0%, rgba(255,159,10,.10), transparent 60%);
}
.app-card > *{ position:relative }
.app-card .icon{ width:72px; height:72px; border-radius:20px; border:1px solid var(--border) }
@media (min-width:900px){ .app-card .icon{ width:88px; height:88px; border-radius:22px } }
.app-card h3{ margin-top:20px; font-size:1.5rem; letter-spacing:-.028em }
.app-card .sub{ margin-top:8px; color:var(--muted); font-size:1.0625rem }
.meta{ margin-top:20px; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:baseline }
.meta .plat{ color:var(--muted); font-size:.875rem }
.meta .price{ font-weight:640; font-size:.9375rem }
.app-card .foot{ margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; gap:16px }
.slot{
  grid-column:1/-1; border:1px dashed var(--border-strong); border-radius:var(--r-xl);
  background:transparent; padding:24px; display:flex; flex-direction:column; justify-content:center; gap:10px; min-height:150px;
}
@media (min-width:900px){ .slot{ grid-column:auto; height:100% } }
.slot h3{ font-size:1.0625rem; color:var(--text) }
.slot p{ color:var(--muted); font-size:.875rem }
.slot .dots{ display:flex; gap:6px; margin-bottom:4px }
.slot .dots i{ width:6px; height:6px; border-radius:50%; background:var(--accent-line) }
/* ---------- feature grid / tiles ---------- */
.features{ display:grid; gap:28px 32px; grid-template-columns:1fr }
@media (min-width:600px){ .features{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:900px){ .features{ grid-template-columns:repeat(3,1fr) } }
.features.four{ grid-template-columns:1fr }
@media (min-width:600px){ .features.four{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1000px){ .features.four{ grid-template-columns:repeat(4,1fr) } }
.features > div{ padding-top:18px; border-top:2px solid var(--accent-line) }
.features h4{ margin-bottom:8px }
.features p{ color:var(--muted); font-size:.9375rem }
/* ---------- modules ---------- */
.modules{ display:grid; gap:16px; grid-template-columns:1fr }
@media (min-width:700px){ .modules{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1000px){ .modules{ grid-template-columns:repeat(3,1fr) } }
.mod{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:24px; box-shadow:var(--ring); display:flex; flex-direction:column; position:relative; overflow:hidden;
}
.mod::before{ content:""; position:absolute; inset:0 0 auto; height:1px; background:linear-gradient(90deg,transparent,var(--accent-line),transparent) }
.mod.span2{ grid-column:1/-1 }
@media (min-width:1000px){ .mod.span2{ grid-column:span 2 } }
.mod .ico{
  width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); margin-bottom:16px;
}
.mod .ico svg{ width:20px; height:20px; display:block }
.mod h3{ font-size:1.125rem }
.mod .say{ margin-top:8px; color:var(--muted); font-size:.9375rem }
.mod ul{ margin-top:16px; list-style:none; padding:0; display:grid; gap:9px }
.mod li{ position:relative; padding-left:18px; font-size:.9375rem; color:var(--text) }
.mod li::before{ content:"–"; position:absolute; left:0; color:var(--muted) }
.mod.span2 ul{ grid-template-columns:1fr }
@media (min-width:1000px){ .mod.span2 ul{ grid-template-columns:repeat(2,1fr); column-gap:32px } }
.mod .note{ margin-top:16px; padding-top:14px; border-top:1px solid var(--border); color:var(--muted); font-size:.8125rem }
/* ---------- device frames ---------- */
.phone{
  --w:268px; width:var(--w); max-width:100%; padding:10px; border-radius:44px;
  background:linear-gradient(160deg,var(--surface-2),var(--bg-alt));
  border:1px solid var(--border-strong); box-shadow:var(--lift-2); position:relative;
}
@media (min-width:900px){ .phone{ --w:300px } }
.phone img{ border-radius:34px; width:100%; display:block; background:var(--bg-alt) }
.mac{
  border:1px solid var(--border-strong); border-radius:14px; background:var(--surface);
  box-shadow:var(--lift); overflow:hidden; width:100%;
}
.mac img{ display:block; width:100%; height:auto }
.mac .bar{ height:30px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:6px; padding-inline:12px; background:var(--surface-2) }
.mac .bar i{ width:9px; height:9px; border-radius:50%; background:var(--border-strong) }
.mac .ph{
  aspect-ratio:16/10; display:grid; place-items:center; padding:24px; text-align:center;
  color:var(--muted); font-size:.875rem; background:
    repeating-linear-gradient(135deg, transparent 0 10px, var(--surface-2) 10px 11px), var(--bg-alt);
}
/* app hero */
.app-hero{ display:grid; gap:44px; align-items:center }
@media (min-width:900px){ .app-hero{ grid-template-columns:1.05fr .95fr; gap:56px } }
.app-hero .shot{ justify-self:center }
.app-id{ display:flex; align-items:center; gap:16px }
.app-id img{ width:76px; height:76px; border-radius:19px; border:1px solid var(--border) }
@media (min-width:900px){ .app-id img{ width:88px; height:88px; border-radius:22px } }
.app-id .display{ font-size:clamp(1.9rem,1.2rem + 2.6vw,3rem) }
.rule{ width:56px; height:3px; border-radius:2px; background:var(--app); margin:26px 0 0 }
.spec{ margin-top:22px; display:grid; gap:6px }
.spec .plat{ color:var(--muted); font-size:.9375rem }
.spec .price{ font-weight:640; font-size:1.0625rem }
.badges{ margin-top:22px; display:flex; flex-wrap:wrap; gap:10px }
/* ---------- screenshots strip ---------- */
.strip{ display:grid; gap:24px; grid-template-columns:1fr; justify-items:center }
@media (min-width:900px){ .strip{ grid-template-columns:repeat(2,1fr); align-items:start } }
.strip figure{ margin:0; display:grid; gap:12px; justify-items:center; width:100% }
.strip .wide{ grid-column:1/-1; justify-items:center }
.strip .wide .mac{ max-width:760px }
.strip figcaption{ text-align:center; max-width:40ch }
/* ---------- stat / callout ---------- */
.panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:28px; box-shadow:var(--ring);
}
@media (min-width:900px){ .panel{ padding:40px } }
.split{ display:grid; gap:32px }
.split > *{ min-width:0 }
@media (min-width:900px){ .split{ grid-template-columns:1fr 1fr; gap:56px; align-items:center } }
.counters{ display:grid; gap:10px; grid-template-columns:1fr; margin-top:24px }
@media (min-width:420px){ .counters{ grid-template-columns:repeat(3,1fr) } }
.counters div{ min-width:0; background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--r-md); padding:16px 12px; text-align:center }
.counters b{ display:block; font-size:1.5rem; font-weight:660; letter-spacing:-.03em; color:var(--app) }
.counters span{ display:block; font-size:.75rem; color:var(--muted); margin-top:4px; overflow-wrap:anywhere }
/* ---------- FAQ ---------- */
.faq details{ border-bottom:1px solid var(--border) }
.faq details:first-of-type{ border-top:1px solid var(--border) }
.faq summary{
  list-style:none; cursor:pointer; padding:18px 44px 18px 0; position:relative;
  font-weight:600; font-size:1.0625rem; letter-spacing:-.012em;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  color:var(--accent); font-weight:500; font-size:1.35rem; line-height:1;
}
.faq details[open] summary::after{ content:"−" }
.faq summary:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--r-sm) }
.faq summary:focus{ outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--r-sm) }
.faq .answer{ padding:0 0 20px; max-width:68ch; color:var(--muted) }
.faq .answer p + p{ margin-top:12px }
/* ---------- steps ---------- */
.steps{ list-style:none; padding:0; counter-reset:s; display:grid; gap:14px }
.steps li{ counter-increment:s; position:relative; padding-left:42px }
.steps li::before{
  content:counter(s); position:absolute; left:0; top:-1px; width:28px; height:28px;
  border-radius:50%; display:grid; place-items:center; font-size:.8125rem; font-weight:640;
  background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line);
}
/* ---------- footer ---------- */
.site-footer{
  background:var(--bg-alt); border-top:1px solid var(--border);
  padding-block:48px calc(40px + env(safe-area-inset-bottom));
}
@media (min-width:900px){ .site-footer{ padding-block:64px calc(48px + env(safe-area-inset-bottom)) } }
.footer-top{ display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; align-items:start }
.footer-groups{ display:grid; gap:28px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); flex:1 1 460px }
.footer-groups h2{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:640 }
.footer-groups ul{ list-style:none; padding:0; margin-top:12px; display:grid; gap:2px }
.footer-groups a{ color:var(--text); text-decoration:none; font-size:.9375rem; display:inline-block; padding:8px 0; min-height:36px }
.footer-groups a:hover{ color:var(--accent); text-decoration:underline }
.footer-line{ margin-top:40px; padding-top:24px; border-top:1px solid var(--border); display:grid; gap:6px }
.footer-line p{ font-size:.8125rem; color:var(--muted); max-width:82ch }
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
}

/* ============================================================================
   Studio landing (/) — hero stage, editorial spread, catalogue, values,
   platforms, contact panel. CSS only; no scripts, no inline styles.
   ========================================================================== */
.grad{
  background:linear-gradient(96deg,var(--accent) 0%,var(--accent-hi) 34%,#A9C6FF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gl{ width:18px; height:18px; flex:none }
.btn .gl{ transition:transform .16s ease }
.btn:hover .gl{ transform:translateX(3px) }
.arrow{ display:inline-flex; align-items:center; gap:7px }
.arrow:hover{ text-decoration:none }
.arrow:hover .gl{ transform:translateX(3px) }
.arrow .gl{ transition:transform .16s ease }
.cta-row{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px }

/* ---------- hero ---------- */
.hero-home{ padding-block:56px 48px }
@media (min-width:1000px){ .hero-home{ padding-block:128px 112px } }
.hero-home::after{ opacity:.6 }
.hero-grid{ display:grid; gap:40px; align-items:center }
@media (min-width:1000px){ .hero-grid{ grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:32px } }
.hero-solo{ max-width:var(--wrap) }
.hero-solo .hero-copy{ max-width:820px; margin-inline:auto; text-align:center }
.hero-solo .hero-copy .lead{ margin-inline:auto }
.hero-solo .hero-note,.hero-solo .cta-row{ justify-content:center }
.hero-solo .eyebrow::before{ display:none }
.hero-copy .display{ max-width:16ch; margin-inline:auto; font-size:clamp(2.4rem,1.2rem + 4.6vw,4.6rem); line-height:1.04 }
.hero-copy .lead{ margin-top:20px; max-width:46ch; color:var(--muted) }
.hero-copy .hero-note{ margin-top:24px }
.hero-copy .cta{ margin-top:32px }

/* device stage */
.stage{ position:relative; display:flex; justify-content:center }
.stage-in{ position:relative; width:min(100%,440px); aspect-ratio:440/540 }
@media (min-width:1000px){ .stage-in{ width:100%; max-width:480px; aspect-ratio:480/560 }
  .dev-back{ width:44%; right:1% } .dev-front{ width:52%; top:12% } }
.dev{ position:absolute; will-change:transform }
.dev .phone{ --w:100%; width:100%; padding:8px; border-radius:34px }
.dev .phone img{ border-radius:27px }
@media (min-width:1000px){ .dev .phone{ padding:9px; border-radius:38px } .dev .phone img{ border-radius:30px } }
.dev-back{ width:47%; right:0; top:0; animation:fl-a 9s ease-in-out infinite }
.dev-front{ width:55%; left:0; top:13%; z-index:2; animation:fl-b 11s ease-in-out infinite }
@keyframes fl-a{ 0%,100%{ transform:rotate(6deg) translateY(0) } 50%{ transform:rotate(6deg) translateY(-14px) } }
@keyframes fl-b{ 0%,100%{ transform:rotate(-4deg) translateY(0) } 50%{ transform:rotate(-4deg) translateY(-10px) } }
@media (prefers-reduced-motion: reduce){
  .dev-back{ transform:rotate(6deg) } .dev-front{ transform:rotate(-4deg) }
}
.float-card{
  position:absolute; z-index:3; right:0; bottom:2%;
  display:inline-flex; align-items:center; gap:12px; padding:10px 16px 10px 10px;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid var(--border-strong); border-radius:var(--r-lg); box-shadow:var(--lift-2);
  animation:fl-b 11s ease-in-out infinite;
}
.float-card img{ width:44px; height:44px; border-radius:11px; flex:none }
.float-card > span{ display:grid; line-height:1.25 }
.float-card b{ font-size:.9375rem; font-weight:640; letter-spacing:-.015em }
.fc-sub{ font-size:.75rem; color:var(--muted) }
@media (prefers-reduced-motion: reduce){ .float-card{ transform:none } }

/* ---------- editorial spread ---------- */
.spread{
  position:relative; overflow:hidden; border:1px solid var(--border); border-radius:var(--r-xl);
  background:linear-gradient(180deg,var(--surface) 0%, var(--bg-alt) 100%);
  box-shadow:var(--lift); padding:24px;
}
@media (min-width:900px){ .spread{ padding:40px } }
.spread::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 90% at 0% 0%, rgba(255,159,10,.09), transparent 62%);
}
.spread > *{ position:relative }
.spread-head{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px }
.spread-icon{ width:72px; height:72px; border-radius:18px; border:1px solid var(--border); flex:none }
@media (min-width:900px){ .spread-icon{ width:88px; height:88px; border-radius:22px } }
.spread-id{ flex:1 1 240px; min-width:0 }
.spread-id h3{ font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem); letter-spacing:-.03em }
.spread-id .sub{ margin-top:6px; color:var(--muted); font-size:1.0625rem }
.status{
  display:inline-flex; align-items:center; gap:9px; flex:none;
  font-size:.8125rem; font-weight:600; letter-spacing:.01em; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border-strong);
  padding:8px 14px; border-radius:var(--r-full);
}
.status-dot{
  width:7px; height:7px; border-radius:50%; background:var(--app); flex:none;
  box-shadow:0 0 0 3px rgba(255,159,10,.16);
}
.spread-pitch{
  margin-top:28px; padding-top:24px; border-top:1px solid var(--border);
  max-width:64ch; font-size:clamp(1.0625rem,1rem + .35vw,1.25rem); line-height:1.55; color:var(--text);
}
.spread-mods{ margin-top:28px; padding-top:24px; border-top:1px solid var(--border) }
.label{
  font-size:.6875rem; font-weight:640; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-variant-numeric:tabular-nums;
}
.pills{ list-style:none; padding:0; margin-top:14px; display:flex; flex-wrap:wrap; gap:8px }
.pill{
  display:inline-flex; align-items:center; gap:8px; font-size:.875rem; font-weight:560;
  color:var(--text); background:var(--bg); border:1px solid var(--border);
  padding:8px 14px 8px 11px; border-radius:var(--r-full); box-shadow:var(--ring);
}
.pill svg{ width:16px; height:16px; flex:none; color:var(--accent) }
.spread-foot{
  margin-top:28px; padding-top:20px; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px;
}
.spread-meta{ display:flex; align-items:center; gap:12px; color:var(--muted); font-size:.875rem }
.dot-sep{ width:3px; height:3px; border-radius:50%; background:var(--border-strong); flex:none }

/* ---------- catalogue ---------- */
.cat-grid{ display:grid; gap:16px; grid-template-columns:1fr; align-items:stretch }
@media (min-width:760px){ .cat-grid{ grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px } }
.cat-card,.cat-slot{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  border-radius:var(--r-xl); padding:24px; min-height:230px;
}
@media (min-width:900px){ .cat-card,.cat-slot{ padding:28px } }
.cat-card{
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--lift);
  text-decoration:none; color:var(--text); transition:border-color .16s ease, transform .16s ease;
}
.cat-card:hover{ border-color:var(--border-strong); transform:translateY(-2px); color:var(--text) }
.cat-no{
  position:absolute; top:22px; right:24px; font-family:var(--mono); font-size:.75rem;
  font-variant-numeric:tabular-nums; letter-spacing:.08em; color:var(--muted); opacity:.7;
}
.cat-card img{ width:64px; height:64px; border-radius:16px; border:1px solid var(--border) }
.cat-name{ margin-top:8px; font-size:1.1875rem; font-weight:640; letter-spacing:-.02em }
.cat-sub{ color:var(--muted); font-size:.9375rem; max-width:34ch }
.cat-foot{ margin-top:auto; width:100%; padding-top:18px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px }
.tag{
  font-size:.75rem; font-weight:600; letter-spacing:.02em; color:var(--muted);
  border:1px solid var(--border); border-radius:var(--r-full); padding:5px 11px;
}
.cat-go{ display:inline-flex; align-items:center; gap:6px; color:var(--accent); font-weight:620; font-size:.875rem }
.cat-card:hover .cat-go .gl{ transform:translateX(3px) }
.cat-go .gl{ width:16px; height:16px; transition:transform .16s ease }
.cat-slot{
  border:1px dashed var(--border-strong); background:var(--bg); overflow:hidden;
}
.cat-slot::before{
  content:""; position:absolute; inset:-1px; border-radius:var(--r-xl); pointer-events:none;
  background:linear-gradient(115deg,transparent 42%, rgba(95,227,198,.16) 50%, transparent 58%);
  background-size:280% 100%; animation:shimmer 6s linear infinite;
}
@keyframes shimmer{ from{ background-position:140% 0 } to{ background-position:-140% 0 } }
.slot-ico{
  width:64px; height:64px; border-radius:16px; border:1px dashed var(--border-strong);
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.slot-ico i{ width:6px; height:6px; border-radius:50%; background:var(--accent-line); animation:pulse 1.6s ease-in-out infinite }
.slot-ico i:nth-child(2){ animation-delay:.22s }
.slot-ico i:nth-child(3){ animation-delay:.44s }
@keyframes pulse{ 0%,100%{ opacity:.35; transform:scale(.85) } 50%{ opacity:1; transform:scale(1) } }
.cat-slot .cat-name{ color:var(--text) }

/* ---------- values ---------- */
.values{ display:grid; gap:24px; grid-template-columns:1fr }
@media (min-width:640px){ .values{ grid-template-columns:repeat(2,1fr); gap:32px } }
@media (min-width:1040px){ .values{ grid-template-columns:repeat(4,1fr) } }
.value{ padding-top:20px; border-top:1px solid var(--border-strong) }
.vico{
  display:grid; place-items:center; width:40px; height:40px; border-radius:11px;
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent);
}
.vico svg{ width:21px; height:21px; display:block }
.value h3{ margin-top:16px; font-size:1.0625rem; letter-spacing:-.015em }
.value p{ margin-top:8px; color:var(--muted); font-size:.9375rem; max-width:34ch }

/* ---------- platforms ---------- */
.platforms-band .eyebrow{ margin-bottom:12px }
.plat-lead{ margin-top:14px; color:var(--muted); max-width:52ch }
.plat-title{ max-width:20ch }
.platforms{
  list-style:none; padding:0; margin-top:36px; display:grid; gap:24px; grid-template-columns:1fr;
  border-top:1px solid var(--border); padding-top:32px;
}
@media (min-width:700px){
  .platforms{ grid-template-columns:repeat(3,1fr); gap:0 }
  .platforms li{ padding-inline:40px }
  .platforms li:first-child{ padding-left:0 }
  .platforms li + li{ border-left:1px solid var(--border) }
}
.platforms li{ display:grid; gap:6px; justify-items:start }
.platforms svg{ width:48px; height:48px; color:var(--text); opacity:.72; margin-bottom:10px }
.platforms b{ font-size:1.0625rem; font-weight:640; letter-spacing:-.015em }
.platforms span{ color:var(--muted); font-size:.9375rem; max-width:30ch }

/* ---------- contact panel ---------- */
.contact-panel{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  border:1px solid var(--accent-line); background:
    radial-gradient(90% 140% at 8% 0%, rgba(95,227,198,.14), transparent 62%),
    linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:var(--lift-2); padding:28px; display:grid; gap:28px; align-items:center;
}
@media (min-width:900px){ .contact-panel{ padding:48px; grid-template-columns:1.15fr .85fr; gap:48px } }
.cp-copy h2{ margin-top:2px }
.cp-copy .lead{ margin-top:14px; color:var(--muted); max-width:46ch }
.cp-mail{
  display:grid; gap:4px; text-decoration:none; color:var(--text);
  background:var(--bg); border:1px solid var(--border-strong); border-radius:var(--r-lg);
  padding:22px 24px; position:relative; transition:border-color .16s ease, background .16s ease;
}
.cp-mail:hover{ border-color:var(--accent); background:var(--bg-alt); color:var(--text) }
.cp-label{ font-size:.6875rem; font-weight:640; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.cp-addr{ font-size:clamp(1rem,.85rem + .7vw,1.25rem); font-weight:620; letter-spacing:-.02em; overflow-wrap:anywhere }
.cp-go{ position:absolute; right:22px; bottom:22px; color:var(--accent); display:grid }
.cp-go .gl{ width:20px; height:20px; transition:transform .16s ease }
.cp-mail:hover .cp-go .gl{ transform:translateX(3px) }