/* VoxForge site (plan 26 W4) -- one stylesheet, dark by default, light when the visitor prefers it */
:root {
  --bg:#07080c; --bg2:#0d0f16; --ink:#f2f4f8; --muted:#9aa3b5; --line:rgba(255,255,255,.08);
  --card:rgba(255,255,255,.035); --card2:rgba(255,255,255,.06);
  --a1:#ff4d8d; --a2:#ff8a3d; --a3:#7c5cff;
  --grad:linear-gradient(100deg,var(--a1),var(--a2));
  --r:16px; --shadow:0 20px 60px rgba(0,0,0,.45);
}
@media (prefers-color-scheme: light) {
  :root { --bg:#fbfaf7; --bg2:#f2efe8; --ink:#141725; --muted:#596173; --line:rgba(20,23,37,.1);
          --card:#fff; --card2:#fff; --shadow:0 20px 50px rgba(20,23,37,.12); }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink);
       font:16px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
       -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img, video { max-width:100%; display:block; }
.wrap { max-width:1180px; margin:0 auto; padding:0 20px; }
.narrow { max-width:820px; }
.center { text-align:center; }
.muted { color:var(--muted); }
.small { font-size:14px; }

/* nav */
.nav { position:sticky; top:0; z-index:50; backdrop-filter:saturate(160%) blur(14px);
       background:color-mix(in srgb, var(--bg) 72%, transparent); border-bottom:1px solid var(--line); }
.nav-in { display:flex; align-items:center; gap:28px; height:68px; }
.logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; letter-spacing:-.2px; }
.mark { width:28px; height:28px; border-radius:8px; background:var(--grad);
        box-shadow:0 0 0 1px rgba(255,255,255,.15) inset, 0 6px 24px rgba(255,77,141,.45); position:relative; }
.mark::after { content:""; position:absolute; inset:8px 7px 8px 10px; background:#fff; clip-path:polygon(0 0,100% 50%,0 100%); border-radius:2px; }
.links { display:flex; gap:24px; margin-left:12px; }
.links a { color:var(--muted); font-size:15px; transition:color .2s; }
.links a:hover { color:var(--ink); }
.nav-cta { margin-left:auto; display:flex; gap:10px; }
.burger { display:none; margin-left:auto; background:none; border:0; padding:10px; cursor:pointer; }
.burger span { display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px; }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; border-radius:12px;
       font-weight:600; font-size:15px; border:1px solid var(--line); background:var(--card); transition:transform .15s, box-shadow .2s, background .2s; }
.btn:hover { transform:translateY(-1px); background:var(--card2); }
.btn.primary { background:var(--grad); border:0; color:#fff; box-shadow:0 10px 30px rgba(255,77,141,.35); }
.btn.primary:hover { box-shadow:0 14px 38px rgba(255,77,141,.5); }
.btn.lg { padding:14px 24px; font-size:16px; border-radius:14px; }

/* hero */
.hero { position:relative; padding:90px 0 70px; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px, transparent 1px),
               linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:56px 56px;
               mask-image:radial-gradient(ellipse at 50% 20%, #000 20%, transparent 70%); pointer-events:none; }
.glow { position:absolute; width:620px; height:620px; border-radius:50%; filter:blur(120px); opacity:.35; pointer-events:none; }
.g1 { background:var(--a1); top:-260px; left:-120px; }
.g2 { background:var(--a3); top:-120px; right:-220px; opacity:.28; }
.hero-in { position:relative; display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; }
.pill { display:inline-block; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card);
        font-size:13px; color:var(--muted); }
h1 { font-size:clamp(40px, 6vw, 72px); line-height:1.02; letter-spacing:-2px; margin:18px 0 20px; }
.grad { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { font-size:19px; color:var(--muted); max-width:560px; margin:0 0 28px; }
.cta-row { display:flex; gap:12px; flex-wrap:wrap; }
.chips { display:flex; gap:10px; flex-wrap:wrap; list-style:none; padding:0; margin:28px 0 0; }
.chips li { font-size:13px; color:var(--muted); padding:6px 12px; border-radius:999px; background:var(--card); border:1px solid var(--line); }
.chips li::before { content:"✓ "; color:var(--a2); font-weight:700; }
.frame { border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#000; box-shadow:var(--shadow), 0 0 80px rgba(124,92,255,.18);
         transform:perspective(1400px) rotateY(-6deg) rotateX(3deg); transition:transform .6s; }
.frame:hover { transform:none; }
.frame-bar { display:flex; align-items:center; gap:6px; padding:10px 14px; background:#11131b; font-size:12px; color:#8a92a6; }
.frame-bar i { width:10px; height:10px; border-radius:50%; background:#2a2e3b; }
.frame-bar i:nth-child(1) { background:#ff5f57; } .frame-bar i:nth-child(2) { background:#febc2e; } .frame-bar i:nth-child(3) { background:#28c840; }
.frame-bar span { margin-left:10px; }
.frame video { width:100%; aspect-ratio:16/9; object-fit:cover; }

/* stats */
.stats { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg2); }
.stat-row { display:grid; grid-template-columns:repeat(4,1fr); }
.stat-row div { padding:28px 16px; text-align:center; border-right:1px solid var(--line); }
.stat-row div:last-child { border-right:0; }
.stat-row b { display:block; font-size:28px; letter-spacing:-.5px; }
.stat-row span { color:var(--muted); font-size:14px; }

/* sections */
.block { padding:96px 0; }
.block.alt { background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
h2 { font-size:clamp(30px, 4vw, 46px); letter-spacing:-1px; line-height:1.1; margin:0 0 12px; text-align:center; }
.sub { color:var(--muted); font-size:18px; text-align:center; max-width:680px; margin:0 auto 48px; }
.sub.left, .split h2 { text-align:left; margin-left:0; }
.cards { display:grid; gap:20px; }
.cards.three { grid-template-columns:repeat(3,1fr); }
.cards.two { grid-template-columns:repeat(2,1fr); margin-top:20px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:28px; transition:transform .2s, border-color .2s; }
.card:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--a1) 40%, var(--line)); }
.card h3 { margin:12px 0 8px; font-size:20px; }
.card p { color:var(--muted); margin:0; }
.ico { font-size:28px; width:52px; height:52px; display:grid; place-items:center; border-radius:14px; background:var(--card2); border:1px solid var(--line); }
.features { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.feat { background:var(--bg2); padding:28px; }
.block.alt .feat { background:var(--bg); }
.feat h3 { margin:0 0 8px; font-size:17px; }
.feat h3::before { content:""; display:block; width:28px; height:3px; border-radius:3px; background:var(--grad); margin-bottom:14px; }
.feat p { margin:0; color:var(--muted); font-size:15px; }
.shot { margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--card); }
.shot img { width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .5s; }
.shot:hover img { transform:scale(1.04); }
.shot figcaption { padding:16px 18px; display:grid; gap:2px; }
.shot figcaption span { color:var(--muted); font-size:14px; }
.steps { list-style:none; padding:0; margin:40px 0 0; display:grid; grid-template-columns:repeat(5,1fr); gap:16px; counter-reset:s; }
.steps li { position:relative; padding:24px 20px 22px; border-radius:var(--r); background:var(--card); border:1px solid var(--line); counter-increment:s; }
.steps li::before { content:"0" counter(s); font-weight:800; font-size:13px; letter-spacing:1px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.steps b { display:block; margin:8px 0 6px; font-size:17px; }
.steps span { color:var(--muted); font-size:14px; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.code { background:#0b0d14; border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow); overflow:auto; }
.code pre { margin:0; color:#d7dcff; font:14px/1.7 ui-monospace, "Cascadia Code", Consolas, monospace; }
.code .c { color:#6b7390; }
.ticks { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:12px; }
.ticks li::before { content:"✓"; color:var(--a2); font-weight:800; margin-right:10px; }

/* pricing */
.plans { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:28px; }
.plan { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:28px 24px; display:flex; flex-direction:column; gap:10px; }
.plan.hot { border-color:transparent; background:linear-gradient(var(--bg2),var(--bg2)) padding-box, var(--grad) border-box; border:1px solid transparent; position:relative; }
.plan.hot::after { content:"Most popular"; position:absolute; top:-12px; left:24px; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; background:var(--grad); color:#fff; }
.plan h3 { margin:0; font-size:18px; }
.plan .mins { font-size:38px; font-weight:800; letter-spacing:-1px; }
.plan .mins small { font-size:15px; color:var(--muted); font-weight:500; }
.plan .price { color:var(--muted); font-size:15px; }
.plan ul { list-style:none; padding:0; margin:6px 0 14px; display:grid; gap:6px; color:var(--muted); font-size:14px; flex:1; }
.plan ul li::before { content:"✓ "; color:var(--a2); }

/* faq, pages */
.faq { max-width:820px; }
details { border-bottom:1px solid var(--line); padding:18px 0; }
summary { cursor:pointer; font-weight:600; font-size:17px; list-style:none; display:flex; justify-content:space-between; }
summary::after { content:"+"; color:var(--muted); font-size:22px; line-height:1; }
details[open] summary::after { content:"–"; }
details p { color:var(--muted); margin:10px 0 0; }
.page-head { padding:80px 0 30px; position:relative; }
.page-head h1 { font-size:clamp(36px, 5vw, 56px); }
.big-card { padding:36px; text-align:center; margin-bottom:8px; }
.auth { text-align:center; padding:48px 36px; }
.auth h1 { font-size:34px; letter-spacing:-.8px; margin-top:0; }
.prose h1 { font-size:40px; }
.final { padding:110px 0; text-align:center; background:radial-gradient(ellipse at 50% 100%, rgba(255,77,141,.18), transparent 60%); }

/* footer */
.foot { border-top:1px solid var(--line); padding:56px 0 30px; }
.foot-in { display:grid; grid-template-columns:1.2fr 2fr; gap:40px; }
.foot-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.foot h4 { margin:0 0 12px; font-size:14px; }
.foot-cols a { display:block; color:var(--muted); font-size:14px; padding:4px 0; }
.foot-cols a:hover { color:var(--ink); }
.copy { margin-top:36px; }

/* reveal on scroll */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } .frame { transform:none; } }

/* responsive */
@media (max-width: 1020px) {
  .features { grid-template-columns:repeat(2,1fr); }
  .steps { grid-template-columns:repeat(2,1fr); }
  .plans { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 860px) {
  .links, .nav-cta { display:none; }
  .burger { display:block; }
  body.menu-open .links, body.menu-open .nav-cta { display:flex; position:absolute; left:0; right:0; flex-direction:column;
       background:var(--bg); padding:16px 20px; gap:14px; border-bottom:1px solid var(--line); margin:0; }
  body.menu-open .links { top:68px; } body.menu-open .nav-cta { top:auto; }
  .hero { padding:56px 0 40px; }
  .hero-in, .split { grid-template-columns:1fr; gap:32px; }
  .frame { transform:none; }
  .stat-row { grid-template-columns:repeat(2,1fr); }
  .stat-row div:nth-child(2) { border-right:0; }
  .stat-row div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .cards.three, .cards.two { grid-template-columns:1fr; }
  .block { padding:64px 0; }
  .foot-in { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .features, .steps, .plans { grid-template-columns:1fr; }
  .foot-cols { grid-template-columns:repeat(2,1fr); }
  h1 { letter-spacing:-1px; }
}