body{background-color:var(--bg);background-image:var(--hero-dots);background-size:var(--hero-dot-size)}
.hero{
  position:relative;isolation:isolate;min-height:100dvh;padding:128px 24px var(--section-gap);
  overflow:hidden;
}
.hero-orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(6px);pointer-events:none;opacity:.5}
.hero-orb--blue{width:220px;height:220px;top:170px;left:-130px;background:radial-gradient(circle,#bdd7ff,transparent 68%)}
.hero-orb--silver{width:260px;height:260px;top:310px;right:-150px;background:radial-gradient(circle,#dddde2,transparent 68%)}
.hero-copy{position:relative;z-index:2;text-align:center;max-width:760px;margin:0 auto}
.hero-kicker{display:inline-flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.1em;color:var(--muted);margin-bottom:20px}
.hero-kicker i,.window-live i,.video-readout i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--rec);box-shadow:0 0 8px rgba(255,59,48,.65)}
.hero h1{font-family:var(--brand);font-size:clamp(64px,9vw,116px);font-weight:500;line-height:.86;letter-spacing:-.045em;text-wrap:balance}
.tagline{margin-top:23px;font-size:clamp(20px,2.5vw,28px);font-weight:500;letter-spacing:-.025em;text-wrap:balance}
.hero-note{max-width:520px;margin:10px auto 0;color:var(--muted);font-size:15px;text-wrap:pretty}
.hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:26px}
.demo-stage{position:relative;z-index:3;max-width:var(--maxw);margin:94px auto 0}
.demo-intro{display:flex;align-items:end;justify-content:space-between;gap:40px;margin:0 auto 24px;max-width:1080px}
.demo-intro h2{font-family:var(--disp);font-size:clamp(30px,4vw,48px);font-weight:500;line-height:1;letter-spacing:-.035em;margin-top:8px}
.demo-intro p{max-width:390px;color:var(--muted);font-size:15px;line-height:1.55;text-wrap:pretty}
.demo-workspace{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);gap:20px;align-items:stretch;max-width:1080px;margin:0 auto}
.window-bar{height:34px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 12px;border-bottom:1px solid rgba(0,0,0,.17);background:linear-gradient(90deg,#d6d5d7,#f0f0f0 50%,#d6d5d7);font-size:11px;color:var(--muted)}
.window-title{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.window-live{flex:none;display:flex;align-items:center;gap:6px;font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.media-window{overflow:hidden;border:1px solid #111;border-radius:11px;background:var(--chrome);box-shadow:var(--shadow)}
.video-trigger{position:relative;width:100%;height:100%;min-height:390px;background:#d9d9d9;cursor:pointer;overflow:hidden}
.video-trigger video{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;background:#222}
/* Poster held over the video during a source swap, then faded out once the new
   clip actually fires "playing" — hides Safari's frozen-frame/gray stall. */
.video-poster{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity .3s ease;pointer-events:none}
.video-trigger.is-playing .video-poster{opacity:0}
.video-wash{position:absolute;z-index:2;inset:0;background:linear-gradient(transparent 65%,rgba(0,0,0,.25));pointer-events:none}
.video-play-fallback{position:absolute;z-index:4;left:50%;top:50%;display:flex;align-items:center;gap:7px;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(15,15,17,.76);box-shadow:0 8px 28px rgba(0,0,0,.2);color:#fff;padding:8px 12px;font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:0;transition:opacity .2s ease;pointer-events:none}
.video-play-fallback i{width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:7px solid currentColor}
.video-trigger.is-play-blocked .video-play-fallback{opacity:1}
.video-readout{position:absolute;z-index:3;left:14px;bottom:13px;display:flex;align-items:center;gap:7px;border-radius:5px;background:rgba(15,15,17,.68);color:#fff;padding:5px 8px;font-size:10px;letter-spacing:.06em}
@media(prefers-reduced-motion:reduce){.video-poster,.video-play-fallback{transition:none}}
@media(max-width:900px){
  .hero{padding:110px 20px 88px}
  .demo-stage{margin-top:74px}
  .demo-intro{display:block;text-align:center}
  .demo-intro p{margin:12px auto 0}
  .demo-workspace{grid-template-columns:1fr;max-width:720px}
  .video-trigger{min-height:clamp(260px,55vw,405px)}
}
@media(max-width:600px){
  body{background-size:20px 20px}
  .hero{padding:98px 14px var(--section-gap)}
  .hero h1{font-size:clamp(58px,19vw,82px)}
  .tagline{font-size:20px;max-width:330px;margin:18px auto 0}
  .hero-note{font-size:14px;max-width:310px}
  .hero-actions{margin-top:22px}
  .demo-stage{margin-top:var(--section-gap)}
  .demo-intro{padding:0 8px;margin-bottom:18px}
  .demo-intro h2{font-size:34px}
  .demo-workspace{gap:0}
  .demo-workspace .media-window{border-radius:10px 10px 0 0;box-shadow:none}
  .window-title{max-width:180px}
  .window-live{display:none}
  .video-trigger{min-height:190px}
}
/* Mobile perf (≤1024px): drop the blurred hero orbs' filter pass; keep a soft
   presence via reduced opacity instead of a live GPU blur. */
@media(max-width:1024px){
  .hero-orb{filter:none;opacity:.45}
}
/* Safari perf: drop the orbs' live blur pass (same as mobile). */
html.is-safari .hero-orb{filter:none;opacity:.45}