/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Brand: SayPeter — mint accent on deep black, Inter Black headings */
    --color-bg: #0A0A0A;
    --color-bg-pure: #000000;
    --color-bg-subtle: #0A0A0A;
    --color-bg-card: #111111;
    --color-bg-elevated: #161616;
    --color-text: #FFFFFF;
    --color-text-secondary: #9A9A9A;
    --color-muted: #6A6A6A;
    --color-accent: #00E5A0;
    --color-accent-hover: #33EBB3;
    --color-accent-light: rgba(0, 229, 160, 0.12);
    /* Legacy aliases — kept so existing rules compile; both now point at mint */
    --color-green: #00E5A0;
    --color-green-dim: rgba(0, 229, 160, 0.15);
    --color-border: #1E1E1E;
    --color-border-bright: #2A2A2A;
    --color-error: #FF4D4D;
    --color-danger: #FF4D4D;
    --color-success: #00E5A0;

    /* Telegram chat mockup. Peter is reached on Telegram, so the phone
       mockups on this page are Telegram's palette, not WhatsApp's — the
       teal header and green outgoing bubble they used to carry read as the
       wrong product to anyone who has used either app. */
    --tg-blue: #2AABEE;
    --tg-blue-deep: #229ED9;
    --tg-wallpaper: #E4EDF4;
    --tg-bubble-out: #E1F3FB;

    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;

    /* Weights per brand guide */
    --fw-heading: 900;   /* Inter Black */
    --fw-body: 600;      /* Inter Semibold */
    --fw-micro: 500;     /* Inter Medium (used at opacity .85) */
    --fw-mono: 500;      /* JetBrains Mono Medium */

    /* Heading tracking per brand guide: -1px to -2px */
    --tracking-heading: -0.04em;
    --tracking-logo: -0.05em;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 60px rgba(0, 229, 160, 0.15);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--fw-body);
    line-height: 1.7;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ===== BRAND TYPOGRAPHY DEFAULTS =====
   Headings: Inter Black 900, tight tracking.
   Body: Inter Semibold 600 (set on body above).
   Monospace numerics/code default to JetBrains Mono 500. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: var(--fw-heading);
    letter-spacing: var(--tracking-heading);
    line-height: 1.15;
    color: var(--color-text);
}
code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-weight: var(--fw-mono);
}

/* ===== BRAND LOGO (two-tone) =====
   Usage: inside any .nav-logo / .dash-nav-logo / .adm-side-logo / .pdtabs-brand / .logo
   wrapper, render {% include '_brand_logo.html' %} so colors come from tokens, not markup. */
.brand-say { color: #FFFFFF; }
.brand-peter { color: var(--color-accent); }
.nav-logo, .dash-nav-logo, .adm-side-logo, .pdtabs-brand, a.logo {
    font-weight: var(--fw-heading);
    letter-spacing: var(--tracking-logo);
}

/* ===== SMALL UTILITY CLASSES =====
   Small, deliberate set added to replace common repeated inline styles. */
.u-auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 1rem;
}
.u-auth-shell { max-width: 400px; margin: 0 auto; width: 100%; }
.u-auth-header { text-align: center; margin-bottom: 2rem; }
.u-auth-header p { margin-top: 0.5rem; font-size: 0.875rem; }
.u-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.u-auth-alt { text-align: center; margin-top: 1rem; font-size: 0.875rem; }
.u-row-between { display: flex; align-items: center; justify-content: space-between; }
.u-toast-stack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(420px, calc(100vw - 2rem));
}
.u-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.u-toast-msg { flex: 1; min-width: 0; }
.u-toast-close {
    flex-shrink: 0;
    background: transparent;
    border: 0;
    color: inherit;
    opacity: 0.6;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.15rem;
    cursor: pointer;
}
.u-toast-close:hover { opacity: 1; }
.u-toast-out {
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
}

a { color: var(--color-accent); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--color-accent-hover); }
a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ===== SKIP LINK ===== */
.skip-link {
    position: absolute;
    top: -50px;
    left: 16px;
    background: var(--color-accent);
    color: #0A0A0A;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 200;
    transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; color: #0A0A0A; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
/* Wider container for sections whose content (carousels, role grids,
   wide tables) needs more horizontal room. Pair with `.container` so
   the padding rule still applies. */
.container.container-wide { max-width: 1480px; }

/* ===== NAV ===== */
.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-border);
    padding: 14px 0;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.nav.nav-scrolled {
    background: rgba(10, 10, 10, 0.95);
    border-bottom-color: var(--color-border-bright);
}
.nav-inner { display: flex; justify-content: space-between; align-items: center; }
.nav-logo {
    font-weight: var(--fw-heading);
    font-size: 1.15rem;
    color: var(--color-text);
    letter-spacing: var(--tracking-logo);
    display: flex;
    align-items: center;
    gap: 0;
    transition: transform 0.2s ease;
}
.nav-logo:hover { color: var(--color-text); transform: scale(1.02); }
.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.nav-link {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    transition: color 0.2s ease;
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-accent);
    transition: width 0.3s var(--ease-out-expo);
}
.nav-link:hover { color: var(--color-text); }
.nav-link:hover::after { width: 100%; }
/* Let a <button> in the nav reuse .nav-link styling without the browser's
   native button chrome (font, padding, border, background) overriding it. */
.nav-link-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}
.nav-logout-form { display: inline; margin: 0; }
.nav-cta {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0A0A0A;
    background: var(--color-accent);
    padding: 8px 20px;
    border-radius: 20px;
    transition: all 0.3s var(--ease-out-expo);
    box-shadow: 0 2px 8px rgba(0, 229, 160, 0.2);
    animation: navCtaPulse 4s ease-in-out infinite;
}
@keyframes navCtaPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(0, 229, 160, 0.2); }
    50% { box-shadow: 0 2px 16px rgba(0, 229, 160, 0.35); }
}
.nav-cta:hover {
    background: var(--color-accent-hover);
    color: #0A0A0A;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 24px rgba(0, 229, 160, 0.4);
    animation: none;
}
.nav-cta:active { transform: translateY(0) scale(0.98); }

