:root {
    --brand-900:#2E0B63; --brand-800:#4C1D95; --brand-700:#5B21B6;
    --brand-600:#6D28D9; --brand-500:#7C3AED; --brand-400:#8B5CF6;
    --brand-100:#EDE9FE; --brand-50:#F7F5FE;
    --ink:#1B1726; --muted:#645C7C; --line:#E7E2F3; --panel:#FFFFFF; --bg:#FBFAFE;
    --ok:#0F9D6E; --radius:14px;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --ink:#EDEAF5; --muted:#A79FBE; --line:#2B2542; --panel:#181428; --bg:#110E1D;
      --brand-100:#2A1B52; --brand-50:#1C1533;
    }
  }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body {
    margin:0; background:var(--bg); color:var(--ink);
    font:16px/1.65 -apple-system,"Segoe UI",Roboto,Helvetica,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .wrap { max-width:1120px; margin:0 auto; padding:0 24px; }
  a { color:var(--brand-500); }
  h1,h2,h3 { line-height:1.25; margin:0; }
  img { max-width:100%; height:auto; display:block; }

  /* ---------- nav ---------- */
  nav {
    position:sticky; top:0; z-index:20; backdrop-filter:blur(10px);
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    border-bottom:1px solid var(--line);
  }
  nav .wrap { display:flex; align-items:center; gap:26px; height:88px; }
  nav .logo { height:72px; width:auto; }
  nav .links { display:flex; gap:22px; margin-left:auto; align-items:center; }
  nav .links a { color:var(--muted); text-decoration:none; font-size:14.5px; font-weight:550; }
  nav .links a:hover { color:var(--ink); }
  .btn {
    display:inline-block; padding:11px 22px; border-radius:10px; font-weight:600;
    font-size:15px; text-decoration:none; border:1px solid transparent; cursor:pointer;
  }
  .btn.primary { background:var(--brand-600); color:#fff; }
  .btn.primary:hover { background:var(--brand-500); }
  .btn.ghost { border-color:var(--line); color:var(--ink); }
  .btn.ghost:hover { border-color:var(--brand-400); }
  .btn.light { background:#fff; color:var(--brand-800); }

  /* ---------- hero ---------- */
  .hero {
    background:linear-gradient(157deg,var(--brand-900) 0%,var(--brand-700) 48%,var(--brand-500) 100%);
    color:#fff; padding:78px 0 96px; position:relative; overflow:hidden;
  }
  .hero::after {
    content:""; position:absolute; inset:auto -10% -60% 40%; height:340px;
    background:radial-gradient(closest-side,rgba(255,255,255,.16),transparent);
  }
  .hero .wrap { position:relative; z-index:1; }
  .hero h1 { font-size:clamp(30px,5vw,50px); letter-spacing:-.02em; max-width:16ch; }
  .hero p.lede { font-size:clamp(16px,2vw,19px); opacity:.92; max-width:56ch; margin:18px 0 30px; }
  .hero .cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
  .hero .note { font-size:13.5px; opacity:.8; margin-top:16px; }
  .shot { margin-top:52px; border-radius:var(--radius); overflow:hidden;
          box-shadow:0 30px 70px rgba(20,8,50,.45); border:1px solid rgba(255,255,255,.14); }

  /* ---------- click-to-play YouTube ---------- */
  .yt { position:relative; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:#000; cursor:pointer;
        box-shadow:0 18px 46px rgba(20,8,50,.25); border:1px solid var(--line); }
  .yt img { width:100%; height:100%; object-fit:cover; display:block; opacity:.92; transition:opacity .2s, transform .4s; }
  .yt:hover img { opacity:1; transform:scale(1.02); }
  .yt .play { position:absolute; inset:0; display:grid; place-items:center; }
  .yt .play span { width:74px; height:74px; border-radius:50%; background:var(--brand-600); display:grid; place-items:center;
                   box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .2s, background .2s; }
  .yt:hover .play span { transform:scale(1.08); background:var(--brand-500); }
  .yt .play svg { width:28px; height:28px; margin-left:4px; fill:#fff; }
  .yt .cap { position:absolute; left:0; right:0; bottom:0; padding:38px 16px 12px; color:#fff; font-size:14px; font-weight:600;
             background:linear-gradient(transparent, rgba(0,0,0,.65)); }
  .yt iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
  .hero .yt { margin-top:52px; border-color:rgba(255,255,255,.14); box-shadow:0 30px 70px rgba(20,8,50,.45); }
  .yt-more { text-align:center; margin-top:22px; font-size:14.5px; color:var(--muted); }

  /* ---------- sections ---------- */
  section { padding:78px 0; }
  .eyebrow { color:var(--brand-500); font-weight:700; font-size:13px;
             letter-spacing:.09em; text-transform:uppercase; margin-bottom:10px; }
  section h2 { font-size:clamp(24px,3.4vw,33px); letter-spacing:-.015em; }
  section .lede { color:var(--muted); max-width:62ch; margin:12px 0 0; }

  .grid { display:grid; gap:20px; margin-top:38px; }
  .g3 { grid-template-columns:repeat(3,1fr); }
  .g2 { grid-template-columns:repeat(2,1fr); }
  .card {
    background:var(--panel); border:1px solid var(--line);
    border-radius:var(--radius); padding:24px;
  }
  .card h3 { font-size:17px; margin-bottom:7px; }
  .card p { color:var(--muted); margin:0; font-size:14.5px; }
  .ico {
    width:38px; height:38px; border-radius:10px; background:var(--brand-100);
    color:var(--brand-600); display:grid; place-items:center; margin-bottom:14px;
    font-size:18px; font-weight:700;
  }

  .split { display:grid; grid-template-columns:1fr 1.15fr; gap:44px; align-items:center; }
  .split.flip > div:first-child { order:2; }
  .split img { border-radius:12px; border:1px solid var(--line);
               box-shadow:0 16px 44px rgba(27,23,38,.13); }
  .split h3 { font-size:22px; margin-bottom:10px; }
  .split p { color:var(--muted); margin:0 0 10px; }
  .ticks { list-style:none; padding:0; margin:16px 0 0; }
  .ticks li { padding-left:26px; position:relative; margin:7px 0; color:var(--muted); font-size:14.5px; }
  .ticks li::before {
    content:"✓"; position:absolute; left:0; top:0; color:var(--ok); font-weight:700;
  }

  /* ---------- pricing ---------- */
  .pricing { background:var(--brand-50); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .plans { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:40px; align-items:stretch; }
  .plan {
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:30px 26px; display:flex; flex-direction:column;
  }
  .plan.featured {
    border-color:var(--brand-500); box-shadow:0 18px 46px rgba(109,40,217,.16);
    position:relative;
  }
  .plan.featured::before {
    content:"Most popular"; position:absolute; top:-12px; left:26px;
    background:var(--brand-600); color:#fff; font-size:11.5px; font-weight:700;
    letter-spacing:.05em; text-transform:uppercase; padding:4px 11px; border-radius:99px;
  }
  .plan h3 { font-size:19px; }
  .plan .who { color:var(--muted); font-size:14px; margin:6px 0 20px; min-height:42px; }
  .price { display:flex; align-items:baseline; gap:6px; margin-bottom:22px; }
  .price .amount { font-size:40px; font-weight:750; letter-spacing:-.02em; }
  .price .per { color:var(--muted); font-size:14px; }
  .plan ul { list-style:none; padding:0; margin:0 0 26px; }
  .plan li { padding-left:24px; position:relative; margin:9px 0; font-size:14.5px; }
  .plan li::before { content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:700; }
  .plan li.off { color:var(--muted); }
  .plan li.off::before { content:"—"; color:var(--line); }
  .plan .btn { margin-top:auto; text-align:center; }

  /* ---------- faq / footer ---------- */
  details {
    background:var(--panel); border:1px solid var(--line); border-radius:12px;
    padding:16px 20px; margin-bottom:12px;
  }
  details summary { cursor:pointer; font-weight:600; font-size:15.5px; }
  details p { color:var(--muted); margin:10px 0 0; font-size:14.5px; }
  .disclaimer {
    background:var(--panel); border:1px solid var(--line);
    border-left:3px solid var(--brand-500); border-radius:0 12px 12px 0;
    padding:20px 24px; margin-top:34px;
  }
  .disclaimer p { color:var(--muted); font-size:14px; margin:8px 0 0; }
  .disclaimer p:first-of-type { margin-top:0; }

  footer { background:var(--brand-900); color:#CFC6EA; padding:52px 0 34px; }
  footer .wrap { display:flex; gap:34px; flex-wrap:wrap; justify-content:space-between; }
  footer img { height:64px; width:auto; margin-bottom:14px; }
  footer a { color:#fff; }
  footer .small { font-size:13px; opacity:.72; margin-top:26px; line-height:1.7; }

  @media (max-width:900px) {
    .g3,.g2,.plans { grid-template-columns:1fr; }
    .split { grid-template-columns:1fr; gap:26px; }
    .split.flip > div:first-child { order:0; }
    nav .links a:not(.btn) { display:none; }
  }

  /* language switch + footer columns + guide pages */
  nav .langs { display:inline-flex; gap:2px; border:1px solid var(--line); border-radius:999px; padding:2px; }
  nav .langs a { font-size:12.5px; font-weight:700; padding:4px 9px; border-radius:999px; color:var(--muted); }
  nav .langs a[aria-current] { background:var(--brand-600); color:#fff; }
  footer .wrap:first-child { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:34px; }
  @media (max-width:900px) { footer .wrap:first-child { grid-template-columns:1fr; } nav .langs { display:none; } }
  footer a { color:#E9E3FA; }
  .guide { max-width:760px; }
  .guide h1 { font-size:clamp(30px,4.5vw,44px); letter-spacing:-.02em; margin:0 0 14px; }
  .guide h2 { margin-top:44px; }
  .guide p, .guide li { font-size:17px; line-height:1.65; }
  .guide .lede { font-size:19px; color:var(--muted); }
  .guide .cta-box { background:var(--brand-50); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; margin:44px 0; }
  .guide .cta-box h3 { margin-top:0; }
  .guide table { width:100%; border-collapse:collapse; font-size:15.5px; margin:18px 0; }
  .guide th, .guide td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
  .guide th { color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.5px; }
  .crumbs { font-size:14px; color:var(--muted); margin:0 0 22px; }
  .crumbs a { color:var(--muted); }