/* ============================================
   CueFrame — Marketing Site
   Shared design tokens & base
   ============================================ */

:root {
  /* Color */
  --bg-0: #070509;
  --bg-1: #0A0710;
  --bg-2: #0E0A18;
  --bg-3: #14102A;

  --surface-glass: rgba(28, 18, 54, 0.55);
  --surface-glass-2: rgba(38, 24, 70, 0.45);
  --surface-elev: #14102A;

  --border-hair: rgba(167, 139, 250, 0.10);
  --border-soft: rgba(167, 139, 250, 0.16);
  --border-bright: rgba(167, 139, 250, 0.28);

  --text-strong: #F4F1FA;
  --text-base: #EAE7F2;
  --text-muted: #9C95B4;
  --text-dim: #6B6585;

  --violet-deep: #6D28D9;
  --violet: #8B5CF6;
  --violet-soft: #A78BFA;
  --violet-glow: rgba(139, 92, 246, 0.45);
  --violet-grad: linear-gradient(135deg, #6D28D9 0%, #8B5CF6 55%, #A78BFA 100%);
  --violet-grad-flat: linear-gradient(180deg, #8B5CF6 0%, #6D28D9 100%);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  /* Type scale */
  --f-display: 'Satoshi', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--text-base);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background:
    radial-gradient(900px 600px at 80% -10%, rgba(109, 40, 217, 0.18), transparent 60%),
    radial-gradient(700px 500px at 0% 30%, rgba(139, 92, 246, 0.10), transparent 60%),
    var(--bg-0);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--violet); color: white; }

/* ============================================
   Layout
   ============================================ */
.wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

.wrap-narrow {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px;
}

.section { padding: 120px 0; position: relative; }
.section-sm { padding: 80px 0; }

/* ============================================
   Type
   ============================================ */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--text-strong);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(44px, 6.2vw, 84px); line-height: 1.02; font-weight: 900; letter-spacing: -0.035em; }
h2 { font-size: clamp(34px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.028em; }
h3 { font-size: clamp(22px, 1.8vw, 28px); line-height: 1.2; }
h4 { font-size: 18px; line-height: 1.3; font-weight: 600; }

p { margin: 0; color: var(--text-base); }

.eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--violet);
  box-shadow: 0 0 12px var(--violet-glow);
}

.lead {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 56ch;
  text-wrap: pretty;
}

/* Gradient text */
.grad-text {
  background: linear-gradient(180deg, #F4F1FA 0%, #B7A9E0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.violet-text {
  background: var(--violet-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================
   Nav
   ============================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  background: rgba(7, 5, 9, 0.65);
  border-bottom: 1px solid var(--border-hair);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  max-width: 1240px;
  margin: 0 auto;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-strong);
  letter-spacing: -0.015em;
}

.logo-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: block;
  flex-shrink: 0;
  overflow: hidden;
}

.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
}
.nav-links a {
  font-size: 14px;
  color: var(--text-muted);
  transition: color 0.18s ease;
}
.nav-links a:hover { color: var(--text-strong); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-soft);
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.18s ease;
}
.nav-cta:hover {
  background: rgba(139, 92, 246, 0.12);
  border-color: var(--border-bright);
}

@media (max-width: 760px) {
  .nav-links { display: none; }
}

/* ============================================
   Buttons & App Store badge
   ============================================ */
.appstore-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 18px;
  background: #000;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  color: #fff;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.appstore-badge:hover {
  border-color: rgba(139, 92, 246, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 12px 40px -10px rgba(139, 92, 246, 0.35);
}
.appstore-badge .apple {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}
.appstore-badge .apple svg { width: 28px; height: 28px; }
.appstore-badge .lines { display: flex; flex-direction: column; line-height: 1.1; }
.appstore-badge .top {
  font-family: var(--f-body);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
}
.appstore-badge .bot {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 1px;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  color: var(--text-base);
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  transition: all 0.18s ease;
}
.btn-ghost:hover { background: rgba(139,92,246,0.08); border-color: var(--border-bright); }

/* ============================================
   Glass panel
   ============================================ */
.glass {
  background:
    linear-gradient(180deg, rgba(40, 26, 78, 0.55), rgba(20, 14, 40, 0.45));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 30%);
}

/* ============================================
   Footer
   ============================================ */
.footer {
  border-top: 1px solid var(--border-hair);
  padding: 64px 0 48px;
  background: var(--bg-0);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding: 0 32px;
  max-width: 1240px;
  margin: 0 auto;
}
.footer h4 {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
  font-size: 14px;
  color: var(--text-muted);
  transition: color 0.18s ease;
}
.footer-col a:hover { color: var(--text-strong); }
.footer-bottom {
  margin-top: 56px;
  padding: 24px 32px 0;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid var(--border-hair);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--f-mono);
}
@media (max-width: 760px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* ============================================
   Placeholder tag (for CueFrame name flag)
   ============================================ */
.placeholder-flag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 200, 100, 0.1);
  color: #FFD58A;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 500;
  text-transform: uppercase;
  vertical-align: middle;
  border: 1px solid rgba(255, 200, 100, 0.18);
}

/* ============================================
   Decorative grid backdrop
   ============================================ */
.grid-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(139, 92, 246, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 75%);
}

/* ============================================
   Phone mockup
   ============================================ */
.phone {
  --w: 300px;
  width: var(--w);
  aspect-ratio: 9 / 19.5;
  border-radius: calc(var(--w) * 0.14);
  background:
    linear-gradient(160deg, #2A2240 0%, #15101F 60%, #0A0710 100%);
  padding: calc(var(--w) * 0.035);
  position: relative;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,0.06) inset,
    0 30px 80px -20px rgba(0,0,0,0.6),
    0 0 60px -10px rgba(139, 92, 246, 0.25);
}
.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--w) * 0.105);
  background: #0A0710;
  overflow: hidden;
  position: relative;
}
.phone-screen > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.phone-notch {
  position: absolute;
  top: calc(var(--w) * 0.035);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--w) * 0.32);
  height: calc(var(--w) * 0.085);
  background: #000;
  border-radius: 999px;
  z-index: 4;
}
.phone-statusbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--w) * 0.135);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--w) * 0.07);
  font-family: var(--f-display);
  font-size: calc(var(--w) * 0.045);
  font-weight: 600;
  color: white;
  z-index: 3;
}
.phone-statusbar .icons { display: inline-flex; gap: 4px; align-items: center; }
.phone-statusbar .icons span {
  width: calc(var(--w) * 0.04);
  height: calc(var(--w) * 0.04);
  background: white;
  border-radius: 1px;
}
.phone-statusbar .icons .bars {
  width: calc(var(--w) * 0.05);
  height: calc(var(--w) * 0.035);
  -webkit-mask: linear-gradient(to right, white 0 22%, transparent 22% 33%, white 33% 55%, transparent 55% 66%, white 66% 88%, transparent 88% 100%);
          mask: linear-gradient(to right, white 0 22%, transparent 22% 33%, white 33% 55%, transparent 55% 66%, white 66% 88%, transparent 88% 100%);
}
.phone-statusbar .icons .battery {
  width: calc(var(--w) * 0.075);
  height: calc(var(--w) * 0.038);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 2px;
  position: relative;
  background: transparent;
}
.phone-statusbar .icons .battery::after {
  content: "";
  position: absolute;
  left: 1px; top: 1px; bottom: 1px;
  width: 75%;
  background: white;
  border-radius: 1px;
}

