*{box-sizing:border-box}
:root{
  --bg:oklch(98.5% 0.004 250);--s1:oklch(100% 0 0);--s2:oklch(97.5% 0.006 250);
  --s3:oklch(95% 0.008 250);--border:oklch(0% 0 0/0.08);--bstrong:oklch(0% 0 0/0.14);
  --text:oklch(21% 0.024 250);--muted:oklch(48% 0.016 250);--dim:oklch(64% 0.012 250);
  --accent:oklch(58% 0.185 258);--accent-soft:oklch(95% 0.03 258);
  --gold:oklch(78% 0.145 88);--talk:oklch(58% 0.16 150);--broll:oklch(60% 0.17 280);
  --other:oklch(64% 0.04 250);--radius:14px;
  --shadow:0 1px 2px oklch(20% 0.03 250/0.06),0 0 0 1px oklch(0% 0 0/0.02);
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:oklch(20% 0.018 260);--s1:oklch(24% 0.02 260);--s2:oklch(27% 0.022 260);
    --s3:oklch(31% 0.024 260);--border:oklch(100% 0 0/0.09);--bstrong:oklch(100% 0 0/0.16);
    --text:oklch(95% 0.01 260);--muted:oklch(70% 0.018 260);--dim:oklch(56% 0.016 260);
    --accent:oklch(68% 0.16 258);--accent-soft:oklch(34% 0.05 258);
    --shadow:0 1px 2px oklch(0% 0 0/0.4),0 0 0 1px oklch(100% 0 0/0.03);
  }
}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--text);font:14px/1.5 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
header{position:sticky;top:0;z-index:10;background:oklch(100% 0 0/0.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:14px 24px;display:flex;align-items:center;gap:14px}
@media(prefers-color-scheme:dark){header{background:oklch(24% 0.02 260/0.85)}}
header h1{font-size:15px;margin:0;font-weight:650;letter-spacing:-0.01em}
header .pill{font-size:11px;color:var(--muted);background:var(--s2);border:1px solid var(--border);padding:3px 9px;border-radius:999px}
header .pill.accent{color:var(--accent);background:var(--accent-soft);border-color:transparent;font-weight:600}
.wrap{max-width:1320px;margin:0 auto;padding:24px}

/* featured */
.featured{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:0;background:var(--s1);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.fv{padding:18px;background:var(--s1);border-right:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.fv video{width:100%;max-height:80vh;border-radius:12px;background:#000;aspect-ratio:9/16;object-fit:contain;display:block}
.fmeta{padding:24px 26px;overflow:auto}
.fmeta .scenes{font-size:11px;color:#fff;background:oklch(0% 0 0/0.6);padding:2px 9px;border-radius:999px;display:inline-block;margin-bottom:14px}
.fmeta h2{margin:0 0 4px;font-size:21px;font-weight:700;letter-spacing:-0.015em}
.fmeta .sub{color:var(--muted);font-size:13px;margin-bottom:18px}
.kv{display:flex;justify-content:space-between;font-size:12.5px;padding:7px 0;border-bottom:1px dashed var(--border)}
.kv span:first-child{color:var(--muted)}
.kv span:last-child{font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.btn{font:inherit;font-size:13px;font-weight:600;border:1px solid var(--bstrong);background:var(--s1);color:var(--text);padding:9px 15px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.btn:hover{background:var(--s2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:oklch(99% 0.004 258)}
.btn.primary:hover{filter:brightness(1.06)}

/* how it works strip */
.section-label{font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);margin:34px 0 14px}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{background:var(--s1);border:1px solid var(--border);border-radius:var(--radius);padding:16px 16px 18px;box-shadow:var(--shadow);position:relative;transition:transform .12s,box-shadow .12s}
.step:hover{transform:translateY(-2px);box-shadow:0 8px 24px oklch(20% 0.03 250/0.12)}
.step .n{font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-soft);width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.step .t{font-size:13.5px;font-weight:650;margin-bottom:5px;letter-spacing:-0.01em}
.step .d{font-size:12px;color:var(--muted);line-height:1.45}
.step .arrow{position:absolute;right:-12px;top:50%;transform:translateY(-50%);color:var(--dim);font-size:14px;z-index:1}
.step:last-child .arrow{display:none}

footer{max-width:1320px;margin:0 auto;padding:8px 24px 40px;color:var(--dim);font-size:12px}

@media(max-width:760px){
  .featured{grid-template-columns:1fr}
  .fv{border-right:none;border-bottom:1px solid var(--border)}
  .strip{grid-template-columns:1fr}
  .step .arrow{display:none}
  .wrap{padding:18px}
  header{padding:12px 16px}
}