/* ===== BUTTONS ===== */
.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    padding: 14px 32px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.25s var(--ease-out-expo);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.btn-primary {
    background: var(--color-accent);
    color: #0A0A0A;
    box-shadow: 0 2px 8px rgba(0, 229, 160, 0.3);
    position: relative;
    overflow: hidden;
}
.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    transform: translate(-50%, -50%);
    transition: width 0.6s var(--ease-out-expo), height 0.6s var(--ease-out-expo);
}
.btn-primary:hover::after {
    width: 300px; height: 300px;
}
.btn-primary:hover {
    background: var(--color-accent-hover);
    color: #0A0A0A;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 32px rgba(0, 229, 160, 0.45), 0 0 60px rgba(0, 229, 160, 0.15);
}
.btn-primary:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 229, 160, 0.2);
    transition-duration: 0.1s;
}
.btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-bright);
    position: relative;
}
.btn-ghost::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(0, 229, 160, 0.08), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.btn-ghost:hover::before { opacity: 1; }
.btn-ghost:hover {
    color: var(--color-text);
    border-color: var(--color-accent);
    background: rgba(0, 229, 160, 0.06);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 229, 160, 0.1);
}
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 229, 160, 0.3);
}
.btn-lg {
    font-size: 1.05rem;
    padding: 16px 36px;
}

/* ===== HERO ===== */
.hero {
    padding: 5rem 0 3rem;
    position: relative;
    overflow: hidden;
}
.hero-glow {
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 700px;
    background: radial-gradient(ellipse, rgba(0, 229, 160, 0.1) 0%, rgba(0, 229, 160, 0.02) 40%, transparent 70%);
    pointer-events: none;
    animation: glowBreathe 8s ease-in-out infinite, glowDrift 12s ease-in-out infinite;
    will-change: transform, opacity;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: var(--font-mono);
    color: var(--color-green);
    background: var(--color-green-dim);
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(0, 229, 160, 0.2);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.hero-badge:hover {
    border-color: rgba(0, 229, 160, 0.4);
    box-shadow: 0 0 20px rgba(0, 229, 160, 0.1);
}
.hero-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-green);
    animation: pulse 2s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(0, 229, 160, 0.4);
}
.hero-title {
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    font-weight: var(--fw-heading);
    line-height: 1.1;
    color: var(--color-text);
    margin-bottom: 1.25rem;
    letter-spacing: var(--tracking-logo);
}
.hero-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    max-width: 540px;
    margin: 0 0 2rem;
    line-height: 1.7;
}
.hero-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

/* ===== HERO SPLIT + SYSTEM VIEW ===== */
.hero-split {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 3rem;
    align-items: center;
}
.hero-copy { text-align: left; }
.hero-demo {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
}
.system-view {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border-bright);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    max-width: 560px;
    width: 100%;
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
    animation: systemViewEntry 0.8s var(--ease-out-expo) 0.3s both;
}
/* No terminal panel: phone fills the demo column, capped at a comfortable
   reading width so it still feels like a phone, not a tablet. */
.system-view-solo {
    grid-template-columns: 1fr;
    max-width: 340px;
    margin: 0 auto;
}
.system-view:hover {
    box-shadow: var(--shadow-lg), 0 0 80px rgba(0, 229, 160, 0.2);
    border-color: rgba(0, 229, 160, 0.3);
}

/* Phone mockup (left side of system view) */
.phone-mockup { width: 100%; }
.phone-screen {
    background: var(--tg-wallpaper);
    height: 460px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.wa-header {
    background: var(--tg-blue);
    color: #fff;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.wa-back { font-size: 1.4rem; opacity: 0.8; font-weight: 300; line-height: 1; }
.wa-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.wa-header-info { flex: 1; min-width: 0; }
.wa-name { font-size: 0.9rem; font-weight: 600; line-height: 1.2; }
.wa-status { font-size: 0.7rem; opacity: 0.75; line-height: 1.2; }
.wa-chat {
    flex: 1;
    padding: 10px 10px 6px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    overflow: hidden;
    background: var(--tg-wallpaper) url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23a8c7dc' fill-opacity='0.15'%3E%3Cpath d='M30 5l5 10h10l-8 6 3 10-10-7-10 7 3-10-8-6h10z' /%3E%3C/g%3E%3C/svg%3E");
    transition: opacity 0.35s ease;
}
.wa-msg {
    max-width: 90%;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    line-height: 1.45;
    word-wrap: break-word;
    position: relative;
    color: #111;
}
.wa-msg-user {
    background: var(--tg-bubble-out);
    align-self: flex-end;
    border-top-right-radius: 0;
    animation: msgSlideLeft 0.3s var(--ease-out-expo);
}
.wa-msg-peter {
    background: #fff;
    align-self: flex-start;
    border-top-left-radius: 0;
    animation: msgSlideRight 0.35s var(--ease-out-expo);
}
.wa-msg-time { font-size: 0.58rem; color: #999; text-align: right; margin-top: 2px; }
.wa-msg-peter .wa-msg-sender { font-size: 0.62rem; font-weight: 600; color: var(--tg-blue); margin-bottom: 1px; }
.wa-typing {
    align-self: flex-start;
    background: #fff;
    border-radius: 8px;
    border-top-left-radius: 0;
    padding: 8px 14px;
    display: flex;
    gap: 4px;
    animation: msgSlideRight 0.25s var(--ease-out-expo);
}
.wa-typing-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #999;
    animation: typingBounce 1.2s ease-in-out infinite;
}
.wa-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.wa-typing-dot:nth-child(3) { animation-delay: 0.3s; }
.wa-result-metrics {
    margin-top: 4px;
    padding: 5px 7px;
    border-radius: 5px;
    background: #f0f4ff;
    border: 1px solid #dbe4ff;
    font-family: var(--font-body);
    font-size: 0.62rem;
    line-height: 1.5;
}
.wa-result-doc {
    margin-top: 4px;
    padding: 5px 7px;
    border-radius: 5px;
    background: #fff8f0;
    border: 1px solid #ffe4c4;
    font-family: var(--font-body);
    font-size: 0.62rem;
    line-height: 1.5;
}
.metric-row { display: flex; justify-content: space-between; padding: 1px 0; }
.metric-label { color: #555; }
.metric-val { font-weight: 600; color: #222; }
.metric-up { color: #16a34a; }
.wa-input-bar {
    background: #f0f0f0;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.wa-input-field {
    flex: 1;
    min-width: 0;
    background: #fff;
    border-radius: 18px;
    padding: 6px 12px;
    font-size: 0.72rem;
    min-height: 30px;
    /* Two-line cap. A long prompt wraps; the blinking cursor still trails
       the last typed character because we keep simple block flow. */
    max-height: calc(1.4em * 2 + 12px);
    color: #222;
    line-height: 1.4;
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
}
.wa-input-cursor::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 14px;
    background: #222;
    margin-left: 1px;
    animation: blink 0.8s step-end infinite;
    vertical-align: text-bottom;
}
.wa-send-btn {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--tg-blue);
    display: flex; align-items: center; justify-content: center;
    color: #fff; flex-shrink: 0;
    transition: transform 0.2s var(--ease-out-back), background 0.15s;
}
.wa-send-btn.active { background: var(--tg-blue-deep); transform: scale(1.15); }

/* ===== HERO TICKER ===== */
.ticker-track {
    display: flex;
    gap: 0;
    animation: tickerScroll 40s linear infinite;
    white-space: nowrap;
    width: max-content;
}
.ticker-track:hover {
    animation-play-state: paused;
}
.ticker-track span {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-muted);
    padding: 0 8px;
    font-family: var(--font-mono);
    transition: color 0.4s ease, text-shadow 0.4s ease, transform 0.4s ease;
    display: inline-block;
}
.ticker-track span:hover {
    color: var(--color-green);
    text-shadow: 0 0 12px rgba(0, 229, 160, 0.3);
    transform: translateY(-1px);
}

/* ===== SECTIONS ===== */
.section {
    padding: 5rem 0;
    position: relative;
}
.section-alt {
    background: var(--color-bg-subtle);
}
.section-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: 0.75rem;
}
.section-title {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 700;
    margin-bottom: 0.75rem;
    letter-spacing: -0.03em;
    color: var(--color-text);
    /* Titles should span the same width as the body content below them.
       Previously a narrow inherited max-width forced premature wraps. */
    max-width: 100%;
}
.section-subtitle {
    font-size: 1.05rem;
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
    /* Match the body content width so subtitles don't wrap before the
       grid/cards beneath them. We keep a hard ceiling for readability. */
    max-width: 880px;
    line-height: 1.7;
}

/* ===== PARADIGM SHIFT ===== */
.paradigm-card {
    border-radius: var(--radius-lg);
    padding: 2rem;
    transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease;
}

/* Scenarios */
.scenario-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    transition: all 0.4s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
}
.scenario-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-accent), var(--color-green), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease-out-expo);
}
.scenario-card:hover::before { transform: scaleX(1); }
.scenario-card:hover {
    border-color: rgba(0, 229, 160, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25), 0 0 60px rgba(0, 229, 160, 0.08);
    background: linear-gradient(180deg, rgba(0, 229, 160, 0.04) 0%, var(--color-bg-card) 100%);
}

