/* Layout concept: a quiet, well-lit product page. Cool off-white paper, white instrument panels with
   hairline borders, one signal-blue accent, and an italic serif voice for the human half of each
   headline. Colour is kept for meaning (the Stage parts) and for the live demos. Single light look. */
:root {
  color-scheme: light;
  --bg: #F7FAF9;
  --surface: #FFFFFF;
  --band: #EFF6F4;
  --ink: #0F1514;
  --ink-2: #3A4C48;
  --muted: #697080;
  --line: #E4ECEA;
  --line-2: #D2DFDC;

  --accent: #0F6B5C;
  --accent-ink: #0B5246;
  --accent-soft: #F0F9F7;
  --night: #0E221D;

  --c-vocal: #0F6B5C;
  --c-left: #2E9BA6;
  --c-right: #8C9A2E;
  --c-amb: #5FAF8A;
  --c-bass: #D9973B;

  --f-sans: "Geist", "Inter", "Helvetica Neue", system-ui, sans-serif;
  --f-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --shadow: 0 1px 2px rgba(15,21,20,.04), 0 8px 24px -12px rgba(15,21,20,.10);
  --shadow-lift: 0 1px 2px rgba(15,21,20,.05), 0 24px 48px -24px rgba(15,21,20,.18);
  --maxw: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg); }
img, canvas { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.wrap { width: 100%; max-width: calc(var(--maxw) + 64px); margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px), 4vw); padding-right: max(20px, env(safe-area-inset-right, 0px), 4vw); }
.label { font-family: var(--f-mono); font-size: .75rem; color: var(--muted); letter-spacing: .02em; }
h1 em, h2 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

