:root {
    --bg-0: #07060f;
    --bg-1: #0f0c1c;
    --bg-2: #15112a;
    --text: #f1ecf7;
    --text-muted: #a89cb8;
    --text-dim: #6b5f7f;
    --accent: #d44a8b;
    --accent-warm: #fcd45a;
    --accent-cool: #5cd0d6;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --card-bg: rgba(255, 255, 255, 0.04);
    --content-max: 1120px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
                 "Helvetica Neue", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--bg-0);
    color: var(--text);
    line-height: 1.55;
    overflow-x: hidden;
}

/* Animated background blobs — deliberately slow and quiet */
.bg-decor {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.bg-decor::before,
.bg-decor::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.55;
    animation: drift 28s ease-in-out infinite alternate;
}
.bg-decor::before {
    width: 720px; height: 720px;
    background: radial-gradient(circle, #6b1f80, transparent 70%);
    top: -180px; left: -200px;
}
.bg-decor::after {
    width: 640px; height: 640px;
    background: radial-gradient(circle, #c43a78, transparent 70%);
    bottom: -200px; right: -180px;
    animation-delay: -10s;
}
@keyframes drift {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(60px, -40px) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .bg-decor::before,
    .bg-decor::after { animation: none; }
}

/* Layout */
.container {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 24px;
}

nav.top {
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
nav.top .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    color: var(--text);
    text-decoration: none;
}
nav.top .brand .mark {
    width: 28px; height: 28px;
    background: url('/icon.svg') center/contain no-repeat;
}
nav.top .links {
    display: flex; gap: 20px;
}
nav.top .links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 120ms ease;
}
nav.top .links a:hover { color: var(--text); }

/* Hero */
.hero {
    padding: 80px 0 64px;
    text-align: center;
}
.hero .eyebrow {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(212, 74, 139, 0.12);
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid rgba(212, 74, 139, 0.3);
    margin-bottom: 24px;
}
.hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.4rem);
    line-height: 1.04;
    margin: 0 0 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(180deg, var(--text), #c8b8da);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero .lede {
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    color: var(--text-muted);
    max-width: 620px;
    margin: 0 auto 36px;
}
.cta-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.btn-primary {
    background: linear-gradient(180deg, #e25691, #b53872);
    color: white;
    box-shadow: 0 8px 24px -8px rgba(212, 74, 139, 0.5);
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px -8px rgba(212, 74, 139, 0.6);
}
.btn-secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--border-strong);
}
.btn-secondary:hover {
    background: var(--card-bg);
}

/* Section heading */
section { padding: 64px 0; }
section h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    margin: 0 0 12px;
    letter-spacing: -0.015em;
    font-weight: 700;
}
section .section-lede {
    color: var(--text-muted);
    max-width: 620px;
    margin: 0 0 36px;
}