/* ===== PRICING ===== */
.pricing-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-bright);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.pricing-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-green));
}
.pricing-card:hover {
    border-color: rgba(0, 229, 160, 0.3);
    box-shadow: 0 12px 40px rgba(0, 229, 160, 0.1);
}
.pricing-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}
.pricing-amount {
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: -0.03em;
}
.pricing-name {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--color-accent);
    margin-top: 0.5rem;
    font-weight: 600;
}
.pricing-note {
    font-size: 0.8rem;
    color: var(--color-muted);
    text-align: center;
    font-style: italic;
}

/* ===== ARCHITECTURE ===== */
.arch-layer {
    width: 100%;
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease;
}
.arch-layer:hover {
    transform: scale(1.02);
}

/* ===== EVOLUTION TIMELINE ===== */
.timeline {
    position: relative;
    max-width: 600px;
    margin: 0 auto 2.5rem;
    padding-left: 80px;
}
.timeline-item {
    position: relative;
    padding: 0 0 1.5rem 2rem;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
    content: '';
    position: absolute;
    left: -17px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-bg-card);
    border: 2px solid var(--color-accent);
    z-index: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.timeline-item:hover::before {
    transform: scale(1.3);
    box-shadow: 0 0 12px rgba(0, 229, 160, 0.3);
}

/* Evolution counter */
.evolution-counter {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 1.5rem;
}
.evo-to {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    color: var(--color-green);
    font-weight: 800;
    text-shadow: 0 0 20px rgba(0, 229, 160, 0.2);
}

/* Generic alert box */
.alert {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* ===== FOOTER ===== */
.footer {
    padding: 2.5rem 0 2rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}
.footer-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-muted);
}
.footer-links { margin-bottom: 0.5rem; }
.footer-links a { color: var(--color-muted); transition: color 0.2s ease; }
.footer-links a:hover { color: var(--color-accent); }
.footer-privacy { margin-bottom: 0.5rem; margin-left: auto; margin-right: auto; line-height: 1.6; text-wrap: balance; }
.footer-badge { margin-top: 0.5rem; font-size: 0.78rem; }
.footer-tlp { color: var(--color-accent); }
.footer-backed {
    margin-top: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.78rem;
}
.footer-backed-label { color: var(--color-muted); }
.footer-backed-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-text-secondary);
    transition: color 0.2s ease;
}
.footer-backed-brand:hover { color: var(--color-text); }
.footer-el-mark {
    width: 0.82rem;
    height: 0.82rem;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.footer-el-name { font-weight: 600; letter-spacing: -0.01em; }
.footer-el-sub { font-weight: 400; color: var(--color-muted); }

/* ===== AMBIENT EFFECTS ===== */

/* Noise texture overlay for depth */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' 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.025'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
    opacity: 0.4;
    mix-blend-mode: overlay;
}

/* Cursor glow that follows mouse */
.cursor-glow {
    position: fixed;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 229, 160, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
    will-change: transform;
    transition: opacity 0.3s ease;
    opacity: 0;
}
.cursor-glow.active { opacity: 1; }

/* Animated gradient border on system-view */
.system-view {
    position: relative;
}
.system-view::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: calc(var(--radius-lg) + 1px);
    background: conic-gradient(
        from var(--gradient-angle, 0deg),
        transparent 40%,
        rgba(0, 229, 160, 0.4) 50%,
        rgba(0, 229, 160, 0.3) 55%,
        transparent 65%
    );
    z-index: -1;
    animation: gradientRotate 6s linear infinite;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.system-view:hover::before {
    opacity: 1;
}
@keyframes gradientRotate {
    from { --gradient-angle: 0deg; }
    to { --gradient-angle: 360deg; }
}
@property --gradient-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* Section separator gradients — one faint hairline at the top of every
   non-hero section. The hero already has a border-bottom on its
   integrations carousel, so we suppress the line on the section
   immediately after it. `.section:first-of-type` doesn't work because the
   hero is the first <section> in the document but doesn't carry the
   .section class. */
