/* ============================================================
   n8tiveio.app — design-token theme layer
   Loaded AFTER style.css on every page.

   System:
   - Color exclusively via OKLCH tokens below (one accent hue: 255).
   - Spacing on a 4px grid (4/8/12/16/24/32/48/64).
   - Type scale: 12/14/16/20/24/32/48. Body 16/1.5, headings 1.1-1.25.
   - Display face: Space Grotesk. Body: Inter. Micro-labels: mono.

   Layout references (Mobbin):
   - Linear features grid  -> hairline-border panels, mono eyebrows
   - Chronicle / Square    -> flat pricing cards, quiet "popular" tag
   - GitHub dark hero      -> restrained centered hero
   - Cursor login          -> minimal single-card auth
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    /* ---- color tokens (the only place color is defined) ---- */
    --bg:            oklch(0.13 0.02 255);   /* page canvas */
    --bg-translucent:oklch(0.13 0.02 255 / 0.72);
    --surface:       oklch(0.17 0.02 255);   /* cards / raised panels */
    --surface-2:     oklch(0.21 0.02 255);   /* higher elevation */
    --surface-glass: oklch(0.17 0.02 255 / 0.65);
    --text:          oklch(0.95 0.01 255);   /* high-contrast ink */
    --muted:         oklch(0.72 0.02 255);   /* secondary text */
    --faint:         oklch(0.55 0.02 255);   /* tertiary text */
    --border:        oklch(0.32 0.03 255);   /* hairline */
    --border-strong: oklch(0.45 0.05 255);
    --accent:        oklch(0.70 0.14 255);   /* the one accent hue */
    --accent-bright: oklch(0.82 0.10 255);
    --accent-deep:   oklch(0.55 0.16 255);
    --accent-fg:     oklch(0.15 0.03 255);   /* text on accent fills */
    --accent-soft:   oklch(0.70 0.14 255 / 0.10);  /* tinted surfaces */
    --accent-soft-2: oklch(0.70 0.14 255 / 0.20);
    --accent-line:   oklch(0.70 0.14 255 / 0.28);  /* tinted hairlines */
    --accent-glow:   oklch(0.70 0.14 255 / 0.40);  /* shadows/glows */
    --ok:            oklch(0.75 0.13 160);
    --ok-soft:       oklch(0.75 0.13 160 / 0.12);
    --ok-line:       oklch(0.75 0.13 160 / 0.32);
    --danger:        oklch(0.65 0.19 25);
    --danger-soft:   oklch(0.65 0.19 25 / 0.12);
    --danger-line:   oklch(0.65 0.19 25 / 0.45);
    --warn:          oklch(0.80 0.14 85);
    --shadow-ink:    oklch(0 0 0 / 0.45);

    /* ---- type tokens ---- */
    --font-body: 'Inter', system-ui, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, monospace;
    --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px;
    --fs-24: 24px; --fs-32: 32px; --fs-48: 48px;

    /* ---- spacing tokens (4px grid) ---- */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;

    /* ---- shape ---- */
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
}

/* ---------- Base canvas ---------- */
html, body,
body.bg-gray-900 {
    background-color: var(--bg) !important;
    color: var(--text) !important;
    font-size: var(--fs-16);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-soft-2); color: var(--text); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* visible keyboard focus, everywhere */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ---------- Background: aurora light-bars (WebGL globe stays off) ---------- */
#vanta-bg { background: var(--bg) !important; }
#vanta-bg > canvas { display: none !important; }

#vanta-bg::before {
    content: "";
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(130% 80% at 50% -8%, var(--accent-soft-2), transparent 58%),
        repeating-linear-gradient(90deg,
            transparent 0px,
            var(--accent-soft) 24px,
            oklch(0.55 0.16 255 / 0.35) 60px,
            oklch(0.82 0.10 255 / 0.18) 92px,
            transparent 132px);
    filter: blur(5px);
    animation: auroraDrift 26s linear infinite;
    will-change: transform;
}
#vanta-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(46% 72% at 50% 42%, var(--bg) 26%, oklch(0.13 0.02 255 / 0.55) 60%, transparent 82%),
        linear-gradient(180deg, transparent 50%, var(--bg) 90%);
    pointer-events: none;
}
@keyframes auroraDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-148px, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    #vanta-bg::before { animation: none; }
}