/* ============================================
   LEGAL DOCUMENT TEMPLATE
   ============================================ */

      .legal-head {
        padding: 96px 0 32px;
        position: relative;
      }
      .legal-head::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
          900px 400px at 50% 0%,
          rgba(139, 92, 246, 0.1),
          transparent 60%
        );
        pointer-events: none;
      }
      .legal-head .inner {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 32px;
        position: relative;
        z-index: 1;
      }
      .legal-head .kicker {
        font-family: var(--f-mono);
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--violet-soft);
        display: inline-flex;
        align-items: center;
        gap: 12px;
      }
      .legal-head .kicker::before {
        content: "";
        width: 24px;
        height: 1px;
        background: var(--violet-soft);
        opacity: 0.6;
      }
      .legal-head h1 {
        font-size: clamp(40px, 5vw, 64px);
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.05;
        margin-top: 20px;
      }
      .legal-meta {
        display: flex;
        align-items: center;
        gap: 28px;
        margin-top: 28px;
        font-family: var(--f-mono);
        font-size: 13px;
        color: var(--text-muted);
        letter-spacing: 0.02em;
        flex-wrap: wrap;
      }
      .legal-meta .updated {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 6px 14px;
        border-radius: 999px;
        background: rgba(139, 92, 246, 0.1);
        border: 1px solid var(--border-bright);
        color: var(--violet-soft);
      }
      .legal-meta .updated::before {
        content: "";
        width: 6px;
        height: 6px;
        background: var(--violet);
        border-radius: 999px;
        box-shadow: 0 0 8px var(--violet-glow);
      }

      /* Layout: TOC + content */
      .legal-layout {
        max-width: 1100px;
        margin: 0 auto;
        padding: 48px 32px 120px;
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: 80px;
        align-items: start;
      }
      @media (max-width: 880px) {
        .legal-layout {
          grid-template-columns: 1fr;
          gap: 32px;
        }
      }

      /* TOC */
      .toc {
        position: sticky;
        top: 100px;
        border-left: 1px solid var(--border-soft);
        padding-left: 18px;
      }
      .toc h4 {
        font-family: var(--f-mono);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--text-dim);
        margin-bottom: 16px;
      }
      .toc ol {
        list-style: none;
        padding: 0;
        margin: 0;
        counter-reset: tocnum;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .toc li {
        counter-increment: tocnum;
      }
      .toc a {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        font-size: 13px;
        color: var(--text-muted);
        line-height: 1.4;
        transition: color 0.18s ease;
      }
      .toc a::before {
        content: counter(tocnum, decimal-leading-zero);
        font-family: var(--f-mono);
        font-size: 11px;
        color: var(--text-dim);
        flex-shrink: 0;
        margin-top: 2px;
        letter-spacing: 0.04em;
      }
      .toc a:hover {
        color: var(--text-strong);
      }
      .toc a:hover::before {
        color: var(--violet-soft);
      }

      @media (max-width: 880px) {
        .toc {
          position: static;
          border: 1px solid var(--border-soft);
          border-radius: var(--radius-md);
          padding: 20px 24px;
          background: var(--bg-2);
        }
        .toc ol {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 10px 24px;
        }
      }

      /* Body */
      .legal-body {
        max-width: 720px;
        font-family: var(--f-body);
        font-size: 16px;
        line-height: 1.75;
        color: #d8d3e6;
      }
      .legal-body p {
        margin: 0 0 20px;
      }
      .legal-body section {
        margin-bottom: 56px;
        scroll-margin-top: 96px;
      }
      .legal-body section:last-child {
        margin-bottom: 0;
      }
      .legal-body h2 {
        font-family: var(--f-display);
        font-size: 28px;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--text-strong);
        margin: 0 0 20px;
        display: flex;
        align-items: baseline;
        gap: 14px;
      }
      .legal-body h2::before {
        content: attr(data-num);
        font-family: var(--f-mono);
        font-size: 13px;
        font-weight: 500;
        color: var(--violet-soft);
        letter-spacing: 0.06em;
      }
      .legal-body h3 {
        font-family: var(--f-display);
        font-size: 18px;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--text-strong);
        margin: 32px 0 12px;
      }
      .legal-body ul {
        margin: 0 0 20px;
        padding-left: 22px;
      }
      .legal-body li {
        margin-bottom: 8px;
      }
      .legal-body li::marker {
        color: var(--violet-soft);
      }
      .legal-body strong {
        color: var(--text-strong);
        font-weight: 600;
      }
      .legal-body em {
        color: #c9c2dd;
        font-style: italic;
      }
      .legal-body a {
        color: var(--violet-soft);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
        text-decoration-color: rgba(167, 139, 250, 0.45);
      }
      .legal-body a:hover {
        text-decoration-color: var(--violet-soft);
      }

      /* Highlighted summary box */
      .legal-tldr {
        margin: 0 0 36px;
        padding: 24px 28px;
        background: linear-gradient(
          180deg,
          rgba(40, 26, 78, 0.55),
          rgba(20, 14, 40, 0.4)
        );
        border: 1px solid var(--border-bright);
        border-radius: var(--radius-md);
      }
      .legal-tldr .label {
        font-family: var(--f-mono);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--violet-soft);
        margin-bottom: 10px;
      }
      .legal-tldr p {
        font-family: var(--f-display);
        font-size: 18px;
        line-height: 1.5;
        font-weight: 500;
        color: var(--text-strong);
        letter-spacing: -0.01em;
        margin: 0;
        text-wrap: pretty;
      }

      /* Footer note */
      .legal-footnote {
        margin-top: 64px;
        padding-top: 28px;
        border-top: 1px solid var(--border-hair);
        font-family: var(--f-mono);
        font-size: 12px;
        color: var(--text-dim);
        letter-spacing: 0.04em;
      }
      .legal-footnote a {
        color: var(--violet-soft);
      }

