:root {
    /* Enhanced Color Palette */
    --hawk-night: #010212;
    --hawk-dusk: #05132f;
    --hawk-dusk-light: #0a1f3f;
    --hawk-slate: #0a1f3f;
    --hawk-slate-light: #1e293b;
    --hawk-shadow: rgba(6, 20, 48, 0.8);

    /* Accent Colors */
    --hawk-ember: #f472b6;
    --hawk-ember-light: #fb7185;
    --hawk-gold: #bef264;
    --hawk-gold-light: #d9f99d;
    --hawk-sky: #5eead4;
    --hawk-sky-light: #99f6e4;
    --hawk-ice: #f8fafc;
    --hawk-ice-muted: #e2e8f0;
    --hawk-muted: #8ea2d8;
    --hawk-muted-light: #cbd5e1;
    --hawk-iris: #a855f7;
    --hawk-iris-light: #c084fc;
    --hawk-azure: #38bdf8;
    --hawk-azure-light: #7dd3fc;

    /* Glass Effects */
    --glass: rgba(7, 18, 44, 0.54);
    --glass-strong: rgba(5, 15, 36, 0.92);
    --glass-subtle: rgba(7, 18, 44, 0.35);
    --glass-border: rgba(148, 163, 184, 0.32);
    --glass-border-light: rgba(148, 163, 184, 0.18);
    --glass-highlight: rgba(226, 232, 240, 0.12);
    --glass-halo: rgba(14, 165, 233, 0.32);

    /* Shadow System */
    --glass-shadow-outer: 0 28px 60px rgba(2, 6, 23, 0.55);
    --glass-shadow-outer-soft: 0 16px 32px rgba(2, 6, 23, 0.35);
    --glass-shadow-inner: inset 0 1px 0 rgba(226, 232, 240, 0.08);
    --glass-shadow-inner-strong: inset 0 -1px 0 rgba(8, 47, 73, 0.55);
    --shadow-sm: 0 1px 2px 0 rgba(2, 6, 23, 0.25);
    --shadow-md: 0 4px 6px -1px rgba(2, 6, 23, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(2, 6, 23, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(2, 6, 23, 0.5);

    /* Gradient System */
    --halo-gradient: conic-gradient(from 120deg at 50% 50%, rgba(56, 189, 248, 0.28), rgba(129, 140, 248, 0.22), rgba(236, 72, 153, 0.18), rgba(56, 189, 248, 0.28));
    --starlit-grid: linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px), linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px);
    --nebula-gradient: radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.12), transparent 55%), radial-gradient(circle at 78% 28%, rgba(236, 72, 153, 0.14), transparent 60%), radial-gradient(circle at 45% 88%, rgba(190, 242, 100, 0.12), transparent 58%);
    --aurora-gradient: linear-gradient(135deg, rgba(94, 234, 212, 0.32), rgba(129, 140, 248, 0.36), rgba(244, 114, 182, 0.28));
    --aurora-highlight: linear-gradient(125deg, rgba(56, 189, 248, 0.65), rgba(192, 132, 252, 0.45));
    --aurora-glow: 0 40px 120px rgba(56, 189, 248, 0.35);

    /* Spacing Scale */
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.25rem;  /* 20px */
    --space-6: 1.5rem;   /* 24px */
    --space-8: 2rem;     /* 32px */
    --space-10: 2.5rem;  /* 40px */
    --space-12: 3rem;    /* 48px */
    --space-16: 4rem;    /* 64px */
    --space-20: 5rem;    /* 80px */
    --space-24: 6rem;    /* 96px */
    --space-32: 8rem;    /* 128px */

    /* Typography Scale */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    --font-size-5xl: 3rem;      /* 48px */
    --font-size-6xl: 3.75rem;   /* 60px */
    --font-size-7xl: 4.5rem;    /* 72px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;

    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;

    /* Border Radius Scale */
    --radius-sm: 0.125rem;  /* 2px */
    --radius-md: 0.375rem;  /* 6px */
    --radius-lg: 0.5rem;    /* 8px */
    --radius-xl: 0.75rem;   /* 12px */
    --radius-2xl: 1rem;     /* 16px */
    --radius-3xl: 1.5rem;   /* 24px */
    --radius-full: 9999px;

    /* Animation & Timing */
    --ease: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;

    /* Z-Index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* Breakpoint Scale */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    /* Layout Variables */
    --confidential-banner-height: 6.5rem;
    --confidential-banner-gap: 0.75rem;
    --site-header-height: 0px;
    --twitch-embed-safe-area: calc(
        max(0px, var(--site-header-height, 0px)) +
        max(0px, var(--confidential-banner-height, 0px)) +
        max(0px, var(--confidential-banner-gap, 0px))
    );

    /* Background Variables */
    --body-background: var(--nebula-gradient), linear-gradient(145deg, rgba(12, 74, 110, 0.18), transparent 68%), linear-gradient(170deg, #01030f 0%, #041331 38%, #062c45 100%);
    --body-before-background: radial-gradient(circle at 18% 82%, rgba(129, 140, 248, 0.22), transparent 60%), radial-gradient(circle at 76% 18%, rgba(56, 189, 248, 0.24), transparent 55%), linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
    --body-after-background: radial-gradient(circle at center, rgba(94, 234, 212, 0.25), transparent 68%), var(--halo-gradient);
    --body-before-background-size: auto, auto, 140px 140px, 140px 140px;
    --body-before-background-repeat: no-repeat, no-repeat, repeat, repeat;
}

@supports (color-mix(in srgb, red 50%, white 50%)) {
    :root {
        --glass-border: color-mix(in srgb, rgba(148, 163, 184, 0.42) 55%, rgba(34, 211, 238, 0.35) 45%);
    }
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Inter', 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--hawk-ice);
    background: var(--body-background);
    position: relative;
    padding: 0;
    overflow-x: hidden;
}

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

body::before {
    inset: 0;
    width: auto;
    height: auto;
    background-image: var(--body-before-background);
    background-size: var(--body-before-background-size);
    background-repeat: var(--body-before-background-repeat);
    background-position: center;
    opacity: 0.55;
    mix-blend-mode: overlay;
    animation: auroraDrift 32s ease-in-out infinite;
}

body::after {
    inset: -25% -15% auto auto;
    width: 52rem;
    height: 52rem;
    background: var(--body-after-background);
    filter: blur(76px);
    opacity: 0.85;
    mix-blend-mode: screen;
    animation: auroraOrbit 24s linear infinite;
}

body::before,
body::after {
    will-change: transform, opacity;
}

main::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(94, 234, 212, 0.12), transparent 55%),
        radial-gradient(circle at 75% 5%, rgba(129, 140, 248, 0.12), transparent 55%);
    pointer-events: none;
    z-index: -2;
    animation: auroraVeil 28s ease-in-out infinite;
}

main::after {
    content: '';
    position: fixed;
    inset: auto auto -18% -18%;
    width: clamp(28rem, 38vw, 40rem);
    height: clamp(28rem, 38vw, 40rem);
    background:
        radial-gradient(circle at center, rgba(236, 72, 153, 0.35), transparent 62%),
        radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.38), transparent 65%),
        linear-gradient(120deg, rgba(148, 163, 184, 0.24) 0%, transparent 65%);
    filter: blur(86px);
    opacity: 0.68;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: -3;
    animation: auroraPulse 26s ease-in-out infinite;
}

body::after,
main::before {
    mask-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.28));
}

@keyframes auroraOrbit {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.85;
    }

    50% {
        transform: rotate(180deg) scale(1.08);
        opacity: 0.65;
    }

    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.85;
    }
}

@keyframes auroraDrift {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-2%, -1%, 0) scale(1.04);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes auroraVeil {
    0% {
        filter: hue-rotate(0deg) saturate(100%);
    }

    50% {
        filter: hue-rotate(18deg) saturate(115%);
    }

    100% {
        filter: hue-rotate(0deg) saturate(100%);
    }
}

/* Community Values Grid */
.community-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.community-value-card {
    text-align: center;
    padding: 2.5rem 2rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 1.5rem;
    backdrop-filter: blur(12px);
    transition: all 0.3s var(--ease);
    position: relative;
    overflow: hidden;
}

.community-value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.05) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
    pointer-events: none;
}

.community-value-card:hover::before {
    opacity: 1;
}

.community-value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 32px 64px rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.3);
}

.community-value-card i {
    transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}

.community-value-card:hover i {
    transform: scale(1.1);
    color: var(--hawk-sky);
}

/* Enhanced Tab Styling */
.feature-content,
.connect-content {
    background: rgba(7, 18, 44, 0.3);
    border-radius: 1.5rem;
    padding: 3rem 2rem;
    border: 1px solid rgba(148, 163, 184, 0.15);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 40px rgba(2, 6, 23, 0.3);
    min-height: 450px;
    position: relative;
}

/* Tab Navigation Improvements */
.feature-tab,
.connect-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border: 2px solid rgba(56, 189, 248, 0.2);
    border-radius: 2.5rem;
    background: rgba(15, 23, 42, 0.7);
    color: rgba(226, 232, 240, 0.8);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.025em;
    transition: all 0.3s var(--ease);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
}

.feature-tab:hover,
.connect-tab:hover {
    border-color: rgba(56, 189, 248, 0.5);
    color: var(--hawk-sky);
    background: rgba(15, 23, 42, 0.85);
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(56, 189, 248, 0.2);
}

.feature-tab.active,
.connect-tab.active {
    border-color: var(--hawk-sky);
    color: var(--hawk-ice);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(168, 85, 247, 0.15));
    box-shadow: 0 12px 32px rgba(56, 189, 248, 0.3);
    transform: translateY(-2px);
}

.feature-tab.active::after,
.connect-tab.active::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: var(--hawk-gold);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(253, 224, 71, 0.5);
}

/* Tab Panel Animations */
.feature-panel,
.connect-panel {
    display: none;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.feature-panel.active,
.connect-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: tabFadeIn 0.6s var(--ease) forwards;
}

@keyframes tabFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Contact Tab Grid Improvements */
#contact-tab .grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

#contact-tab .glass-effect {
    padding: 3rem 2rem;
    text-align: center;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 1.5rem;
    backdrop-filter: blur(12px);
    transition: all 0.3s var(--ease);
    position: relative;
    overflow: hidden;
}

#contact-tab .glass-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.05) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
    pointer-events: none;
}

#contact-tab .glass-effect:hover::before {
    opacity: 1;
}

#contact-tab .glass-effect:hover {
    transform: translateY(-8px);
    box-shadow: 0 32px 64px rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.3);
}

#contact-tab .glass-effect i {
    transition: transform 0.3s var(--ease);
}

#contact-tab .glass-effect:hover i {
    transform: scale(1.1);
}

/* Contact Options Section */
.contact-options {
    background: rgba(7, 18, 44, 0.3);
    border-radius: 1.5rem;
    padding: 3rem 2rem;
    border: 1px solid rgba(148, 163, 184, 0.15);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 40px rgba(2, 6, 23, 0.3);
    position: relative;
}

.contact-options .grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-options .glass-effect {
    padding: 3rem 2rem;
    text-align: center;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 1.5rem;
    backdrop-filter: blur(12px);
    transition: all 0.3s var(--ease);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
}

.contact-options .glass-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.05) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
    pointer-events: none;
}

.contact-options .glass-effect:hover::before {
    opacity: 1;
}

.contact-options .glass-effect:hover {
    transform: translateY(-8px);
    box-shadow: 0 32px 64px rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.3);
}

.contact-options .glass-effect i {
    transition: transform 0.3s var(--ease);
    margin-bottom: 1rem;
}

.contact-options .glass-effect:hover i {
    transform: scale(1.1);
}

.contact-options .glass-effect h3 {
    margin-bottom: 1rem;
    transition: color 0.3s var(--ease);
}

.contact-options .glass-effect:hover h3 {
    color: var(--hawk-sky);
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .community-values-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .community-value-card {
        padding: 2rem 1.5rem;
    }
    
    .feature-content,
    .connect-content {
        padding: 2rem 1rem;
        min-height: 350px;
    }
    
    .feature-tab,
    .connect-tab {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
        gap: 0.5rem;
    }
    
    #contact-tab .grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    #contact-tab .glass-effect {
        padding: 2rem 1.5rem;
    }
    
    .contact-options {
        padding: 2rem 1rem;
    }
    
    .contact-options .grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .contact-options .glass-effect {
        padding: 2rem 1.5rem;
        min-height: 240px;
    }
}

::selection {
    background: rgba(124, 58, 237, 0.35);
    color: var(--hawk-ice);
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--hawk-gold);
}

a:focus {
    outline: 2px solid var(--hawk-gold);
    outline-offset: 2px;
}

img {
    max-width: 100%;
    height: auto;
}

/* Prevent Font Awesome icons from being squished */
i[class*="fa-"],
i[class*="fas"],
i[class*="far"],
i[class*="fal"],
i[class*="fab"],
i[class*="fad"] {
    display: inline-block;
    flex-shrink: 0;
    width: 1em;
    text-align: center;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.confidential-banner {
    position: fixed;
    inset: 0 auto auto 0;
    width: 100%;
    height: auto;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(236, 72, 153, 0.1));
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(56, 189, 248, 0.2);
    box-shadow: 0 8px 32px rgba(56, 189, 248, 0.15);
    z-index: 100;
    font-family: system-ui, -apple-system, sans-serif;
}

.confidential-banner[hidden] {
    display: none !important;
}

:root[data-confidential-banner-prefers-hidden] {
    --confidential-banner-height: 0px;
    --confidential-banner-gap: 0px;
}

:root[data-confidential-banner-prefers-hidden] .confidential-banner {
    display: none !important;
}

.confidential-banner__container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.confidential-banner__headline {
    margin: 0;
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.5;
}

.confidential-banner__subline {
    margin: 0;
    font-size: clamp(0.8rem, 1.8vw, 0.95rem);
    font-weight: 500;
    color: rgba(226, 232, 240, 0.85);
    line-height: 1.5;
}

.confidential-banner__link {
    color: #38bdf8;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
    font-weight: 600;
    transition: color 0.2s ease;
}

.confidential-banner__link:hover,
.confidential-banner__link:focus {
    color: #7dd3fc;
    text-decoration-thickness: 2px;
}

.confidential-banner__dismiss {
    align-self: flex-start;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}

.confidential-banner__dismiss:hover,
.confidential-banner__dismiss:focus-visible {
    background: rgba(56, 189, 248, 0.2);
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.25);
    transform: translateY(-1px);
    border-color: rgba(56, 189, 248, 0.5);
}

.confidential-banner__dismiss:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .confidential-banner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
    }

    .confidential-banner__dismiss {
        align-self: center;
    }
}

.site-header {
    position: sticky;
    top: calc(var(--confidential-banner-height, 0px) + var(--confidential-banner-gap, 0px));
    z-index: 60;
    padding: 1.75rem 1.5rem 1rem;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    transition: transform 0.35s var(--ease), opacity 0.3s var(--ease);
}

.site-header.is-hidden {
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
}

.site-header::after {
    content: none;
}

.site-header .inner {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.15rem 2.25rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.75rem;
    border-radius: 1.75rem;
    background:
        linear-gradient(140deg, rgba(4, 13, 32, 0.9), rgba(3, 9, 26, 0.82)),
        var(--aurora-gradient);
    border: 1px solid rgba(94, 234, 212, 0.22);
    box-shadow: var(--aurora-glow);
    overflow: visible;
}

.site-header .inner.glass-effect {
    overflow: visible;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    color: var(--hawk-ice);
    transition: transform 0.35s var(--ease), filter 0.35s var(--ease), text-shadow 0.35s var(--ease);
}

.brand-mark:hover,
.brand-mark:focus-visible {
    transform: translateY(-2px);
    filter: drop-shadow(0 16px 38px rgba(34, 211, 238, 0.35));
    text-shadow: 0 0 16px rgba(124, 58, 237, 0.45);
}

.brand-mark:focus-visible {
    outline: none;
}

.brand-mark img {
    height: 3rem;
    width: 3rem;
    border-radius: 1rem;
    border: 1px solid rgba(124, 58, 237, 0.45);
    box-shadow: 0 12px 30px rgba(34, 211, 238, 0.35);
    background: radial-gradient(circle at 30% 30%, rgba(124, 58, 237, 0.28), rgba(2, 6, 23, 0.85));
    padding: 0.4rem;
    transition: transform 0.35s var(--ease);
}

.brand-mark:hover img,
.brand-mark:focus-visible img {
    transform: scale(1.02);
}

.brand-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.brand-title {
    font-size: 1.05rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 700;
}

.brand-subtitle {
    font-size: 0.7rem;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.55);
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    border: none;
    background: transparent;
    box-shadow: none;
    color: var(--hawk-ice);
    cursor: pointer;
    padding: 0;
    transition: color 0.3s var(--ease), transform 0.3s var(--ease);
    touch-action: manipulation;
    grid-column: 3;
    justify-self: end;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
    color: rgba(125, 211, 252, 0.95);
    outline: 2px solid rgba(56, 189, 248, 0.65);
    outline-offset: 4px;
}

.nav-toggle-box {
    position: relative;
    width: 20px;
    height: 14px;
    display: inline-block;
}

.nav-toggle-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 9999px;
    background: currentColor;
    transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
    transform-origin: center;
}

.nav-toggle-line:nth-child(1) {
    top: 0;
}

.nav-toggle-line:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.nav-toggle-line:nth-child(3) {
    bottom: 0;
}

.site-header.is-nav-open .nav-toggle {
    color: var(--hawk-ice);
    background: transparent;
    border: none;
    box-shadow: none;
}

.site-header.is-nav-open .nav-toggle-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.site-header.is-nav-open .nav-toggle-line:nth-child(2) {
    opacity: 0;
}

.site-header.is-nav-open .nav-toggle-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.nav-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    flex: 1 1 auto;
    grid-column: 2;
}

.primary-nav {
    display: flex;
    justify-content: center;
    flex: 1 1 auto;
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    margin: 0;
    padding: 0;
}

.nav-links li {
    display: flex;
    align-items: stretch;
}

.nav-links li.has-dropdown {
    position: relative;
}

.nav-links li.has-dropdown .nav-button {
    padding-right: 1.65rem;
}

.nav-button {
    cursor: pointer;
}

.nav-links li.has-dropdown .dropdown-caret {
    font-size: 0.65rem;
    color: rgba(226, 232, 240, 0.7);
    transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}

.nav-button.is-open .dropdown-caret {
    transform: rotate(180deg);
    color: var(--hawk-ice);
}

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 12.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem;
    margin: 0;
    list-style: none;
    border-radius: 1.1rem;
    background:
        linear-gradient(160deg, rgba(14, 20, 45, 0.96), rgba(7, 13, 30, 0.94));
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 26px 48px rgba(3, 9, 26, 0.65);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
    z-index: 40;
}

.nav-dropdown[hidden] {
    display: none;
}

.nav-button.is-open + .nav-dropdown {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown li {
    width: 100%;
}

.dropdown-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.6rem 0.85rem;
    border-radius: 0.95rem;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: rgba(226, 232, 240, 0.82);
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid transparent;
    transition: color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.dropdown-link i {
    font-size: 0.85rem;
    color: rgba(94, 234, 212, 0.85);
    transition: color 0.25s var(--ease);
}

.dropdown-link:hover,
.dropdown-link:focus-visible {
    color: var(--hawk-ice);
    background: linear-gradient(120deg, var(--hawk-iris), var(--hawk-sky));
    border-color: var(--hawk-iris);
    box-shadow: var(--shadow-md);
    outline: none;
    transform: translateX(2px);
}

.dropdown-link:hover i,
.dropdown-link:focus-visible i {
    color: rgba(253, 224, 71, 0.95);
}

.dropdown-link.active {
    color: var(--hawk-ice);
    background: linear-gradient(120deg, rgba(124, 58, 237, 0.4), rgba(34, 211, 238, 0.3));
    border-color: rgba(34, 211, 238, 0.45);
    box-shadow: 0 20px 42px rgba(124, 58, 237, 0.28);
}

.dropdown-link.active i {
    color: rgba(253, 224, 71, 0.95);
}

.nav-link,
.nav-action-link,
.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 1.35rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    color: rgba(228, 233, 252, 0.88);
    background:
        linear-gradient(120deg, rgba(9, 14, 31, 0.82), rgba(11, 22, 41, 0.76));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 38px rgba(3, 9, 26, 0.45);
    border: none;
    transition: color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-action-link:hover,
.nav-action-link:focus-visible {
    color: var(--hawk-ice);
    background: linear-gradient(120deg, var(--hawk-iris), var(--hawk-sky));
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    outline: none;
}

.nav-link.active,
.nav-action-link.active {
    color: var(--hawk-ice);
    background: linear-gradient(120deg, rgba(124, 58, 237, 0.45), rgba(34, 211, 238, 0.35));
    box-shadow: 0 22px 52px rgba(34, 211, 238, 0.35);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-shrink: 0;
    margin-left: auto;
}

.nav-action-link {
    color: rgba(226, 232, 240, 0.86);
}

.nav-cta {
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.08em;
    color: #020617;
    background: linear-gradient(130deg, rgba(253, 224, 71, 0.95), rgba(34, 211, 238, 0.9));
    border: 1px solid rgba(253, 224, 71, 0.55);
    box-shadow: 0 26px 58px rgba(253, 224, 71, 0.35);
    text-shadow: 0 1px 10px rgba(255, 255, 255, 0.35);
    transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
        transform 0.3s ease;
}

.nav-cta:hover,
.nav-cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 32px 70px rgba(253, 224, 71, 0.55);
    outline: none;
}

.nav-cta.active {
    box-shadow: 0 34px 72px rgba(34, 211, 238, 0.45);
}

@media (max-width: 1140px) {
    .site-header .inner {
        gap: 1.25rem;
    }

    .nav-links {
        gap: 0.6rem;
    }
}

@media (max-width: 960px) {
    .site-header {
        padding: 1rem 1rem 0.75rem;
    }

    .site-header .inner {
        padding: 0.85rem 1.1rem;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .nav-panel {
        position: absolute;
        top: calc(100% + 0.75rem);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 1.25rem;
        padding: 1.35rem;
        border-radius: 1.25rem;
        background:
            linear-gradient(160deg, rgba(9, 15, 33, 0.96), rgba(4, 9, 21, 0.92));
        border: 1px solid rgba(124, 58, 237, 0.28);
        box-shadow: 0 32px 64px rgba(1, 6, 20, 0.62);
        opacity: 0;
        transform: translateY(-12px);
        pointer-events: none;
        visibility: hidden;
        transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s var(--ease);
        z-index: 10;
    }

    .site-header.is-nav-open .nav-panel {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        visibility: visible;
    }

    .primary-nav {
        width: 100%;
        justify-content: flex-start;
    }

    .nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links li.has-dropdown {
        position: static;
        flex-direction: column;
        align-items: stretch;
    }

    .nav-link,
    .nav-action-link,
    .nav-cta {
        width: 100%;
        padding: var(--space-4) var(--space-5);
        border-radius: var(--radius-lg);
        font-size: var(--font-size-base);
    }

    .nav-link {
        justify-content: space-between;
    }

    .nav-action-link,
    .nav-cta {
        justify-content: center;
    }

    .nav-links li.has-dropdown .nav-button {
        padding-right: 1.1rem;
    }

    .nav-links li.has-dropdown .dropdown-caret {
        transform: none;
        transition: transform 0.3s var(--ease);
    }

    .nav-links li.has-dropdown .nav-dropdown {
        position: static;
        margin-top: 0;
        min-width: 0;
        padding: 0;
        background: rgba(9, 15, 33, 0.85);
        border: 1px solid rgba(124, 58, 237, 0.32);
        box-shadow: none;
        opacity: 0;
        pointer-events: none;
        transform: none;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        transition: opacity 0.3s var(--ease), max-height 0.3s var(--ease), padding 0.3s var(--ease), margin 0.3s var(--ease);
    }

    .nav-button.is-open .dropdown-caret {
        transform: rotate(180deg);
    }

    .nav-button.is-open + .nav-dropdown {
        margin-top: 0.65rem;
        padding: 0.65rem 0.75rem;
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        max-height: 999px;
    }

    .dropdown-link {
        font-size: 0.9rem;
        letter-spacing: 0.08em;
    }

    .nav-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }
}

@media (max-width: 640px) {
    .brand-text {
        gap: 0.05rem;
    }

    .brand-title {
        letter-spacing: 0.24em;
    }

    .brand-subtitle {
        display: none;
    }
}

main {
    width: 100%;
    max-width: var(--breakpoint-2xl);
    margin: 0 auto;
    padding: var(--space-16) var(--space-6) 0;
    position: relative;
    z-index: 1;
}

.subscriber-card {
    position: relative;
    isolation: isolate;
}

.subscriber-card-stats {
    width: 100%;
    gap: 0.85rem;
    text-align: center;
}

.subscriber-summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.45rem;
}

.subscriber-summary-stat p {
    margin: 0;
}

.subscriber-card-stat {
    min-width: 0;
    padding: 0.85rem 0.95rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    text-align: center;
    background: linear-gradient(150deg, rgba(12, 20, 40, 0.82), rgba(7, 11, 26, 0.7));
    border: 1px solid rgba(124, 58, 237, 0.24);
    box-shadow: 0 16px 32px rgba(2, 6, 23, 0.35);
}

.subscriber-card-stat .stat-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.35rem;
    margin: 0;
    flex-wrap: wrap;
    color: var(--hawk-ice);
}

.subscriber-card-stat .stat-number {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
}

.subscriber-card-stat .stat-unit {
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: rgba(226, 232, 240, 0.7);
    text-transform: none;
}

.subscriber-card-stat .stat-label {
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: none;
    color: rgba(148, 163, 184, 0.82);
}

.subscriber-card-note {
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.subscriber-badge-gallery {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.subscriber-badge-gallery__row {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(var(--badge-row-columns, 4), minmax(0, 1fr));
}

.subscriber-badge-gallery__item {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-height: 100%;
}

.subscriber-badge-gallery__art {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 1.5rem;
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.55));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0.75rem;
    box-shadow: 0 14px 24px rgba(2, 6, 23, 0.35);
    overflow: hidden;
}

.subscriber-badge-gallery__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.subscriber-badge-gallery__fallback {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--hawk-ice);
    letter-spacing: 0.12em;
}

.subscriber-badge-gallery__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}

.subscriber-badge-gallery__tier {
    margin: 0;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: rgba(148, 163, 184, 0.75);
}

.subscriber-badge-gallery__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.35;
    text-wrap: pretty;
}

.subscriber-badge-gallery__unlock {
    margin: 0;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: rgba(251, 191, 36, 0.7);
}