#mesh-grid { opacity: 0.12 !important; }
#mesh-grid path,
#mesh-grid rect { stroke: var(--accent-line) !important; }

.floating-particle,
.floating-particle:nth-child(odd),
.floating-particle:nth-child(3n),
.floating-particle:nth-child(5n) {
    background: radial-gradient(circle, var(--accent-glow), var(--accent-soft)) !important;
}

/* section veil: one quiet tint, no gradients */
section:not(#hero) { background: oklch(0.15 0.02 255 / 0.30) !important; }
section:not(#hero)::before { background: var(--accent-soft) !important; opacity: 0.4; }

/* ---------- Typography ---------- */
/* NOTE: the Tailwind CDN reset (injected at runtime, after this sheet)
   sets h1-h6 { font-size: inherit }. All heading sizes below therefore
   use class/id-qualified selectors, which outrank the element reset. */
h1, h2, h3, .hero-subtitle, .cta-title {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}

#hero h1 {
    font-size: clamp(var(--fs-48), 6vw, 64px);
    line-height: 1.1;
    font-weight: 700 !important;
    letter-spacing: -0.03em;
}
.section-header h2,
.section-header h3 { font-weight: 700; line-height: 1.15; }
.cta-title { font-weight: 700; }
.hero-subtitle {
    font-family: var(--font-body);
    font-size: var(--fs-20) !important;
    color: var(--muted) !important;
    letter-spacing: 0;
    text-shadow: none !important;
}

/* brand wordmark: solid ink + accent suffix (no gradient text) */
.brand-name { color: var(--text); }
.brand-suffix { color: var(--accent); }
.accent-word { color: var(--accent); }

p { line-height: 1.5; }

/* bare mono label (no pill) for inline eyebrows */
.mono-label {
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-bright);
}

/* square icon tile used beside headings and in cards */
.icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent);
}

/* soft circular glow marker (interactive-demo placeholder) */
.icon-orb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--accent-soft-2);
    color: var(--accent);
}

/* mono micro-label (the signature device, used on every page) */
.sui-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-bright);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    padding: var(--sp-2) var(--sp-3);
    border-radius: 999px;
}
.sui-eyebrow::before {
    content: "";
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px 2px var(--accent-glow);
}

