:root{--ink:#0f1419;--mute:#5b6570;--line:#e3e6ea;--soft:#f6f7f9;--ok:#1f9d80;--bad:#e5484d;--err:#c4262e;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
body{background:#fff;color:var(--ink);font:16px/1.5 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding-left:20px;padding-right:20px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

header{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:17px;letter-spacing:-.01em}
.brand svg{width:22px;height:22px}

/* Hero + form */
.hero{max-width:600px;padding-top:64px;padding-bottom:48px;text-align:center}
h1{font-size:clamp(36px,6vw,56px);line-height:1.05;letter-spacing:-.035em;font-weight:650}
.lede{margin:16px auto 0;max-width:30em;font-size:18px;color:var(--mute)}
form{margin-top:36px}
.label{font-size:13px;color:var(--mute);margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:block;padding:6px 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;cursor:pointer;user-select:none;transition:border-color .15s,background .15s}
.chip span:hover{border-color:#b9c0c7}
.chip input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--ok);outline-offset:2px}
.other{max-width:420px;margin:10px auto 0}
.field{display:flex;gap:8px;max-width:420px;margin:20px auto 0}
input[type=email],input[type=text]{flex:1;min-width:0;width:100%;height:44px;padding:0 14px;font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px}
input[type=email]:focus,input[type=text]:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(15,20,25,.08)}
button[type=submit]{height:44px;padding:0 18px;font:600 15px var(--font);color:#fff;background:var(--ink);border:0;border-radius:8px;cursor:pointer;white-space:nowrap}
button[type=submit]:hover{background:#2a3138}
button[type=submit]:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
button[disabled]{opacity:.6;cursor:wait}
.err{font-size:14px;color:var(--err);margin-top:8px}
.err:empty{display:none}
.fine{margin-top:10px;font-size:13px;color:var(--mute)}
.thanks{display:none;max-width:420px;margin:0 auto;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.thanks strong{font-size:18px}
.thanks p{margin-top:2px;color:var(--mute)}
.thanks:focus{outline:0}
form.done .body{display:none}
form.done .thanks{display:block}

/* Product film container */
.film-wrap{padding-bottom:64px}
.film{position:relative;aspect-ratio:16/9;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--soft)}
.film-toggle{position:absolute;right:12px;bottom:12px;width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:#fff;cursor:pointer;opacity:.75}
.film-toggle:hover,.film-toggle:focus-visible{opacity:1}
.film-toggle:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.film-toggle svg{width:12px;height:12px;fill:var(--ink)}

/* Product film stage: fixed 1280x720 canvas scaled to fit by film.js */
.stage{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;background:radial-gradient(900px 500px at 50% 40%,#fff,#f1f3f5);overflow:hidden;cursor:pointer}
.stage>*{position:absolute}
.f-intro{inset:0;display:grid;place-content:center;gap:10px;text-align:center;transition:opacity .4s}
.f-intro p{font-size:68px;font-weight:600;letter-spacing:-.035em;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.f-intro p.on{opacity:1;transform:none}
.f-intro p.past{opacity:.2;transform:none}
.stage:not([data-s="1"]) .f-intro{opacity:0}
.f-cap{left:0;right:0;top:38px;text-align:center;font-size:24px;color:var(--mute);letter-spacing:-.01em;opacity:0;transition:opacity .5s}
.f-cap.show{opacity:1}

.f-page{left:420px;top:100px;width:440px;height:540px;background:#fff;border:1px solid var(--line);border-radius:4px;padding:44px 48px;box-shadow:0 30px 70px rgba(16,24,40,.14);opacity:0;transform:translateY(46px);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1);overflow:visible}
.stage[data-s="2"] .f-page{opacity:1;transform:none}
.stage[data-s="3"] .f-page,.stage[data-s="4"] .f-page{opacity:1;transform:translateX(-240px)}
.stage[data-s="5"] .f-page{opacity:0;transform:translateX(-240px) scale(.97)}
.f-row{position:relative;height:var(--h);margin-top:var(--mt);width:calc(var(--w)*1%);transform:translateX(calc(var(--dx)*1px));background:var(--c);border-radius:2px;transition:all .6s cubic-bezier(.2,.8,.2,1) calc(var(--i)*30ms)}
.stage.fixed .f-row{height:var(--ch);margin-top:var(--cmt);width:calc(var(--cw)*1%);transform:none;background:var(--cc)}
.f-row::after{content:"";position:absolute;right:-30px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--bad);opacity:0;transition:opacity .3s calc(var(--i)*170ms),background .3s 0s}
.stage[data-s="3"] .f-row::after,.stage[data-s="4"] .f-row::after{opacity:1}
.stage[data-s="5"] .f-row::after{transition-delay:0s}
.stage.fixed .f-row::after{background:var(--ok)}
.f-scan{position:absolute;left:0;right:0;top:0;height:2px;background:var(--ok);box-shadow:0 0 22px 5px rgba(31,157,128,.3);opacity:0;pointer-events:none}
.stage[data-s="3"] .f-scan{animation:f-scan 2.4s linear .2s forwards}
@keyframes f-scan{0%{top:0;opacity:1}96%{opacity:1}100%{top:100%;opacity:0}}

.f-panel{left:660px;top:100px;width:400px;height:540px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;box-shadow:0 30px 70px rgba(16,24,40,.1);opacity:0;transform:translateX(60px);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.stage[data-s="3"] .f-panel,.stage[data-s="4"] .f-panel{opacity:1;transform:none}
.f-brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:-.01em}
.f-brand svg{width:22px;height:22px}
.f-pg{margin-top:6px;color:var(--mute);font-size:14px}
.f-big{margin-top:26px;display:flex;align-items:baseline;gap:12px}
.f-big b{font-size:96px;line-height:1;font-weight:600;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.f-big span{color:var(--mute);font-size:20px}
.f-rules{margin-top:26px;display:grid;gap:18px}
.f-rule{display:grid;grid-template-columns:1fr auto;gap:8px 12px;font-size:16px}
.f-rule i{grid-column:1/3;height:3px;background:#edf0f3;border-radius:2px;overflow:hidden;display:block}
.f-rule u{display:block;height:100%;width:0;background:var(--bad);transition:background .5s}
.f-rule em{font-style:normal;color:var(--mute);font-variant-numeric:tabular-nums}
.stage.fixed .f-rule u{background:var(--ok)}
.f-btn{position:absolute;left:28px;right:28px;bottom:28px;height:48px;border-radius:10px;background:var(--ok);color:#fff;font-weight:600;font-size:16px;display:grid;place-items:center;transition:transform .15s,background .3s,color .3s}
.f-btn.press{transform:scale(.96)}
.stage.fixed .f-btn{background:#e7f6f1;color:var(--ok)}
.f-cursor{left:0;top:0;width:22px;height:22px;opacity:0;transform:translate(1120px,690px);transition:transform .9s cubic-bezier(.3,.7,.2,1),opacity .3s;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.stage[data-s="4"] .f-cursor{opacity:1;transform:translate(868px,600px)}

.f-outro{inset:0;display:grid;place-content:center;justify-items:center;gap:20px;text-align:center;pointer-events:none}
.f-outro>*{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
.f-outro svg{width:84px;height:84px}
.f-name{font-size:88px;font-weight:650;letter-spacing:-.045em;line-height:1}
.f-outro p{font-size:28px;color:var(--mute);letter-spacing:-.01em}
.stage[data-s="5"] .f-outro>*{opacity:1;transform:none}
.stage[data-s="5"] .f-outro>:nth-child(2){transition-delay:.15s}
.stage[data-s="5"] .f-outro>:nth-child(3){transition-delay:.5s}
@media (prefers-reduced-motion:reduce){.f-scan{display:none}}

footer{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 24px;padding-top:20px;padding-bottom:32px;border-top:1px solid var(--line);font-size:13px;color:var(--mute)}
footer details{flex:1;min-width:200px;max-width:520px}
footer summary{cursor:pointer}
footer details p{margin-top:6px}

@media (max-width:480px){
  .hero{padding-top:40px}
  .field{flex-direction:column}
  button[type=submit]{width:100%}
}