.subscriber-badge-gallery__note {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(226, 232, 240, 0.82);
    text-wrap: pretty;
}

@media (max-width: 1024px) {
    .subscriber-badge-gallery__row {
        grid-template-columns: repeat(min(var(--badge-row-columns, 3), 3), minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .subscriber-badge-gallery__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .subscriber-badge-gallery__art {
        width: 4.75rem;
        height: 4.75rem;
    }
}

@media (max-width: 520px) {
    .subscriber-badge-gallery__row {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

.subscriber-support-timeline-section {
    position: relative;
    isolation: isolate;
}

.subscriber-support-timeline-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.subscriber-support-timeline-status i {
    font-size: 0.95rem;
}

.subscriber-support-timeline-list {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    padding-left: 0;
}

.subscriber-support-timeline-list::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1.15rem;
    width: 2px;
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.35), rgba(244, 114, 182, 0.2));
}

.subscriber-support-timeline-item {
    position: relative;
    margin: 0;
    padding: 0 0 1.9rem 3.5rem;
    opacity: 0;
    transform: translateY(8px);
    animation: subscriberTimelineFade 0.55s ease forwards;
    animation-delay: calc(var(--timeline-index, 0) * 0.08s);
}

.subscriber-support-timeline-item:last-child {
    padding-bottom: 0;
}

.subscriber-support-timeline-node {
    position: absolute;
    top: 1rem;
    left: 0.8rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.95), rgba(14, 165, 233, 0.8));
    border: 3px solid rgba(15, 23, 42, 0.92);
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.45);
}

.subscriber-support-timeline-card {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.55));
    box-shadow: 0 18px 32px rgba(2, 6, 23, 0.4);
}

.subscriber-support-timeline-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.subscriber-support-timeline-name {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--hawk-ice);
}

.subscriber-support-timeline-time {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: rgba(148, 163, 184, 0.85);
    text-transform: uppercase;
}

.subscriber-support-timeline-time i {
    font-size: 0.85rem;
}

.subscriber-support-timeline-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.subscriber-support-timeline-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 1.05rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.subscriber-support-timeline-badge i {
    font-size: 0.85rem;
}

.subscriber-support-timeline-badge--subscription {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.35);
    color: rgba(167, 243, 208, 0.95);
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.25);
}

.subscriber-support-timeline-badge--gift {
    background: rgba(244, 114, 182, 0.14);
    border-color: rgba(244, 114, 182, 0.35);
    color: rgba(255, 215, 234, 0.95);
    box-shadow: 0 0 18px rgba(244, 114, 182, 0.25);
}

.subscriber-support-timeline-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(148, 163, 184, 0.18);
}

.subscriber-support-timeline-timestamp {
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: rgba(203, 213, 225, 0.82);
}

.subscriber-support-timeline-empty {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.6), rgba(2, 6, 23, 0.55));
}

@media (max-width: 768px) {
    .subscriber-support-timeline-list::before {
        left: 0.6rem;
    }

    .subscriber-support-timeline-item {
        padding-left: 2.8rem;
    }

    .subscriber-support-timeline-node {
        left: 0.3rem;
    }

    .subscriber-support-timeline-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .subscriber-support-timeline-time {
        font-size: 0.8rem;
    }
}

@keyframes subscriberTimelineFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gradient-text {
    background: linear-gradient(115deg, var(--hawk-gold), var(--hawk-ember), var(--hawk-sky));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);
    animation: gradientShift 8s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.glass-effect {
    background:
        linear-gradient(155deg, rgba(14, 20, 40, 0.85), rgba(3, 9, 26, 0.88)),
        linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(129, 140, 248, 0.08), rgba(236, 72, 153, 0.12));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    box-shadow:
        var(--glass-shadow-outer),
        var(--glass-shadow-inner),
        var(--glass-shadow-inner-strong);
    backdrop-filter: blur(28px) saturate(140%);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: border-color var(--duration-normal) var(--ease), box-shadow var(--duration-normal) var(--ease), transform var(--duration-normal) var(--ease);
}

.glass-effect::before,
.glass-effect::after {
    content: '';
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
    mix-blend-mode: screen;
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.glass-effect::before {
    inset: -140% 45% 35% -45%;
    background:
        radial-gradient(circle at 35% 35%, rgba(56, 189, 248, 0.32), transparent 65%),
        radial-gradient(circle at 70% 60%, rgba(236, 72, 153, 0.28), transparent 70%),
        linear-gradient(120deg, rgba(226, 232, 240, 0.18), transparent 72%);
    opacity: 0.65;
    transform: rotate(14deg);
    animation: glassHalo 34s ease-in-out infinite;
}

.glass-effect::after {
    inset: 25% -42% -130% 35%;
    background:
        radial-gradient(circle at center, rgba(129, 140, 248, 0.3), transparent 70%),
        radial-gradient(circle at 70% 30%, rgba(94, 234, 212, 0.28), transparent 68%);
    opacity: 0.55;
    transform: rotate(-18deg);
    animation: glassSweep 26s ease-in-out infinite;
}

.glass-effect:hover,
.glass-effect:focus-within {
    border-color: var(--hawk-sky);
    box-shadow:
        var(--glass-shadow-outer-soft),
        inset 0 1px 0 var(--glass-highlight),
        inset 0 -1px 0 var(--glass-halo);
    transform: translateY(-2px);
}

.hawk-panel {
    background:
        linear-gradient(155deg, rgba(12, 19, 39, 0.95), rgba(7, 11, 26, 0.85)),
        radial-gradient(circle at 0% 0%, rgba(124, 58, 237, 0.18), transparent 60%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--glass-shadow-outer);
    backdrop-filter: blur(28px);
    position: relative;
    overflow: hidden;
    z-index: 0;
    padding: var(--space-12) var(--space-6);
    margin: 0 auto;
    max-width: 80rem;
}

.hawk-panel::after {
    content: '';
    position: absolute;
    inset: -45% 45% auto -25%;
    height: 160%;
    background: linear-gradient(125deg, rgba(124, 58, 237, 0.2), rgba(34, 211, 238, 0));
    transform: rotate(12deg);
    pointer-events: none;
    z-index: -1;
}

.hawk-panel--no-overlay::before,
.hawk-panel--no-overlay::after {
    content: none;
}

.hawk-panel > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .hawk-panel {
        padding: var(--space-12) var(--space-6);
        margin: 0 var(--space-4);
        border-radius: var(--radius-xl);
    }
}

@media (max-width: 640px) {
    .hawk-panel {
        padding: var(--space-8) var(--space-4);
        margin: 0 var(--space-2);
        border-radius: var(--radius-lg);
    }
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--hawk-night);
    background: linear-gradient(115deg, rgba(253, 224, 71, 0.98), rgba(251, 113, 133, 0.95));
    border: none;
    box-shadow: var(--shadow-lg);
    transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
    cursor: pointer;
}

.btn-primary:hover,
.btn-primary:focus {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-xl);
    background: linear-gradient(115deg, rgba(253, 224, 71, 1), rgba(251, 113, 133, 1));
}

.btn-primary:focus {
    outline: 2px solid var(--hawk-gold);
    outline-offset: 2px;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--hawk-ice);
    background: linear-gradient(120deg, rgba(10, 17, 34, 0.85), rgba(12, 23, 43, 0.78));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm);
    transition: all var(--duration-normal) var(--ease);
    cursor: pointer;
}

.btn-secondary:hover {
    border-color: var(--hawk-sky);
    color: var(--hawk-ice);
    background: linear-gradient(120deg, var(--hawk-iris), var(--hawk-sky));
    box-shadow: var(--shadow-md);
}

.btn-secondary:focus {
    outline: 2px solid var(--hawk-sky);
    outline-offset: 2px;
}

.announcement-banner {
    border-radius: 1.75rem;
    border: 1px solid rgba(124, 58, 237, 0.4);
    background: linear-gradient(120deg, rgba(124, 58, 237, 0.24), rgba(34, 211, 238, 0.16));
    box-shadow: 0 20px 42px rgba(8, 13, 30, 0.35);
}

.announcement-banner .announcement-status {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(224, 231, 255, 0.82);
}

.hero-status {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1.7rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgba(94, 234, 212, 0.26), rgba(129, 140, 248, 0.26));
    background-size: 200% 200%;
    border: 1px solid rgba(94, 234, 212, 0.38);
    box-shadow: 0 22px 48px rgba(94, 234, 212, 0.25);
    transition: background 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
    animation: heroStatusGlow 14s ease-in-out infinite;
}

.hero-status:hover,
.hero-status:focus-visible {
    outline: none;
    background-position: 100% 50%;
    border-color: rgba(94, 234, 212, 0.55);
    box-shadow: 0 32px 68px rgba(94, 234, 212, 0.3);
}

.hero-status .status-indicator {
    position: relative;
    width: 2rem;
    height: 2rem;
    color: #5eead4;
    margin-right: 0.75rem;
}

.hero-status .status-indicator-ping {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: currentColor;
    opacity: 0.8;
    animation: hero-status-ping 1.6s ease-out infinite;
}

.hero-status .status-indicator-dot {
    position: absolute;
    inset: 30%;
    border-radius: 9999px;
    background: currentColor;
    box-shadow: 0 0 18px rgba(94, 234, 212, 0.65);
}

.hero-status .status-label {
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(240, 246, 255, 0.94);
    white-space: nowrap;
}

.hero-status .status-description {
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    color: rgba(234, 246, 255, 0.86);
}

.hero-status.status-live {
    border-color: rgba(94, 234, 212, 0.55);
    box-shadow: 0 30px 60px rgba(94, 234, 212, 0.28);
}

.hero-status.status-offline {
    background: linear-gradient(135deg, rgba(37, 43, 67, 0.42), rgba(15, 23, 42, 0.48));
    border-color: rgba(148, 163, 184, 0.4);
    box-shadow: 0 18px 40px rgba(5, 11, 28, 0.55);
    animation: none;
}

.hero-status.status-offline .status-indicator {
    color: rgba(148, 163, 184, 0.75);
}

.hero-status.status-offline .status-indicator-ping {
    display: none;
}

.hero-status.status-offline .status-label {
    color: rgba(148, 163, 184, 0.85);
}

.hero-status.status-offline .status-description {
    color: rgba(148, 163, 184, 0.78);
}

.offline-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding: 2.5rem 2.75rem;
    border-radius: 2rem;
    border: 1px solid rgba(124, 58, 237, 0.25);
    background:
        linear-gradient(155deg, rgba(13, 21, 44, 0.9), rgba(6, 10, 24, 0.8));
    box-shadow: 0 36px 72px rgba(1, 6, 20, 0.6);
    overflow: hidden;
}

.offline-panel::before {
    content: '';
    position: absolute;
    inset: -55% -20% auto -35%;
    height: 170%;
    background: radial-gradient(circle at center, rgba(124, 58, 237, 0.3), rgba(2, 6, 23, 0));
    opacity: 0.75;
    pointer-events: none;
    filter: blur(80px);
}

.offline-panel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.offline-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.2rem;
    border-radius: 9999px;
    background: linear-gradient(120deg, rgba(124, 58, 237, 0.3), rgba(15, 23, 42, 0.75));
    border: 1px solid rgba(124, 58, 237, 0.45);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.88);
}

.offline-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.78);
    color: rgba(253, 224, 71, 0.85);
    box-shadow: 0 0 22px rgba(253, 224, 71, 0.45);
}

.offline-last-online {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.68);
    border: 1px solid rgba(148, 163, 184, 0.32);
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.82);
}

.offline-panel-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    position: relative;
    z-index: 1;
}

.offline-panel-title {
    margin: 0;
    font-size: 2.15rem;
    font-weight: 700;
    color: var(--hawk-ice);
}

.offline-panel-highlight {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    color: rgba(226, 232, 240, 0.85);
}

.offline-panel-highlight .label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(124, 58, 237, 0.4);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.7rem;
    color: rgba(196, 210, 254, 0.9);
}

.offline-panel-meta {
    margin: 0;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(180, 198, 231, 0.8);
}

.offline-panel-description {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(226, 232, 240, 0.88);
}

.offline-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.offline-panel-actions .btn-primary,
.offline-panel-actions .btn-secondary {
    flex: 1 1 14rem;
    justify-content: center;
}

.offline-panel-actions .btn-secondary {
    border-color: rgba(148, 163, 184, 0.3);
}

.offline-panel-centered {
    align-items: center;
    text-align: center;
}

.offline-panel-centered .offline-panel-body {
    align-items: center;
    text-align: center;
}

.offline-panel-centered .offline-panel-highlight {
    justify-content: center;
    text-align: center;
}

.offline-panel-centered .offline-panel-highlight .label {
    justify-content: center;
}

.offline-panel-centered .offline-panel-meta,
.offline-panel-centered .offline-panel-description {
    text-align: center;
}

.offline-panel-centered .offline-panel-actions {
    justify-content: center;
}

@media (max-width: 640px) {
    .offline-panel {
        padding: 2rem 1.5rem;
    }

    .offline-panel-title {
        font-size: 1.75rem;
    }

    .offline-panel-actions {
        flex-direction: column;
    }
}

@keyframes hero-status-ping {
    0% {
        transform: scale(0.6);
        opacity: 0.75;
    }

    80%,
    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

@keyframes heroStatusGlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes glassSweep {
    0% {
        transform: translate3d(0, 0, 0) rotate(6deg);
        opacity: 0.6;
    }

    50% {
        transform: translate3d(-6%, 4%, 0) rotate(8deg);
        opacity: 0.85;
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(6deg);
        opacity: 0.6;
    }
}

@keyframes glassHalo {
    0% {
        transform: rotate(10deg) translate3d(0, 0, 0);
        opacity: 0.62;
    }

    40% {
        transform: rotate(18deg) translate3d(-4%, 3%, 0);
        opacity: 0.82;
    }

    70% {
        transform: rotate(16deg) translate3d(3%, -2%, 0);
        opacity: 0.7;
    }

    100% {
        transform: rotate(10deg) translate3d(0, 0, 0);
        opacity: 0.62;
    }
}

@keyframes auroraFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after,
    main::before,
    main::after,
    .glass-effect::before,
    .glass-effect::after {
        animation: none !important;
        transform: none !important;
    }

    .glass-effect,
    .glass-effect:hover,
    .glass-effect:focus-within {
        transition-duration: 0.3s;
        transform: none !important;
    }
}

@keyframes pulseBloom {
    0% {
        transform: scale(0.95);
        opacity: 0.55;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }

    100% {
        transform: scale(0.95);
        opacity: 0.55;
    }
}

@keyframes radarPulse {
    0% {
        transform: scale(0.95) rotate(0deg);
        opacity: 0.75;
    }

    50% {
        transform: scale(1.05) rotate(180deg);
        opacity: 0.5;
    }

    100% {
        transform: scale(0.95) rotate(360deg);
        opacity: 0.75;
    }
}

.hero-metric-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.2rem 1.35rem;
    border-radius: 1.25rem;
    background: linear-gradient(160deg, rgba(124, 58, 237, 0.28), rgba(9, 15, 33, 0.8));
    border: 1px solid rgba(124, 58, 237, 0.38);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 36px rgba(2, 6, 23, 0.55);
    align-items: center;
    text-align: center;
}

.metric-value {
    font-size: 2.15rem;
    font-weight: 700;
    color: var(--hawk-gold);
}

.metric-label {
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-size: 0.65rem;
    color: rgba(226, 232, 240, 0.7);
}

.mission-hub-section {
    position: relative;
    width: 100%;
    margin-top: var(--space-16);
    padding: var(--space-20) var(--space-6);
    border-radius: var(--radius-3xl);
    overflow: hidden;
    text-align: left;
    box-sizing: border-box;
    background: linear-gradient(160deg, rgba(10, 16, 33, 0.92), rgba(4, 9, 21, 0.9));
    border: 1px solid rgba(124, 58, 237, 0.2);
    box-shadow: 0 40px 80px rgba(1, 6, 20, 0.6);
}

.mission-hub-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.mission-hub-section::before,
.mission-hub-section::after {
    content: '';
    position: absolute;
    border-radius: 9999px;
    pointer-events: none;
    filter: blur(0);
    opacity: 0.55;
}

.mission-hub-section::before {
    inset: -35% auto auto -20%;
    width: 26rem;
    height: 26rem;
    background: radial-gradient(circle at center, rgba(124, 58, 237, 0.28), transparent 70%);
}

.mission-hub-section::after {
    inset: auto -25% -45% auto;
    width: 30rem;
    height: 30rem;
    background: radial-gradient(circle at center, rgba(34, 211, 238, 0.24), transparent 70%);
}

.mission-hub-header {
    position: relative;
    z-index: 1;
    margin: 0 auto 2.75rem;
    max-width: 60rem;
    text-align: center;
}

.mission-hub-header h2 {
    margin: 0 0 1.5rem;
    font-size: 2.5rem;
    font-weight: 700;
    font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.mission-hub-header p {
    margin: 0 auto;
    max-width: 48rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(226, 232, 240, 0.78);
}

.mission-hub-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 2.5rem;
    align-items: stretch;
    justify-items: center;
    width: 100%;
}

.mission-hub-grid > * {
    width: 100%;
}

.mission-hub-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding: 3rem;
    border-radius: 2rem;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(165deg, rgba(5, 15, 38, 0.92), rgba(4, 12, 30, 0.85)),
        var(--aurora-gradient);
    background-size: 240% 240%;
    border: 1px solid rgba(94, 234, 212, 0.28);
    box-shadow: 0 42px 90px rgba(4, 12, 30, 0.65);
    animation: auroraFlow 26s ease-in-out infinite;
    align-items: center;
}

.mission-hub-hero::before,
.mission-hub-hero::after {
    content: '';
    position: absolute;
    inset: auto;
    pointer-events: none;
    border-radius: 9999px;
    opacity: 0.7;
}

.mission-hub-hero::before {
    bottom: -45%;
    right: -12%;
    width: 30rem;
    height: 30rem;
    background: radial-gradient(circle at center, rgba(94, 234, 212, 0.32), rgba(2, 6, 23, 0));
    animation: pulseBloom 18s ease-in-out infinite;
}

.mission-hub-hero::after {
    top: -35%;
    left: -22%;
    width: 22rem;
    height: 22rem;
    background: radial-gradient(circle at center, rgba(192, 132, 252, 0.32), rgba(2, 6, 23, 0));
    animation: pulseBloom 24s ease-in-out infinite reverse;
}

.mission-hub-hero-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
}

.mission-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.95rem;
    border-radius: 9999px;
    border: 1px solid rgba(129, 140, 248, 0.4);
    background: linear-gradient(120deg, rgba(7, 20, 46, 0.72), rgba(5, 28, 56, 0.6));
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(233, 246, 255, 0.88);
}

.mission-chip i {
    color: var(--hawk-sky);
}

.mission-chip-secondary {
    background: linear-gradient(120deg, rgba(244, 114, 182, 0.28), rgba(251, 191, 36, 0.22));
    border-color: rgba(244, 114, 182, 0.4);
    color: rgba(255, 245, 247, 0.9);
}

.mission-chip-tertiary {
    background: linear-gradient(120deg, rgba(56, 189, 248, 0.28), rgba(110, 231, 183, 0.28));
    border-color: rgba(56, 189, 248, 0.48);
    color: rgba(226, 252, 255, 0.92);
}

.mission-chip-warning {
    background: linear-gradient(120deg, rgba(250, 204, 21, 0.25), rgba(253, 224, 71, 0.2));
    border-color: rgba(250, 204, 21, 0.42);
    color: rgba(255, 253, 227, 0.92);
}

.mission-hub-signal {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.8rem;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.26);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.7);
}

.mission-signal-dot {
    position: relative;
    display: inline-flex;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 9999px;
    background: rgba(56, 189, 248, 0.85);
    overflow: hidden;
}

.mission-signal-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(56, 189, 248, 0.7);
    animation: mission-signal-pulse 1.8s infinite ease-out;
}

@keyframes mission-signal-pulse {
    0% {
        transform: scale(1);
        opacity: 0.9;
    }
    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}

.mission-hub-hero-title {
    margin: 0;
    font-size: 2.45rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: linear-gradient(120deg, #5eead4 0%, #a855f7 45%, #f472b6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 36px rgba(94, 234, 212, 0.35);
}

.mission-hub-hero-time,
.mission-hub-hero-meta {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: 0.98rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(224, 247, 255, 0.85);
}

.mission-hub-hero-body {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(226, 242, 255, 0.9);
    max-width: 32rem;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.mission-hub-hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.1rem;
    padding: 1.4rem 1.6rem;
    border-radius: 1.6rem;
    background: linear-gradient(140deg, rgba(7, 20, 46, 0.8), rgba(4, 12, 30, 0.65));
    border: 1px solid rgba(94, 234, 212, 0.22);
    box-shadow: 0 24px 52px rgba(4, 12, 30, 0.55);
    backdrop-filter: blur(14px);
    justify-items: center;
}

.mission-hub-stat {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: center;
    text-align: center;
    transition: transform 0.3s var(--ease), filter 0.3s var(--ease);
}

.mission-hub-stat:hover {
    transform: translateY(-4px) scale(1.02);
    filter: drop-shadow(0 0 16px rgba(94, 234, 212, 0.3));
}

.mission-hub-stat-label {
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(202, 226, 255, 0.82);
}

.mission-hub-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    background: linear-gradient(115deg, #5eead4 0%, #a855f7 40%, #bef264 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 30px rgba(94, 234, 212, 0.3);
}

.mission-hub-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.mission-hub-cta {
    flex: 1 1 220px;
    justify-content: center;
}

.mission-hub-hero-radar {
    position: absolute;
    right: -18%;
    bottom: -45%;
    width: 28rem;
    height: 28rem;
    background: radial-gradient(circle at center, rgba(94, 234, 212, 0.28), transparent 70%);
    filter: blur(0);
    opacity: 0.8;
    pointer-events: none;
    animation: radarPulse 18s linear infinite;
}

.mission-hub-side {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.mission-hub-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 2.25rem 2.4rem;
    border-radius: 1.8rem;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(155deg, rgba(6, 18, 44, 0.84), rgba(4, 12, 30, 0.76));
    background-size: 220% 220%;
    border: 1px solid rgba(129, 140, 248, 0.3);
    box-shadow: 0 28px 60px rgba(2, 6, 23, 0.6);
    align-items: center;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
    animation: auroraFlow 24s ease-in-out infinite;
}

.mission-hub-card:first-child {
    background: linear-gradient(165deg, rgba(244, 114, 182, 0.32), rgba(6, 18, 44, 0.82));
    border-color: rgba(244, 114, 182, 0.42);
}

.mission-hub-card:last-child {
    background: linear-gradient(165deg, rgba(129, 140, 248, 0.32), rgba(6, 18, 44, 0.78));
    border-color: rgba(129, 140, 248, 0.42);
}

.mission-hub-card::before,
.mission-hub-card::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.mission-hub-card::before {
    inset: -40% -40% 50% 40%;
    background: radial-gradient(circle at center, rgba(94, 234, 212, 0.24), transparent 70%);
    opacity: 0.7;
    transform: rotate(12deg);
}

.mission-hub-card::after {
    inset: 60% -45% -55% -35%;
    background: radial-gradient(circle at center, rgba(192, 132, 252, 0.22), transparent 70%);
    opacity: 0.6;
    transform: rotate(-8deg);
}

.mission-hub-card > * {
    position: relative;
    z-index: 1;
}

.mission-hub-card:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: rgba(94, 234, 212, 0.45);
    box-shadow: 0 36px 82px rgba(5, 15, 36, 0.65);
}

.mission-hub-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.mission-hub-card-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    background: linear-gradient(120deg, #5eead4 0%, #a855f7 60%, #f472b6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mission-hub-card-meta {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(224, 243, 255, 0.86);
}

.mission-hub-card-body {
    margin: 0;
    font-size: 1.02rem;
    color: rgba(226, 242, 255, 0.88);
    line-height: 1.7;
    text-align: center;
}

.mission-hub-card-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(224, 247, 255, 0.88);
    transition: color 0.3s var(--ease), text-shadow 0.3s var(--ease);
}

.mission-hub-card-link i {
    font-size: 0.85rem;
    color: rgba(129, 140, 248, 0.85);
    transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}

.mission-hub-card-link i.fa-arrow-right {
    margin-left: 0.25rem;
}

.mission-hub-card-link:hover,
.mission-hub-card-link:focus-visible {
    color: rgba(94, 234, 212, 0.95);
    text-shadow: 0 0 18px rgba(94, 234, 212, 0.4);
}

.mission-hub-card-link:hover i,
.mission-hub-card-link:focus-visible i {
    color: rgba(94, 234, 212, 0.95);
    transform: translateX(2px);
}

.mission-hub-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    align-items: center;
}

.mission-hub-link-list a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    color: rgba(224, 231, 255, 0.82);
    transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}

.mission-hub-link-list a:hover,
.mission-hub-link-list a:focus-visible {
    color: var(--hawk-gold);
    transform: translateX(4px);
}

@media (max-width: 1080px) {
    .mission-hub-inner {
        gap: 2.5rem;
    }

    .mission-hub-grid {
        grid-template-columns: 1fr;
    }

    .mission-hub-hero {
        padding: 2.5rem;
    }

    .mission-hub-hero-radar {
        right: -30%;
        bottom: -55%;
        width: 24rem;
        height: 24rem;
    }
}

@media (max-width: 768px) {
    .mission-hub-hero-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .mission-hub-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .mission-hub-cta {
        flex: 1 1 auto;
    }
}

@media (max-width: 640px) {
    .mission-hub-section {
        padding: 4rem 1.25rem;
        border-radius: 1.5rem;
    }

    .mission-hub-inner {
        gap: 2rem;
    }

    .mission-hub-header h2 {
        font-size: 2.1rem;
    }

    .mission-hub-hero {
        padding: 2.25rem;
    }

    .mission-hub-hero-stats {
        grid-template-columns: 1fr;
    }
}

.mission-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.5rem 2rem;
    border-radius: 1.75rem;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(155deg, rgba(12, 20, 41, 0.9), rgba(6, 11, 26, 0.78));
    border: 1px solid rgba(124, 58, 237, 0.3);
    box-shadow: 0 32px 64px rgba(2, 6, 23, 0.55);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.mission-card::before {
    content: '';
    position: absolute;
    inset: -30% -30% auto -20%;
    height: 120%;
    background: radial-gradient(circle at center, rgba(124, 58, 237, 0.28), rgba(15, 23, 42, 0));
    z-index: -1;
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.35s var(--ease);
}

.mission-card:hover,
.mission-card:focus-within {
    transform: translateY(-6px);
    border-color: rgba(34, 211, 238, 0.45);
    box-shadow: 0 28px 60px rgba(34, 211, 238, 0.28);
}