/* ---------- Legacy Tailwind utility mapping (kept for safety) ---------- */
[class*="from-purple-"], [class*="from-blue-"], [class*="from-indigo-"] {
    --tw-gradient-from: var(--accent) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: transparent var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
[class*="to-purple-"], [class*="to-indigo-"] { --tw-gradient-to: var(--accent-bright) var(--tw-gradient-to-position) !important; }
[class*="to-blue-"] { --tw-gradient-to: var(--accent-deep) var(--tw-gradient-to-position) !important; }

.text-purple-300, .text-purple-400, .text-purple-500,
.text-blue-300, .text-blue-400, .text-blue-500,
.text-indigo-400 { color: var(--accent) !important; }
.text-gray-300 { color: var(--text) !important; }
.text-gray-400 { color: var(--muted) !important; }
.text-gray-500 { color: var(--faint) !important; }
.text-green-400 { color: var(--ok) !important; }
.text-red-400 { color: var(--danger) !important; }

[class*="border-purple-"], [class*="border-indigo-"] { border-color: var(--accent-line) !important; }
.hover\:border-purple-500:hover, .hover\:border-purple-400:hover,
.hover\:border-blue-500:hover, .hover\:border-blue-400:hover,
.hover\:border-cyan-400:hover, .hover\:border-indigo-500:hover,
.hover\:border-green-500:hover, .hover\:border-yellow-400:hover,
.hover\:border-orange-400:hover {
    border-color: var(--accent) !important;
}

[class*="shadow-purple-"], [class*="shadow-blue-"], [class*="shadow-indigo-"],
[class*="shadow-green-"], [class*="shadow-yellow-"], [class*="shadow-orange-"] {
    --tw-shadow-color: var(--accent-glow) !important;
    --tw-shadow: var(--tw-shadow-colored) !important;
}

/* ---------- Surfaces ---------- */
.bg-gray-900 { background-color: var(--bg) !important; }
.bg-gray-800 { background-color: var(--surface) !important; }
.bg-gray-700 { background-color: var(--surface-2) !important; }
.bg-gray-800\/50, .bg-gray-800\/40, .bg-gray-800\/80 { background-color: var(--surface-glass) !important; }
.bg-gray-900\/50, .bg-gray-900\/80 { background-color: var(--bg-translucent) !important; }
[class*="from-gray-900"] { --tw-gradient-from: var(--bg) var(--tw-gradient-from-position) !important; }
[class*="from-gray-800"] { --tw-gradient-from: var(--surface) var(--tw-gradient-from-position) !important; }
[class*="to-gray-800"] { --tw-gradient-to: var(--surface) var(--tw-gradient-to-position) !important; }
[class*="to-gray-900"] { --tw-gradient-to: var(--bg) var(--tw-gradient-to-position) !important; }
.border-gray-700, .border-gray-600 { border-color: var(--border) !important; }

/* the standard panel: flat surface, hairline border, lift on hover */
.panel,
.vertical-card, .demo-card, .mission-container, .team-card,
.tech-badge, .auth-container {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.vertical-card:hover, .demo-card:hover, .team-card:hover, .tech-badge:hover {
    transform: translateY(-4px);
    border-color: var(--accent-line) !important;
    box-shadow: 0 16px 48px -20px var(--accent-glow) !important;
}
.demo-card:hover { /* override style.css 3D tilt */
    transform: translateY(-4px) !important;
}

/* inline SVG recolor for any remaining hardcoded strokes */
[fill="#8b5cf6"], [fill="#a78bfa"], [fill="#c4b5fd"],
[fill="#6366f1"], [fill="#a855f7"], [fill="#7c3aed"] { fill: var(--accent) !important; }
[stroke="#8b5cf6"], [stroke="#a78bfa"], [stroke="#c4b5fd"],
[stroke="#6366f1"], [stroke="#a855f7"], [stroke="#7c3aed"],
[stroke="#4da2ff"] { stroke: var(--accent) !important; }
[fill="#3b82f6"] { fill: var(--accent-bright) !important; }
[stroke="#3b82f6"] { stroke: var(--accent-bright) !important; }
[stroke="#34d39a"] { stroke: var(--ok) !important; }

/* ---------- Buttons ---------- */
.btn-primary,
a[class*="from-blue-"][class*="to-purple-"],
.waitlist-submit-btn,
.cta-button,
.suite-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent) !important;
    background-image: none !important;
    color: var(--accent-fg) !important;
    font-weight: 600 !important;
    font-size: var(--fs-16);
    padding: var(--sp-3) var(--sp-6);
    border: none;
    border-radius: var(--radius-sm) !important;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 24px -12px var(--accent-glow) !important;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover,
a[class*="from-blue-"][class*="to-purple-"]:hover,
.waitlist-submit-btn:hover,
.cta-button:hover,
.suite-cta:hover {
    background: var(--accent-bright) !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 32px -12px var(--accent-glow) !important;
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled,
.waitlist-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text);
    font-weight: 500;
    font-size: var(--fs-16);
    padding: var(--sp-3) var(--sp-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.btn-ghost:hover {
    border-color: var(--accent-line);
    background: var(--accent-soft);
}

/* ---------- Forms ---------- */
.waitlist-modal-content {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 24px 64px var(--shadow-ink) !important;
}
.waitlist-modal-title {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: var(--text) !important;
    font-family: var(--font-display);
    font-size: var(--fs-24);
}
.waitlist-modal-subtitle { color: var(--muted) !important; font-size: var(--fs-14); }
.waitlist-label { color: var(--text) !important; font-size: var(--fs-14); }

.waitlist-input, .auth-input {
    background: var(--bg-translucent) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    font-size: var(--fs-16) !important;
}
.waitlist-input::placeholder, .auth-input::placeholder { color: var(--faint) !important; }
.waitlist-input:focus, .auth-input:focus {
    background: var(--bg-translucent) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
    transform: none !important;
}

/* auth card (login.html) */
.auth-tab { color: var(--muted); border-radius: var(--radius-sm); }
.auth-tab.active {
    background: var(--accent) !important;
    color: var(--accent-fg) !important;
}
.auth-submit {
    background: var(--accent) !important;
    background-image: none !important;
    color: var(--accent-fg) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 8px 24px -12px var(--accent-glow) !important;
}
.auth-submit:hover { background: var(--accent-bright) !important; }
.social-login {
    background: var(--bg-translucent) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text);
    transition: border-color 0.2s ease, background 0.2s ease;
}
.social-login:hover { border-color: var(--accent-line) !important; background: var(--accent-soft) !important; }
.error-message {
    background: var(--danger-soft) !important;
    border: 1px solid var(--danger-line) !important;
    color: var(--danger) !important;
}

/* ---------- Feature columns (#about) ---------- */
.feature-col { text-align: left; padding: var(--sp-1) 0; }
.feature-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border: 1px solid var(--accent-line);
    background: var(--accent-soft);
    margin-bottom: var(--sp-4);
    transition: border-color 0.3s ease, background 0.3s ease;
}
.feature-col:hover .feature-icon {
    border-color: var(--accent);
    background: var(--accent-soft-2);
}
.feature-icon svg { width: 24px; height: 24px; display: block; }
.feature-col h3 { font-size: var(--fs-20); }
.feature-col p { font-size: var(--fs-14); color: var(--muted); }
.feature-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--accent);
    font-size: var(--fs-14);
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.25s ease, color 0.25s ease;
}
.feature-link:hover { color: var(--accent-bright); gap: var(--sp-2); }
.feature-arrow { transition: transform 0.25s ease; }
.feature-link:hover .feature-arrow { transform: translateX(2px); }