/* Visualizer cards */
.viz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}
.viz-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
    transition: transform 160ms ease, border-color 160ms ease;
}
.viz-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
}
.viz-thumb {
    aspect-ratio: 16/9;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
    position: relative;
}
.viz-thumb.bars {
    background: linear-gradient(135deg, #251052, #d864f0 60%, #fac5f0);
}
.viz-thumb.tide {
    background: linear-gradient(135deg, #0d4060, #66d8ec 60%, #b8f0d8);
}
.viz-thumb.bloom {
    background: radial-gradient(ellipse at 50% 80%, #ffd2a0, #c63585 35%, #2a0c4a 75%);
}
.viz-thumb.constellation {
    background: linear-gradient(180deg, #07061a, #1a1240 90%);
    position: relative;
}
.viz-thumb.constellation::after {
    content: "";
    position: absolute; inset: 0;
    background-image:
        radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent),
        radial-gradient(1.5px 1.5px at 70% 20%, #fff 50%, transparent),
        radial-gradient(1px 1px at 45% 60%, #fad590 50%, transparent),
        radial-gradient(1.2px 1.2px at 85% 75%, #fff 50%, transparent),
        radial-gradient(1px 1px at 30% 80%, #fff 50%, transparent),
        radial-gradient(1px 1px at 60% 40%, #b8d8ff 50%, transparent),
        radial-gradient(1.5px 1.5px at 10% 65%, #fff 50%, transparent);
}
.viz-thumb.inferno {
    background: radial-gradient(ellipse at 50% 100%, #fad590, #ee3a8a 30%, #6b1080 60%, #0a0428 90%);
}
.viz-thumb.aurora {
    background: linear-gradient(180deg, #0a1530 0%, #1a3a5a 30%, #2dd58f 65%, #c896f0 95%);
}
.viz-thumb.plasma {
    background: linear-gradient(135deg, #2a0c4a, #8c1e8e 40%, #e5557d 70%, #fcc9a0 95%);
}
.viz-thumb.caustics {
    background:
        repeating-linear-gradient(115deg,
            rgba(216, 240, 250, 0) 0px,
            rgba(216, 240, 250, 0.12) 6px,
            rgba(216, 240, 250, 0) 12px),
        linear-gradient(180deg, #06182e 0%, #2e8bba 70%, #d8f0fa 100%);
}
.viz-thumb.voronoi {
    background:
        radial-gradient(circle at 20% 30%, rgba(196, 236, 242, 0.35) 0, transparent 26%),
        radial-gradient(circle at 70% 60%, rgba(92, 160, 192, 0.55) 0, transparent 32%),
        radial-gradient(circle at 45% 85%, rgba(196, 236, 242, 0.25) 0, transparent 28%),
        linear-gradient(135deg, #0c2840, #2c5a78 60%, #6ca0bc 100%);
}
.viz-thumb.reaction-diffusion {
    background:
        repeating-radial-gradient(circle at 30% 40%,
            rgba(245, 214, 124, 0) 0px,
            rgba(245, 214, 124, 0.20) 5px,
            rgba(245, 214, 124, 0) 10px),
        repeating-radial-gradient(circle at 70% 70%,
            rgba(167, 137, 48, 0) 0px,
            rgba(167, 137, 48, 0.35) 6px,
            rgba(167, 137, 48, 0) 12px),
        linear-gradient(135deg, #1a1610, #5a4825 60%, #a78930 100%);
}
.viz-thumb.cymatics {
    background:
        repeating-linear-gradient(45deg,
            rgba(245, 210, 124, 0) 0px,
            rgba(245, 210, 124, 0.15) 4px,
            rgba(245, 210, 124, 0) 8px),
        repeating-linear-gradient(-45deg,
            rgba(245, 210, 124, 0) 0px,
            rgba(245, 210, 124, 0.15) 4px,
            rgba(245, 210, 124, 0) 8px),
        linear-gradient(135deg, #0f0f1a, #5c4a30 70%, #c89d52 100%);
}
.viz-thumb.flow-field {
    background:
        radial-gradient(circle at 65% 40%, rgba(240, 136, 224, 0.55) 0, transparent 30%),
        radial-gradient(circle at 30% 70%, rgba(115, 57, 224, 0.55) 0, transparent 36%),
        linear-gradient(135deg, #08051f, #2a1466 60%, #5b2eb8 100%);
}
.viz-thumb.ink-diffusion {
    background:
        radial-gradient(circle at 35% 65%, #f5cd5a 0, rgba(245, 205, 90, 0) 16%),
        radial-gradient(circle at 60% 75%, #c41830 0, rgba(196, 24, 48, 0) 26%),
        radial-gradient(circle at 50% 80%, #6b0a18 0, rgba(107, 10, 24, 0) 50%),
        linear-gradient(180deg, #08080c 0%, #1a0a10 100%);
}
.viz-thumb.lissajous {
    background: radial-gradient(circle at 50% 50%,
        #c5ff70 0%,
        rgba(80, 200, 80, 0.55) 18%,
        rgba(80, 200, 80, 0.10) 35%,
        #050e05 80%);
    position: relative;
}
.viz-thumb.lissajous::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse 45% 22% at 50% 50%, transparent 60%, rgba(160, 255, 120, 0.30) 62%, transparent 65%),
        radial-gradient(ellipse 22% 45% at 50% 50%, transparent 60%, rgba(160, 255, 120, 0.30) 62%, transparent 65%);
}
.viz-card h3 {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 600;
}
.viz-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Feature row */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}
.feature-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 22px;
}
.feature-card .icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: grid; place-items: center;
    margin-bottom: 14px;
    background: linear-gradient(135deg, rgba(212,74,139,0.2), rgba(92,208,214,0.15));
    border: 1px solid var(--border);
    font-size: 18px;
}
.feature-card h3 {
    margin: 0 0 6px;
    font-size: 1.05rem;
}
.feature-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Privacy callout */
.privacy-band {
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(92,208,214,0.06), rgba(212,74,139,0.06));
    border: 1px solid var(--border);
    padding: 36px;
    text-align: center;
}
.privacy-band h2 { margin-bottom: 8px; }
.privacy-band p {
    max-width: 620px;
    margin: 0 auto;
    color: var(--text-muted);
}

/* Pricing strip */
.pricing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    background: var(--card-bg);
}
.pricing .price { display: flex; align-items: baseline; gap: 10px; }
.pricing .amount {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.pricing .strike {
    color: var(--text-dim);
    text-decoration: line-through;
    font-size: 1.1rem;
}
.pricing .label {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* FAQ */
.faq details {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    padding: 18px 22px;
    margin-bottom: 12px;
}
.faq details[open] { border-color: var(--border-strong); }
.faq summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 1.02rem;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+";
    float: right;
    color: var(--text-dim);
    transition: transform 160ms ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--text-muted); margin: 12px 0 0; }

/* Footer */
footer {
    padding: 48px 0 32px;
    border-top: 1px solid var(--border);
    margin-top: 40px;
}
footer .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    color: var(--text-muted);
    font-size: 0.9rem;
}
footer a { color: var(--text-muted); text-decoration: none; }
footer a:hover { color: var(--text); }
footer .links { display: flex; gap: 20px; }

/* Content pages (privacy, support) */
.prose {
    max-width: 720px;
    margin: 40px auto 80px;
    color: var(--text-muted);
}
.prose h1 {
    color: var(--text);
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin: 0 0 8px;
    letter-spacing: -0.015em;
}
.prose .updated {
    color: var(--text-dim);
    margin: 0 0 32px;
    font-size: 0.9rem;
}
.prose h2 {
    color: var(--text);
    font-size: 1.3rem;
    margin: 36px 0 12px;
    font-weight: 600;
}
.prose p { margin: 0 0 14px; }
.prose ul { padding-left: 22px; margin: 0 0 14px; }
.prose li { margin: 6px 0; }
.prose a { color: var(--accent); }
.prose code {
    background: var(--card-bg);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.92em;
    color: var(--text);
}

/* Mobile */
@media (max-width: 640px) {
    nav.top .links { display: none; }
    .hero { padding: 56px 0 40px; }
    section { padding: 48px 0; }
    .pricing { padding: 22px; }
}