.mission-card:hover::before,
.mission-card:focus-within::before {
    opacity: 0.9;
}

.mission-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background: rgba(9, 15, 33, 0.75);
    border: 1px solid rgba(124, 58, 237, 0.45);
    color: rgba(253, 224, 71, 0.92);
    font-size: 1.4rem;
    box-shadow: 0 18px 42px rgba(4, 9, 25, 0.5);
}

.mission-card-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hawk-ice);
}

.mission-card-meta {
    margin: 0;
    font-size: 0.88rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.75);
}

.mission-card-body {
    margin: 0;
    font-size: 1rem;
    color: rgba(226, 232, 240, 0.85);
}

.mission-card-footer {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(148, 163, 184, 0.8);
}

.mission-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.mission-card-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    color: rgba(226, 232, 240, 0.88);
    font-weight: 600;
    transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}

.mission-card-list a:hover,
.mission-card-list a:focus {
    color: var(--hawk-gold);
    transform: translateX(3px);
}

.mission-card-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(224, 231, 255, 0.82);
    transition: color 0.3s var(--ease), text-shadow 0.3s var(--ease);
}

.mission-card-link:hover,
.mission-card-link:focus {
    color: var(--hawk-gold);
    text-shadow: 0 0 16px rgba(253, 224, 71, 0.4);
}

.maintenance-icon {
    width: 5rem;
    height: 5rem;
    border-radius: 1.75rem;
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(9, 15, 33, 0.78));
    border: 1px solid rgba(124, 58, 237, 0.4);
    color: rgba(253, 224, 71, 0.92);
    font-size: 2rem;
    box-shadow: 0 26px 58px rgba(4, 9, 25, 0.55);
}

.maintenance-status-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
}

.maintenance-status-meta .status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.2rem;
    border-radius: 9999px;
    border: 1px solid rgba(124, 58, 237, 0.35);
    background: linear-gradient(120deg, rgba(124, 58, 237, 0.24), rgba(34, 211, 238, 0.16));
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: rgba(226, 232, 240, 0.88);
}

.maintenance-actions .btn-primary,
.maintenance-actions .btn-secondary {
    min-width: 15rem;
    justify-content: center;
}

.changelog-header {
    text-align: center;
}

.changelog-header .changelog-meta {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: rgba(148, 163, 184, 0.8);
    font-size: 0.95rem;
}

.changelog-header .changelog-meta .meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    border-radius: 9999px;
    background: linear-gradient(120deg, rgba(124, 58, 237, 0.22), rgba(34, 211, 238, 0.18));
    border: 1px solid rgba(124, 58, 237, 0.35);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.changelog-header .changelog-meta .meta-chip .diff-summary {
    font-variant-numeric: tabular-nums;
}

.changelog-header .changelog-meta .meta-chip .diff-summary-add {
    color: rgba(34, 197, 94, 0.9);
}

.changelog-header .changelog-meta .meta-chip .diff-summary-remove {
    color: rgba(248, 113, 113, 0.9);
}

.changelog-timeline {
    display: grid;
    gap: 1.75rem;
}

.changelog-group {
    position: relative;
    padding: 1.75rem;
    border-radius: 1.5rem;
    background: linear-gradient(140deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.7));
    border: 1px solid rgba(94, 234, 212, 0.22);
    box-shadow: 0 16px 32px rgba(8, 47, 73, 0.25);
}

.changelog-group::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(125, 211, 252, 0.18);
    pointer-events: none;
}

.changelog-group-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.changelog-group-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: #e0f2fe;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.changelog-group-count {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(148, 163, 184, 0.7);
}

.changelog-entry-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.changelog-entry {
    display: grid;
    gap: 0.6rem;
    padding: 1.1rem 1.25rem;
    border-radius: 1.25rem;
    background: linear-gradient(150deg, rgba(12, 20, 38, 0.82), rgba(7, 11, 24, 0.72));
    border: 1px solid rgba(124, 58, 237, 0.25);
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}

.changelog-entry:hover {
    transform: translateY(-3px);
    border-color: rgba(34, 211, 238, 0.45);
}

.changelog-entry-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.changelog-entry-title {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    font-size: 1.05rem;
    color: #f0f9ff;
}

.entry-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    border: 1px solid transparent;
}

.entry-badge.merge {
    background: rgba(217, 119, 6, 0.12);
    border-color: rgba(251, 146, 60, 0.25);
    color: rgba(251, 191, 36, 0.85);
}

.entry-badge.commit {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(96, 165, 250, 0.35);
    color: rgba(165, 243, 252, 0.88);
}

.changelog-entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.75);
}

.changelog-entry-meta .diff-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    background: rgba(12, 20, 38, 0.65);
    border: 1px solid rgba(124, 58, 237, 0.32);
    font-variant-numeric: tabular-nums;
}

.changelog-entry-meta .diff-add {
    color: rgba(34, 197, 94, 0.9);
}

.changelog-entry-meta .diff-remove {
    color: rgba(248, 113, 113, 0.9);
}

.changelog-entry-meta .diff-label {
    color: rgba(148, 163, 184, 0.75);
}

.changelog-entry-meta code {
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    background: rgba(30, 64, 175, 0.22);
    color: rgba(191, 219, 254, 0.95);
    font-size: 0.75rem;
}

.changelog-empty-state {
    padding: 2.5rem;
    border-radius: 1.75rem;
    background: rgba(15, 23, 42, 0.65);
    border: 1px dashed rgba(148, 163, 184, 0.4);
    text-align: center;
    color: rgba(148, 163, 184, 0.82);
    font-size: 1rem;
}

@media (max-width: 640px) {
    .changelog-entry {
        padding: 0.9rem 1rem;
    }

    .changelog-entry-title {
        font-size: 0.98rem;
    }

    .changelog-entry-meta {
        font-size: 0.75rem;
    }
}

.featured-clips-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2rem;
    align-items: stretch;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    justify-items: stretch;
}

@media (min-width: 768px) {
    .featured-clips-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .featured-clips-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.clip-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 1.4rem;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 20px 46px rgba(2, 6, 23, 0.55);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
    position: relative;
    isolation: isolate;
}

.clip-card:hover,
.clip-card:focus-within {
    transform: translateY(-6px);
    border-color: rgba(56, 189, 248, 0.42);
    box-shadow: 0 26px 60px rgba(56, 189, 248, 0.25);
}

.clip-card-media {
    position: relative;
    overflow: hidden;
    background: rgba(2, 6, 23, 0.8);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.clip-card-media::after {
    content: none;
}

.clip-card-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: rgba(2, 6, 23, 0.9);
}

.clip-card-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    border-radius: 0;
}

.clip-card-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: rgba(2, 6, 23, 0.9);
}

.clip-card-fallback-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--hawk-ice);
}

.clip-card-body {
    position: relative;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 1.25rem;
    text-align: left;
    z-index: 1;
}

.clip-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.clip-card-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--hawk-ice);
    line-height: 1.35;
}

.clip-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.26);
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.75);
    transition: all 0.3s var(--ease);
}

.clip-card-link:hover,
.clip-card-link:focus-visible {
    color: var(--hawk-gold);
    border-color: rgba(249, 115, 22, 0.5);
    box-shadow: 0 16px 36px rgba(249, 115, 22, 0.25);
    transform: translateY(-2px);
}

.clip-card:hover .clip-card-title,
.clip-card:focus-within .clip-card-title {
    color: var(--hawk-gold);
}

.clip-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: auto;
}

.clip-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.85rem;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    font-size: 0.82rem;
    color: rgba(226, 232, 240, 0.78);
}

.clip-card-meta-item i {
    font-size: 0.85rem;
    color: rgba(56, 189, 248, 0.8);
}

.featured-clips-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem 2rem;
    border-radius: 1.6rem;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 24px 56px rgba(2, 6, 23, 0.55);
}

.featured-clips-empty i {
    font-size: 3rem;
    color: rgba(56, 189, 248, 0.75);
}

.featured-clips-empty-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.9);
}

.featured-clips-empty-subtext {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(148, 163, 184, 0.85);
    max-width: 520px;
}

.flight-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.75rem;
}

.flight-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 2.4rem 2.6rem;
    border-radius: 1.85rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 24px 52px rgba(2, 6, 23, 0.55);
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.flight-plan-card::before {
    content: '';
    position: absolute;
    inset: -40% 40% auto -30%;
    height: 180%;
    background: linear-gradient(120deg, rgba(56, 189, 248, 0.18), rgba(249, 115, 22, 0));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--ease);
}

.flight-plan-card:hover,
.flight-plan-card:focus-within {
    transform: translateY(-4px);
    border-color: rgba(56, 189, 248, 0.38);
    box-shadow: 0 30px 64px rgba(56, 189, 248, 0.22);
}

.flight-plan-card:hover::before,
.flight-plan-card:focus-within::before {
    opacity: 1;
}

.flight-plan-card-highlight {
    border-color: rgba(249, 115, 22, 0.48);
    box-shadow: 0 30px 64px rgba(249, 115, 22, 0.3);
}

.flight-plan-card-today {
    border-color: rgba(56, 189, 248, 0.52);
    box-shadow: 0 34px 72px rgba(56, 189, 248, 0.26);
}

.flight-plan-card-countdown {
    animation: flight-plan-focus-pulse 3.5s ease-in-out infinite;
}

.flight-plan-card-countdown::before {
    opacity: 0.45;
}

.flight-plan-card-countdown::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(56, 189, 248, 0.45);
    opacity: 0.35;
    transform: scale(1);
    animation: flight-plan-focus-ring 3.5s ease-in-out infinite;
    pointer-events: none;
}

.flight-plan-card-live {
    border-color: rgba(56, 189, 248, 0.6);
    box-shadow: 0 36px 76px rgba(56, 189, 248, 0.32);
}

.flight-plan-countdown {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.85rem 1.1rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(56, 189, 248, 0.45);
    background: linear-gradient(120deg, rgba(56, 189, 248, 0.18), rgba(15, 23, 42, 0.3));
    color: var(--hawk-ice);
    font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.15);
}

.flight-plan-countdown-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.82);
}

.flight-plan-countdown-timer {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--hawk-ice);
    text-transform: uppercase;
}

.flight-plan-countdown.is-live {
    background: linear-gradient(120deg, rgba(34, 197, 94, 0.18), rgba(15, 23, 42, 0.3));
    border-color: rgba(34, 197, 94, 0.6);
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.22);
}

.flight-plan-countdown.is-live .flight-plan-countdown-label {
    color: rgba(167, 243, 208, 0.95);
}

@keyframes flight-plan-focus-pulse {
    0%,
    100% {
        box-shadow: 0 34px 72px rgba(56, 189, 248, 0.26);
    }
    50% {
        box-shadow: 0 40px 84px rgba(56, 189, 248, 0.34);
    }
}

@keyframes flight-plan-focus-ring {
    0% {
        opacity: 0.35;
        transform: scale(1);
    }
    70% {
        opacity: 0;
        transform: scale(1.08);
    }
    100% {
        opacity: 0;
        transform: scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .flight-plan-card-countdown,
    .flight-plan-card-countdown::after {
        animation: none;
    }
}

.flight-plan-card-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.82);
}

.flight-plan-card-title i {
    color: rgba(56, 189, 248, 0.75);
}

.flight-plan-list {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.flight-plan-list-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.05rem 1.15rem;
    border-radius: 1.25rem;
    background: rgba(15, 23, 42, 0.68);
    border: 1px solid rgba(148, 163, 184, 0.22);
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.flight-plan-list-item.is-primary {
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.25), 0 20px 48px rgba(56, 189, 248, 0.18);
}

.flight-plan-list-item.is-primary .flight-plan-list-title {
    color: var(--hawk-ice);
}

.flight-plan-list-item:hover,
.flight-plan-list-item:focus-within {
    transform: translateY(-3px);
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 18px 40px rgba(56, 189, 248, 0.2);
}

.flight-plan-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.flight-plan-list-time {
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.7);
}

.flight-plan-list-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.85);
}

.flight-plan-list-meta {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.75);
}

.flight-plan-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.24);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.68);
}

#upcoming {
    text-align: center;
}

#upcoming .flight-plan-list {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

#upcoming .flight-plan-list-item {
    align-items: center;
    text-align: center;
}

#upcoming .flight-plan-list-header {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

#upcoming .flight-plan-tag {
    align-self: center;
}

#upcoming .flight-plan-list-time,
#upcoming .flight-plan-list-title,
#upcoming .flight-plan-list-meta {
    text-align: center;
}

.flight-plan-tag-accent {
    background: linear-gradient(120deg, rgba(249, 115, 22, 0.35), rgba(250, 204, 21, 0.2));
    border-color: rgba(249, 115, 22, 0.55);
    color: var(--hawk-ice);
}

.flight-plan-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--hawk-ice);
}

.flight-plan-meta {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.88rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(125, 211, 252, 0.85);
}

.flight-plan-description {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(226, 232, 240, 0.78);
}

.flight-plan-empty {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(148, 163, 184, 0.78);
}

.flight-plan-cta {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

.flight-plan-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1.75rem;
    border-radius: 9999px;
    border: 1px solid rgba(56, 189, 248, 0.35);
    background: rgba(2, 6, 23, 0.6);
    color: rgba(226, 232, 240, 0.85);
    font-size: 0.82rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    transition: all 0.3s var(--ease);
}

.flight-plan-link:hover,
.flight-plan-link:focus-visible {
    color: var(--hawk-gold);
    border-color: rgba(249, 115, 22, 0.55);
    box-shadow: 0 22px 48px rgba(249, 115, 22, 0.3);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .flight-plan-card {
        padding: 2rem 1.75rem;
    }

    .flight-plan-card-title {
        font-size: 0.88rem;
    }

    .flight-plan-title {
        font-size: 1.1rem;
    }
}

.flight-plan-hero {
    position: relative;
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr;
    border-radius: 2.5rem;
    padding: 3rem;
    background: linear-gradient(160deg, rgba(11, 18, 32, 0.95), rgba(2, 6, 23, 0.78));
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 30px 68px rgba(2, 6, 23, 0.55);
    overflow: hidden;
}

.flight-plan-hero::before {
    content: '';
    position: absolute;
    inset: -35% 25% auto -25%;
    height: 180%;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(56, 189, 248, 0));
    opacity: 0.65;
    pointer-events: none;
}

.flight-plan-hero-intro {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.flight-plan-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.15rem;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.24);
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.7);
}

.flight-plan-hero-title {
    margin: 0;
    font-size: 3rem;
    font-weight: 700;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    letter-spacing: 0.05em;
}

.flight-plan-hero-text {
    margin: 0;
    font-size: 1.05rem;
    color: rgba(226, 232, 240, 0.8);
    max-width: 40rem;
}

.flight-plan-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}

.flight-plan-hero-actions .btn-secondary {
    border-color: rgba(148, 163, 184, 0.28);
}

.flight-plan-hero-cards {
    position: relative;
    z-index: 1;
}

@media (min-width: 1024px) {
    .flight-plan-hero {
        grid-template-columns: 1.05fr 0.95fr;
    }
}

@media (max-width: 768px) {
    .flight-plan-hero {
        padding: 2.4rem 1.85rem;
    }

.flight-plan-hero-title {
        font-size: 2.35rem;
    }
}

.mission-archive-main {
    max-width: var(--breakpoint-xl);
    margin: 0 auto;
    padding: var(--space-16) var(--space-6) var(--space-20);
    display: flex;
    flex-direction: column;
    gap: var(--space-18);
}

.mission-archive-main > section {
    width: 100%;
}

.mission-archive-hero {
    position: relative;
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr;
    padding: 3rem;
    border-radius: 2.5rem;
    background: linear-gradient(150deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.78));
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 30px 68px rgba(2, 6, 23, 0.55);
    overflow: hidden;
    margin: 0 auto;
}

.mission-archive-hero::before {
    content: '';
    position: absolute;
    inset: -30% 15% auto -20%;
    height: 175%;
    background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.18), rgba(56, 189, 248, 0));
    opacity: 0.7;
    pointer-events: none;
}

.mission-archive-hero-intro {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mission-archive-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.15rem;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.24);
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.72);
}

.mission-archive-hero-title {
    margin: 0;
    font-size: 3rem;
    font-weight: 700;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    letter-spacing: 0.05em;
}

.mission-archive-hero-text {
    margin: 0;
    font-size: 1.05rem;
    color: rgba(226, 232, 240, 0.8);
    max-width: 42rem;
}

.mission-archive-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}

.mission-archive-hero-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.mission-archive-summary-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.mission-archive-summary-card {
    position: relative;
    padding: 1.5rem 1.75rem;
    border-radius: 1.75rem;
    background: rgba(15, 23, 42, 0.68);
    border: 1px solid rgba(148, 163, 184, 0.22);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}

.mission-archive-summary-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(125, 211, 252, 0.18);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}

.mission-archive-summary-card:hover::before,
.mission-archive-summary-card:focus-within::before {
    opacity: 1;
}

.summary-label {
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.75);
}

.summary-value {
    font-size: 2.35rem;
    font-weight: 700;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    color: rgba(226, 232, 240, 0.95);
}

.summary-subtext {
    font-size: 0.95rem;
    color: rgba(226, 232, 240, 0.7);
}

.mission-archive-recent-games {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.recent-games-title {
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.78);
}

.recent-games-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.recent-game-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    background: rgba(30, 64, 175, 0.18);
    border: 1px solid rgba(59, 130, 246, 0.28);
    font-size: 0.88rem;
    color: rgba(191, 219, 254, 0.92);
}

.recent-games-empty {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(148, 163, 184, 0.78);
}

.mission-archive-panel {
    padding: 4rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

.mission-archive-panel > p {
    margin: 0;
    max-width: 48rem;
    color: rgba(226, 232, 240, 0.82);
}

.mission-archive-panel .mission-vod-grid,
.mission-archive-panel .featured-clips-grid {
    width: 100%;
}

.mission-vod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    text-align: left;
}

.mission-vod-card {
    display: flex;
    flex-direction: column;
    border-radius: 1.75rem;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.22);
    overflow: hidden;
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}

.mission-vod-card:hover,
.mission-vod-card:focus-within {
    transform: translateY(-4px);
    border-color: rgba(125, 211, 252, 0.3);
}

.mission-vod-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: rgba(30, 41, 59, 0.7);
}

.mission-vod-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mission-vod-thumb-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(148, 163, 184, 0.9);
    font-size: 2rem;
}

.mission-vod-duration {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.75rem;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.35);
    font-size: 0.8rem;
    color: rgba(226, 232, 240, 0.9);
}

.mission-vod-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
}

.mission-vod-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f8fafc;
}

.mission-vod-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.88rem;
    color: rgba(226, 232, 240, 0.75);
}

.mission-vod-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.mission-vod-meta-item i {
    color: rgba(96, 165, 250, 0.9);
}

.mission-vod-action {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.1rem;
    border-radius: 9999px;
}

.mission-vod-empty {
    margin: 0;
    padding: 2.5rem;
    border-radius: 1.75rem;
    background: rgba(15, 23, 42, 0.65);
    border: 1px dashed rgba(148, 163, 184, 0.35);
    color: rgba(148, 163, 184, 0.82);
    font-size: 1rem;
}

.youtube-highlight-panel {
    align-items: stretch;
    text-align: left;
    gap: 2.5rem;
}

.youtube-highlight-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.youtube-highlight-intro h2 {
    margin-bottom: 0.75rem;
}

.youtube-subscribe-card {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.75rem;
    border-radius: 1.5rem;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(125, 211, 252, 0.25);
    text-align: center;
}

.youtube-subscribe-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(224, 242, 254, 0.95);
}

.youtube-subscribe-link {
    align-self: center;
}

.youtube-video-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.75rem;
}

.youtube-video-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
    border-radius: 1.75rem;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.22);
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}

.youtube-video-card:hover,
.youtube-video-card:focus-within {
    transform: translateY(-4px);
    border-color: rgba(125, 211, 252, 0.3);
}

.youtube-video-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 1.25rem;
    overflow: hidden;
    background: rgba(30, 41, 59, 0.7);
}

.youtube-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 1.25rem;
}

.youtube-video-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.youtube-video-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #f8fafc;
}

.youtube-video-description {
    margin: 0;
    color: rgba(226, 232, 240, 0.78);
    font-size: 0.95rem;
}

@media (min-width: 1024px) {
    .youtube-highlight-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .youtube-highlight-intro {
        max-width: 34rem;
    }

    .youtube-subscribe-card {
        max-width: 20rem;
    }
}

@media (min-width: 1024px) {
    .mission-archive-hero {
        grid-template-columns: 1.1fr 0.9fr;
    }
}

@media (max-width: 768px) {
    .mission-archive-main {
        padding: 3.2rem 1.25rem 4rem;
        gap: 3.5rem;
    }

    .mission-archive-hero {
        padding: 2.4rem 1.9rem;
    }

    .mission-archive-hero-title {
        font-size: 2.4rem;
    }

    .mission-archive-panel {
        padding: 3rem 1.75rem;
    }
}

@media (max-width: 540px) {
    .mission-archive-panel {
        padding: 2.5rem 1.35rem;
        gap: 1.75rem;
    }

    .mission-archive-panel > p {
        font-size: 0.98rem;
    }
}

.social-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-full);
    background: var(--glass);
    border: 1px solid var(--glass-border);
    color: var(--hawk-ice);
    font-weight: var(--font-weight-semibold);
    transition: all var(--duration-normal) var(--ease);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.social-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(249, 115, 22, 0.18), rgba(250, 204, 21, 0.12));
    opacity: 0;
    transition: opacity 0.35s var(--ease);
    z-index: -1;
}

.social-link:hover {
    transform: translateY(-2px);
    border-color: var(--hawk-gold);
    box-shadow: var(--shadow-lg);
    background: var(--glass-strong);
}

.social-link:hover::before {
    opacity: 1;
}

.logo-container {
    border: 1px solid rgba(250, 204, 21, 0.35);
    box-shadow: 0 24px 50px rgba(249, 115, 22, 0.22);
    background: rgba(2, 6, 23, 0.65);
}

.hero-update-card {
    background: linear-gradient(155deg, rgba(56, 189, 248, 0.18), rgba(15, 23, 42, 0.85));
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 1.75rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.55);
}

.hero-update-card h3 i {
    color: var(--hawk-gold);
}

.hero-update-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hero-update-card li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: rgba(226, 232, 240, 0.78);
}

.hero-update-card li::before {
    content: '\f0da';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--hawk-ember);
    margin-top: 0.2rem;
}

.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background-color: #000;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.stream-chat-container {
    display: flex;
    flex: 1 1 auto;
    isolation: isolate;
    min-height: 0;
}

.stream-chat-container iframe {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
}

.data-grid,
.card-grid {
    display: grid;
    gap: 1.75rem;
}

.card-grid.three {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.card-grid.two {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.hawk-card {
    border-radius: 1.5rem;
    padding: 1.75rem;
    background: linear-gradient(155deg, rgba(11, 18, 32, 0.9), rgba(249, 115, 22, 0.12));
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 20px 40px rgba(2, 6, 23, 0.55);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.hawk-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 50px rgba(249, 115, 22, 0.25);
}

.schedule-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.schedule-title-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.schedule-timezone-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: linear-gradient(120deg, rgba(129, 140, 248, 0.28), rgba(56, 189, 248, 0.2));
    border: 1px solid rgba(129, 140, 248, 0.42);
    color: rgba(226, 245, 255, 0.9);
    white-space: nowrap;
}

.schedule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    justify-items: center;
}

.schedule-grid > * {
    width: 100%;
}

.schedule-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    padding: 1.9rem;
    border-radius: 1.6rem;
    text-align: center;
    background:
        linear-gradient(170deg, rgba(6, 18, 44, 0.9), rgba(3, 9, 24, 0.72)),
        var(--aurora-gradient);
    background-size: 220% 220%;
    border: 1px solid rgba(129, 140, 248, 0.28);
    box-shadow: 0 28px 64px rgba(2, 6, 23, 0.62);
    overflow: hidden;
    max-width: 320px;
    align-items: center;
    backdrop-filter: blur(10px);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
    animation: auroraFlow 28s ease-in-out infinite;
}

.schedule-card::before {
    content: '';
    position: absolute;
    inset: -35% 55% auto -25%;
    height: 150%;
    background: radial-gradient(circle at top, rgba(129, 140, 248, 0.28), transparent 65%);
    transform: rotate(12deg);
    opacity: 0.82;
    pointer-events: none;
}

.schedule-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(129, 140, 248, 0.32);
    pointer-events: none;
    transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
    box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.16);
}

.schedule-card:hover::after,
.schedule-card:focus-within::after {
    border-color: rgba(94, 234, 212, 0.5);
    box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.25), 0 22px 50px rgba(94, 234, 212, 0.22);
}

.schedule-card:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 36px 80px rgba(5, 15, 36, 0.6);
}

.schedule-card-highlight {
    border-color: rgba(244, 114, 182, 0.45);
    box-shadow: 0 24px 55px rgba(244, 114, 182, 0.35);
}

.schedule-card-highlight::before {
    background: radial-gradient(circle at top, rgba(244, 114, 182, 0.32), transparent 60%);
}

.schedule-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin: 0;
}

.schedule-day {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    background: linear-gradient(120deg, #5eead4 0%, #a855f7 60%, #bef264 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.schedule-time {
    font-size: 0.98rem;
    font-weight: 600;
    color: rgba(226, 245, 255, 0.82);
}

.schedule-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.schedule-meta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: linear-gradient(120deg, rgba(129, 140, 248, 0.3), rgba(56, 189, 248, 0.24));
    border: 1px solid rgba(129, 140, 248, 0.38);
    color: rgba(226, 245, 255, 0.92);
    white-space: nowrap;
}

.schedule-description {
    margin: 0;
    color: rgba(226, 242, 255, 0.88);
    line-height: 1.68;
    font-size: 1rem;
    text-align: center;
}

.schedule-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    background: linear-gradient(120deg, rgba(129, 140, 248, 0.3), rgba(56, 189, 248, 0.2));
    border: 1px solid rgba(129, 140, 248, 0.45);
    color: rgba(224, 247, 255, 0.92);
    margin: 0 auto;
}

.schedule-card-highlight .schedule-tag {
    background: linear-gradient(120deg, rgba(244, 114, 182, 0.32), rgba(253, 224, 71, 0.22));
    border-color: rgba(244, 114, 182, 0.45);
    color: rgba(253, 255, 197, 0.92);
}

.schedule-card-today::after {
    border-color: rgba(94, 234, 212, 0.55);
    box-shadow: 0 0 0 1px rgba(94, 234, 212, 0.32), 0 18px 40px rgba(94, 234, 212, 0.22);
}