/* ---------- CTA section (#about) ---------- */
.cta-section {
    background: var(--bg) !important;
    isolation: isolate;
}
.cta-sphere {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(860px, 128vw);
    max-width: none;
    transform: translate(-50%, -50%);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 46%, transparent 70%);
            mask-image: radial-gradient(circle at 50% 50%, #000 46%, transparent 70%);
    animation: ctaSpin 90s linear infinite;
}
@keyframes ctaSpin { from { transform: translate(-50%, -50%) rotate(0); }
                     to   { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cta-sphere { animation: none; } }

.cta-title { letter-spacing: -0.03em; line-height: 1.1; }
.cta-sub { color: var(--muted) !important; }
.cta-features .feature-col { text-align: center; }
.cta-features .feature-icon { margin-left: auto; margin-right: auto; }

/* ---------- Workflow node-flow canvas ---------- */
.wf-canvas {
    background:
        radial-gradient(var(--accent-soft) 1px, transparent 1px) 0 0 / 16px 16px,
        var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0;
    overflow: hidden;
}
.wf-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    background: var(--surface-glass);
}
.wf-dots { display: inline-flex; gap: 6px; }
.wf-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.wf-file { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--muted); letter-spacing: 0.02em; }
.wf-zoom {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-1) var(--sp-2);
}

.wf-flow { padding: var(--sp-6) var(--sp-4) var(--sp-2); }
.wf-node {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.wf-node:hover {
    border-color: var(--accent-line);
    transform: translateX(2px);
}
.wf-node-icon {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--accent-line);
    background: var(--accent-soft);
}
.wf-node-icon svg { width: 20px; height: 20px; }
.wf-node-icon-ok { border-color: var(--ok-line); background: var(--ok-soft); }
.wf-node-body { min-width: 0; }
.wf-node-title { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; font-size: var(--fs-14); color: var(--text); }
.wf-node-sub { font-size: var(--fs-12); color: var(--muted); margin-top: 2px; }
.wf-tag {
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px var(--sp-2);
    border-radius: 999px;
}
.wf-tag-live, .wf-tag-ok { color: var(--ok); background: var(--ok-soft); border: 1px solid var(--ok-line); }
.wf-tag-run { color: var(--accent-bright); background: var(--accent-soft); border: 1px solid var(--accent-line); }

