/* ============================================================
   HELM — cinematic hero
   ============================================================ */
:root{
  --bg:#06070b;
  --bg-soft:#0b0d14;
  --ink:#eef1f8;
  --ink-dim:#9aa3b8;
  --ink-faint:#5b647c;
  --line:rgba(255,255,255,.08);
  --glass:rgba(255,255,255,.04);
  --glass-2:rgba(255,255,255,.06);

  /* agent accents */
  --c-user:#8b93ff;
  --c-gm:#a06bff;
  --c-design:#ff7a59;
  --c-eng:#5b8def;
  --c-mkt:#ff7ab8;
  --c-sales:#37e0a0;
  --c-cs:#34d2ff;
  --c-fin:#ffcb5e;

  --r:18px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.5;
}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.grad{
  background:linear-gradient(110deg,#fff 0%,#c9b8ff 35%,#7ad7ff 70%,#fff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(20px,4vw,56px);
  backdrop-filter:blur(10px);
  background:linear-gradient(to bottom,rgba(6,7,11,.7),transparent);
}
.nav__brand{display:flex;align-items:center;gap:10px}
.nav__logo{width:18px;height:18px;border-radius:6px;
  background:conic-gradient(from 200deg,var(--c-user),var(--c-cs),var(--c-fin),var(--c-mkt),var(--c-user));
  box-shadow:0 0 18px rgba(139,147,255,.6)}
.nav__name{font-weight:700;letter-spacing:.22em;font-size:15px}
.nav__links{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav__links a{color:var(--ink-dim);text-decoration:none;font-size:14px;font-weight:500;transition:color .2s}
.nav__links a:hover{color:var(--ink)}
.nav__cta{padding:8px 16px;border:1px solid var(--line);border-radius:99px;color:var(--ink)!important;background:var(--glass)}
.nav__cta:hover{background:var(--glass-2)}
a:focus-visible,button:focus-visible,.ctrl:focus-visible,.composer__send:focus-visible,summary:focus-visible{outline:2px solid var(--c-user);outline-offset:2px;border-radius:6px}
@media(max-width:620px){.nav__links a:not(.nav__cta){display:none}}

/* ============================================================
   FILM — tall scroll track with a pinned stage
   ============================================================ */
.film{position:relative;height:980vh}        /* scroll length ~ scenes (9) */
.stage{
  position:sticky;top:0;height:100vh;
  overflow:hidden;
  display:flex;align-items:center;
}

/* progressive enhancement: with JS off, the pinned film degrades to a readable stacked page */
html:not(.js) .film{height:auto}
html:not(.js) .stage{position:static;height:auto;overflow:visible;display:block}
html:not(.js) .scene{position:relative;inset:auto;opacity:1;visibility:visible;padding:48px clamp(20px,6vw,80px)}
html:not(.js) .scene__inner{transform:none;opacity:1}
html:not(.js) .controls,
html:not(.js) .rail,
html:not(.js) .scroll-hint{display:none}

/* ---------- background video layers ---------- */
.film__bg{position:absolute;inset:0;z-index:0}
.bg-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity 1.1s var(--ease);
  filter:saturate(1.05) brightness(.85);
}
.bg-video.is-on{opacity:.2}
.film__vignette{position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 30%,transparent 35%,rgba(6,7,11,.6) 78%,var(--bg) 100%),
    linear-gradient(to right,var(--bg) 0%,transparent 22%,transparent 78%,var(--bg) 100%);
}
.film__grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* fallback gradient under videos (always present) */
.film__bg::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 50% at 20% 20%,rgba(160,107,255,.18),transparent 60%),
    radial-gradient(60% 60% at 85% 70%,rgba(52,210,255,.14),transparent 60%),
    radial-gradient(50% 50% at 50% 110%,rgba(255,203,94,.10),transparent 60%),
    var(--bg);
}

/* ---------- agent rail ---------- */
.rail{position:absolute;left:clamp(20px,4vw,56px);top:50%;transform:translateY(-50%);z-index:20}
.rail__line{position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line);border-radius:2px;overflow:hidden}
.rail__fill{position:absolute;left:0;top:0;width:100%;height:0%;
  background:linear-gradient(var(--c-user),var(--c-cs),var(--c-fin));border-radius:2px}