.schedule-card-today .schedule-meta-badge {
    background: linear-gradient(120deg, rgba(94, 234, 212, 0.32), rgba(129, 140, 248, 0.22));
    border-color: rgba(94, 234, 212, 0.48);
    color: rgba(226, 248, 255, 0.95);
}

.schedule-card-today .schedule-tag {
    background: linear-gradient(120deg, rgba(94, 234, 212, 0.32), rgba(129, 140, 248, 0.24));
    border-color: rgba(94, 234, 212, 0.55);
    color: rgba(224, 247, 255, 0.94);
}

.schedule-card-highlight.schedule-card-today::after {
    border-color: rgba(244, 114, 182, 0.55);
    box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.38), 0 18px 40px rgba(244, 114, 182, 0.28);
}

.schedule-card-highlight.schedule-card-today .schedule-meta-badge {
    background: linear-gradient(120deg, rgba(244, 114, 182, 0.32), rgba(253, 224, 71, 0.22));
    border-color: rgba(244, 114, 182, 0.45);
    color: rgba(253, 255, 197, 0.95);
}

.schedule-card-highlight.schedule-card-today .schedule-tag {
    background: linear-gradient(120deg, rgba(244, 114, 182, 0.32), rgba(253, 224, 71, 0.22));
    border-color: rgba(244, 114, 182, 0.45);
    color: rgba(253, 255, 197, 0.95);
}

@media (max-width: 720px) {
    .schedule-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .schedule-card {
        padding: 1.45rem;
    }

    .schedule-heading {
        gap: 0.5rem;
    }

    .schedule-meta {
        justify-content: flex-start;
    }
}

.status-message {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    border-radius: 1.4rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 14px 32px rgba(2, 6, 23, 0.55);
}

.status-success {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.35);
    color: #bbf7d0;
}

.status-error {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fecaca;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

form label {
    font-weight: 600;
    color: rgba(226, 232, 240, 0.86);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
    width: 100%;
    border-radius: 1rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: var(--glass-strong);
    color: var(--hawk-ice);
    font-size: 1rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

select[class*="bg-slate-900/60"],
select[class*="bg-slate-900\/60"] {
    background-color: rgba(15, 23, 42, 0.82);
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--hawk-ice);
}

select[class*="bg-slate-900/60"]:focus,
select[class*="bg-slate-900\/60"]:focus {
    background-color: rgba(15, 23, 42, 0.92);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: rgba(249, 115, 22, 0.55);
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.18);
    background: rgba(15, 23, 42, 0.92);
}

input::placeholder,
textarea::placeholder {
    color: rgba(148, 163, 184, 0.6);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form input[type="search"],
.contact-form textarea,
.contact-form select {
    background-color: var(--glass-strong);
    color: var(--hawk-ice);
    border-color: rgba(148, 163, 184, 0.22);
}

.contact-form textarea::placeholder {
    color: rgba(148, 163, 184, 0.6);
}

.contact-form select:focus,
.contact-form textarea:focus,
.contact-form input:focus {
    background-color: rgba(15, 23, 42, 0.92);
    color: var(--hawk-ice);
}

.footer {
    margin-top: 3rem;
    padding: 3rem 2.5rem 2.5rem;
    background: transparent;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    position: relative;
}

.footer::before,
.footer::after {
    content: none;
}

.footer-inner {
    position: relative;
    max-width: clamp(1280px, 92vw, 1400px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    padding: clamp(3rem, 5.5vw, 4.5rem);
    border-radius: 3rem;
}

.footer-inner.glass-effect {
    background:
        linear-gradient(160deg, rgba(8, 18, 36, 0.92), rgba(2, 8, 24, 0.94)),
        linear-gradient(125deg, rgba(94, 234, 212, 0.12), rgba(129, 140, 248, 0.08), rgba(236, 72, 153, 0.12));
    box-shadow: 0 36px 80px rgba(2, 6, 23, 0.6);
}

.glass-dock::before {
    inset: -125% 38% 40% -32%;
    opacity: 0.75;
}

.glass-dock::after {
    inset: 28% -36% -120% 36%;
    opacity: 0.68;
}

.glass-dock::before,
.glass-dock::after {
    border-radius: inherit;
}

.footer-top {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    align-items: center;
    text-align: center;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.footer-logo {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1.1rem;
    padding: 0.25rem;
    background: rgba(4, 13, 32, 0.78);
    border: 1px solid rgba(94, 234, 212, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 38px rgba(2, 12, 29, 0.48);
}

.footer-logo img {
    width: 100%;
    height: 100%;
    border-radius: 0.95rem;
    object-fit: cover;
    display: block;
    box-shadow: inset 0 0 12px rgba(2, 12, 29, 0.35);
}

.footer-copy {
    display: grid;
    gap: 0.4rem;
    max-width: 420px;
}

.footer-eyebrow {
    margin: 0;
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.65);
}

.footer-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: rgba(248, 250, 252, 0.95);
}

.footer-description {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(203, 213, 225, 0.8);
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.footer-social__link {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 64, 175, 0.55));
    border: 1px solid rgba(148, 163, 184, 0.45);
    color: rgba(226, 247, 255, 0.92);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}

.footer-social__link i {
    font-size: 1.15rem;
}

.footer-social__link:hover {
    color: rgba(226, 255, 250, 0.98);
    border-color: rgba(94, 234, 212, 0.6);
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.75), rgba(59, 130, 246, 0.75));
    box-shadow: 0 20px 38px rgba(94, 234, 212, 0.24);
    transform: translateY(-3px) scale(1.03);
}

.footer-social__link:focus-visible {
    outline: 2px solid rgba(94, 234, 212, 0.75);
    outline-offset: 3px;
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
    text-align: center;
}

.footer-bottom__copy {
    margin: 0;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(203, 213, 225, 0.82);
}

.footer-bottom__meta {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    align-items: center;
    justify-content: center;
}

.footer-legal-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
}

.footer-legal-links a {
    font-size: 0.9rem;
    color: rgba(226, 232, 240, 0.86);
    text-decoration: none;
    transition: color 0.35s ease;
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
    color: rgba(190, 242, 100, 0.95);
}

.footer-developer {
    position: relative;
    display: grid;
    gap: 0.55rem;
    justify-items: start;
    padding: 1rem 1.35rem 1.2rem;
    border-radius: 1.35rem;
    border: 1px solid rgba(168, 85, 247, 0.58);
    background:
        radial-gradient(circle at 18% -10%, rgba(244, 114, 182, 0.22), transparent 60%),
        radial-gradient(circle at 88% 12%, rgba(129, 140, 248, 0.3), transparent 62%),
        linear-gradient(145deg, rgba(30, 24, 75, 0.96), rgba(17, 24, 39, 0.98));
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.45), inset 0 0 0 1px rgba(147, 51, 234, 0.22);
    color: rgba(244, 238, 255, 0.92);
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    min-width: min(100%, 19.5rem);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s ease;
}

.footer-developer::before {
    content: "";
    position: absolute;
    inset: 18% 10% 12% 10%;
    border-radius: inherit;
    border: 1px solid rgba(196, 181, 253, 0.22);
    opacity: 0.9;
    pointer-events: none;
}

.footer-developer::after {
    content: "";
    position: absolute;
    inset: -110% 45% 25% -45%;
    background: linear-gradient(95deg, rgba(244, 114, 182, 0), rgba(244, 114, 182, 0.5), rgba(59, 130, 246, 0));
    transform: rotate(12deg);
    opacity: 0.55;
    animation: footerDeveloperSheen 5.5s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

.footer-developer:focus-visible {
    outline: 2px solid rgba(167, 139, 250, 0.6);
    outline-offset: 4px;
}

.footer-developer:hover,
.footer-developer:focus-visible {
    transform: translateY(-3px) scale(1.01);
    border-color: rgba(196, 181, 253, 0.85);
    box-shadow: 0 24px 48px rgba(76, 29, 149, 0.48);
}

.footer-developer__halo {
    position: absolute;
    inset: -60% -32% 38% -32%;
    background: conic-gradient(from 210deg, rgba(129, 140, 248, 0.12), rgba(192, 132, 252, 0.38), rgba(236, 72, 153, 0.2), rgba(129, 140, 248, 0.12));
    filter: blur(46px);
    opacity: 0.65;
    animation: footerDeveloperAurora 14s ease-in-out infinite;
    pointer-events: none;
    z-index: -2;
}

.footer-developer__badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.38rem 0.85rem 0.45rem;
    border-radius: 9999px;
    background: linear-gradient(90deg, rgba(192, 132, 252, 0.18), rgba(244, 114, 182, 0.42));
    box-shadow: inset 0 0 0 1px rgba(192, 132, 252, 0.35);
    font-size: 0.6rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(224, 231, 255, 0.86);
}

.footer-developer__badge::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(244, 114, 182, 0.95), rgba(244, 114, 182, 0));
    box-shadow: 0 0 12px rgba(244, 114, 182, 0.95);
    animation: footerBadgePulse 2.4s ease-in-out infinite;
}

.footer-developer__meta {
    display: grid;
    gap: 0.35rem;
    align-items: start;
}

.footer-developer__eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: rgba(221, 214, 254, 0.78);
}

.footer-developer__name {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    background: linear-gradient(100deg, rgba(244, 114, 182, 0.95), rgba(192, 132, 252, 0.95), rgba(129, 140, 248, 0.9));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 24px rgba(168, 85, 247, 0.45);
}

.footer-developer__tagline {
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(203, 196, 255, 0.78);
}

.footer-developer__starlane {
    position: relative;
    height: 2px;
    width: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, rgba(244, 114, 182, 0), rgba(192, 132, 252, 0.78), rgba(244, 114, 182, 0));
    overflow: hidden;
}

.footer-developer__starlane::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0), rgba(244, 114, 182, 0.85), rgba(129, 140, 248, 0));
    transform: translateX(-100%);
    animation: footerDeveloperStreak 4.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes footerDeveloperAurora {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.5;
    }

    45% {
        transform: rotate(130deg) scale(1.08);
        opacity: 0.68;
    }

    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.5;
    }
}

@keyframes footerDeveloperSheen {
    0% {
        transform: translateX(-10%) rotate(12deg);
        opacity: 0.1;
    }

    30% {
        opacity: 0.65;
    }

    60% {
        transform: translateX(60%) rotate(12deg);
        opacity: 0.4;
    }

    100% {
        transform: translateX(120%) rotate(12deg);
        opacity: 0;
    }
}

@keyframes footerBadgePulse {
    0%,
    100% {
        transform: scale(0.9);
        opacity: 0.55;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

@keyframes footerDeveloperStreak {
    0% {
        transform: translateX(-110%);
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    100% {
        transform: translateX(120%);
        opacity: 0;
    }
}

@media (max-width: 640px) {
    .footer-developer {
        text-align: center;
        justify-items: center;
        padding: 1.2rem 1.5rem;
        min-width: 100%;
    }

    .footer-developer__badge {
        letter-spacing: 0.3em;
    }

    .footer-developer__tagline {
        letter-spacing: 0.24em;
    }
}

@media (min-width: 640px) {
    .footer {
        padding: 3rem 1.75rem 2.25rem;
    }
}

@media (min-width: 768px) {
    .footer-top {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }

    .footer-brand {
        flex-direction: row;
        align-items: center;
        text-align: left;
    }

    .footer-copy {
        max-width: 480px;
    }

    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }

    .footer-bottom__meta {
        flex-direction: row;
        gap: 1.25rem;
        align-items: center;
    }
}

.table-hawk {
    width: 100%;
    border-collapse: collapse;
    border-radius: 1.5rem;
    overflow: hidden;
    background: rgba(2, 6, 23, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 20px 45px rgba(2, 6, 23, 0.55);
}

.table-hawk th,
.table-hawk td {
    padding: 1rem;
    text-align: center;
}

.table-hawk thead {
    background: linear-gradient(120deg, rgba(129, 140, 248, 0.28), rgba(94, 234, 212, 0.2));
}

.table-hawk tbody tr {
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    transition: background 0.3s ease;
}

.table-hawk tbody tr:hover {
    background: rgba(94, 234, 212, 0.12);
}

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.85);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(129, 140, 248, 0.85), rgba(94, 234, 212, 0.85));
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(129, 140, 248, 1), rgba(94, 234, 212, 1));
}

@media (max-width: 960px) {
    main {
        padding-top: 2.5rem;
    }
}

@media (max-width: 640px) {
    body {
        padding-bottom: var(--space-10);
    }

    .social-link {
        width: 100%;
        justify-content: center;
        padding: var(--space-3) var(--space-4);
    }

    .footer .footer-grid {
        gap: 0.85rem;
    }
}


.tech-card,
.perk-card {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 30px 60px rgba(2, 6, 23, 0.45);
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
    min-height: 100%;
}

.tech-card:hover,
.perk-card:hover {
    transform: translateY(-6px);
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 36px 80px rgba(8, 47, 73, 0.45);
}

.tech-card ul,
.perk-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tech-card li,
.perk-card li {
    position: relative;
    padding-left: 1.5rem;
}

.tech-card li::before,
.perk-card li::before {
    content: '\f111';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.35rem;
    font-size: 0.4rem;
    color: rgba(56, 189, 248, 0.75);
}

.perk-card {
    position: relative;
    overflow: hidden;
}

.perk-card::after {
    content: '';
    position: absolute;
    inset: -40% auto auto -40%;
    width: 160%;
    height: 160%;
    background: radial-gradient(circle at center, rgba(56, 189, 248, 0.12), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.perk-card:hover::after {
    opacity: 1;
}

.perk-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(249, 115, 22, 0.2));
    color: var(--hawk-ice);
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.2);
}

.leaderboard-hero,
.activity-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    background:
        linear-gradient(160deg, rgba(6, 18, 44, 0.88), rgba(3, 9, 24, 0.78)),
        var(--aurora-gradient);
    background-size: 220% 220%;
    border: 1px solid rgba(129, 140, 248, 0.28);
    box-shadow: 0 36px 88px rgba(3, 9, 24, 0.6);
    border-radius: 2rem;
    padding: 3rem 2.5rem;
    animation: auroraFlow 24s ease-in-out infinite;
}

.leaderboard-hero::before,
.activity-hero::before {
    content: '';
    position: absolute;
    inset: -20% -30% 40% -30%;
    background: radial-gradient(circle at center, rgba(129, 140, 248, 0.24), transparent 70%);
    opacity: 0.78;
    pointer-events: none;
    animation: pulseBloom 20s ease-in-out infinite;
}

.leaderboard-hero::after,
.activity-hero::after {
    content: '';
    position: absolute;
    inset: 40% -25% -30% -25%;
    background: radial-gradient(circle at center, rgba(94, 234, 212, 0.26), transparent 70%);
    opacity: 0.72;
    pointer-events: none;
    animation: pulseBloom 26s ease-in-out infinite reverse;
}

.leaderboard-hero > *,
.activity-hero > * {
    position: relative;
    z-index: 1;
}

.leaderboard-hero__badge,
.activity-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1.1rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: linear-gradient(120deg, rgba(129, 140, 248, 0.28), rgba(94, 234, 212, 0.18));
    border: 1px solid rgba(129, 140, 248, 0.42);
    color: rgba(226, 247, 255, 0.92);
    margin-bottom: 1.5rem;
}

.leaderboard-hero__title,
.activity-hero__title {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    margin: 0 0 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: linear-gradient(120deg, #5eead4 0%, #a855f7 50%, #bef264 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 32px rgba(94, 234, 212, 0.35);
}

.leaderboard-hero__subtitle,
.activity-hero__subtitle {
    max-width: 48rem;
    margin: 0 auto 1.75rem;
    font-size: 1.1rem;
    line-height: 1.75;
    color: rgba(226, 245, 255, 0.85);
}

.leaderboard-hero__meta,
.activity-hero__meta {
    font-size: 0.95rem;
    color: rgba(226, 245, 255, 0.78);
    margin-bottom: 1.5rem;
}

.leaderboard-hero__relative,
.activity-hero__relative {
    color: rgba(244, 114, 182, 0.85);
}

.leaderboard-hero__actions,
.activity-hero__actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.leaderboard-hero__formula {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.1rem;
    justify-content: center;
    padding: 0.85rem 1.25rem;
    border-radius: 9999px;
    background: linear-gradient(120deg, rgba(6, 18, 44, 0.72), rgba(3, 9, 24, 0.62));
    border: 1px solid rgba(129, 140, 248, 0.32);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    color: rgba(226, 245, 255, 0.88);
}

.leaderboard-hero__formula .formula-label {
    color: rgba(94, 234, 212, 0.9);
    font-weight: 600;
    text-transform: uppercase;
}

.leaderboard-hero__formula .formula-item {
    position: relative;
    padding-left: 0.9rem;
}

.leaderboard-hero__formula .formula-item::before {
    content: '\2022';
    position: absolute;
    left: 0;
    color: rgba(148, 163, 184, 0.65);
}

.leaderboard-stat,
.activity-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    color: var(--hawk-ice);
    overflow: hidden;
}

.leaderboard-stat::after,
.activity-stat::after {
    content: '';
    position: absolute;
    inset: auto -40% -50% -40%;
    height: 140%;
    background: linear-gradient(120deg, rgba(129, 140, 248, 0.32), rgba(94, 234, 212, 0));
    pointer-events: none;
}

.leaderboard-stat .stat-label,
.activity-stat .stat-label {
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(176, 196, 240, 0.78);
}

.leaderboard-stat .stat-value,
.activity-stat .stat-value {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: linear-gradient(120deg, #5eead4 0%, #a855f7 45%, #bef264 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.leaderboard-stat .stat-subtext,
.activity-stat .stat-subtext {
    font-size: 0.9rem;
    color: rgba(226, 245, 255, 0.75);
}

.leaderboard-podium-card {
    position: relative;
    overflow: hidden;
    color: var(--hawk-ice);
    background:
        linear-gradient(160deg, rgba(6, 18, 44, 0.9), rgba(3, 9, 24, 0.78)),
        var(--aurora-gradient);
    background-size: 220% 220%;
    border-radius: 1.75rem;
    padding: 2.2rem 2rem;
    box-shadow: 0 26px 58px rgba(3, 9, 24, 0.55);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.leaderboard-podium-card::after {
    content: '';
    position: absolute;
    inset: -30% -20% auto -20%;
    height: 160%;
    background: linear-gradient(140deg, rgba(94, 234, 212, 0.26), rgba(192, 132, 252, 0.12));
    pointer-events: none;
}

.leaderboard-podium-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 34px 80px rgba(5, 15, 36, 0.6);
}

.leaderboard-podium-card--gold {
    border: 1px solid rgba(226, 252, 161, 0.45);
}

.leaderboard-podium-card--silver {
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.leaderboard-podium-card--bronze {
    border: 1px solid rgba(244, 114, 182, 0.38);
}

.podium-rank {
    font-size: 1.35rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: linear-gradient(120deg, rgba(94, 234, 212, 0.9), rgba(192, 132, 252, 0.9));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.podium-name {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: linear-gradient(120deg, #5eead4 0%, #a855f7 55%, #bef264 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.podium-tier {
    margin: 0;
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(176, 196, 240, 0.82);
}

.podium-points {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(120deg, rgba(94, 234, 212, 0.95), rgba(192, 132, 252, 0.85));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.podium-metrics {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: rgba(226, 245, 255, 0.82);
}

.podium-metrics span i {
    margin-right: 0.35rem;
    color: rgba(94, 234, 212, 0.85);
}

.podium-last-active {
    font-size: 0.85rem;
    color: rgba(226, 232, 240, 0.65);
}

.leaderboard-table {
    border-radius: 2rem;
}

.leaderboard-standings {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
    color: var(--hawk-ice);
}

.leaderboard-standings th,
.leaderboard-standings td {
    padding: 0.85rem 1rem;
    text-align: left;
    font-size: 0.95rem;
}

.leaderboard-standings thead {
    background: rgba(15, 23, 42, 0.78);
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.leaderboard-standings tbody tr {
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    transition: background 0.3s ease;
}

.leaderboard-standings tbody tr:hover {
    background: rgba(249, 115, 22, 0.08);
}

.leaderboard-standings td[data-label="Rank"] {
    font-weight: 600;
    letter-spacing: 0.08em;
}

.leaderboard-standings .pilot-name {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.leaderboard-highlights .highlight-card,
.leaderboard-streaks,
.leaderboard-cta,
.integration-card,
.activity-card {
    position: relative;
    overflow: hidden;
}

.highlight-card h3,
.streaks-title,
.integration-title {
    margin: 0 0 1.25rem;
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hawk-ice);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.highlight-card ul,
.streaks-list,
.integration-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.highlight-card li,
.streaks-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.95rem;
    color: rgba(226, 232, 240, 0.85);
}

.leaderboard-table .table-wrapper {
    width: 100%;
}

.leaderboard-streaks .streaks-list {
    align-items: center;
}

.leaderboard-streaks .streaks-list li {
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    text-align: center;
}

.highlight-empty {
    justify-content: center;
    font-style: italic;
    color: rgba(226, 232, 240, 0.55);
}

.highlight-name,
.streak-name {
    font-weight: 600;
}

.highlight-metric,
.streak-metric {
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(250, 204, 21, 0.75);
}

.streaks-description,
.integration-copy,
.leaderboard-cta__copy,
.integration-note,
.activity-card__tier {
    color: rgba(226, 232, 240, 0.72);
    font-size: 0.95rem;
    line-height: 1.6;
}

.leaderboard-cta__title {
    margin: 0 0 0.75rem;
    font-size: 1.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--hawk-ice);
}

.activity-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.activity-card__name {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.activity-card__tier {
    margin: 0.3rem 0 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.activity-card__points {
    text-align: right;
}

.activity-card__points .points-value {
    font-size: 2rem;
    font-weight: 700;
    display: block;
}

.activity-card__points .points-label {
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.75);
}

.activity-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.4rem 0 0.2rem;
    font-size: 0.9rem;
    color: rgba(226, 232, 240, 0.78);
}

.activity-progress-row .progress-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.82rem;
}

.activity-progress-bar {
    position: relative;
    height: 0.55rem;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.2);
    overflow: hidden;
}

.activity-progress-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    width: var(--activity-percent, 0%);
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.85), rgba(249, 115, 22, 0.85));
    transition: width 0.45s var(--ease);
}

.activity-card__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.25rem;
}

.activity-card__metrics dt {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.78);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.activity-card__metrics dd {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--hawk-ice);
}

.activity-card__footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    font-size: 0.9rem;
    color: rgba(226, 232, 240, 0.78);
}

.activity-card__footer .footer-label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.7);
}

.activity-card__footer .footer-value {
    font-weight: 600;
}

.integration-list li {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(226, 232, 240, 0.82);
}

.integration-code {
    background: rgba(3, 7, 18, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 1.5rem;
    padding: 1.25rem;
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(226, 232, 240, 0.88);
}

.integration-code code {
    white-space: pre;
    font-family: 'Fira Code', 'Courier New', Courier, monospace;
}

.leaderboard-cta::after,
.activity-card::after,
.integration-card::after {
    content: '';
    position: absolute;
    inset: -30% -20% auto -20%;
    height: 150%;
    background: linear-gradient(140deg, rgba(56, 189, 248, 0.12), rgba(249, 115, 22, 0));
    pointer-events: none;
}

.leaderboard-cta__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (max-width: 768px) {
    .leaderboard-hero__formula {
        flex-direction: column;
        align-items: center;
    }

    .leaderboard-standings {
        font-size: 0.9rem;
    }

    .activity-card__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .activity-card__points {
        text-align: left;
    }

    .activity-card__metrics {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .activity-card__footer {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .leaderboard-hero__actions,
    .activity-hero__actions {
        flex-direction: column;
    }

    .leaderboard-hero__formula {
        border-radius: 1.25rem;
    }

    .leaderboard-standings th,
    .leaderboard-standings td {
        padding: 0.65rem;
    }

    .highlight-card h3,
    .integration-title {
        font-size: 1.15rem;
    }
}
.section-title {
    margin: 0 0 var(--space-4);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-4xl);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--hawk-ice);
    text-align: center;
}

@media (max-width: 768px) {
    .section-title {
        font-size: var(--font-size-3xl);
    }
}

@media (max-width: 640px) {
    .section-title {
        font-size: var(--font-size-2xl);
        margin: 0 0 var(--space-3);
    }
}

.section-lead {
    margin: 0 auto var(--space-12);
    max-width: 48rem;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--hawk-muted);
    text-align: center;
}

@media (max-width: 640px) {
    .section-lead {
        font-size: var(--font-size-base);
        margin: 0 auto var(--space-8);
    }
}

.merch-hero {
    position: relative;
    padding: var(--space-16) var(--space-12);
    display: flex;
    align-items: center;
    min-height: 28rem;
    border-radius: var(--radius-3xl);
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, rgba(11, 18, 32, 0.96) 0%, rgba(2, 6, 23, 0.8) 35%, rgba(6, 16, 38, 0.92) 100%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-outer);
}

.merch-hero::before,
.merch-hero::after {
    content: '';
    position: absolute;
    pointer-events: none;
    border-radius: 9999px;
    mix-blend-mode: screen;
    opacity: 0.85;
}

.merch-hero::before {
    inset: -35% auto auto -15%;
    width: 36rem;
    height: 36rem;
    background: radial-gradient(circle at center, rgba(249, 115, 22, 0.28), rgba(249, 115, 22, 0));
    filter: blur(10px);
}

.merch-hero::after {
    inset: auto -20% -40% auto;
    width: 28rem;
    height: 28rem;
    background: radial-gradient(circle at center, rgba(56, 189, 248, 0.32), rgba(56, 189, 248, 0));
    filter: blur(8px);
}

.merch-hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.28), transparent 55%),
        radial-gradient(circle at bottom left, rgba(249, 115, 22, 0.3), transparent 55%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.35), rgba(2, 6, 23, 0.75));
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.85;
}

.merch-hero-content {
    position: relative;
    z-index: 1;
    max-width: 40rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.merch-hero-content::after {
    content: '';
    position: absolute;
    inset: auto -25% -25% auto;
    width: 18rem;
    height: 18rem;
    border-radius: 9999px;
    background: radial-gradient(circle at center, rgba(148, 163, 184, 0.22), transparent 70%);
    opacity: 0.7;
    filter: blur(18px);
    z-index: -1;
}

.merch-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.32);
    color: rgba(226, 232, 240, 0.75);
}

.merch-hero-title {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.8rem, 4vw, 3.6rem);
    font-weight: 700;
    line-height: 1.05;
}

.merch-hero-text {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(226, 232, 240, 0.86);
}

.merch-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.merch-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.6rem;
}

.merch-alpha-shop {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(160deg, rgba(30, 27, 75, 0.9), rgba(30, 41, 59, 0.92)),
        radial-gradient(circle at 80% 0%, rgba(129, 140, 248, 0.35), transparent 65%);
}