.wf-link { position: relative; height: 24px; margin-left: var(--sp-8); }
.wf-link::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px; background: linear-gradient(180deg, var(--accent-glow), var(--accent-soft));
}
.wf-link-dot {
    position: absolute; left: -2px; top: 0;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px 1px var(--accent-glow);
    animation: wfFlow 2.4s ease-in-out infinite;
}
@keyframes wfFlow {
    0% { top: -2px; opacity: 0; }
    25% { opacity: 1; }
    75% { opacity: 1; }
    100% { top: 22px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .wf-link-dot { animation: none; opacity: 0.7; } }

.wf-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-4) var(--sp-4);
}
.wf-stats > div {
    text-align: center;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-1);
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    color: var(--muted);
    display: flex; flex-direction: column; gap: 2px;
}
.wf-stats > div span { font-size: var(--fs-16); font-weight: 700; color: var(--accent); font-family: var(--font-display); }

/* ---------- Pricing (Chronicle / Square pattern: flat, hairline, one accent) ---------- */
.pricing-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--sp-8) !important;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.pricing-card:hover {
    border-color: var(--accent-line) !important;
    box-shadow: 0 16px 48px -20px var(--accent-glow) !important;
}
.pricing-card-featured {
    border-color: var(--accent) !important;
    background: var(--surface-2) !important;
    transform: none; /* no oversized scale; the border carries the emphasis */
}
.pricing-card-featured.animate-in { animation-name: pricingCardEnter !important; }
.pricing-tag {
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-bright);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    padding: var(--sp-1) var(--sp-3);
    border-radius: 999px;
    white-space: nowrap;
}
.pricing-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    border: 1px solid var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent);
    margin-bottom: var(--sp-4);
}
.pricing-price { font-family: var(--font-display); font-size: var(--fs-32); font-weight: 700; }
.pricing-check { color: var(--accent); }
.pricing-cta {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-3) var(--sp-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font-weight: 600;
    font-size: var(--fs-16);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.pricing-cta:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.pricing-card-featured .pricing-cta {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-fg);
    box-shadow: 0 8px 24px -12px var(--accent-glow);
}
.pricing-card-featured .pricing-cta:hover { background: var(--accent-bright); border-color: var(--accent-bright); }

/* ---------- Products suite cards (Linear pattern) ---------- */
.suite-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease, box-shadow 0.3s ease;
}
.suite-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-line);
    box-shadow: 0 16px 48px -16px var(--accent-glow);
}
.suite-card__media {
    position: relative;
    height: 200px;
    background:
        radial-gradient(120% 90% at 50% 0%, var(--accent-soft-2), transparent 70%),
        var(--bg);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.suite-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.suite-card:hover .suite-card__media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
    .suite-card:hover .suite-card__media img { transform: none; }
}
.suite-badge {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    padding: var(--sp-1) var(--sp-2);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    backdrop-filter: blur(6px);
    border: 1px solid transparent;
}
.suite-badge--live { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.suite-badge--beta { background: var(--accent-soft); color: var(--accent-bright); border-color: var(--accent-line); }
.suite-badge--soon { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.suite-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--sp-6);
}
.suite-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-20);
    font-weight: 600;
    color: var(--text);
    margin: 0 0 var(--sp-1);
}
.suite-card__desc {
    color: var(--muted);
    font-size: var(--fs-14);
    line-height: 1.5;
    margin: 0 0 var(--sp-4);
    min-height: 42px;
}
.suite-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.suite-tag {
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    font-weight: 500;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-sm);
    color: var(--accent-bright);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
}
.suite-actions {
    display: flex;
    gap: var(--sp-2);
    margin-top: auto;
}
.suite-cta { flex: 1 1 auto; font-size: var(--fs-14); padding: var(--sp-2) var(--sp-4); }
.suite-info {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    color: var(--accent-bright);
    background: transparent;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.suite-info:hover {
    background: var(--accent-soft);
    border-color: var(--accent-line);
}

/* ---------- Section headers ---------- */
.section-header h2 { font-size: var(--fs-32); }
@media (min-width: 768px) {
    .section-header h2 { font-size: var(--fs-48); }
}
.section-header p { color: var(--muted); font-size: var(--fs-16); }

/* mission cards: quiet panels */
.mission-card {
    background: var(--bg-translucent);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-6);
}
.mission-card h3 { font-size: var(--fs-20); }
.mission-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent);
    margin-right: var(--sp-3);
}

/* team page avatar ring */
.team-avatar-ring { border-color: var(--accent-line) !important; }
.status-dot-online { background: var(--ok) !important; border-color: var(--bg) !important; }