/* ============================================
   ARTICLES INDEX PAGE
   ============================================ */

      /* ============================================
         DESIGN SYSTEM — shared tokens & base
         ============================================ */
      :root {
        --bg-0: #070509;
        --bg-1: #0a0710;
        --bg-2: #0e0a18;
        --bg-3: #14102a;
        --border-hair: rgba(167, 139, 250, 0.10);
        --border-soft: rgba(167, 139, 250, 0.16);
        --border-bright: rgba(167, 139, 250, 0.28);
        --text-strong: #f4f1fa;
        --text-base: #eae7f2;
        --text-muted: #9c95b4;
        --text-dim: #6b6585;
        --violet-deep: #6d28d9;
        --violet: #8b5cf6;
        --violet-soft: #a78bfa;
        --violet-glow: rgba(139, 92, 246, 0.45);
        --violet-grad: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 55%, #a78bfa 100%);
        --radius-sm: 8px;
        --radius-md: 14px;
        --radius-lg: 22px;
        --radius-xl: 32px;
        --f-display: 'Satoshi', system-ui, sans-serif;
        --f-body: 'Inter', system-ui, sans-serif;
        --f-mono: 'Geist Mono', ui-monospace, monospace;
      }

      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      html, body { margin: 0; padding: 0; }

      body {
        background:
          radial-gradient(900px 600px at 80% -10%, rgba(109, 40, 217, 0.18), transparent 60%),
          radial-gradient(700px 500px at 0% 30%, rgba(139, 92, 246, 0.10), transparent 60%),
          var(--bg-0);
        color: var(--text-base);
        font-family: var(--f-body);
        font-size: 16px;
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        overflow-x: hidden;
      }

      img { max-width: 100%; display: block; }
      a { color: inherit; text-decoration: none; }
      ::selection { background: var(--violet); color: white; }

      h1, h2, h3, h4 {
        font-family: var(--f-display);
        color: var(--text-strong);
        font-weight: 700;
        letter-spacing: -0.02em;
        margin: 0;
        text-wrap: balance;
      }
      p { margin: 0; color: var(--text-base); }

      .eyebrow {
        font-family: var(--f-mono);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--violet-soft);
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }
      .eyebrow::before {
        content: "";
        width: 6px; height: 6px;
        border-radius: 999px;
        background: var(--violet);
        box-shadow: 0 0 12px var(--violet-glow);
      }

      /* Nav */
      .nav {
        position: sticky;
        top: 0;
        z-index: 50;
        backdrop-filter: blur(20px) saturate(160%);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
        background: rgba(7, 5, 9, 0.65);
        border-bottom: 1px solid var(--border-hair);
      }
      .nav-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 32px;
        max-width: 1240px;
        margin: 0 auto;
      }
      .logo {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--f-display);
        font-weight: 700;
        font-size: 18px;
        color: var(--text-strong);
        letter-spacing: -0.015em;
      }
      .logo-mark {
        width: 26px; height: 26px;
        border-radius: 7px;
        display: block;
        flex-shrink: 0;
        overflow: hidden;
      }
      .nav-links {
        display: flex;
        gap: 32px;
        align-items: center;
      }
      .nav-links a { font-size: 14px; color: var(--text-muted); transition: color 0.18s ease; }
      .nav-links a:hover, .nav-links a.active { color: var(--text-strong); }
      .nav-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 16px;
        border-radius: 999px;
        background: rgba(255,255,255,0.06);
        border: 1px solid var(--border-soft);
        color: var(--text-strong);
        font-size: 13px;
        font-weight: 500;
        transition: all 0.18s ease;
      }
      .nav-cta:hover { background: rgba(139, 92, 246, 0.12); border-color: var(--border-bright); }
      @media (max-width: 760px) { .nav-links { display: none; } }

      /* App Store badge */
      .appstore-badge {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 12px 22px 12px 18px;
        background: #000;
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 14px;
        color: #fff;
        transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
      }
      .appstore-badge:hover {
        border-color: rgba(139, 92, 246, 0.45);
        transform: translateY(-1px);
        box-shadow: 0 12px 40px -10px rgba(139, 92, 246, 0.35);
      }
      .appstore-badge .apple { width: 28px; height: 28px; display: grid; place-items: center; }
      .appstore-badge .apple svg { width: 28px; height: 28px; }
      .appstore-badge .lines { display: flex; flex-direction: column; line-height: 1.1; }
      .appstore-badge .top { font-family: var(--f-body); font-size: 10px; letter-spacing: 0.04em; color: rgba(255,255,255,0.85); }
      .appstore-badge .bot { font-family: var(--f-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin-top: 1px; }

      /* Glass */
      .glass {
        background: linear-gradient(180deg, rgba(40, 26, 78, 0.55), rgba(20, 14, 40, 0.45));
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-lg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        position: relative;
      }
      .glass::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 30%);
      }

      /* Footer */
      .footer {
        border-top: 1px solid var(--border-hair);
        padding: 64px 0 48px;
        background: var(--bg-0);
      }
      .footer-inner {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
        gap: 48px;
        padding: 0 32px;
        max-width: 1240px;
        margin: 0 auto;
      }
      .footer h4 {
        font-family: var(--f-mono);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--text-dim);
        margin-bottom: 18px;
      }
      .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
      .footer-col a { font-size: 14px; color: var(--text-muted); transition: color 0.18s ease; }
      .footer-col a:hover { color: var(--text-strong); }
      .footer-bottom {
        margin-top: 56px;
        padding: 24px 32px 0;
        max-width: 1240px;
        margin-left: auto;
        margin-right: auto;
        border-top: 1px solid var(--border-hair);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: var(--text-dim);
        font-family: var(--f-mono);
      }
      @media (max-width: 760px) {
        .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
        .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
      }

      /* Placeholder flag */
      .placeholder-flag {
        display: inline-block;
        padding: 2px 7px;
        border-radius: 4px;
        background: rgba(255, 200, 100, 0.1);
        color: #ffd58a;
        font-family: var(--f-mono);
        font-size: 10px;
        letter-spacing: 0.06em;
        font-weight: 500;
        text-transform: uppercase;
        vertical-align: middle;
        border: 1px solid rgba(255, 200, 100, 0.18);
      }

      /* Grid fade */
      .grid-fade {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image:
          linear-gradient(rgba(139, 92, 246, 0.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(139, 92, 246, 0.05) 1px, transparent 1px);
        background-size: 56px 56px;
        mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 75%);
        -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 75%);
      }

      /* ============================================
         ARTICLES INDEX — page-specific styles
         ============================================ */

      .articles-hero {
        padding: 100px 0 72px;
        position: relative;
        overflow: hidden;
      }
      .articles-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(900px 500px at 60% 0%, rgba(139, 92, 246, 0.15), transparent 60%);
        pointer-events: none;
      }
      .articles-hero .inner {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 32px;
        position: relative;
        z-index: 1;
      }
      .articles-hero h1 {
        font-size: clamp(40px, 5vw, 72px);
        line-height: 1.04;
        letter-spacing: -0.03em;
        font-weight: 900;
        margin-top: 20px;
      }
      .articles-hero .lead {
        font-size: clamp(17px, 1.3vw, 20px);
        line-height: 1.5;
        color: var(--text-muted);
        max-width: 52ch;
        margin-top: 20px;
        text-wrap: pretty;
      }

      /* Article grid */
      .articles-section {
        padding: 0 0 120px;
      }
      .articles-inner {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 32px;
      }

      /* Featured article (first/top) */
      .article-featured {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border-radius: var(--radius-xl);
        overflow: hidden;
        border: 1px solid var(--border-soft);
        margin-bottom: 32px;
        text-decoration: none;
        transition: border-color 0.2s ease, transform 0.2s ease;
      }
      .article-featured:hover { border-color: var(--border-bright); transform: translateY(-2px); }
      .article-featured .feat-thumb {
        aspect-ratio: 4/3;
        background:
          radial-gradient(900px 500px at 70% 100%, rgba(109, 40, 217, 0.5), transparent 60%),
          radial-gradient(700px 500px at 20% 0%, rgba(167, 139, 250, 0.3), transparent 60%),
          linear-gradient(150deg, #1a1530 0%, #0e0a18 100%);
        display: grid;
        place-items: center;
        position: relative;
        overflow: hidden;
      }
      .article-featured .feat-thumb .art {
        display: flex;
        gap: 24px;
        align-items: center;
        font-family: var(--f-display);
        font-size: clamp(20px, 2.5vw, 36px);
        font-weight: 900;
        letter-spacing: -0.03em;
      }
      .article-featured .feat-thumb .art .robot { color: rgba(255,255,255,0.18); }
      .article-featured .feat-thumb .art .vs {
        font-family: var(--f-mono);
        font-size: 12px;
        color: var(--text-dim);
        letter-spacing: 0.14em;
      }
      .article-featured .feat-thumb .art .human {
        background: var(--violet-grad);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .article-featured .feat-body {
        padding: 48px 40px;
        background: linear-gradient(180deg, rgba(20, 14, 40, 0.6), rgba(14, 10, 24, 0.4));
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 16px;
      }
      .article-featured .feat-tag {
        font-family: var(--f-mono);
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--violet-soft);
      }
      .article-featured .feat-title {
        font-family: var(--f-display);
        font-size: clamp(22px, 2vw, 30px);
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--text-strong);
        line-height: 1.2;
      }
      .article-featured .feat-desc {
        font-size: 15px;
        line-height: 1.6;
        color: var(--text-muted);
        max-width: 42ch;
      }
      .article-featured .feat-meta {
        display: flex;
        align-items: center;
        gap: 16px;
        font-family: var(--f-mono);
        font-size: 12px;
        color: var(--text-dim);
        margin-top: 8px;
      }
      .article-featured .feat-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border-radius: 999px;
        background: rgba(139, 92, 246, 0.15);
        border: 1px solid var(--border-bright);
        color: var(--violet-soft);
        font-size: 13px;
        font-weight: 500;
        font-family: var(--f-mono);
        width: fit-content;
        transition: background 0.18s ease;
      }
      .article-featured:hover .feat-cta { background: rgba(139, 92, 246, 0.25); }

      /* Article card grid */
      .article-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }

      .article-card {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: var(--radius-lg);
        border: 1px solid var(--border-hair);
        text-decoration: none;
        transition: transform 0.2s ease, border-color 0.2s ease;
        background: var(--bg-2);
      }
      .article-card:hover { transform: translateY(-3px); border-color: var(--border-bright); }
      .article-card .card-thumb {
        aspect-ratio: 16/10;
        position: relative;
        overflow: hidden;
      }
      .article-card .card-thumb::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(700px 400px at 30% 0%, rgba(139, 92, 246, 0.4), transparent 50%),
          radial-gradient(500px 300px at 80% 100%, rgba(109, 40, 217, 0.45), transparent 55%);
      }
      .article-card.t-script .card-thumb {
        background: linear-gradient(150deg, #2a1f58 0%, #0e0a18 100%);
      }
      .article-card.t-script .card-thumb::before {
        content: "{ }";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        font-family: var(--f-mono);
        font-size: 64px;
        font-weight: 500;
        color: rgba(255,255,255,0.18);
        z-index: 1;
      }
      .article-card.t-light .card-thumb {
        background: linear-gradient(150deg, #1a1530 0%, #0e0a18 100%);
      }
      .article-card.t-light .card-thumb::before {
        content: "";
        position: absolute;
        left: 20%; right: 20%; top: 40%;
        height: 5px;
        border-radius: 999px;
        background: linear-gradient(90deg, transparent, white, transparent);
        filter: blur(6px);
        opacity: 0.9;
        z-index: 1;
      }
      .article-card.t-mic .card-thumb {
        background: linear-gradient(150deg, #2a1f58 0%, #0e0a18 100%);
      }
      .article-card.t-mic .card-thumb::before {
        content: "";
        position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        width: 40px; height: 64px;
        border-radius: 24px;
        background: linear-gradient(180deg, #a78bfa, #6d28d9);
        z-index: 1;
        box-shadow: 0 0 32px rgba(139, 92, 246, 0.6);
      }
      .article-card .card-body {
        padding: 22px 24px 28px;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .article-card .card-tag {
        font-family: var(--f-mono);
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--violet-soft);
      }
      .article-card .card-title {
        font-family: var(--f-display);
        font-size: 18px;
        font-weight: 600;
        letter-spacing: -0.015em;
        color: var(--text-strong);
        line-height: 1.3;
      }
      .article-card .card-desc {
        font-size: 14px;
        line-height: 1.55;
        color: var(--text-muted);
      }
      .article-card .card-meta {
        font-family: var(--f-mono);
        font-size: 11px;
        color: var(--text-dim);
        letter-spacing: 0.04em;
        margin-top: auto;
      }

      /* Coming soon badge */
      .soon-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 10px;
        border-radius: 999px;
        background: rgba(255, 200, 100, 0.08);
        border: 1px solid rgba(255, 200, 100, 0.18);
        color: #ffd58a;
        font-family: var(--f-mono);
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-weight: 500;
        width: fit-content;
      }

      @media (max-width: 880px) {
        .article-featured { grid-template-columns: 1fr; }
        .article-featured .feat-thumb { aspect-ratio: 16/8; }
        .article-grid { grid-template-columns: 1fr 1fr; }
      }
      @media (max-width: 600px) {
        .article-grid { grid-template-columns: 1fr; }
        .articles-hero { padding: 80px 0 56px; }
        .article-featured .feat-body { padding: 32px 24px; }
      }

/* ============================================
   ARTICLE DETAIL PAGE
   ============================================ */

      /* ============================================
         DESIGN SYSTEM — shared tokens & base
         ============================================ */
      :root {
        --bg-0: #070509;
        --bg-1: #0a0710;
        --bg-2: #0e0a18;
        --bg-3: #14102a;
        --border-hair: rgba(167, 139, 250, 0.10);
        --border-soft: rgba(167, 139, 250, 0.16);
        --border-bright: rgba(167, 139, 250, 0.28);
        --text-strong: #f4f1fa;
        --text-base: #eae7f2;
        --text-muted: #9c95b4;
        --text-dim: #6b6585;
        --violet-deep: #6d28d9;
        --violet: #8b5cf6;
        --violet-soft: #a78bfa;
        --violet-glow: rgba(139, 92, 246, 0.45);
        --violet-grad: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 55%, #a78bfa 100%);
        --radius-sm: 8px;
        --radius-md: 14px;
        --radius-lg: 22px;
        --radius-xl: 32px;
        --f-display: 'Satoshi', system-ui, sans-serif;
        --f-body: 'Inter', system-ui, sans-serif;
        --f-mono: 'Geist Mono', ui-monospace, monospace;
      }

      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      html, body { margin: 0; padding: 0; }

      body {
        background:
          radial-gradient(900px 600px at 80% -10%, rgba(109, 40, 217, 0.18), transparent 60%),
          radial-gradient(700px 500px at 0% 30%, rgba(139, 92, 246, 0.10), transparent 60%),
          var(--bg-0);
        color: var(--text-base);
        font-family: var(--f-body);
        font-size: 16px;
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        overflow-x: hidden;
      }

      img { max-width: 100%; display: block; }
      a { color: inherit; text-decoration: none; }
      ::selection { background: var(--violet); color: white; }

      h1, h2, h3, h4 {
        font-family: var(--f-display);
        color: var(--text-strong);
        font-weight: 700;
        letter-spacing: -0.02em;
        margin: 0;
        text-wrap: balance;
      }
      p { margin: 0; color: var(--text-base); }

      /* Nav */
      .nav {
        position: sticky;
        top: 0;
        z-index: 50;
        backdrop-filter: blur(20px) saturate(160%);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
        background: rgba(7, 5, 9, 0.65);
        border-bottom: 1px solid var(--border-hair);
      }
      .nav-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 32px;
        max-width: 1240px;
        margin: 0 auto;
      }
      .logo {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--f-display);
        font-weight: 700;
        font-size: 18px;
        color: var(--text-strong);
        letter-spacing: -0.015em;
      }
      .logo-mark {
        width: 26px;
        height: 26px;
        border-radius: 7px;
        display: block;
        flex-shrink: 0;
        overflow: hidden;
      }
      .nav-links {
        display: flex;
        gap: 32px;
        align-items: center;
      }
      .nav-links a {
        font-size: 14px;
        color: var(--text-muted);
        transition: color 0.18s ease;
      }
      .nav-links a:hover, .nav-links a.active { color: var(--text-strong); }
      .nav-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 16px;
        border-radius: 999px;
        background: rgba(255,255,255,0.06);
        border: 1px solid var(--border-soft);
        color: var(--text-strong);
        font-size: 13px;
        font-weight: 500;
        transition: all 0.18s ease;
      }
      .nav-cta:hover { background: rgba(139, 92, 246, 0.12); border-color: var(--border-bright); }
      @media (max-width: 760px) { .nav-links { display: none; } }

      /* App Store badge */
      .appstore-badge {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 12px 22px 12px 18px;
        background: #000;
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 14px;
        color: #fff;
        transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
      }
      .appstore-badge:hover {
        border-color: rgba(139, 92, 246, 0.45);
        transform: translateY(-1px);
        box-shadow: 0 12px 40px -10px rgba(139, 92, 246, 0.35);
      }
      .appstore-badge .apple { width: 28px; height: 28px; display: grid; place-items: center; }
      .appstore-badge .apple svg { width: 28px; height: 28px; }
      .appstore-badge .lines { display: flex; flex-direction: column; line-height: 1.1; }
      .appstore-badge .top { font-family: var(--f-body); font-size: 10px; letter-spacing: 0.04em; color: rgba(255,255,255,0.85); }
      .appstore-badge .bot { font-family: var(--f-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin-top: 1px; }

      /* Glass panel */
      .glass {
        background: linear-gradient(180deg, rgba(40, 26, 78, 0.55), rgba(20, 14, 40, 0.45));
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-lg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        position: relative;
      }
      .glass::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 30%);
      }

      /* Footer */
      .footer {
        border-top: 1px solid var(--border-hair);
        padding: 64px 0 48px;
        background: var(--bg-0);
      }
      .footer-inner {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
        gap: 48px;
        padding: 0 32px;
        max-width: 1240px;
        margin: 0 auto;
      }
      .footer h4 {
        font-family: var(--f-mono);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--text-dim);
        margin-bottom: 18px;
      }
      .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
      .footer-col a { font-size: 14px; color: var(--text-muted); transition: color 0.18s ease; }
      .footer-col a:hover { color: var(--text-strong); }
      .footer-bottom {
        margin-top: 56px;
        padding: 24px 32px 0;
        max-width: 1240px;
        margin-left: auto;
        margin-right: auto;
        border-top: 1px solid var(--border-hair);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: var(--text-dim);
        font-family: var(--f-mono);
      }
      @media (max-width: 760px) {
        .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
        .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
      }

      /* Grid fade */
      .grid-fade {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image:
          linear-gradient(rgba(139, 92, 246, 0.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(139, 92, 246, 0.05) 1px, transparent 1px);
        background-size: 56px 56px;
        mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 75%);
        -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 75%);
      }

      /* Placeholder flag */
      .placeholder-flag {
        display: inline-block;
        padding: 2px 7px;
        border-radius: 4px;
        background: rgba(255, 200, 100, 0.1);
        color: #ffd58a;
        font-family: var(--f-mono);
        font-size: 10px;
        letter-spacing: 0.06em;
        font-weight: 500;
        text-transform: uppercase;
        vertical-align: middle;
        border: 1px solid rgba(255, 200, 100, 0.18);
      }

      /* ============================================
         BLOG POST — page-specific styles
         ============================================ */

      .post-cover {
        padding: 100px 0 56px;
        position: relative;
        overflow: hidden;
      }
      .post-cover::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(900px 500px at 60% 0%, rgba(139, 92, 246, 0.18), transparent 60%);
        pointer-events: none;
      }
      .post-cover .inner {
        max-width: 760px;
        margin: 0 auto;
        padding: 0 32px;
        position: relative;
        z-index: 1;
      }
      .post-eyebrow-row {
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
        margin-bottom: 28px;
      }
      .post-cover .kicker {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-family: var(--f-mono);
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--violet-soft);
        margin-bottom: 28px;
      }
      .post-cover .kicker::before {
        content: "";
        width: 24px;
        height: 1px;
        background: var(--violet-soft);
        opacity: 0.6;
      }
      .post-cover h1 {
        font-size: clamp(36px, 4.6vw, 64px);
        line-height: 1.04;
        letter-spacing: -0.03em;
        font-weight: 800;
      }
      .post-meta {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-top: 36px;
        font-family: var(--f-mono);
        font-size: 13px;
        color: var(--text-muted);
        letter-spacing: 0.02em;
        flex-wrap: wrap;
      }
      .post-meta .avatar {
        width: 32px;
        height: 32px;
        border-radius: 999px;
        background: var(--violet-grad);
        position: relative;
        overflow: hidden;
        flex-shrink: 0;
      }
      .post-meta .avatar::after {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: 999px;
        background: radial-gradient(circle at 50% 40%, #c4b0e8, #6d28d9);
      }
      .post-meta .author {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--text-strong);
        font-family: var(--f-display);
        font-weight: 600;
      }
      .post-meta .dot {
        width: 3px;
        height: 3px;
        border-radius: 999px;
        background: var(--text-dim);
      }

      .post-hero {
        max-width: 1040px;
        margin: 56px auto 0;
        padding: 0 32px;
      }
      .post-hero-art {
        position: relative;
        aspect-ratio: 16 / 8;
        border-radius: var(--radius-xl);
        overflow: hidden;
        background:
          radial-gradient(900px 500px at 70% 100%, rgba(109, 40, 217, 0.5), transparent 60%),
          radial-gradient(700px 500px at 20% 0%, rgba(167, 139, 250, 0.3), transparent 60%),
          linear-gradient(150deg, #1a1530 0%, #0e0a18 100%);
        border: 1px solid var(--border-soft);
        display: grid;
        place-items: center;
      }
      .post-hero-art .label {
        position: absolute;
        bottom: 18px;
        right: 22px;
        font-family: var(--f-mono);
        font-size: 11px;
        color: var(--text-dim);
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .robot-vs-human {
        display: flex;
        gap: 48px;
        align-items: center;
        font-family: var(--f-display);
        font-size: clamp(28px, 4vw, 56px);
        font-weight: 900;
        letter-spacing: -0.03em;
      }
      .robot-vs-human .robot { color: rgba(255, 255, 255, 0.18); }
      .robot-vs-human .vs {
        font-family: var(--f-mono);
        font-size: 14px;
        color: var(--text-dim);
        letter-spacing: 0.14em;
        font-weight: 500;
      }
      .robot-vs-human .human {
        background: var(--violet-grad);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .article { padding: 80px 0 96px; }
      .article-inner {
        max-width: 760px;
        margin: 0 auto;
        padding: 0 32px;
      }
      .article-body {
        background: linear-gradient(180deg, rgba(20, 14, 40, 0.4), rgba(14, 10, 24, 0.2));
        border: 1px solid var(--border-hair);
        border-radius: var(--radius-xl);
        padding: 64px 56px;
      }
      .article-body p,
      .article-body ul,
      .article-body ol {
        font-family: var(--f-body);
        font-size: 18px;
        line-height: 1.72;
        color: #d8d3e6;
        margin: 0 0 24px;
      }
      .article-body p.lede {
        font-size: 22px;
        line-height: 1.55;
        color: var(--text-strong);
        font-weight: 400;
        letter-spacing: -0.005em;
        margin-bottom: 32px;
      }
      .article-body h2 {
        font-size: 32px;
        font-weight: 700;
        letter-spacing: -0.02em;
        margin: 56px 0 20px;
        color: var(--text-strong);
      }
      .article-body h3 {
        font-size: 22px;
        font-weight: 600;
        letter-spacing: -0.015em;
        margin: 40px 0 16px;
        color: var(--text-strong);
      }
      .article-body h2:first-child,
      .article-body h3:first-child { margin-top: 0; }
      .article-body a {
        color: var(--violet-soft);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
        text-decoration-color: rgba(167, 139, 250, 0.5);
      }
      .article-body a:hover { text-decoration-color: var(--violet-soft); }
      .article-body strong { color: var(--text-strong); font-weight: 600; }
      .article-body em { color: #c9c2dd; }
      .article-body ul,
      .article-body ol { padding-left: 24px; }
      .article-body li { margin-bottom: 10px; }
      .article-body li::marker { color: var(--violet-soft); }

      .pullquote {
        margin: 48px -16px;
        padding: 28px 32px;
        border-left: 3px solid var(--violet);
        background: linear-gradient(90deg, rgba(139, 92, 246, 0.1), transparent 80%);
        border-radius: 0 14px 14px 0;
        font-family: var(--f-display);
        font-size: 24px !important;
        line-height: 1.4 !important;
        font-weight: 500 !important;
        letter-spacing: -0.015em;
        color: var(--text-strong) !important;
        text-wrap: pretty;
      }

      .steps {
        margin: 36px 0;
        padding: 28px 32px;
        background: rgba(14, 10, 24, 0.65);
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-md);
        font-family: var(--f-mono);
        font-size: 14px !important;
        line-height: 1.7 !important;
        color: var(--text-base) !important;
        position: relative;
      }
      .steps::before {
        content: "// step-by-step";
        position: absolute;
        top: 10px;
        right: 16px;
        font-family: var(--f-mono);
        font-size: 10px;
        color: var(--text-dim);
        letter-spacing: 0.06em;
      }
      .steps .num { color: var(--violet-soft); margin-right: 12px; font-weight: 600; }
      .steps .key { color: #f4f1fa; font-weight: 500; }
      .steps .com { color: var(--text-dim); }

      .article-body code {
        font-family: var(--f-mono);
        font-size: 14px;
        padding: 2px 7px;
        background: rgba(139, 92, 246, 0.12);
        color: var(--violet-soft);
        border-radius: 5px;
        border: 1px solid var(--border-soft);
      }

      .callout {
        margin: 36px 0;
        padding: 22px 24px;
        background: rgba(139, 92, 246, 0.08);
        border: 1px solid var(--border-bright);
        border-radius: var(--radius-md);
        display: grid;
        grid-template-columns: 24px 1fr;
        gap: 16px;
        font-size: 16px !important;
        line-height: 1.55 !important;
      }
      .callout::before {
        content: "★";
        color: var(--violet-soft);
        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
      }
      .callout strong { color: var(--violet-soft); }

      .author-bio {
        margin-top: 56px;
        padding: 28px 32px;
        display: flex;
        gap: 20px;
        align-items: center;
      }
      .author-bio .avatar {
        width: 56px;
        height: 56px;
        border-radius: 999px;
        background: var(--violet-grad);
        position: relative;
        overflow: hidden;
        flex-shrink: 0;
      }
      .author-bio .avatar::after {
        content: "";
        position: absolute;
        inset: 3px;
        border-radius: 999px;
        background: radial-gradient(circle at 50% 40%, #c4b0e8, #6d28d9);
      }
      .author-bio .info .name {
        font-family: var(--f-display);
        font-size: 16px;
        font-weight: 600;
        color: var(--text-strong);
        letter-spacing: -0.01em;
      }
      .author-bio .info .role {
        font-family: var(--f-mono);
        font-size: 12px;
        color: var(--text-muted);
        letter-spacing: 0.04em;
        margin-top: 2px;
      }
      .author-bio .info p {
        font-size: 14px !important;
        margin-top: 8px !important;
        margin-bottom: 0 !important;
        color: var(--text-muted) !important;
        line-height: 1.5 !important;
      }

      .related {
        padding: 80px 0 120px;
        border-top: 1px solid var(--border-hair);
        background: var(--bg-1);
      }
      .related-inner {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 32px;
      }
      .related h2 { font-size: 32px; margin-bottom: 40px; }
      .related-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }
      @media (max-width: 880px) { .related-grid { grid-template-columns: 1fr; } }

      .related-card {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: transform 0.2s ease, border-color 0.2s ease;
        cursor: pointer;
        text-decoration: none;
      }
      .related-card:hover { transform: translateY(-3px); }
      .related-card .thumb {
        aspect-ratio: 16/10;
        background: linear-gradient(150deg, #2a1f58 0%, #0e0a18 100%);
        position: relative;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        overflow: hidden;
      }
      .related-card .thumb::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(700px 400px at 30% 0%, rgba(139, 92, 246, 0.4), transparent 50%),
          radial-gradient(500px 300px at 80% 100%, rgba(109, 40, 217, 0.45), transparent 55%);
      }
      .related-card.t-script .thumb::before {
        content: "{ }";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        font-family: var(--f-mono);
        font-size: 80px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.18);
        z-index: 1;
      }
      .related-card.t-light .thumb::before {
        content: "";
        position: absolute;
        left: 20%; right: 20%; top: 30%;
        height: 6px;
        border-radius: 999px;
        background: linear-gradient(90deg, transparent, white, transparent);
        filter: blur(8px);
        opacity: 0.9;
        z-index: 1;
      }
      .related-card.t-light .thumb::after {
        background:
          radial-gradient(700px 300px at 50% 30%, rgba(255, 255, 255, 0.25), transparent 50%),
          radial-gradient(500px 300px at 50% 80%, rgba(109, 40, 217, 0.55), transparent 60%);
      }
      .related-card.t-mic .thumb::before {
        content: "";
        position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        width: 50px; height: 80px;
        border-radius: 28px;
        background: linear-gradient(180deg, #a78bfa, #6d28d9);
        z-index: 1;
        box-shadow: 0 0 40px rgba(139, 92, 246, 0.6);
      }
      .related-card .meta {
        padding: 22px 24px 28px;
        border: 1px solid var(--border-hair);
        border-top: none;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        background: var(--bg-2);
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .related-card .tag {
        font-family: var(--f-mono);
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--violet-soft);
      }
      .related-card .ti {
        font-family: var(--f-display);
        font-size: 18px;
        font-weight: 600;
        letter-spacing: -0.015em;
        color: var(--text-strong);
        line-height: 1.3;
      }
      .related-card .info {
        font-family: var(--f-mono);
        font-size: 11px;
        color: var(--text-dim);
        letter-spacing: 0.04em;
        margin-top: auto;
      }

      .back-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--f-mono);
        font-size: 12px;
        color: var(--text-muted);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        transition: color 0.2s ease;
        margin-bottom: 20px;
      }
      .post-eyebrow-row .back-link,
      .post-eyebrow-row .kicker {
        margin-bottom: 0;
      }
      .back-link:hover { color: var(--violet-soft); }

      @media (max-width: 720px) {
        .article-body { padding: 40px 28px; }
        .article-body p, .article-body ul, .article-body ol { font-size: 16px; }
        .article-body p.lede { font-size: 19px; }
        .pullquote { margin: 36px 0; padding: 22px 24px; font-size: 20px !important; }
      }

/* ============================================
   HOME PAGE
   ============================================ */

      /* ---------- HERO ---------- */
      .hero {
        position: relative;
        padding: 64px 0 120px;
        overflow: hidden;
      }
      .hero-inner {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 64px;
        align-items: center;
        position: relative;
        z-index: 1;
      }
      .hero h1 {
        margin-top: 28px;
      }
      .hero h1 .em {
        background: var(--violet-grad);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-style: italic;
        font-weight: 500;
      }
      .hero .lead {
        margin-top: 28px;
        font-size: clamp(17px, 1.35vw, 21px);
      }
      .hero-actions {
        display: flex;
        gap: 16px;
        align-items: center;
        margin-top: 40px;
        flex-wrap: wrap;
      }
      .hero-meta {
        display: flex;
        gap: 24px;
        margin-top: 32px;
        font-family: var(--f-mono);
        font-size: 12px;
        color: var(--text-dim);
        letter-spacing: 0.04em;
      }
      .hero-meta span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }
      .hero-meta .dot {
        width: 5px;
        height: 5px;
        border-radius: 999px;
        background: var(--violet-soft);
        box-shadow: 0 0 8px var(--violet-glow);
      }

      /* Hero phones cluster */
      .phone-cluster {
        position: relative;
        height: 700px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .phone-cluster .phone-back {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%) rotate(-8deg);
        --w: 240px;
        opacity: 0.74;
        filter: blur(0.2px);
      }
      .phone-cluster .phone-side {
        position: absolute;
        right: -8px;
        top: 50%;
        transform: translateY(-50%) rotate(8deg);
        --w: 240px;
        opacity: 0.74;
        filter: blur(0.2px);
      }
      .phone-cluster .phone-front {
        position: relative;
        --w: 320px;
        transform: rotate(3deg);
        z-index: 2;
      }

      /* Ambient violet glow */
      .hero::before {
        content: "";
        position: absolute;
        width: 800px;
        height: 800px;
        right: -100px;
        top: -100px;
        border-radius: 999px;
        background: radial-gradient(
          circle,
          rgba(139, 92, 246, 0.22) 0%,
          transparent 60%
        );
        filter: blur(20px);
        pointer-events: none;
      }

      /* ---------- TELEPROMPTER PHONE UI (front) ---------- */
      .tele-ui {
        position: absolute;
        inset: 0;
        background:
          linear-gradient(
            180deg,
            rgba(10, 7, 16, 0) 0%,
            rgba(10, 7, 16, 0.7) 60%,
            rgba(10, 7, 16, 0.95) 100%
          ),
          linear-gradient(15deg, #2a1f3a 0%, #1a1530 60%, #0f0a1f 100%);
      }
      /* Faux person silhouette */
      .tele-ui .person {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 75%;
        height: 70%;
        background:
          radial-gradient(
            ellipse 60% 40% at 50% 22%,
            #5b4a78 0%,
            #3a2f58 30%,
            transparent 65%
          ),
          radial-gradient(
            ellipse 90% 80% at 50% 100%,
            #1f1838 0%,
            transparent 70%
          );
        filter: blur(2px);
      }
      .tele-ui .person::after {
        /* head */
        content: "";
        position: absolute;
        left: 50%;
        top: 8%;
        transform: translateX(-50%);
        width: 36%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(
          circle at 50% 40%,
          #6e5a95 0%,
          #4a3d70 50%,
          #2e2750 100%
        );
        filter: blur(1px);
      }
      /* recording dot */
      .tele-rec {
        position: absolute;
        top: 9%;
        left: 7%;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 9px;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(8px);
        border-radius: 999px;
        font-family: var(--f-mono);
        font-size: 10px;
        color: #ffb4b4;
        border: 1px solid rgba(255, 100, 100, 0.25);
      }
      .tele-rec::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: #ff4d6d;
        box-shadow: 0 0 8px #ff4d6d;
        animation: pulse 1.6s ease-in-out infinite;
      }
      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.4;
        }
      }

      .tele-time {
        position: absolute;
        top: 9%;
        right: 7%;
        padding: 5px 9px;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(8px);
        border-radius: 999px;
        font-family: var(--f-mono);
        font-size: 10px;
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.12);
      }

      /* Script text - the teleprompter overlay */
      .tele-script {
        position: absolute;
        left: 8%;
        right: 8%;
        top: 32%;
        font-family: var(--f-display);
        font-size: 16px;
        font-weight: 600;
        line-height: 1.35;
        letter-spacing: -0.01em;
        color: rgba(255, 255, 255, 0.35);
        text-align: left;
        text-wrap: balance;
      }
      .tele-script .read {
        color: rgba(255, 255, 255, 0.95);
      }
      .tele-script .cursor {
        display: inline;
        background: linear-gradient(
          90deg,
          rgba(139, 92, 246, 0.7),
          rgba(139, 92, 246, 0)
        );
        padding: 0 2px;
        border-radius: 2px;
      }
      .tele-script .next {
        color: rgba(255, 255, 255, 0.85);
      }

      /* Voice waveform indicator */
      .tele-wave {
        position: absolute;
        left: 50%;
        bottom: 16%;
        transform: translateX(-50%);
        display: flex;
        align-items: flex-end;
        gap: 3px;
        height: 22px;
        padding: 6px 12px;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(10px);
        border-radius: 999px;
        border: 1px solid rgba(139, 92, 246, 0.32);
      }
      .tele-wave i {
        display: block;
        width: 2.5px;
        background: linear-gradient(180deg, #a78bfa, #6d28d9);
        border-radius: 999px;
      }
      .tele-wave i:nth-child(1) {
        height: 30%;
      }
      .tele-wave i:nth-child(2) {
        height: 60%;
      }
      .tele-wave i:nth-child(3) {
        height: 90%;
      }
      .tele-wave i:nth-child(4) {
        height: 70%;
      }
      .tele-wave i:nth-child(5) {
        height: 100%;
      }
      .tele-wave i:nth-child(6) {
        height: 50%;
      }
      .tele-wave i:nth-child(7) {
        height: 80%;
      }
      .tele-wave i:nth-child(8) {
        height: 35%;
      }
      .tele-wave i:nth-child(9) {
        height: 60%;
      }

      /* Bottom control rail */
      .tele-controls {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 4%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0 18px;
      }
      .tele-controls .icon-btn {
        width: 36px;
        height: 36px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        display: grid;
        place-items: center;
        backdrop-filter: blur(10px);
      }
      .tele-controls .icon-btn::after {
        content: "";
        width: 14px;
        height: 14px;
        background: white;
        border-radius: 2px;
      }
      .tele-controls .rec-btn {
        width: 56px;
        height: 56px;
        border-radius: 999px;
        background: linear-gradient(180deg, #ff4d6d, #c8233f);
        border: 3px solid rgba(255, 255, 255, 0.95);
        box-shadow:
          0 8px 24px rgba(255, 77, 109, 0.5),
          0 0 0 1px rgba(0, 0, 0, 0.5);
      }

      /* ---------- BACK PHONE (Script list) ---------- */
      .list-ui {
        position: absolute;
        inset: 0;
        background: #0a0710;
        color: white;
        font-family: var(--f-display);
      }
      .list-ui .list-header {
        padding: 50px 16px 12px;
      }
      .list-ui .list-header .h {
        font-size: 22px;
        font-weight: 800;
        letter-spacing: -0.02em;
      }
      .list-ui .list-header .s {
        font-family: var(--f-mono);
        font-size: 9px;
        color: var(--text-dim);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-top: 2px;
      }
      .list-ui .search {
        margin: 0 16px;
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 10px;
        font-family: var(--f-body);
        font-size: 10px;
        color: var(--text-dim);
        border: 1px solid rgba(255, 255, 255, 0.05);
      }
      .list-ui .list-item {
        margin: 8px 16px;
        padding: 12px;
        background: linear-gradient(
          180deg,
          rgba(40, 26, 78, 0.5),
          rgba(20, 14, 40, 0.4)
        );
        border-radius: 12px;
        border: 1px solid var(--border-soft);
        position: relative;
      }
      .list-ui .list-item.pinned::before {
        content: "";
        position: absolute;
        top: 8px;
        right: 10px;
        width: 8px;
        height: 8px;
        background: var(--violet-soft);
        border-radius: 999px;
        box-shadow: 0 0 6px var(--violet-glow);
      }
      .list-ui .list-item .ti {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: -0.01em;
      }
      .list-ui .list-item .me {
        font-family: var(--f-mono);
        font-size: 8px;
        color: var(--text-dim);
        margin-top: 4px;
        letter-spacing: 0.05em;
      }
      .list-ui .list-item .pv {
        font-size: 9px;
        color: rgba(255, 255, 255, 0.5);
        margin-top: 6px;
        line-height: 1.4;
      }

      /* ---------- LOGO MARQUEE ---------- */
      .marquee {
        border-top: 1px solid var(--border-hair);
        border-bottom: 1px solid var(--border-hair);
        padding: 28px 0;
        background: rgba(7, 5, 9, 0.4);
      }
      .marquee-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 32px;
        flex-wrap: wrap;
      }
      .marquee-label {
        font-family: var(--f-mono);
        font-size: 11px;
        color: var(--text-dim);
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }
      .marquee-items {
        display: flex;
        gap: 40px;
        flex-wrap: wrap;
        color: var(--text-muted);
        font-family: var(--f-display);
        font-weight: 600;
        font-size: 17px;
        opacity: 0.7;
        letter-spacing: -0.01em;
      }
      .marquee-items span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }
      .marquee-items span::before {
        content: "";
        width: 6px;
        height: 6px;
        background: var(--violet-soft);
        border-radius: 2px;
        opacity: 0.6;
      }

      /* ---------- BIG VOICE FEATURE ---------- */
      .voice-feat {
        position: relative;
      }
      .voice-feat .inner {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        gap: 80px;
        align-items: center;
      }
      .voice-feat h2 .em {
        background: var(--violet-grad);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .voice-feat .lead {
        margin-top: 24px;
      }
      .voice-shot-card {
        min-height: 560px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 36px;
        overflow: hidden;
      }
      .voice-shot-card::before {
        content: "";
        position: absolute;
        inset: 12%;
        background: radial-gradient(
          circle,
          rgba(139, 92, 246, 0.22) 0%,
          transparent 68%
        );
        filter: blur(28px);
        pointer-events: none;
      }
      .voice-shot-card .feature-phone {
        --w: 300px;
        z-index: 1;
        transform: rotate(2deg);
      }
      .voice-feat .stats {
        display: flex;
        gap: 48px;
        margin-top: 40px;
        flex-wrap: wrap;
      }
      .voice-feat .stat .n {
        font-family: var(--f-display);
        font-size: 38px;
        font-weight: 800;
        letter-spacing: -0.025em;
        background: var(--violet-grad);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .voice-feat .stat .l {
        font-family: var(--f-mono);
        font-size: 11px;
        color: var(--text-dim);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-top: 4px;
      }

      /* Big script visual */
      .script-card {
        padding: 32px;
        min-height: 480px;
        position: relative;
        overflow: hidden;
      }
      .script-card .chrome {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
        font-family: var(--f-mono);
        font-size: 11px;
        color: var(--text-dim);
        letter-spacing: 0.06em;
      }
      .script-card .chrome .left {
        display: inline-flex;
        align-items: center;
        gap: 10px;
      }
      .script-card .chrome .left .live {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 8px;
        border-radius: 999px;
        background: rgba(139, 92, 246, 0.15);
        border: 1px solid var(--border-bright);
        color: var(--violet-soft);
        text-transform: uppercase;
        font-weight: 500;
      }
      .script-card .chrome .left .live::before {
        content: "";
        width: 6px;
        height: 6px;
        background: var(--violet);
        border-radius: 999px;
        box-shadow: 0 0 8px var(--violet-glow);
      }

      .script-body {
        font-family: var(--f-display);
        font-size: 28px;
        line-height: 1.4;
        font-weight: 600;
        letter-spacing: -0.018em;
        color: rgba(255, 255, 255, 0.25);
        text-wrap: pretty;
      }
      .script-body .said {
        color: rgba(255, 255, 255, 0.95);
      }
      .script-body .now {
        background: linear-gradient(
          90deg,
          rgba(139, 92, 246, 0.5),
          rgba(139, 92, 246, 0.18)
        );
        padding: 0 4px;
        margin: 0 -4px;
        border-radius: 4px;
        color: white;
      }
      .script-body .ahead {
        color: rgba(255, 255, 255, 0.45);
      }

      .script-foot {
        position: absolute;
        left: 32px;
        right: 32px;
        bottom: 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }
      .script-foot .waveform {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 3px;
        height: 32px;
      }
      .script-foot .waveform i {
        flex: 1;
        background: linear-gradient(
          180deg,
          rgba(167, 139, 250, 0.9),
          rgba(109, 40, 217, 0.4)
        );
        border-radius: 2px;
        min-height: 4px;
      }
      .script-foot .wpm {
        font-family: var(--f-mono);
        font-size: 11px;
        color: var(--text-muted);
        letter-spacing: 0.04em;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
      }
      .script-foot .wpm strong {
        color: var(--violet-soft);
        font-weight: 600;
      }

      /* ---------- BENTO ---------- */
      .bento {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 220px;
        gap: 16px;
      }
      .bento .cell {
        padding: 28px;
        position: relative;
        overflow: hidden;
      }
      .bento .cell h3 {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.02em;
      }
      .bento .cell p {
        margin-top: 8px;
        color: var(--text-muted);
        font-size: 14px;
        line-height: 1.5;
        max-width: 36ch;
      }
      .bento .ic {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        background: linear-gradient(
          180deg,
          rgba(139, 92, 246, 0.22),
          rgba(109, 40, 217, 0.1)
        );
        border: 1px solid var(--border-bright);
        margin-bottom: 18px;
        color: var(--violet-soft);
      }
      .bento .ic svg {
        width: 18px;
        height: 18px;
      }

      /* cells */
      .cell-a {
        grid-column: span 3;
        grid-row: span 2;
      }
      .cell-b {
        grid-column: span 3;
        grid-row: span 1;
      }
      .cell-c {
        grid-column: span 3;
        grid-row: span 1;
      }
      .cell-d {
        grid-column: span 2;
        grid-row: span 1;
      }
      .cell-e {
        grid-column: span 2;
        grid-row: span 1;
      }
      .cell-f {
        grid-column: span 2;
        grid-row: span 1;
      }
      .cell-g {
        grid-column: span 3;
        grid-row: span 1;
      }
      .cell-h {
        grid-column: span 3;
        grid-row: span 1;
      }

      @media (max-width: 900px) {
        .bento {
          grid-template-columns: 1fr 1fr;
          grid-auto-rows: auto;
        }
        .bento .cell {
          grid-column: span 2 !important;
          grid-row: auto !important;
          min-height: 200px;
        }
      }

      /* Script manager preview inside bento */
      .bento-scripts {
        position: absolute;
        right: -20px;
        bottom: -20px;
        width: 56%;
        display: flex;
        flex-direction: column;
        gap: 8px;
        transform: rotate(-2deg);
      }
      .bento-scripts .row {
        background: rgba(20, 14, 40, 0.7);
        border: 1px solid var(--border-soft);
        border-radius: 10px;
        padding: 10px 12px;
        backdrop-filter: blur(10px);
      }
      .bento-scripts .row .tt {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--text-strong);
        font-family: var(--f-display);
      }
      .bento-scripts .row .mt {
        font-family: var(--f-mono);
        font-size: 9px;
        color: var(--text-dim);
        letter-spacing: 0.05em;
        margin-top: 2px;
      }
      .bento-scripts .row.pinned {
        background: linear-gradient(
          180deg,
          rgba(40, 26, 78, 0.85),
          rgba(20, 14, 40, 0.7)
        );
        border-color: var(--border-bright);
      }

      .bento-scripts .row.pinned .tt::after {
        content: "";
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: var(--violet-soft);
        box-shadow: 0 0 6px var(--violet-glow);
        margin-left: 6px;
        vertical-align: middle;
      }

      /* Filter chips */
      .filter-row {
        display: flex;
        gap: 10px;
        margin-top: 24px;
        flex-wrap: wrap;
      }
      .filter-chip {
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--border-soft);
        font-family: var(--f-mono);
        font-size: 11px;
        color: var(--text-muted);
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }
      .filter-chip.active {
        background: linear-gradient(
          180deg,
          rgba(139, 92, 246, 0.25),
          rgba(109, 40, 217, 0.15)
        );
        border-color: var(--border-bright);
        color: var(--text-strong);
      }

      .bg-mode-row {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 22px;
      }
      .bg-mode {
        padding: 8px 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--border-soft);
        font-family: var(--f-mono);
        font-size: 10px;
        color: var(--text-muted);
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }
      .bg-mode.active {
        background: rgba(139, 92, 246, 0.16);
        border-color: var(--border-bright);
        color: var(--violet-soft);
      }

      /* Resolution badges */
      .res-stack {
        position: absolute;
        right: 24px;
        bottom: 24px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: flex-end;
      }
      .res-badge {
        font-family: var(--f-display);
        font-weight: 800;
        letter-spacing: -0.02em;
        padding: 4px 10px;
        border-radius: 8px;
        border: 1px solid var(--border-soft);
        background: rgba(20, 14, 40, 0.6);
        font-size: 14px;
        color: var(--text-muted);
      }
      .res-badge.active {
        background: var(--violet-grad);
        border-color: transparent;
        color: white;
        font-size: 22px;
        padding: 6px 14px;
        box-shadow: 0 8px 24px -8px var(--violet-glow);
      }

      /* Privacy lock visual */
      .lock-vis {
        position: absolute;
        right: 18px;
        bottom: 14px;
        width: 84px;
        height: 84px;
        border-radius: 50%;
        background: radial-gradient(
          circle at 50% 40%,
          rgba(139, 92, 246, 0.32),
          transparent 65%
        );
        display: grid;
        place-items: center;
        pointer-events: none;
      }
      .lock-vis::after {
        content: "";
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: linear-gradient(
          180deg,
          rgba(139, 92, 246, 0.3),
          rgba(109, 40, 217, 0.15)
        );
        border: 1px solid var(--border-bright);
      }
      .lock-vis svg {
        position: relative;
        z-index: 1;
        width: 24px;
        height: 24px;
        color: white;
      }

      /* Timer countdown visual */
      .timer-vis {
        position: absolute;
        right: -10px;
        bottom: -10px;
        font-family: var(--f-display);
        font-weight: 900;
        font-size: 120px;
        letter-spacing: -0.06em;
        color: rgba(139, 92, 246, 0.18);
        line-height: 1;
      }

      /* ---------- GREEN SCREEN FEATURE ---------- */
      .greenscreen {
        padding: 100px 0 120px;
        position: relative;
      }
      .gs-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 64px;
        align-items: center;
      }
      .gs-text h2 .em {
        background: linear-gradient(135deg, #6d28d9, #a78bfa);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .gs-compare {
        position: relative;
        aspect-ratio: 4 / 5;
        border-radius: var(--radius-xl);
        overflow: hidden;
        border: 1px solid var(--border-soft);
        box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.7);
      }
      .gs-raw,
      .gs-out {
        position: absolute;
        inset: 0;
      }
      .gs-raw {
        background: #2dbe6e;
        background-image: radial-gradient(
          circle at 40% 70%,
          #34d67a 0%,
          #208f58 70%
        );
        clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
      }
      .gs-out {
        background: linear-gradient(
          180deg,
          #1a1530 0%,
          #6d28d9 50%,
          #a78bfa 100%
        );
        background-image:
          radial-gradient(
            ellipse 80% 60% at 20% 30%,
            rgba(167, 139, 250, 0.7),
            transparent
          ),
          radial-gradient(
            ellipse 60% 50% at 80% 80%,
            rgba(109, 40, 217, 0.85),
            transparent
          ),
          linear-gradient(180deg, #1a1530 0%, #2a1f58 100%);
        clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
      }
      /* Faux person on both halves */
      .gs-person {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 70%;
        height: 80%;
        background:
          radial-gradient(
            ellipse 50% 25% at 50% 18%,
            #8b7bb0 0%,
            #5a4a85 40%,
            transparent 65%
          ),
          radial-gradient(
            ellipse 90% 80% at 50% 95%,
            #3a2d5c 0%,
            #2a2148 50%,
            transparent 80%
          );
      }
      .gs-person::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 5%;
        transform: translateX(-50%);
        width: 35%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(
          circle at 50% 40%,
          #b59ed8 0%,
          #7a6aa0 50%,
          #4f4275 100%
        );
      }
      .gs-divider {
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(
          180deg,
          transparent,
          rgba(255, 255, 255, 0.5),
          transparent
        );
        transform: translateX(-50%);
        z-index: 3;
      }
      .gs-divider::before,
      .gs-divider::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: white;
        border: 1px solid rgba(0, 0, 0, 0.1);
        top: 50%;
        margin-top: -14px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
      }
      .gs-divider::after {
        background: transparent;
        border: none;
        width: 14px;
        height: 14px;
        margin-top: -7px;
        background-image:
          linear-gradient(
            45deg,
            transparent 45%,
            #1a1530 45% 55%,
            transparent 55%
          ),
          linear-gradient(
            -45deg,
            transparent 45%,
            #1a1530 45% 55%,
            transparent 55%
          );
      }
      .gs-label {
        position: absolute;
        top: 16px;
        padding: 6px 12px;
        font-family: var(--f-mono);
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        border-radius: 999px;
        z-index: 2;
        backdrop-filter: blur(8px);
      }
      .gs-label.raw {
        left: 16px;
        background: rgba(0, 0, 0, 0.45);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.18);
      }
      .gs-label.out {
        right: 16px;
        background: rgba(167, 139, 250, 0.2);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.18);
      }

      .gs-pip {
        position: absolute;
        bottom: 20px;
        right: 20px;
        width: 80px;
        aspect-ratio: 3/4;
        border-radius: 10px;
        background: linear-gradient(160deg, #2a1f3a, #0f0a1f);
        border: 1.5px solid rgba(255, 255, 255, 0.8);
        z-index: 2;
        overflow: hidden;
      }
      .gs-pip::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
          circle at 50% 30%,
          rgba(167, 139, 250, 0.4),
          transparent 60%
        );
      }

      /* Background swatches */
      .gs-bg-row {
        display: flex;
        gap: 12px;
        margin-top: 36px;
        flex-wrap: wrap;
      }
      .gs-bg {
        width: 64px;
        height: 80px;
        border-radius: 10px;
        border: 1px solid var(--border-soft);
        position: relative;
        overflow: hidden;
      }
      .gs-bg.selected {
        border-color: var(--violet-soft);
        box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
      }
      .gs-bg.selected::after {
        content: "";
        position: absolute;
        top: 4px;
        right: 4px;
        width: 14px;
        height: 14px;
        border-radius: 999px;
        background: var(--violet);
        border: 2px solid white;
      }

      /* ---------- TESTIMONIALS ---------- */
      .test-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-top: 56px;
      }
      @media (max-width: 880px) {
        .test-grid {
          grid-template-columns: 1fr;
        }
      }
      .test-card {
        padding: 28px;
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
      .test-card .quote {
        font-family: var(--f-display);
        font-size: 19px;
        line-height: 1.4;
        font-weight: 500;
        color: var(--text-strong);
        letter-spacing: -0.01em;
        text-wrap: pretty;
      }
      .test-card .who {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: auto;
      }
      .test-card .avatar {
        width: 40px;
        height: 40px;
        border-radius: 999px;
        background: var(--violet-grad);
        position: relative;
        flex-shrink: 0;
      }
      .test-card .avatar::after {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: 999px;
        background: radial-gradient(circle at 50% 40%, #c4b0e8, #6d28d9);
      }
      .test-card .name {
        font-family: var(--f-display);
        font-weight: 600;
        font-size: 14px;
        color: var(--text-strong);
        letter-spacing: -0.01em;
      }
      .test-card .handle {
        font-family: var(--f-mono);
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 1px;
      }

      /* ---------- FINAL CTA ---------- */
      .final-cta {
        padding: 120px 0;
        text-align: center;
        position: relative;
      }
      .final-cta::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: 900px;
        aspect-ratio: 1;
        background: radial-gradient(
          circle,
          rgba(139, 92, 246, 0.18) 0%,
          transparent 60%
        );
        pointer-events: none;
      }
      .final-cta .inner {
        position: relative;
        z-index: 1;
      }
      .final-cta h2 {
        font-size: clamp(44px, 5.5vw, 80px);
        line-height: 1.02;
        letter-spacing: -0.035em;
        font-weight: 900;
      }
      .final-cta .tagline {
        font-family: var(--f-mono);
        margin-top: 24px;
        font-size: 13px;
        color: var(--text-muted);
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .final-cta .actions {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-top: 48px;
        flex-wrap: wrap;
      }

      /* Section header common */
      .sec-head {
        max-width: 740px;
        margin-bottom: 56px;
      }
      .sec-head h2 {
        margin-top: 16px;
      }
      .sec-head .lead {
        margin-top: 20px;
      }

      /* responsive */
      @media (max-width: 920px) {
        .hero-inner {
          grid-template-columns: 1fr;
          gap: 40px;
        }
        .phone-cluster {
          height: 600px;
        }
        .phone-cluster .phone-front {
          --w: 280px;
        }
        .phone-cluster .phone-back {
          --w: 210px;
          left: -40px;
        }
        .phone-cluster .phone-side {
          --w: 210px;
          right: -40px;
        }
        .voice-feat .inner {
          grid-template-columns: 1fr;
          gap: 48px;
        }
        .gs-inner {
          grid-template-columns: 1fr;
          gap: 48px;
        }
        .section {
          padding: 80px 0;
        }
      }