.merch-alpha-shop::before {
    content: '';
    position: absolute;
    inset: -40% -10% 40% 30%;
    background: radial-gradient(circle at center, rgba(168, 85, 247, 0.45), transparent 70%);
    filter: blur(42px);
    opacity: 0.5;
    animation: merchAlphaAurora 12s ease-in-out infinite;
    pointer-events: none;
}

.merch-alpha-shop__header {
    position: relative;
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-10);
    z-index: 1;
}

.merch-alpha-shop__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    background: rgba(129, 140, 248, 0.16);
    border: 1px solid var(--glass-border);
    color: var(--hawk-ice);
}

.merch-alpha-shop__badge::before {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.95), rgba(167, 139, 250, 0));
    box-shadow: 0 0 10px rgba(167, 139, 250, 0.9);
}

.merch-alpha-shop__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.75rem;
    z-index: 1;
}

.merch-alpha-card {
    position: relative;
    padding: 2rem 1.85rem 2.1rem;
    border-radius: 1.75rem;
    display: grid;
    gap: 0.9rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid rgba(129, 140, 248, 0.18);
}

.merch-alpha-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(244, 114, 182, 0.16);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    padding: 1px;
}

.merch-alpha-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 52px rgba(2, 6, 23, 0.55);
    border-color: rgba(192, 132, 252, 0.4);
}

.merch-alpha-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.7);
}

.merch-alpha-card__status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.merch-alpha-card__status::before {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(244, 114, 182, 0.95), rgba(244, 114, 182, 0));
    box-shadow: 0 0 12px rgba(244, 114, 182, 0.85);
}

.merch-alpha-card__code {
    font-weight: 600;
    color: rgba(167, 139, 250, 0.85);
}

.merch-alpha-card__title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--hawk-ice);
}

.merch-alpha-card__summary {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.7;
    color: rgba(226, 232, 240, 0.78);
}

.merch-alpha-card__eta {
    margin: 0;
    font-size: 0.82rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(221, 214, 254, 0.7);
}

.merch-alpha-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.4rem;
    font-size: 0.82rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(192, 132, 252, 0.9);
    text-decoration: none;
}

.merch-alpha-card__cta:hover,
.merch-alpha-card__cta:focus-visible {
    color: rgba(244, 114, 182, 0.95);
}

.merch-alpha-card__cta:focus-visible {
    outline: 2px solid rgba(192, 132, 252, 0.45);
    outline-offset: 4px;
}

.merch-alpha-card__cta-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 9999px;
    background: rgba(129, 140, 248, 0.15);
    color: inherit;
    transition: transform 0.3s ease;
}

.merch-alpha-card:hover .merch-alpha-card__cta-caret,
.merch-alpha-card__cta:focus-visible .merch-alpha-card__cta-caret {
    transform: translateX(4px);
}

.merch-alpha-shop__footnote {
    margin-top: var(--space-10);
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    color: var(--hawk-muted);
    text-align: center;
}

@keyframes merchAlphaAurora {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.45;
    }

    50% {
        transform: translateY(-6%) scale(1.05);
        opacity: 0.65;
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 0.45;
    }
}

.merch-status-card {
    position: relative;
    padding: 2.2rem 2rem;
    border-radius: 1.75rem;
    text-align: left;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}

.merch-status-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(2, 6, 23, 0.55);
}

.merch-status-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(56, 189, 248, 0.1);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    padding: 1px;
}

.merch-status-card::after {
    content: '';
    position: absolute;
    inset: auto 1.25rem -2.5rem auto;
    width: 7rem;
    height: 7rem;
    background: radial-gradient(circle at center, rgba(56, 189, 248, 0.24), transparent 70%);
    transform: rotate(25deg);
    opacity: 0.75;
}

.merch-status-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.3rem;
    background: rgba(56, 189, 248, 0.16);
    color: rgba(56, 189, 248, 0.9);
    font-size: 1.4rem;
}

.merch-status-title {
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--hawk-ice);
}

.merch-status-text {
    margin: 0;
    font-size: 0.98rem;
    color: rgba(226, 232, 240, 0.78);
    line-height: 1.7;
}

.merch-milestone-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.8rem;
}

.merch-milestone {
    padding: 2.1rem 2rem;
    border-radius: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    position: relative;
    overflow: hidden;
}

.merch-milestone::before {
    content: '';
    position: absolute;
    inset: -30% auto auto -25%;
    width: 18rem;
    height: 18rem;
    background: radial-gradient(circle at center, rgba(249, 115, 22, 0.18), transparent 70%);
    opacity: 0.85;
}

.merch-milestone-icon {
    font-size: 1.75rem;
    color: rgba(249, 115, 22, 0.9);
}

.merch-milestone-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.merch-milestone-phase {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--hawk-ice);
}

.merch-milestone-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(226, 232, 240, 0.85);
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.6);
}

.merch-milestone-status::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: currentColor;
    box-shadow: 0 0 12px currentColor;
}

.merch-milestone-status-complete {
    color: rgba(74, 222, 128, 0.9);
    border-color: rgba(74, 222, 128, 0.28);
    background: rgba(22, 101, 52, 0.32);
}

.merch-milestone-status-progress {
    color: rgba(250, 204, 21, 0.9);
    border-color: rgba(250, 204, 21, 0.28);
    background: rgba(113, 63, 18, 0.28);
}

.merch-milestone-status-upcoming {
    color: rgba(56, 189, 248, 0.9);
    border-color: rgba(56, 189, 248, 0.28);
    background: rgba(8, 47, 73, 0.32);
}

.merch-milestone-text {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.6;
    color: rgba(226, 232, 240, 0.78);
}

.merch-callouts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.merch-callout {
    position: relative;
    padding: 1.75rem 2rem;
    border-radius: 1.75rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    text-align: left;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
}

.merch-callout:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(2, 6, 23, 0.55);
    border-color: rgba(56, 189, 248, 0.35);
}

.merch-callout::after {
    content: '';
    position: absolute;
    inset: auto 1.5rem -3.5rem auto;
    width: 14rem;
    height: 14rem;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(56, 189, 248, 0.22), transparent 70%);
    opacity: 0.4;
    filter: blur(0.5px);
    z-index: 0;
}

.merch-callout-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(226, 232, 240, 0.92);
    font-size: 1.8rem;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.merch-callout-icon i {
    filter: none;
}

.merch-callout-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative;
    z-index: 1;
}

.merch-callout-label {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--hawk-ice);
}

.merch-callout-description {
    font-size: 0.93rem;
    color: rgba(226, 232, 240, 0.75);
    line-height: 1.6;
}

.merch-callout-caret {
    font-size: 1rem;
    color: rgba(148, 163, 184, 0.6);
    position: relative;
    z-index: 1;
}

.merch-checkout-module {
    position: relative;
    overflow: hidden;
}

.merch-checkout-module::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 120% at 15% 10%, rgba(80, 184, 255, 0.14), transparent 55%), radial-gradient(80% 80% at 85% 20%, rgba(186, 113, 255, 0.12), transparent 60%), radial-gradient(120% 120% at 50% 120%, rgba(253, 111, 144, 0.12), transparent 65%);
    opacity: 0.9;
    pointer-events: none;
}

.merch-checkout-module__header {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
    text-align: left;
}

.merch-checkout-module__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    background: rgba(16, 24, 40, 0.7);
    backdrop-filter: blur(12px);
    font-size: var(--font-size-sm);
    letter-spacing: var(--letter-spacing-normal);
    text-transform: uppercase;
    color: var(--hawk-ice);
    border: 1px solid var(--glass-border);
}

.merch-checkout-layout {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2.5rem;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(0, 320px);
    align-items: start;
}

.merch-checkout-progress {
    position: relative;
}

.merch-checkout-progress__list {
    display: grid;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.merch-checkout-progress__item {
    position: relative;
}

.merch-checkout-progress__button {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.68);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.merch-checkout-progress__button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.merch-checkout-progress__item.is-active .merch-checkout-progress__button {
    border-color: rgba(80, 184, 255, 0.65);
    color: #ffffff;
    transform: translateX(8px);
    box-shadow: 0 8px 24px rgba(80, 184, 255, 0.18);
}

.merch-checkout-progress__item.is-complete .merch-checkout-progress__button {
    border-color: rgba(67, 193, 142, 0.65);
    color: #ffffff;
}

.merch-checkout-progress__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(15, 23, 42, 0.7);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: inherit;
}

.merch-checkout-body {
    position: relative;
}

.merch-checkout-stage {
    display: none;
    padding: 1.25rem 0 0;
}

.merch-checkout-stage.is-active {
    display: block;
    animation: merchFadeIn 0.35s ease;
}

.merch-checkout-stage__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.merch-checkout-stage__subtitle {
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.95rem;
    line-height: 1.6;
}

.merch-product-card {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.25rem;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 1.5rem;
}

.merch-product-card__media {
    position: relative;
    border-radius: 16px;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.1), transparent 65%), linear-gradient(140deg, rgba(120, 162, 255, 0.45), rgba(22, 22, 37, 0.95));
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    max-height: 120px;
    padding: 0.25rem;
}

/* Override product card image styling */
.glass-effect.rounded-2xl .product-card__image,
.product-card .product-card__image {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    padding: 0.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    aspect-ratio: none !important;
}

/* Override any padding classes on product card image */
.product-card__image.p-8 {
    padding: 0.25rem !important;
}

.glass-effect .product-card__image {
    padding: 0.25rem !important;
}

.merch-product-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.merch-product-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.merch-product-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.merch-product-card__title {
    font-size: 1.2rem;
    font-weight: 700;
}

.merch-product-card__price {
    font-weight: 700;
    font-size: 1.1rem;
    color: rgba(111, 203, 255, 0.95);
}

.merch-product-card__description {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    font-size: 0.95rem;
}

.merch-product-card__status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(111, 203, 255, 0.9);
}

.merch-form {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
}

.merch-form__fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.merch-form__legend {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.merch-size-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: 0.75rem;
}

.merch-size-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 0.65rem 0.5rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    text-transform: uppercase;
}

.merch-size-option span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.merch-size-option input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.merch-size-option:focus-within,
.merch-size-option:hover {
    border-color: rgba(111, 203, 255, 0.6);
    box-shadow: 0 10px 25px rgba(111, 203, 255, 0.12);
}

.merch-size-option input:checked + span {
    color: #0f172a;
    font-weight: 700;
    background: rgba(111, 203, 255, 0.92);
    box-shadow: 0 14px 32px rgba(111, 203, 255, 0.2);
}

.merch-size-option input:checked + span::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 12px;
    border: 2px solid rgba(14, 116, 144, 0.35);
    pointer-events: none;
}

.merch-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.merch-form__field--inline {
    max-width: 140px;
}

.merch-form__field--split {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.merch-form__label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.65);
}

.merch-input,
.merch-select {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.75rem 0.85rem;
    color: #ffffff;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.merch-input:focus,
.merch-select:focus {
    outline: none;
    border-color: rgba(111, 203, 255, 0.65);
    box-shadow: 0 0 0 3px rgba(111, 203, 255, 0.25);
}

.merch-select-wrapper {
    position: relative;
}

.merch-select-wrapper::after {
    content: '\\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    inset: 0 0 0 auto;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: rgba(255, 255, 255, 0.5);
}

.merch-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 0.5rem;
}

.merch-form__actions--split {
    justify-content: space-between;
}

.merch-shipping-options {
    display: grid;
    gap: 0.85rem;
}

.merch-shipping-option {
    display: flex;
    align-items: stretch;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.merch-shipping-option input {
    position: absolute;
    opacity: 0;
    inset: 0;
}

.merch-shipping-option__content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.9rem 1rem;
}

.merch-shipping-option__title {
    font-weight: 600;
    color: #ffffff;
}

.merch-shipping-option__meta {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
}

.merch-shipping-option:hover,
.merch-shipping-option:focus-within {
    border-color: rgba(111, 203, 255, 0.6);
    transform: translateY(-2px);
}

.merch-shipping-option input:checked ~ .merch-shipping-option__content::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    border: 2px solid rgba(111, 203, 255, 0.75);
    pointer-events: none;
}

.merch-checkout-summary {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.merch-summary-card {
    border-radius: 20px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
}

.merch-summary-card__title {
    font-size: 1.1rem;
    font-weight: 700;
}

.merch-summary-card__product {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.merch-summary-card__product-name {
    max-width: 60%;
}

.merch-summary-card__product-price {
    color: rgba(111, 203, 255, 0.95);
}

.merch-summary-card__meta,
.merch-summary-card__totals {
    display: grid;
    gap: 0.75rem;
}

.merch-summary-card__row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.merch-summary-card__row--total {
    font-weight: 700;
    font-size: 1rem;
    color: #ffffff;
}

.merch-review-card {
    border-radius: 18px;
    padding: 1.35rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1.5rem;
}

.merch-review-list {
    display: grid;
    gap: 0.9rem;
}

.merch-review-row {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 1rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
}

.merch-review-row dt {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
}

.merch-checkout-success {
    margin-top: 2rem;
    padding: 1.5rem;
    border-radius: 18px;
    border: 1px solid rgba(67, 193, 142, 0.35);
    background: rgba(20, 46, 38, 0.7);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.merch-checkout-success__icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    background: rgba(67, 193, 142, 0.18);
    color: #3ddc97;
    font-size: 1.5rem;
}

.merch-checkout-success__title {
    font-size: 1.3rem;
    font-weight: 700;
}

.merch-checkout-success__copy {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
    line-height: 1.6;
}

.merch-checkout-success__order {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.merch-summary-footnote {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.merch-summary-footnote strong {
    color: #ffffff;
}

@keyframes merchFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1200px) {
    .merch-checkout-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .merch-checkout-progress__button {
        justify-content: flex-start;
    }

    .merch-checkout-summary {
        order: 3;
    }
}

@media (max-width: 768px) {
    .merch-product-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .merch-review-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.35rem;
    }

    .merch-checkout-progress__list {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }

    .merch-checkout-progress__button {
        flex-direction: column;
        align-items: flex-start;
        min-width: 220px;
    }

    .merch-checkout-stage {
        padding-top: 0.5rem;
    }
}

@media (max-width: 768px) {
    .merch-hero {
        padding: 3rem 2rem;
        min-height: auto;
    }

    .merch-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .merch-alpha-shop__header {
        text-align: center;
    }

    .merch-alpha-card {
        padding: 1.75rem 1.5rem 1.9rem;
    }

    .section-title {
        font-size: 2.1rem;
    }
}

@media (max-width: 640px) {
    .merch-callouts {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .merch-status-grid,
    .merch-milestone-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .merch-alpha-shop__grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .merch-alpha-card__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .merch-alpha-card__cta {
        justify-content: space-between;
    }
}

/* Music request bay */
.music-hero {
    position: relative;
    isolation: isolate;
}

.music-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin: 0;
}

.music-meta-grid dt {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.7);
    margin-bottom: 0.4rem;
}

.music-meta-grid dd {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #f8fafc;
}

.music-hero-art {
    width: 160px;
    height: 160px;
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid rgba(56, 189, 248, 0.35);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.45);
}

.music-hero-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.music-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1.2rem;
    border-radius: 1.25rem;
    font-size: 0.95rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.75);
}

.music-alert i {
    margin-top: 0.2rem;
}

.music-alert.success {
    border-color: rgba(16, 185, 129, 0.35);
    color: rgba(187, 247, 208, 0.9);
}

.music-alert.error {
    border-color: rgba(248, 113, 113, 0.35);
    color: rgba(254, 202, 202, 0.9);
}

.music-icon-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: rgba(56, 189, 248, 0.18);
    color: rgba(125, 211, 252, 0.95);
    box-shadow: 0 12px 28px rgba(14, 165, 233, 0.25);
}

.music-secondary-link {
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.85);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.music-secondary-link:hover {
    color: rgba(56, 189, 248, 0.95);
}

.music-login-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.85rem;
    color: rgba(15, 23, 42, 0.92);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.95), rgba(59, 130, 246, 0.95));
    box-shadow: 0 18px 28px rgba(14, 165, 233, 0.35);
    text-decoration: none;
    transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.music-login-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 34px rgba(59, 130, 246, 0.45);
    filter: brightness(1.05);
}

.music-login-button:focus-visible {
    outline: 2px solid rgba(191, 219, 254, 0.9);
    outline-offset: 3px;
}

.music-login-button i {
    font-size: 1.05rem;
}

.music-login-button-label {
    letter-spacing: inherit;
}

.music-layout {
    align-items: stretch;
}

@media (min-width: 1024px) {
    .music-layout {
        align-items: flex-start;
    }
}

.music-sticky-stack {
    position: static;
}

@media (min-width: 1024px) {
    .music-sticky-stack {
        position: sticky;
        top: 6.5rem;
    }
}

.music-history-summary {
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.7);
}

.music-queue-highlights {
    display: grid;
    gap: 0.85rem;
    margin: 0;
}

@media (min-width: 640px) {
    .music-queue-highlights {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

.music-queue-highlight {
    background: rgba(11, 18, 32, 0.78);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 1.1rem;
    padding: 0.85rem 1rem 1rem;
}

.music-queue-highlight dt {
    margin: 0;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.75);
}

.music-queue-highlight dd {
    margin: 0.45rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.music-queue-highlight-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #f8fafc;
}

.music-queue-highlight-meta {
    margin: 0;
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.75);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    align-items: center;
}

.music-queue-highlight-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.music-pagination-wrapper {
    margin-top: 0.25rem;
}

.music-pagination-wrapper--active {
    margin-top: 0.75rem;
}

.music-pagination {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 1.2rem;
    background: rgba(10, 20, 34, 0.78);
    border: 1px solid rgba(56, 189, 248, 0.18);
}

@media (min-width: 640px) {
    .music-pagination {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.music-pagination-summary {
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.7);
}

.music-pagination-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

.music-pagination-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: rgba(226, 232, 240, 0.85);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.music-pagination-button:hover {
    color: #f8fafc;
    border-color: rgba(56, 189, 248, 0.55);
    background: rgba(14, 116, 144, 0.25);
}

.music-pagination-button.is-disabled {
    border-color: rgba(148, 163, 184, 0.18);
    color: rgba(148, 163, 184, 0.45);
    background: rgba(15, 23, 42, 0.4);
    pointer-events: none;
    cursor: default;
}

.music-pagination-button i {
    font-size: 0.85rem;
}

.music-pagination-page {
    font-size: 0.85rem;
    color: rgba(226, 232, 240, 0.85);
}

.music-now-playing {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.music-now-artwork {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.65);
    object-fit: cover;
    box-shadow: 0 18px 38px rgba(2, 6, 23, 0.65);
}

.music-now-artwork.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(148, 163, 184, 0.75);
    font-size: 1.75rem;
}

.music-track-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: #f8fafc;
    margin: 0;
}

.music-track-artists {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(148, 163, 184, 0.9);
}

.music-track-meta {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.7);
}

.music-progress {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: 9999px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}

.music-progress-bar {
    position: absolute;
    inset: 0;
    width: var(--progress, 0%);
    background: linear-gradient(120deg, rgba(56, 189, 248, 0.85), rgba(249, 115, 22, 0.85));
    transition: width 0.35s ease;
}

.music-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    border-radius: 1.75rem;
    border: 1px dashed rgba(148, 163, 184, 0.25);
    color: rgba(148, 163, 184, 0.8);
}

.music-empty-state i {
    font-size: 1.75rem;
    color: rgba(56, 189, 248, 0.65);
}

.music-history-list,
.music-queue-list,
.music-search-results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.music-history-track {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.music-history-title {
    margin: 0;
    font-weight: 600;
    color: #f8fafc;
}

.music-history-meta {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.75);
}

.music-history-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

.music-history-user {
    font-size: 0.85rem;
    color: rgba(125, 211, 252, 0.95);
}

.music-history-time {
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.6);
}

.music-queue-list li {
    border-radius: 1.75rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(11, 18, 32, 0.7);
    box-shadow: 0 12px 30px rgba(2, 6, 23, 0.45);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.music-queue-list li.playing {
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 14px 34px rgba(56, 189, 248, 0.25);
}

.music-queue-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.music-queue-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #f8fafc;
}

.music-queue-header p {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.75);
}

.music-queue-duration {
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.7);
}

.music-queue-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.music-queue-user {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: rgba(125, 211, 252, 0.9);
}

.music-queue-user i {
    color: rgba(56, 189, 248, 0.85);
}

.music-queue-time {
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.6);
}

.music-queue-status {
    margin-left: auto;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(148, 163, 184, 0.12);
    color: rgba(148, 163, 184, 0.75);
}

.music-queue-status.playing {
    background: rgba(56, 189, 248, 0.25);
    color: rgba(125, 211, 252, 0.95);
}

.music-queue-status.played {
    background: rgba(148, 163, 184, 0.08);
}

.music-queue-status.operational {
    background: rgba(34, 197, 94, 0.25);
    color: rgba(187, 247, 208, 0.9);
}

.music-queue-status.rebuilding {
    background: rgba(249, 115, 22, 0.22);
    color: rgba(254, 215, 170, 0.9);
}

.music-queue-status.upgrading {
    background: rgba(129, 140, 248, 0.22);
    color: rgba(196, 181, 253, 0.95);
}

.music-queue-status.reviewing {
    background: rgba(148, 163, 184, 0.12);
    color: rgba(148, 163, 184, 0.8);
}

.music-search-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.65);
}

.music-search-form input {
    flex: 1;
    border: none;
    background: transparent;
    color: #e2e8f0;
    font-size: 0.95rem;
}

.music-search-form input:focus {
    outline: none;
}

.music-search-form button {
    border: none;
    background: rgba(56, 189, 248, 0.18);
    color: rgba(125, 211, 252, 0.95);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.music-search-track {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.25rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(11, 18, 32, 0.75);
}

.music-search-meta h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #f8fafc;
}

.music-search-meta p {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.75);
}

.music-search-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.music-request-button {
    border: none;
    border-radius: 9999px;
    padding: 0.5rem 1.1rem;
    background: linear-gradient(120deg, rgba(56, 189, 248, 0.8), rgba(249, 115, 22, 0.8));
    color: #020617;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.music-request-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(249, 115, 22, 0.35);
}

@media (max-width: 1024px) {
    .music-now-playing {
        flex-direction: column;
        align-items: flex-start;
    }

    .music-now-artwork {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 640px) {
    .music-hero-art {
        width: 120px;
        height: 120px;
    }

    .music-history-track,
    .music-search-track,
    .music-queue-list li {
        padding: 1rem;
    }

    .music-queue-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .music-queue-duration {
        margin-top: 0.4rem;
    }
}

/* Maintenance hangar */
.maintenance-container {
    max-width: 72rem;
    margin: 0 auto;
    padding: clamp(2.5rem, 4vw, 4rem) clamp(1.5rem, 4vw, 3rem) clamp(3.5rem, 5vw, 4.5rem);
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 6vw, 3.75rem);
}

.maintenance-panel {
    border-radius: 1.75rem;
    padding: clamp(1.75rem, 3.5vw, 2.75rem);
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.maintenance-hero-panel {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(94, 234, 212, 0.22), transparent 55%),
        radial-gradient(circle at bottom left, rgba(192, 132, 252, 0.18), transparent 60%),
        linear-gradient(165deg, rgba(6, 18, 44, 0.88), rgba(3, 9, 24, 0.82));
    border: 1px solid rgba(129, 140, 248, 0.22);
    box-shadow: 0 42px 90px rgba(3, 9, 24, 0.65);
    animation: auroraFlow 30s ease-in-out infinite;
}

.maintenance-hero-panel::after {
    content: '';
    position: absolute;
    inset: auto -35% -70% 40%;
    width: clamp(20rem, 55vw, 36rem);
    aspect-ratio: 1 / 1;
    background: radial-gradient(circle, rgba(94, 234, 212, 0.24), transparent 70%);
    filter: blur(1.35rem);
    opacity: 0.5;
    pointer-events: none;
    transform: none;
    height: auto;
    z-index: 0;
    animation: pulseBloom 22s ease-in-out infinite;
}

.maintenance-hero-panel::before {
    content: '';
    position: absolute;
    inset: -40% auto auto -35%;
    width: clamp(18rem, 45vw, 32rem);
    aspect-ratio: 1 / 1;
    background: radial-gradient(circle, rgba(192, 132, 252, 0.28), transparent 65%);
    filter: blur(0.6rem);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
    animation: pulseBloom 28s ease-in-out infinite reverse;
}

.maintenance-hero-grid {
    position: relative;
    display: grid;
    gap: clamp(2rem, 5vw, 3rem);
    z-index: 1;
}

.maintenance-hero-body {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3.5vw, 2.25rem);
}

.maintenance-hero-copy {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 3vw, 1.9rem);
}

.maintenance-status-cluster {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.maintenance-hero-footer {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
}

.maintenance-error-banner {
    width: 100%;
    margin: 0;
}

.maintenance-error-banner p {
    margin: 0;
}

.maintenance-kicker {
    text-transform: uppercase;
    letter-spacing: 0.5em;
    font-size: 0.72rem;
    color: rgba(191, 219, 254, 0.6);
}

.maintenance-headline {
    font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 4.2vw, 3.4rem);
    line-height: 1.1;
    margin: 0;
}

.maintenance-summary {
    margin: 0;
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: rgba(191, 219, 254, 0.85);
    line-height: 1.65;
}