.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 160, 0.2), rgba(0, 229, 160, 0.15), transparent);
    opacity: 0.6;
}
.hero + .section::before { display: none; }
.hero::before { display: none; }

/* ===== ANIMATIONS ===== */
@keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(0, 229, 160, 0.4); }
    50% { opacity: 0.4; box-shadow: 0 0 2px rgba(0, 229, 160, 0.2); }
}
@keyframes glowBreathe {
    0%, 100% { opacity: 0.7; background: radial-gradient(ellipse, rgba(0, 229, 160, 0.1) 0%, rgba(0, 229, 160, 0.02) 40%, transparent 70%); }
    33% { opacity: 0.9; background: radial-gradient(ellipse, rgba(0, 229, 160, 0.08) 0%, rgba(0, 229, 160, 0.03) 40%, transparent 70%); }
    66% { opacity: 1; background: radial-gradient(ellipse, rgba(0, 229, 160, 0.12) 0%, rgba(0, 229, 160, 0.04) 40%, transparent 70%); }
}
@keyframes glowDrift {
    0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
    25% { transform: translateX(-48%) translateY(-15px) scale(1.02); }
    50% { transform: translateX(-50%) translateY(-5px) scale(0.98); }
    75% { transform: translateX(-52%) translateY(8px) scale(1.01); }
}
@keyframes systemViewEntry {
    from { opacity: 0; transform: translateY(30px) scale(0.96); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes msgSlideLeft {
    from { opacity: 0; transform: translateX(30px) scale(0.92); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes msgSlideRight {
    from { opacity: 0; transform: translateX(-30px) scale(0.92); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-5px); opacity: 1; }
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
@keyframes tickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(30px); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ===== SCROLL REVEAL =====
   Two classes, one observer. Apply `.reveal` to anything you want to
   fade-up on scroll. For grids of cards, add `.reveal-stagger` to the
   parent and the children animate in sequence — no per-card class, no
   per-card delay, no copy-pasted nth-child blocks at the call site.
   Step is 0.12s (slower than the previous 0.1s/0.05s mix, so the
   sequence is actually visible to the eye); each child transitions
   over 0.7s. Reveals once and never reverses — the observer is
   one-shot. */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo), filter 0.8s ease;
        filter: blur(2px);
        will-change: transform, opacity;
    }
    .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
    /* Staggered children — one source of truth for the timing. */
    .reveal-stagger > * {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo), filter 0.7s ease;
        filter: blur(1px);
    }
    .reveal-stagger.is-visible > * {
        opacity: 1; transform: translateY(0); filter: blur(0);
    }
    .reveal-stagger.is-visible > *:nth-child(1)  { transition-delay: 0s; }
    .reveal-stagger.is-visible > *:nth-child(2)  { transition-delay: 0.12s; }
    .reveal-stagger.is-visible > *:nth-child(3)  { transition-delay: 0.24s; }
    .reveal-stagger.is-visible > *:nth-child(4)  { transition-delay: 0.36s; }
    .reveal-stagger.is-visible > *:nth-child(5)  { transition-delay: 0.48s; }
    .reveal-stagger.is-visible > *:nth-child(6)  { transition-delay: 0.60s; }
    .reveal-stagger.is-visible > *:nth-child(7)  { transition-delay: 0.72s; }
    .reveal-stagger.is-visible > *:nth-child(8)  { transition-delay: 0.84s; }
    .reveal-stagger.is-visible > *:nth-child(9)  { transition-delay: 0.96s; }
    .reveal-stagger.is-visible > *:nth-child(10) { transition-delay: 1.08s; }
    .reveal-stagger.is-visible > *:nth-child(11) { transition-delay: 1.20s; }
    .reveal-stagger.is-visible > *:nth-child(12) { transition-delay: 1.32s; }
    .reveal-stagger.is-visible > *:nth-child(13) { transition-delay: 1.44s; }
    .reveal-stagger.is-visible > *:nth-child(14) { transition-delay: 1.56s; }
    .reveal-stagger.is-visible > *:nth-child(n+15) { transition-delay: 1.68s; }

    .hero-badge, .hero-title, .hero-subtitle, .hero-actions {
        animation: heroFadeUp 0.8s var(--ease-out-expo) both;
    }
    .hero-badge { animation-delay: 0.05s; }
    .hero-title { animation-delay: 0.15s; }
    .hero-subtitle { animation-delay: 0.25s; }
    .hero-actions { animation-delay: 0.35s; }
}

