/* ───────────── Reset & base ───────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    font-feature-settings: 'cv11','ss01','ss03';
    background: #07070b;
    color: #e7e7ee;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}
@supports (font-variation-settings: normal) { body { font-family: 'Inter var', sans-serif; } }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img, svg { display: block; }
code, pre { font-family: 'SF Mono', ui-monospace, Menlo, monospace; }

/* ───────────── Decorative backgrounds ───────────── */
.bg-gradient {
    position: fixed; inset: -20% -10% auto -10%; height: 80vh; z-index: -2;
    background:
        radial-gradient(ellipse 60% 50% at 30% 0%, rgba(99,102,241,.28), transparent 70%),
        radial-gradient(ellipse 60% 50% at 80% 10%, rgba(236,72,153,.18), transparent 70%),
        radial-gradient(ellipse 80% 50% at 50% 30%, rgba(56,189,248,.14), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
}
.bg-grid {
    position: fixed; inset: 0; z-index: -1;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, black 30%, transparent 80%);
    pointer-events: none;
}

/* ───────────── Navigation ───────────── */
.nav {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    background: rgba(7,7,11,.55);
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.nav-inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 28px;
}
.brand {
    display: flex; align-items: center; gap: 9px;
    font-weight: 600; font-size: 16px; letter-spacing: -0.01em;
    color: #fafaff;
}
.brand svg { display: block; }
.brand-mark { filter: drop-shadow(0 4px 12px rgba(99, 102, 241, 0.45)); }
.nav-links {
    display: flex; gap: 28px; font-size: 14px; color: #9ca3af;
}
.nav-links a { transition: color .15s ease; }
.nav-links a:hover { color: #fafaff; }
@media (max-width: 720px) { .nav-links { display: none; } }

/* ───────────── Buttons ───────────── */
.btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 18px; border-radius: 10px;
    font-weight: 500; font-size: 14px; letter-spacing: -0.01em;
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
    cursor: pointer; border: 0; white-space: nowrap;
}
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 8px; }
.btn-lg { padding: 14px 22px; font-size: 15px; border-radius: 12px; }
.btn-primary {
    background: linear-gradient(180deg, #fafaff 0%, #d8d8e0 100%);
    color: #0a0a13;
    box-shadow:
        0 1px 0 rgba(255,255,255,.45) inset,
        0 0 0 1px rgba(255,255,255,.15),
        0 14px 30px -10px rgba(99,102,241,.45),
        0 6px 14px -4px rgba(0,0,0,.4);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 0 0 1px rgba(255,255,255,.2), 0 18px 40px -10px rgba(99,102,241,.55), 0 8px 18px -4px rgba(0,0,0,.5); }
.btn-ghost {
    background: rgba(255,255,255,.05);
    color: #fafaff;
    border: 1px solid rgba(255,255,255,.08);
}
.btn-ghost:hover { background: rgba(255,255,255,.09); }

/* ───────────── HERO ───────────── */
.hero {
    max-width: 1200px; margin: 0 auto;
    padding: 96px 28px 80px;
    text-align: center;
}
.badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; margin-bottom: 28px;
    background: rgba(99,102,241,.10);
    border: 1px solid rgba(99,102,241,.25);
    border-radius: 999px;
    font-size: 12.5px; color: #c7d2fe;
    letter-spacing: -0.01em;
}
.badge-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #a5b4fc;
    box-shadow: 0 0 0 4px rgba(165,180,252,.18);
    animation: dot-pulse 2.4s ease-in-out infinite;
}
@keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(165,180,252,.18); }
    50%      { box-shadow: 0 0 0 8px rgba(165,180,252,.05); }
}