.maintenance-progress-card {
    border-radius: 1.5rem;
    padding: clamp(1.75rem, 3.5vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
    backdrop-filter: blur(16px);
    background: linear-gradient(160deg, rgba(6, 18, 44, 0.85), rgba(3, 9, 24, 0.72));
    border: 1px solid rgba(129, 140, 248, 0.24);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.home-maintenance-card {
    gap: 1.5rem;
    text-align: left;
}

.home-maintenance-briefing {
    display: grid;
    gap: 0.75rem;
}

.home-maintenance-phase {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(226, 247, 255, 0.9);
    background: linear-gradient(120deg, rgba(129, 140, 248, 0.26), rgba(56, 189, 248, 0.18));
    border: 1px solid rgba(129, 140, 248, 0.32);
    border-radius: 9999px;
    padding: 0.45rem 0.9rem;
}

.home-maintenance-phase i {
    color: rgba(94, 234, 212, 0.85);
}

.home-maintenance-summary {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(226, 232, 240, 0.88);
}

.home-maintenance-summary--muted {
    color: rgba(226, 232, 240, 0.6);
}

.home-maintenance-card .maintenance-progress-meta {
    text-align: left;
}

.home-maintenance-error {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #fca5a5;
}

.home-maintenance-error i {
    color: #f87171;
}

.maintenance-progress-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.maintenance-meter-label {
    text-transform: uppercase;
    letter-spacing: 0.35em;
    font-size: 0.72rem;
    color: rgba(191, 219, 254, 0.6);
    margin: 0;
}

.maintenance-meter-value {
    margin: 0;
    font-size: clamp(2.25rem, 3.8vw, 2.9rem);
    font-weight: 600;
    color: #fff;
}

.maintenance-cta-group {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.maintenance-cta {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 9999px;
    padding: 0.85rem 1.75rem;
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.maintenance-cta:hover,
.maintenance-cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 22px 40px rgba(15, 23, 42, 0.45);
}

.maintenance-progress-meta {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

.maintenance-progress-meta-item {
    display: grid;
    gap: 0.35rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(30, 41, 59, 0.6);
}

.maintenance-progress-meta-item dt {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.8);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.maintenance-progress-meta-item dt i {
    color: rgba(125, 211, 252, 0.85);
}

.maintenance-progress-meta-item dd {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 500;
    color: rgba(226, 232, 240, 0.95);
}

.maintenance-progress-card::before {
    content: '';
    position: absolute;
    inset: -30% -35% auto auto;
    width: clamp(12rem, 35vw, 18rem);
    aspect-ratio: 1 / 1;
    background: radial-gradient(circle, rgba(250, 204, 21, 0.16), transparent 70%);
    filter: blur(0.8rem);
    opacity: 0.6;
    pointer-events: none;
    z-index: -1;
}

.maintenance-main-grid {
    display: grid;
    gap: clamp(1.75rem, 5vw, 2.5rem);
}

.maintenance-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.maintenance-panel-header--wrap {
    flex-wrap: wrap;
}

.maintenance-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.maintenance-header-meta {
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 0.72rem;
    color: rgba(191, 219, 254, 0.6);
}

.maintenance-side-stack {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 4vw, 2rem);
}

.maintenance-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: rgba(191, 219, 254, 0.75);
}

.maintenance-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.maintenance-list i {
    margin-top: 0.15rem;
    color: rgba(191, 219, 254, 0.85);
}

.maintenance-list span {
    flex: 1;
}

.maintenance-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.maintenance-timeline-details {
    margin: 0.75rem 0 0;
    font-size: 0.95rem;
    color: rgba(191, 219, 254, 0.75);
    line-height: 1.6;
}

.maintenance-support-card h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}

.maintenance-support-card p {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(191, 219, 254, 0.7);
    line-height: 1.6;
}

.maintenance-support-card a i {
    color: rgba(191, 219, 254, 0.85);
}

@media (min-width: 768px) {
    .maintenance-hero-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        align-items: stretch;
    }

    .maintenance-hero-footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.25rem;
    }

    .maintenance-cta-group {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .maintenance-cta {
        width: auto;
        flex: 1 1 12rem;
    }
}

@media (min-width: 1024px) {
    .maintenance-hero-grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
        gap: clamp(3rem, 4vw, 4rem);
    }

    .maintenance-hero-copy {
        max-width: 38rem;
    }

    .maintenance-progress-card {
        margin-top: 0.5rem;
    }

    .maintenance-main-grid {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        align-items: start;
    }
}

.maintenance-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.maintenance-card {
    border-radius: 1.75rem;
    padding: 1.5rem;
    background: rgba(11, 18, 32, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.18);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.maintenance-card h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #f8fafc;
}

.maintenance-card p {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(148, 163, 184, 0.8);
}

.maintenance-progress-track {
    height: 8px;
    border-radius: 9999px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}

.maintenance-progress-fill {
    height: 100%;
    width: var(--progress, 0%);
    background: linear-gradient(120deg, rgba(56, 189, 248, 0.85), rgba(250, 204, 21, 0.85));
}

.maintenance-timeline {
    display: grid;
    gap: 1.25rem;
}

.maintenance-timeline article {
    border-left: 2px solid rgba(56, 189, 248, 0.35);
    padding-left: 1.25rem;
    position: relative;
}

.maintenance-timeline article::before {
    content: '';
    position: absolute;
    left: -11px;
    top: 0.4rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    background: rgba(56, 189, 248, 0.85);
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.18);
}

.maintenance-timeline h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #f8fafc;
}

.maintenance-timeline time {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.6);
}

.maintenance-support-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.maintenance-support-card {
    border-radius: 1.75rem;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.18);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.maintenance-support-card a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(125, 211, 252, 0.9);
}

.maintenance-status-badges {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.maintenance-status-badges span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    border-radius: 9999px;
    border: 1px solid rgba(56, 189, 248, 0.25);
    background: rgba(15, 23, 42, 0.6);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Geo Access Restricted Page ------------------------------------------------ */

body.restricted-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding: clamp(3rem, 5vw, 5rem) clamp(1.25rem, 4vw, 2.5rem);
    position: relative;
    isolation: isolate;
}

.restricted-shell {
    margin: 0 auto;
    width: 100%;
    max-width: 1024px;
    display: flex;
    flex-direction: column;
    gap: clamp(2.75rem, 5vw, 3.5rem);
    position: relative;
    z-index: 2;
}


.restricted-main {
    position: relative;
    z-index: 2;
}

.site-header.restricted-site-header {
    position: static;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.site-header.restricted-site-header .inner {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(1.25rem, 4vw, 2.25rem);
    text-align: left;
}

.restricted-header-copy {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.restricted-header-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.88);
}

.restricted-header-eyebrow::before {
    content: '';
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 999px;
    background: radial-gradient(circle at center, rgba(56, 189, 248, 0.9), rgba(56, 189, 248, 0.15));
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.45);
}

.restricted-header-title {
    margin: 0;
    font-size: clamp(2rem, 4vw, 2.6rem);
    letter-spacing: 0.08em;
}

.restricted-header-summary {
    margin: 0;
    color: rgba(203, 213, 225, 0.85);
    font-size: 0.95rem;
    line-height: 1.6;
}

.restricted-header-actions {
    justify-content: flex-end;
}

.restricted-header-actions .nav-cta {
    white-space: nowrap;
}

.restricted-card {
    position: relative;
    padding: clamp(2.25rem, 5vw, 3.5rem);
    border-radius: 32px;
    background: var(--glass-strong, rgba(5, 15, 36, 0.92));
    background: color-mix(in srgb, var(--glass-strong) 92%, rgba(8, 47, 73, 0.25));
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow:
        0 28px 120px rgba(2, 6, 23, 0.55),
        0 0 0 1px rgba(148, 163, 184, 0.12) inset,
        0 0 0 1px rgba(56, 189, 248, 0.08);
    backdrop-filter: blur(18px);
    overflow: hidden;
}

.restricted-card::before,
.restricted-card::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(18px);
    opacity: 0.75;
    transform: translateZ(0);
    pointer-events: none;
}

.restricted-card::before {
    inset: -42% auto auto -18%;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle at center, rgba(94, 234, 212, 0.32), transparent 68%);
    animation: restrictedOrb 32s ease-in-out infinite;
}

.restricted-card::after {
    inset: auto -28% -52% auto;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle at center, rgba(168, 85, 247, 0.28), transparent 72%);
    animation: restrictedOrb 40s ease-in-out infinite reverse;
}

.restricted-card h2 {
    margin: 0;
    font-size: clamp(2.25rem, 6vw, 3.5rem);
}

.restricted-content {
    position: relative;
    display: grid;
    gap: clamp(1.6rem, 3vw, 2.25rem);
    text-align: center;
}

.restricted-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 0.65rem 1.75rem;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.14);
    color: var(--hawk-sky);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    box-shadow: 0 12px 30px rgba(56, 189, 248, 0.22);
}

.restricted-status i {
    color: var(--hawk-azure);
}

.restricted-content h1 {
    margin: 0;
    font-size: clamp(2.25rem, 6vw, 3.5rem);
    font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: -0.01em;
}

.restricted-lede,
.restricted-copy {
    margin: 0;
    line-height: 1.8;
    color: rgba(226, 232, 240, 0.9);
}

.restricted-lede {
    font-size: 1.05rem;
    font-weight: 600;
    color: rgba(224, 231, 255, 0.92);
}

.restricted-meta {
    display: grid;
    gap: 1rem;
    justify-items: center;
}

.restricted-meta__item {
    display: grid;
    gap: 0.35rem;
}

.restricted-meta__label {
    font-size: 0.75rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.78);
}

.restricted-meta__value {
    font-weight: 600;
    color: var(--hawk-ice);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.98rem;
}

.restricted-meta__value i {
    color: var(--hawk-azure);
}

.restricted-meta__badge {
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(129, 140, 248, 0.18);
    border: 1px solid rgba(129, 140, 248, 0.32);
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    letter-spacing: 0.08em;
}

.restricted-intel {
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
    margin: clamp(1.5rem, 3vw, 2rem) 0 0;
    text-align: left;
}

.restricted-intel__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(0.9rem, 1.8vw, 1.25rem);
    padding: clamp(0.9rem, 2vw, 1.25rem);
    border-radius: 1.5rem;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.32);
}

.restricted-intel__icon {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), rgba(16, 185, 129, 0.35));
    color: var(--hawk-ice);
    box-shadow: 0 12px 28px rgba(59, 130, 246, 0.25);
}

.restricted-intel__title {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}

.restricted-intel__summary {
    margin: 0;
    color: rgba(226, 232, 240, 0.85);
    font-size: 0.95rem;
    line-height: 1.7;
}

.restricted-actions {
    display: flex;
    justify-content: center;
    margin-top: clamp(1.5rem, 3vw, 2rem);
}

.restricted-button {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.95rem 2.15rem;
    border-radius: 999px;
    font-weight: 600;
    background: var(--aurora-highlight);
    color: var(--hawk-ice);
    box-shadow: var(--aurora-glow);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.restricted-button:hover,
.restricted-button:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 48px 140px rgba(56, 189, 248, 0.45);
    outline: none;
}

.restricted-updates {
    margin-top: clamp(2rem, 4vw, 2.5rem);
    padding: clamp(1.4rem, 3vw, 1.75rem);
    border-radius: 1.75rem;
    background: rgba(15, 23, 42, 0.58);
    border: 1px solid rgba(56, 189, 248, 0.18);
    box-shadow: 0 18px 55px rgba(15, 23, 42, 0.35);
    text-align: left;
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.4rem);
}

.restricted-updates__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

.restricted-updates__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.32);
    color: var(--hawk-ice);
}

.restricted-updates__chip i {
    color: var(--hawk-azure);
}

.restricted-updates__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: clamp(0.85rem, 2vw, 1.25rem);
}

.restricted-updates__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
    color: rgba(226, 232, 240, 0.88);
    font-size: 0.95rem;
    line-height: 1.6;
}

.restricted-updates__item i {
    color: var(--hawk-azure);
    font-size: 1rem;
    margin-top: 0.25rem;
}

.footer.footer--restricted {
    position: relative;
    z-index: 2;
    margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
    width: 100%;
    max-width: 1024px;
}

.footer.footer--restricted .footer-inner {
    margin: 0;
}

.restricted-aurora {
    position: fixed;
    inset: auto auto auto auto;
    width: 32rem;
    height: 32rem;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(94, 234, 212, 0.25), transparent 70%);
    mix-blend-mode: screen;
    filter: blur(68px);
    opacity: 0.85;
    pointer-events: none;
    z-index: 1;
    animation: restrictedPulse 28s ease-in-out infinite;
}

.restricted-aurora--left {
    top: 8%;
    left: -12%;
}

.restricted-aurora--right {
    bottom: -16%;
    right: -10%;
    background: radial-gradient(circle at center, rgba(168, 85, 247, 0.28), transparent 72%);
    animation-delay: 6s;
}

@keyframes restrictedPulse {
    0% {
        transform: scale(0.92) translate3d(0, 0, 0);
        opacity: 0.75;
    }

    50% {
        transform: scale(1.12) translate3d(2%, -1%, 0);
        opacity: 0.95;
    }

    100% {
        transform: scale(0.92) translate3d(0, 0, 0);
        opacity: 0.75;
    }
}

@keyframes restrictedOrb {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(8%, 6%, 0) scale(1.06);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (max-width: 768px) {
    body.restricted-page {
        padding: clamp(2.5rem, 6vw, 3rem) clamp(1rem, 6vw, 1.5rem);
    }

    .restricted-card {
        border-radius: 24px;
        padding: clamp(2rem, 6vw, 2.5rem);
    }

    .site-header.restricted-site-header .inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.5rem;
    }

    .restricted-header-copy {
        align-items: center;
    }

    .restricted-header-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .restricted-card::before,
    .restricted-card::after {
        display: none;
    }

    .restricted-meta {
        gap: 0.75rem;
    }

    .restricted-meta__item {
        gap: 0.25rem;
    }
}

@media (max-width: 480px) {
    .restricted-button {
        width: 100%;
        justify-content: center;
    }

    .restricted-header-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .restricted-header-actions .nav-action-link,
    .restricted-header-actions .nav-cta {
        width: 100%;
    }

    .restricted-meta__label {
        letter-spacing: 0.24em;
    }
}

.tip-page .hawk-panel {
    background: rgba(8, 15, 30, 0.85);
    backdrop-filter: blur(12px);
}

.tip-hero {
    min-height: 18rem;
    position: relative;
    padding: 3.5rem;
    display: flex;
    align-items: center;
    color: #f9fafb;
    overflow: hidden;
}

.tip-hero-background {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.45), transparent 55%),
        radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.4), transparent 60%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.6));
    pointer-events: none;
}

.tip-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(59, 130, 246, 0.2), transparent);
    mix-blend-mode: screen;
}

.tip-hero-content {
    position: relative;
    max-width: 40rem;
    z-index: 1;
}

.tip-hero-pill {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    padding: 0.35rem 0.9rem;
    border-radius: 9999px;
    background: rgba(59, 130, 246, 0.25);
    border: 1px solid rgba(148, 163, 184, 0.35);
    margin-bottom: 1.5rem;
}

.tip-hero h1 {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    margin-bottom: 1rem;
}

.tip-hero-lead {
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: rgba(226, 232, 240, 0.95);
    margin-bottom: 2rem;
}

.tip-hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.5rem;
    margin: 0;
}

.tip-hero-stats dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(148, 163, 184, 0.9);
}

.tip-hero-stats dd {
    font-size: 1rem;
    margin: 0.35rem 0 0;
    font-weight: 600;
    color: #f8fafc;
}

.tip-section-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2.25rem;
}

.tip-section-header .section-lead {
    max-width: 38rem;
}

.tip-goals {
    background: linear-gradient(165deg, rgba(15, 23, 42, 0.9), rgba(79, 70, 229, 0.25));
}

.tip-goals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.75rem;
}

.tip-goals-grid-three {
    gap: 1.5rem;
}

.tip-goals-grid-three .tip-goal-card {
    padding: 1.65rem;
    gap: 1.1rem;
}

.tip-goals-grid-three .tip-goal-icon {
    width: 2.65rem;
    height: 2.65rem;
    font-size: 1.15rem;
    border-radius: 0.85rem;
}

.tip-goals-grid-three .tip-goal-header h3 {
    font-size: 1.15rem;
}

.tip-goals-grid-three .tip-goal-stats dd {
    font-size: 1.25rem;
}

.tip-goal-card {
    position: relative;
    border-radius: 1.5rem;
    padding: 2rem;
    background: rgba(8, 13, 28, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    min-height: 100%;
}

.tip-goal-card-primary {
    border-color: rgba(16, 185, 129, 0.4);
    background: linear-gradient(150deg, rgba(16, 185, 129, 0.18), rgba(6, 11, 25, 0.85));
}

.tip-goal-card-secondary {
    border-color: rgba(129, 140, 248, 0.45);
    background: linear-gradient(150deg, rgba(99, 102, 241, 0.2), rgba(11, 16, 33, 0.88));
}

.tip-goal-card-accent {
    border-color: rgba(251, 191, 36, 0.45);
    background: linear-gradient(150deg, rgba(251, 191, 36, 0.18), rgba(12, 16, 30, 0.9));
}

.tip-goal-header {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
}

.tip-goal-header h3 {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.tip-goal-header p {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(226, 232, 240, 0.85);
}

.tip-goal-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(148, 163, 184, 0.2);
    color: #f8fafc;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.tip-goal-card-primary .tip-goal-icon {
    background: rgba(16, 185, 129, 0.22);
    color: #bbf7d0;
}

.tip-goal-card-secondary .tip-goal-icon {
    background: rgba(129, 140, 248, 0.24);
    color: #c7d2fe;
}

.tip-goal-card-accent .tip-goal-icon {
    background: rgba(251, 191, 36, 0.25);
    color: #fde68a;
}

.tip-goal-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
}

.tip-goal-stats div {
    background: rgba(15, 23, 42, 0.65);
    border-radius: 1rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.tip-goal-stats dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(148, 163, 184, 0.8);
    margin: 0 0 0.35rem;
}

.tip-goal-stats dd {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #f8fafc;
}

.tip-goal-progress {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tip-goal-progress-bar {
    width: 100%;
    height: 0.75rem;
    border-radius: 999px;
    background: rgba(30, 41, 59, 0.8);
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.tip-goal-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.9), rgba(129, 140, 248, 0.85));
    border-radius: inherit;
    transition: width 0.35s ease;
}

.tip-goal-card-primary .tip-goal-progress-fill {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.95), rgba(45, 212, 191, 0.9));
}

.tip-goal-card-secondary .tip-goal-progress-fill {
    background: linear-gradient(90deg, rgba(129, 140, 248, 0.95), rgba(59, 130, 246, 0.9));
}

.tip-goal-card-accent .tip-goal-progress-fill {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.95), rgba(244, 114, 182, 0.88));
}

.tip-goal-progress-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 0.9rem;
    color: rgba(226, 232, 240, 0.85);
    gap: 0.75rem;
}

.tip-goal-progress-complete {
    color: rgba(248, 250, 252, 0.95);
    font-weight: 600;
}

.tip-goal-footnote {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.85);
}

.tip-goal-footnote-live {
    color: rgba(134, 239, 172, 0.95);
}

.tip-goal-footnote-manual {
    color: rgba(196, 181, 253, 0.95);
}

.tip-goal-footnote-error {
    color: rgba(252, 211, 77, 0.95);
}

.tip-goals-footnote {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.8);
}

.tip-stripe {
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.9), rgba(30, 64, 175, 0.65));
}

.tip-stripe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 2.5rem;
}

.tip-stripe-buy-button {
    background: rgba(8, 13, 28, 0.75);
    padding: 2rem;
    border-radius: 1.25rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tip-stripe-footnote {
    font-size: 0.875rem;
    color: rgba(191, 219, 254, 0.9);
}

.tip-stripe-presets {
    background: rgba(8, 13, 28, 0.65);
    border-radius: 1.25rem;
    padding: 2rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.tip-stripe-presets h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 1.25rem;
    color: rgba(191, 219, 254, 0.85);
}

.tip-amount-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

.tip-amount {
    width: 100%;
    text-align: left;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 0.9rem;
    padding: 1rem 1.25rem;
    color: #e2e8f0;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.tip-amount:hover,
.tip-amount:focus {
    border-color: rgba(59, 130, 246, 0.55);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(59, 130, 246, 0.25);
    outline: none;
    cursor: pointer;
}

.tip-amount.active {
    border-color: rgba(96, 165, 250, 0.9);
    background: rgba(30, 64, 175, 0.65);
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.3);
}

.tip-amount-value {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.tip-amount-desc {
    display: block;
    font-size: 0.9rem;
    color: rgba(191, 219, 254, 0.85);
}

.tip-stripe-link {
    background: rgba(15, 23, 42, 0.65);
    border-radius: 1.5rem;
    padding: 2.5rem;
    text-align: center;
    color: #e2e8f0;
}

.tip-stripe-unavailable {
    border: 1px dashed rgba(248, 250, 252, 0.35);
}

.tip-platform-grid {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.tip-platform-card {
    position: relative;
    border-radius: 1.35rem;
    padding: 2.25rem 2rem;
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tip-platform-card:hover,
.tip-platform-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.35);
}

.tip-platform-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.18);
    color: #bfdbfe;
    font-size: 1.25rem;
}

.tip-platform-primary .tip-platform-icon {
    background: rgba(59, 130, 246, 0.35);
    color: #eff6ff;
}

.tip-platform-secondary .tip-platform-icon {
    background: rgba(236, 72, 153, 0.28);
    color: #fce7f3;
}

.tip-platform-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #f8fafc;
}

.tip-platform-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(203, 213, 225, 0.95);
    flex: 1;
}

.tip-platform-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    color: #93c5fd;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.82rem;
}

.tip-platform-card:hover .tip-platform-cta i,
.tip-platform-card:focus-within .tip-platform-cta i {
    transform: translateX(2px);
}

.tip-platform-cta i {
    transition: transform 0.2s ease;
}

.tip-impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.75rem;
}

.tip-impact-card {
    background: rgba(15, 23, 42, 0.75);
    border-radius: 1.25rem;
    padding: 1.85rem;
    border: 1px solid rgba(96, 165, 250, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.tip-impact-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.85rem;
    background: rgba(37, 99, 235, 0.32);
    color: #dbeafe;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.tip-impact-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 0.75rem;
}

.tip-impact-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(203, 213, 225, 0.95);
}

.tip-roadmap {
    margin-top: 2.5rem;
    padding: 2rem;
    border-radius: 1.5rem;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(59, 130, 246, 0.18);
}

.tip-roadmap-title {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(148, 163, 184, 0.95);
    margin-bottom: 1.5rem;
}

.tip-roadmap ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.75rem;
}

.tip-roadmap li {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 1.25rem;
    align-items: flex-start;
}

.tip-roadmap-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: rgba(226, 232, 240, 0.95);
}

.tip-roadmap-status-live {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.45);
    color: #bbf7d0;
}

.tip-roadmap-status-next {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.45);
    color: #bfdbfe;
}

.tip-roadmap-status-stretch {
    background: rgba(236, 72, 153, 0.22);
    border-color: rgba(236, 72, 153, 0.45);
    color: #fbcfe8;
}

.tip-roadmap li strong {
    font-size: 1.05rem;
    display: block;
    margin-bottom: 0.5rem;
    color: #f8fafc;
}

.tip-roadmap li p {
    margin: 0;
    color: rgba(203, 213, 225, 0.92);
    line-height: 1.6;
}

.tip-faq {
    background: rgba(15, 23, 42, 0.72);
}

.tip-faq-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.tip-faq-grid details {
    background: rgba(15, 23, 42, 0.75);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.tip-faq-grid summary {
    font-weight: 700;
    cursor: pointer;
    color: #f8fafc;
    position: relative;
    padding-right: 1.75rem;
}

.tip-faq-grid summary::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 0.25rem;
    transition: transform 0.2s ease;
}

.tip-faq-grid details[open] summary::after {
    transform: rotate(180deg);
}

.tip-faq-grid p {
    margin: 0.75rem 0 0;
    color: rgba(203, 213, 225, 0.95);
    line-height: 1.6;
}

.tip-faq-footnote {
    margin-top: 2rem;
    font-size: 0.95rem;
    color: rgba(191, 219, 254, 0.85);
}

.tip-faq-footnote a {
    color: #93c5fd;
}

@media (max-width: 1024px) {
    .tip-hero {
        padding: 2.75rem;
    }

    .tip-roadmap li {
        grid-template-columns: 1fr;
    }

    .tip-roadmap-status {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .tip-hero {
        padding: 2rem;
        border-radius: 2rem;
    }

    .tip-hero-stats {
        grid-template-columns: 1fr;
    }

    .tip-stripe-grid {
        grid-template-columns: 1fr;
    }

    .tip-platform-grid {
        grid-template-columns: 1fr;
    }

    .tip-impact-grid {
        grid-template-columns: 1fr;
    }
}


/* Crew console + presence board */
.alert-success,
.alert-error {
    border-radius: 1.25rem;
    padding: 1rem 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.82);
    box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.15);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

.alert-success {
    border-color: rgba(74, 222, 128, 0.45);
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.3), rgba(22, 101, 52, 0.45));
    color: #bbf7d0;
    box-shadow: 0 12px 32px rgba(15, 118, 110, 0.25);
}

.alert-error {
    border-color: rgba(248, 113, 113, 0.48);
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.5), rgba(220, 38, 38, 0.28));
    color: #fecaca;
    box-shadow: 0 12px 32px rgba(153, 27, 27, 0.35);
}

.glass-form {
    display: grid;
    gap: 1.5rem;
}

.form-field {
    display: grid;
    gap: 0.65rem;
}

.form-label {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.24em;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.75);
}

.form-input,
.form-select {
    width: 100%;
    border-radius: 1rem;
    padding: 0.9rem 1.1rem;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #f8fafc;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: rgba(14, 165, 233, 0.65);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

.form-select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, rgba(148, 163, 184, 0.75) 50%),
        linear-gradient(135deg, rgba(148, 163, 184, 0.75) 50%, transparent 50%);
    background-position: calc(100% - 1.5rem) calc(50% - 0.3rem), calc(100% - 1.1rem) calc(50% - 0.3rem);
    background-size: 0.65rem 0.65rem, 0.65rem 0.65rem;
    background-repeat: no-repeat;
    padding-right: 2.75rem;
}

.bot-status-card {
    --status-accent: rgba(94, 234, 212, 0.35);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: min(100%, 36rem);
    margin: 2.5rem auto 0;
    padding: 1.75rem 2rem;
    border-radius: 1.75rem;
    border: 1px solid color-mix(in srgb, rgba(148, 163, 184, 0.32) 70%, var(--status-accent) 30%);
    background:
        linear-gradient(155deg, rgba(14, 20, 40, 0.88), rgba(3, 9, 26, 0.92)),
        linear-gradient(135deg, rgba(56, 189, 248, 0.14), rgba(129, 140, 248, 0.1), rgba(236, 72, 153, 0.16));
    box-shadow:
        var(--glass-shadow-outer),
        var(--glass-shadow-inner),
        var(--glass-shadow-inner-strong),
        0 22px 60px color-mix(in srgb, rgba(15, 23, 42, 0.68) 72%, var(--status-accent) 28%);
    backdrop-filter: blur(28px) saturate(140%);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: rgba(226, 232, 240, 0.94);
    text-align: center;
}

.bot-status-card::before,
.bot-status-card::after {
    content: '';
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.55;
    transition: opacity 0.6s var(--ease), transform 0.8s var(--ease);
    z-index: 0;
}

.bot-status-card::before {
    inset: -140% 45% 35% -45%;
    background:
        radial-gradient(circle at 35% 35%, rgba(56, 189, 248, 0.28), transparent 65%),
        radial-gradient(circle at 70% 60%, rgba(236, 72, 153, 0.24), transparent 70%),
        linear-gradient(120deg, rgba(226, 232, 240, 0.16), transparent 72%);
    transform: rotate(14deg);
}

.bot-status-card::after {
    inset: 25% -42% -130% 35%;
    background:
        radial-gradient(circle at center, color-mix(in srgb, rgba(148, 163, 184, 0.45) 35%, var(--status-accent) 65%), transparent 70%),
        radial-gradient(circle at 70% 30%, color-mix(in srgb, rgba(94, 234, 212, 0.35) 40%, var(--status-accent) 60%), transparent 68%);
    transform: rotate(-18deg);
}

.bot-status-card:hover,
.bot-status-card:focus-within {
    border-color: color-mix(in srgb, var(--glass-border) 60%, var(--status-accent) 40%);
    box-shadow:
        0 32px 68px rgba(2, 6, 23, 0.65),
        inset 0 1px 0 rgba(226, 232, 240, 0.12),
        inset 0 -1px 0 rgba(8, 47, 73, 0.58),
        0 0 45px color-mix(in srgb, rgba(14, 165, 233, 0.25) 45%, var(--status-accent) 55%);
}

.bot-status-card:hover::after,
.bot-status-card:focus-within::after {
    opacity: 0.75;
    transform: rotate(-12deg);
}

.bot-status-icon {
    font-size: 2.75rem;
    line-height: 1;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 12px 20px color-mix(in srgb, rgba(15, 23, 42, 0.65) 65%, var(--status-accent) 35%));
}

.bot-status-content {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    position: relative;
    z-index: 1;
    width: min(100%, 22rem);
}

.bot-status-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(241, 245, 249, 0.98);
    text-transform: uppercase;
}

.bot-status-description {
    margin: 0;
    font-size: 1rem;
    color: color-mix(in srgb, rgba(226, 232, 240, 0.78) 70%, var(--status-accent) 30%);
}

.bot-status-updated {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, rgba(148, 163, 184, 0.85) 65%, var(--status-accent) 35%);
}

.bot-status-online {
    --status-accent: rgba(34, 197, 94, 0.6);
}

.bot-status-reconnecting {
    --status-accent: rgba(250, 204, 21, 0.58);
}

.bot-status-offline {
    --status-accent: rgba(248, 113, 113, 0.6);
}

.bot-status-unknown {
    --status-accent: rgba(148, 163, 184, 0.48);
}

@media (min-width: 640px) {
    .bot-status-card {
        text-align: left;
        justify-content: flex-start;
    }

    .bot-status-content {
        align-items: flex-start;
    }
}

.presence-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0;
}

.presence-legend-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 18px rgba(15, 23, 42, 0.45);
}

.presence-legend-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.presence-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: rgba(15, 23, 42, 0.82);
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: 0.95rem;
    text-transform: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.presence-icon {
    font-size: 1.15rem;
    line-height: 1;
}

.presence-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.presence-description {
    margin: 0;
    color: rgba(226, 232, 240, 0.78);
    font-size: 0.95rem;
    line-height: 1.5;
}

.presence-state-active {
    border-color: rgba(74, 222, 128, 0.55);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.35), rgba(16, 185, 129, 0.32));
    color: #bbf7d0;
}

.presence-state-away {
    border-color: rgba(250, 204, 21, 0.55);
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.28), rgba(250, 204, 21, 0.22));
    color: #fef9c3;
}

.presence-state-busy {
    border-color: rgba(249, 115, 22, 0.55);
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.32), rgba(234, 88, 12, 0.28));
    color: #fed7aa;
}

.presence-state-break {
    border-color: rgba(248, 113, 113, 0.45);
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.28), rgba(248, 113, 113, 0.28));
    color: #fbcfe8;
}

.presence-state-offline {
    border-color: rgba(148, 163, 184, 0.45);
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.45), rgba(30, 41, 59, 0.6));
    color: rgba(203, 213, 225, 0.9);
}

.presence-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.presence-card {
    padding: 1.5rem;
    border-radius: 1.75rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.72);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    position: relative;
    overflow: hidden;
}

.presence-card::after {
    content: '';
    position: absolute;
    inset: auto -30% -60% auto;
    width: 14rem;
    height: 14rem;
    background: radial-gradient(circle at center, rgba(56, 189, 248, 0.18), transparent 65%);
    opacity: 0.5;
    filter: blur(32px);
}

.presence-avatar {
    flex: 0 0 auto;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 50%;
    border: 2px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.85);
    display: grid;
    place-items: center;
    overflow: hidden;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.65);
}

.presence-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.presence-details {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.65rem;
}

.presence-name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.presence-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
}

.presence-updated {
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.85);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.empty-state {
    border-radius: 2rem;
    padding: 2.5rem;
    border: 1px dashed rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.empty-state-icon {
    font-size: 2.5rem;
}

.empty-state-text h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.empty-state-text p {
    margin: 0;
    color: rgba(203, 213, 225, 0.82);
}

@media (max-width: 640px) {
    .presence-card {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .presence-avatar {
        width: 4rem;
        height: 4rem;
    }

    .presence-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .empty-state {
        flex-direction: column;
        text-align: center;
    }
}

/* Events */
.event-marquee-wrapper {
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.event-marquee {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    border-radius: 2.25rem;
    padding: 1.2rem 1.75rem;
    text-decoration: none;
    color: var(--hawk-ice);
    border: 1px solid rgba(59, 130, 246, 0.25);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.event-marquee:hover,
.event-marquee:focus {
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 24px 48px rgba(2, 6, 23, 0.45);
}

.event-marquee.event-marquee-empty {
    border-style: dashed;
    border-color: rgba(148, 163, 184, 0.35);
    color: rgba(226, 232, 240, 0.9);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.75), rgba(30, 41, 59, 0.6));
}

.event-marquee.event-marquee-empty:hover,
.event-marquee.event-marquee-empty:focus {
    border-color: rgba(148, 163, 184, 0.55);
}

.event-marquee-icon {
    position: relative;
    flex-shrink: 0;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 1.5rem;
    background: rgba(59, 130, 246, 0.15);
    color: var(--hawk-sky);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    overflow: hidden;
}

.event-marquee.event-marquee-empty .event-marquee-icon {
    background: rgba(148, 163, 184, 0.15);
    color: rgba(226, 232, 240, 0.85);
}

.event-marquee-icon-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(94, 234, 212, 0.4), transparent 65%);
    opacity: 0.7;
    pointer-events: none;
}

.event-marquee.event-marquee-empty .event-marquee-icon-glow {
    background: radial-gradient(circle at 30% 30%, rgba(148, 163, 184, 0.45), transparent 65%);
}

.event-marquee-content {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 0.35rem;
}

.event-marquee-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.event-marquee-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.event-marquee.event-marquee-empty .event-marquee-badge {
    color: rgba(226, 232, 240, 0.9);
    border-color: rgba(148, 163, 184, 0.4);
    background: rgba(148, 163, 184, 0.18);
}

.event-marquee-relative {
    font-size: 0.85rem;
    color: rgba(191, 219, 254, 0.85);
}

.event-marquee-body {
    display: grid;
    gap: 0.4rem;
}

.event-marquee-title {
    font-weight: 600;
    font-size: 1.05rem;
    color: rgba(248, 250, 252, 0.95);
}

.event-marquee-title .highlight {
    color: var(--hawk-sky);
}

.event-marquee-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 0.85rem;
    color: rgba(191, 219, 254, 0.85);
}

.event-marquee.event-marquee-empty .event-marquee-meta {
    color: rgba(203, 213, 225, 0.85);
}

.event-marquee-meta i {
    margin-right: 0.45rem;
    color: rgba(94, 234, 212, 0.85);
}

.event-marquee.event-marquee-empty .event-marquee-meta i {
    color: rgba(148, 163, 184, 0.85);
}

.event-marquee-description {
    font-size: 0.85rem;
    color: rgba(191, 219, 254, 0.75);
}

.event-marquee.event-marquee-empty .event-marquee-description {
    color: rgba(203, 213, 225, 0.8);
}

.event-marquee-cta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: rgba(94, 234, 212, 0.9);
    font-weight: 600;
}

.event-marquee.event-marquee-empty .event-marquee-cta {
    color: rgba(203, 213, 225, 0.9);
}

.event-marquee-cta i {
    transition: transform 0.25s ease;
}

.event-marquee:hover .event-marquee-cta i,
.event-marquee:focus .event-marquee-cta i {
    transform: translateX(4px);
}

.events-page .upcoming-events-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.8vw, 1.75rem);
}

@media (min-width: 768px) {
    .events-page .upcoming-events-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .events-page .upcoming-events-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.events-page .event-card {
    text-align: left;
    border: 1px solid rgba(59, 130, 246, 0.2);
    background: linear-gradient(155deg, rgba(12, 23, 42, 0.7), rgba(9, 16, 30, 0.6));
}

.events-page .event-card.is-hidden {
    display: none;
}

.events-page .upcoming-count-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
    font-size: 0.9rem;
    color: rgba(191, 219, 254, 0.75);
}

.events-page .upcoming-count-meta__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(94, 234, 212, 0.85);
    text-decoration: none;
}

.events-page .upcoming-count-meta__link::after {
    content: '\f105';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.65rem;
    transition: transform 0.25s var(--ease);
}

.events-page .upcoming-count-meta__link:hover::after,
.events-page .upcoming-count-meta__link:focus::after {
    transform: translateX(4px);
}

.events-page .load-more-wrapper {
    display: flex;
    justify-content: center;
    margin-top: clamp(1.25rem, 3vw, 1.85rem);
}

.events-page .load-more-button {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.75rem;
    border-radius: 999px;
    border: 1px solid rgba(94, 234, 212, 0.35);
    background: linear-gradient(135deg, rgba(12, 74, 110, 0.32), rgba(15, 23, 42, 0.55));
    color: rgba(226, 232, 240, 0.92);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.2s ease, background 0.25s ease;
}

.events-page .load-more-button:hover,
.events-page .load-more-button:focus {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(14, 165, 233, 0.25);
    border-color: rgba(94, 234, 212, 0.55);
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.38), rgba(15, 23, 42, 0.65));
    outline: none;
}

.events-page .load-more-button i {
    font-size: 0.85rem;
    transition: transform 0.25s var(--ease);
}

.events-page .load-more-button[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.events-page .load-more-button-label {
    display: inline-flex;
}

.events-page .load-more-button .label-collapse {
    display: none;
}

.events-page .load-more-button[aria-expanded="true"] .label-expand {
    display: none;
}

.events-page .load-more-button[aria-expanded="true"] .label-collapse {
    display: inline-flex;
}

.events-page .event-card-date {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    font-size: 0.9rem;
    min-width: 4.25rem;
}

.events-page .event-card-date .date {
    font-weight: 700;
    color: rgba(248, 250, 252, 0.92);
}

.events-page .event-card-date .time {
    font-size: 0.75rem;
    color: rgba(191, 219, 254, 0.75);
}

.events-page .event-card.past {
    border-color: rgba(129, 140, 248, 0.16);
    background: linear-gradient(155deg, rgba(15, 23, 42, 0.55), rgba(9, 13, 29, 0.5));
}

.events-page .event-card.past .event-card-date .date {
    color: rgba(191, 219, 254, 0.88);
}

.events-page .btn-primary {
    min-width: 14rem;
}

@media (max-width: 768px) {
    .event-marquee {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .event-marquee-cta {
        align-self: flex-end;
    }

    .event-marquee-wrapper {
        padding-inline: 1rem;
    }
}
/* Legal documents */
.legal-document-page {
    width: min(100%, 1080px);
    margin: 0 auto;
    padding: clamp(4rem, 8vw, 6.5rem) clamp(1.5rem, 4vw, 3rem) clamp(6rem, 12vw, 9rem);
    display: flex;
    flex-direction: column;
    gap: clamp(2.75rem, 6vw, 4rem);
    position: relative;
    z-index: 0;
}

.legal-document-hero {
    position: relative;
    width: 100%;
    padding: clamp(2.75rem, 6vw, 4rem) clamp(2rem, 5vw, 3.25rem);
    border-radius: clamp(1.85rem, 4vw, 2.85rem);
    background:
        linear-gradient(150deg, rgba(10, 21, 42, 0.92), rgba(7, 12, 30, 0.9)),
        radial-gradient(circle at 12% 12%, rgba(94, 234, 212, 0.18), transparent 55%),
        radial-gradient(circle at 88% 15%, rgba(168, 85, 247, 0.24), transparent 62%);
    border: 1px solid rgba(148, 163, 184, 0.32);
    box-shadow: 0 32px 68px rgba(2, 6, 23, 0.6);
    text-align: center;
    overflow: hidden;
}

.legal-document-hero::before {
    content: '';
    position: absolute;
    inset: -30% -15% auto;
    height: 80%;
    background: linear-gradient(120deg, rgba(56, 189, 248, 0.25), rgba(190, 242, 100, 0));
    opacity: 0.6;
    transform: rotate(12deg);
    pointer-events: none;
}

.legal-document-hero::after {
    content: '';
    position: absolute;
    inset: auto -20% -40% 45%;
    width: 50%;
    height: 60%;
    background: radial-gradient(circle at center, rgba(236, 72, 153, 0.28), transparent 70%);
    opacity: 0.5;
    pointer-events: none;
}

.legal-document-hero > * {
    position: relative;
    z-index: 1;
}

.policy-block--form {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.25rem);
}

.legal-dmca-form {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    max-width: 46rem;
    margin: 0 auto;
    text-align: left;
}

.legal-form-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.legal-form-row--split {
    flex-direction: row;
    gap: clamp(1rem, 3vw, 1.75rem);
}

.legal-form-row--split .legal-form-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.legal-form-row--checkbox {
    flex-direction: row;
    align-items: flex-start;
}

.legal-form-row label,
.legal-form-row--split label {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.85);
}

.legal-dmca-form input,
.legal-dmca-form textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(15, 23, 42, 0.65);
    color: #e2e8f0;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.legal-dmca-form input:focus,
.legal-dmca-form textarea:focus {
    outline: none;
    border-color: rgba(129, 140, 248, 0.65);
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
}

.legal-dmca-form input[type="checkbox"] {
    width: auto;
    margin-right: 0.75rem;
    accent-color: #818cf8;
}

.legal-form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.75rem;
    border-radius: 999px;
    border: none;
    background: linear-gradient(120deg, rgba(129, 140, 248, 0.95), rgba(59, 130, 246, 0.9));
    color: #0f172a;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.legal-form-submit:hover,
.legal-form-submit:focus {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.35);
    outline: none;
}

.legal-form-disclaimer {
    font-size: 0.85rem;
    color: rgba(203, 213, 225, 0.75);
    text-align: center;
}

.legal-form-row--checkbox label {
    font-weight: 500;
    line-height: 1.4;
}

.legal-form-row--checkbox input[type="checkbox"] {
    margin-top: 0.2rem;
}

.legal-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 1.4rem;
    margin-bottom: 1.1rem;
    border-radius: 999px;
    background: rgba(94, 234, 212, 0.16);
    color: rgba(224, 242, 254, 0.88);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-document-title {
    margin: 0 0 1rem;
    font-size: clamp(2.4rem, 5vw, 3.1rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.legal-document-lede {
    max-width: 68ch;
    margin: 0 auto 1.35rem;
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(226, 232, 240, 0.92);
}

.legal-document-meta {
    margin: 0 auto;
    max-width: 52ch;
    font-size: 0.95rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.75);
}

.legal-document-body,
.legal-document-section {
    position: relative;
    width: 100%;
    max-width: 980px;
    padding: clamp(2.5rem, 5vw, 3.4rem) clamp(1.75rem, 4vw, 3.25rem);
    border-radius: clamp(1.8rem, 3.8vw, 2.6rem);
    background:
        linear-gradient(160deg, rgba(7, 16, 36, 0.95), rgba(5, 13, 30, 0.9)),
        radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.22), transparent 60%),
        radial-gradient(circle at 85% 12%, rgba(236, 72, 153, 0.18), transparent 65%);
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 28px 64px rgba(2, 6, 23, 0.58), inset 0 1px 0 rgba(226, 232, 240, 0.08);
    display: flex;
    flex-direction: column;
    gap: clamp(2.2rem, 5vw, 3.25rem);
    text-align: left;
    overflow: hidden;
}

.legal-document-body::before,
.legal-document-section::before {
    content: '';
    position: absolute;
    inset: -15% -25% auto;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle at center, rgba(56, 189, 248, 0.18), transparent 72%);
    opacity: 0.45;
    pointer-events: none;
}

.legal-document-body::after,
.legal-document-section::after {
    content: '';
    position: absolute;
    inset: auto 10% -30% 40%;
    width: 45%;
    height: 55%;
    background: radial-gradient(circle at center, rgba(190, 242, 100, 0.18), transparent 70%);
    opacity: 0.35;
    pointer-events: none;
}

.legal-document-body > *,
.legal-document-section > * {
    position: relative;
    z-index: 1;
}

.legal-document-body .policy-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-size: 0.78rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.6);
    margin: 0;
}

.legal-document-body .policy-divider span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    letter-spacing: 0.4em;
}

.legal-document-body .policy-divider::before,
.legal-document-body .policy-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.45), rgba(56, 189, 248, 0));
}

.legal-document-body .policy-block {
    padding-bottom: clamp(1.85rem, 4vw, 2.6rem);
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.legal-document-body .policy-block:last-of-type {
    padding-bottom: 0;
    border-bottom: none;
}

.legal-document-body .policy-section-title {
    margin: 0 0 1.35rem;
    font-size: clamp(1.25rem, 2.8vw, 1.65rem);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(224, 242, 254, 0.95);
}

.legal-document-body .policy-paragraph {
    margin: 0 0 1.1rem;
    font-size: 1.02rem;
    line-height: 1.9;
    color: rgba(226, 232, 240, 0.92);
}

.legal-document-body .policy-paragraph strong {
    color: rgba(190, 242, 100, 0.92);
    font-weight: 600;
}

.legal-document-body .policy-address {
    white-space: pre-line;
    border-radius: 1.1rem;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.22);
    padding: 1rem 1.25rem;
    margin: 1.15rem 0;
    line-height: 1.8;
    color: rgba(224, 242, 254, 0.9);
}

.legal-document-body .policy-list {
    margin: 1.25rem 0 1.5rem;
    padding-left: 1.25rem;
    display: grid;
    gap: 0.85rem;
    list-style: disc;
}

.legal-document-body .policy-list li {
    font-size: 1.02rem;
    line-height: 1.85;
    color: rgba(226, 232, 240, 0.9);
}

.policy-signature-block {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.policy-signature {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.legal-document-body .policy-subheading {
    margin: 2rem 0 1rem;
    font-size: 1.05rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(129, 140, 248, 0.85);
}

@media (max-width: 768px) {
    .legal-document-page {
        padding: clamp(3.25rem, 10vw, 4.5rem) 1.25rem clamp(5rem, 14vw, 7rem);
        gap: 2.5rem;
    }

    .legal-form-row--split {
        flex-direction: column;
    }

    .legal-document-meta {
        letter-spacing: 0.22em;
    }

    .legal-document-body .policy-section-title {
        letter-spacing: 0.12em;
    }
}

@media (max-width: 520px) {
    .legal-document-meta {
        letter-spacing: 0.18em;
    }

    .legal-document-body .policy-divider {
        gap: 0.5rem;
        letter-spacing: 0.32em;
    }
}

.goal-controls-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.goal-preview-link,
.goal-save-button {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
}

.goal-preview-link {
    padding: 0.65rem 1.4rem;
    border: 1px solid rgba(148, 163, 184, 0.26);
    background: rgba(15, 23, 42, 0.7);
    color: rgba(226, 232, 240, 0.85);
}

.goal-preview-link:hover,
.goal-preview-link:focus-visible {
    background: rgba(59, 130, 246, 0.18);
    color: var(--hawk-ice);
    border-color: rgba(59, 130, 246, 0.42);
}

.goal-save-button {
    padding: 0.7rem 1.8rem;
    border: none;
    cursor: pointer;
    color: var(--hawk-night);
    background: linear-gradient(115deg, rgba(253, 224, 71, 0.98), rgba(251, 113, 133, 0.95));
    box-shadow: 0 22px 44px rgba(251, 191, 36, 0.45);
}

.goal-save-button:hover,
.goal-save-button:focus-visible {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 26px 52px rgba(251, 191, 36, 0.55);
}

.goal-save-button:focus-visible {
    outline: 2px solid rgba(14, 165, 233, 0.6);
    outline-offset: 3px;
}

.goal-save-button i,
.goal-preview-link i {
    font-size: 0.95em;
}

/* Support Center Enhancements */
.support-gradient {
    position: fixed;
    inset: -20% -20% auto;
    height: clamp(32rem, 70vh, 54rem);
    background:
        radial-gradient(circle at 15% 35%, rgba(56, 189, 248, 0.28), transparent 65%),
        radial-gradient(circle at 75% 25%, rgba(236, 72, 153, 0.24), transparent 60%),
        radial-gradient(circle at 50% 80%, rgba(45, 212, 191, 0.18), transparent 70%);
    filter: blur(120px);
    opacity: 0.75;
    z-index: 0;
    pointer-events: none;
}

.support-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(8, 47, 73, 0.78) 45%, rgba(15, 118, 110, 0.35));
    box-shadow:
        0 35px 90px rgba(2, 6, 23, 0.65),
        inset 0 1px 0 rgba(226, 232, 240, 0.08);
}

.support-hero__halo {
    position: absolute;
    inset: -40% -30% auto;
    height: 120%;
    background: radial-gradient(circle at 35% 40%, rgba(125, 211, 252, 0.45), transparent 68%),
        radial-gradient(circle at 68% 25%, rgba(192, 132, 252, 0.38), transparent 60%);
    filter: blur(120px);
    opacity: 0.75;
    z-index: 1;
    pointer-events: none;
}

.support-hero__metrics {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(auto-fit, minmax(0, max-content));
    justify-content: start;
    justify-items: start;
    padding: 1.1rem 1.35rem;
    border-radius: 1.35rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.7), rgba(30, 41, 59, 0.55));
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: inset 0 1px 0 rgba(226, 232, 240, 0.08);
    align-content: start;
    align-self: start;
    max-width: 22rem;
}

.support-hero__metric {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-height: 100%;
}

.support-hero__metric dt {
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(191, 219, 254, 0.65);
}

.support-hero__metric dd {
    margin: 0;
    font-size: clamp(1.32rem, 1.8vw, 1.78rem);
    font-weight: 600;
    line-height: 1.05;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.support-hero__metric dd span {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
}

.support-hero__metric-note {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.72);
    line-height: 1.2;
}

.support-hero__list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.65rem 0.8rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.55), rgba(15, 23, 42, 0.42));
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: inset 0 1px 0 rgba(226, 232, 240, 0.08);
}

.support-panel {
    backdrop-filter: blur(32px);
    box-shadow: 0 30px 80px rgba(2, 6, 23, 0.55);
}

.support-panel__list {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(71, 85, 105, 0.45);
}

.support-panel__list i {
    color: rgba(148, 197, 255, 0.85);
}

.support-panel__callout {
    display: flex;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 1.1rem;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(71, 85, 105, 0.45);
    align-items: flex-start;
}

.support-panel__callout-icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.85rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.support-summary {
    padding: 1.1rem 1.25rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(71, 85, 105, 0.45);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.58), rgba(8, 47, 73, 0.38));
    box-shadow: inset 0 1px 0 rgba(226, 232, 240, 0.08);
}

.support-summary__label {
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(191, 219, 254, 0.65);
}

.support-summary__value {
    font-size: 1.4rem;
    font-weight: 600;
    color: #ffffff;
}

.support-input {
    width: 100%;
    border-radius: 1.1rem;
    border: 1px solid rgba(71, 85, 105, 0.55);
    background: rgba(2, 6, 23, 0.65);
    background-color: rgba(2, 6, 23, 0.65);
    padding: 0.85rem 1rem;
    color: rgba(226, 232, 240, 0.95);
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

select.support-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: rgba(2, 6, 23, 0.65);
    background-color: rgba(2, 6, 23, 0.65);
    color: rgba(226, 232, 240, 0.95);
}

.support-input:focus {
    outline: none;
    border-color: rgba(16, 185, 129, 0.8);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
}

.support-ticket-empty {
    display: grid;
    place-items: center;
    gap: 0.75rem;
    text-align: center;
    padding: 2.5rem 1.5rem;
    border-radius: 1.25rem;
    border: 1px dashed rgba(71, 85, 105, 0.55);
    background: rgba(15, 23, 42, 0.55);
    color: rgba(191, 219, 254, 0.75);
    font-size: 0.9rem;
}

.support-ticket-empty i {
    font-size: 1.5rem;
    color: rgba(148, 197, 255, 0.85);
}

.support-ticket-list {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 1024px) {
    .support-ticket-list {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

.support-ticket {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.5rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(71, 85, 105, 0.55);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(30, 64, 175, 0.35) 48%, rgba(6, 78, 59, 0.35) 100%);
    box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.08), 0 25px 60px rgba(2, 6, 23, 0.45);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform var(--ease), border-color 0.25s ease, box-shadow 0.25s ease;
}

.support-ticket::before {
    content: '';
    position: absolute;
    inset: -45% -20% auto;
    height: 65%;
    background: radial-gradient(circle at top, rgba(16, 185, 129, 0.35), rgba(16, 185, 129, 0));
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.support-ticket:hover,
.support-ticket:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(16, 185, 129, 0.65);
    box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.08), 0 32px 80px rgba(16, 185, 129, 0.22);
}

.support-ticket:hover::before,
.support-ticket:focus-visible::before {
    opacity: 1;
}

.support-ticket__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
}

.support-ticket__intro {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.support-ticket__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(148, 197, 255, 0.7);
}

.support-ticket__eyebrow i {
    font-size: 0.75rem;
    color: rgba(148, 197, 255, 0.85);
}

.support-ticket__subject {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
}

.support-ticket__status-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    text-align: right;
}

.support-ticket__status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.support-ticket__status-note {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.85);
}

.support-ticket__status-note i {
    color: rgba(148, 197, 255, 0.85);
}

.support-ticket__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.support-ticket__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.support-ticket__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.7);
    color: rgba(191, 219, 254, 0.78);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 1px solid rgba(51, 65, 85, 0.6);
}

.support-ticket__chip i {
    color: rgba(148, 197, 255, 0.85);
}

.support-ticket__preview {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(191, 219, 254, 0.8);
}

.support-ticket__journey {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.9rem 0.75rem;
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(51, 65, 85, 0.55);
}

.support-ticket__progress-track {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(30, 64, 175, 0.35), rgba(15, 118, 110, 0.35));
    overflow: hidden;
}

.support-ticket__progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--progress, 0%);
    background: linear-gradient(90deg, rgba(147, 197, 253, 0.95), rgba(16, 185, 129, 0.95));
    border-radius: inherit;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.55);
}