/* ===== SOCIAL PROOF ===== */
.proof-card {
    text-align: center;
    padding: 1.5rem 1rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.proof-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

/* ===== STICKY CTA ===== */
.sticky-cta {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 90;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s var(--ease-out-expo);
}
.sticky-cta.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.sticky-cta .btn {
    box-shadow: 0 8px 32px rgba(0, 229, 160, 0.4), 0 0 60px rgba(0, 229, 160, 0.15);
    padding: 12px 28px;
    font-size: 0.9rem;
}
.sticky-cta .btn:hover {
    box-shadow: 0 12px 40px rgba(0, 229, 160, 0.5), 0 0 80px rgba(0, 229, 160, 0.2);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 960px) {
    .hero-split {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .hero-copy { text-align: center; }
    .hero-copy .hero-subtitle { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .system-view {
        max-width: 480px;
        grid-template-columns: 260px 1fr;
    }
}

@media (max-width: 768px) {
    .hero { padding: 3rem 0 2rem; }
    .hero-title { font-size: 2rem; }
    .nav-links { gap: 1rem; }
    .nav-link { display: none; }
    /* Auth/admin actions stay reachable on mobile (Log in, Log out, Admin);
       only secondary links like PeterLab collapse. */
    .nav-link.nav-link-keep { display: inline-flex; align-items: center; }
    .section { padding: 3.5rem 0; }
    .sticky-cta { bottom: 16px; right: 16px; }
    .system-view {
        grid-template-columns: 1fr;
        max-width: 320px;
        height: 580px;
    }
    .phone-screen { height: 400px; }
    .evolution-counter {
        flex-wrap: wrap;
        gap: 1.5rem;
    }
    .timeline { padding-left: 60px; }
}

@media (max-width: 480px) {
    .container { padding: 0 16px; }
    .hero { padding: 2rem 0 1.5rem; }
    .hero-title { font-size: 1.75rem; }
    .hero-subtitle { font-size: 0.95rem; }
    .hero-actions { flex-direction: column; align-items: center; }
    .btn-lg { width: 100%; }
    .proof-card { padding: 1rem 0.75rem; }
    .section-title { font-size: 1.5rem; }
    .section { padding: 2.5rem 0; }
    .hero-badge { font-size: 0.68rem; }
    .nav-logo { font-size: 1rem; }
    .system-view { max-width: 280px; height: 520px; }
    .phone-screen { height: 340px; }
    .wa-msg { font-size: 0.72rem; }
    .wa-input-field { font-size: 0.68rem; padding: 5px 10px; }
}

/* ===== DASHBOARD ===== */
.dash-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    transition: border-color 0.2s ease;
}
.dash-card:hover { border-color: var(--color-border-bright); }
.dash-card-pad { padding: 2rem; }
.dash-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
}
.dash-forgot-link { font-size: 0.875rem; }
.dash-alert-below-form { margin-top: 1rem; }
.dash-auth-footer { margin-top: 1rem; text-align: center; font-size: 0.875rem; }
.dash-card-center { text-align: center; }
.dash-card-p { margin-top: 1rem; font-size: 0.875rem; }
.dash-card-p:first-of-type { margin-top: 0.5rem; }
.dash-btn-inline { display: inline-flex; margin-top: 1.5rem; }
.dash-card-form-mt { margin-top: 1.5rem; }
.dash-card-cancel-link { display: inline-block; margin-top: 1rem; font-size: 0.875rem; }

.dash-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-border);
    padding: 14px 32px;
}
.dash-nav-inner {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dash-nav-logo {
    font-weight: var(--fw-heading);
    font-size: 1.15rem;
    color: var(--color-text);
    letter-spacing: var(--tracking-logo);
    text-decoration: none;
}
.dash-nav-logo:hover { color: var(--color-text); }
.dash-nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.dash-nav-link {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}
.dash-nav-link:hover { color: var(--color-text); }
.dash-nav-user {
    font-size: 0.8rem;
    color: var(--color-muted);
}

.dash-title {
    font-size: 1.5rem;
    font-weight: var(--fw-heading);
    color: var(--color-text);
    letter-spacing: var(--tracking-heading);
}
.dash-subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
}
.dash-text { color: var(--color-text); }
.dash-text-secondary { color: var(--color-text-secondary); }
.dash-text-muted { color: var(--color-muted); }

.dash-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}
.dash-badge-green {
    background: var(--color-green-dim);
    color: var(--color-green);
    border: 1px solid rgba(0, 229, 160, 0.2);
}
.dash-badge-accent {
    background: var(--color-accent-light);
    color: var(--color-accent);
    border: 1px solid rgba(0, 229, 160, 0.2);
}
.dash-badge-yellow {
    background: rgba(255, 200, 0, 0.12);
    color: #ffc800;
    border: 1px solid rgba(255, 200, 0, 0.2);
}
.dash-badge-red {
    background: rgba(255, 68, 68, 0.12);
    color: var(--color-error);
    border: 1px solid rgba(255, 68, 68, 0.2);
}
.dash-badge-purple {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.2);
}
.dash-badge-dim {
    background: var(--color-bg-elevated);
    color: var(--color-muted);
    border: 1px solid var(--color-border);
}

.dash-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.dash-table {
    width: 100%;
    border-collapse: collapse;
}
.dash-table thead { background: var(--color-bg-elevated); }
.dash-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
}
.dash-table td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}
.dash-table tbody tr {
    border-bottom: 1px solid var(--color-border);
    transition: background 0.15s ease;
}
.dash-table tbody tr:hover { background: var(--color-bg-elevated); }
.dash-table .td-mono { font-family: var(--font-mono); }
.dash-table .td-primary { color: var(--color-text); font-weight: 500; }

.dash-btn {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
}
.dash-btn-primary {
    background: var(--color-accent);
    color: #0A0A0A;
    box-shadow: 0 2px 8px rgba(0, 229, 160, 0.3);
}
.dash-btn-primary:hover {
    background: var(--color-accent-hover);
    color: #0A0A0A;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 229, 160, 0.4);
}
.dash-btn-secondary {
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-bright);
}
.dash-btn-secondary:hover {
    color: var(--color-text);
    border-color: var(--color-muted);
}
/* Tertiary action — quieter than secondary, for the ones we don't want people
   pressing by reflex (switch runtimes, delete your key). This was used in the
   markup long before it existed here, so those buttons rendered as raw UA
   buttons: Chrome's dark-mode ButtonFace is #6B6B6B, near-identical to
   --color-muted, which made the disconnect button's label invisible. */
.dash-btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-bright);
}
.dash-btn-ghost:hover {
    background: var(--color-bg-elevated);
    color: var(--color-text);
    border-color: var(--color-muted);
}
.dash-btn-block { display: block; width: 100%; }

.dash-btn[disabled], .dash-btn[aria-busy="true"] {
    opacity: 0.65;
    cursor: default;
    transform: none;
}

/* Inline "working on it" indicator for actions that take real seconds. */
.sp-spinner {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-right: 0.5em;
    vertical-align: -0.1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: sp-spin 0.7s linear infinite;
}
.sp-spinner[hidden] { display: none; }
@keyframes sp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sp-spinner { animation-duration: 2.5s; } }

.dash-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border-bright);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text);
    background: var(--color-bg-elevated);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dash-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 229, 160, 0.15);
}
.dash-input::placeholder { color: var(--color-muted); }

.dash-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 6px;
}
.dash-hint {
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-top: 4px;
}

.dash-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 1.5rem 0;
}

.dash-alert {
    padding: 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    box-shadow: var(--shadow-md);
}
.dash-alert-error {
    background: rgba(255, 77, 77, 0.1);
    border: 1px solid rgba(255, 77, 77, 0.25);
    color: var(--color-danger);
}
.dash-alert-warning {
    background: rgba(255, 200, 0, 0.08);
    border: 1px solid rgba(255, 200, 0, 0.2);
    color: #ffc800;
}
.dash-alert-info {
    background: var(--color-accent-light);
    border: 1px solid rgba(0, 229, 160, 0.25);
    color: var(--color-accent);
}
.dash-alert-success {
    background: var(--color-green-dim);
    border: 1px solid rgba(0, 229, 160, 0.25);
    color: var(--color-success);
}

/* Progress stepper */
.dash-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    margin-bottom: 2rem;
}
.dash-step {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-muted);
}
.dash-step-done { color: var(--color-green); }
.dash-step-active { color: var(--color-accent); font-weight: 600; }
.dash-step-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
}
.dash-step-done .dash-step-dot {
    background: var(--color-green);
    color: var(--color-bg);
}
.dash-step-active .dash-step-dot {
    background: var(--color-accent);
    color: #0A0A0A;
}
.dash-step .dash-step-dot {
    background: var(--color-bg-elevated);
    color: var(--color-muted);
    border: 1px solid var(--color-border);
}
.dash-step-line {
    width: 2rem;
    height: 1px;
    background: var(--color-border-bright);
}

/* Checkbox dark theme */
.dash-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

/* Skill card */
.dash-skill-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.dash-skill-card:hover {
    border-color: var(--color-border-bright);
    background: var(--color-bg-elevated);
}

/* Spinner */
@keyframes dashSpin { to { transform: rotate(360deg); } }
.dash-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-border-bright);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: dashSpin 0.8s linear infinite;
    margin: 0 auto;
}
.dash-spinner-lg {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

/* Icon circle */
.dash-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-accent-light);
}

/* QR container */
.dash-qr-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16rem;
    height: 16rem;
    margin: 2rem auto;
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid var(--color-border-bright);
}
.dash-qr-box img { border-radius: var(--radius-sm); width: 14rem; height: 14rem; }

/* ===== FAQ DETAILS ===== */
.faq-detail {
    border-bottom: 1px solid var(--color-border);
    padding: 1.25rem 0;
}
.faq-detail summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-detail summary::-webkit-details-marker { display: none; }
.faq-detail summary::after {
    content: '+';
    font-size: 1.2rem;
    color: var(--color-muted);
    transition: transform 0.2s ease;
}
.faq-detail[open] summary::after {
    transform: rotate(45deg);
}
.faq-detail p {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* ---- Monitoring dashboard ---- */
.dash-gauge { position: relative; display: flex; flex-direction: column; align-items: center; }
.dash-gauge svg { transform: rotate(-90deg); }
.dash-gauge-track { fill: none; stroke: var(--color-border); stroke-width: 6; }
.dash-gauge-fill { fill: none; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }
.dash-gauge-label {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.1rem; font-weight: 700; color: var(--color-text);
}
.dash-gauge-caption { margin-top: 0.5rem; font-size: 0.75rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.05em; }

.dash-vm-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--color-muted);
    transition: border-color 0.2s ease;
}
.dash-vm-card--healthy { border-left-color: var(--color-green); }
.dash-vm-card--degraded { border-left-color: #ffc800; }
.dash-vm-card--down { border-left-color: var(--color-error); }

.dash-svc-row {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.75rem; color: var(--color-text-secondary);
}
.dash-svc-row .dash-status-dot { flex-shrink: 0; }

.dash-metric-bar {
    height: 6px; border-radius: 3px;
    background: var(--color-bg-elevated);
    overflow: hidden;
}
.dash-metric-bar-fill {
    height: 100%; border-radius: 3px;
    transition: width 0.4s ease;
}

.dash-ts-chart {
    display: flex; align-items: flex-end; gap: 2px; height: 6rem;
}
.dash-ts-bar {
    flex: 1; border-radius: 2px 2px 0 0;
    background: var(--color-accent);
    opacity: 0.7;
    transition: height 0.3s ease, opacity 0.2s;
    min-height: 2px;
}
.dash-ts-bar:hover { opacity: 1; }

/* ===== UNIFIED ADMIN DASHBOARD ===== */
.adm { display: flex; min-height: 100vh; }

/* Sidebar */
.adm-side {
    width: 200px;
    min-width: 200px;
    background: var(--color-bg-card);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.adm-side-hdr {
    padding: 1.1rem 1rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}
.adm-side-logo {
    font-weight: var(--fw-heading);
    font-size: 1rem;
    color: var(--color-text);
    text-decoration: none;
    letter-spacing: var(--tracking-logo);
}
.adm-side-logo:hover { color: var(--color-text); }
.adm-side-tag {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    background: var(--color-accent-light);
    padding: 2px 6px;
    border-radius: 4px;
}
.adm-side-nav {
    flex: 1;
    padding: 0.6rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.adm-side-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    border: none;
    background: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    text-align: left;
    width: 100%;
}
.adm-side-btn:hover { background: var(--color-bg-elevated); color: var(--color-text); }
.adm-side-btn.active { background: var(--color-accent-light); color: var(--color-accent); font-weight: 600; }
.adm-side-sep { height: 1px; background: var(--color-border); margin: 0.4rem 0.7rem; }
.adm-side-count {
    font-size: 0.6rem;
    background: var(--color-accent-light);
    color: var(--color-accent);
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: auto;
}
.adm-side-foot {
    padding: 0.6rem 0.8rem;
    border-top: 1px solid var(--color-border);
}

/* Main area */
.adm-main {
    flex: 1;
    min-width: 0;
    padding: 1.5rem 2rem 3rem;
    overflow-x: auto;
}

/* Tabs */
.adm-tab { display: none; }
.adm-tab.active { display: block; }

/* Page headers */
.adm-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.adm-hdr h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.02em;
}
.adm-h2 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}

/* Sections */
.adm-section { margin-top: 1.5rem; }

/* KPI row */
.adm-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem;
}
.adm-kpi {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.9rem 1rem;
    text-align: center;
    transition: border-color 0.2s;
}
.adm-kpi:hover { border-color: var(--color-border-bright); }
.adm-kpi-val {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}
.adm-kpi-lbl {
    display: block;
    font-size: 0.65rem;
    color: var(--color-muted);
    margin-top: 0.15rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Infra bar */
.adm-infra-bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.6rem 1rem;
    margin-top: 0.75rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}
.adm-infra-dot { display: flex; align-items: center; gap: 6px; }

/* Funnel */
.adm-funnel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}
.adm-funnel-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1.25rem;
    min-width: 100px;
}
.adm-funnel-num {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text);
}
.adm-funnel-lbl {
    font-size: 0.6rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.1rem;
}
.adm-funnel-arrow {
    font-size: 1.2rem;
    color: var(--color-muted);
}

/* Alert resolve button */
.adm-resolve-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.adm-resolve-btn:hover {
    background: var(--color-green-dim);
    color: var(--color-green);
    border-color: rgba(0, 229, 160, 0.3);
}

/* ===== SIGNUP MODAL ===== */
.signup-modal {
    position: fixed;
    inset: 0;
    /* Above the cookie banner (z-index 9999, fixed to the bottom edge). Every
       new signup is a first visit, so the banner IS showing, and at a lower
       z-index it sat on top of the modal and hid its bottom — the submit button
       on the form step, the choice cards on step 1. */
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    /* dvh, not vh: on mobile `100vh` is the chrome-less height, so a vh-capped
       card is taller than what is actually on screen and its bottom sits under
       the toolbar. The overlay also scrolls as a backstop for engines without
       dvh. */
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px;
}
.signup-modal.is-open {
    display: flex;
    animation: signupModalFade 0.22s var(--ease-out-expo);
}
.signup-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.62);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
}
.signup-modal-card {
    position: relative;
    width: 100%;
    max-width: 600px;
    /* Capped to the overlay's visible box so flex centring always has room to
       work: content taller than the window scrolls INSIDE the card instead of
       growing it past the viewport, which is what left the card pinned to the
       top edge with its bottom (the submit button) off screen. */
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    margin: auto;
    background: linear-gradient(180deg, rgba(26, 26, 40, 0.92), rgba(18, 18, 28, 0.92));
    border: 1px solid var(--color-border-bright);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), 0 0 100px rgba(0, 229, 160, 0.12);
    padding: 28px 32px 24px;
    animation: signupModalRise 0.32s var(--ease-out-expo);
}
@keyframes signupModalFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes signupModalRise {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.signup-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.signup-modal-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text);
}
.signup-modal-close:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.signup-modal-head {
    margin-bottom: 16px;
}
.signup-modal-title {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin: 0 0 6px;
}
.signup-modal-sub {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin: 0;
}
/* ===== Telegram prerequisite =====
   First thing in the signup modal, framed in Telegram blue and given real
   vertical room: an account is a hard requirement, and finding that out after
   signing up is the failure this replaces. The tick sits inside the same frame
   so the acknowledgement reads as part of the notice. */
.signup-telegram-notice {
    margin: 0 0 22px;
    padding: 18px 18px 16px;
    border: 1px solid rgba(42, 171, 238, 0.45);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(42, 171, 238, 0.16), rgba(42, 171, 238, 0.06));
    box-shadow: 0 0 34px rgba(42, 171, 238, 0.12);
}
.signup-telegram-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.signup-telegram-logo {
    display: flex;
    flex: 0 0 auto;
}
.signup-telegram-copy {
    min-width: 0;
}
.signup-telegram-title {
    margin: 0 0 4px;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
    line-height: 1.25;
}
.signup-telegram-sub {
    margin: 0 0 8px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--color-text-secondary);
}
.signup-telegram-dl {
    display: inline-block;
    font-size: 0.8rem;
    color: #4fbdf0;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.signup-telegram-dl:hover { color: #7fd2f7; }
.signup-telegram-check {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid rgba(42, 171, 238, 0.22);
    font-size: 0.85rem;
    color: var(--color-text);
}
.signup-telegram-check input[type="checkbox"] {
    accent-color: #2AABEE;
}
.signup-telegram-notice.is-missing {
    border-color: rgba(255, 77, 77, 0.65);
    box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.14);
}
@media (max-width: 480px) {
    .signup-telegram-head { gap: 11px; }
    .signup-telegram-title { font-size: 1rem; }
}

/* ===== Pre-signup runtime wizard =====
   Step 1 of the signup modal. Big, high-contrast brand cards because this is
   the decision people were previously making by accident. */
.signup-runtime-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 0.5rem 0 1rem;
}
@media (max-width: 520px) {
    .signup-runtime-options { grid-template-columns: 1fr; }
}
.signup-runtime-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 1.9rem 1.1rem 1.6rem;
    border: 1px solid var(--color-border-bright, rgba(255, 255, 255, 0.18));
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text);
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.signup-runtime-card:hover,
.signup-runtime-card:focus-visible {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
    transform: translateY(-2px);
}
.signup-runtime-icon {
    display: block;
    width: 84px;
    height: 84px;
    margin-bottom: 0.4rem;
    color: var(--color-text);
}
@media (max-width: 520px) {
    .signup-runtime-icon { width: 64px; height: 64px; }
}
.signup-runtime-icon svg { width: 100%; height: 100%; }
/* Claude's brand terracotta, so the two cards read as two products at a glance. */
.signup-runtime-icon-claude { color: #d97757; }
.signup-runtime-name {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
}
.signup-runtime-plan {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.signup-runtime-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}
.signup-runtime-note {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}
/* "I don't have an account yet" escape hatch under the cards: a collapsible,
   not a dead end, so a visitor without a subscription learns exactly where to
   get one instead of bailing at checkout. */
.signup-runtime-noacct { margin: 0 0 0.85rem; }
.signup-runtime-noacct-toggle {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 0.88rem;
    text-decoration: underline;
    cursor: pointer;
}
.signup-runtime-noacct-toggle:hover,
.signup-runtime-noacct-toggle[aria-expanded="true"] { color: var(--color-text); }
.signup-runtime-noacct-panel {
    margin-top: 0.6rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border-bright, rgba(255, 255, 255, 0.18));
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}
.signup-runtime-noacct-panel p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}
.signup-runtime-noacct-panel a {
    color: var(--color-text);
    font-weight: 600;
    text-decoration: underline;
}
.signup-tier-summary {
    margin: 0 0 1rem 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.signup-tier-summary .signup-tier-kicker {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}
.signup-tier-summary .signup-tier-label {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0.15rem;
}
.signup-change-plan {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
}
.signup-field {
    margin-bottom: 14px;
}
/* Short fields pair up on a roomy modal so the whole form — submit button
   included — fits a laptop window without the card scrolling internally. A
   signup button below the fold is a dropoff the flow can't afford. */
.signup-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}
@media (max-width: 560px) {
    .signup-field-row { grid-template-columns: 1fr; }
}
.signup-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.signup-field input[type="text"],
.signup-field input[type="email"],
.signup-field input[type="tel"],
.signup-field input[type="password"] {
    width: 100%;
    padding: 11px 14px;
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid var(--color-border-bright);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.98rem;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.signup-field input::placeholder {
    color: var(--color-muted);
}
.signup-field input:focus {
    outline: none;
    border-color: var(--color-accent);
    background: rgba(10, 10, 10, 0.85);
    box-shadow: 0 0 0 3px rgba(0, 229, 160, 0.18);
}
.signup-slug-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.signup-slug-wrap input {
    flex: 1;
    padding-right: 118px;
    font-family: var(--font-mono);
    font-size: 0.95rem;
}
.signup-slug-suffix {
    position: absolute;
    right: 12px;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    pointer-events: none;
}
.signup-hint {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    margin-top: 6px;
    min-height: 1em;
    line-height: 1.4;
    transition: color 0.15s;
}
.signup-hint.is-ok    { color: var(--color-green); }
.signup-hint.is-error { color: var(--color-error); }
.signup-error {
    display: none;
    padding: 10px 12px;
    margin: 6px 0 12px;
    background: rgba(255, 68, 68, 0.08);
    border: 1px solid rgba(255, 68, 68, 0.25);
    border-radius: var(--radius-sm);
    color: var(--color-error);
    font-size: 0.88rem;
    line-height: 1.5;
}
.signup-error.is-visible { display: block; }
.signup-submit {
    width: 100%;
    margin-top: 12px;
    padding: 13px 20px;
    font-size: 1rem;
    font-weight: 600;
}
.signup-submit.is-loading {
    opacity: 0.7;
    pointer-events: none;
}
.signup-consent {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0 12px;
}
.signup-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
    cursor: pointer;
}
.signup-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--color-accent);
    cursor: pointer;
}
.signup-check a {
    color: var(--color-accent);
    text-decoration: underline;
}
.signup-modal-success {
    text-align: center;
    padding: 28px 12px 16px;
    animation: signupModalRise 0.4s var(--ease-out-expo);
}
.signup-success-mark {
    display: inline-flex;
    color: var(--color-green);
    margin-bottom: 18px;
}
.signup-success-mark svg circle,
.signup-success-mark svg path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: signupCheckDraw 0.7s var(--ease-out-expo) forwards;
}
.signup-success-mark svg path {
    animation-delay: 0.25s;
}
@keyframes signupCheckDraw {
    to { stroke-dashoffset: 0; }
}
.signup-success-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}
.signup-success-sub {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.6;
}
body.signup-modal-open {
    overflow: hidden;
}
@media (max-width: 480px) {
    .signup-modal { padding: 12px; }
    .signup-modal-card { padding: 32px 22px 22px; }
    .signup-modal-title { font-size: 1.35rem; }
    .signup-slug-wrap input { padding-right: 108px; }
}
@media (prefers-reduced-motion: reduce) {
    .signup-modal.is-open,
    .signup-modal-card,
    .signup-modal-success { animation: none; }
    .signup-success-mark svg circle,
    .signup-success-mark svg path { animation: none; stroke-dashoffset: 0; }
}

/* ===== CAPACITY BANNER (waitlist mode) =====
   Sits above the tier pills when signup_mode=WAITLIST_ONLY to flag the
   "we're at capacity" state. Warm/amber accent + pulsing clock icon so
   users register it as an unusual moment before scanning the prices. */
.capacity-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 720px;
    margin: 0 auto 2rem;
    padding: 16px 20px;
    background: rgba(255, 100, 50, 0.08);
    border: 1px solid rgba(255, 100, 50, 0.32);
    border-radius: var(--radius-md);
    color: var(--color-text);
}
.capacity-banner-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255, 100, 50, 0.15);
    color: #ff7a3a;
    animation: capacityPulse 2.6s ease-in-out infinite;
}
@keyframes capacityPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 100, 50, 0.45); }
    50%      { box-shadow: 0 0 0 9px rgba(255, 100, 50, 0); }
}
.capacity-banner-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.45;
}
.capacity-banner-headline {
    font-size: 0.98rem;
    color: var(--color-text);
}
.capacity-banner-sub {
    font-size: 0.86rem;
    color: var(--color-text-secondary);
}
/* Smaller inline version used at the top of the waitlist modal head. */
.capacity-banner-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 100, 50, 0.12);
    border: 1px solid rgba(255, 100, 50, 0.32);
    color: #ff7a3a;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
@media (max-width: 480px) {
    .capacity-banner {
        padding: 14px 16px;
        gap: 12px;
    }
    .capacity-banner-icon {
        width: 32px;
        height: 32px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .capacity-banner-icon { animation: none; }
}

/* ===== LANGUAGE SWITCHER ===== */
.lang-switcher {
    position: relative;
    display: inline-block;
    margin: 0.75rem 0;
}
.lang-switcher-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.lang-switcher-trigger:hover {
    border-color: rgba(0, 229, 160, 0.35);
    background: rgba(255, 255, 255, 0.05);
}
.lang-switcher-trigger > svg:first-of-type { color: var(--color-muted); }
.lang-switcher-caret {
    color: var(--color-muted);
    transition: transform 0.2s ease;
}
.lang-switcher-trigger[aria-expanded="true"] .lang-switcher-caret {
    transform: rotate(180deg);
    color: var(--color-accent);
}
.lang-switcher-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    list-style: none;
    margin: 0;
    padding: 0.4rem;
    background: var(--color-bg-elevated, #161616);
    border: 1px solid var(--color-border-bright);
    border-radius: 12px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
    z-index: 50;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* The HTML `hidden` attribute resolves to display:none, but our class
   selector above outranks that, so the menu would stay visible. Force
   it off when the JS toggles `hidden`. */
.lang-switcher-menu[hidden] { display: none; }
.lang-switcher-menu li { margin: 0; }
.lang-switcher-form { margin: 0; }
.lang-switcher-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: none;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.lang-switcher-option:hover {
    background: rgba(0, 229, 160, 0.1);
    color: var(--color-accent);
}
.lang-switcher-option.is-current {
    color: var(--color-accent);
    background: rgba(0, 229, 160, 0.08);
}
.lang-switcher-option-code {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-muted);
    min-width: 22px;
}
.lang-switcher-option.is-current .lang-switcher-option-code {
    color: var(--color-accent);
}