:root {
            --bg:      #060d14;
            --fg:      #e0ecf5;
            --accent:  #00c896;
            --accent2: #00e0a8;
            --muted:   rgba(224,236,245,0.5);
            --glow:    rgba(0,200,150,0.25);
            --card:    rgba(255,255,255,0.03);
            --card2:   rgba(255,255,255,0.06);
            --border:  rgba(0,200,150,0.14);
        }

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

        body {
            background: var(--bg);
            color: var(--fg);
            font-family: 'DM Sans', sans-serif;
            font-size: 15px;
            line-height: 1.7;
            overflow-x: hidden;
        }

        /* ── Grain + ambient glow ── */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background:
                radial-gradient(ellipse 80% 55% at 50% -8%, rgba(0,200,150,0.1) 0%, transparent 68%),
                url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
            pointer-events: none;
            z-index: 0;
        }

        /* ── Animations ── */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(28px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes pulseRing {
            0%   { transform: scale(1);   opacity: 0.55; }
            100% { transform: scale(1.7); opacity: 0; }
        }
        @keyframes tickerScroll {
            0%   { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        @keyframes dotBlink {
            0%, 100% { opacity: 1; }
            50%       { opacity: 0.15; }
        }

        .fade-up { opacity: 0; animation: fadeUp 0.75s cubic-bezier(0.16,1,0.3,1) forwards; }
        .d1 { animation-delay: 0.10s; }
        .d2 { animation-delay: 0.22s; }
        .d3 { animation-delay: 0.34s; }
        .d4 { animation-delay: 0.46s; }
        .d5 { animation-delay: 0.58s; }
        .d6 { animation-delay: 0.70s; }

        .reveal {
            opacity: 0;
            transform: translateY(22px);
            transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1);
        }
        .reveal.in { opacity: 1; transform: translateY(0); }
        .reveal.r1 { transition-delay: 0.08s; }
        .reveal.r2 { transition-delay: 0.18s; }
        .reveal.r3 { transition-delay: 0.28s; }
        .reveal.r4 { transition-delay: 0.38s; }
        .reveal.r5 { transition-delay: 0.48s; }

        /* ── Layout ── */
        .wrap {
            max-width: 1080px;
            margin: 0 auto;
            padding: 0 clamp(1rem, 5vw, 2.5rem);
            position: relative;
            z-index: 1;
        }

        /* ── Sticky site header (nav + ticker) ── */
        .site-header {
            position: sticky;
            top: 0;
            z-index: 100;
        }

        /* ── Nav ── */
        .nav {
            background: rgba(6,13,20,0.92);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--border);
            padding: 0.8rem 0;
        }
        .nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
        .nav-brand {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            text-decoration: none;
            color: var(--fg);
        }
        .nav-brand img { width: 28px; height: 28px; border-radius: 50%; }
        .nav-brand-name {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 1.05rem;
            letter-spacing: 0.08em;
            line-height: 1;
        }
        .nav-brand-name em { font-style: normal; color: var(--accent); }
        .nav-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.42rem 1.05rem;
            background: var(--accent);
            color: #000;
            font-weight: 600;
            font-size: 0.8rem;
            letter-spacing: 0.04em;
            text-decoration: none;
            border-radius: 4px;
            white-space: nowrap;
            transition: opacity 0.18s, transform 0.15s;
        }
        .nav-pill:hover { opacity: 0.88; transform: translateY(-1px); }

        /* ── Ticker ── */
        .ticker {
            background: rgba(0,200,150,0.06);
            border-bottom: 1px solid var(--border);
            overflow: hidden;
            white-space: nowrap;
            padding: 0.32rem 0;
            user-select: none;
        }
        .ticker-track {
            display: inline-flex;
            gap: 2.8rem;
            animation: tickerScroll 22s linear infinite;
        }
        .ticker-item {
            font-size: 0.7rem;
            letter-spacing: 0.12em;
            font-weight: 600;
            color: var(--accent);
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 0.45rem;
        }
        .ticker-dot {
            width: 5px; height: 5px;
            background: var(--accent);
            border-radius: 50%;
            animation: dotBlink 1.6s ease-in-out infinite;
        }

        /* ── Hero ── */
        .hero {
            padding: clamp(4.5rem, 11vw, 8.5rem) 0 clamp(3rem, 8vw, 6rem);
            text-align: center;
            position: relative;
            z-index: 1;
        }
        .live-tag {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            font-size: 0.7rem;
            letter-spacing: 0.16em;
            font-weight: 600;
            color: var(--accent);
            text-transform: uppercase;
            border: 1px solid rgba(0,200,150,0.3);
            padding: 0.3rem 0.85rem;
            border-radius: 100px;
            margin-bottom: 1.8rem;
        }
        .live-dot {
            width: 7px; height: 7px;
            background: var(--accent);
            border-radius: 50%;
            position: relative;
            flex-shrink: 0;
        }
        .live-dot::after {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            background: var(--accent);
            opacity: 0.45;
            animation: pulseRing 1.6s ease-out infinite;
        }
        .hero-h1 {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(3.4rem, 13vw, 8rem);
            letter-spacing: 0.02em;
            line-height: 0.92;
            margin-bottom: 1.5rem;
            max-width: 880px;
            margin-left: auto;
            margin-right: auto;
        }
        .hero-h1 em { font-style: normal; color: var(--accent); }
        .hero-sub {
            font-size: clamp(1rem, 2.8vw, 1.18rem);
            color: var(--muted);
            max-width: 560px;
            margin: 0 auto 2.5rem;
            font-weight: 300;
            line-height: 1.65;
        }
        .hero-btns {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
            margin-bottom: 3.8rem;
        }
        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.9rem 2rem;
            background: var(--accent);
            color: #000;
            font-weight: 700;
            font-size: 0.92rem;
            letter-spacing: 0.04em;
            text-decoration: none;
            border-radius: 6px;
            box-shadow: 0 0 24px rgba(0,200,150,0.32);
            transition: opacity 0.18s, transform 0.15s, box-shadow 0.2s;
        }
        .btn-primary:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 5px 32px rgba(0,200,150,0.5); }
        .btn-ghost {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.9rem 1.8rem;
            background: transparent;
            color: var(--fg);
            font-weight: 500;
            font-size: 0.92rem;
            text-decoration: none;
            border: 1px solid rgba(224,236,245,0.18);
            border-radius: 6px;
            transition: border-color 0.2s, color 0.2s, transform 0.15s;
        }
        .btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

        /* ── Hero stat strip ── */
        .stat-strip {
            display: flex;
            align-items: stretch;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0;
            border: 1px solid var(--border);
            border-radius: 10px;
            overflow: hidden;
            max-width: 680px;
            margin: 0 auto;
            background: var(--card);
        }
        .stat-cell {
            flex: 1;
            min-width: 120px;
            padding: 1.3rem 0.9rem;
            text-align: center;
            border-right: 1px solid var(--border);
            transition: background 0.2s;
        }
        .stat-cell:last-child { border-right: none; }
        .stat-cell:hover { background: var(--card2); }
        .stat-n {
            display: block;
            font-family: 'Bebas Neue', sans-serif;
            font-size: 2.1rem;
            letter-spacing: 0.05em;
            color: var(--accent);
            line-height: 1;
            margin-bottom: 0.25rem;
        }
        .stat-l {
            display: block;
            font-size: 0.65rem;
            letter-spacing: 0.13em;
            font-weight: 600;
            text-transform: uppercase;
            color: var(--muted);
        }

        /* ── Section chrome ── */
        hr.sep { border: none; border-top: 1px solid var(--border); margin: 0; }
        .section { padding: clamp(3.5rem,8vw,6rem) 0; position: relative; z-index: 1; }
        .sec-tag {
            display: block;
            font-size: 0.68rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--accent);
            font-weight: 600;
            margin-bottom: 0.55rem;
        }
        .sec-h {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(2rem,5.5vw,3.6rem);
            letter-spacing: 0.03em;
            line-height: 1.02;
            margin-bottom: 0.9rem;
        }
        .sec-h em { font-style: normal; color: var(--accent); }
        .sec-sub {
            color: var(--muted);
            font-size: 0.95rem;
            max-width: 500px;
            line-height: 1.65;
            margin-bottom: 2.5rem;
        }

        /* ── Steps grid ── */
        .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px,1fr)); gap: 1.1rem; }
        .step-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 2rem 1.8rem;
            transition: border-color 0.2s, background 0.2s, transform 0.2s;
        }
        .step-card:hover { border-color: rgba(0,200,150,0.32); background: var(--card2); transform: translateY(-3px); }
        .step-n {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 3.8rem;
            letter-spacing: 0.02em;
            color: rgba(0,200,150,0.11);
            line-height: 1;
            margin-bottom: 0.4rem;
        }
        .step-emoji { font-size: 1.5rem; margin-bottom: 0.9rem; display: block; }
        .step-t {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 1.35rem;
            letter-spacing: 0.06em;
            margin-bottom: 0.5rem;
        }
        .step-d { font-size: 0.87rem; color: var(--muted); line-height: 1.6; }

        /* ── Two-col split ── */
        .split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
        @media (max-width: 700px) { .split { grid-template-columns: 1fr; gap: 2rem; } }

        /* ── Code preview ── */
        .code-box {
            background: rgba(0,0,0,0.42);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 1.5rem 1.4rem;
            font-family: 'Courier New', monospace;
            font-size: 0.8rem;
            line-height: 2;
            color: rgba(224,236,245,0.72);
            position: relative;
            overflow: hidden;
        }
        .code-box::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--accent), transparent 70%);
        }
        .code-box .cb { content: ''; display: block; }
        .ck  { color: #8be5c8; }
        .cs  { color: #e8c97d; }
        .cc  { color: rgba(224,236,245,0.28); }
        .cn  { color: #a8d8f0; }
        .ca  { color: var(--accent); font-weight: 700; }

        /* ── Profile pills ── */
        .pills { display: flex; gap: 0.6rem; flex-wrap: wrap; }
        .pill {
            padding: 0.5rem 1rem;
            border-radius: 100px;
            border: 1px solid;
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.03em;
            display: flex;
            align-items: center;
            gap: 0.35rem;
            transition: transform 0.15s, box-shadow 0.15s;
        }
        .pill:hover { transform: scale(1.05); box-shadow: 0 2px 14px rgba(0,0,0,0.3); }
        .p-con { color:#00c896; border-color:rgba(0,200,150,0.38); background:rgba(0,200,150,0.07); }
        .p-bal { color:#36c9e8; border-color:rgba(54,201,232,0.38); background:rgba(54,201,232,0.07); }
        .p-agg { color:#f0a500; border-color:rgba(240,165,0,0.38);  background:rgba(240,165,0,0.07);  }
        .p-exp { color:#e0648c; border-color:rgba(224,100,140,0.38);background:rgba(224,100,140,0.07);}
        .p-yol { color:#ff5050; border-color:rgba(255,80,80,0.38);  background:rgba(255,80,80,0.07);  }

        /* ── Feature grid ── */
        .feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(275px,1fr)); gap: 1rem; }
        .feat-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 1.7rem;
            transition: border-color 0.2s, background 0.2s, transform 0.2s;
        }
        .feat-card:hover { border-color: rgba(0,200,150,0.28); background: var(--card2); transform: translateY(-2px); }
        .feat-icon {
            width: 38px; height: 38px;
            background: rgba(0,200,150,0.09);
            border: 1px solid rgba(0,200,150,0.2);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
            font-size: 1.05rem;
        }
        .feat-t { font-weight: 600; font-size: 0.93rem; margin-bottom: 0.35rem; letter-spacing: 0.02em; }
        .feat-d { font-size: 0.84rem; color: var(--muted); line-height: 1.6; }

        /* ── Final CTA ── */
        .cta-section {
            padding: clamp(4.5rem,11vw,8rem) 0;
            text-align: center;
            position: relative;
            z-index: 1;
        }
        .cta-glow {
            position: absolute;
            left: 50%; top: 50%;
            transform: translate(-50%,-50%);
            width: 700px; height: 700px;
            background: radial-gradient(circle, rgba(0,200,150,0.07) 0%, transparent 62%);
            pointer-events: none;
        }
        .cta-h {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(3rem,9vw,6rem);
            letter-spacing: 0.03em;
            line-height: 0.96;
            margin-bottom: 1.1rem;
        }
        .cta-h em { font-style: normal; color: var(--accent); }
        .cta-sub {
            color: var(--muted);
            font-size: 1rem;
            max-width: 460px;
            margin: 0 auto 2.5rem;
            line-height: 1.65;
        }
        .btn-xl {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            padding: 1.1rem 2.6rem;
            background: var(--accent);
            color: #000;
            font-weight: 700;
            font-size: 1rem;
            letter-spacing: 0.04em;
            text-decoration: none;
            border-radius: 8px;
            box-shadow: 0 0 32px rgba(0,200,150,0.36);
            transition: opacity 0.18s, transform 0.15s, box-shadow 0.2s;
        }
        .btn-xl:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 6px 42px rgba(0,200,150,0.52); }

        /* ── Footer ── */
        .footer {
            border-top: 1px solid var(--border);
            padding: 1.8rem 0;
            position: relative;
            z-index: 1;
        }
        .footer .wrap { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
        .footer-brand { font-family: 'Bebas Neue', sans-serif; font-size: 0.88rem; letter-spacing: 0.08em; color: rgba(224,236,245,0.4); }
        .footer-brand em { font-style: normal; color: var(--accent); }
        .footer-note { font-size: 0.7rem; color: rgba(224,236,245,0.28); max-width: 480px; line-height: 1.5; text-align: right; }
        @media (max-width: 580px) { .footer-note { text-align: left; } }

        /* ── Arrow SVG helper ── */
        .arr { display: inline-block; }

        /* ── Mobile / Responsive ── */
        @media (max-width: 640px) {
            .code-box { font-size: 0.72rem; padding: 1.1rem 1rem; overflow-x: auto; }
            .hero-btns { flex-direction: column; align-items: stretch; }
            .btn-primary, .btn-ghost { justify-content: center; }
            .stat-cell { min-width: 90px; }
            .feat-grid { grid-template-columns: 1fr; }
            .steps { grid-template-columns: 1fr; }
        }

/* ----------------------------------------- */

/* ── Character host styles ─────────────────────────── */
    .rpa-hosts {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1.5rem;
      margin-bottom: 2rem;
      flex-wrap: wrap;
    }
    .rpa-host-intro {
      display: flex;
      align-items: center;
      gap: .75rem;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.08);
      border-left: 3px solid var(--hc, var(--accent));
      border-radius: 12px;
      padding: .75rem 1.1rem;
      transition: border-color .2s;
    }
    .rpa-host-avatar-sm svg { display: block; }
    .rpa-host-intro-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.05rem;
      letter-spacing: .1em;
      line-height: 1;
      margin-bottom: .18rem;
    }
    .rpa-host-intro-role {
      font-size: .68rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 600;
    }
    .rpa-hosts-vs {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.2rem;
      color: var(--muted);
      letter-spacing: .1em;
    }

    /* ── Wizard card ────────────────────────────────────── */
    .rpa-card {
      background: var(--card2);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: clamp(1.4rem, 4vw, 2.4rem);
      max-width: 600px;
      margin: 0 auto;
      text-align: left;
      transition: border-color .3s;
    }
    /* Character host strip inside card */
    .rpa-host {
      display: flex;
      align-items: center;
      gap: .9rem;
      padding: .7rem .9rem;
      border-radius: 12px;
      border-left: 3px solid var(--rpa-hc, var(--accent));
      background: rgba(255,255,255,.025);
      margin-bottom: 1.2rem;
      transition: border-color .4s, background .4s;
    }
    .rpa-host-avatar { flex-shrink: 0; display: flex; align-items: center; }
    .rpa-host-meta { flex: 1; }
    .rpa-host-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.05rem;
      letter-spacing: .1em;
      line-height: 1;
      color: var(--rpa-hc, var(--accent));
      transition: color .4s;
    }
    .rpa-host-role {
      font-size: .68rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 600;
    }
    .rpa-host-badge {
      font-family: 'Bebas Neue', sans-serif;
      font-size: .8rem;
      letter-spacing: .12em;
      color: var(--muted);
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.08);
      padding: .2rem .55rem;
      border-radius: 6px;
    }
    .rpa-progress {
      height: 3px;
      background: rgba(255,255,255,.06);
      border-radius: 3px;
      margin-bottom: 1.3rem;
      overflow: hidden;
    }
    .rpa-progress-bar {
      height: 100%;
      background: var(--rpa-hc, var(--accent));
      border-radius: 3px;
      transition: width .4s cubic-bezier(.4,0,.2,1), background .4s;
      width: 0%;
    }
    .rpa-question {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(1.3rem, 3.5vw, 1.85rem);
      letter-spacing: .04em;
      color: var(--fg);
      line-height: 1.25;
      margin-bottom: .5rem;
    }
    .rpa-question-sub {
      font-size: .8rem;
      color: var(--muted);
      letter-spacing: .04em;
      margin-bottom: 1.4rem;
      min-height: 1.2em;
    }
    .rpa-opts {
      display: flex;
      flex-direction: column;
      gap: .6rem;
    }
    .rpa-opt {
      background: rgba(255,255,255,.025);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 12px;
      padding: .8rem 1.1rem;
      font-family: 'DM Sans', sans-serif;
      font-size: .88rem;
      color: rgba(224,236,245,.8);
      cursor: pointer;
      text-align: left;
      transition: background .18s, border-color .18s, color .18s, transform .15s;
      display: flex;
      align-items: center;
      gap: .75rem;
      width: 100%;
    }
    .rpa-opt:hover {
      background: var(--rpa-opt-hover, rgba(0,200,150,.07));
      border-color: var(--rpa-opt-border, rgba(0,200,150,.28));
      color: var(--fg);
      transform: translateX(3px);
    }
    .rpa-opt-dot {
      width: 20px; height: 20px; min-width: 20px;
      border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,.15);
      display: flex; align-items: center; justify-content: center;
      font-size: 9px; font-weight: 700;
      flex-shrink: 0;
      transition: background .18s, border-color .18s, color .18s;
      color: var(--muted);
    }
    .rpa-opt:hover .rpa-opt-dot {
      background: var(--rpa-dot-bg, rgba(0,200,150,.18));
      border-color: var(--rpa-hc, var(--accent));
      color: var(--rpa-hc, var(--accent));
    }
    .rpa-start-btn {
      display: inline-flex; align-items: center; gap: .5rem;
      background: linear-gradient(135deg, var(--accent), #009e78);
      border: none; border-radius: 10px;
      padding: .85rem 2rem;
      font-family: 'DM Sans', sans-serif;
      font-size: .9rem; font-weight: 600;
      color: #fff; cursor: pointer;
      transition: opacity .18s, transform .18s;
      margin: .5rem auto 0;
    }
    .rpa-start-btn:hover { opacity: .88; transform: translateY(-1px); }

    /* Result */
    .rpa-result { display: flex; flex-direction: column; align-items: center; gap: .9rem; text-align: center; }
    .rpa-result-char { margin-bottom: .3rem; }
    .rpa-result-badge { font-size: 2.6rem; line-height: 1; }
    .rpa-result-label {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 2.2rem; letter-spacing: .08em;
      color: var(--accent);
    }
    .rpa-result-verdict {
      font-size: .82rem; font-weight: 600;
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--muted); margin-bottom: -.2rem;
    }
    .rpa-result-desc {
      font-size: .9rem;
      color: rgba(224,236,245,.75);
      max-width: 440px;
      line-height: 1.65;
    }
    .rpa-cta {
      display: inline-flex; align-items: center; gap: .5rem;
      background: linear-gradient(135deg, var(--accent), #009e78);
      border-radius: 10px; padding: .85rem 1.8rem;
      font-family: 'DM Sans', sans-serif; font-size: .9rem; font-weight: 600;
      color: #fff; text-decoration: none;
      transition: opacity .18s, transform .18s;
      text-align: center;
    }
    .rpa-cta:hover { opacity: .88; transform: translateY(-1px); }
    .rpa-retry {
      background: none; border: 1px solid rgba(255,255,255,.1);
      border-radius: 8px; padding: .4rem 1rem;
      font-size: .78rem; color: var(--muted);
      cursor: pointer; font-family: 'DM Sans', sans-serif;
      transition: border-color .18s, color .18s;
    }
    .rpa-retry:hover { border-color: rgba(0,200,150,.35); color: var(--fg); }

    /* Mobile tweaks for quiz */
    @media (max-width: 520px) {
      .rpa-hosts { gap: .75rem; flex-direction: column; align-items: stretch; }
      .rpa-hosts-vs { text-align: center; }
      .rpa-host-intro { justify-content: center; }
      .rpa-question { font-size: 1.2rem; }
      .rpa-opt { font-size: .84rem; padding: .72rem .9rem; }
      .rpa-cta { width: 100%; justify-content: center; }
    }

    /* ── Lead Capture ──────────────────────────────────── */
    .lc-card {
      background: var(--card2);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: clamp(2rem, 5vw, 3rem);
      max-width: 540px;
      margin: 0 auto;
      text-align: center;
      display: flex; flex-direction: column; align-items: center; gap: 1rem;
    }
    .lc-icon { font-size: 2.2rem; }
    .lc-h {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(1.6rem, 4vw, 2.2rem);
      letter-spacing: .05em; line-height: 1.15;
    }
    .lc-h em { color: var(--accent); font-style: normal; }
    .lc-sub { font-size: .88rem; color: var(--muted); line-height: 1.65; max-width: 420px; }
    .lc-form {
      display: flex; gap: .6rem; width: 100%; max-width: 420px; flex-wrap: wrap;
    }
    .lc-input {
      flex: 1; min-width: 0;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(0,200,150,.18);
      border-radius: 10px; padding: .8rem 1rem;
      color: var(--fg); font-family: 'DM Sans', sans-serif; font-size: .9rem;
      outline: none; transition: border-color .18s;
    }
    .lc-input:focus { border-color: rgba(0,200,150,.4); }
    .lc-input::placeholder { color: rgba(224,236,245,.28); }
    .lc-btn {
      display: flex; align-items: center; justify-content: center; gap: .45rem;
      background: linear-gradient(135deg, var(--accent), #009e78);
      border: none; border-radius: 10px; padding: .8rem 1.4rem;
      font-family: 'DM Sans', sans-serif; font-size: .88rem; font-weight: 600;
      color: #fff; cursor: pointer; white-space: nowrap;
      transition: opacity .18s;
    }
    .lc-btn:hover { opacity: .85; }
    .lc-btn:disabled { opacity: .6; cursor: not-allowed; }
    .lc-success { color: var(--accent); font-size: .9rem; font-weight: 500; }
    .lc-error { color: #ff6b6b; font-size: .88rem; }
    @keyframes lcspin { to { transform: rotate(360deg); } }

    /* Mobile: stack lead form vertically */
    @media (max-width: 480px) {
      .lc-form { flex-direction: column; }
      .lc-btn { width: 100%; }
    }