html[data-mat=light]{--bg:#e6e9ef;--sd:#c2c8d3;--sl:#fff;--ink:#20242c;--mute:#4f5664;--line:rgba(32,36,44,.1);--accent:#b52d19}
html[data-mat=dark]{--bg:#26292e;--sd:#191b1f;--sl:#33373e;--ink:#eef0f3;--mute:#b6bbc4;--line:rgba(255,255,255,.08);--accent:#ffb4a6}
:root{
  --sig:#b52d19;--sig-down:#9c2412;
  --up:9px 9px 18px var(--sd),-9px -9px 18px var(--sl);
  --up-s:5px 5px 10px var(--sd),-5px -5px 10px var(--sl);
  --in-s:inset 3px 3px 6px var(--sd),inset -3px -3px 6px var(--sl);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 Archivo,Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.mono{display:block;font:500 12px/1.3 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
h1,h2,h3{margin:0;font-stretch:112%;font-weight:800;letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
h1{font-size:clamp(42px,7vw,88px);margin-top:14px}
h2{font-size:clamp(29px,4vw,44px)}
h3{font-size:20px;line-height:1.2;letter-spacing:-.01em}
section{padding:88px 0}
section.tight{padding-top:0}
.head{max-width:640px;margin-bottom:36px}
.head .mono{margin-bottom:12px}
.head p{color:var(--mute);margin:12px 0 0}

/* surfaces */
.plate{background:var(--bg);border-radius:26px;box-shadow:var(--up)}
.key{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border:0;border-radius:16px;cursor:pointer;text-decoration:none;font:700 15px Archivo,sans-serif;color:var(--ink);background:var(--bg);box-shadow:var(--up-s);transition:box-shadow .12s,color .12s}
.key:hover{color:var(--accent)}
.key:active{box-shadow:var(--in-s)}
.key.sig,.key.sig:hover{color:#fff;background:var(--sig)}
.key.sig:active{background:var(--sig-down);box-shadow:inset 3px 3px 6px rgba(0,0,0,.35)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* nav */
.nav{position:sticky;top:0;z-index:5;background:var(--bg);box-shadow:0 6px 14px -8px var(--sd)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.logo{font-weight:800;font-stretch:112%;letter-spacing:-.01em;text-decoration:none;line-height:1.1}
.links{display:flex;gap:26px}
.links a{text-decoration:none;font-weight:600;font-size:15px;color:var(--mute)}
.links a:hover{color:var(--ink)}
.navr{display:flex;align-items:center;gap:14px;flex:none}
.tgl{width:50px;padding:0}
html[data-mat=light] .sun,html[data-mat=dark] .moon{display:none}

/* hero */
.hero{padding:88px 0 80px}
.hero h1{max-width:13em}
.lead{font-size:20px;color:var(--mute);max-width:30em;margin:22px 0 30px}
.cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* reels */
.reel{display:block;width:100%;padding:12px;border:0;border-radius:26px;cursor:pointer;background:var(--bg);color:var(--ink);box-shadow:var(--up);transition:box-shadow .12s;font:inherit;text-align:left}
.reel:hover{box-shadow:var(--up-s)}
.reel:active{box-shadow:var(--in-s)}
.shot{position:relative;display:block;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,var(--sd),var(--bg))}
.shot img{width:100%;height:100%;object-fit:cover}
.play{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;background:var(--sig);box-shadow:0 3px 8px rgba(0,0,0,.35)}
.play:after{content:"";position:absolute;left:17px;top:13px;width:14px;height:18px;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%)}
.shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.reel.playing .play{display:none}
.cap{display:block;padding:12px 6px 4px;font-weight:700;font-size:16px}
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}

/* numbers */
.rail{padding:0}
.rail .plate{display:grid;grid-template-columns:repeat(3,1fr)}
.stat{padding:24px 26px}
.num{display:block;margin-bottom:8px;font:800 40px/1 Archivo,sans-serif;font-stretch:112%;letter-spacing:-.02em}

/* result */
.result{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;padding:30px 34px}
.result p{margin:8px 0 0;font-size:21px;line-height:1.35;font-weight:600}
.jump{display:flex;align-items:center;gap:14px}
.jump .num{margin:0;white-space:nowrap}
.arrow{font-size:24px;color:var(--accent);font-weight:700}

/* before and after */
.ba{display:grid;grid-template-columns:330px 1fr;gap:52px;align-items:center;padding:34px}
.ba h2{margin-top:12px}
.hint{color:var(--mute);margin:12px 0 0}
.wipe{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#000;box-shadow:var(--up-s)}
.wipe canvas{display:block;width:100%;height:100%}
.wipe video{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.wipe.native canvas{display:none}
.wipe.native video{top:0;left:0;width:var(--w);height:100%;max-width:none;opacity:1;object-fit:cover}
.pane{position:absolute;top:0;bottom:0;left:0;width:var(--cut,50%);overflow:hidden}
.line{position:absolute;top:0;bottom:0;left:var(--cut,50%);width:2px;margin-left:-1px;background:#fff}
.tag{position:absolute;top:12px;padding:5px 11px;border-radius:999px;font:700 12px/1.2 Archivo,sans-serif;color:#20242c;background:#e6e9ef}
.tag.left{left:12px}
.tag.right{right:12px}
.well{margin-top:16px;padding:8px 14px;border-radius:18px;background:var(--bg);box-shadow:var(--in-s)}
input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:36px;margin:0;background:transparent;cursor:ew-resize;touch-action:pan-y}
input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:5px;background:var(--bg);box-shadow:var(--in-s)}
input[type=range]::-moz-range-track{height:10px;border-radius:5px;background:var(--bg);box-shadow:var(--in-s)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-10px;border-radius:50%;background:var(--bg);box-shadow:var(--up-s)}
input[type=range]::-moz-range-thumb{width:30px;height:30px;border:0;border-radius:50%;background:var(--bg);box-shadow:var(--up-s)}
.ba-keys{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.ba-keys .key{padding:0 10px}
.list{margin:20px 0 0;padding:0;list-style:none}
.list li{padding:13px 0;border-top:1px solid var(--line)}
.list strong{display:block}
.list span{color:var(--mute);font-size:15px}

/* grids */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.item{padding:26px}
.item .mono{margin-bottom:26px}
.item p{color:var(--mute);margin:10px 0 0;font-size:16px}
.q{margin:0;padding:28px;font-size:20px;line-height:1.35;font-weight:600}

/* about */
.about{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:center;padding:30px 34px}
.portrait{aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--bg);box-shadow:var(--in-s)}
.about h2{margin-top:12px}
.about p{color:var(--mute);margin:14px 0 0;max-width:34em}

/* pricing */
.pricing{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:32px 34px}
.pricing h2{margin-top:12px}
.pricing p{color:var(--mute);margin:10px 0 0}
.pricing .key{flex:none}

/* faq */
.faq{margin-bottom:18px;border-radius:20px;background:var(--bg);box-shadow:var(--up-s)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:20px 24px;border:0;border-radius:20px;background:none;color:var(--ink);cursor:pointer;text-align:left;font:700 19px/1.3 Archivo,sans-serif}
.faq-q svg{flex:none;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.faq.open .faq-q svg{transform:rotate(180deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.22,1,.36,1)}
.faq.open .faq-a{grid-template-rows:1fr}
.faq-a>div{min-height:0;overflow:hidden;visibility:hidden;opacity:0;transition:opacity .25s ease,visibility .3s}
.faq.open .faq-a>div{visibility:visible;opacity:1}
.faq-a p{color:var(--mute);margin:0;padding:0 24px 20px;max-width:42em}

/* closing */
.close{padding:56px 40px;text-align:center}
.close p{color:var(--mute);margin:16px auto 28px;max-width:30em}
.close .cta{justify-content:center}
footer{padding:0 0 44px;color:var(--mute);font-size:15px}

@media (max-width:920px){
  .about,.ba{grid-template-columns:1fr}
  .ba-col{max-width:330px;width:100%;margin:0 auto}
  .work{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:1fr}
  .result{grid-template-columns:1fr;gap:20px}
  .links{display:none}
  section{padding:64px 0}
  .portrait{max-width:240px;margin:0 auto;width:100%}
  .pricing{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .work{gap:14px}
  .reel{padding:8px;border-radius:20px}
  .work .play{width:36px;height:36px;right:8px;bottom:8px}
  .work .play:after{left:14px;top:10px;width:12px;height:16px}
  .cap{font-size:15px;line-height:1.25}
  .rail .plate{grid-template-columns:1fr}
  .stat{padding:18px 22px 8px}
  .stat:last-child{padding-bottom:18px}
  .logo{max-width:6.5em}
  .nav .key{padding:0 16px}
  .navr{gap:10px}
  .tgl.key{padding:0}
  .num{font-size:34px}
  .result,.about,.pricing,.ba{padding:24px 20px}
  .close{padding:40px 20px}
  .close .key{width:100%}
  .jump{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.key,.reel,.faq-a,.faq-a>div,.faq-q svg{transition:none}}