.rail__list{list-style:none;display:flex;flex-direction:column;gap:26px}
.rail__item{display:flex;align-items:center;gap:12px;font-size:12px;
  font-family:'JetBrains Mono',monospace;color:var(--ink);
  opacity:.72;transition:opacity .4s,color .4s,transform .4s}
.rail__item i{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink-faint);
  background:var(--bg);transition:all .4s;flex:0 0 auto}
.rail__item.is-active{opacity:1;color:var(--ink);transform:translateX(2px)}
.rail__item.is-active i{border-color:var(--c);background:var(--c);box-shadow:0 0 14px var(--c)}
.rail__item.is-done i{border-color:var(--c);background:var(--c);opacity:.85}
@media(max-width:860px){.rail{display:none}}

/* ---------- scenes ---------- */
.scenes{position:relative;z-index:10;width:100%;height:100%}
.scene{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:84px clamp(20px,6vw,120px) 104px clamp(20px,12vw,200px);
  opacity:0;visibility:hidden;
  transition:opacity .6s var(--ease),visibility .6s;
}
.scene.is-active{opacity:1;visibility:visible}
.scene__inner{width:100%;max-width:680px;
  transform:translateY(26px) scale(.985);opacity:0;
  transition:transform .7s var(--ease),opacity .7s var(--ease)}
.scene.is-active .scene__inner{transform:none;opacity:1}
.scene__inner.center{text-align:center;max-width:760px;margin:0 auto}

/* ---------- hero text ---------- */
.kicker{font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--c-user);margin-bottom:22px}
.hero-title{font-size:clamp(34px,6vw,72px);line-height:1.04;font-weight:700;letter-spacing:-.02em}
.hero-sub{margin:22px auto 0;max-width:540px;color:var(--ink-dim);font-size:clamp(15px,1.6vw,19px)}

/* ---------- composer ---------- */
.composer{margin:38px auto 0;max-width:560px;display:flex;align-items:center;gap:12px;
  background:var(--glass);border:1px solid var(--line);border-radius:99px;
  padding:10px 10px 10px 16px;backdrop-filter:blur(14px);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.02);
  text-align:left}
.composer__avatar{font-size:11px;font-weight:600;color:var(--c-user);
  font-family:'JetBrains Mono',monospace;border:1px solid rgba(139,147,255,.4);
  padding:5px 9px;border-radius:99px;flex:0 0 auto}
.composer__field{flex:1;min-height:24px;display:flex;align-items:center;color:var(--ink);font-size:15.5px}
.caret{width:2px;height:18px;background:var(--c-user);margin-left:1px;animation:blink 1s steps(2) infinite}
.composer.is-sent .caret{display:none}
@keyframes blink{50%{opacity:0}}
.composer__send{flex:0 0 auto;width:42px;height:42px;border:none;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:#0a0a12;
  background:linear-gradient(135deg,var(--c-user),var(--c-cs));
  box-shadow:0 0 0 0 rgba(139,147,255,.5);transition:transform .2s,box-shadow .3s}
.composer__send svg{fill:currentColor;transform:translateX(1px)}
.composer.is-sent .composer__send{animation:sent .6s var(--ease)}
@keyframes sent{0%{transform:scale(1)}40%{transform:scale(.82) rotate(-8deg)}100%{transform:scale(1)}}

.scroll-hint{margin-top:46px;display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);transition:opacity .5s}
.scroll-hint i{width:22px;height:34px;border:1px solid var(--line);border-radius:99px;position:relative}
.scroll-hint i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:6px;border-radius:2px;
  background:var(--ink-dim);transform:translateX(-50%);animation:wheel 1.6s var(--ease) infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* ---------- agent cards ---------- */