/* ---------- nav ---------- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(247,250,249,.82); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav-inner { max-width: calc(var(--maxw) + 64px); margin: 0 auto; display: flex; align-items: center; gap: 28px; height: 64px; padding-left: max(20px, env(safe-area-inset-left, 0px), 4vw); padding-right: max(20px, env(safe-area-inset-right, 0px), 4vw); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; letter-spacing: -0.01em; font-size: 1.02rem; }
.brand-mark { position: relative; width: 22px; height: 22px; display: inline-block; flex: none; border-radius: 50%; background: var(--ink); }
.brand-mark::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--bg); }
.brand-mark i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; animation: ring 3.2s ease-out infinite; }
.brand-mark i:nth-child(2) { animation-delay: 1.6s; }
.brand-mark.sm { width: 18px; height: 18px; }
.brand-mark.sm::after { inset: 6px; background: var(--surface); }
@keyframes ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
.nav-links { display: flex; gap: 2px; margin-left: auto; }
.nav-links a { text-decoration: none; font-weight: 500; font-size: .92rem; color: var(--ink-2); padding: 6px 12px; border-radius: 8px; transition: color .2s, background .2s; }
.nav-links a:hover { color: var(--ink); background: rgba(15,21,20,.05); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; font-weight: 550; font-size: .98rem; border: 1px solid transparent; cursor: pointer; padding: 12px 20px; border-radius: 10px; transition: background .2s, border-color .2s, box-shadow .2s, transform .2s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 8px 14px; font-size: .88rem; border-radius: 8px; }
.btn-primary { background: var(--ink); color: #fff; box-shadow: 0 1px 2px rgba(15,21,20,.2), inset 0 1px 0 rgba(255,255,255,.12); }
.btn-primary:hover { background: #263330; }
.btn-quiet { background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: 0 1px 2px rgba(15,21,20,.05); }
.btn-quiet:hover { border-color: #B9CBC6; }
.btn-light { background: #fff; color: var(--night); }
.btn-light:hover { background: #EAF6F3; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.btn-ghost:hover { border-color: rgba(255,255,255,.6); }
.btn.wide { width: 100%; }
.play-ico { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
[aria-pressed="true"] .play-ico { width: 9px; height: 11px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }

/* ---------- hero ---------- */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 64px); }
.hero::before { content: ""; position: absolute; z-index: -1; inset: -120px calc(50% - 50vw) 0; background: radial-gradient(60% 55% at 78% 30%, #ECF7F4 0%, rgba(236,247,244,0) 70%), radial-gradient(40% 45% at 15% 10%, #E8F5F2 0%, rgba(232,245,242,0) 70%); pointer-events: none; }
.hero-copy { min-width: 0; }
.eyebrow { margin: 0 0 20px; font-family: var(--f-mono); font-size: .8rem; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.display { font-weight: 600; font-size: clamp(2.8rem, 6.2vw, 5.2rem); line-height: 1.0; letter-spacing: -0.045em; margin: 0 0 24px; text-wrap: balance; }
.display em { color: var(--accent); font-size: 1.08em; letter-spacing: -0.02em; }
.lede { font-size: clamp(1.06rem, 1.35vw, 1.2rem); line-height: 1.55; color: var(--ink-2); max-width: 31em; margin: 0 0 32px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cta-row.center { justify-content: center; }
.fine { font-size: .86rem; color: var(--muted); margin: 18px 0 0; }

.constellation { position: relative; aspect-ratio: 1.08; width: 100%; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lift); overflow: hidden; isolation: isolate; }
.constellation::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 32px 32px; opacity: .55; mask-image: radial-gradient(ellipse at 50% 50%, #000 20%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 20%, transparent 72%); z-index: -1; }
.constellation .beams { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2; }
.tag { display: flex; flex-direction: column; align-items: center; line-height: 1.25; white-space: nowrap; }
.tag b { font-size: .78rem; font-weight: 600; }
.tag span { font-size: .7rem; color: var(--muted); }
.dev { position: relative; background: #fff; box-shadow: 0 10px 24px -14px rgba(15,21,20,.35), 0 0 0 1px rgba(15,21,20,.09); }
.dev .screen { position: absolute; background: #F4FAF8; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 70%; padding-bottom: 12%; }
.bars i { display: block; width: 4px; height: 20%; border-radius: 2px; background: var(--accent); transform-origin: bottom; }
.dev-laptop { width: clamp(124px, 15vw, 188px); aspect-ratio: 1.55; border-radius: 9px 9px 3px 3px; background: #E6EFED; padding: 6px; box-shadow: 0 0 0 1px rgba(15,21,20,.1), 0 28px 50px -24px rgba(15,107,92,.45); }
.dev-laptop .screen { inset: 6px; border-radius: 4px; }
.dev-laptop .bars i { width: 7px; }
.dev-laptop .base { position: absolute; left: -10%; right: -10%; bottom: -8px; height: 8px; border-radius: 0 0 9px 9px; background: linear-gradient(#E3ECEA, #C8D6D2); }
.dev-phone { width: clamp(38px, 4.2vw, 50px); aspect-ratio: .48; border-radius: 11px; }
.dev-phone .screen { inset: 3px; border-radius: 8px; }
.dev-tablet { width: clamp(68px, 7.6vw, 98px); aspect-ratio: .75; border-radius: 11px; }
.dev-tablet .screen { inset: 5px; border-radius: 7px; }
.dev-tablet .bars i { width: 5px; }
.dev-speaker { width: clamp(70px, 8vw, 100px); aspect-ratio: 2.1; border-radius: 999px; background: linear-gradient(#FFFFFF, #ECF4F2); }
.dev-speaker .grille { position: absolute; inset: 6px 12px; border-radius: 999px; background-image: radial-gradient(rgba(15,21,20,.16) 1px, transparent 1.3px); background-size: 5px 5px; display: flex; align-items: center; justify-content: center; }
.dev-speaker .bars, .dev-mini .bars { height: 70%; padding: 0; align-items: center; }
.dev-speaker .bars i, .dev-mini .bars i { transform-origin: center; }
.dev-mini { width: clamp(70px, 7.8vw, 98px); aspect-ratio: 2.6; border-radius: 11px; background: linear-gradient(#FFFFFF, #E9F2F0); display: flex; align-items: center; justify-content: center; }
.hud { position: absolute; z-index: 3; left: 50%; top: 6%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: .8rem; color: var(--ink-2); white-space: nowrap; }
.hud b { font-weight: 600; color: var(--ink); }
.hud .dot { width: 7px; height: 7px; border-radius: 50%; background: #5FAF8A; animation: live 2s infinite; }
.hud .sep { width: 1px; height: 12px; background: var(--line-2); }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(31,158,124,.45); } 100% { box-shadow: 0 0 0 8px rgba(31,158,124,0); } }

/* apps row */
.apps { display: flex; align-items: center; gap: 12px 32px; flex-wrap: wrap; padding-block: 8px 0; }
.apps p { margin: 0; font-size: .86rem; color: var(--muted); }
.apps ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; }
.apps li { font-weight: 600; font-size: .98rem; color: #9AA1AE; letter-spacing: -0.01em; }

/* ---------- pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: clamp(56px, 7vw, 88px) 0; }
.pillar { text-decoration: none; padding: 8px 32px 8px 0; display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; align-items: start; }
.pillar + .pillar { padding-left: 32px; border-left: 1px solid var(--line); }
.pillar h3 { margin: 0; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; grid-column: 2; }
.pillar p { margin: 4px 0 0; color: var(--ink-2); font-size: .96rem; grid-column: 2; }
.pillar:hover h3 { color: var(--accent); }
.p-glyph { grid-row: span 2; position: relative; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); overflow: hidden; }
.g-sync i { position: absolute; left: 10px; right: 10px; height: 2px; border-radius: 2px; background: var(--accent); top: 50%; animation: syncline 2.8s ease-in-out infinite; }
.g-sync i:nth-child(1) { --o: -7px; } .g-sync i:nth-child(2) { --o: 0px; } .g-sync i:nth-child(3) { --o: 7px; }
@keyframes syncline { 0%, 20% { transform: translate(calc(var(--o) * -1), var(--o)) scaleX(.7); } 60%, 100% { transform: translate(0, var(--o)) scaleX(1); } }
.g-stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--ink); }
.g-stage i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--accent); animation: orbit 7s linear infinite; }
.g-stage i:nth-child(2) { animation-delay: -2.33s; opacity: .6; } .g-stage i:nth-child(3) { animation-delay: -4.66s; opacity: .35; }
@keyframes orbit { from { transform: rotate(0) translateX(13px); } to { transform: rotate(360deg) translateX(13px); } }
.g-scenes i { position: absolute; inset: 9px; border-radius: 50%; background: repeating-radial-gradient(circle, var(--ink) 0 1px, #2B3C38 1px 2.5px); animation: spin 4s linear infinite; }
.g-scenes i::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- sections ---------- */
.section { padding-block: clamp(80px, 10vw, 128px) 0; scroll-margin-top: 64px; }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 48px); }
.section-head.center { margin-inline: auto; text-align: center; }
.kicker { margin: 0 0 14px; font-family: var(--f-mono); font-size: .78rem; color: var(--accent-ink); }
.section h2, .final h2 { font-weight: 600; font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.06; letter-spacing: -0.035em; margin: 0 0 18px; text-wrap: balance; }
.section h2 em, .final h2 em { font-size: 1.08em; }
.sub { font-size: clamp(1.02rem, 1.2vw, 1.12rem); color: var(--ink-2); margin: 0; max-width: 38em; }
.section-head.center .sub { margin-inline: auto; }
.hint { margin: 20px 0 0; font-size: .9rem; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.hint::before { content: ""; width: 18px; height: 1px; background: var(--line-2); }

.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split-rev { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
.split-copy { min-width: 0; }
.split-copy .sub { margin-bottom: 8px; }

.panel { position: relative; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lift); overflow: hidden; min-width: 0; }
.panel-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); min-height: 54px; }
.seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--band); }
.seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 7px; font-weight: 500; font-size: .84rem; cursor: pointer; color: var(--muted); transition: all .2s; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(15,21,20,.12); }

/* sync */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin: 32px 0 0; }
.facts div { padding-top: 16px; border-top: 1px solid var(--line); }
.facts dt { font-weight: 600; margin-bottom: 4px; font-size: .98rem; }
.facts dd { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.55; }
.sync-viz { display: flex; flex-direction: column; }
.sync-viz .lanes { width: 100%; height: 380px; }
.lane-labels { position: absolute; left: 16px; top: 54px; bottom: 6px; display: flex; flex-direction: column; justify-content: space-around; pointer-events: none; font-size: .74rem; color: var(--muted); }

/* stage */
.band { background: var(--band); margin-top: clamp(80px, 10vw, 128px); padding-bottom: clamp(80px, 10vw, 128px); border-block: 1px solid var(--line); }
.band > .section { padding-top: clamp(80px, 10vw, 128px); }
.stage-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.map-area { position: relative; aspect-ratio: 1.25; touch-action: none; }
.map-area canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.listener { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.listener span { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 7px rgba(15,21,20,.05); position: relative; }
.listener span::before { content: ""; position: absolute; left: 50%; top: -8px; margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid var(--ink); }
.listener small { font-size: .72rem; color: var(--muted); }
.sdev { position: absolute; transform: translate(-50%, -50%); padding: 7px 12px 7px 28px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-weight: 600; font-size: .8rem; cursor: grab; box-shadow: 0 6px 16px -8px rgba(15,21,20,.3); white-space: nowrap; user-select: none; -webkit-user-select: none; touch-action: none; transition: box-shadow .2s, scale .2s, border-color .2s; }
.sdev::before { content: ""; position: absolute; left: 9px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: conic-gradient(var(--p1, var(--line-2)) 0 50%, var(--p2, var(--p1, var(--line-2))) 50% 100%); }
.sdev:hover { border-color: #AEC1BC; }
.sdev.dragging { cursor: grabbing; scale: 1.06; z-index: 5; box-shadow: 0 14px 28px -10px rgba(15,21,20,.35); }
.stage-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.np-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 16px; }
.np-row + .np-row { border-top: 1px solid var(--line); }
.np-row b { font-size: .92rem; font-weight: 600; }
.np-row small { display: block; color: var(--muted); font-size: .78rem; }
.np-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.np-tags span { font-size: .74rem; font-weight: 500; padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--c) 12%, #fff); color: color-mix(in srgb, var(--c) 75%, #0F1514); }
.legend { list-style: none; margin: 0; padding: 0 4px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .84rem; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.legend li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 500; cursor: pointer; color: var(--ink-2); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch span { width: 32px; height: 18px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .2s; }
.switch span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s; }
.switch input:checked + span { background: var(--ink); }
.switch input:checked + span::after { transform: translateX(14px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* scenes */
.scene-wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.scene-player { display: flex; flex-direction: column; }
.scene-player .scope { width: 100%; flex: 1; min-height: 240px; background: linear-gradient(180deg, #FCFDFD, #F3F9F8); }
.sp-ui { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-top: 1px solid var(--line); }
.sp-play { width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; background: var(--ink); transition: background .2s, transform .2s; flex: none; }
.sp-play:hover { background: var(--accent); }
.sp-play .play-ico { margin-left: 3px; }
.sp-play[aria-pressed="true"] .play-ico { margin-left: 0; }
.sp-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.35; }
.sp-meta b { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; }
.sp-meta small { color: var(--muted); font-size: .88rem; }
.sp-meter { font-family: var(--f-mono); font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.scenes { display: grid; grid-template-columns: 1fr; gap: 6px; align-content: start; }
.scene { text-align: left; cursor: pointer; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); padding: 8px; display: flex; align-items: center; gap: 14px; transition: border-color .2s, box-shadow .2s; }
.scene:hover { border-color: #B9CBC6; }
.scene.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.sc-txt { display: flex; flex-direction: column; line-height: 1.3; }
.scene b { font-size: .96rem; font-weight: 600; }
.scene small { color: var(--muted); font-size: .8rem; }
.sc-art { position: relative; flex: none; width: 52px; height: 44px; border-radius: 9px; overflow: hidden; background: var(--band); }
.a-off i { position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; margin-top: -1px; background: var(--ink-2); border-radius: 2px; }
.a-hall i { position: absolute; left: 50%; bottom: 6px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; animation: hall 3.6s ease-out infinite; }
.a-hall i:nth-child(2) { animation-delay: 1.2s; } .a-hall i:nth-child(3) { animation-delay: 2.4s; }
@keyframes hall { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.a-live { display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 0 10px 10px; }
.a-live i { flex: 1; height: 8px; border-radius: 2px; background: var(--accent); animation: jump .6s ease-in-out infinite alternate; transform-origin: bottom; }
.a-live i:nth-child(2n) { animation-delay: -.3s; } .a-live i:nth-child(3) { animation-duration: .45s; }
@keyframes jump { from { transform: scaleY(.6); } to { transform: scaleY(2.6); } }
.a-vinyl i { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; background: radial-gradient(circle, var(--accent) 0 22%, var(--ink) 23% 26%, transparent 27%), repeating-radial-gradient(circle, var(--ink) 0 1px, #2D3E3A 1px 2.4px); animation: spin 3s linear infinite; }
.a-vinyl i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 12%, rgba(255,255,255,.22) 16%, transparent 22%); }
.a-lofi { display: flex; align-items: center; justify-content: center; gap: 3px; padding: 0 9px; }
.a-lofi i { flex: 1; height: 6px; background: var(--accent); animation: step 1.6s steps(3) infinite alternate; }
.a-lofi i:nth-child(odd) { animation-delay: -.8s; } .a-lofi i:nth-child(3n) { animation-delay: -.4s; }
@keyframes step { from { transform: scaleY(1); } to { transform: scaleY(3.6); } }
.a-night i { position: absolute; width: 18px; height: 18px; border-radius: 50%; right: 13px; top: 8px; box-shadow: -5px 3px 0 0 var(--accent); animation: moon 6s ease-in-out infinite; }
.a-night::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: -14px; height: 22px; border-radius: 50%; background: rgba(15,107,92,.16); }
@keyframes moon { 50% { transform: translateY(-3px); } }

/* maker's note */
.note { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.note figure { margin: 0; }
.note blockquote { margin: 0; }
.note blockquote p { margin: 0; font-family: var(--f-serif); font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.28; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
.note blockquote p::before { content: "\201C"; color: var(--accent); }
.note blockquote p::after { content: "\201D"; color: var(--accent); }
.note figcaption { display: flex; align-items: baseline; gap: 12px; margin-top: 24px; color: var(--muted); font-size: .9rem; }
.sig { font-family: var(--f-serif); font-style: italic; font-size: 1.6rem; color: var(--ink); }
.proof { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.proof li { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); }
.proof li:last-child { border-bottom: 1px solid var(--line); }
.proof b { font-size: 2rem; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.proof span { color: var(--ink-2); font-size: .94rem; }

/* control */
.control-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.mock { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lift); padding: 14px; min-width: 0; }
.mm-head { display: flex; align-items: center; gap: 9px; padding: 2px 4px 12px; }
.mm-head b { font-weight: 600; font-size: .95rem; }
.pill-live { margin-left: auto; font-size: .72rem; font-weight: 500; padding: 2px 8px; border-radius: 6px; background: #E6F5F0; color: #157A5F; }
.mm-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--band); font-weight: 500; font-size: .86rem; }
.mm-rooms { display: grid; gap: 8px; margin-top: 8px; }
.room { padding: 10px 10px 12px; border-radius: 12px; border: 1px solid var(--line); display: grid; gap: 6px; }
.room-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.room-top b { font-size: .88rem; font-weight: 600; }
.room-top small { color: var(--muted); font-size: .78rem; }
.room-top output { margin-left: auto; font-family: var(--f-mono); font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chips { display: flex; gap: 4px; }
.chips button { flex: 1; border: 1px solid var(--line); background: transparent; border-radius: 7px; font-size: .76rem; font-weight: 500; padding: 4px 0; cursor: pointer; color: var(--muted); }
.chips button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: transparent; cursor: pointer; --v: 50%; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--v), var(--line) var(--v)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--v), var(--line) var(--v)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,21,20,.3), 0 0 0 .5px rgba(15,21,20,.15); }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,21,20,.3); }
.eq-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 2px 4px 12px; flex-wrap: wrap; }
.eq-head > div:first-child { display: flex; flex-direction: column; line-height: 1.25; }
.eq-head b { font-size: 1.1rem; font-weight: 600; }
.nudge { display: inline-flex; align-items: center; border-radius: 9px; background: var(--band); padding: 3px; }
.nudge button { width: 28px; height: 28px; border-radius: 7px; border: 0; background: #fff; cursor: pointer; font-weight: 600; box-shadow: 0 1px 2px rgba(15,21,20,.15); }
.nudge output { min-width: 78px; text-align: center; font-family: var(--f-mono); font-size: .76rem; font-variant-numeric: tabular-nums; }
#eqCanvas { width: 100%; height: 220px; border-radius: 12px; background: #FAFCFC; border: 1px solid var(--line); cursor: ns-resize; touch-action: none; }
.eq-hz { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; padding: 6px 0 4px; font-family: var(--f-mono); font-size: .7rem; color: var(--muted); }
.eq-fx { display: grid; gap: 4px; margin-top: 6px; }
.eq-fx label { display: grid; grid-template-columns: 60px 1fr 42px; gap: 12px; align-items: center; font-weight: 500; font-size: .86rem; padding: 4px 6px; }
.eq-fx output { text-align: right; font-family: var(--f-mono); font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: s; }
.steps li { padding-top: 20px; border-top: 1px solid var(--line-2); position: relative; }
.steps li::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--accent); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.steps.in li::before { width: 100%; }
.steps.in li:nth-child(2)::before { transition-delay: .4s; } .steps.in li:nth-child(3)::before { transition-delay: .8s; }
.step-n { display: block; font-family: var(--f-mono); font-size: .8rem; color: var(--accent-ink); margin-bottom: 18px; }
.steps h4 { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 6px; }
.steps p { margin: 0; color: var(--ink-2); max-width: 32ch; font-size: .96rem; }

/* compare */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.compare { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare th, .compare td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: .94rem; }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare thead th { font-weight: 600; font-size: .92rem; color: var(--ink-2); background: #FAFCFC; }
.compare tbody th { font-weight: 500; color: var(--ink); }
.compare .us { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.compare thead .us { color: var(--accent-ink); background: #E9F6F3; }
.compare td.yes::before, .compare td.no::before, .compare td.some::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 9px; vertical-align: 1px; }
.compare td.yes::before { background: #5FAF8A; } .compare td.no::before { background: var(--line-2); } .compare td.some::before { background: var(--c-bass); }
.compare td.no { color: var(--muted); }
.compare .us.yes::before { background: var(--accent); }

/* pricing */
.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 840px; margin-inline: auto; }
.price-card { position: relative; padding: 28px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.price-card.pro { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--shadow-lift); }
.pc-top { display: flex; align-items: center; justify-content: space-between; }
.price-card h3 { font-size: 1rem; font-weight: 600; margin: 0; color: var(--ink-2); }
.price { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 4px; }
.price b { font-size: 3rem; font-weight: 600; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.price s { font-size: 1.4rem; color: var(--muted); }
.price span { color: var(--muted); }
.for { margin: 0 0 22px; color: var(--muted); font-size: .92rem; }
.price-card ul { list-style: none; padding: 20px 0 0; margin: 0 0 28px; display: grid; gap: 10px; align-content: start; flex: 1; border-top: 1px solid var(--line); }
.price-card li { position: relative; padding-left: 26px; font-size: .95rem; }
.price-card li::before { content: ""; position: absolute; left: 3px; top: .38em; width: 5px; height: 10px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ribbon { padding: 2px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font-size: .74rem; font-weight: 500; }

/* faq */
.faq-section { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq-section .section-head { position: sticky; top: 96px; margin: 0; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; font-weight: 500; font-size: 1.04rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border: solid var(--ink-2); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq summary:hover { color: var(--accent-ink); }
.faq details p { margin: 0; padding: 0 0 22px; color: var(--ink-2); max-width: 60ch; }

/* final */
.final { padding-block: clamp(80px, 10vw, 128px) 0; }
.final-card { position: relative; overflow: hidden; text-align: center; padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 64px); border-radius: 28px; background: radial-gradient(80% 90% at 50% 0%, #224F44 0%, var(--night) 70%); color: #fff; isolation: isolate; }
.final-waves { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.final h2 { color: #fff; max-width: 15ch; margin-inline: auto; margin-bottom: 32px; }
.final h2 em { color: #BAE2D8; }
.final .fine { color: rgba(255,255,255,.6); }

/* footer */
.footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px; padding-block: 72px 48px; }
.f-brand p { color: var(--muted); margin: 12px 0 0; font-size: .92rem; max-width: 30ch; }
.f-brand .mail { font-family: var(--f-mono); font-size: .82rem; color: var(--ink-2); }
.f-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.f-cols h5 { margin: 0 0 10px; font-size: .8rem; font-weight: 600; color: var(--ink); }
.f-cols a { display: block; text-decoration: none; color: var(--muted); font-size: .92rem; padding: 3px 0; }
.f-cols a:hover { color: var(--ink); }
.credits { grid-column: 1 / -1; margin: 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }

/* reveal on scroll: content is visible at rest; this only adds motion */
.js .reveal.in { animation: up .7s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes up { from { transform: translateY(18px); opacity: .3; } to { transform: none; opacity: 1; } }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero, .split, .split-rev, .stage-grid, .scene-wrap, .note, .faq-section, .footer { grid-template-columns: minmax(0, 1fr); }
  .faq-section .section-head { position: static; }
  .nav-links { display: none; }
  .nav-inner .btn { margin-left: auto; }
  .scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pillars { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pillar, .pillar + .pillar { padding: 0; border: 0; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .control-grid { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .price-grid { grid-template-columns: minmax(0, 1fr); }
  .f-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .constellation { aspect-ratio: .95; }
  .tag b { font-size: .7rem; } .tag span { font-size: .64rem; }
  .sync-viz .lanes { height: 280px; }
  .map-area { aspect-ratio: .95; }
  .sdev { font-size: .74rem; padding: 6px 10px 6px 24px; }
  .sdev::before { left: 7px; width: 11px; height: 11px; margin-top: -5.5px; }
  .eq-fx label { grid-template-columns: 52px 1fr 40px; }
}
@media (max-width: 440px) {
  .scenes { grid-template-columns: minmax(0, 1fr); }
  .proof li { grid-template-columns: 56px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* control: copy above, the two mocks get the full width */
.split-rev { display: block; }
.split-rev .split-copy { max-width: 720px; margin-bottom: clamp(32px, 4vw, 48px); }
.split-rev .hint { margin-top: 14px; }

/* =====================================================================
   Colour system (v4): one family. Deep indigo for ink and actions,
   with soft sky, lavender and peach used as light gradients behind
   things, never as loud text. One gradient word per screen at most.
   ===================================================================== */
:root {
  --bg: #FAF9F5;
  --band: #F3FAF8;
  --ink: #0F1A16;
  --ink-2: #34423C;
  --muted: #66726B;
  --line: #E7F0EE;
  --line-2: #D5E2DF;
  --indigo: #0F6B5C;
  --indigo-deep: #0A3D34;
  --violet: #8C9A2E;
  --peach: #D9973B;
  --sky-t: #EBF7F4;
  --lav-t: #F7F8EE;
  --peach-t: #F9F2E5;
  --accent: var(--indigo);
  --accent-ink: #0B5246;
  --accent-soft: #F2F9F7;
  --g-word: linear-gradient(95deg, #0F6B5C 0%, #8C9A2E 55%, #C9963A 100%);
  --g-mesh: radial-gradient(45% 60% at 18% 20%, #E6F5F1 0%, rgba(230,245,241,0) 70%),
            radial-gradient(40% 60% at 82% 18%, #F5F6E9 0%, rgba(245,246,233,0) 70%),
            radial-gradient(45% 55% at 70% 92%, #F7EEDE 0%, rgba(247,238,222,0) 70%),
            radial-gradient(40% 50% at 25% 90%, #E6F7F3 0%, rgba(230,247,243,0) 70%),
            #FFFFFF;
  --c-vocal: #0F6B5C; --c-left: #2E9BA6; --c-right: #8C9A2E; --c-amb: #5FAF8A; --c-bass: #D9973B;
}
h1 em, h2 em { color: var(--indigo); }
.display em { background: var(--g-word); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
.final h2 em { background: linear-gradient(95deg, #CEEAE3, #ECEFD6 55%, #F1E0C2); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
.kicker, .eyebrow { color: var(--accent-ink); }

/* buttons */
.btn-primary { background: linear-gradient(180deg, #13806D, #0E6555); color: #fff; border: 0; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 20px -10px rgba(15,107,92,.9), 0 1px 2px rgba(15,26,22,.2); }
.btn-primary:hover { background: linear-gradient(180deg, #0F6B5C, #0B5246); }
.brand-mark { background: linear-gradient(135deg, #0F6B5C, #8C9A2E); }
.brand-mark i { border-color: var(--violet); }

/* ---------- hero: centred copy over a wide product stage ---------- */
.hero { display: block; padding-block: clamp(40px, 6vw, 80px) 0; text-align: center; }
.hero::before { inset: -160px calc(50% - 50vw) 30%; background:
  radial-gradient(40% 60% at 20% 10%, rgba(230,245,241,.9), transparent 70%),
  radial-gradient(40% 60% at 80% 5%, rgba(245,246,233,.9), transparent 70%),
  radial-gradient(30% 40% at 55% 40%, rgba(247,238,222,.6), transparent 70%); }
.hero-copy { max-width: 820px; margin: 0 auto; }
.announce { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; padding: 5px 14px 5px 5px; border-radius: 999px; background: rgba(255,255,255,.8); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15,26,22,.04); text-decoration: none; font-size: .88rem; color: var(--ink-2); transition: border-color .2s; }
.announce:hover { border-color: var(--line-2); }
.announce span { padding: 2px 9px; border-radius: 999px; background: var(--indigo); color: #fff; font-size: .76rem; font-weight: 600; }
.announce i { font-style: normal; color: var(--muted); }
.display { font-size: clamp(3rem, 7.4vw, 6.2rem); margin-bottom: 22px; }
.lede { margin: 0 auto 32px; max-width: 34em; }
.hero .fine { margin-top: 16px; }

.constellation { margin-top: clamp(40px, 5vw, 64px); aspect-ratio: 2.25; border-radius: 28px; border: 1px solid #fff; background: var(--g-mesh); box-shadow: 0 0 0 1px var(--line), 0 40px 80px -40px rgba(10,61,52,.35), 0 2px 6px rgba(15,26,22,.04); }
.constellation::before { opacity: .35; }
.constellation::after { content: ""; position: absolute; inset: 0; background: var(--g-mesh); opacity: .6; z-index: -2; animation: meshdrift 18s ease-in-out infinite alternate; background-size: 140% 140%; }
@keyframes meshdrift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.bars i { background: linear-gradient(0deg, #0F6B5C, #8C9A2E); }
.dev-laptop { box-shadow: 0 0 0 1px rgba(15,26,22,.1), 0 30px 60px -24px rgba(15,107,92,.5); }
.hud { display: none; }

.hcard { position: absolute; z-index: 4; text-align: left; background: rgba(255,255,255,.88); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border: 1px solid rgba(255,255,255,.95); border-radius: 16px; box-shadow: 0 0 0 1px rgba(15,26,22,.05), 0 18px 40px -20px rgba(10,61,52,.35); }
.hc-now { left: 3.2%; top: 9%; width: 236px; padding: 12px; display: grid; grid-template-columns: 52px 1fr; gap: 10px 12px; }
.hc-now .art { width: 52px; height: 52px; border-radius: 10px; background: linear-gradient(135deg, #EEDBB9 0%, #E6EAC9 55%, #B1DDD2 100%); position: relative; overflow: hidden; }
.hc-now .art i { position: absolute; inset: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); }
.hc-now .art::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #fff; }
.hc-now .meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.hc-now small, .hc-rooms small { font-size: .7rem; color: var(--muted); font-weight: 500; }
.hc-now b { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-now .meta span { font-size: .76rem; color: var(--ink-2); }
.hc-now .prog { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.hc-now .prog i { display: block; height: 100%; width: 36%; border-radius: 4px; background: linear-gradient(90deg, #0F6B5C, #8C9A2E); animation: progress 40s linear infinite; }
@keyframes progress { from { width: 36%; } to { width: 100%; } }
.hc-now .times { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: -6px; font-family: var(--f-mono); font-size: .66rem; color: var(--muted); }
.hc-rooms { right: 3.2%; top: 9%; width: 214px; padding: 12px 14px; }
.hc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.hc-head .sync { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; color: #2F7D5B; }
.hc-head .sync i { width: 6px; height: 6px; border-radius: 50%; background: #5FAF8A; animation: live 2s infinite; }
.hc-rooms ul { list-style: none; margin: 0; padding: 0; display: grid; }
.hc-rooms li { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line); }
.hc-rooms li b { font-size: .82rem; font-weight: 500; }
.lvl { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.lvl i { width: 3px; height: 14px; border-radius: 2px; background: linear-gradient(0deg, #0F6B5C, #8C9A2E); transform-origin: center; transform: scaleY(.4); }
.hc-scene { left: 50%; bottom: 5%; transform: translateX(-50%); padding: 7px 14px 7px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.hc-scene b { color: var(--ink); font-weight: 600; }
.sc-dot { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #E6EAC9, #EEDBB9); position: relative; }
.sc-dot::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.hc-scene { bottom: 4%; }
.node-src .tag { margin-bottom: 30px; }

.apps { justify-content: center; padding-top: 36px; }

/* pillars: pastel tiles, indigo glyphs */
.p-glyph { background: var(--sky-t); }
.pillar:nth-child(2) .p-glyph { background: var(--lav-t); }
.pillar:nth-child(3) .p-glyph { background: var(--peach-t); }
.g-sync i, .g-stage i { background: var(--indigo); }
.g-stage::before { background: var(--ink); }
.g-scenes i { background: repeating-radial-gradient(circle, var(--ink) 0 1px, #2E443E 1px 2.5px); }
.g-scenes i::after { background: var(--peach); }
.pillar:hover h3 { color: var(--indigo); }

/* sync */
.facts div { border-top: 1px solid var(--line); }
.seg button.on { color: var(--ink); }

/* stage band */
.band { background: linear-gradient(180deg, #FBFCF6 0%, #FAFDFC 100%); border-color: var(--line); }
.switch input:checked + span { background: var(--indigo); }

/* scenes: pastel tiles with indigo marks */
.sp-play { background: linear-gradient(180deg, #13806D, #0E6555); box-shadow: 0 8px 18px -8px rgba(15,107,92,.8); }
.sp-play:hover { background: linear-gradient(180deg, #0F6B5C, #0B5246); }
.scene.on { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo), 0 10px 24px -16px rgba(15,107,92,.6); }
.scene-player .scope { background: linear-gradient(180deg, #FFFFFF, #F7FCFB); }
.a-off { background: #F0F6F4; } .a-off i { background: var(--ink-2); }
.a-hall { background: var(--lav-t); } .a-hall i { border-color: var(--violet); }
.a-live { background: var(--peach-t); } .a-live i { background: var(--peach); }
.a-vinyl { background: #F9F3E8; } .a-vinyl i { background: radial-gradient(circle, var(--peach) 0 22%, var(--ink) 23% 26%, transparent 27%), repeating-radial-gradient(circle, var(--ink) 0 1px, #2D423D 1px 2.4px); }
.a-lofi { background: #E2F5F1; } .a-lofi i { background: #5FAF8A; }
.a-night { background: var(--sky-t); } .a-night i { box-shadow: -5px 3px 0 0 var(--indigo); } .a-night::after { background: rgba(15,107,92,.12); }

/* note and proof */
.note blockquote p::before, .note blockquote p::after { color: var(--violet); }
.proof b { color: var(--indigo); }

/* controls */
input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, #0F6B5C, #8C9A2E var(--v), var(--line) var(--v)); }
input[type="range"]::-moz-range-track { background: linear-gradient(90deg, #0F6B5C, #8C9A2E var(--v), var(--line) var(--v)); }
.chips button.on { background: var(--indigo); border-color: var(--indigo); }
.pill-live { background: #E2F5F1; color: #2F7D5B; }

/* steps */
.steps li::before { background: linear-gradient(90deg, #0F6B5C, #8C9A2E); }
.step-n { color: var(--accent-ink); }

/* compare */
.compare .us { background: var(--accent-soft); color: var(--accent-ink); }
.compare thead .us { background: #E9F6F3; color: var(--accent-ink); }
.compare .us.yes::before { background: var(--indigo); }
.compare td.yes::before { background: #5FAF8A; } .compare td.some::before { background: var(--peach); }

/* pricing */
.price-card.pro { border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #0F6B5C, #8C9A2E 55%, #E2AE5E) border-box; box-shadow: 0 30px 60px -32px rgba(15,107,92,.5); }
.price-card li::before { border-color: var(--indigo); }
.ribbon { background: var(--accent-soft); color: var(--accent-ink); }

/* faq */
.faq summary:hover, .faq details[open] summary { color: var(--accent-ink); }

/* final */
.final-card { background:
  radial-gradient(45% 80% at 12% 0%, rgba(95,175,138,.45), transparent 70%),
  radial-gradient(40% 70% at 88% 10%, rgba(160,170,80,.35), transparent 70%),
  radial-gradient(50% 60% at 50% 115%, rgba(217,151,59,.30), transparent 70%),
  #0E2A24; }
.btn-light { color: #0E2A24; }

/* hero responsive */
@media (max-width: 1100px) {
  .hc-now { width: 210px; } .hc-rooms { width: 190px; }
}
@media (max-width: 980px) {
  .constellation { aspect-ratio: 1.5; }
  .hc-rooms { display: none; }
  .hc-now { top: auto; bottom: 4%; left: 3%; width: 220px; }
  .hc-scene { left: auto; right: 3%; transform: none; }
}
@media (max-width: 720px) {
  .display { font-size: clamp(2.6rem, 11vw, 3.4rem); }
  .constellation { aspect-ratio: .9; border-radius: 22px; }
  .constellation .node[data-x="34"] { left: 20% !important; }
  .hc-now { display: none; }
  .hc-scene { display: none; }
  .announce { font-size: .8rem; }
  .apps { justify-content: flex-start; }
}

/* =====================================================================
   v6 · Editorial calm. More air, softer surfaces, a floating glass nav,
   ink pill buttons, film grain, and a living sound orb in the hero.
   Colour stays in one indigo / pastel family.
   ===================================================================== */
:root {
  --bg: #FAF9F5;
  --ink: #0F1A16;
  --line: rgba(15,26,22,.08);
  --line-2: rgba(15,26,22,.14);
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 16px;
  --shadow: 0 1px 2px rgba(15,26,22,.04), 0 12px 32px -20px rgba(10,61,52,.22);
  --shadow-lift: 0 1px 2px rgba(15,26,22,.04), 0 40px 80px -48px rgba(10,61,52,.36);
  --ease: cubic-bezier(.2,.8,.2,1);
}
body { background: var(--bg); letter-spacing: -0.006em; }
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
::selection { background: #E8F5F2; color: var(--ink); }

/* floating glass nav */
.nav { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; padding-top: 14px; pointer-events: none; }
.nav.scrolled { border: 0; }
.nav-inner { pointer-events: auto; width: calc(100% - 32px); max-width: 1040px; height: 58px; padding: 0 8px 0 22px; border-radius: 999px; background: rgba(255,255,255,.66); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); box-shadow: 0 0 0 1px rgba(15,26,22,.06), 0 12px 32px -20px rgba(10,61,52,.35); transition: background .3s, box-shadow .3s; }
.nav.scrolled .nav-inner { background: rgba(255,255,255,.82); box-shadow: 0 0 0 1px rgba(15,26,22,.07), 0 16px 40px -22px rgba(10,61,52,.45); }
.nav-links a { font-size: .9rem; color: var(--ink-2); transition: color .2s; }
.nav-links a:hover { color: var(--ink); }

/* buttons: ink pills */
.btn { border-radius: 999px; font-weight: 500; padding: 13px 22px; letter-spacing: -0.01em; transition: transform .25s var(--ease), background .2s, box-shadow .25s, border-color .2s; }
.btn:hover { transform: translateY(-1px); }
.btn-sm { padding: 9px 16px; font-size: .9rem; }
.btn-primary { background: var(--ink); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px -12px rgba(15,26,22,.55); }
.btn-primary:hover { background: #1A3A32; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 16px 30px -14px rgba(10,61,52,.6); }
.btn-quiet { background: rgba(255,255,255,.75); border-color: var(--line-2); box-shadow: 0 1px 2px rgba(15,26,22,.04); backdrop-filter: blur(8px); }
.btn-quiet:hover { border-color: rgba(15,26,22,.24); background: #fff; }

/* type */
.display { font-weight: 500; font-size: clamp(3.2rem, 8.2vw, 7rem); line-height: .96; letter-spacing: -0.055em; margin-bottom: 26px; }
.display em { letter-spacing: -0.03em; }
.section h2, .final h2 { font-weight: 500; font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.02; letter-spacing: -0.045em; }
.lede { color: var(--ink-2); font-size: clamp(1.08rem, 1.4vw, 1.25rem); }
.kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 5px 12px 5px 10px; border-radius: 999px; background: rgba(255,255,255,.8); box-shadow: 0 0 0 1px var(--line); font-family: var(--f-sans); font-size: .8rem; font-weight: 500; color: var(--ink-2); }
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #3E9A7E, #E2AE5E); }
.section { padding-block: clamp(104px, 12vw, 168px) 0; scroll-margin-top: 88px; }
.section-head { margin-bottom: clamp(40px, 5vw, 64px); }

/* ---------- hero: copy over the sound orb ---------- */
.hero { position: relative; display: block; padding: clamp(56px, 8vw, 104px) 0 0; text-align: center; }
.hero::before { inset: -140px 0 0; background:
  radial-gradient(38% 42% at 50% 64%, rgba(212,236,230,.55), transparent 70%),
  radial-gradient(30% 36% at 22% 18%, rgba(226,243,239,.8), transparent 70%),
  radial-gradient(28% 34% at 80% 14%, rgba(247,237,220,.7), transparent 70%); }
.hero-copy { max-width: 900px; position: relative; z-index: 2; }
.announce { margin-bottom: 32px; background: rgba(255,255,255,.7); backdrop-filter: blur(10px); border: 0; box-shadow: 0 0 0 1px var(--line), 0 6px 18px -12px rgba(10,61,52,.3); }
.announce span { background: var(--ink); font-weight: 500; }
.hero .lede { max-width: 33em; margin: 0 auto 36px; }

.orb-stage { position: relative; width: 100%; max-width: 1240px; margin: clamp(8px, 2vw, 24px) auto 0; height: clamp(500px, 50vw, 680px); }
.orb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.orbit { position: absolute; inset: 0; }
.chip { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; background: rgba(255,255,255,.78); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 0 0 1.5px rgba(15,26,22,.05), 0 14px 30px -16px rgba(10,61,52,.45); white-space: nowrap; will-change: transform, opacity; font-size: .86rem; line-height: 1; }
.chip b { font-weight: 600; }
.chip small { color: var(--muted); font-size: .8rem; display: inline-flex; align-items: center; gap: 6px; }
.chip small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 calc(var(--lv, .5) * 5px) color-mix(in srgb, var(--c) 18%, transparent); }
.ico { width: 26px; height: 26px; border-radius: 50%; flex: none; position: relative; background: color-mix(in srgb, var(--c) 14%, #fff); }
.ico::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1.5px solid var(--c); }
.ico-laptop::before { width: 12px; height: 8px; border-radius: 2px; margin-top: -1px; }
.ico-laptop::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 7px; height: 1.5px; border-radius: 1px; background: var(--c); }
.ico-phone::before { width: 7px; height: 12px; border-radius: 2px; }
.ico-tablet::before { width: 10px; height: 13px; border-radius: 2px; }
.ico-speaker::before { width: 9px; height: 13px; border-radius: 3px; }
.ico-speaker::after { content: ""; position: absolute; left: 50%; top: 55%; width: 3px; height: 3px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--c); }
.ico-mini::before { width: 13px; height: 6px; border-radius: 2px; }

.orb-stage .hcard { z-index: 4; background: rgba(255,255,255,.74); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 0; border-radius: 20px; box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 0 0 1.5px rgba(15,26,22,.05), 0 24px 48px -28px rgba(10,61,52,.45); animation: floaty 9s ease-in-out infinite; }
.orb-stage .hc-now { left: 2%; top: auto; bottom: 14%; padding: 14px; }
.orb-stage .hc-rooms { right: 2%; top: 6%; padding: 14px 16px; animation-delay: -4s; }
.orb-stage .hc-scene { left: 50%; bottom: 3%; transform: translateX(-50%); animation: none; padding: 8px 16px 8px 10px; }
.hc-scene b { display: inline-block; transition: opacity .25s, transform .25s var(--ease); }
.hc-scene.swap b { opacity: 0; transform: translateY(4px); }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* ---------- bento overview ---------- */
.bento-section { padding-top: clamp(72px, 9vw, 128px); }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); gap: 16px; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 26px; border-radius: var(--r-lg); background: #fff; text-decoration: none; overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px var(--line), var(--shadow); transition: transform .4s var(--ease), box-shadow .4s var(--ease); min-width: 0; }
a.tile:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line-2), var(--shadow-lift); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .9; }
.t-stage { grid-column: span 2; grid-row: span 2; }
.t-scenes, .t-apps { grid-column: span 2; }
.t-stage::before { background: radial-gradient(70% 60% at 50% 30%, #F8F9F0 0%, rgba(248,249,240,0) 70%), radial-gradient(50% 40% at 85% 95%, #FBF5EC, transparent 70%); }
.t-scenes::before { background: radial-gradient(60% 90% at 85% 0%, #FAF4E9, transparent 70%), radial-gradient(50% 80% at 10% 10%, #F9FAF2, transparent 70%); }
.t-sync::before { background: radial-gradient(80% 70% at 50% 0%, #EDF8F5, transparent 75%); }
.t-rooms::before { background: radial-gradient(80% 70% at 50% 0%, #E8F7F3, transparent 75%); }
.t-apps::before { background: radial-gradient(60% 80% at 15% 0%, #F0F8F6, transparent 70%), radial-gradient(50% 70% at 90% 10%, #F9FAF3, transparent 70%); }
.t-private::before { background: radial-gradient(80% 70% at 50% 0%, #F9FAF2, transparent 75%); }
.t-tower::before { background: radial-gradient(80% 70% at 50% 0%, #FAF5EC, transparent 75%); }
.t-copy { position: relative; }
.t-k { display: inline-block; margin-bottom: 10px; font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--accent-ink); }
.tile h3 { margin: 0 0 8px; font-size: clamp(1.2rem, 1.6vw, 1.45rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); }
.t-stage h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.tile p { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.5; max-width: 34em; }
.t-vis { position: relative; flex: 1; min-height: 96px; }

/* stage tile */
.v-stage { min-height: 300px; margin: -6px -6px 0; }
.v-stage .ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px dashed rgba(15,107,92,.18); transform: translate(-50%, -50%); }
.v-stage .r1 { width: 34%; aspect-ratio: 1; } .v-stage .r2 { width: 58%; aspect-ratio: 1; } .v-stage .r3 { width: 82%; aspect-ratio: 1; border-style: solid; border-color: rgba(15,107,92,.08); }
.v-stage .wave { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(62,154,126,.5); transform: translate(-50%, -50%) scale(.6); opacity: 0; animation: ripple 3.6s var(--ease) infinite; }
.v-stage .w2 { animation-delay: 1.2s; } .v-stage .w3 { animation-delay: 2.4s; }
@keyframes ripple { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.6); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.6); } }
.v-stage .you { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 600; color: #fff; background: radial-gradient(circle at 35% 30%, #7CC2A8, #0F6B5C 70%); box-shadow: 0 0 0 8px rgba(62,154,126,.12), 0 16px 32px -12px rgba(15,107,92,.7); }
.v-stage .sd { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 8px; border-radius: 999px; background: rgba(255,255,255,.9); box-shadow: 0 0 0 1px var(--line), 0 10px 24px -14px rgba(10,61,52,.4); font-size: .8rem; font-weight: 500; white-space: nowrap; color: var(--ink); }
.v-stage .sd i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); animation: beatdot 1.07s ease-out infinite; animation-delay: var(--d); }
@keyframes beatdot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 45%, transparent); } 100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--c) 0%, transparent); } }

/* scenes tile: two slow rows of moods */
.mq { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mq + .mq { margin-top: 10px; }
.mq-row { display: flex; gap: 10px; width: max-content; animation: marquee 32s linear infinite; }
.mq.rev .mq-row { animation-direction: reverse; animation-duration: 38s; }
@keyframes marquee { to { transform: translateX(-50%); } }
.v-scenes { display: flex; flex-direction: column; justify-content: center; }
.v-scenes span, .v-apps span { padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.85); box-shadow: 0 0 0 1px var(--line); font-size: .86rem; font-weight: 500; white-space: nowrap; color: var(--ink-2); }
.v-scenes span.on { background: var(--ink); color: #fff; box-shadow: 0 10px 20px -12px rgba(15,26,22,.6); }
.v-apps { display: flex; align-items: center; }
.v-apps .mq { width: 100%; }
.v-apps span { font-size: .95rem; font-weight: 600; letter-spacing: -0.01em; color: #6E7A72; }

/* sync tile: three waves settle onto one beat */
.v-sync svg { width: 100%; height: 100%; min-height: 96px; overflow: visible; }
.v-sync path { fill: none; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; animation: align 6s var(--ease) infinite; }
.v-sync .w1 { stroke: #0F6B5C; --o: -14px; } .v-sync .w2 { stroke: #8C9A2E; --o: 11px; opacity: .8; } .v-sync .w3 { stroke: #2E9BA6; --o: -6px; opacity: .7; }
@keyframes align { 0%, 8% { transform: translateX(var(--o)); } 38%, 88% { transform: translateX(0); } 100% { transform: translateX(var(--o)); } }
.v-sync .ms { position: absolute; right: 0; top: 0; padding: 4px 10px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-family: var(--f-mono); font-size: .72rem; color: var(--accent-ink); }

/* rooms tile */
.v-rooms { display: grid; gap: 12px; align-content: center; }
.v-rooms span { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 12px; font-size: .82rem; }
.v-rooms b { font-weight: 500; color: var(--ink-2); }
.v-rooms i { height: 6px; border-radius: 6px; background: rgba(15,26,22,.06); position: relative; overflow: hidden; }
.v-rooms i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, #5FAF8A, #3E9A7E); transform-origin: left; animation: lvlbar 2.4s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes lvlbar { from { transform: scaleX(.72); } to { transform: scaleX(1); } }

/* private tile */
.v-private { display: grid; place-items: center; }
.v-private .arc { position: absolute; left: 50%; top: 62%; border: 2px solid transparent; border-top-color: #8C9A2E; border-radius: 50%; transform: translate(-50%, -50%); animation: arcfade 2.4s ease-in-out infinite; }
.v-private .a1 { width: 34px; height: 34px; } .v-private .a2 { width: 62px; height: 62px; animation-delay: .25s; } .v-private .a3 { width: 90px; height: 90px; animation-delay: .5s; }
.v-private .dot { position: absolute; left: 50%; top: 62%; width: 10px; height: 10px; border-radius: 50%; background: #0F6B5C; transform: translate(-50%, -50%); }
@keyframes arcfade { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* tower tile */
.v-tower { display: grid; place-items: center; }
.v-tower .phone { width: 52px; height: 96px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1.5px rgba(15,26,22,.12), 0 18px 30px -16px rgba(217,151,59,.6); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 18px; }
.v-tower .eq { display: flex; gap: 3px; align-items: flex-end; height: 30px; }
.v-tower .eq i { width: 4px; border-radius: 2px; background: linear-gradient(0deg, #D9973B, #8C9A2E); animation: eqb 1.07s ease-in-out infinite alternate; }
.v-tower .eq i:nth-child(1) { height: 40%; } .v-tower .eq i:nth-child(2) { height: 80%; animation-delay: -.3s; } .v-tower .eq i:nth-child(3) { height: 100%; animation-delay: -.6s; } .v-tower .eq i:nth-child(4) { height: 70%; animation-delay: -.2s; } .v-tower .eq i:nth-child(5) { height: 45%; animation-delay: -.5s; }
@keyframes eqb { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.v-tower .eq i { transform-origin: bottom; }

/* ---------- the rest of the page: softer, airier surfaces ---------- */
.panel, .mock, .table-wrap { border: 0; border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line), var(--shadow-lift); }
.panel-bar { border-bottom-color: var(--line); }
.band { background: radial-gradient(60% 50% at 50% 40%, #F9FAF3 0%, rgba(249,250,243,0) 70%); border: 0; }
.seg { border-radius: 999px; background: rgba(15,26,22,.05); }
.seg button { border-radius: 999px; }
.scene { border: 0; border-radius: 18px; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.scene:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--line-2), var(--shadow); }
.scene.on { box-shadow: 0 0 0 1.5px var(--indigo), 0 16px 32px -20px rgba(15,107,92,.7); }
.note blockquote p { font-size: clamp(1.75rem, 3vw, 2.6rem); line-height: 1.22; }
.proof li { border-top-color: var(--line); }
.proof li:last-child { border-bottom-color: var(--line); }
.proof b { font-weight: 500; letter-spacing: -0.05em; }
.steps li { border-top-color: var(--line-2); }
.price-card { border: 0; border-radius: var(--r-xl); padding: 34px; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.price-card.pro { border: 0; background: radial-gradient(80% 60% at 100% 0%, #F8F9F0 0%, rgba(248,249,240,0) 70%), radial-gradient(60% 50% at 0% 100%, #FBF5EC 0%, rgba(251,245,236,0) 70%), #fff; box-shadow: 0 0 0 1.5px rgba(15,107,92,.35), 0 40px 80px -44px rgba(15,107,92,.55); }
.price b { font-weight: 500; letter-spacing: -0.05em; }
.faq details { border-bottom-color: var(--line); }
.faq { border-top-color: var(--line); }
.faq summary { font-weight: 500; }

/* final: a pastel aurora card, ink text */
.final-card { border-radius: 40px; color: var(--ink); background:
  radial-gradient(45% 70% at 15% 0%, rgba(226,243,239,.95), transparent 70%),
  radial-gradient(40% 70% at 88% 5%, rgba(241,244,225,.95), transparent 70%),
  radial-gradient(50% 70% at 55% 110%, rgba(246,235,215,.9), transparent 70%),
  #FBFCF7; box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 0 0 1.5px var(--line), 0 50px 100px -60px rgba(10,61,52,.45); }
.final h2 { color: var(--ink); max-width: 16ch; }
.final h2 em { background: var(--g-word); -webkit-background-clip: text; background-clip: text; color: transparent; }
.final .fine { color: var(--muted); }
.btn-light { background: var(--ink); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px -12px rgba(15,26,22,.55); }
.btn-light:hover { background: #1A3A32; }
.btn-ghost { color: var(--ink); background: rgba(255,255,255,.6); border-color: var(--line-2); }
.btn-ghost:hover { background: #fff; border-color: rgba(15,26,22,.24); }

.footer { border-top: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .orb-stage .hc-now { width: 210px; }
  .orb-stage .hc-rooms { width: 190px; }
}
@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-stage, .t-scenes, .t-apps { grid-column: span 2; }
  .t-stage { grid-row: auto; }
  .orb-stage .hc-rooms { display: none; }
  .orb-stage .hc-now { bottom: 12%; }
}
@media (max-width: 720px) {
  .nav { padding-top: 10px; }
  .nav-inner { width: calc(100% - 20px); height: 54px; padding-left: 16px; }
  .display { font-size: clamp(2.8rem, 13vw, 3.8rem); }
  .orb-stage { height: 520px; }
  .orb-stage .hc-now { display: none; }
  .orb-stage .hc-scene { display: inline-flex; bottom: 4%; }
  .chip { font-size: .78rem; padding: 6px 11px 6px 6px; gap: 6px; }
  .chip small { display: none; }
  .ico { width: 22px; height: 22px; }
  .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 12px; }
  .t-stage, .t-scenes, .t-apps { grid-column: auto; }
  .tile { padding: 22px; }
  .t-vis { min-height: 110px; }
  .v-stage { min-height: 280px; }
  .final-card { border-radius: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .mq-row, .v-stage .wave, .v-sync path, .orb-stage .hcard, .v-rooms i::after, .v-tower .eq i, .v-private .arc, .v-stage .sd i { animation: none !important; }
}
/* hero tuning: the orb starts closer to the fold and its glow fades out at the edges */
.hero { padding-top: clamp(40px, 5.5vw, 72px); }
.orb-stage { margin-top: -24px; }
.orb-canvas { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); }
.hero-copy { z-index: 5; }

/* =====================================================================
   v7 spacing: tighter rhythm between sections, wider section heads,
   and fuller blocks where the page felt empty.
   ===================================================================== */
.section { padding-block: clamp(72px, 8vw, 120px) 0; }
.band > .section { padding-top: clamp(72px, 8vw, 120px); }
.final { padding-block: clamp(72px, 8vw, 112px) 0; }
.orb-stage { height: clamp(460px, 42vw, 600px); }
.bento-section { padding-top: clamp(40px, 4vw, 64px); }
.section-head { margin-bottom: clamp(32px, 3.6vw, 48px); }

/* headline on the left, the explanation on the right, so the space beside short headings is used */
@media (min-width: 981px) {
  #stage .section-head, #scenes .section-head, #how .section-head, #compare .section-head {
    max-width: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: end;
  }
  #stage .section-head .kicker, #scenes .section-head .kicker, #how .section-head .kicker, #compare .section-head .kicker { grid-column: 1; justify-self: start; }
  #stage .section-head h2, #scenes .section-head h2, #how .section-head h2, #compare .section-head h2 { grid-column: 1; margin-bottom: 0; }
  #stage .section-head .sub, #scenes .section-head .sub, #compare .section-head .sub { grid-column: 2; grid-row: 2; padding-bottom: 6px; }
}

/* setup steps become soft cards */
.steps { gap: 16px; }
.steps li { padding: 28px; border-top: 0; border-radius: var(--r-lg); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow); overflow: hidden; }
.steps li::before { top: 0; }
.step-n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 22px; font-size: .86rem; font-weight: 500; background: #E7F1EC; color: var(--accent-ink); }
.steps li:nth-child(2) .step-n { background: #EFF1DF; } .steps li:nth-child(3) .step-n { background: #F6EDDC; }
.steps h4 { font-size: 1.2rem; font-weight: 500; letter-spacing: -0.02em; }

/* maker's note sits centred against the proof column */
.note { align-items: center; }

/* pricing uses more of the width */
.price-grid { max-width: 960px; gap: 20px; }

/* sync and multi-room: less air between copy and demo */
.split { gap: clamp(32px, 4vw, 56px); }
@media (min-width: 981px) {
  #control .split-copy { max-width: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: end; margin-bottom: 8px; }
  #control .split-copy .kicker, #control .split-copy h2 { grid-column: 1; justify-self: start; }
  #control .split-copy h2 { margin-bottom: 0; }
  #control .split-copy .sub { grid-column: 2; grid-row: 1 / span 2; align-self: end; padding-bottom: 6px; margin: 0; }
  #control .split-copy .hint { grid-column: 2; margin-top: 12px; }
}
.band > .section { padding-top: clamp(64px, 7vw, 104px); }