:root {
      --bg-deep: #0c0c0e;
      --bg-surface: #131316;
      --bg-elevated: #1a1a1f;
      --bg-card: #16161a;
      --border: rgba(255,255,255,0.06);
      --border-bright: rgba(255,255,255,0.1);
      --text-primary: #e8e8ec;
      --text-secondary: #9898a6;
      --text-dim: #5c5c6a;
      --accent: #f59e0b;
      --accent-dim: rgba(245,158,11,0.15);
      --accent-glow: rgba(245,158,11,0.06);
      --green: #22c55e;
      --green-dim: rgba(34,197,94,0.15);
      --red: #ef4444;
      --blue: #3b82f6;
      --blue-dim: rgba(59,130,246,0.12);
    }

    * { margin:0; padding:0; box-sizing:border-box; }

    body {
      font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--bg-deep);
      color: var(--text-primary);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    .mono { font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace; }

    /* ── UTILITY ────────────────────────────────── */
    .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
    .sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }

    a { color: inherit; text-decoration: none; }
    button { cursor: pointer; border: none; font-family: inherit; }

    /* ── NAV ─────────────────────────────────────── */
    .nav {
      position: sticky; top: 0; z-index: 40;
      border-bottom: 1px solid var(--border);
      background: rgba(12,12,14,0.85);
      backdrop-filter: blur(16px) saturate(1.4);
      -webkit-backdrop-filter: blur(16px) saturate(1.4);
    }
    .nav-inner { display:flex; align-items:center; justify-content:space-between; height:60px; }
    .nav-brand { display:flex; align-items:center; gap:0.75rem; }
    .nav-brand-icon {
      width:34px; height:34px; border-radius:8px;
      background: linear-gradient(135deg, var(--accent), #d97706);
      display:grid; place-items:center;
      font-family:'JetBrains Mono',monospace; font-weight:800; font-size:15px; color:#0c0c0e;
    }
    .nav-brand-text { font-weight:600; font-size:1rem; letter-spacing:-0.01em; }
    .nav-brand-text span { color: var(--accent); }
    .nav-links { display:flex; align-items:center; gap:2rem; }
    .nav-links a { font-size:0.85rem; color:var(--text-secondary); transition:color 0.15s; }
    .nav-links a:hover { color:var(--text-primary); }
    .nav-actions { display:flex; align-items:center; gap:0.75rem; }
    .btn-ghost {
      padding:0.5rem 1rem; border-radius:8px; font-size:0.85rem; font-weight:500;
      color:var(--text-secondary); background:transparent; transition:all 0.15s;
    }
    .btn-ghost:hover { color:var(--text-primary); background:rgba(255,255,255,0.05); }
    .btn-primary {
      padding:0.5rem 1.25rem; border-radius:8px; font-size:0.85rem; font-weight:600;
      color:#0c0c0e; background:var(--accent); transition:all 0.15s;
    }
    .btn-primary:hover { background:#eab308; }
    .btn-primary-lg {
      padding:0.75rem 1.75rem; border-radius:10px; font-size:0.95rem; font-weight:600;
      color:#0c0c0e; background:var(--accent); transition:all 0.15s; display:inline-flex; align-items:center; gap:0.5rem;
    }
    .btn-primary-lg:hover { background:#eab308; }
    .btn-outline-lg {
      padding:0.75rem 1.75rem; border-radius:10px; font-size:0.95rem; font-weight:600;
      color:var(--text-primary); background:transparent; border:1px solid var(--border-bright); transition:all 0.15s;
      display:inline-flex; align-items:center; gap:0.5rem;
    }
    .btn-outline-lg:hover { border-color:rgba(255,255,255,0.2); background:rgba(255,255,255,0.03); }

    .menu-btn { display:none; background:none; color:var(--text-secondary); padding:0.5rem; }

    /* ── HERO ────────────────────────────────────── */
    .hero {
      position: relative; overflow: hidden;
      padding: 6rem 0 5rem;
      background:
        radial-gradient(ellipse 900px 500px at 70% -5%, rgba(245,158,11,0.07), transparent 60%),
        radial-gradient(ellipse 600px 400px at 0% 10%, rgba(59,130,246,0.05), transparent 50%),
        var(--bg-deep);
    }
    .hero-chip {
      display:inline-flex; align-items:center; gap:0.5rem;
      padding:0.3rem 0.75rem; border-radius:100px;
      border:1px solid var(--border-bright); background:rgba(255,255,255,0.03);
      font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent);
    }
    .hero-chip .dot { width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse 2s ease-in-out infinite; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
    .hero h1 {
      margin-top:1.25rem; font-family:'JetBrains Mono',monospace;
      font-size:clamp(2.4rem,5.5vw,3.5rem); font-weight:800; line-height:1.15; letter-spacing:-0.03em;
    }
    .hero h1 .highlight {
      background: linear-gradient(90deg, var(--accent), #fbbf24, #f59e0b);
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    .hero-sub { margin-top:1.25rem; font-size:1.15rem; color:var(--text-secondary); max-width:580px; line-height:1.7; }
    .hero-actions { margin-top:2rem; display:flex; flex-wrap:wrap; gap:0.75rem; }

    /* ── CHAT DEMO ────────────────────────────────── */
    .chat-demo {
      margin-top: 3rem;
      background: var(--bg-surface);
      border: 1px solid var(--border-bright);
      border-radius: 12px;
      overflow: hidden;
      max-width: 700px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.03);
    }
    .chat-bar {
      display:flex; align-items:center; gap:0.6rem; padding:0.75rem 1rem;
      background:var(--bg-elevated); border-bottom:1px solid var(--border);
    }
    .chat-bar-dot { width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse 2s ease-in-out infinite; }
    .chat-bar-title { font-size:0.8rem; font-weight:600; color:var(--text-primary); }
    .chat-bar-badge {
      font-size:0.65rem; font-weight:500; padding:0.15rem 0.5rem; border-radius:100px;
      background:var(--accent-dim); color:var(--accent); margin-left:auto;
    }
    .chat-body { padding:1.25rem; display:grid; gap:1rem; }
    .chat-msg { display:grid; gap:0.3rem; }
    .chat-role { font-size:0.7rem; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.05em; }
    .chat-context { font-weight:400; text-transform:none; letter-spacing:0; color:var(--text-dim); opacity:0.7; }
    .chat-user .chat-text {
      background:rgba(245,158,11,0.08); border:1px solid rgba(245,158,11,0.15);
      border-radius:10px; padding:0.7rem 0.9rem; font-size:0.9rem; color:var(--text-primary); line-height:1.5;
    }
    .chat-ai .chat-text {
      background:var(--bg-elevated); border:1px solid var(--border);
      border-radius:10px; padding:0.7rem 0.9rem; font-size:0.9rem; color:var(--text-secondary); line-height:1.5;
    }
    .chat-footer {
      padding:0.6rem 1rem; font-size:0.7rem; color:var(--text-dim);
      border-top:1px solid var(--border); background:var(--bg-elevated);
    }

    /* ── SPOTLIGHT ────────────────────────────────── */
    .spotlight {
      padding:5rem 0; border-top:1px solid var(--border);
      background: linear-gradient(180deg, rgba(245,158,11,0.02) 0%, var(--bg-deep) 100%);
    }
    .spotlight-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
    .spotlight-label { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--accent); }
    .spotlight h2 {
      margin-top:0.75rem; font-family:'JetBrains Mono',monospace;
      font-size:clamp(1.5rem,3.5vw,2.5rem); font-weight:700; line-height:1.2; letter-spacing:-0.02em;
    }
    .spotlight-desc { margin-top:1rem; font-size:1.05rem; color:var(--text-secondary); line-height:1.7; }
    .spotlight-list { margin-top:1.5rem; list-style:none; display:grid; gap:0.75rem; }
    .spotlight-list li {
      display:flex; align-items:flex-start; gap:0.75rem; color:var(--text-secondary); font-size:0.95rem;
    }
    .spotlight-list .icon {
      flex-shrink:0; width:22px; height:22px; border-radius:6px;
      background:var(--accent-dim); color:var(--accent);
      display:grid; place-items:center; font-size:0.7rem; margin-top:2px;
    }
    .spotlight-demo {
      background:var(--bg-card); border:1px solid var(--border-bright); border-radius:12px;
      padding:1.5rem; display:grid; gap:1rem;
    }
    .demo-chip {
      display:inline-flex; align-items:center; gap:0.4rem;
      padding:0.25rem 0.6rem; border-radius:100px;
      font-size:0.7rem; font-weight:600; letter-spacing:0.03em;
      background:var(--green-dim); color:var(--green);
      width:fit-content;
    }
    .demo-block {
      background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; padding:1rem;
    }
    .demo-block-label { font-size:0.7rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.06em; }
    .demo-block-text { margin-top:0.4rem; font-size:0.9rem; color:var(--text-primary); }
    .demo-block-sub { margin-top:0.3rem; font-size:0.85rem; color:var(--text-secondary); }
    .demo-note { font-size:0.7rem; color:var(--text-dim); }

    /* ── VALUE STRIP ──────────────────────────────── */
    .value-strip {
      margin-top:2.5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
    }
    .value-card {
      background:var(--bg-card); border:1px solid var(--border); border-radius:10px;
      padding:1.25rem;
    }
    .value-top { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.6rem; flex-wrap:wrap; }
    .pill {
      display:inline-flex; align-items:center; padding:0.2rem 0.55rem; border-radius:100px;
      font-size:0.65rem; font-weight:600; letter-spacing:0.03em;
    }
    .pill.good { background:var(--green-dim); color:var(--green); }
    .pill.info { background:var(--blue-dim); color:var(--blue); }
    .pill.note { background:var(--accent-dim); color:var(--accent); }
    .value-card h3 { font-size:0.95rem; font-weight:600; margin-bottom:0.35rem; }
    .value-card p { font-size:0.82rem; color:var(--text-secondary); line-height:1.55; }

    /* ── COMPARE CTA ─────────────────────────────── */
    .compare-cta {
      padding:3rem 0; border-top:1px solid var(--border);
      background:var(--bg-surface);
    }
    .compare-box {
      background: linear-gradient(135deg, rgba(245,158,11,0.06), rgba(59,130,246,0.04));
      border:1px solid rgba(245,158,11,0.15); border-radius:14px;
      padding:2.5rem; display:flex; align-items:center; justify-content:space-between; gap:2rem;
    }
    .compare-actions { display:flex; gap:0.75rem; flex-shrink:0; }

    /* ── FEATURES ─────────────────────────────────── */
    .features { padding:5rem 0; }
    .section-label { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--accent); }
    .section-title {
      margin-top:0.5rem; font-family:'JetBrains Mono',monospace;
      font-size:clamp(1.75rem,3.5vw,2.2rem); font-weight:700; letter-spacing:-0.02em;
    }
    .section-desc { margin-top:0.5rem; color:var(--text-secondary); font-size:1rem; }
    .feature-grid { margin-top:2.5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
    .feature-card {
      background:var(--bg-card); border:1px solid var(--border); border-radius:12px;
      padding:1.5rem; transition:border-color 0.2s, box-shadow 0.2s;
    }
    .feature-card:hover { border-color:var(--border-bright); box-shadow:0 4px 20px rgba(0,0,0,0.2); }
    .feature-card-icon {
      width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
      font-size:1.1rem;
    }
    .feature-card h3 {
      margin-top:0.75rem; font-weight:600; font-size:1rem; letter-spacing:-0.01em;
    }
    .feature-card p { margin-top:0.5rem; font-size:0.9rem; color:var(--text-secondary); line-height:1.6; }

    /* ── HOW IT WORKS ─────────────────────────────── */
    .how {
      padding:5rem 0; border-top:1px solid var(--border);
      background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-surface) 100%);
    }
    .how-grid { margin-top:2.5rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
    .how-card {
      background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:1.5rem;
      position:relative;
    }
    .how-step {
      font-family:'JetBrains Mono',monospace; font-size:0.7rem; text-transform:uppercase;
      letter-spacing:0.1em; color:var(--text-dim);
    }
    .how-card h3 { margin-top:0.5rem; font-weight:600; font-size:0.95rem; }
    .how-card p { margin-top:0.5rem; font-size:0.85rem; color:var(--text-secondary); line-height:1.6; }

    /* ── SECURITY ─────────────────────────────────── */
    .security { padding:5rem 0; }
    .security-grid { margin-top:2.5rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
    .security-card {
      background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:1.5rem;
    }
    .security-card h3 { font-weight:600; font-size:0.95rem; margin-bottom:0.75rem; }
    .security-card ul { list-style:none; display:grid; gap:0.5rem; }
    .security-card li {
      font-size:0.85rem; color:var(--text-secondary); line-height:1.5;
      padding-left:1rem; position:relative;
    }
    .security-card li::before {
      content:'›'; position:absolute; left:0; color:var(--accent); font-weight:700;
    }

    /* ── PRICING ──────────────────────────────────── */
    .pricing {
      padding:5rem 0; border-top:1px solid var(--border);
      background:var(--bg-surface);
    }
    .billing-toggle { margin:1.5rem 0; display:flex; align-items:center; gap:0.75rem; }
    .billing-btn {
      padding:0.3rem 0.75rem; border-radius:100px; font-size:0.8rem; font-weight:500;
      border:1px solid var(--border-bright); background:rgba(255,255,255,0.03);
      color:var(--text-secondary); transition:all 0.15s;
    }
    .billing-btn[aria-pressed="true"] { background:var(--accent-dim); color:var(--accent); border-color:rgba(245,158,11,0.3); }
    .billing-label { font-size:0.85rem; color:var(--text-dim); }

    .plan-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
    .plan-card {
      background:var(--bg-card); border:1px solid var(--border); border-radius:12px;
      padding:1.5rem; display:flex; flex-direction:column;
    }
    .plan-card.featured { border-color:rgba(245,158,11,0.3); box-shadow:0 0 30px rgba(245,158,11,0.05); }
    .plan-card h3 { font-weight:600; font-size:1.1rem; }
    .plan-card .plan-desc { margin-top:0.25rem; font-size:0.8rem; color:var(--text-dim); }
    .plan-card .plan-price {
      margin-top:1.25rem; font-family:'JetBrains Mono',monospace;
      font-size:1.75rem; font-weight:800; letter-spacing:-0.03em;
    }
    .plan-card .plan-period { font-size:0.8rem; font-weight:400; color:var(--text-dim); }
    .plan-card ul { margin-top:1.25rem; list-style:none; display:grid; gap:0.5rem; flex:1; }
    .plan-card li { font-size:0.8rem; color:var(--text-secondary); line-height:1.5; }
    .plan-card .plan-btn {
      margin-top:1.5rem; padding:0.6rem; border-radius:8px; font-size:0.85rem; font-weight:600;
      text-align:center; transition:all 0.15s;
    }
    .plan-btn-primary { background:var(--accent); color:#0c0c0e; }
    .plan-btn-primary:hover { background:#eab308; }
    .plan-btn-outline { background:transparent; border:1px solid var(--border-bright); color:var(--text-primary); }
    .plan-btn-outline:hover { border-color:rgba(255,255,255,0.2); }

    /* Comparison table */
    .comparison {
      margin-top:3rem;
      overflow-x:auto;
      -webkit-overflow-scrolling: touch;
      position: relative;
    }
    .comparison::after {
      content:'';
      position:absolute;
      top:0; right:0; bottom:0;
      width:2rem;
      background: linear-gradient(to right, transparent, var(--bg-surface));
      pointer-events:none;
    }
    .comparison table { width:100%; font-size:0.8rem; border-collapse:collapse; }
    .comparison th { padding:0.75rem; text-align:center; color:var(--text-secondary); font-weight:500; border-bottom:1px solid var(--border); }
    .comparison th:first-child { text-align:left; }
    .comparison td { padding:0.75rem; text-align:center; color:var(--text-secondary); border-bottom:1px solid var(--border); }
    .comparison td:first-child { text-align:left; color:var(--text-primary); }
    .comparison .check { color:var(--green); }
    .comparison .dash { color:var(--text-dim); }
    .comparison-note { margin-top:1rem; font-size:0.75rem; color:var(--text-dim); }

    /* ── FAQ ──────────────────────────────────────── */
    .faq { padding:5rem 0; }
    .faq-grid { margin-top:2rem; display:grid; gap:0.75rem; max-width:800px; }
    .faq-item {
      background:var(--bg-card); border:1px solid var(--border); border-radius:10px;
      padding:1.25rem 1.5rem; transition:border-color 0.2s;
    }
    .faq-item:hover { border-color:var(--border-bright); }
    .faq-item h3 { font-weight:600; font-size:0.95rem; margin-bottom:0.5rem; }
    .faq-item p { font-size:0.9rem; color:var(--text-secondary); line-height:1.7; }

    /* ── CTA ──────────────────────────────────────── */
    .cta {
      padding:5rem 0; border-top:1px solid var(--border);
    }
    .cta-box {
      background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(217,119,6,0.05));
      border:1px solid rgba(245,158,11,0.15); border-radius:16px;
      padding:3rem; position:relative; overflow:hidden;
    }
    .cta-box h3 { font-family:'JetBrains Mono',monospace; font-size:1.75rem; font-weight:700; letter-spacing:-0.02em; }
    .cta-box p { margin-top:0.5rem; color:var(--text-secondary); font-size:1rem; }
    .cta-actions { margin-top:1.5rem; display:flex; gap:0.75rem; flex-wrap:wrap; }

    /* ── FOOTER ───────────────────────────────────── */
    .footer { padding:3.5rem 0; border-top:1px solid var(--border); }
    .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; }
    .footer-brand { font-weight:600; color:var(--text-primary); }
    .footer-tagline { margin-top:0.5rem; font-size:0.85rem; color:var(--text-dim); }
    .footer-col-title { font-weight:500; font-size:0.85rem; color:var(--text-primary); margin-bottom:0.75rem; }
    .footer-col a { display:block; font-size:0.85rem; color:var(--text-dim); padding:0.2rem 0; transition:color 0.15s; }
    .footer-col a:hover { color:var(--text-primary); }
    .footer-bottom {
      margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--border);
      display:flex; justify-content:space-between; align-items:center;
      font-size:0.8rem; color:var(--text-dim);
    }

    /* ── PAIN ─────────────────────────────────────── */
    .pain { padding:5rem 0; border-top:1px solid var(--border); background:var(--bg-surface); }
    .pain-intro { max-width:560px; margin-bottom:3rem; }
    .pain-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
    .pain-card {
      background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:1.75rem;
    }
    .pain-card-label {
      font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em;
      color:var(--text-dim); margin-bottom:0.75rem;
    }
    .pain-card h3 { font-size:1rem; font-weight:700; margin-bottom:0.5rem; line-height:1.3; }
    .pain-card p { font-size:0.875rem; color:var(--text-secondary); line-height:1.65; }
    .pain-resolution {
      margin-top:2.5rem; padding:1.5rem 2rem;
      background:linear-gradient(135deg, rgba(245,158,11,0.06), rgba(34,197,94,0.04));
      border:1px solid rgba(245,158,11,0.15); border-radius:12px;
      display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
    }
    .pain-resolution p { font-size:1rem; color:var(--text-secondary); max-width:600px; line-height:1.6; }
    .pain-resolution strong { color:var(--text-primary); }

    /* ── RESPONSIVE ───────────────────────────────── */
    @media (max-width:1024px) {
      .pain-grid { grid-template-columns:repeat(2,1fr); }
      .value-strip { grid-template-columns: 1fr; }
      .compare-box { padding: 2rem; flex-direction:column; align-items:flex-start; }
      .feature-grid { grid-template-columns:repeat(2,1fr); }
      .plan-grid { grid-template-columns:repeat(2,1fr); }
      .security-grid { grid-template-columns:repeat(2,1fr); }
      .how-grid { grid-template-columns:repeat(2,1fr); }
      .footer-grid { grid-template-columns:1fr 1fr; }
    }
    @media (max-width:768px) {
      .pain-grid { grid-template-columns:1fr; }
      .pain-resolution { flex-direction:column; }
      .nav-links, .nav-actions { display:none; }
      .menu-btn { display:block; }
      .hero { padding:3.5rem 0; }
      .spotlight-grid { grid-template-columns:1fr; }
      .feature-grid { grid-template-columns:1fr; }
      .plan-grid { grid-template-columns:1fr; }
      .security-grid { grid-template-columns:1fr; }
      .how-grid { grid-template-columns:1fr; }
      .footer-grid { grid-template-columns:1fr; }
      .comparison { font-size:0.7rem; }
      .compare-actions { flex-direction:column; width:100%; }
    }

    /* ── MOBILE MENU ──────────────────────────────── */
    .mobile-menu {
      display:none; border-top:1px solid var(--border); padding:1rem 1.5rem;
      background:rgba(12,12,14,0.95); backdrop-filter:blur(16px);
    }
    .mobile-menu.open { display:block; }
    .mobile-menu a { display:block; padding:0.5rem 0; font-size:0.9rem; color:var(--text-secondary); }
    .mobile-menu a:hover { color:var(--text-primary); }
    .mobile-menu-actions { margin-top:0.75rem; display:flex; gap:0.75rem; }