.agent-card{
  position:relative;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;
  backdrop-filter:blur(16px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05);
}
.agent-card::before{content:"";position:absolute;inset:0;border-radius:var(--r);padding:1px;
  background:linear-gradient(140deg,color-mix(in srgb,var(--c) 55%,transparent),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.9}
.agent-card::after{content:"";position:absolute;inset:-1px;border-radius:var(--r);
  box-shadow:0 0 60px -10px var(--c);opacity:.18;pointer-events:none}
.agent-card__head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.agent-card__badge{flex:0 0 auto;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  font-family:'JetBrains Mono',monospace;font-weight:600;font-size:15px;color:#06070b;
  background:var(--c);box-shadow:0 0 22px -2px var(--c)}
.agent-card__head h3{font-size:18px;font-weight:600;letter-spacing:-.01em}
.agent-card__role{font-size:12.5px;color:var(--ink-faint);font-family:'JetBrains Mono',monospace}
.status{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;
  padding:5px 11px;border-radius:99px;border:1px solid var(--line);color:var(--ink-dim);
  display:flex;align-items:center;gap:7px;white-space:nowrap}
.status--live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c);
  box-shadow:0 0 8px var(--c);animation:pulse 1.4s infinite}
.status.is-done{color:var(--c);border-color:color-mix(in srgb,var(--c) 40%,transparent)}
.status.is-done::before{animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.agent-card__body{display:flex;flex-direction:column;gap:12px}
.line{font-size:15px;color:var(--ink-dim);opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.line em{color:var(--ink);font-style:normal}
.line.is-in{opacity:1;transform:none}
.line--ok{color:var(--c-sales);font-weight:500}

.tasks{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.task{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ink);
  background:var(--glass);border:1px solid var(--line);border-left:2px solid var(--c);
  border-radius:8px;padding:9px 12px;opacity:0;transform:translateX(-10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.task.is-in{opacity:1;transform:none}
.caption{margin-top:20px;color:var(--ink-faint);font-size:13.5px}

/* creatives grid */
.creatives{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0}
.creative{background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:14px;
  opacity:0;transform:scale(.94) translateY(8px);transition:all .5s var(--ease)}
.creative.is-in{opacity:1;transform:none}
.creative span{display:block;font-size:11.5px;color:var(--ink-faint);font-family:'JetBrains Mono',monospace;margin-bottom:5px}
.creative b{font-size:14.5px;font-weight:600;color:var(--ink)}

/* sales ticker */
.ticker{margin-bottom:8px}
.ticker__label{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.1em}
.ticker__value{font-size:clamp(40px,7vw,68px);font-weight:700;letter-spacing:-.03em;
  color:var(--c-sales);text-shadow:0 0 40px rgba(55,224,160,.4);font-variant-numeric:tabular-nums}
.orders{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.order{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ink-dim);
  display:flex;align-items:center;gap:10px;opacity:0;transform:translateX(12px);
  transition:all .45s var(--ease)}
.order.is-in{opacity:1;transform:none}
.order .dot{width:7px;height:7px;border-radius:50%;background:var(--c-sales);box-shadow:0 0 10px var(--c-sales)}

/* chat */
.chat{gap:10px}
.bubble{max-width:80%;padding:11px 15px;border-radius:16px;font-size:14.5px;
  opacity:0;transform:translateY(10px) scale(.97);transition:all .4s var(--ease)}
.bubble.is-in{opacity:1;transform:none}
.bubble--in{align-self:flex-start;background:var(--glass-2);border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--ink)}
.bubble--out{align-self:flex-end;border-bottom-right-radius:5px;color:#04121a;
  background:linear-gradient(135deg,var(--c-cs),#7ae6ff)}

/* ledger */
.ledger{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.ledger__row{display:flex;justify-content:space-between;align-items:center;padding:11px 2px;
  border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-dim);
  opacity:0;transform:translateY(8px);transition:all .45s var(--ease)}
.ledger__row.is-in{opacity:1;transform:none}
.ledger__row b{font-family:'JetBrains Mono',monospace;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.ledger__row--net{border-bottom:none;margin-top:6px;font-size:16px;color:var(--ink)}
.ledger__row--net b{color:var(--c-fin);font-size:20px;font-weight:600;text-shadow:0 0 24px rgba(255,203,94,.4)}

/* ---------- final report ---------- */
.report{margin:6px auto 0;max-width:560px;text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:22px;padding:22px;backdrop-filter:blur(16px);
  box-shadow:0 50px 110px -34px rgba(0,0,0,.85);
  transform:translateY(20px) rotateX(8deg);opacity:0;transform-origin:center top;
  transition:all .8s var(--ease)}
.scene.is-active .report.is-in{transform:none;opacity:1}
.report__head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.report__logo{width:40px;height:40px;border-radius:12px;
  background:conic-gradient(from 200deg,var(--c-user),var(--c-cs),var(--c-fin),var(--c-mkt),var(--c-user));
  box-shadow:0 0 24px rgba(139,147,255,.5)}
.report__head h3{font-size:19px;font-weight:600}
.report__head p{font-size:12.5px;color:var(--ink-faint);font-family:'JetBrains Mono',monospace}
.report__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:16px}
.stat span{display:block;font-size:12px;color:var(--ink-faint);font-family:'JetBrains Mono',monospace;margin-bottom:6px}
.stat b{font-size:26px;font-weight:700;letter-spacing:-.02em}
.stat:nth-child(1) b{color:var(--c-sales)}
.stat:nth-child(4) b{color:var(--c-user)}
.report__note{margin-top:12px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-faint);text-align:center}

.closer{margin-top:28px;font-size:clamp(24px,3.8vw,42px);font-weight:700;line-height:1.08;letter-spacing:-.02em}
.cta-row{margin-top:22px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{text-decoration:none;font-weight:600;font-size:15px;padding:14px 26px;border-radius:99px;transition:transform .2s,box-shadow .3s,background .3s}
.btn--primary{color:#06070b;background:linear-gradient(135deg,#fff,#cdd6ff);box-shadow:0 14px 40px -12px rgba(205,214,255,.6)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 20px 50px -12px rgba(205,214,255,.8)}
.btn--ghost{color:var(--ink);border:1px solid var(--line);background:var(--glass)}
.btn--ghost:hover{background:var(--glass-2)}

/* ---------- controls ---------- */
/* center on the SCENE CONTENT column, not the raw viewport: the scene reserves
   extra left padding for the agent rail (12vw left vs 6vw right), so true-center
   would sit ~40–50px left of the content above it. Shift right by half that gap. */
.controls{position:fixed;bottom:32px;
  left:calc(50% + (clamp(20px,12vw,200px) - clamp(20px,6vw,120px)) / 2);
  transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;
  background:rgba(11,13,20,.7);border:1px solid var(--line);border-radius:99px;
  padding:8px;backdrop-filter:blur(14px);box-shadow:0 24px 60px -20px rgba(0,0,0,.85)}
.ctrl{display:flex;align-items:center;gap:11px;border:none;cursor:pointer;color:#06070b;
  background:linear-gradient(135deg,var(--c-user),var(--c-cs));border-radius:99px;
  padding:14px 38px 14px 30px;font-size:16px;font-weight:600;
  font-family:'Inter',sans-serif;box-shadow:0 12px 32px -10px var(--c-user);
  transition:transform .2s var(--ease),box-shadow .3s,filter .2s}
.ctrl:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 18px 40px -10px var(--c-cs)}
.ctrl svg{fill:currentColor;width:22px;height:22px}
.controls.is-playing .ctrl{display:none}

/* playing state — blue progress ring (loading icon) + small pause */
.player{display:none;align-items:center;gap:12px;padding:3px 12px 3px 6px}
.controls.is-playing .player{display:flex}
.ring{width:42px;height:42px;display:grid;place-items:center}
.ring svg{width:42px;height:42px;transform:rotate(-90deg)}
.ring__bg{fill:none;stroke:var(--line);stroke-width:3}
.ring__fg{fill:none;stroke:var(--c-user);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:107;stroke-dashoffset:107;transition:stroke-dashoffset .12s linear;
  filter:drop-shadow(0 0 5px var(--c-user))}
.pausebtn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);cursor:pointer;
  display:grid;place-items:center;color:var(--ink);background:var(--glass-2);
  transition:background .2s,transform .2s}
.pausebtn:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.pausebtn svg{fill:currentColor}
@media(max-width:520px){.ctrl span{display:none}.ctrl{padding:14px}}

/* ---------- end ---------- */
.end{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-align:center;background:linear-gradient(to bottom,var(--bg),#04050a);padding:60px 20px}
.end p{color:var(--ink-dim);font-size:16px}
.end__small{color:var(--ink-faint)!important;font-size:13px!important;font-family:'JetBrains Mono',monospace}

/* ============================================================
   SECTION VISUALS — logo tiles, IG post, browser frame
   Reveal as single units via the shared SEQ engine.
   ============================================================ */
.brandshow,.post,.chips,.browser{opacity:0;transform:translateY(10px) scale(.99);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.brandshow.is-in,.post.is-in,.chips.is-in,.browser.is-in{opacity:1;transform:none}

/* design — logo concept tiles + palette */
.brandshow{display:flex;flex-direction:column;gap:11px;margin:2px 0}
.logos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.logo-tile{aspect-ratio:16/10;display:grid;place-items:center;border-radius:12px;
  background:var(--glass);border:1px solid var(--line);color:var(--ink);overflow:hidden}
.logo-tile b{font-family:'Inter',sans-serif;font-weight:800;font-size:30px;letter-spacing:-.02em;color:var(--c-design)}
.logo-tile--word{font-family:'JetBrains Mono',monospace;font-weight:600;letter-spacing:.34em;font-size:14px;color:var(--ink)}
.logo-serif{font-family:Georgia,'Times New Roman',serif;font-size:30px;font-style:italic;color:var(--ink)}
.palette{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.palette span{height:26px;border-radius:7px;border:1px solid var(--line)}

/* marketing — instagram post + channel chips */
.post{max-width:300px;margin:2px auto 0;background:var(--glass-2);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;backdrop-filter:blur(8px)}
.post__top{display:flex;align-items:center;gap:9px;padding:10px 12px;font-size:13px;font-weight:600}
.post__ava{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--c-mkt),var(--c-fin));flex:0 0 auto}
.post__name{flex:1}
.post__more{color:var(--ink-faint);letter-spacing:1px}
.post__img{aspect-ratio:1;background:
  radial-gradient(120% 100% at 50% 18%,rgba(202,168,106,.42),transparent 60%),
  linear-gradient(160deg,#3a2f22,#15110c)}
.post__img img{width:100%;height:100%;object-fit:cover;display:block}
.post__actions{display:flex;gap:15px;padding:10px 13px 3px;font-size:16px}
.post__cap{padding:2px 13px 13px;font-size:12.5px;color:var(--ink-dim);line-height:1.5}
.post__cap b{color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:2px}
.chips span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-dim);
  background:var(--glass);border:1px solid var(--line);border-radius:99px;padding:5px 11px}

/* engineering — deployed storefront in a browser frame */
.browser{max-width:460px;margin:2px 0 0;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:var(--glass-2);box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.browser__bar{display:flex;align-items:center;gap:7px;padding:9px 12px;background:var(--glass)}
.browser__bar .dot{width:10px;height:10px;border-radius:50%}
.browser__bar .dot.r{background:#ff5f57}.browser__bar .dot.y{background:#febc2e}.browser__bar .dot.g{background:#28c840}
.browser__url{margin-left:8px;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink-faint);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;padding:3px 11px}
.browser__view{position:relative;aspect-ratio:16/9;
  background:radial-gradient(120% 100% at 72% 28%,rgba(202,168,106,.4),transparent 60%),linear-gradient(160deg,#2a241c,#13100c)}
.browser__view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.browser__view::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(16,12,8,.6),rgba(16,12,8,.15) 55%,transparent 75%)}
.browser__overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:9px;padding:0 30px}
.browser__brand{font-family:'JetBrains Mono',monospace;letter-spacing:.32em;font-size:12px;color:#fff;opacity:.92}
.browser__h{font-size:26px;font-weight:700;color:#fff;letter-spacing:-.01em;max-width:62%;line-height:1.1}
.browser__cta{align-self:flex-start;font-size:12px;font-weight:600;color:#1a1208;background:#f6efdf;padding:8px 15px;border-radius:99px}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .bg-video{display:none}
  *{transition-duration:.001s!important;animation:none!important}
}