.hero h1 {
    font-size: clamp(44px, 7.5vw, 84px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 0 0 22px;
    color: #fafaff;
}
.grad-text {
    background: linear-gradient(120deg, #a5b4fc 0%, #f0abfc 40%, #93c5fd 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.lede {
    max-width: 640px; margin: 0 auto 40px;
    font-size: 18px; line-height: 1.55;
    color: #b6b6c5;
}
.cta-row {
    display: flex; gap: 12px;
    align-items: center; justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.cta-meta {
    font-size: 13px; color: #6b7280;
    margin-top: 14px;
}

/* ───────────── HERO mock window ───────────── */
.hero-mock {
    position: relative;
    max-width: 740px; margin: 80px auto 0;
    perspective: 1400px;
}
.mock-window {
    position: relative;
    background: rgba(20,20,28,.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255,255,255,.05) inset,
        0 30px 80px -20px rgba(0,0,0,.6),
        0 12px 30px -10px rgba(99,102,241,.18);
    transform: rotateX(8deg) translateY(0);
}
.mock-titlebar {
    display: flex; align-items: center; gap: 7px;
    padding: 12px 16px;
    background: rgba(255,255,255,.025);
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.dot { width: 11px; height: 11px; border-radius: 50%; }
.dot-r { background: #ff5f57; }
.dot-y { background: #febc2e; }
.dot-g { background: #28c840; }
.mock-url {
    margin-left: 14px;
    font-size: 12px; color: #6b7280;
    background: rgba(255,255,255,.04);
    padding: 4px 12px; border-radius: 6px;
}
.mock-content {
    min-height: 230px;
    padding: 36px 32px;
    text-align: left;
    font-size: 16px; color: #d1d5db; line-height: 1.7;
}
.mock-text { margin: 0; }
.mock-typed {
    background: linear-gradient(120deg, #f3f4f6 0%, #c7d2fe 50%, #f3f4f6 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.mock-caret {
    color: #a5b4fc;
    animation: caret 1s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* The recording pill mocked at the bottom of the window */
.mock-overlay {
    position: absolute;
    left: 50%; bottom: 22px;
    transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 14px;
    padding: 12px 22px;
    background: rgba(15,15,22,.86);
    backdrop-filter: blur(16px) saturate(170%);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    box-shadow:
        0 12px 28px -6px rgba(0,0,0,.55),
        0 0 0 1px rgba(99,102,241,.10) inset;
}

/* recording dot — pulsing red */
.rec-dot { position: relative; width: 18px; height: 18px; }
.rec-dot-pulse {
    position: absolute; inset: 0; border-radius: 50%;
    background: rgba(239,68,68,.45);
    animation: recpulse 1.05s ease-out infinite;
}
.rec-dot-core {
    position: absolute; inset: 4px; border-radius: 50%;
    background: linear-gradient(135deg,#ff5d5d 0%,#e11d48 100%);
    box-shadow: 0 0 10px rgba(239,68,68,.6);
}
@keyframes recpulse {
    0%   { transform: scale(.85); opacity: .9; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* bars */
.bars { display: flex; gap: 3px; align-items: center; height: 28px; }
.bars span {
    display: block;
    width: 3px; min-height: 4px;
    border-radius: 99px;
    background: linear-gradient(180deg, #fafaff 0%, #c7d2fe 100%);
    animation: bar 1.4s ease-in-out infinite;
}
.bars span:nth-child(1)  { animation-delay: -0.05s; }
.bars span:nth-child(2)  { animation-delay: -0.10s; }
.bars span:nth-child(3)  { animation-delay: -0.18s; }
.bars span:nth-child(4)  { animation-delay: -0.25s; }
.bars span:nth-child(5)  { animation-delay: -0.32s; }
.bars span:nth-child(6)  { animation-delay: -0.38s; }
.bars span:nth-child(7)  { animation-delay: -0.42s; }
.bars span:nth-child(8)  { animation-delay: -0.50s; }
.bars span:nth-child(9)  { animation-delay: -0.55s; }
.bars span:nth-child(10) { animation-delay: -0.60s; }
.bars span:nth-child(11) { animation-delay: -0.66s; }
.bars span:nth-child(12) { animation-delay: -0.72s; }
.bars span:nth-child(13) { animation-delay: -0.80s; }
.bars span:nth-child(14) { animation-delay: -0.88s; }
.bars span:nth-child(15) { animation-delay: -0.95s; }
.bars span:nth-child(16) { animation-delay: -1.02s; }
.bars span:nth-child(17) { animation-delay: -1.10s; }
.bars span:nth-child(18) { animation-delay: -1.18s; }
.bars span:nth-child(19) { animation-delay: -1.25s; }
.bars span:nth-child(20) { animation-delay: -1.30s; }
.bars span:nth-child(21) { animation-delay: -1.36s; }
.bars span:nth-child(22) { animation-delay: -1.42s; }
.bars span:nth-child(23) { animation-delay: -1.48s; }
.bars span:nth-child(24) { animation-delay: -1.55s; }
@keyframes bar {
    0%, 100% { height: 4px; }
    20%  { height: 22px; }
    35%  { height: 14px; }
    55%  { height: 28px; }
    75%  { height: 8px; }
}

/* ───────────── Generic section bits ───────────── */
.section-title {
    font-size: clamp(32px, 4.4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.03em;
    text-align: center;
    margin: 0 0 14px;
    color: #fafaff;
}
.section-sub {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 56px;
    color: #9ca3af;
    font-size: 17px;
}

/* ───────────── Features grid ───────────── */
.features { max-width: 1200px; margin: 0 auto; padding: 100px 28px; }
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.feature-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    padding: 28px;
    transition: border-color .25s ease, transform .25s ease;
}
.feature-card:hover {
    border-color: rgba(255,255,255,.12);
    transform: translateY(-2px);
}
.feature-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
    color: #0a0a13;
    margin-bottom: 18px;
    box-shadow: 0 8px 18px -6px rgba(0,0,0,.35);
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-card h3 {
    font-size: 17px; font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0 0 8px;
    color: #fafaff;
}
.feature-card p {
    font-size: 14px; line-height: 1.6;
    color: #9ca3af;
    margin: 0;
}

/* ───────────── How it works ───────────── */
.how { max-width: 900px; margin: 0 auto; padding: 60px 28px 100px; }
.steps {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 14px;
}
.steps li {
    display: flex; gap: 22px;
    align-items: flex-start;
    padding: 24px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 14px;
}
.step-num {
    flex-shrink: 0;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: linear-gradient(135deg, #a5b4fc, #818cf8);
    color: #0a0a13;
    font-weight: 700; font-size: 16px;
}
.steps h3 { margin: 4px 0 6px; color: #fafaff; font-size: 17px; font-weight: 600; }
.steps p { margin: 0; color: #9ca3af; font-size: 14.5px; }
kbd {
    display: inline-block;
    padding: 1px 7px; min-width: 18px; text-align: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-bottom-width: 2px;
    border-radius: 6px;
    font-size: 12px;
    color: #fafaff;
    font-family: 'SF Mono', ui-monospace, Menlo, monospace;
}

/* ───────────── Install ───────────── */
.install { max-width: 880px; margin: 0 auto; padding: 60px 28px 100px; }
.install-steps {
    display: grid; gap: 14px;
    margin-bottom: 56px;
}
.install-step {
    display: flex; gap: 18px;
    padding: 24px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
}
.install-num {
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.08);
    color: #d1d5db;
    font-weight: 600; font-size: 14px;
}
.install-step h3 {
    margin: 4px 0 6px;
    color: #fafaff; font-size: 16.5px; font-weight: 600;
}
.install-step p, .install-step li {
    color: #b6b6c5;
    font-size: 14.5px; line-height: 1.65;
}
.install-step p { margin: 0 0 10px; }
.install-step code {
    background: rgba(255,255,255,.06);
    padding: 1.5px 6px;
    border-radius: 4px;
    font-size: 12.5px;
    color: #f0abfc;
}
.install-step pre {
    background: rgba(0,0,0,.4);
    border: 1px solid rgba(255,255,255,.06);
    padding: 14px 16px;
    border-radius: 10px;
    overflow-x: auto;
    font-size: 13px;
    margin: 8px 0 14px;
}
.install-step pre code {
    background: none; padding: 0;
    color: #e7e7ee;
}
.install-options { margin-top: 14px; }
details {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 10px;
}
details[open] { border-color: rgba(165,180,252,.3); }
summary {
    cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    color: #fafaff;
    list-style: none;
    padding: 4px 0;
}
summary::-webkit-details-marker { display: none; }
summary::before {
    content: '›';
    color: #818cf8;
    transition: transform .2s ease;
    font-size: 18px; line-height: 1;
}
details[open] summary::before { transform: rotate(90deg); }
.pill {
    display: inline-block;
    background: rgba(99,102,241,.15);
    border: 1px solid rgba(99,102,241,.3);
    color: #c7d2fe;
    font-size: 11px; font-weight: 500;
    padding: 1px 9px; border-radius: 99px;
}
.ol-light { padding-left: 22px; margin: 6px 0 0; }
.ol-light li { padding: 3px 0; }

.trust-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    padding: 28px 32px;
}
.trust-row strong {
    display: block;
    color: #fafaff; font-size: 14.5px; font-weight: 600;
    margin-bottom: 8px;
}
.trust-row p { margin: 0; color: #9ca3af; font-size: 13.5px; line-height: 1.6; }
.trust-row a { color: #a5b4fc; text-decoration: underline; text-decoration-color: rgba(165,180,252,.4); }
@media (max-width: 720px) { .trust-row { grid-template-columns: 1fr; } }

/* ───────────── Big CTA ───────────── */
.big-cta {
    max-width: 900px; margin: 0 auto;
    padding: 100px 28px 120px;
    text-align: center;
}
.big-cta h2 {
    font-size: clamp(36px, 5.6vw, 64px);
    font-weight: 700;
    letter-spacing: -0.035em;
    margin: 0 0 32px;
    color: #fafaff;
    line-height: 1.05;
}
.big-cta .cta-meta { margin-top: 16px; }

/* ───────────── Footer ───────────── */
footer {
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 28px;
}
.footer-inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; justify-content: space-between; align-items: center;
    color: #6b7280; font-size: 13px;
    flex-wrap: wrap; gap: 14px;
}
.footer-links { display: flex; gap: 22px; }
.footer-links a:hover { color: #fafaff; }

/* ───────────── Reveal-on-scroll ───────────── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }