/* Radia cockpit visual layer
   Loaded after page-local styles so the proof-page language carries across public pages. */

:root {
    --cockpit-panel: linear-gradient(165deg, rgba(18, 29, 44, 0.94) 0%, rgba(7, 13, 23, 0.985) 74%);
    --cockpit-panel-soft: linear-gradient(155deg, rgba(20, 31, 48, 0.9), rgba(5, 11, 20, 0.97) 62%, rgba(10, 24, 24, 0.93));
    --cockpit-border: rgba(121, 204, 255, 0.22);
    --cockpit-border-hot: rgba(0, 255, 136, 0.28);
    --cockpit-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 0 0 1px rgba(255,255,255,0.025) inset, 0 28px 68px rgba(0,0,0,0.48), 0 0 60px rgba(0,204,255,0.07);
    --cockpit-shadow-lg: 0 1px 0 rgba(255,255,255,0.08) inset, 0 0 0 1px rgba(255,255,255,0.025) inset, 0 34px 80px rgba(0,0,0,0.55), -18px 26px 70px rgba(0,204,255,0.12);
    --cockpit-grid:
        linear-gradient(rgba(116, 215, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(116, 215, 255, 0.05) 1px, transparent 1px);
    --cockpit-hotline: linear-gradient(90deg, transparent, #00ccff, #00ff88, #ffd166, transparent);
}

body {
    position: relative;
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(3, 7, 12, 0.18) 0%, rgba(3, 7, 12, 0.72) 44%, rgba(2, 5, 10, 0.98) 100%),
        var(--bg-deep) url('/static/webapp/radiabackground.png') center top / cover no-repeat fixed !important;
}

body::before,
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

body::before {
    background:
        linear-gradient(135deg, rgba(0, 204, 255, 0.12) 0%, transparent 28%),
        linear-gradient(225deg, rgba(255, 184, 77, 0.08) 0%, transparent 24%),
        var(--cockpit-grid);
    background-size: auto, auto, 54px 54px, 54px 54px;
    opacity: 0.58;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.64) 58%, transparent 100%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.64) 58%, transparent 100%);
}

body::after {
    opacity: 0.22;
    background:
        repeating-linear-gradient(115deg, transparent 0 92px, rgba(0, 204, 255, 0.05) 93px 94px, transparent 95px 168px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 5px);
    mix-blend-mode: screen;
}

.nav,
main,
.footer {
    position: relative;
}

main,
.footer { z-index: 1; }
.nav { z-index: 10000; }

.market-home,
.pricing-page,
.bt-page,
.auth-section,
.legal-page {
    background:
        linear-gradient(180deg, rgba(3, 7, 12, 0.18) 0%, rgba(3, 7, 12, 0.86) 50%, rgba(2, 5, 10, 0.98) 100%) !important;
}

.section,
.section-alt,
.market-section,
.market-section.compact {
    background: linear-gradient(180deg, rgba(5, 11, 18, 0.16), rgba(5, 11, 18, 0.62)) !important;
    border-top: 1px solid rgba(121, 204, 255, 0.08);
}

.nav-inner,
.nav-dropdown-menu,
.footer-shell,
.pricing-inner,
.content-panel,
.auth-card,
.legal-section-card,
.market-home .proof-card,
.feature-card,
.security-card,
.persona-card,
.market-card,
.pricing-card,
.product-card,
.engine-tier,
.engine-mini-card,
.stat-block,
.step,
.cta-form-card,
.hero-proof-cell,
.trust-pill,
.bt-metric,
.bt-panel,
.bt-check,
.tier-card,
.included-card,
.style-option,
.platform-card,
.footer-panel,
.footer-risk-shell,
.console-faq .faq-item,
.buy-surface-card,
.plan-card,
.founding-callout,
.how-step,
.unlock-item,
.risk-warning,
.reg-notice,
.exp-card {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    border-color: var(--cockpit-border) !important;
    background: var(--cockpit-panel) !important;
    box-shadow: var(--cockpit-shadow) !important;
    clip-path: none !important;
}

.nav-inner,
.pricing-inner,
.content-panel,
.auth-card,
.footer-shell,
.tier-card.highlight {
    background:
        var(--cockpit-panel-soft),
        var(--cockpit-grid) !important;
    background-size: auto, 28px 28px, 28px 28px !important;
    box-shadow: var(--cockpit-shadow-lg) !important;
}

.nav-inner {
    overflow: visible !important;
}

.nav-dropdown {
    position: relative !important;
}

.nav-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    overflow: visible !important;
    z-index: 10001 !important;
}

.nav-inner::before,
.footer-shell::before,
.pricing-inner::before,
.content-panel::before,
.auth-card::before,
.legal-section-card::before,
.market-home .proof-card::before,
.feature-card::before,
.security-card::before,
.persona-card::before,
.market-card::before,
.pricing-card::before,
.product-card::before,
.engine-tier::before,
.engine-mini-card::before,
.stat-block::before,
.step::before,
.cta-form-card::before,
.hero-proof-cell::before,
.bt-metric::before,
.bt-panel::before,
.bt-check::before,
.tier-card::before,
.included-card::before,
.style-option::before,
.platform-card::before,
.footer-panel::before,
.console-faq .faq-item::before,
.buy-surface-card::before,
.exp-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: var(--cockpit-hotline) !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

.nav-inner::after,
.footer-shell::after,
.pricing-inner::after,
.content-panel::after,
.auth-card::after,
.market-home .proof-card::after,
.feature-card::after,
.security-card::after,
.persona-card::after,
.market-card::after,
.pricing-card::after,
.product-card::after,
.engine-tier::after,
.stat-block::after,
.step::after,
.cta-form-card::after,
.bt-panel::after,
.tier-card::after,
.included-card::after,
.platform-card::after,
.buy-surface-card::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background:
        linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.055) 48%, transparent 58%),
        var(--cockpit-grid) !important;
    background-size: auto, 32px 32px, 32px 32px !important;
    opacity: 0.42 !important;
    pointer-events: none !important;
}

.nav-inner > *,
.footer-shell > *,
.pricing-inner > *,
.content-panel > *,
.auth-card > *,
.market-home .proof-card > *,
.feature-card > *,
.security-card > *,
.persona-card > *,
.market-card > *,
.pricing-card > *,
.product-card > *,
.engine-tier > *,
.engine-mini-card > *,
.stat-block > *,
.step > *,
.cta-form-card > *,
.hero-proof-cell > *,
.bt-metric > *,
.bt-panel > *,
.bt-check > *,
.tier-card > *,
.included-card > *,
.style-option > *,
.platform-card > *,
.footer-panel > *,
.console-faq .faq-item > *,
.buy-surface-card > *,
.exp-card > * {
    position: relative;
    z-index: 1;
}

.nav-dropdown-trigger,
.nav-dropdown-item,
.legal-console-link,
.trust-pill,
.bt-pill,
.proof-badge,
.save-badge,
.tier-popular,
.platform-badge,
.receipt-badge {
    border-radius: 999px !important;
    letter-spacing: 0 !important;
}

.btn,
.nav-btn-primary,
.billing-switch,
.form-input,
.form-checkbox-mark,
.social-icon,
.platform-icon,
.included-card-icon,
.point-icon,
.tech-badge,
.exchange-chip {
    border-radius: 8px !important;
}

.btn-primary,
.nav-btn-primary,
.tier-popular,
.benefit-check,
.wizard-step-dot.done,
.receipt-icon,
.proof-section-number {
    background: linear-gradient(135deg, #7ee7ff, #00ff88 68%, #ffd166) !important;
    color: #071018 !important;
    box-shadow: 0 18px 42px rgba(0,204,255,0.22) !important;
}

.btn-outline,
.btn-social {
    background: rgba(255,255,255,0.035) !important;
    border: 1px solid rgba(121, 204, 255, 0.22) !important;
    color: rgba(235,247,255,0.88) !important;
}

.btn:hover,
.nav-btn-primary:hover,
.market-card:hover,
.feature-card:hover,
.security-card:hover,
.persona-card:hover,
.pricing-card:hover,
.product-card:hover,
.platform-card:hover,
.style-option:hover,
.included-card:hover,
.bt-metric:hover,
.bt-panel:hover,
.tier-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(0, 255, 136, 0.32) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.09) inset, 0 34px 80px rgba(0,0,0,0.52), 0 0 72px rgba(0,204,255,0.1) !important;
}

.hero-title,
.section-title,
.heading-2,
.bt-title,
.legal-title,
.connect-header h1,
.auth-title,
.pricing-hero .heading-2,
.tier-amount,
.stat-val,
.bt-metric strong,
.hero-proof-cell strong {
    letter-spacing: 0 !important;
    text-shadow: 0 4px 34px rgba(0, 204, 255, 0.22), 0 18px 54px rgba(0,0,0,0.54) !important;
}

.hero-title span,
.hero-accent,
.stat-val,
.tier-amount,
.bt-positive,
.auth-link,
.form-link,
.footer-link:hover,
.legal-body a:hover {
    color: #00ff88 !important;
}

.hero-label,
.section-kicker,
.proof-label,
.feature-label,
.security-label,
.pricing-label,
.label-tag,
.bt-kicker,
.bt-label,
.legal-section-kicker,
.footer-console-label,
.nav-meta-text,
.connect-header h1 + p,
.style-selector-label {
    letter-spacing: 0 !important;
}

.hero-label::before,
.section-kicker::before,
.label-tag::before,
.bt-kicker::before {
    background: linear-gradient(90deg, #00ccff, #00ff88, transparent) !important;
}

.market-hero {
    border-bottom-color: rgba(121, 204, 255, 0.16) !important;
}

.market-hero::before {
    background:
        linear-gradient(90deg, rgba(4, 8, 14, 0.94) 0%, rgba(4, 8, 14, 0.62) 52%, rgba(4, 8, 14, 0.20) 100%),
        linear-gradient(180deg, rgba(4, 8, 14, 0.08) 0%, rgba(4, 8, 14, 0.9) 100%),
        url('/static/radiabackground.png') center center / cover no-repeat !important;
}

.market-hero::after,
.bt-page::before,
.pricing-page::before,
.auth-section::before,
.legal-page::before {
    background:
        var(--cockpit-grid),
        repeating-linear-gradient(115deg, transparent 0 92px, rgba(0, 204, 255, 0.055) 93px 94px, transparent 95px 168px) !important;
    background-size: 54px 54px, 54px 54px, auto !important;
    opacity: 0.5 !important;
}

.hero-media video,
.hero-media img,
.auth-logo,
.nav-logo-img,
.footer-logo-img {
    mix-blend-mode: screen;
    filter: saturate(130%) contrast(115%) drop-shadow(0 26px 64px rgba(0, 204, 255, 0.16)) !important;
}

.hero-proof-cell,
.trust-pill,
.tier-credits,
.support-banner,
.footer-status,
.platform-card.selected,
.style-option.active,
.exp-choice input:checked + .exp-card {
    border-color: var(--cockpit-border-hot) !important;
    background: linear-gradient(165deg, rgba(0, 255, 136, 0.08), rgba(7, 13, 23, 0.97) 74%) !important;
}

.form-input,
.outcome-form input {
    background: rgba(0,0,0,0.44) !important;
    border-color: rgba(0,204,255,0.3) !important;
    color: #eaf6ff !important;
}

.form-input:focus,
.outcome-form input:focus {
    border-color: rgba(0,204,255,0.72) !important;
    box-shadow: 0 0 0 3px rgba(0,204,255,0.12), 0 16px 34px rgba(0,0,0,0.22) !important;
}

.bt-table-wrap,
.yearly-table-wrap,
.tab-panel,
.receipt-intro-grid,
.outcome-results,
.drift-grid {
    border-radius: 8px !important;
    border-color: rgba(121, 204, 255, 0.16) !important;
    background: rgba(255,255,255,0.08) !important;
}

.footer-risk-shell {
    border-color: rgba(255, 209, 102, 0.22) !important;
    background: linear-gradient(165deg, rgba(48, 36, 12, 0.78) 0%, rgba(7, 13, 23, 0.98) 74%) !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 968px) {
    body::before { opacity: 0.42; }
    .nav-links.open { background: var(--cockpit-panel) !important; }
}

@media (max-width: 600px) {
    .nav-inner,
    .footer-shell,
    .pricing-inner,
    .content-panel,
    .auth-card { border-radius: 8px !important; }
}