.support-ticket__steps {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.support-ticket__step {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    flex: 1;
}

.support-ticket__step-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 999px;
    border: 2px solid rgba(148, 163, 184, 0.6);
    background: rgba(15, 23, 42, 0.9);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.support-ticket__step-label {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.75);
}

.support-ticket__step--complete .support-ticket__step-dot {
    border-color: rgba(16, 185, 129, 0.8);
    background: rgba(16, 185, 129, 0.35);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.support-ticket__step--complete .support-ticket__step-label {
    color: rgba(16, 185, 129, 0.85);
}

.support-ticket__step--active .support-ticket__step-dot {
    border-color: rgba(147, 197, 253, 0.95);
    background: rgba(147, 197, 253, 0.45);
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.25);
}

.support-ticket__step--active .support-ticket__step-label {
    color: rgba(147, 197, 253, 0.95);
}

.support-ticket__journey-note {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(191, 219, 254, 0.8);
}

.support-ticket__journey-note i {
    color: rgba(16, 185, 129, 0.85);
}

.support-ticket__details {
    display: grid;
    gap: 1rem;
    margin: 0;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.support-ticket__detail {
    display: grid;
    gap: 0.45rem;
}

.support-ticket__detail dt {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.75);
}

.support-ticket__detail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 0.5rem;
    background: rgba(30, 64, 175, 0.2);
    color: rgba(147, 197, 253, 0.9);
}

.support-ticket__detail dd {
    margin: 0;
    font-size: 0.88rem;
    color: rgba(226, 232, 240, 0.92);
}

.support-outline-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: rgba(191, 219, 254, 0.75);
}

.support-outline-list li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.support-outline-list i {
    color: rgba(129, 140, 248, 0.75);
    margin-top: 0.2rem;
}

.support-alert {
    box-shadow: 0 30px 80px rgba(2, 6, 23, 0.55);
}

.support-footer {
    padding-bottom: 2rem;
}

@media (max-width: 768px) {
    .support-hero__metrics {
        padding: 1.25rem;
    }

    .support-hero__list-item {
        padding: 0.65rem 0.75rem;
    }

    .support-ticket {
        padding: 1.25rem;
        gap: 1rem;
    }

    .support-ticket__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .support-ticket__status-group {
        align-items: flex-start;
        text-align: left;
    }

    .support-ticket__steps {
        flex-direction: column;
        gap: 0.5rem;
    }

    .support-ticket__step {
        flex-direction: row;
        align-items: center;
    }

    .support-ticket__step-dot {
        margin-right: 0.5rem;
    }

    .support-ticket__step-label {
        letter-spacing: 0.12em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .support-ticket,
    .support-ticket:hover,
    .support-ticket:focus-visible,
    .support-ticket::before,
    .support-ticket__progress-fill,
    .support-ticket__step-dot {
        transition: none;
    }
}


.rounded-4xl {
    border-radius: 2.75rem;
}

.wingverse-main {
    position: relative;
    z-index: 1;
}

.wingverse-hero {
    position: relative;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background:
        radial-gradient(circle at 12% 18%, rgba(45, 212, 191, 0.12), transparent 55%),
        radial-gradient(circle at 82% 24%, rgba(236, 72, 153, 0.16), transparent 60%),
        linear-gradient(135deg, rgba(2, 6, 23, 0.92) 0%, rgba(15, 23, 42, 0.86) 46%, rgba(3, 7, 18, 0.95) 100%);
    min-height: clamp(20rem, 22vw, 26rem);
    overflow: hidden;
}

.wingverse-hero-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.wingverse-starfield {
    position: absolute;
    inset: 0;
    background-image: var(--starlit-grid);
    background-size: 180px 180px;
    opacity: 0.3;
    mix-blend-mode: screen;
    animation: wingverseDrift 40s linear infinite;
}

.wingverse-aurora {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 80%, rgba(56, 189, 248, 0.5), transparent 65%),
        radial-gradient(circle at 70% 18%, rgba(147, 197, 253, 0.45), transparent 60%),
        conic-gradient(from 110deg at 50% 50%, rgba(236, 72, 153, 0.35), rgba(59, 130, 246, 0.28), rgba(16, 185, 129, 0.32), rgba(236, 72, 153, 0.35));
    filter: blur(130px);
    opacity: 0.75;
    mix-blend-mode: screen;
    animation: wingverseAurora 34s ease-in-out infinite;
}

.wingverse-orbits {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.wingverse-orbit {
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 0 40px rgba(148, 163, 184, 0.08);
    animation: wingverseOrbit 26s linear infinite;
}

.wingverse-orbit.orbit-a {
    width: min(92%, 740px);
    height: min(92%, 740px);
}

.wingverse-orbit.orbit-b {
    width: min(70%, 520px);
    height: min(70%, 520px);
    animation-duration: 32s;
}

.wingverse-orbit.orbit-c {
    width: min(46%, 360px);
    height: min(46%, 360px);
    animation-duration: 20s;
}

.wingverse-glimmer {
    position: absolute;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.6), transparent 60%);
    filter: blur(10px);
    opacity: 0.35;
    animation: wingversePulse 14s ease-in-out infinite;
}

.wingverse-glimmer.glimmer-a {
    top: 6%;
    left: 8%;
}

.wingverse-glimmer.glimmer-b {
    bottom: 10%;
    right: 14%;
    animation-delay: -7s;
}

.wingverse-familiar {
    position: absolute;
    display: none;
    pointer-events: none;
    opacity: 0;
}

.wingverse-hero-shell {
    position: relative;
    display: grid;
    gap: clamp(2.25rem, 4.5vw, 3.5rem);
    padding-block: clamp(1.5rem, 3.5vw, 2.5rem) clamp(2.25rem, 4.5vw, 3.25rem);
    padding-inline: clamp(2.5rem, 5vw, 4rem);
    grid-template-columns: 1fr;
    align-items: start;
}

.wingverse-hero-copy {
    display: grid;
    gap: 1.5rem;
    text-align: center;
    max-width: 46rem;
    margin: 0 auto;
}

.wingverse-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.4rem;
    border-radius: 999px;
    background: rgba(45, 212, 191, 0.18);
    border: 1px solid rgba(45, 212, 191, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.35em;
    font-size: 0.75rem;
    color: rgba(190, 242, 100, 0.9);
}

.wingverse-hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(3rem, 6vw, 4.5rem);
    margin: 0;
    color: var(--hawk-ice);
    letter-spacing: -0.02em;
}

.wingverse-hero-text {
    font-size: clamp(1.05rem, 1.9vw, 1.3rem);
    line-height: 1.9;
    color: rgba(226, 232, 240, 0.82);
    margin: 0 auto;
}

.wingverse-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.wingverse-spotlight {
    position: relative;
    display: grid;
    gap: 1.5rem;
    padding: clamp(2rem, 4vw, 2.75rem);
    border-radius: 2.25rem;
    background: rgba(2, 6, 23, 0.84);
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 28px 60px rgba(2, 6, 23, 0.55);
}

.wingverse-spotlight-halo {
    position: absolute;
    inset: -25%;
    background: radial-gradient(circle at 50% 50%, rgba(148, 163, 184, 0.18), transparent 60%);
    opacity: 0.8;
    filter: blur(40px);
    animation: wingCardGlow 18s ease-in-out infinite;
    pointer-events: none;
}

.wingverse-spotlight-avatar {
    position: relative;
    width: clamp(120px, 24vw, 160px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 45px rgba(2, 6, 23, 0.6);
    justify-self: center;
}

.wingverse-spotlight-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wingverse-spotlight-avatar-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.88);
    background: rgba(45, 212, 191, 0.18);
}

.wingverse-spotlight-status {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: rgba(30, 41, 59, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: rgba(203, 213, 225, 0.85);
    justify-self: center;
}

.wingverse-status-indicator {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: rgba(45, 212, 191, 0.8);
    box-shadow: 0 0 16px rgba(45, 212, 191, 0.55);
}

.wingverse-spotlight.is-live .wingverse-status-indicator {
    background: rgba(248, 113, 113, 0.9);
    box-shadow: 0 0 18px rgba(248, 113, 113, 0.65);
}

.wingverse-spotlight-copy {
    text-align: center;
    display: grid;
    gap: 0.6rem;
}

.wingverse-spotlight-handle {
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.75);
}

.wingverse-spotlight-name {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    color: var(--hawk-ice);
    font-family: 'Space Grotesk', sans-serif;
}

.wingverse-spotlight-description {
    margin: 0;
    color: rgba(226, 232, 240, 0.75);
    line-height: 1.7;
}

.wingverse-spotlight-telemetry {
    display: grid;
    gap: 0.9rem;
}

.wingverse-spotlight-telemetry div {
    display: grid;
    gap: 0.4rem;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 1rem;
    padding: 0.9rem 1.1rem;
}

.wingverse-spotlight-telemetry dt {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.75);
}

.wingverse-spotlight-telemetry dd {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(226, 232, 240, 0.88);
}

.wingverse-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    margin-left: 0.45rem;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.14);
    border: 1px solid rgba(99, 102, 241, 0.3);
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(191, 219, 254, 0.9);
}

.wingverse-tag--time {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.28);
    color: rgba(165, 243, 252, 0.9);
}

.wingverse-spotlight-vod {
    display: grid;
    gap: 1rem;
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.6);
}

.wingverse-spotlight-vod img {
    width: 100%;
    height: auto;
    display: block;
}

.wingverse-spotlight-vod-copy {
    padding: 1.2rem 1.5rem 1.6rem;
    display: grid;
    gap: 0.6rem;
}

.wingverse-spotlight-vod-copy .btn-secondary {
    display: flex;
    width: 100%;
    justify-content: center;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
    flex-wrap: wrap;
    text-align: center;
    white-space: normal;
    box-sizing: border-box;
    max-width: 100%;
}

.wingverse-spotlight-vod-title {
    margin: 0;
    font-weight: 600;
    color: var(--hawk-ice);
}

.wingverse-spotlight-vod-time {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.75);
}

.wingverse-spotlight.is-live {
    border-color: rgba(248, 113, 113, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 24px 60px rgba(153, 27, 27, 0.35);
}

.wingverse-alert {
    border-radius: 2rem;
    padding: 2rem 2.4rem;
    background: rgba(127, 29, 29, 0.2);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: rgba(254, 226, 226, 0.88);
    display: grid;
    gap: 1rem;
}

.wingverse-alert-title {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
}

.wingverse-alert ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.wing-constellation {
    display: grid;
    gap: clamp(3rem, 6vw, 4.5rem);
}

.wing-card {
    position: relative;
    padding: 1.5px;
    border-radius: 2.5rem;
    background: linear-gradient(140deg, rgba(45, 212, 191, 0.4), rgba(236, 72, 153, 0.3), rgba(14, 165, 233, 0.28), rgba(30, 64, 175, 0.45));
    overflow: hidden;
}

.wing-card-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.wing-card-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.2);
    opacity: 0.75;
    mix-blend-mode: screen;
    animation: wingverseOrbit 24s linear infinite;
}

.wing-card-ring.ring-1 {
    width: 82%;
    height: 82%;
    top: 9%;
    left: 9%;
}

.wing-card-ring.ring-2 {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    animation-duration: 30s;
}

.wing-card-ring.ring-3 {
    width: 36%;
    height: 36%;
    top: 32%;
    left: 32%;
    animation-duration: 18s;
}

.wing-card-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 20%, rgba(45, 212, 191, 0.25), transparent 55%),
        radial-gradient(circle at 78% 22%, rgba(236, 72, 153, 0.25), transparent 60%),
        radial-gradient(circle at 46% 78%, rgba(56, 189, 248, 0.2), transparent 65%);
    opacity: 0.85;
    mix-blend-mode: screen;
    animation: wingCardGlow 16s ease-in-out infinite;
}

.wing-card-shell {
    position: relative;
    z-index: 1;
    border-radius: 2.35rem;
    background: rgba(2, 6, 23, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.22);
    padding: clamp(2.25rem, 4vw, 3.25rem);
    display: grid;
    gap: clamp(2rem, 4vw, 2.75rem);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 30px 70px rgba(2, 6, 23, 0.55);
}

.wing-card-header {
    display: grid;
    gap: 1.75rem;
    align-items: start;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

.wing-card-ident {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.35rem;
    align-items: center;
}

.wing-card-avatar {
    width: clamp(96px, 18vw, 132px);
    aspect-ratio: 1;
    border-radius: 1.75rem;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 18px 38px rgba(2, 6, 23, 0.55);
}

.wing-card-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, rgba(148, 163, 184, 0.22), transparent 55%);
}

.wing-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wing-card-avatar-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(99, 102, 241, 0.2);
    color: rgba(226, 232, 240, 0.88);
    font-weight: 600;
}

.wing-card-text {
    display: grid;
    gap: 0.7rem;
}

.wing-card-handle {
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.7);
}

.wing-card-name {
    margin: 0;
    font-size: clamp(1.9rem, 3vw, 2.4rem);
    font-family: 'Space Grotesk', sans-serif;
    color: var(--hawk-ice);
}

.wing-card-description {
    margin: 0;
    color: rgba(203, 213, 225, 0.78);
    line-height: 1.65;
    max-width: 38ch;
}

.wing-card-status {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    padding: 0.7rem 1.1rem;
    border-radius: 1.4rem;
    background: rgba(30, 41, 59, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: rgba(203, 213, 225, 0.85);
    justify-self: end;
}

.wing-card-status-indicator {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: rgba(45, 212, 191, 0.85);
    box-shadow: 0 0 14px rgba(45, 212, 191, 0.6);
}

.wing-card-status-label {
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.wing-card-status-meta {
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.78);
}

.wing-card-status.is-live {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.32);
    color: rgba(254, 226, 226, 0.9);
}

.wing-card-status.is-live .wing-card-status-indicator {
    background: rgba(248, 113, 113, 0.9);
    box-shadow: 0 0 20px rgba(248, 113, 113, 0.65);
}

.wing-card-grid {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2rem);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.wing-card-panel {
    position: relative;
    border-radius: 1.6rem;
    background: rgba(7, 11, 27, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.22);
    padding: clamp(1.6rem, 3vw, 2rem);
    display: grid;
    gap: 1.1rem;
}

.wing-card-panel header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.wing-card-panel h3 {
    margin: 0;
    font-size: 0.95rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.75);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.wing-card-stream-pulse {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: rgba(248, 113, 113, 0.15);
    border: 1px solid rgba(248, 113, 113, 0.32);
    color: rgba(254, 226, 226, 0.9);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.wing-card-stream-title {
    margin: 0;
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--hawk-ice);
}

.wing-card-stream-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
    color: rgba(226, 232, 240, 0.75);
    font-size: 0.85rem;
}

.wing-card-stream-meta li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.wing-card-offline-copy {
    margin: 0;
    color: rgba(148, 163, 184, 0.8);
    line-height: 1.6;
}

.wing-card-offline-next {
    margin: 0;
    color: rgba(226, 232, 240, 0.8);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.85rem;
}

.wing-card-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.28);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(165, 243, 252, 0.9);
}

.wing-card-chip--time {
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.3);
    color: rgba(191, 219, 254, 0.9);
}

.wing-card-metric-list {
    display: grid;
    gap: 1rem;
}

.wing-card-metric-list div {
    display: grid;
    gap: 0.35rem;
}

.wing-card-metric-list dt {
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.75);
}

.wing-card-metric-list dd {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--hawk-ice);
}

.wing-card-source {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.7);
}

.wing-card-schedule-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.4rem;
}

.wing-card-schedule-list li {
    position: relative;
    padding-left: 2.6rem;
}

.wing-card-schedule-list li::before {
    content: '';
    position: absolute;
    left: 1.1rem;
    top: 0.4rem;
    bottom: -1.2rem;
    width: 1px;
    background: linear-gradient(to bottom, rgba(148, 163, 184, 0.35), transparent);
}

.wing-card-schedule-list li:last-child::before {
    display: none;
}

.wing-card-schedule-node {
    position: absolute;
    left: 0;
    top: 0.2rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(30, 64, 175, 0.3);
    display: grid;
    place-items: center;
}

.wing-card-schedule-node::after {
    content: '';
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: rgba(96, 165, 250, 0.75);
    box-shadow: 0 0 16px rgba(96, 165, 250, 0.6);
}

.wing-card-schedule-copy {
    display: grid;
    gap: 0.45rem;
}

.wing-card-schedule-title {
    margin: 0;
    font-weight: 600;
    color: var(--hawk-ice);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.wing-card-schedule-time,
.wing-card-schedule-category {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.78);
}

.wing-card-schedule-category {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.wing-card-vod-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    gap: 1.35rem;
    align-items: stretch;
}

.wing-card-vod-grid img {
    width: 100%;
    height: auto;
    border-radius: 1.1rem;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.22);
}

.wing-card-vod-copy {
    display: grid;
    gap: 0.7rem;
}

.wing-card-vod-copy .btn-secondary {
    display: flex;
    width: 100%;
    justify-content: center;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
    flex-wrap: wrap;
    text-align: center;
    white-space: normal;
    box-sizing: border-box;
    max-width: 100%;
}

.wing-card-vod-title {
    margin: 0;
    font-weight: 600;
    color: var(--hawk-ice);
    font-size: 1.05rem;
}

.wing-card-vod-time {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(148, 163, 184, 0.75);
}

.wing-card-footer {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.wing-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.wing-card-errors {
    list-style: none;
    margin: 0;
    padding: 0.85rem 1.1rem;
    border-radius: 1.2rem;
    background: rgba(127, 29, 29, 0.2);
    border: 1px solid rgba(248, 113, 113, 0.32);
    color: rgba(254, 226, 226, 0.88);
    font-size: 0.8rem;
    display: grid;
    gap: 0.5rem;
}

.wing-card-errors i {
    margin-right: 0.4rem;
}

@media (min-width: 1024px) {
    .wingverse-hero-shell {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        align-items: flex-start;
    }

    .wingverse-hero-copy {
        text-align: left;
        margin: 0;
    }

    .wingverse-hero-actions {
        justify-content: flex-start;
    }

    .wingverse-spotlight {
        align-self: stretch;
    }
}

@media (max-width: 768px) {
    .wing-card-header {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .wing-card-ident {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .wing-card-status {
        justify-self: center;
    }

    .wing-card-actions {
        justify-content: center;
    }

    .wing-card-vod-grid {
        grid-template-columns: 1fr;
    }
}

@keyframes wingverseDrift {
    0% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(-2%, -3%, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes wingverseAurora {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.08) rotate(12deg);
        opacity: 0.55;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.7;
    }
}

@keyframes wingverseOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes wingversePulse {
    0% {
        opacity: 0.25;
        transform: scale(0.95);
    }

    50% {
        opacity: 0.55;
        transform: scale(1.05);
    }

    100% {
        opacity: 0.25;
        transform: scale(0.95);
    }
}

@keyframes wingCardGlow {
    0% {
        opacity: 0.35;
        transform: scale(0.98);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.02);
    }

    100% {
        opacity: 0.35;
        transform: scale(0.98);
    }
}

/* Enhanced Card Layouts */
.tech-card,
.perk-card,
.mission-hub-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 320px;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
    position: relative;
    overflow: hidden;
}

.tech-card:hover,
.perk-card:hover,
.mission-hub-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 32px 64px rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.3);
}

.tech-card::before,
.perk-card::before,
.mission-hub-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.05) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
    pointer-events: none;
}

.tech-card:hover::before,
.perk-card:hover::before,
.mission-hub-card:hover::before {
    opacity: 1;
}

.tech-card h3,
.perk-card h3,
.mission-hub-card h3 {
    transition: color 0.3s var(--ease);
}

.tech-card:hover h3,
.perk-card:hover h3,
.mission-hub-card:hover h3 {
    color: var(--hawk-sky);
}

/* Enhanced Perk Icons */
.perk-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(168, 85, 247, 0.1));
    border: 1px solid rgba(56, 189, 248, 0.2);
    margin-bottom: 1.5rem;
    transition: all 0.3s var(--ease);
}

.perk-card:hover .perk-icon {
    transform: scale(1.1);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(168, 85, 247, 0.15));
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.2);
}

.perk-icon i {
    font-size: 1.75rem;
    color: var(--hawk-sky);
    transition: transform 0.3s var(--ease);
}

.perk-card:hover .perk-icon i {
    transform: scale(1.1);
}

/* Mission Hub Card Enhancements */
.mission-hub-hero {
    min-height: 480px;
    position: relative;
}

.mission-hub-side .mission-hub-card {
    min-height: 280px;
}

.mission-hub-card-link {
    transition: all 0.3s var(--ease);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--hawk-sky);
    font-weight: 500;
}

.mission-hub-card-link:hover {
    color: var(--hawk-gold);
    transform: translateX(4px);
}

/* Community Cards Enhancement */
#community .bg-gray-800 {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 320px;
    transition: all 0.3s var(--ease);
    position: relative;
    overflow: hidden;
}

#community .bg-gray-800:hover {
    transform: translateY(-8px);
    box-shadow: 0 32px 64px rgba(56, 189, 248, 0.15);
    background: rgba(15, 23, 42, 0.85);
}

#community .bg-gray-800::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.05) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
    pointer-events: none;
}

#community .bg-gray-800:hover::before {
    opacity: 1;
}

#community .bg-gray-800 i {
    transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}

#community .bg-gray-800:hover i {
    transform: scale(1.1);
    color: var(--hawk-sky);
}

/* Contact Cards Enhancement */
#contact .glass-effect {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 320px;
    text-align: center;
    transition: all 0.3s var(--ease);
    position: relative;
    overflow: hidden;
}

#contact .glass-effect:hover {
    transform: translateY(-8px);
    box-shadow: 0 32px 64px rgba(56, 189, 248, 0.15);
}

#contact .glass-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.05) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
    pointer-events: none;
}

#contact .glass-effect:hover::before {
    opacity: 1;
}

#contact .glass-effect i {
    transition: transform 0.3s var(--ease);
}

#contact .glass-effect:hover i {
    transform: scale(1.1);
}

/* Grid Standardization */
.grid {
    align-items: stretch;
}

/* Responsive Height Adjustments */
@media (max-width: 768px) {
    .tech-card,
    .perk-card,
    .mission-hub-card,
    #community .bg-gray-800,
    #contact .glass-effect {
        min-height: 280px;
    }
    
    .mission-hub-hero {
        min-height: 400px;
    }
}

@media (max-width: 640px) {
    .tech-card,
    .perk-card,
    .mission-hub-card,
    #community .bg-gray-800,
    #contact .glass-effect {
        min-height: 240px;
    }
    
    .mission-hub-hero {
        min-height: 360px;
    }
}

/* Tab Navigation Styles */
.feature-tab,
.connect-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 2px solid rgba(56, 189, 248, 0.3);
    border-radius: 2rem;
    background: rgba(15, 23, 42, 0.6);
    color: rgba(226, 232, 240, 0.8);
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s var(--ease);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.feature-tab:hover,
.connect-tab:hover {
    border-color: rgba(56, 189, 248, 0.6);
    color: var(--hawk-sky);
    background: rgba(15, 23, 42, 0.8);
    transform: translateY(-2px);
}

.feature-tab.active,
.connect-tab.active {
    border-color: var(--hawk-sky);
    color: var(--hawk-ice);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(168, 85, 247, 0.1));
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.2);
}

.feature-tab::before,
.connect-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.3), transparent);
    transition: left 0.5s var(--ease);
}

.feature-tab:hover::before,
.connect-tab:hover::before {
    left: 100%;
}

/* Tab Panel Styles */
.feature-panel,
.connect-panel {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.feature-panel.active,
.connect-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Enhanced Button Styles */
.btn-lg {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 2rem;
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.3);
    transition: all 0.3s var(--ease);
}

.btn-lg:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(56, 189, 248, 0.4);
}

/* Reduced Visual Noise */
.hawk-panel {
    background: rgba(7, 18, 44, 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(148, 163, 184, 0.1);
}

/* Enhanced Spacing */
section {
    scroll-margin-top: 2rem;
}

/* Simplified Color Usage */
.feature-tab i,
.connect-tab i {
    color: var(--hawk-sky);
    transition: color 0.3s var(--ease);
}

.feature-tab.active i,
.connect-tab.active i {
    color: var(--hawk-gold);
}

/* Better Focus States */
.feature-tab:focus-visible,
.connect-tab:focus-visible {
    outline: 2px solid var(--hawk-sky);
    outline-offset: 2px;
}

/* Mobile Tab Adjustments */
@media (max-width: 768px) {
    .feature-tab,
    .connect-tab {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
        gap: 0.4rem;
    }
    
    .btn-lg {
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }
}

/* Additional Tab Styles for Better Functionality */
.feature-content,
.connect-content {
    min-height: 400px;
    position: relative;
}

/* Ensure smooth transitions for tab content */
.feature-panel.active,
.connect-panel.active {
    animation: fadeInUp 0.4s var(--ease) forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced tab button interactions */
.feature-tab:active,
.connect-tab:active {
    transform: translateY(0) scale(0.98);
}

/* Better visual hierarchy for active tabs */
.feature-tab.active::after,
.connect-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--hawk-gold);
    border-radius: 1px;
}

/* Tab container styling */
.feature-content,
.connect-content {
    background: rgba(7, 18, 44, 0.2);
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(148, 163, 184, 0.1);
    backdrop-filter: blur(8px);
}

/* Ensure proper button styling consistency */
.btn-primary.btn-lg {
    background: linear-gradient(135deg, var(--hawk-sky), var(--hawk-iris));
    border: none;
    color: var(--hawk-ice);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
}

.btn-primary.btn-lg::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s var(--ease);
}

.btn-primary.btn-lg:hover::before {
    left: 100%;
}

/* Social link improvements */
.social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 2rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: rgba(226, 232, 240, 0.9);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s var(--ease);
    position: relative;
    overflow: hidden;
}

.social-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.2);
    border-color: rgba(56, 189, 248, 0.4);
    color: var(--hawk-ice);
}

.social-link span {
    font-size: 0.9rem;
}

/* Hero section improvements */
.hero-metric-card {
    padding: 1.5rem;
    text-align: center;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 1rem;
    backdrop-filter: blur(8px);
    transition: all 0.3s var(--ease);
}

.hero-metric-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.3);
}

.metric-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--hawk-sky);
    margin-bottom: 0.5rem;
}

.metric-label {
    display: block;
    font-size: 0.85rem;
    color: rgba(226, 232, 240, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Current stream info styling */
.glass-effect.rounded-2xl {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(148, 163, 184, 0.15);
    transition: all 0.3s var(--ease);
}

.glass-effect.rounded-2xl:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.1);
    border-color: rgba(56, 189, 248, 0.25);
}