:root {
    --ink: #0A0C08; --panel: #171A15; --line: #262A23; --text: #F1F4EC; --dim: #969E8E;
    --lime: #A3FF12; --lime-ink: #284600;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  html, body { margin: 0; background: var(--ink); color: var(--text); }
  body { font-family: Roboto, "Segoe UI", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.5; overflow-x: hidden; }
  a { color: inherit; }
  img, video { max-width: 100%; display: block; }
  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

  header { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; gap: 12px; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 21px; letter-spacing: -0.01em; }
  .brand img { width: 32px; height: 32px; border-radius: 9px; }
  .tiktok { font-size: 14px; color: var(--dim); text-decoration: none; white-space: nowrap; }
  .tiktok:hover { color: var(--text); }

  .hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 32px 0 56px; }
  h1 { font-size: clamp(44px, 7.5vw, 76px); line-height: .98; letter-spacing: -0.035em; font-weight: 900; margin: 0 0 18px; }
  h1 .lime { color: var(--lime); }
  .tag { font-size: 18px; color: var(--dim); margin: 0 0 28px; max-width: 460px; }
  form { display: flex; gap: 10px; max-width: 480px; }
  input[type=email] { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 15px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--text); outline: none; }
  input[type=email]:focus { border-color: var(--lime); }
  button { font: inherit; font-weight: 800; font-size: 16px; padding: 15px 22px; border-radius: 14px; border: 0; background: var(--lime); color: var(--lime-ink); cursor: pointer; white-space: nowrap; }
  button:disabled { opacity: .6; cursor: default; }
  .hp { position: absolute; left: -9999px; }
  .note { font-size: 13px; color: var(--dim); margin: 12px 0 0; max-width: 480px; }
  .msg { margin: 12px 0 0; font-weight: 700; min-height: 24px; }
  .msg.ok { color: var(--lime); }
  .msg.err { color: #FF7A6B; }

  /* The phone: a 9:16 box, so the clip can never be stretched. */
  .phone { justify-self: center; width: min(300px, 70vw); aspect-ratio: 9 / 16; border-radius: 30px; overflow: hidden; border: 1px solid var(--line); background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.65); }
  .phone video { width: 100%; height: 100%; object-fit: cover; }

  .points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-bottom: 56px; }
  .pt { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
  .pt h3 { margin: 0 0 6px; font-size: 17px; }
  .pt p { margin: 0; color: var(--dim); font-size: 15px; }
  .pt .n { color: var(--lime); font-weight: 900; font-size: 12px; letter-spacing: .12em; margin-bottom: 10px; }

  /* Carousel: scroll-snap, edge to edge on phones, arrows on desktop. */
  .demos { padding: 8px 0 56px; }
  .demos-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
  .demos h2, .how h2 { font-size: clamp(24px, 4vw, 30px); letter-spacing: -0.02em; margin: 0 0 6px; }
  .demos p { color: var(--dim); margin: 0; }
  .arrows { display: none; gap: 8px; }
  .arrows button { width: 42px; height: 42px; padding: 0; border-radius: 50%; background: var(--panel); color: var(--text); border: 1px solid var(--line); font-size: 20px; line-height: 1; }
  .arrows button:hover { border-color: var(--lime); }
  .track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 20px 12px; margin: 0 -20px; -webkit-overflow-scrolling: touch; }
  .track::-webkit-scrollbar { display: none; }
  .card { flex: 0 0 auto; width: min(66vw, 250px); scroll-snap-align: center; margin: 0; }
  .card .v { aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: #000; position: relative; }
  .card video { width: 100%; height: 100%; object-fit: cover; }
  .card .cnt { display: inline-block; vertical-align: middle; margin-right: 6px; background: rgba(10,12,8,.85); color: var(--lime); font-weight: 900; font-size: 13px; padding: 5px 10px; border-radius: 999px; letter-spacing: .04em; }
  .card figcaption { font-size: 14px; color: var(--dim); margin: 10px 4px 0; }
  .card figcaption b { color: var(--text); display: block; font-size: 15px; }

  .how { border-top: 1px solid var(--line); padding: 44px 0 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
  .how p { color: var(--dim); margin: 0 0 12px; }
  .ex { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .ex span { font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); }

  .cta2 { border-top: 1px solid var(--line); padding: 44px 0; text-align: center; }
  .cta2 h2 { font-size: clamp(26px, 5vw, 38px); letter-spacing: -0.03em; margin: 0 0 16px; }
  .cta2 form { margin: 0 auto; }

  footer { border-top: 1px solid var(--line); padding: 24px 0 calc(40px + env(safe-area-inset-bottom)); color: var(--dim); font-size: 13px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

  @media (min-width: 821px) { .arrows { display: flex; } }
  @media (max-width: 820px) {
    .hero { grid-template-columns: 1fr; gap: 28px; padding-top: 12px; }
    .phone { order: -1; width: min(220px, 58vw); }
    .points, .how { grid-template-columns: 1fr; }
    form { flex-direction: column; }
    button { width: 100%; }
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  /* Read-more grid on the home page. */
  .more { border-top: 1px solid var(--line); padding: 44px 0 56px; }
  .more h2 { font-size: clamp(24px, 4vw, 30px); letter-spacing: -0.02em; margin: 0 0 18px; }
  .links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .links a { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px; text-decoration: none; }
  .links a:hover { border-color: var(--lime); }
  .links b { display: block; font-size: 16px; margin-bottom: 6px; }
  .links span { color: var(--dim); font-size: 14px; }

  /* Guide pages: one column of prose next to a phone, then FAQ. */
  .crumbs { font-size: 13px; color: var(--dim); margin: 4px 0 18px; }
  .crumbs a { text-decoration: none; }
  .crumbs a:hover { color: var(--text); }
  .guide { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; padding: 8px 0 40px; }
  .guide h1 { font-size: clamp(34px, 5.5vw, 56px); line-height: 1.02; margin: 0 0 16px; }
  .guide .lead { font-size: 18px; color: var(--dim); margin: 0 0 24px; }
  .guide .phone { position: sticky; top: 24px; }
  .prose { border-top: 1px solid var(--line); padding: 40px 0 16px; max-width: 720px; }
  .prose h2 { font-size: clamp(22px, 3.5vw, 28px); letter-spacing: -0.02em; margin: 32px 0 10px; }
  .prose h2:first-child { margin-top: 0; }
  .prose p, .prose li { color: var(--dim); font-size: 17px; }
  .prose p b, .prose li b { color: var(--text); }
  .prose ul, .prose ol { padding-left: 22px; margin: 0 0 12px; }
  .prose li { margin: 6px 0; }
  .faq { border-top: 1px solid var(--line); padding: 40px 0 24px; max-width: 720px; }
  .faq h2 { font-size: clamp(22px, 3.5vw, 28px); letter-spacing: -0.02em; margin: 0 0 12px; }
  .faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 0 18px; margin: 10px 0; }
  .faq summary { cursor: pointer; font-weight: 700; padding: 14px 0; list-style: none; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; float: right; color: var(--lime); font-weight: 900; }
  .faq details[open] summary::after { content: "×"; }
  .faq details p { color: var(--dim); margin: 0 0 16px; }

  @media (max-width: 820px) {
    .links { grid-template-columns: 1fr; }
    .guide { grid-template-columns: 1fr; gap: 28px; }
    .guide .phone { position: static; order: -1; width: min(220px, 58vw); }
  }