/* =========================================================
     Orinode — v6 theme · neon glass, midnight purple + rose
     Palette (ported from templates/home_v6.html):
       --ink:        #0F0F23  (midnight)
       --ink-2:      #0A0A1A
       --fog:        #1A1A33
       --line:       rgba(226,232,240,0.10)
       --line-2:     rgba(226,232,240,0.18)
       --text:       #E2E8F0  (cool slate)
       --muted:      #94A3B8
       --faint:      #64748B
       --accent:     #7C3AED  (neon purple — primary)
       --accent-2:   #A78BFA  (lavender highlight — primary-2)
       --rose:       #F43F5E  (rose action)
       --rose-2:     #FB7185
       --cyan:       #22D3EE
       --emerald:    #34D399
     ========================================================= */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { background: #0F0F23; }
  html, body { color: #E2E8F0; font-family: "Fira Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
  body {
    min-height: 100vh; overflow-x: hidden;
    background:
      radial-gradient(900px 600px at 10% -10%, rgba(124,58,237,0.40), transparent 55%),
      radial-gradient(800px 600px at 95% 20%, rgba(244,63,94,0.25), transparent 55%),
      radial-gradient(700px 500px at 50% 110%, rgba(34,211,238,0.18), transparent 55%),
      #0F0F23 !important;
  }
  /* sections transparent so the single body canvas shows through */
  section, footer { background: transparent !important; }

  /* aurora overlay layer that drifts (matches v6) */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  }


  :root {
    --ink: #0F0F23;
    --ink-2: #0A0A1A;
    --fog: #1A1A33;
    --line: rgba(226,232,240,0.10);
    --line-2: rgba(226,232,240,0.18);
    --text: #E2E8F0;
    --muted: #94A3B8;
    --faint: #64748B;
    --accent: #7C3AED;
    --accent-2: #A78BFA;
    --rose: #F43F5E;
    --rose-2: #FB7185;
    --gold: #FB7185;
    --green: #34D399;
    --cyan: #22D3EE;
    --emerald: #34D399;
    --primary: #7C3AED;
    --primary-2: #A78BFA;
    --primary-3: #5B21B6;
    --primary-glow: rgba(124,58,237,0.45);
    --rose-glow: rgba(244,63,94,0.45);
    --glass: rgba(255,255,255,0.04);
    --glass-2: rgba(255,255,255,0.07);
    --glass-line: rgba(255,255,255,0.14);
  }

  .display, .serif { font-family: "Fira Code", "Times New Roman", serif; font-weight: 400; }
  .mono { font-family: "Fira Code", ui-monospace, monospace; }

  /* ================= HERO ================= */
  .hero {
    position: relative; width: 100%;
    padding-top: var(--nav-h, 68px); /* offset for fixed nav */
  }

  /* Bottom fade — dissolves hero content into the page canvas below */
  .hero-fade {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 260px; z-index: 50; pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(15,15,35,0)   0%,
      rgba(15,15,35,0.5) 40%,
      rgba(15,15,35,0.85) 72%,
      rgba(15,15,35,1)   100%
    );
  }

  /* Ambient background — terracotta glow + subtle topographic lines */
  .hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background:
      radial-gradient(60% 45% at 18% 8%, rgba(124,58,237,0.25), transparent 65%),
      radial-gradient(50% 40% at 88% 60%, rgba(167,139,250,0.12), transparent 60%),
      radial-gradient(40% 40% at 50% 100%, rgba(124,58,237,0.14), transparent 70%);
    pointer-events: none;
  }
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    pointer-events: none;
  }

  /* Orbiting dots layer — ties visually to "voice / call" theme */
  .orbits { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
  .orbit-dot {
    position: absolute; width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 12px var(--accent);
    opacity: 0.6;
    animation: drift 22s linear infinite;
  }
  @keyframes drift {
    0%   { transform: translate(0,0); opacity: 0; }
    10%  { opacity: 0.7; }
    90%  { opacity: 0.7; }
    100% { transform: translate(var(--dx, 400px), var(--dy, -300px)); opacity: 0; }
  }

  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border-radius: 999px;
    font: 500 13.5px "Fira Sans"; cursor: pointer; text-decoration: none;
    white-space: nowrap; flex-shrink: 0;
    border: 1px solid var(--line-2); color: var(--text);
    background: rgba(255,255,255,0.04); backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
  }
  .btn:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.28); }
  .btn.primary {
    background: var(--text); color: var(--ink); border-color: var(--text);
    font-weight: 600;
  }
  .btn.primary:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(255,255,255,0.25); }
  /* Shiny conic-gradient CTA (terracotta tuned) */
  @property --ga { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
  @property --gao { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
  @property --gp { syntax: "<percentage>"; initial-value: 5%; inherits: false; }
  @property --gs { syntax: "<color>"; initial-value: #1A1A33; inherits: false; }

  .btn.accent {
    --shiny-bg: #0F0F23;
    --shiny-bg-sub: #1A1A33;
    --shiny-fg: #FFFFFF;
    --shiny-hl: #7C3AED;
    --shiny-hl-sub: #A78BFA;
    --dur: 3s;
    --shadow: 2px;
    --trans: 700ms cubic-bezier(0.25,1,0.5,1);
    isolation: isolate;
    position: relative; overflow: hidden;
    border: 1px solid transparent;
    color: var(--shiny-fg); font-weight: 600;
    background:
      linear-gradient(var(--shiny-bg), var(--shiny-bg)) padding-box,
      conic-gradient(
        from calc(var(--ga) - var(--gao)),
        transparent,
        var(--shiny-hl) var(--gp),
        var(--gs) calc(var(--gp) * 2),
        var(--shiny-hl) calc(var(--gp) * 3),
        transparent calc(var(--gp) * 4)
      ) border-box;
    box-shadow: inset 0 0 0 1px var(--shiny-bg-sub), 0 10px 28px -14px rgba(124,58,237,0.55);
    transition: var(--trans);
    transition-property: --gao, --gp, --gs, transform, box-shadow;
    animation: ga-spin linear infinite var(--dur);
  }
  .btn.accent::before, .btn.accent::after, .btn.accent span::before {
    content: ""; pointer-events: none; position: absolute;
    left: 50%; top: 50%; translate: -50% -50%; z-index: -1;
  }
  /* dotted mask */
  .btn.accent::before {
    --size: calc(100% - var(--shadow) * 3);
    --pos: 2px; --space: calc(var(--pos) * 2);
    width: var(--size); height: var(--size);
    background: radial-gradient(circle at var(--pos) var(--pos), rgba(244,63,94,0.9) calc(var(--pos)/4), transparent 0) padding-box;
    background-size: var(--space) var(--space);
    mask-image: conic-gradient(from calc(var(--ga) + 45deg), black, transparent 10% 90%, black);
    border-radius: inherit; opacity: 0.35; z-index: -1;
  }
  /* inner shimmer */
  .btn.accent::after {
    width: 100%; aspect-ratio: 1;
    background: linear-gradient(-50deg, transparent, var(--shiny-hl), transparent);
    mask-image: radial-gradient(circle at bottom, transparent 40%, black);
    opacity: 0.55;
  }
  .btn.accent span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; }
  .btn.accent span::before {
    --size: calc(100% + 1rem);
    width: var(--size); height: var(--size);
    box-shadow: inset 0 -1ex 2rem 4px var(--shiny-hl);
    opacity: 0; transition: opacity var(--trans);
    animation: ga-breathe calc(var(--dur) * 1.5) linear infinite;
  }
  .btn.accent:hover, .btn.accent:focus-visible {
    --gp: 20%; --gao: 95deg; --gs: var(--shiny-hl-sub);
    animation-play-state: running;
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px var(--shiny-bg-sub), 0 16px 36px -12px rgba(124,58,237,0.75);
  }
  .btn.accent:hover span::before, .btn.accent:focus-visible span::before { opacity: 1; }
  .btn.accent:active { transform: translateY(1px); }

  @keyframes ga-spin { to { --ga: 360deg; } }
  @media (prefers-reduced-motion: reduce) { .ga-btn { animation: none !important; } }
  .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  @keyframes ga-breathe { from, to { scale: 1; } 50% { scale: 1.2; } }
  .btn .arrow { transition: transform 0.3s ease; }
  .btn:hover .arrow { transform: translateX(3px); }
  .btn.lg { padding: 16px 28px; font-size: 14px; }
  .btn.ghost { background: transparent; border-color: transparent; }
  .btn.ghost:hover { background: rgba(255,255,255,0.06); }

  /* ================= HERO LAYOUT ================= */
  .wrap {
    position: relative; z-index: 10;
    max-width: 1360px; margin: 0 auto;
    padding: 60px 40px 100px;
    display: grid; grid-template-columns: 1.08fr 1fr; gap: 48px;
    align-items: start;
  }
  .wrap > * { min-width: 0; }

  /* -- LEFT -- */
  .left { padding-top: 20px; display: flex; flex-direction: column; gap: 32px; min-width: 0; }

  .badge {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--line-2);
    background: rgba(255,255,255,0.04); backdrop-filter: blur(14px);
    font: 600 11px "Fira Sans"; letter-spacing: 0.12em; text-transform: uppercase;
    color: #CFD3D8;
  }
  .badge .star { color: var(--gold); font-size: 13px; line-height: 1; }
  .badge .pulse { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
  .badge .pulse::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: var(--green); opacity: 0.4; animation: ping 1.6s infinite; }
  @keyframes ping { 0% { transform: scale(0.6); opacity: 0.6; } 100% { transform: scale(1.6); opacity: 0; } }

  h1 {
    font-family: "Fira Code", serif; font-weight: 400;
    font-size: clamp(52px, 7vw, 108px);
    line-height: 0.94; letter-spacing: -0.025em;
    max-width: 760px;
  }
  h1 .grad {
    background: linear-gradient(145deg, #FFFFFF 0%, #A78BFA 55%, var(--accent-2) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    font-style: italic;
  }
  h1 .sm-lang {
    display: inline-flex; gap: 6px; font-size: 0.38em; vertical-align: middle; margin-left: 0.35em;
    font-family: "Fira Code", monospace; letter-spacing: 0.08em; font-weight: 500;
  }
  h1 .sm-lang span {
    padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line-2);
    color: var(--muted); background: rgba(255,255,255,0.04);
  }

  .lede {
    max-width: 560px; font-size: 18px; line-height: 1.55; color: #B6BCC4;
  }
  .lede b { color: var(--text); font-weight: 600; }

  .ctas { display: flex; gap: 12px; flex-wrap: wrap; }

  /* Trust strip (left-column footer) */
  .trust {
    display: flex; align-items: center; gap: 18px;
    padding-top: 14px; border-top: 1px dashed var(--line);
    font-size: 13px; color: var(--muted);
  }
  .trust .avatars { display: flex; }
  .trust .avatars .a {
    width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid var(--ink); margin-left: -8px;
    background-size: cover; background-position: center;
    background: linear-gradient(135deg, #5B21B6, #7C3AED);
    display: grid; place-items: center; font: 600 11px "Fira Sans"; color: var(--text);
  }
  .trust .avatars .a:first-child { margin-left: 0; }
  .trust .avatars .a.a1 { background: linear-gradient(135deg, #7C3AED, #A78BFA); }
  .trust .avatars .a.a2 { background: linear-gradient(135deg, #4A5A40, #2F3D28); }
  .trust .avatars .a.a3 { background: linear-gradient(135deg, #6A4E8A, #3E2E55); }
  .trust .avatars .a.a4 { background: linear-gradient(135deg, #F43F5E, #BE123C); }
  .trust .stars { color: var(--gold); letter-spacing: 2px; font-size: 14px; }
  .trust b { color: var(--text); font-weight: 600; }

  /* ================= RIGHT COLUMN ================= */
  .right { display: flex; flex-direction: column; gap: 20px; margin-top: 40px; min-width: 0; }

  /* -- Glass card base -- */
  .glass {
    position: relative; overflow: hidden;
    border-radius: 28px;
    border: 1px solid var(--line-2);
    background: linear-gradient(165deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .glass::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(500px at 0% 0%, rgba(124,58,237,0.15), transparent 55%);
  }

  /* LIVE CALL CARD */
  .call-card { padding: 30px 30px 26px; }
  .call-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
  .call-status {
    display: inline-flex; align-items: center; gap: 8px;
    font: 600 11px "Fira Code"; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--green);
  }
  .call-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: blink 1.4s infinite; }
  @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
  .call-head .dur { font: 500 12px "Fira Code"; color: var(--muted); letter-spacing: 0.05em; }

  .caller-row { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
  .caller-av {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(145deg, #7C3AED, #F43F5E);
    border: 1px solid rgba(255,255,255,0.25);
    display: grid; place-items: center;
    font-family: "Fira Code", serif; font-size: 22px; font-style: italic; color: var(--text);
    position: relative; flex-shrink: 0;
  }
  .caller-av::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    border: 1.5px solid rgba(124,58,237,0.5);
    animation: ringPulse 2.2s ease-out infinite;
  }
  @keyframes ringPulse { 0% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1.25); opacity: 0; } }
  .caller-meta .name { font-family: "Fira Code", serif; font-size: 22px; letter-spacing: -0.01em; }
  .caller-meta .sub { font: 500 12px "Fira Code"; color: var(--muted); letter-spacing: 0.04em; margin-top: 3px; }
  .caller-meta .sub .sep { opacity: 0.5; margin: 0 6px; }
  .caller-meta .sub .lang { color: var(--accent-2); }

  /* Transcript — fixed-height scrollable feed; newest pinned at bottom */
  .transcript {
    display: flex; flex-direction: column; gap: 10px;
    height: 240px;
    margin-bottom: 22px;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28px, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 28px, #000 100%);
  }
  .transcript .scroller {
    margin-top: auto;
    display: flex; flex-direction: column; gap: 10px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .bubble {
    max-width: 88%; padding: 11px 14px; border-radius: 14px;
    font-size: 14px; line-height: 1.45;
    opacity: 0; transform: translateY(6px);
    animation: bubbleIn 0.4s ease-out forwards;
  }
  @keyframes bubbleIn { to { opacity: 1; transform: translateY(0); } }
  .bubble.them { align-self: flex-start; background: rgba(255,255,255,0.06); border: 1px solid var(--line); color: #CBD5E1; border-bottom-left-radius: 4px; }
  .bubble.aria { align-self: flex-end; background: linear-gradient(145deg, rgba(124,58,237,0.2), rgba(124,58,237,0.08)); border: 1px solid rgba(124,58,237,0.4); color: #E2E8F0; border-bottom-right-radius: 4px; }
  .bubble .tag { font: 600 9px "Fira Code"; letter-spacing: 0.14em; color: var(--accent-2); margin-right: 6px; opacity: 0.9; }
  .bubble em { font-family: "Fira Code", serif; font-style: italic; }

  /* Waveform (Maraba speaking) */
  .wave-row { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
  .wave-label { font: 600 10px "Fira Code"; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); flex-shrink: 0; }
  .waveform { flex: 1; display: flex; align-items: center; gap: 3px; height: 32px; }
  .waveform .bar { flex: 1; background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-radius: 2px; min-height: 4px; animation: wave 0.9s ease-in-out infinite; transform-origin: center; }
  @keyframes wave { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
  .wave-row .latency { font: 500 11px "Fira Code"; color: var(--muted); letter-spacing: 0.04em; }
  .wave-row .latency b { color: var(--green); font-weight: 600; }

  /* STATS STRIP CARD */
  .stats-card { padding: 22px 26px; }
  .stats-head {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px;
    font: 500 11px "Fira Code"; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  }
  .stats-head .live { color: var(--green); display: inline-flex; gap: 6px; align-items: center; }
  .stats-head .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: blink 1.2s infinite; }
  .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
  .stat { text-align: left; position: relative; padding: 2px 0; }
  .stat + .stat { padding-left: 18px; border-left: 1px solid var(--line); margin-left: 0; }
  .stat .v { font-family: "Fira Code", serif; font-size: 30px; letter-spacing: -0.02em; line-height: 1; }
  .stat .v .grad { background: linear-gradient(145deg, #FFFFFF, var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
  .stat .v small { font: 500 12px "Fira Code"; color: var(--muted); margin-left: 3px; }
  .stat .lbl { font: 500 10px "Fira Code"; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }

  /* Marquee card */
  .marq-card { padding: 22px 0 20px; }
  .marq-card h3 {
    padding: 0 26px 14px;
    font: 500 10px "Fira Code"; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
    display: flex; justify-content: space-between; align-items: center;
  }
  .marq-card h3 .count { color: var(--accent-2); }
  .marq-wrap {
    position: relative; overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  }
  .marq {
    display: flex; gap: 42px; white-space: nowrap; padding: 4px 26px;
    width: max-content; animation: marq 38s linear infinite;
  }
  @keyframes marq { to { transform: translateX(-50%); } }
  .marq .client {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: "Fira Code", serif; font-size: 22px; font-style: italic;
    color: #94A3B8; letter-spacing: -0.01em;
    transition: color 0.3s ease;
  }
  .marq .client:hover { color: var(--accent-2); }
  .marq .client .icon { width: 22px; height: 22px; color: currentColor; }
  .marq .client .tag { font: 500 10px "Fira Code"; color: var(--faint); letter-spacing: 0.1em; text-transform: uppercase; font-style: normal; border: 1px solid var(--line); padding: 3px 7px; border-radius: 6px; margin-left: 4px; }

  /* bottom scroll cue */

  .scroll-cue {
    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
    font: 500 10px "Fira Code"; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--faint); display: flex; flex-direction: column; align-items: center; gap: 8px;
    z-index: 10;
  }
  .scroll-cue .line { width: 1px; height: 26px; background: linear-gradient(180deg, transparent, var(--accent)); animation: cue 2s ease-in-out infinite; }
  @keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 50.01% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

  /* Entry animations */
  .fade-in { opacity: 0; transform: translateY(24px); animation: fadeSlide 0.8s cubic-bezier(0.22,1,0.36,1) forwards; }
  .d1 { animation-delay: 0.1s; }
  .d2 { animation-delay: 0.22s; }
  .d3 { animation-delay: 0.34s; }
  .d4 { animation-delay: 0.46s; }
  .d5 { animation-delay: 0.58s; }
  .d6 { animation-delay: 0.7s; }
  @keyframes fadeSlide { to { opacity: 1; transform: translateY(0); } }

  .proof-strip {
    position: relative;
    padding: 0 40px 84px;
  }
  .proof-wrap {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
  }
  .proof-card {
    display: block;
    padding: 24px;
    border: 1px solid var(--line-2);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
    border-radius: 18px;
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
  }
  .proof-card:hover {
    transform: translateY(-2px);
    border-color: rgba(124,58,237,0.4);
    background: linear-gradient(180deg, rgba(124,58,237,0.08), rgba(255,255,255,0.02));
  }
  .proof-kicker {
    font: 600 10px "Fira Code";
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
  }
  .proof-card h3 {
    font-family: "Fira Code", serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 10px;
  }
  .proof-card p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
    min-height: 66px;
  }
  .proof-link {
    display: inline-flex;
    margin-top: 18px;
    font: 600 11px "Fira Code";
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-2);
  }

  .early-pricing {
    position: relative;
    padding: 0 40px 92px;
  }
  .early-pricing-wrap {
    max-width: 1160px;
    margin: 0 auto;
    border: 1px solid var(--line-2);
    border-radius: 24px;
    padding: 34px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  }
  .early-pricing-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 28px;
  }
  .early-pricing-head h2 {
    font-family: "Fira Code", serif;
    font-weight: 400;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 12px;
  }
  .early-pricing-head p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.65;
  }
  .early-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
  }
  .ep-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px 20px;
    background: rgba(255,255,255,0.02);
  }
  .ep-card.featured {
    border-color: rgba(124,58,237,0.38);
    background: linear-gradient(180deg, rgba(124,58,237,0.10), rgba(255,255,255,0.025));
  }
  .ep-tier {
    font: 600 10px "Fira Code";
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
  }
  .ep-price {
    font-family: "Fira Code", serif;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    margin-bottom: 10px;
  }
  .ep-price span {
    font: 500 12px "Fira Code";
    color: var(--faint);
    margin-left: 6px;
  }
  .ep-copy {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
  }
  .early-pricing-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
  }

  /* ================= RESPONSIVE ================= */
  @media (max-width: 1100px) {
    .wrap { grid-template-columns: 1fr; gap: 56px; padding: 40px 28px 90px; }
    .right { margin-top: 0; }
    h1 { font-size: clamp(48px, 9vw, 88px); }
    .proof-wrap,
    .early-pricing-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 720px) {
    .wrap { padding: 30px 20px 80px; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .stat + .stat { padding-left: 0; border-left: 0; }
    .stat:nth-child(3), .stat:nth-child(4) { padding-top: 14px; border-top: 1px solid var(--line); }
    .stat:nth-child(odd) { padding-right: 14px; border-right: 1px solid var(--line); }
    h1 .sm-lang { display: none; }
    .caller-av { width: 46px; height: 46px; font-size: 18px; }
    .caller-meta .name { font-size: 18px; }
    .call-card, .stats-card { padding: 22px 20px; }
    .marq-card h3 { padding: 0 20px 14px; }
    .marq { padding: 4px 20px; gap: 34px; }
    .proof-strip,
    .early-pricing { padding-left: 20px; padding-right: 20px; }
    .proof-card p { min-height: 0; }
    .early-pricing-wrap { padding: 24px 18px; border-radius: 18px; }
  }

  /* ============================================================
     GLOBAL MOBILE  ≤ 640px
     ============================================================ */
  @media (max-width: 640px) {
    /* hero */
    .wrap { padding: 20px 18px 56px; gap: 28px; }
    .left { gap: 20px; padding-top: 0; }
    .lede { font-size: 16px; max-width: 100%; }
    .ctas { flex-direction: column; gap: 10px; }
    .ctas .btn { width: 100%; display: flex; justify-content: center; }
    .btn.lg { padding: 15px 20px; font-size: 14px; }
    .trust { flex-wrap: wrap; gap: 12px; padding-top: 12px; }
    .glass { border-radius: 18px; }
    .call-card { padding: 18px 16px 16px; }
    .stats-card { padding: 14px 16px; }
    .proof-strip { padding: 0 18px 60px !important; }
    .proof-wrap { gap: 12px; }
    .proof-card { padding: 18px 16px; border-radius: 14px; }
    .proof-card h3 { font-size: 24px; }
    .early-pricing { padding: 0 18px 72px !important; }
    .early-pricing-head p { font-size: 14px; }
    .early-pricing-grid { gap: 10px; }
    .transcript { height: 150px; }
    .caller-av { width: 38px; height: 38px; font-size: 14px; }
    .caller-row { gap: 12px; margin-bottom: 18px; }
    .caller-meta .name { font-size: 17px; }
    .caller-meta .sub { font-size: 10px; flex-wrap: wrap; }
    .wave-row { gap: 8px; }
    .wave-label { font-size: 10px; }
    .latency { font-size: 10px; white-space: nowrap; }
    .stats-grid { gap: 10px; }
    .marq-card { display: none; } /* simplify on very small screens */
    .scroll-cue { display: none; }

    /* how it works */
    .howitworks { padding: 60px 18px 72px !important; }
    .hiw-head h2 { font-size: clamp(28px, 8vw, 44px) !important; }
    .hiw-head p { font-size: 15px; }

    /* features */
    .features { padding: 60px 18px 72px !important; }
    .f-head { text-align: left; }
    .f-grid { gap: 10px; }
    .f-card.wide { padding: 22px 18px !important; }
    .f-manifest { padding: 20px 16px 22px !important; }
    .f-manifest .quote { font-size: 18px !important; line-height: 1.4; }
    .circ-row { gap: 10px; padding-bottom: 4px; }

    /* capabilities */
    .caps { padding: 60px 18px 72px !important; }
    .caps-head h2 { font-size: clamp(28px, 8vw, 44px) !important; }
    .cap-card { padding: 22px 18px !important; }

    /* cta band */
    .cta-band { padding: 60px 18px 72px !important; }
    .cta-card { padding: 28px 20px !important; }
    .cta-card h2 { font-size: clamp(26px, 8vw, 42px) !important; }
    .cta-btns { flex-direction: column; gap: 10px; }
    .cta-btns .btn { width: 100%; justify-content: center; }

    /* results */
    .results { padding: 60px 18px 72px !important; }
    .results-head { margin-bottom: 24px; }
    .results-head h2 { font-size: clamp(26px, 8vw, 40px) !important; }

    /* pricing */
    .pricing { padding: 60px 18px 72px !important; }
    .pricing-head h2 { font-size: clamp(26px, 8vw, 40px) !important; }

    /* dev */
    .dev { padding: 60px 18px 72px !important; }
    .dev-head h2 { font-size: clamp(26px, 8vw, 40px) !important; }
    .dev-head p { font-size: 15px; }
    .dev-api-chips { flex-wrap: wrap; gap: 8px; }
    .ide-wrap { border-radius: 12px; }
    .ide-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* footer */
    .sticky-footer .sf-inner { padding: 40px 20px 24px !important; }
    .sf-watermark { font-size: clamp(60px, 20vw, 100px) !important; }
    .sf-cols { grid-template-columns: 1fr 1fr !important; gap: 20px; }
  }

  @media (max-width: 400px) {
    h1 { font-size: 36px !important; }
    .sf-cols { grid-template-columns: 1fr !important; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }


    .howitworks {
      position: relative; padding: 100px 40px 120px; 

    }
    .howitworks::before {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(50% 60% at 50% 0%, rgba(124,58,237,0.05), transparent 60%);
      pointer-events: none;
    }
    .hiw-wrap { position: relative; max-width: 980px; margin: 0 auto; }
    .hiw-head { text-align: center; margin-bottom: 56px; }
    .hiw-kicker {
      display: inline-flex; align-items: center; gap: 9px;
      font: 600 10px "Fira Code"; letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--accent); margin-bottom: 18px;
    }
    .hiw-kicker::before, .hiw-kicker::after {
      content: ""; width: 22px; height: 1px;
      background: linear-gradient(90deg, transparent, var(--accent));
    }
    .hiw-kicker::after { background: linear-gradient(90deg, var(--accent), transparent); }
    .hiw-head h2 {
      font-family: "Fira Code", serif; font-weight: 400;
      font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.024em;
      color: var(--text);
    }
    .hiw-head h2 em {
      font-style: italic;
      background: linear-gradient(145deg, #FFFFFF, var(--accent-2));
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
    }
    .hiw-head p { margin-top: 12px; font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 540px; margin-left: auto; margin-right: auto; }

    .hiw-flow { position: relative; }
    .hiw-flow::before {
      content: ""; position: absolute;
      top: 22px; left: 12.5%; right: 12.5%;
      height: 1px;
      background-image: linear-gradient(90deg, var(--accent) 50%, transparent 50%);
      background-size: 10px 1px; background-repeat: repeat-x;
      opacity: 0.35; z-index: 0;
    }
    .hiw-flow::after {
      content: ""; position: absolute;
      top: 22px; left: 12.5%;
      width: 0; height: 1px;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      box-shadow: 0 0 8px rgba(124,58,237,0.6);
      z-index: 1;
      animation: hiwFlow 8s ease-in-out infinite;
    }
    @keyframes hiwFlow {
      0% { width: 0; opacity: 0; }
      10% { opacity: 1; }
      90% { width: 75%; opacity: 1; }
      100% { width: 75%; opacity: 0; }
    }

    .hiw-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
      position: relative; z-index: 2;
    }
    .hiw-step {
      position: relative;
      display: flex; flex-direction: column; align-items: center;
      text-align: center; padding: 0 6px;
    }
    .hiw-step .num {
      width: 44px; height: 44px; border-radius: 50%;
      display: grid; place-items: center;
      background: var(--ink-2);
      border: 1px solid var(--line-2);
      font: 600 14px "Fira Code"; color: var(--accent-2);
      letter-spacing: 0.04em;
      margin-bottom: 18px;
      position: relative; z-index: 2;
      box-shadow: 0 0 0 4px var(--ink), 0 0 24px rgba(124,58,237,0.18);
      transition: all 0.4s ease;
    }
    .hiw-step:hover .num {
      border-color: rgba(124,58,237,0.5);
      color: var(--text);
      box-shadow: 0 0 0 4px var(--ink), 0 0 32px rgba(124,58,237,0.4);
    }
    .hiw-step .icon {
      width: 22px; height: 22px; color: var(--accent-2);
      margin-bottom: 14px; opacity: 0.85;
    }
    .hiw-step h3 {
      font-family: "Fira Code", serif; font-weight: 400;
      font-size: 22px; letter-spacing: -0.015em; line-height: 1.15;
      color: var(--text); margin-bottom: 8px;
    }
    .hiw-step p {
      font-size: 13px; line-height: 1.55; color: var(--muted);
      max-width: 200px;
    }
    .hiw-step .meta {
      margin-top: 14px;
      font: 500 10px "Fira Code"; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--faint);
      padding: 4px 9px; border: 1px dashed var(--line-2);
      border-radius: 4px;
    }

    @media (max-width: 760px) {
      .howitworks { padding: 72px 22px 88px; }
      .hiw-flow::before, .hiw-flow::after { display: none; }
      .hiw-grid { grid-template-columns: 1fr; gap: 32px; }
      .hiw-step p { max-width: none; }
    }
  

    .features {
      position: relative; padding: 120px 40px; 

    }
    .features::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(50% 40% at 85% 15%, rgba(124,58,237,0.08), transparent 65%),
        radial-gradient(40% 40% at 10% 90%, rgba(167,139,250,0.06), transparent 65%);
    }
    .features .f-wrap { position: relative; max-width: 1160px; margin: 0 auto; }
    .features .f-intro { margin: 0 auto 48px; max-width: 980px; }

    /* manifesto block — bordered wall poster, dot-pattern bg, corner pips */
    .f-manifest {
      position: relative;
      border: 1px solid var(--line-2);
      padding: 36px clamp(24px, 4vw, 56px) 38px;
      isolation: isolate;
      background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0));
    }
    .f-manifest .pip { position: absolute; width: 9px; height: 9px; background: var(--accent); z-index: 4; box-shadow: 0 0 12px rgba(124,58,237,0.55); }
    .f-manifest .pip.tl { top: -4.5px; left: -4.5px; }
    .f-manifest .pip.tr { top: -4.5px; right: -4.5px; }
    .f-manifest .pip.bl { bottom: -4.5px; left: -4.5px; }
    .f-manifest .pip.br { bottom: -4.5px; right: -4.5px; }
    .f-manifest .dots {
      position: absolute; inset: 0; z-index: 0;
      pointer-events: none;
      mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 25%, transparent 78%);
      -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 25%, transparent 78%);
    }
    .f-manifest .dots circle { fill: rgba(124,58,237,0.28); }
    .f-manifest .glow {
      position: absolute; inset: -1px; z-index: -1;
      background: radial-gradient(ellipse 50% 70% at 25% 100%, rgba(124,58,237,0.12), transparent 65%),
                  radial-gradient(ellipse 50% 70% at 80% 0%, rgba(167,139,250,0.08), transparent 65%);
      pointer-events: none;
    }
    .f-manifest .inner { position: relative; z-index: 2; }

    .f-manifest .kicker {
      display: inline-flex; align-items: center; gap: 9px;
      font: 600 10px "Fira Code"; letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--accent); margin-bottom: 20px;
    }
    .f-manifest .kicker::before { content: ""; width: 6px; height: 6px; background: var(--accent); display: inline-block; }
    .f-manifest .kicker .num { color: var(--faint); margin-left: 6px; letter-spacing: 0.14em; }

    .f-manifest .quote {
      font-family: "Fira Code", serif; font-weight: 400;
      font-size: clamp(26px, 3.6vw, 48px); line-height: 1.06; letter-spacing: -0.022em;
      color: var(--text);
    }
    .f-manifest .quote .row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.14em 0.28em; }
    .f-manifest .quote .thin { font-weight: 400; color: var(--muted); font-style: italic; }
    .f-manifest .quote .grad { background: linear-gradient(145deg, #FFFFFF 0%, var(--accent-2) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-style: italic; }
    .f-manifest .quote .strike { color: var(--faint); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--accent); font-weight: 400; font-style: italic; }
    .f-manifest .quote .lang {
      font: 600 10px "Fira Code"; letter-spacing: 0.16em;
      padding: 3px 8px; border: 1px solid var(--line-2);
      border-radius: 999px; color: var(--muted); transform: translateY(-0.22em);
      background: rgba(255,255,255,0.03);
      display: inline-block;
    }
    .f-manifest .quote .lang.on { color: var(--accent-2); border-color: rgba(124,58,237,0.45); background: rgba(124,58,237,0.08); }

    .f-manifest .sig {
      margin-top: 24px; display: flex; align-items: center; justify-content: space-between;
      gap: 18px; padding-top: 16px; border-top: 1px dashed var(--line);
      font: 500 11px "Fira Code"; letter-spacing: 0.08em; color: var(--muted);
      flex-wrap: wrap;
    }
    .f-manifest .sig .who { display: flex; align-items: center; gap: 11px; }
    .f-manifest .sig .who .mark {
      width: 16px; height: 16px; border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, var(--accent-2), var(--accent) 60%, #5B21B6);
      box-shadow: 0 0 12px rgba(124,58,237,0.45);
    }
    .f-manifest .sig .who em { font-family: "Fira Code", serif; font-style: italic; color: var(--text); font-size: 13px; letter-spacing: -0.01em; }
    .f-manifest .sig .from { color: var(--faint); }
    .f-manifest .sig .from b { color: var(--accent-2); font-weight: 500; }

    @media (max-width: 760px) {
      .f-manifest { padding: 28px 18px 30px; }
      .f-manifest .quote { font-size: 22px; }
      .f-manifest .quote .lang { font-size: 9px; padding: 2px 6px; }
    }
    .features .f-kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 11px "Fira Code"; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 20px; }
    .features .f-kicker::before, .features .f-kicker::after { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); }
    .features .f-kicker::after { background: linear-gradient(90deg, var(--accent), transparent); }
    .features h2 { font-family: "Fira Code", serif; font-size: clamp(40px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.025em; }
    .features h2 em { font-style: italic; background: linear-gradient(145deg, #FFFFFF, var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
    .features .f-sub { margin-top: 14px; font-size: 17px; color: var(--muted); line-height: 1.55; }

    .f-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; max-width: 980px; margin: 0 auto; }
    .f-card {
      position: relative; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
      backdrop-filter: blur(20px);
      overflow: hidden; min-width: 0;
    }
    .f-card.wide { grid-column: span 2; padding: 28px; }
    /* tailark corner decorators, accent-tinted */
    .f-card .corner { position: absolute; width: 10px; height: 10px; z-index: 2; }
    .f-card .corner.tl { top: -1px; left: -1px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
    .f-card .corner.tr { top: -1px; right: -1px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); }
    .f-card .corner.bl { bottom: -1px; left: -1px; border-bottom: 2px solid var(--accent); border-left: 2px solid var(--accent); }
    .f-card .corner.br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }

    .f-head { padding: 26px 26px 6px; }
    .f-head .row { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font: 500 13px "Fira Sans"; letter-spacing: 0.01em; }
    .f-head .row .ic { width: 18px; height: 18px; stroke-width: 1.6; color: var(--accent-2); }
    .f-head .desc { margin-top: 28px; font-family: "Fira Code", serif; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; color: var(--text); max-width: 440px; }

    /* Card 1 — Coverage map */
    .f-map { position: relative; margin: 18px 24px 24px; aspect-ratio: 76/59; border-top: 1px dashed var(--line-2); }
    .f-map::before {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(125% 125% at 50% 0%, transparent 40%, rgba(124,58,237,0.08), rgba(124,58,237,0.25) 125%);
    }
    .f-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    .map-outline { fill: none; stroke: rgba(255,255,255,0.18); stroke-width: 1; }
    .map-land { fill: rgba(255,255,255,0.03); stroke: rgba(255,255,255,0.12); stroke-width: 1; }
    .map-node { fill: var(--accent); }
    .map-node.muted { fill: rgba(255,255,255,0.4); }
    .map-ring { fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: 0.7; transform-origin: center; animation: mapring 2.4s ease-out infinite; }
    @keyframes mapring { 0% { r: 4; opacity: 0.8; } 100% { r: 26; opacity: 0; } }
    .map-line { stroke: var(--accent-2); stroke-width: 1; fill: none; stroke-dasharray: 3 4; opacity: 0.5; animation: mapdash 20s linear infinite; }
    @keyframes mapdash { to { stroke-dashoffset: -200; } }
    .map-label { font: 600 10px "Fira Code"; letter-spacing: 0.1em; fill: rgba(255,255,255,0.75); text-transform: uppercase; }

    /* Card 1 — Missed-call rows */
    .miss-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border: 1px solid var(--line); border-radius: 10px; }
    .miss-ic { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; background: rgba(124,58,237,0.12); border: 1px solid rgba(124,58,237,0.3); font-size: 16px; }
    .miss-who { font: 600 13px "Fira Sans"; color: var(--text); }
    .miss-what { font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
    .miss-tag { margin-left: auto; font: 600 12px "Fira Code"; color: #A78BFA; letter-spacing: 0.04em; }
    .miss-foot { padding-top: 4px; font: 500 10px "Fira Code"; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); text-align: center; }

    /* Card 2 — Schedule board */
    .f-sched { position: relative; margin: 18px 24px 24px; aspect-ratio: 76/59; border: 1px solid var(--line-2); border-radius: 10px; background: linear-gradient(180deg, #0E1115, #090B0E); overflow: hidden; }
    .f-sched::after { content: ""; position: absolute; inset: -24px; background: radial-gradient(50% 50% at 75% 50%, transparent, rgba(15,15,35,1) 100%); pointer-events: none; }
    .f-sched .sc-head { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
    .f-sched .sc-head .day { font-family: "Fira Code", serif; font-size: 16px; font-style: italic; }
    .f-sched .sc-head .nav { display: flex; gap: 4px; }
    .f-sched .sc-head .nav span { width: 18px; height: 18px; border: 1px solid var(--line-2); border-radius: 4px; display: grid; place-items: center; font-size: 10px; color: var(--muted); }
    .f-sched .sc-grid { display: grid; grid-template-columns: 36px repeat(4, 1fr); gap: 0; font: 500 9px "Fira Code"; color: var(--faint); }
    .f-sched .sc-grid > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px; min-height: 30px; letter-spacing: 0.06em; position: relative; }
    .f-sched .sc-grid > div:nth-child(5n) { border-right: 0; }
    .f-sched .sc-booking { position: absolute; inset: 2px 3px; border-radius: 5px; padding: 4px 6px; font: 600 9px "Fira Code"; letter-spacing: 0.04em; overflow: hidden; }
    .f-sched .sc-booking.accent { background: linear-gradient(180deg, rgba(124,58,237,0.35), rgba(124,58,237,0.18)); border: 1px solid rgba(124,58,237,0.6); color: #E2E8F0; }
    .f-sched .sc-booking.green { background: linear-gradient(180deg, rgba(52,211,153,0.3), rgba(52,211,153,0.12)); border: 1px solid rgba(52,211,153,0.5); color: #D4F5E2; }
    .f-sched .sc-booking.blue { background: linear-gradient(180deg, rgba(34,211,238,0.3), rgba(34,211,238,0.1)); border: 1px solid rgba(34,211,238,0.5); color: #DCE8F5; }
    .f-sched .sc-booking .n { display: block; font-weight: 500; opacity: 0.9; }

    /* Card 3 — wide — circular pattern row */
    .f-card.wide p.lead { margin: 28px auto 40px; max-width: 580px; text-align: center; font-family: "Fira Code", serif; font-size: clamp(24px, 2.5vw, 30px); line-height: 1.25; letter-spacing: -0.01em; color: var(--text); }
    .f-card.wide p.lead em { font-style: italic; color: var(--accent-2); }
    .circ-row { display: flex; justify-content: center; gap: 28px; overflow: hidden; padding-bottom: 8px; }
    .circ { display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .circ .frame {
      padding: 1px; border-radius: 18px;
      background: linear-gradient(180deg, var(--line-2), transparent);
    }
    .circ .inner {
      display: flex; align-items: center; padding: 14px;
      background: linear-gradient(180deg, rgba(15,15,35,1), rgba(15,15,35,1));
      border-radius: 15px; position: relative;
    }
    .circ .dot {
      width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--accent);
    }
    .circ .dot + .dot { margin-left: -10px; }
    .circ .dot.border { background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.25), rgba(255,255,255,0.25) 1px, transparent 1px, transparent 4px); }
    .circ .dot.primary { background: repeating-linear-gradient(-45deg, var(--accent), var(--accent) 1px, transparent 1px, transparent 4px); }
    .circ .dot.blue { border-color: #22D3EE; background: repeating-linear-gradient(-45deg, #22D3EE, #22D3EE 1px, transparent 1px, transparent 4px); z-index: 1; }
    .circ .lbl { font: 500 12px "Fira Code"; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }

    @media (max-width: 760px) {
      .features { padding: 80px 20px; }
      .f-grid { grid-template-columns: 1fr; }
      .f-card.wide { grid-column: auto; }
      .circ-row { gap: 14px; }
      .circ.hide-mobile { display: none; }
      .f-head .desc { font-size: 22px; }
    }
  

    @property --gba { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
    @keyframes gba-spin { to { --gba: 360deg; } }

    .caps {
      position: relative;
      padding: 100px 40px 120px;
      

    }
    .caps-wrap { position: relative; max-width: 1180px; margin: 0 auto; }
    .caps-head { text-align: center; margin-bottom: 56px; }
    .caps-kicker {
      display: inline-flex; align-items: center; gap: 9px;
      font: 600 10px "Fira Code"; letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--accent); margin-bottom: 18px;
    }
    .caps-kicker::before, .caps-kicker::after {
      content: ""; width: 22px; height: 1px;
      background: linear-gradient(90deg, transparent, var(--accent));
    }
    .caps-kicker::after { background: linear-gradient(90deg, var(--accent), transparent); }
    .caps-head h2 {
      font-family: "Fira Code", serif; font-weight: 400;
      font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.024em;
      color: var(--text);
    }
    .caps-head h2 em {
      font-style: italic;
      background: linear-gradient(145deg, #FFFFFF, var(--accent-2));
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
    }
    .caps-head p { margin-top: 12px; font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 540px; margin-left: auto; margin-right: auto; }

    .caps-grid {
      display: grid; gap: 20px;
      grid-template-columns: repeat(3, 1fr);
    }
    @media (max-width: 980px) { .caps-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 640px) { .caps-grid { grid-template-columns: 1fr; } .caps { padding: 72px 22px 88px; } }

    /* card chrome — schema-card-style */
    .cap-card {
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      display: flex; flex-direction: column;
      border: 1.5px solid transparent;
      background-image:
        linear-gradient(180deg, #0F0F23, #0A0A1A),
        conic-gradient(from var(--gba), #0F0F23 0%, #7c3aed 40%, #a78bfa 50%, #7c3aed 60%, #0F0F23 100%);
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
      animation: capFloat 7s ease-in-out infinite, gba-spin 6s linear infinite;
    }
    .cap-card:nth-child(2) { animation-delay: -1.4s, -1s; }
    .cap-card:nth-child(3) { animation-delay: -2.8s, -2s; }
    .cap-card:nth-child(4) { animation-delay: -0.7s, -3s; }
    .cap-card:nth-child(5) { animation-delay: -2.1s, -4s; }
    .cap-card:nth-child(6) { animation-delay: -3.5s, -5s; }
    .cap-card:hover { transform: translateY(-4px); animation-play-state: paused; }
    @keyframes capFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }

    /* header viz panel */
    .cap-viz-wrap { padding: 16px; }
    .cap-viz {
      position: relative;
      width: 100%; height: 168px;
      border-radius: 12px;
      overflow: hidden;
      background:
        radial-gradient(ellipse at center, rgba(124,58,237,0.10), rgba(0,0,0,0) 70%),
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.3));
      border: 1px solid rgba(124,58,237,0.25);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.04),
        inset 0 0 30px rgba(124,58,237,0.08);
    }
    /* animated grid bg */
    .cap-viz::before {
      content: ""; position: absolute; inset: 0;
      background-image:
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
      background-size: 16px 16px;
      mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
      animation: capGridPulse 4s ease-in-out infinite;
    }
    @keyframes capGridPulse {
      0%, 100% { opacity: 0.7; }
      50% { opacity: 1; }
    }
    .cap-viz .stage { position: relative; width: 100%; height: 100%; z-index: 2; }

    /* divider */
    .cap-divider {
      width: 100%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    }

    /* body */
    .cap-body { padding: 18px 18px 18px; }
    .cap-body .pill {
      display: inline-block;
      padding: 4px 10px;
      background: rgba(124,58,237,0.12);
      color: var(--accent-2);
      border: 1px solid rgba(124,58,237,0.35);
      border-radius: 999px;
      font: 600 10px "Fira Code";
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }
    .cap-body h3 {
      font-family: "Fira Code", serif; font-weight: 400;
      font-size: 22px; line-height: 1.15; letter-spacing: -0.015em;
      color: var(--text); margin-bottom: 8px;
    }
    .cap-body p {
      font-size: 13px; line-height: 1.55;
      color: var(--muted); margin-bottom: 16px;
    }
    .cap-foot {
      display: flex; justify-content: space-between; align-items: center;
    }
    .cap-foot .manage {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px;
      background: rgba(255,255,255,0.04);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(124,58,237,0.35);
      border-radius: 8px;
      color: var(--accent-2);
      font: 600 11px "Fira Sans";
      text-decoration: none;
      transition: all 0.2s ease;
    }
    .cap-foot .manage:hover { color: var(--text); background: rgba(124,58,237,0.15); }
    .cap-foot .manage svg { width: 11px; height: 11px; }
    .cap-foot .status {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--line-2);
      border-radius: 999px;
      color: var(--muted);
      font: 500 10px "Fira Code";
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .cap-foot .status .dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #34D399;
      box-shadow: 0 0 6px rgba(52,211,153,0.7);
      animation: capDot 1.6s ease-in-out infinite;
    }
    @keyframes capDot { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

    /* ============ Per-card visualization styles ============ */

    /* Voice agent — waveform bars */
    .viz-voice .bar {
      position: absolute; bottom: 50%;
      width: 3px; border-radius: 2px;
      background: linear-gradient(180deg, var(--accent), var(--accent-2));
      transform-origin: center;
      animation: vBar 1.2s ease-in-out infinite;
      box-shadow: 0 0 6px rgba(124,58,237,0.6);
    }
    @keyframes vBar {
      0%,100% { height: 8px; transform: translateY(4px); }
      50% { height: 38px; transform: translateY(19px); }
    }
    .viz-voice .ring {
      position: absolute; left: 50%; top: 50%;
      width: 64px; height: 64px; border-radius: 50%;
      border: 1.5px solid rgba(124,58,237,0.35);
      transform: translate(-50%, -50%);
      animation: vRing 2.4s ease-out infinite;
    }
    .viz-voice .ring.r2 { animation-delay: 0.8s; }
    .viz-voice .ring.r3 { animation-delay: 1.6s; }
    @keyframes vRing {
      0% { width: 40px; height: 40px; opacity: 0.7; }
      100% { width: 140px; height: 140px; opacity: 0; }
    }

    /* Calendar — grid of 7x4 cells with one highlighted */
    .viz-cal { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(4, 1fr); gap: 4px; padding: 18px; }
    .viz-cal .cell {
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--line-2);
      border-radius: 3px;
    }
    .viz-cal .cell.b1 { background: rgba(124,58,237,0.45); border-color: var(--accent); animation: capCellPulse 2.4s ease-in-out infinite; }
    .viz-cal .cell.b2 { background: rgba(124,58,237,0.25); border-color: rgba(124,58,237,0.5); animation: capCellPulse 2.4s ease-in-out infinite 0.4s; }
    .viz-cal .cell.b3 { background: rgba(124,58,237,0.15); border-color: rgba(124,58,237,0.35); }
    @keyframes capCellPulse { 0%,100% { box-shadow: 0 0 0 rgba(124,58,237,0); } 50% { box-shadow: 0 0 10px rgba(124,58,237,0.7); } }

    /* Payments — naira ticker */
    .viz-pay { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 10px; padding: 16px; }
    .viz-pay .amount {
      font-family: "Fira Code", serif; font-size: 38px; letter-spacing: -0.02em;
      color: var(--text);
    }
    .viz-pay .amount em { color: var(--accent-2); font-style: italic; }
    .viz-pay .chips { display: flex; gap: 6px; }
    .viz-pay .chip {
      padding: 3px 9px;
      font: 600 9px "Fira Code"; letter-spacing: 0.1em; text-transform: uppercase;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--line-2);
      border-radius: 4px;
      color: var(--muted);
    }
    .viz-pay .chip.live { color: var(--accent-2); border-color: rgba(124,58,237,0.4); }

    /* Multilingual — language pills morphing */
    .viz-lang { display: flex; align-items: center; justify-content: center; height: 100%; gap: 10px; flex-wrap: wrap; padding: 18px; position: relative; }
    .viz-lang .pill {
      padding: 6px 14px; border-radius: 999px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--line-2);
      font-family: "Fira Code", serif; font-size: 17px;
      color: var(--muted);
      transition: all 0.5s ease;
      animation: capLangCycle 8s ease-in-out infinite;
    }
    .viz-lang .pill:nth-child(1) { animation-delay: 0s; }
    .viz-lang .pill:nth-child(2) { animation-delay: 2s; }
    .viz-lang .pill:nth-child(3) { animation-delay: 4s; }
    .viz-lang .pill:nth-child(4) { animation-delay: 6s; }
    @keyframes capLangCycle {
      0%, 12%, 25%, 100% { background: rgba(255,255,255,0.04); border-color: var(--line-2); color: var(--muted); transform: scale(1); }
      6% { background: rgba(124,58,237,0.18); border-color: var(--accent); color: var(--text); transform: scale(1.06); }
    }

    /* CRM — connecting nodes */
    .viz-crm { width: 100%; height: 100%; }
    .viz-crm svg { width: 100%; height: 100%; display: block; }
    .viz-crm .node { fill: var(--ink-2); stroke: rgba(124,58,237,0.6); stroke-width: 1.2; }
    .viz-crm .center { fill: var(--accent); stroke: var(--accent-2); }
    .viz-crm .link { stroke: rgba(124,58,237,0.4); stroke-width: 1; stroke-dasharray: 3 3; animation: capDash 2s linear infinite; }
    @keyframes capDash { to { stroke-dashoffset: -12; } }
    .viz-crm .label { fill: var(--muted); font: 600 8px "Fira Code"; letter-spacing: 0.1em; text-anchor: middle; }

    /* Analytics — bar chart */
    .viz-an { display: flex; align-items: flex-end; justify-content: space-between; height: 100%; padding: 22px 22px 28px; gap: 6px; }
    .viz-an .col { width: 100%; background: linear-gradient(180deg, var(--accent), rgba(124,58,237,0.15)); border-radius: 3px 3px 0 0; transform-origin: bottom; animation: capCol 2.4s ease-in-out infinite; }
    .viz-an .col:nth-child(1) { animation-delay: 0s; }
    .viz-an .col:nth-child(2) { animation-delay: 0.15s; }
    .viz-an .col:nth-child(3) { animation-delay: 0.3s; }
    .viz-an .col:nth-child(4) { animation-delay: 0.45s; }
    .viz-an .col:nth-child(5) { animation-delay: 0.6s; }
    .viz-an .col:nth-child(6) { animation-delay: 0.75s; }
    .viz-an .col:nth-child(7) { animation-delay: 0.9s; }
    @keyframes capCol { 0%,100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
  

    .usecases {
      position: relative; padding: 100px 40px 120px;
    }
    .usecases::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(50% 50% at 20% 50%, rgba(124,58,237,0.05), transparent 65%);
    }
    .uc-wrap { position: relative; max-width: 1180px; margin: 0 auto; }
    .uc-head { text-align: center; margin-bottom: 56px; }
    .uc-kicker {
      display: inline-flex; align-items: center; gap: 9px;
      font: 600 10px "Fira Code"; letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--accent); margin-bottom: 18px;
    }
    .uc-kicker::before, .uc-kicker::after { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); }
    .uc-kicker::after { background: linear-gradient(90deg, var(--accent), transparent); }
    .uc-head h2 {
      font-family: "Fira Code", serif; font-weight: 400;
      font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.024em;
      color: var(--text);
    }
    .uc-head h2 em { font-style: italic; background: linear-gradient(145deg, #FFFFFF, var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
    .uc-head p { margin-top: 12px; font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 540px; margin-left: auto; margin-right: auto; }

    .uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    @media (max-width: 860px) { .uc-grid { grid-template-columns: 1fr; } .usecases { padding: 72px 22px 88px; } }

    .uc-card {
      position: relative;
      border: 1px solid var(--line-2);
      border-radius: 18px;
      padding: 32px 28px;
      background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
      display: flex; flex-direction: column; gap: 16px;
      transition: border-color 0.25s, transform 0.25s;
    }
    .uc-card:hover { border-color: rgba(124,58,237,0.35); transform: translateY(-3px); }
    .uc-icon {
      width: 44px; height: 44px; border-radius: 12px;
      display: grid; place-items: center;
      background: rgba(124,58,237,0.10);
      border: 1px solid rgba(124,58,237,0.3);
      color: var(--accent-2); flex-shrink: 0;
    }
    .uc-icon svg { width: 20px; height: 20px; }
    .uc-card h3 { font-family: "Fira Code", serif; font-weight: 400; font-size: 24px; line-height: 1.15; letter-spacing: -0.015em; color: var(--text); }
    .uc-card p { font-size: 14px; line-height: 1.6; color: var(--muted); flex: 1; }
    .uc-link {
      display: inline-flex; align-items: center; gap: 6px;
      font: 600 12px "Fira Code"; letter-spacing: 0.08em;
      color: var(--accent-2); text-decoration: none;
      border-bottom: 1px solid rgba(124,58,237,0.3);
      padding-bottom: 2px;
      width: fit-content;
      transition: color 0.2s, border-color 0.2s;
    }
    .uc-link:hover { color: var(--text); border-color: rgba(255,255,255,0.3); }
    .uc-link svg { width: 11px; height: 11px; }
  

    .cta-band {
      position: relative; padding: 100px 40px 120px; 

    }
    .cta-band::before {
      content: ""; position: absolute; inset: 0;
      background:
        radial-gradient(40% 60% at 80% 50%, rgba(124,58,237,0.07), transparent 60%),
        radial-gradient(40% 60% at 20% 100%, rgba(167,139,250,0.05), transparent 60%);
      pointer-events: none;
    }
    .cta-wrap { position: relative; max-width: 980px; margin: 0 auto; }

    .cta-card {
      position: relative; isolation: isolate;
      border: 1px solid var(--line-2);
      padding: 56px clamp(28px, 5vw, 72px);
      display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px;
      align-items: center;
      background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
      overflow: hidden;
    }
    .cta-card .pip { position: absolute; width: 9px; height: 9px; background: var(--accent); z-index: 4; box-shadow: 0 0 12px rgba(124,58,237,0.55); }
    .cta-card .pip.tl { top: -4.5px; left: -4.5px; }
    .cta-card .pip.tr { top: -4.5px; right: -4.5px; }
    .cta-card .pip.bl { bottom: -4.5px; left: -4.5px; }
    .cta-card .pip.br { bottom: -4.5px; right: -4.5px; }
    .cta-card .dots {
      position: absolute; inset: 0; z-index: 0; pointer-events: none; width: 100%; height: 100%;
      mask-image: radial-gradient(ellipse 70% 90% at 100% 50%, #000 10%, transparent 70%);
      -webkit-mask-image: radial-gradient(ellipse 70% 90% at 100% 50%, #000 10%, transparent 70%);
    }
    .cta-card .dots circle { fill: rgba(124,58,237,0.22); }
    .cta-card .glow {
      position: absolute; inset: -1px; z-index: -1;
      background: radial-gradient(ellipse 50% 80% at 90% 50%, rgba(124,58,237,0.15), transparent 60%);
    }

    .cta-left { position: relative; z-index: 2; }
    .cta-kicker {
      display: inline-flex; align-items: center; gap: 9px;
      font: 600 10px "Fira Code"; letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--accent); margin-bottom: 18px;
    }
    .cta-kicker::before { content: ""; width: 6px; height: 6px; background: var(--accent); display: inline-block; }
    .cta-card h3 {
      font-family: "Fira Code", serif; font-weight: 400;
      font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -0.022em;
      color: var(--text); margin-bottom: 14px;
    }
    .cta-card h3 em {
      font-style: italic;
      background: linear-gradient(145deg, #FFFFFF, var(--accent-2));
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
    }
    .cta-card .desc {
      font-size: 14px; line-height: 1.6; color: var(--muted);
      max-width: 420px;
    }

    .cta-card .btn-row { margin-top: 26px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    .cta-card .btn-cta {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 12px 20px; border-radius: 999px;
      background: var(--text); color: var(--ink);
      font: 600 13px "Fira Sans"; letter-spacing: 0.01em;
      text-decoration: none; cursor: pointer;
      border: 1px solid var(--text);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .cta-card .btn-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(255,255,255,0.12); }
    .cta-card .btn-cta svg { width: 14px; height: 14px; }
    .cta-card .btn-meta {
      font: 500 11px "Fira Code"; letter-spacing: 0.1em;
      color: var(--faint); text-transform: uppercase;
      padding: 8px 12px; border: 1px dashed var(--line-2); border-radius: 999px;
    }

    .cta-right { position: relative; z-index: 2; }
    .cta-right ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
    .cta-right li {
      display: flex; align-items: center; gap: 14px;
      font: 500 14px "Fira Sans"; color: var(--text);
    }
    .cta-right li .check {
      width: 22px; height: 22px; border-radius: 50%;
      display: grid; place-items: center; flex-shrink: 0;
      background: rgba(124,58,237,0.12);
      border: 1px solid rgba(124,58,237,0.35);
      color: var(--accent-2);
    }
    .cta-right li .check svg { width: 11px; height: 11px; }
    .cta-right li .sub { color: var(--muted); font-weight: 400; margin-left: 4px; font-size: 13px; }

    @media (max-width: 860px) {
      .cta-band { padding: 72px 22px 88px; }
      .cta-card { grid-template-columns: 1fr; gap: 32px; padding: 38px 24px; }
    }
  

    .results {
      position: relative; padding: 100px 40px 120px; 

    }
    .results-wrap { position: relative; max-width: 1180px; margin: 0 auto; }
    .results-card {
      position: relative; isolation: isolate;
      border: 1px solid var(--line-2);
      border-radius: 24px;
      overflow: hidden;
      background:
        radial-gradient(ellipse 60% 80% at 100% 50%, rgba(124,58,237,0.08), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
      padding: 56px clamp(28px, 5vw, 72px);
      display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
      align-items: center;
      min-height: 460px;
    }
    .results-card::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: radial-gradient(ellipse 80% 60% at 30% 50%, #000 20%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse 80% 60% at 30% 50%, #000 20%, transparent 80%);
      opacity: 0.5;
    }
    .results-left { position: relative; z-index: 2; }
    .results-kicker {
      display: inline-flex; align-items: center; gap: 9px;
      font: 600 10px "Fira Code"; letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--accent); margin-bottom: 18px;
    }
    .results-kicker::before { content: ""; width: 6px; height: 6px; background: var(--accent); }
    .results-card h2 {
      font-family: "Fira Code", serif; font-weight: 400;
      font-size: clamp(32px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.022em;
      color: var(--text); margin-bottom: 16px;
    }
    .results-card h2 em {
      font-style: italic;
      background: linear-gradient(145deg, #FFFFFF, var(--accent-2));
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
    }
    .results-card .lede {
      font-size: 14px; line-height: 1.6; color: var(--muted);
      max-width: 460px; margin-bottom: 28px;
    }

    .results-stats {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
      border-top: 1px solid var(--line-2);
      border-bottom: 1px solid var(--line-2);
      margin-bottom: 24px;
    }
    .stat-cell {
      padding: 18px 16px 18px 0;
      border-right: 1px solid var(--line-2);
    }
    .stat-cell:last-child { border-right: none; padding-right: 0; }
    .stat-cell:not(:first-child) { padding-left: 16px; }
    .stat-cell .num {
      font-family: "Fira Code", serif; font-size: 32px;
      letter-spacing: -0.015em; color: var(--accent-2);
      line-height: 1; margin-bottom: 6px;
    }
    .stat-cell .lbl {
      font: 500 10px "Fira Code"; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--muted);
      line-height: 1.35;
    }

    .results-card .btn-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    .results-card .btn-cta {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 11px 18px; border-radius: 999px;
      background: var(--text); color: var(--ink);
      font: 600 13px "Fira Sans"; text-decoration: none;
      border: 1px solid var(--text);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .results-card .btn-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(255,255,255,0.12); }
    .results-card .btn-cta svg { width: 13px; height: 13px; }
    .results-card .btn-meta {
      font: 500 10px "Fira Code"; letter-spacing: 0.1em;
      color: var(--faint); text-transform: uppercase;
      padding: 7px 11px; border: 1px dashed var(--line-2); border-radius: 999px;
    }

    /* GLOBE */
    .results-right {
      position: relative; z-index: 2;
      height: 380px;
      display: flex; align-items: center; justify-content: center;
    }
    .globe-stage {
      position: absolute; inset: -40px -80px -80px 0;
      display: flex; align-items: center; justify-content: center;
    }
    .globe-stage canvas {
      width: 100%; height: 100%; max-width: 600px;
      aspect-ratio: 1/1;
      cursor: grab;
      opacity: 0;
      transition: opacity 0.6s ease;
      contain: layout paint size;
    }
    .globe-tag {
      position: absolute; z-index: 3;
      font: 600 9px "Fira Code"; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--muted);
      padding: 4px 8px;
      background: rgba(15,15,35,0.85);
      backdrop-filter: blur(8px);
      border: 1px solid var(--line-2);
      border-radius: 4px;
      pointer-events: none;
    }
    .globe-tag .dot {
      display: inline-block; width: 5px; height: 5px; border-radius: 50%;
      background: var(--accent); margin-right: 6px; vertical-align: 1px;
      box-shadow: 0 0 6px rgba(124,58,237,0.7);
    }

    @media (max-width: 920px) {
      .results-card { grid-template-columns: 1fr; padding: 36px 24px; gap: 32px; min-height: auto; }
      .results-right { height: 300px; }
      .globe-stage { inset: 0; }
      .results { padding: 72px 22px 88px; }
    }
    @media (max-width: 480px) {
      .results-stats { grid-template-columns: 1fr 1fr; }
      .stat-cell:nth-child(2) { border-right: none; }
      .stat-cell:nth-child(3) { grid-column: span 2; border-top: 1px solid var(--line-2); padding-top: 18px; padding-left: 0; }
    }
  

    .pricing {
      position: relative; padding: 120px 40px; 

      overflow: hidden;
    }
    .pricing::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(50% 60% at 50% 0%, rgba(124,58,237,0.06), transparent 60%),
        radial-gradient(40% 60% at 85% 100%, rgba(167,139,250,0.04), transparent 60%);
    }
    .pricing::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 20%, transparent 100%);
      -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 20%, transparent 100%);
    }
    .pricing-wrap { position: relative; max-width: 1240px; margin: 0 auto; }

    /* Header */
    .pricing-head {
      text-align: center; margin-bottom: 56px;
      display: flex; flex-direction: column; align-items: center; gap: 18px;
    }
    .pricing-kicker {
      display: inline-flex; align-items: center; gap: 9px;
      font: 600 10px "Fira Code"; letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--accent);
    }
    .pricing-kicker::before { content: ""; width: 6px; height: 6px; background: var(--accent); }
    .pricing-head h2 {
      font-family: "Fira Code", serif; font-weight: 400;
      font-size: clamp(38px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.024em;
      color: var(--text); max-width: 820px; text-wrap: balance;
    }
    .pricing-head h2 em {
      font-style: italic;
      background: linear-gradient(145deg, #FFFFFF, var(--accent-2));
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .pricing-head .lede {
      font-size: 16px; line-height: 1.55; color: var(--muted);
      max-width: 560px; text-wrap: pretty;
    }

    /* Billing toggle */
    .billing-toggle {
      display: inline-flex; align-items: center; gap: 2px;
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--line-2);
      border-radius: 999px;
      padding: 4px;
      position: relative;
      margin-top: 4px;
    }
    .billing-toggle button {
      position: relative; z-index: 2;
      padding: 8px 18px; border-radius: 999px;
      background: transparent; border: none;
      font: 600 12px "Fira Sans"; color: var(--muted);
      cursor: pointer;
      transition: color 0.2s;
      letter-spacing: 0.005em;
    }
    .billing-toggle button.active { color: var(--ink); }
    .billing-toggle .slider {
      position: absolute; top: 4px; bottom: 4px;
      background: var(--text);
      border-radius: 999px;
      transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 1;
    }
    .billing-toggle .save {
      font: 600 9px "Fira Code"; letter-spacing: 0.14em;
      color: var(--accent-2);
      margin-left: 6px;
      padding: 2px 6px; border-radius: 4px;
      background: rgba(124,58,237,0.14);
      border: 1px solid rgba(124,58,237,0.3);
    }
    .billing-toggle button.active .save { color: var(--ink); background: rgba(15,15,35,0.15); border-color: rgba(15,15,35,0.2); }

    /* Grid */
    .pricing-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
      align-items: stretch;
    }
    @media (max-width: 1100px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 640px) { .pricing-grid { grid-template-columns: 1fr; } }

    .tier {
      position: relative;
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--line-2);
      border-radius: 18px;
      padding: 28px 24px 28px;
      display: flex; flex-direction: column;
      min-width: 0;
      transition: border-color 0.25s, transform 0.25s, background 0.25s;
    }
    .tier:hover { border-color: rgba(124,58,237,0.35); transform: translateY(-3px); }

    .tier.popular {
      background: linear-gradient(180deg, rgba(124,58,237,0.06) 0%, rgba(124,58,237,0.02) 50%, transparent 100%);
      border-color: rgba(124,58,237,0.4);
      box-shadow: 0 20px 60px -20px rgba(124,58,237,0.25), inset 0 0 0 1px rgba(124,58,237,0.12);
    }
    .tier.popular::before {
      content: "MOST POPULAR";
      position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
      font: 600 9px "Fira Code"; letter-spacing: 0.22em;
      background: linear-gradient(145deg, #A78BFA 0%, #7C3AED 100%);
      color: #0F0F23;
      padding: 5px 12px; border-radius: 999px;
      box-shadow: 0 6px 16px rgba(124,58,237,0.35);
    }

    .tier-head {
      border-bottom: 1px dashed var(--line-2);
      padding-bottom: 22px;
      margin-bottom: 22px;
    }
    .tier-name {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      margin-bottom: 4px;
    }
    .tier-name .n {
      font: 600 11px "Fira Code"; letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--text);
    }
    .tier.popular .tier-name .n { color: var(--accent-2); }
    .tier-name .ico {
      width: 26px; height: 26px; border-radius: 7px;
      display: grid; place-items: center;
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--line-2);
      color: var(--muted);
    }
    .tier.popular .tier-name .ico {
      background: rgba(124,58,237,0.12);
      border-color: rgba(124,58,237,0.3);
      color: var(--accent-2);
    }
    .tier-name .ico svg { width: 13px; height: 13px; }

    .tier-tag {
      font-size: 12px; color: var(--faint); line-height: 1.45;
      margin-bottom: 18px;
    }

    .tier-price {
      display: flex; align-items: baseline; gap: 4px;
      margin-bottom: 6px;
      font-family: "Fira Code", serif;
    }
    .tier-price .currency {
      font-size: 20px; color: var(--muted); font-weight: 400;
      transform: translateY(-12px);
    }
    .tier-price .amount {
      font-size: 48px; line-height: 1;
      color: var(--text); font-weight: 400;
      letter-spacing: -0.028em;
      font-variant-numeric: tabular-nums;
      transition: color 0.3s;
    }
    .tier.popular .tier-price .amount {
      background: linear-gradient(145deg, #FFFFFF, var(--accent-2));
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .tier-price .per {
      font: 500 12px "Fira Sans"; color: var(--faint);
      margin-left: 4px;
    }
    .tier-price-strike {
      font: 500 12px "Fira Sans"; color: var(--faint);
      text-decoration: line-through;
      margin-bottom: 14px;
      min-height: 18px;
    }
    .tier-price-strike[hidden] { visibility: hidden; min-height: 18px; display: block; }

    /* CTA */
    .tier-cta {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%;
      padding: 11px 16px; border-radius: 999px;
      font: 600 13px "Fira Sans"; text-decoration: none;
      transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
      margin-bottom: 24px;
    }
    .tier-cta.ghost {
      background: rgba(255,255,255,0.03);
      color: var(--text);
      border: 1px solid var(--line-2);
    }
    .tier-cta.ghost:hover { border-color: rgba(124,58,237,0.5); background: rgba(124,58,237,0.06); }
    .tier-cta.primary {
      background: linear-gradient(145deg, #A78BFA 0%, #7C3AED 100%);
      color: #0F0F23;
      border: 1px solid rgba(124,58,237,0.5);
      box-shadow: 0 10px 24px rgba(124,58,237,0.22);
    }
    .tier-cta.primary:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(124,58,237,0.32); }
    .tier-cta svg { width: 13px; height: 13px; }

    /* Features */
    .tier-feats {
      list-style: none;
      display: flex; flex-direction: column; gap: 11px;
      font-size: 13px; line-height: 1.45;
      color: var(--text);
    }
    .tier-feats li {
      display: flex; align-items: flex-start; gap: 10px;
    }
    .tier-feats li .chk {
      flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%;
      display: grid; place-items: center;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--line-2);
      color: var(--muted);
      margin-top: 1px;
    }
    .tier.popular .tier-feats li .chk {
      background: rgba(124,58,237,0.12);
      border-color: rgba(124,58,237,0.3);
      color: var(--accent-2);
    }
    .tier-feats li .chk svg { width: 9px; height: 9px; }
    .tier-feats li .muted-feat { color: var(--faint); }
    .tier-feats .divider {
      height: 1px; background: var(--line); margin: 4px 0 0;
    }
    .tier-feats .group-label {
      font: 600 9px "Fira Code"; letter-spacing: 0.18em;
      color: var(--faint);
      text-transform: uppercase;
      margin-top: 8px;
    }
    .tier-feats .hl { color: var(--accent-2); font-weight: 600; }

    /* Usage card */
    .usage-card {
      margin-top: 38px;
      border: 1px solid var(--line-2);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
      border-radius: 18px;
      padding: 28px 32px;
      display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center;
    }
    @media (max-width: 860px) { .usage-card { grid-template-columns: 1fr; padding: 24px; } }
    .usage-card .uc-label {
      font: 600 10px "Fira Code"; letter-spacing: 0.22em;
      color: var(--accent); text-transform: uppercase;
      margin-bottom: 10px;
    }
    .usage-card h3 {
      font-family: "Fira Code", serif; font-weight: 400;
      font-size: clamp(22px, 2.4vw, 28px);
      line-height: 1.15; letter-spacing: -0.015em;
      color: var(--text);
      margin-bottom: 10px;
    }
    .usage-card p {
      font-size: 13.5px; line-height: 1.55; color: var(--muted);
      max-width: 440px;
    }
    .uc-rates {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
    }
    .uc-rate {
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--line-2);
      border-radius: 12px;
      padding: 14px 16px;
      transition: border-color 0.2s;
    }
    .uc-rate:hover { border-color: rgba(124,58,237,0.3); }
    .uc-rate .label {
      font: 600 10px "Fira Code"; letter-spacing: 0.18em;
      color: var(--faint); text-transform: uppercase;
      margin-bottom: 6px;
    }
    .uc-rate .val {
      font-family: "Fira Code", serif;
      font-size: 22px; color: var(--text); font-weight: 400;
      letter-spacing: -0.015em;
      font-variant-numeric: tabular-nums;
      display: flex; align-items: baseline; gap: 2px;
    }
    .uc-rate .val .c { font-size: 12px; color: var(--muted); transform: translateY(-5px); }
    .uc-rate .val .p { font: 500 11px "Fira Sans"; color: var(--faint); margin-left: 4px; }

    /* Footnote / comparison strip */
    .pricing-foot {
      margin-top: 24px;
      display: flex; align-items: center; justify-content: center; gap: 28px;
      flex-wrap: wrap;
      font-size: 12px; color: var(--faint);
    }
    .pricing-foot span { display: inline-flex; align-items: center; gap: 7px; }
    .pricing-foot span svg { width: 12px; height: 12px; color: var(--accent-2); }
  

    .pricing-teaser-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
      align-items: stretch;
    }
    @media (max-width: 1100px) { .pricing-teaser-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 640px) { .pricing-teaser-grid { grid-template-columns: 1fr; } }

    .tier-simple {
      position: relative;
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--line-2);
      border-radius: 18px;
      padding: 28px 24px;
      display: flex; flex-direction: column; gap: 10px;
      min-width: 0;
      transition: border-color 0.25s, transform 0.25s;
    }
    .tier-simple:hover { border-color: rgba(124,58,237,0.35); transform: translateY(-3px); }
    .tier-simple.popular {
      background: linear-gradient(180deg, rgba(124,58,237,0.06) 0%, rgba(124,58,237,0.02) 100%);
      border-color: rgba(124,58,237,0.4);
      box-shadow: 0 20px 60px -20px rgba(124,58,237,0.25), inset 0 0 0 1px rgba(124,58,237,0.12);
    }
    .tier-simple.popular::before {
      content: "MOST POPULAR";
      position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
      font: 600 9px "Fira Code"; letter-spacing: 0.22em;
      background: linear-gradient(145deg, #A78BFA 0%, #7C3AED 100%);
      color: #0F0F23;
      padding: 5px 12px; border-radius: 999px;
      box-shadow: 0 6px 16px rgba(124,58,237,0.35);
    }
    .ts-name {
      font: 600 11px "Fira Code"; letter-spacing: 0.2em;
      text-transform: uppercase; color: var(--text);
    }
    .tier-simple.popular .ts-name { color: var(--accent-2); }
    .ts-price {
      font-family: "Fira Code", serif;
      font-size: 42px; line-height: 1; letter-spacing: -0.028em;
      color: var(--text); font-weight: 400;
      display: flex; align-items: baseline; gap: 4px;
    }
    .tier-simple.popular .ts-price {
      background: linear-gradient(145deg, #FFFFFF, var(--accent-2));
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .ts-price .cur { font-size: 18px; color: var(--muted); transform: translateY(-10px); -webkit-text-fill-color: var(--muted); }
    .ts-price .per { font: 500 12px "Fira Sans"; color: var(--faint); margin-left: 2px; -webkit-text-fill-color: var(--faint); }
    .ts-tag { font-size: 13px; color: var(--faint); line-height: 1.45; }
    .ts-cta {
      display: inline-flex; align-items: center; gap: 8px;
      margin-top: 8px;
      padding: 10px 16px; border-radius: 999px;
      font: 600 13px "Fira Sans"; text-decoration: none;
      background: rgba(255,255,255,0.03);
      border: 1px solid var(--line-2); color: var(--text);
      transition: border-color 0.2s, background 0.2s;
      width: 100%; justify-content: center;
    }
    .ts-cta:hover { border-color: rgba(124,58,237,0.5); background: rgba(124,58,237,0.06); }
    .tier-simple.popular .ts-cta {
      background: linear-gradient(145deg, #A78BFA 0%, #7C3AED 100%);
      color: #0F0F23; border-color: rgba(124,58,237,0.5);
    }
    .tier-simple.popular .ts-cta:hover { filter: brightness(1.05); }
    .ts-cta svg { width: 13px; height: 13px; }

    .pricing-view-full {
      margin-top: 36px;
      text-align: center;
    }
    .pricing-view-full a {
      display: inline-flex; align-items: center; gap: 8px;
      font: 500 13px "Fira Code"; letter-spacing: 0.08em;
      color: var(--muted); text-decoration: none;
      border-bottom: 1px solid var(--line-2);
      padding-bottom: 2px;
      transition: color 0.2s, border-color 0.2s;
    }
    .pricing-view-full a:hover { color: var(--accent-2); border-color: rgba(124,58,237,0.5); }
    .pricing-view-full a svg { width: 12px; height: 12px; }
  

    .dev {
      position: relative; padding: 100px 40px 120px; 

    }
    .dev::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(40% 60% at 80% 20%, rgba(124,58,237,0.06), transparent 60%),
        radial-gradient(30% 50% at 10% 100%, rgba(167,139,250,0.04), transparent 60%);
    }
    .dev-wrap { position: relative; max-width: 1180px; margin: 0 auto;
      display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
    @media (max-width: 980px) { .dev-wrap { grid-template-columns: 1fr; gap: 40px; } }

    /* --- LEFT --- */
    .dev-left { padding-top: 8px; }
    .dev-kicker {
      display: inline-flex; align-items: center; gap: 9px;
      font: 600 10px "Fira Code"; letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--accent); margin-bottom: 18px;
    }
    .dev-kicker::before { content: ""; width: 6px; height: 6px; background: var(--accent); }
    .dev-left h2 {
      font-family: "Fira Code", serif; font-weight: 400;
      font-size: clamp(34px, 4.2vw, 54px); line-height: 1.02; letter-spacing: -0.024em;
      color: var(--text); margin-bottom: 16px;
    }
    .dev-left h2 em {
      font-style: italic;
      background: linear-gradient(145deg, #FFFFFF, var(--accent-2));
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
    }
    .dev-left .lede {
      font-size: 15px; line-height: 1.6; color: var(--muted);
      max-width: 460px; margin-bottom: 28px;
    }
    .dev-cta-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 38px; }
    .dev-btn {
      display: inline-flex; align-items: center; gap: 9px;
      padding: 11px 18px; border-radius: 999px;
      background: var(--text); color: var(--ink);
      font: 600 13px "Fira Sans"; text-decoration: none;
      border: 1px solid var(--text);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .dev-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(255,255,255,0.12); }
    .dev-btn.ghost {
      background: transparent; color: var(--text);
      border: 1px solid var(--line-2);
    }
    .dev-btn.ghost:hover { border-color: rgba(124,58,237,0.5); background: rgba(124,58,237,0.08); }
    .dev-btn svg { width: 13px; height: 13px; }

    .dev-props { display: flex; flex-direction: column; gap: 20px; }
    .dev-prop { display: flex; gap: 14px; align-items: flex-start; }
    .dev-prop .ico {
      flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px;
      display: grid; place-items: center;
      background: rgba(124,58,237,0.1);
      border: 1px solid rgba(124,58,237,0.3);
      color: var(--accent-2);
    }
    .dev-prop .ico svg { width: 15px; height: 15px; }
    .dev-prop .body h4 {
      font: 600 13px "Fira Sans"; color: var(--text); margin-bottom: 4px;
      letter-spacing: 0.005em;
    }
    .dev-prop .body p { font-size: 13px; line-height: 1.5; color: var(--muted); }

    /* --- RIGHT (IDE) --- */
    .dev-ide {
      position: relative;
      border: 1px solid var(--line-2);
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(15,15,35,0.95), rgba(15,15,35,0.95));
      backdrop-filter: blur(20px);
      overflow: hidden;
      box-shadow:
        0 24px 60px rgba(0,0,0,0.4),
        0 0 0 1px rgba(124,58,237,0.06),
        inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .ide-bar {
      display: flex; align-items: center; gap: 14px;
      padding: 12px 16px;
      background: rgba(255,255,255,0.025);
      border-bottom: 1px solid var(--line-2);
    }
    .ide-bar .lights { display: flex; gap: 6px; }
    .ide-bar .lights span { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); }
    .ide-bar .lights span:nth-child(1) { background: #F43F5E; }
    .ide-bar .lights span:nth-child(2) { background: #A78BFA; }
    .ide-bar .lights span:nth-child(3) { background: #34D399; }
    .ide-bar .file {
      font: 500 12px "Fira Code"; color: var(--muted);
      display: flex; align-items: center; gap: 8px;
    }
    .ide-bar .file svg { width: 11px; height: 11px; opacity: 0.7; }
    .ide-bar .endpoint {
      margin-left: auto;
      font: 500 10px "Fira Code"; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--faint);
      padding: 4px 9px; border: 1px dashed var(--line-2); border-radius: 4px;
    }
    .ide-bar .endpoint b { color: var(--accent-2); font-weight: 600; }

    .ide-tabs {
      display: flex; gap: 0;
      background: rgba(0,0,0,0.25);
      border-bottom: 1px solid var(--line-2);
      padding: 0 12px;
    }
    .ide-tab {
      padding: 10px 16px;
      font: 500 12px "Fira Code"; color: var(--muted);
      cursor: pointer; background: none; border: none;
      border-bottom: 1.5px solid transparent;
      transition: color 0.2s ease, border-color 0.2s ease;
      letter-spacing: 0.02em;
    }
    .ide-tab:hover { color: var(--text); }
    .ide-tab.is-active { color: var(--accent-2); border-bottom-color: var(--accent); }

    .ide-body {
      display: grid; grid-template-columns: 1fr 280px;
      min-height: 360px;
    }
    @media (max-width: 720px) { .ide-body { grid-template-columns: 1fr; } .ide-body .ide-payload { border-left: none; border-top: 1px solid var(--line-2); } }

    .ide-code {
      position: relative;
      padding: 18px 0;
      overflow: hidden;
      font: 13px/1.65 "Fira Code";
    }
    .ide-code .lines {
      counter-reset: line;
      display: none; padding: 0 6px 0 0;
    }
    .ide-code .lines.is-active { display: block; }
    .ide-code .ln {
      display: grid; grid-template-columns: 38px 1fr; align-items: baseline;
      counter-increment: line;
    }
    .ide-code .ln::before {
      content: counter(line);
      color: var(--faint); text-align: right; padding-right: 14px;
      font-size: 11px; user-select: none;
    }
    .ide-code .ln > span { color: var(--text); white-space: pre-wrap; word-break: break-word; }
    .ide-code .kw { color: #A78BFA; }
    .ide-code .fn { color: var(--accent-2); }
    .ide-code .str { color: #34D399; }
    .ide-code .num { color: #FB7185; }
    .ide-code .com { color: var(--faint); font-style: italic; }
    .ide-code .pn { color: #22D3EE; }

    .ide-payload {
      border-left: 1px solid var(--line-2);
      background: rgba(0,0,0,0.2);
      display: flex; flex-direction: column;
    }
    .ide-payload .head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 14px;
      border-bottom: 1px solid var(--line-2);
      font: 500 10px "Fira Code"; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--muted);
    }
    .ide-payload .head .dot {
      display: inline-flex; align-items: center; gap: 6px;
      color: var(--accent-2);
    }
    .ide-payload .head .dot::before {
      content: ""; width: 6px; height: 6px; border-radius: 50%;
      background: #34D399; box-shadow: 0 0 6px rgba(52,211,153,0.7);
      animation: capDot 1.6s ease-in-out infinite;
    }
    .ide-payload .json {
      padding: 14px;
      font: 12px/1.55 "Fira Code";
      color: var(--muted);
      flex: 1;
    }
    .ide-payload .json .k { color: #22D3EE; }
    .ide-payload .json .s { color: #34D399; }
    .ide-payload .json .n { color: #FB7185; }
    .ide-payload .json .b { color: #A78BFA; }
    .ide-payload .footer {
      padding: 10px 14px; border-top: 1px solid var(--line-2);
      display: flex; align-items: center; justify-content: space-between;
      font: 500 10px "Fira Code"; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--faint);
    }
    .ide-payload .footer .ms { color: var(--accent-2); }
  

    .team-wrap { max-width: 980px; margin: 0 auto; }
    .team-head { text-align: center; margin-bottom: 48px; }
    .team-head .kicker { font: 600 10px "Fira Code"; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
    .team-head h2 { font-family: "Fira Code", serif; font-weight: 400; font-size: clamp(28px, 3.5vw, 40px); line-height: 1.1; letter-spacing: -0.02em; color: #E2E8F0; }
    .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    @media (max-width: 720px) { .team-grid { grid-template-columns: 1fr; } }
    .team-card {
      border: 1px solid var(--line-2); border-radius: 16px; padding: 28px 24px;
      background: rgba(255,255,255,0.02);
    }
    .team-av {
      width: 52px; height: 52px; border-radius: 50%;
      background: rgba(124,58,237,0.12); border: 1px solid rgba(124,58,237,0.3);
      display: grid; place-items: center;
      font: 600 18px "Fira Sans"; color: var(--accent-2);
      margin-bottom: 16px;
    }
    .team-name { font: 600 15px "Fira Sans"; color: #E2E8F0; margin-bottom: 4px; }
    .team-role { font: 500 12px "Fira Code"; color: var(--accent); letter-spacing: 0.08em; margin-bottom: 12px; }
    .team-bio { font-size: 13px; line-height: 1.6; color: var(--muted); }
  

    .blog-wrap { max-width: 980px; margin: 0 auto; padding-top: 72px; }
    .blog-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 36px; flex-wrap: wrap; gap: 14px; }
    .blog-head .kicker { font: 600 10px "Fira Code"; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
    .blog-head a { font: 600 12px "Fira Code"; color: var(--muted); text-decoration: none; letter-spacing: 0.04em; transition: color 0.2s; }
    .blog-head a:hover { color: var(--accent-2); }
    .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    @media (max-width: 720px) { .blog-grid { grid-template-columns: 1fr; } }
    .blog-card {
      border: 1px solid var(--line-2); border-radius: 14px; padding: 24px 22px;
      background: rgba(255,255,255,0.015);
      transition: border-color 0.2s, transform 0.2s;
      text-decoration: none; color: inherit; display: block;
    }
    .blog-card:hover { border-color: rgba(124,58,237,0.35); transform: translateY(-2px); }
    .blog-cat { font: 600 9px "Fira Code"; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
    .blog-title { font: 600 15px "Fira Sans"; color: #E2E8F0; line-height: 1.35; margin-bottom: 10px; }
    .blog-excerpt { font-size: 13px; line-height: 1.6; color: var(--muted); margin-bottom: 14px; }
    .blog-meta { font: 500 11px "Fira Code"; color: var(--faint); letter-spacing: 0.04em; }
  

  /* ════════════════════════════════════════════════════════════
     V6 THEME FINISHER — purple→rose gradient text, neon polish
  ════════════════════════════════════════════════════════════ */

  /* gradient text = v6 signature purple-2 → rose-2 */
  h1 .grad,
  .stat .v .grad,
  .f-manifest .quote .grad,
  .grad {
    background: linear-gradient(110deg, var(--primary-2) 10%, var(--rose-2) 90%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
  }

  /* glass surfaces get v6's tighter blur + neon edge */
  .glass,
  .f-card,
  .cap-card,
  .ep-card,
  .blog-card,
  .results-card,
  .cta-card,
  .dev-ide,
  .ide-payload {
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
  }

  /* featured pricing card = v6 .price.feat with rose glow */
  .ep-card.featured {
    background: linear-gradient(180deg, rgba(124,58,237,0.16) 0%, rgba(244,63,94,0.10) 100%);
    border: 1px solid rgba(124,58,237,0.40);
    box-shadow: 0 0 60px rgba(124,58,237,0.25);
  }

  /* live-status dot recolored to v6 rose pulse */
  .call-status,
  .call-status .dot { color: var(--rose-2); }
  .call-status .dot { background: var(--rose); box-shadow: 0 0 0 0 var(--rose-glow); animation: v6pulse 1.7s infinite; }
  @keyframes v6pulse {
    0%   { box-shadow: 0 0 0 0   rgba(244,63,94,0.55); }
    70%  { box-shadow: 0 0 0 14px rgba(244,63,94,0); }
    100% { box-shadow: 0 0 0 0   rgba(244,63,94,0); }
  }

  /* aria bubble = v6 purple→rose gradient */
  .bubble.aria {
    background: linear-gradient(135deg, rgba(124,58,237,0.30), rgba(244,63,94,0.18)) !important;
    border-color: rgba(124,58,237,0.30) !important;
    color: #fff !important;
  }

  /* orbit dots = purple neon */
  .orbit-dot {
    background: var(--primary) !important;
    box-shadow: 0 0 12px var(--primary-glow) !important;
  }

  /* hero fade end-color matches v6 midnight */
  .hero-fade {
    background: linear-gradient(to bottom,
      rgba(15,15,35,0)   0%,
      rgba(15,15,35,0.5) 40%,
      rgba(15,15,35,0.85) 72%,
      rgba(15,15,35,1)   100%
    ) !important;
  }

  /* selection */
  ::selection { background: var(--primary); color: #fff; }

  /* ════════════════════════════════════════════════════════════
     V6-FAITHFUL OVERRIDES — hero typography + call card
     Pixel-matched to templates/home_v6.html
  ════════════════════════════════════════════════════════════ */

  /* ── HERO LAYOUT (matches v6 .hero + .hero-grid) ─── */
  .hero { padding: 160px 0 100px !important; }
  .wrap {
    max-width: 1280px !important;
    padding: 0 24px !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 56px !important;
    align-items: center !important;
  }
  @media (max-width: 980px) {
    .wrap { grid-template-columns: 1fr !important; gap: 50px !important; padding: 0 24px !important; }
  }

  /* ── EYEBROW (was .badge) ─── */
  .badge {
    align-self: flex-start;
    padding: 0 !important; border: 0 !important; background: transparent !important;
    display: inline-flex; align-items: center; gap: 10px;
    font: 500 11.5px "Fira Code" !important;
    color: var(--accent-2) !important;
    letter-spacing: 0.20em !important; text-transform: uppercase !important;
  }
  .badge .pulse {
    width: 6px !important; height: 6px !important; border-radius: 50%;
    background: var(--accent) !important;
    box-shadow: 0 0 12px var(--accent) !important;
  }
  .badge .pulse::before { display: none !important; }
  .badge .star { display: none !important; }

  /* ── HERO H1 (matches v6 .hero h1) ─── */
  h1 {
    font-family: "Fira Code", monospace !important;
    font-weight: 500 !important;
    font-size: clamp(2.6rem, 5.5vw, 4.8rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.04em !important;
    margin-bottom: 26px !important;
    max-width: none !important;
  }
  h1 .grad {
    font-style: normal !important;
    background: linear-gradient(110deg, var(--primary-2) 0%, var(--rose-2) 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
  }
  /* the 4 language tags after the h1 — match v6 .hero h1 .tag */
  h1 .sm-lang {
    display: inline-block !important;
    font-family: "Fira Code", monospace !important; font-weight: 500;
    font-size: 0.32em !important; vertical-align: middle !important;
    margin: 0 0.2em !important; padding: 0 !important; gap: 4px !important;
  }
  h1 .sm-lang span {
    padding: 0.3em 0.7em !important; border-radius: 8px !important;
    background: rgba(124,58,237,0.18) !important;
    color: var(--primary-2) !important;
    border: 1px solid rgba(124,58,237,0.35) !important;
  }

  /* ── DECK (was .lede) ─── */
  .lede {
    font: 300 17.5px/1.6 "Fira Sans" !important;
    color: var(--text) !important;
    max-width: 540px !important;
    margin-bottom: 30px !important;
  }
  .lede b { color: var(--text) !important; font-weight: 600 !important; }

  /* ── HERO ACTIONS ─── */
  .ctas { gap: 12px !important; margin-bottom: 32px !important; }

  /* ── TRUST → restyle as v6 hero-stats border-top ─── */
  .trust {
    padding-top: 28px !important; border-top: 1px solid var(--line) !important;
    border-bottom: 0 !important; gap: 24px !important; flex-wrap: wrap;
    font: 500 12px "Fira Code" !important; color: var(--muted) !important;
    letter-spacing: 0.10em !important; text-transform: uppercase !important;
  }

  /* ── RIGHT COLUMN: card-stage halo wrapper ─── */
  .right { margin-top: 0 !important; gap: 20px; }
  .right::before {
    content: ""; position: absolute; inset: 18px; pointer-events: none;
    background:
      radial-gradient(circle at 30% 20%, var(--primary-glow), transparent 50%),
      radial-gradient(circle at 70% 80%, var(--rose-glow), transparent 50%);
    filter: blur(60px); opacity: 0.6; z-index: -1;
  }
  .right { position: relative; }

  /* ── GLASS CALL CARD (matches v6 .glass-card) ─── */
  .glass.call-card,
  .call-card {
    padding: 0 !important;
    border-radius: 24px !important;
    background: var(--glass) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 1px solid var(--glass-line) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.10) !important;
    overflow: hidden;
  }
  .call-card::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.10), transparent 50%);
  }
  .call-card > * { position: relative; }

  /* ── GC-HEAD (was .call-head) ─── */
  .call-head {
    padding: 16px 20px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--line);
  }
  .call-status {
    font: 500 11px "Fira Code" !important;
    color: var(--rose-2) !important;
    letter-spacing: 0.16em !important; text-transform: uppercase !important;
  }
  .call-status .dot {
    width: 8px !important; height: 8px !important;
    background: var(--rose) !important;
    box-shadow: 0 0 0 0 var(--rose-glow) !important;
    animation: v6pulse 1.7s infinite !important;
  }
  .call-head .dur {
    font: 500 13px "Fira Code" !important;
    color: var(--text) !important; letter-spacing: 0 !important;
  }

  /* ── WHO-ROW (was .caller-row) ─── */
  .caller-row {
    padding: 14px 20px !important;
    margin-bottom: 0 !important; gap: 12px !important;
    border-bottom: 1px dashed var(--line);
  }
  .caller-av {
    width: 40px !important; height: 40px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--primary), var(--rose)) !important;
    border: 0 !important;
    font-family: "Fira Sans", sans-serif !important; font-style: normal !important;
    font-size: 13px !important; font-weight: 600 !important; color: #fff !important;
    box-shadow: 0 4px 14px var(--primary-glow);
  }
  .caller-av::after { display: none !important; }
  .caller-meta .name {
    font-family: "Fira Code", monospace !important; font-weight: 500 !important;
    font-size: 15px !important; color: var(--text) !important;
  }
  .caller-meta .sub {
    font: 500 11.5px "Fira Code" !important;
    color: var(--muted) !important; letter-spacing: 0 !important;
    margin-top: 2px !important;
  }
  .caller-meta .sub .sep { display: inline; margin: 0 6px; opacity: 0.5; }
  .caller-meta .sub .lang {
    display: inline-block !important;
    padding: 1px 7px !important; border-radius: 5px !important;
    background: rgba(124,58,237,0.20) !important;
    color: var(--primary-2) !important; font-weight: 600 !important;
    margin-left: 4px !important;
    border: 1px solid rgba(124,58,237,0.35);
  }

  /* ── TRANSCRIPT (matches v6 .transcript) ─── */
  .transcript {
    padding: 16px 20px !important;
    height: 168px !important; margin-bottom: 0 !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent) !important;
            mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent) !important;
  }
  .transcript .scroller { gap: 10px !important; }

  /* ── BUBBLES (matches v6 .bubble) ─── */
  .bubble {
    padding: 10px 14px !important;
    border-radius: 14px !important;
    font: 400 13.5px/1.5 "Fira Sans" !important;
    max-width: 88% !important;
    border: 1px solid var(--line) !important;
  }
  .bubble.them {
    background: rgba(255,255,255,0.04) !important;
    color: var(--text) !important;
    border-bottom-left-radius: 14px !important;
  }
  .bubble.aria {
    background: linear-gradient(135deg, rgba(124,58,237,0.30), rgba(244,63,94,0.18)) !important;
    border-color: rgba(124,58,237,0.30) !important;
    color: #fff !important;
    margin-left: auto;
    border-bottom-right-radius: 14px !important;
  }
  .bubble .tag {
    display: block !important;
    font: 500 9.5px "Fira Code" !important;
    letter-spacing: 0.16em !important; opacity: 0.7 !important;
    margin: 0 0 4px 0 !important;
    color: inherit !important;
    text-transform: uppercase !important;
  }
  .bubble.aria .tag { color: var(--primary-2) !important; opacity: 1 !important; }
  .bubble em { color: var(--rose-2) !important; font-style: italic !important; font-family: inherit !important; }

  /* ── GC-FOOT (was .wave-row) ─── */
  .wave-row {
    padding: 14px 20px !important; gap: 14px !important;
    border-top: 1px solid var(--line) !important; padding-top: 14px !important;
    background: rgba(255,255,255,0.02);
  }
  .wave-label { display: none !important; }
  .waveform {
    flex: 1; gap: 3px !important; height: 22px !important;
    align-items: center;
  }
  .waveform .bar {
    width: 3px !important; flex: none !important;
    border-radius: 2px !important; min-height: 4px;
    background: linear-gradient(to top, var(--primary), var(--rose)) !important;
    box-shadow: 0 0 8px var(--primary-glow);
    animation: v6wave 0.9s ease-in-out infinite !important;
  }
  @keyframes v6wave { 0%,100% { height: 4px; } 50% { height: 18px; } }
  .wave-row .latency {
    font: 500 11px "Fira Code" !important;
    color: var(--muted) !important; white-space: nowrap;
    letter-spacing: 0 !important;
  }
  .wave-row .latency b { color: var(--text) !important; font-weight: 500 !important; }

  /* ════════════════════════════════════════════════════════════
     V6 PRICING SECTION — exact port from home_v6.html
  ════════════════════════════════════════════════════════════ */
  .v6-pricing { padding: 100px 0; position: relative; z-index: 1; }
  .v6-pricing-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

  .v6-pricing .v6-head { max-width: 760px; margin: 0 auto 60px; text-align: center; }
  .v6-pricing .v6-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font: 500 11.5px "Fira Code"; color: var(--primary-2);
    letter-spacing: 0.20em; text-transform: uppercase;
  }
  .v6-pricing .v6-eyebrow .pip {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--primary); box-shadow: 0 0 12px var(--primary);
  }
  .v6-pricing .v6-head h2 {
    font-family: "Fira Code", monospace; font-weight: 500;
    font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.05;
    letter-spacing: -0.03em; color: var(--text); margin: 14px 0 14px;
  }
  .v6-pricing .v6-head h2 em {
    font-style: normal;
    background: linear-gradient(110deg, var(--primary-2), var(--rose-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .v6-pricing .v6-head p { font: 300 16.5px "Fira Sans"; color: var(--text); line-height: 1.55; }

  .v6-pricing-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    max-width: 1040px; margin: 0 auto;
  }
  @media (max-width: 880px) {
    .v6-pricing-grid { grid-template-columns: 1fr; max-width: 480px; }
  }

  .v6-price {
    position: relative;
    background: var(--glass);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--glass-line);
    border-radius: 24px;
    padding: 30px;
    display: flex; flex-direction: column; gap: 14px;
    transition: border-color 0.4s, box-shadow 0.4s;
    overflow: hidden;
  }
  .v6-price::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.06), transparent 50%);
  }
  .v6-price > * { position: relative; }
  .v6-price:hover {
    border-color: rgba(124,58,237,0.40);
    box-shadow: 0 0 40px rgba(124,58,237,0.20);
  }
  .v6-price.feat {
    background: linear-gradient(180deg, rgba(124,58,237,0.16) 0%, rgba(244,63,94,0.10) 100%);
    border: 1px solid rgba(124,58,237,0.40);
    box-shadow: 0 0 60px rgba(124,58,237,0.25);
  }
  .v6-price.feat::after {
    content: "MOST CHOSEN"; position: absolute; top: -10px; right: 22px;
    background: linear-gradient(110deg, var(--primary), var(--rose));
    color: #fff; font: 600 10px "Fira Code"; letter-spacing: 0.16em;
    padding: 4px 12px; border-radius: 999px;
    box-shadow: 0 4px 14px var(--primary-glow);
  }
  .v6-price .tier {
    font: 500 11px "Fira Code"; color: var(--primary-2);
    letter-spacing: 0.20em; text-transform: uppercase;
  }
  .v6-price .amt {
    font: 500 44px "Fira Code"; color: var(--text);
    letter-spacing: -0.04em; line-height: 1;
  }
  .v6-price .amt span {
    font-family: "Fira Sans", sans-serif; font-size: 14px;
    color: var(--muted); font-weight: 400;
  }
  .v6-price.feat .amt {
    background: linear-gradient(110deg, var(--primary-2), var(--rose-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .v6-price .copy { font: 300 13.5px "Fira Sans"; color: var(--text); line-height: 1.6; }
  .v6-price ul {
    list-style: none; display: flex; flex-direction: column; gap: 8px;
    padding: 12px 0; margin: 0; border-top: 1px solid var(--line);
  }
  .v6-price ul li {
    font: 400 13.5px "Fira Sans"; display: flex; gap: 9px; align-items: flex-start;
    color: var(--text);
  }
  .v6-price ul li svg {
    width: 16px; height: 16px; stroke: var(--emerald); fill: none; stroke-width: 3;
    flex-shrink: 0; margin-top: 3px;
  }

  /* v6 buttons (scoped) */
  .v6-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 22px; border-radius: 12px;
    font: 600 13.5px "Fira Sans";
    border: 1px solid var(--glass-line);
    background: var(--glass);
    color: var(--text);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    transition: background 0.4s, border-color 0.4s, box-shadow 0.4s, transform 0.4s;
    text-decoration: none; margin-top: auto; width: 100%;
  }
  .v6-btn:hover {
    background: var(--glass-2); border-color: rgba(255,255,255,0.30);
    box-shadow: 0 0 30px rgba(255,255,255,0.06);
  }
  .v6-btn .arrow { transition: transform 0.4s; }
  .v6-btn:hover .arrow { transform: translateX(5px); }
  .v6-btn-purple {
    background: linear-gradient(135deg, var(--primary), var(--primary-3));
    border-color: var(--primary); color: #fff;
    box-shadow: 0 0 30px var(--primary-glow);
  }
  .v6-btn-purple:hover { box-shadow: 0 0 50px var(--primary-glow); }
  .v6-btn-rose {
    background: var(--rose); border-color: var(--rose); color: #fff;
    box-shadow: 0 0 30px var(--rose-glow);
  }
  .v6-btn-rose:hover {
    background: #BE123C; border-color: #BE123C;
    box-shadow: 0 0 50px var(--rose-glow);
  }

  /* ════════════════════════════════════════════════════════════
     BENTO FEATURES — refined precision dashboard
     Hairline borders · delicate plus marks · monospace data feeds
  ════════════════════════════════════════════════════════════ */
  .bento { padding: 88px 0 96px; position: relative; z-index: 1; }
  .bento-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

  /* ── ONE UNIFIED BOX — 2 sub-columns flow independently ─── */
  .bento-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0;
    border: 1px solid rgba(226,232,240,0.12);
    border-radius: 14px;
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.005)),
      rgba(15,15,35,0.55);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow:
      0 24px 60px rgba(0,0,0,0.30),
      inset 0 1px 0 rgba(255,255,255,0.04);
  }
  .bento-col {
    display: flex; flex-direction: column;
    min-width: 0;
  }
  .bento-col-left { border-right: 1px solid rgba(226,232,240,0.06); }
  /* let the last card in each column expand to fill remaining height */
  .bento-col > .bento-card:last-child { flex-grow: 1; }
  /* Dotted-grid texture across the entire box */
  .bento-grid::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    opacity: 0.30; z-index: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
    background-size: 18px 18px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 35%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 35%, transparent 90%);
  }
  /* 4 corner plus marks ONLY on the outer corners of the unified box */
  .bento-grid::after {
    content: "";
    position: absolute; inset: -7px;
    pointer-events: none; z-index: 4;
    background:
      /* vertical strokes */
      linear-gradient(to right, transparent calc(7px - 0.5px), var(--muted) calc(7px - 0.5px), var(--muted) calc(7px + 0.5px), transparent calc(7px + 0.5px)) top left / 14px 14px no-repeat,
      linear-gradient(to right, transparent calc(7px - 0.5px), var(--muted) calc(7px - 0.5px), var(--muted) calc(7px + 0.5px), transparent calc(7px + 0.5px)) top right / 14px 14px no-repeat,
      linear-gradient(to right, transparent calc(7px - 0.5px), var(--muted) calc(7px - 0.5px), var(--muted) calc(7px + 0.5px), transparent calc(7px + 0.5px)) bottom left / 14px 14px no-repeat,
      linear-gradient(to right, transparent calc(7px - 0.5px), var(--muted) calc(7px - 0.5px), var(--muted) calc(7px + 0.5px), transparent calc(7px + 0.5px)) bottom right / 14px 14px no-repeat,
      /* horizontal strokes */
      linear-gradient(to bottom, transparent calc(7px - 0.5px), var(--muted) calc(7px - 0.5px), var(--muted) calc(7px + 0.5px), transparent calc(7px + 0.5px)) top left / 14px 14px no-repeat,
      linear-gradient(to bottom, transparent calc(7px - 0.5px), var(--muted) calc(7px - 0.5px), var(--muted) calc(7px + 0.5px), transparent calc(7px + 0.5px)) top right / 14px 14px no-repeat,
      linear-gradient(to bottom, transparent calc(7px - 0.5px), var(--muted) calc(7px - 0.5px), var(--muted) calc(7px + 0.5px), transparent calc(7px + 0.5px)) bottom left / 14px 14px no-repeat,
      linear-gradient(to bottom, transparent calc(7px - 0.5px), var(--muted) calc(7px - 0.5px), var(--muted) calc(7px + 0.5px), transparent calc(7px + 0.5px)) bottom right / 14px 14px no-repeat;
    opacity: 0.55;
  }

  /* Card base — flow naturally inside its column */
  .bento-card {
    position: relative;
    border: 0;
    border-bottom: 1px solid rgba(226,232,240,0.06);
    border-radius: 0;
    background: transparent;
    padding: 22px 24px;
    display: flex; flex-direction: column; gap: 10px;
    min-height: 0;
    transition: background 0.25s ease;
    overflow: visible;
    z-index: 1;
  }
  /* Last card in each column has no bottom border (it's the box edge) */
  .bento-col > .bento-card:last-child { border-bottom: 0; }

  .bento-card > * { position: relative; z-index: 1; }
  .bento-card:hover {
    background: linear-gradient(180deg, rgba(124,58,237,0.05), transparent);
  }

  /* Hide the per-card plus marks (now only outer-box corners have them) */
  .bento-card .px { display: none; }

  /* Card head — icon inline with title, no chunky bg */
  .bc-head {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 2px;
  }
  .bc-head .ic {
    width: 16px; height: 16px; flex-shrink: 0;
    color: var(--primary-2);
    margin-top: 1px;
    stroke-width: 1.6 !important;
    background: none !important; border: 0 !important;
    padding: 0 !important;
  }
  .bc-head h3 {
    font-family: "Fira Code", monospace;
    font-weight: 500;
    font-size: 13.5px; line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--text); margin: 0;
  }
  .bento-card.b1 .bc-head h3 { font-size: 15.5px; line-height: 1.25; }

  /* Description — refined sober body text */
  .bc-desc {
    font: 300 12.5px/1.55 "Fira Sans";
    color: var(--muted);
    margin: 0;
  }
  .bc-desc em {
    font-family: "Fira Code", monospace; font-style: italic;
    color: var(--primary-2); font-weight: 400;
  }

  /* B1 — language tags, tighter pills */
  .bc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
  .bc-tags .tag {
    padding: 3px 9px; border-radius: 4px;
    font: 600 9.5px "Fira Code"; letter-spacing: 0.14em;
    color: var(--faint);
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    text-transform: uppercase;
  }
  .bc-tags .tag.on {
    color: var(--primary-2);
    background: rgba(124,58,237,0.10);
    border-color: rgba(124,58,237,0.30);
  }

  /* B2 — payload preview, tighter terminal look */
  .bc-payload {
    margin-top: auto;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 6px;
    padding: 11px 12px;
    font: 400 10.5px/1.55 "Fira Code";
  }
  .bc-payload .h {
    color: var(--primary-2); font-weight: 600;
    font-size: 8.5px; letter-spacing: 0.20em;
    text-transform: uppercase; margin-bottom: 7px;
  }
  .bc-payload .ln { color: var(--muted); margin-bottom: 3px; }
  .bc-payload .ln span { color: var(--faint); margin-right: 4px; }
  .bc-payload .ln b { color: var(--text); font-weight: 500; }
  .bc-payload .ln .ok { color: var(--emerald); font-weight: 600; }
  .bc-payload .ln.action {
    color: var(--text); font-size: 10px;
    margin-top: 7px; margin-bottom: 0;
    padding-top: 7px; border-top: 1px dashed rgba(255,255,255,0.06);
  }

  /* B3 — Naira anchor amount */
  .bc-naira {
    display: flex; align-items: baseline; gap: 10px;
    margin-top: auto; flex-wrap: wrap;
  }
  .bc-naira .amt {
    font: 500 38px "Fira Code";
    letter-spacing: -0.04em; line-height: 1;
    background: linear-gradient(110deg, var(--primary-2), var(--rose-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .bc-naira .lbl {
    font: 500 11px "Fira Code"; color: var(--faint);
    letter-spacing: 0.04em;
  }

  /* B4 — clock + active call pill */
  .bc-clock {
    display: flex; align-items: center; gap: 10px;
    margin-top: auto; flex-wrap: wrap;
  }
  .bc-clock .time {
    font: 500 24px "Fira Code"; color: var(--text);
    letter-spacing: -0.02em; line-height: 1;
  }
  .bc-clock .time small {
    font-size: 11px; color: var(--faint);
    margin-left: 3px; font-weight: 400;
  }
  .bc-clock .pill-live {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px; border-radius: 4px;
    background: rgba(52,211,153,0.08);
    border: 1px solid rgba(52,211,153,0.30);
    font: 600 9.5px "Fira Code"; color: var(--emerald);
    letter-spacing: 0.12em; text-transform: uppercase;
  }
  .bc-clock .pulse {
    width: 5px; height: 5px; border-radius: 50%; background: var(--emerald);
    box-shadow: 0 0 6px var(--emerald);
    animation: bcPulse 1.6s ease-in-out infinite;
  }
  @keyframes bcPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

  /* B5 — brand config preview, more sober */
  .bc-config {
    margin-top: auto;
    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 2px;
  }
  .bc-config .k {
    font: 600 8.5px "Fira Code"; color: var(--faint);
    letter-spacing: 0.18em; text-transform: uppercase;
    margin-top: 6px;
  }
  .bc-config .k:first-child { margin-top: 0; }
  .bc-config .v {
    font: 600 12.5px "Fira Sans"; color: var(--text);
    line-height: 1.4;
  }
  .bc-config .v.muted {
    font-weight: 400; color: var(--muted);
    font-size: 11.5px; font-style: italic;
  }

  /* B6 — knowledge base file rows */
  .bc-kb { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
  .bc-kb .file {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 10px; border-radius: 5px;
    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(255,255,255,0.05);
    font: 500 11.5px "Fira Code"; color: var(--muted);
    letter-spacing: 0.01em;
  }
  .bc-kb .file .dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--primary-2);
    box-shadow: 0 0 4px var(--primary-glow); flex-shrink: 0;
  }
  .bc-kb .file b {
    margin-left: auto; font: 600 8.5px "Fira Code";
    color: var(--emerald); letter-spacing: 0.18em;
  }

  /* ── B7 MANIFEST CELL — cropped to fit narrower 3-col width ─── */
  .bento-card.b7 {
    padding: 20px 22px;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(180deg, rgba(124,58,237,0.07), rgba(244,63,94,0.03));
  }
  .bento-card.b7:hover {
    background: linear-gradient(180deg, rgba(124,58,237,0.10), rgba(244,63,94,0.05));
  }
  .b7 .bm-kicker {
    font: 600 9px "Fira Code"; color: var(--primary-2);
    letter-spacing: 0.22em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .b7 .bm-kicker span { color: var(--faint); letter-spacing: 0.14em; }
  .b7 .bm-kicker::before {
    content: ""; width: 14px; height: 1px;
    background: linear-gradient(to right, var(--primary-2), transparent);
  }

  .b7 .bm-quote {
    font-family: "Fira Code", monospace;
    font-weight: 500;
    font-size: clamp(1.15rem, 1.6vw, 1.55rem);
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
  }
  .b7 .bm-quote .thin { font-weight: 300; color: var(--muted); }
  .b7 .bm-quote em {
    font-style: normal;
    background: linear-gradient(110deg, var(--primary-2), var(--rose-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .b7 .bm-quote del {
    text-decoration: line-through;
    text-decoration-color: var(--rose);
    text-decoration-thickness: 1.2px;
    color: var(--muted); font-weight: 400;
  }
  .b7 .bm-quote .bm-lang {
    display: inline-block; padding: 1px 5px;
    margin: 0 1px; border-radius: 3px;
    font: 600 0.62em "Fira Code"; letter-spacing: 0.12em;
    color: var(--faint);
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    vertical-align: 0.18em;
    text-transform: uppercase;
  }
  .b7 .bm-quote .bm-lang.on {
    color: var(--primary-2);
    background: rgba(124,58,237,0.12);
    border-color: rgba(124,58,237,0.35);
  }

  .b7 .bm-sig {
    font: 400 10.5px "Fira Sans"; color: var(--muted);
    line-height: 1.5;
    padding-top: 10px;
    border-top: 1px dashed rgba(255,255,255,0.07);
  }
  .b7 .bm-sig p { margin: 0; }
  .b7 .bm-sig em {
    color: var(--text); font-family: "Fira Code", monospace;
    font-style: italic; font-weight: 500;
  }
  .b7 .bm-sig .from {
    font: 500 8.5px "Fira Code"; color: var(--faint);
    letter-spacing: 0.18em; margin-top: 5px;
    text-transform: uppercase;
  }
  .b7 .bm-sig .from b { color: var(--text); font-weight: 500; }

  /* ── Responsive ─── */
  @media (max-width: 720px) {
    .bento { padding: 56px 0; }
    .bento-wrap { padding: 0 16px; }
    .bento-grid { grid-template-columns: 1fr; border-radius: 12px; }
    .bento-col-left { border-right: 0; border-bottom: 1px solid rgba(226,232,240,0.06); }
    .bento-card { padding: 20px 22px; }
    .bento-card.b1 .bc-head h3 { font-size: 14.5px; }
    .bento-card.b7 { padding: 22px; }
    .b7 .bm-quote { font-size: clamp(1rem, 4.5vw, 1.2rem); }
    .b7 .bm-quote br { display: none; }
  }