/* Redot Engine Website - Global Styles */

:root {
    /* Brand ratio: 75% ink, 20% graphite surfaces, 5% Redot orange-red accents. */
    --redot-brand: #ff3b0a;
    --redot-brand-dark: #d92f0b;
    --redot-brand-deep: #681b0c;
    --redot-ink: #09090b;
    --redot-ink-deep: #050506;
    --redot-surface: #17171b;
    --redot-surface-raised: #202026;
}

/* ===== Base ===== */
html, body {
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* ===== Announcement Banner ===== */
.announcement-banner {
    background: linear-gradient(90deg, var(--redot-brand-dark), var(--redot-brand));
    padding: 10px 24px;
    text-align: center;
    z-index: 1100;
    position: relative;
}

.announcement-banner a {
    color: #090909 !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
}

.announcement-banner a:hover {
    text-decoration: underline !important;
}

.announcement-banner .highlight {
    font-weight: 700;
}

/* ===== Hero Section ===== */
.hero-bg {
    background: linear-gradient(135deg, var(--redot-ink-deep) 0%, #171318 52%, var(--redot-ink) 100%);
}

/* ===== Download Hero ===== */
.download-hero {
    background: url('https://image.redotengine.org/background.png') center/cover no-repeat;
    border-radius: 12px;
    margin: 0 20px;
    position: relative;
}

@media (min-width: 1024px) {
    .download-hero {
        margin: 0 160px;
    }
}



/* ===== Platform Card Hover ===== */
.platform-card {
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.platform-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 59, 10, 0.35) !important;
}

/* ===== Section Backgrounds ===== */
.section-dark {
    background-color: var(--redot-ink);
}

.section-gradient {
    background: linear-gradient(180deg, #0e0e12 0%, var(--redot-ink-deep) 100%);
}

/* ===== Footer ===== */
.site-footer {
    background-color: var(--redot-ink-deep);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: auto;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.5) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: var(--redot-brand) !important;
}

.mud-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main-content,
.site-main-content > main {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

.site-main-content > main > * {
    width: 100%;
}

.page-header,
.community-header {
    margin-inline: auto;
    max-width: 44rem;
}

.page-header h1,
.community-header h1,
.legal-header {
    font-size: clamp(2.35rem, 4.5vw, 3.5rem);
    letter-spacing: -0.035em;
    line-height: 1.1;
}

.page-header .mud-typography-body1,
.community-header .mud-typography-body1 {
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.65;
}

.community-hero-container {
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.legal-container {
    max-width: 48rem !important;
}

.legal-container .mud-typography-body1,
.legal-container .mud-list-item-text {
    line-height: 1.7;
}

.proposal-timestamp {
    color: rgba(255, 255, 255, 0.68) !important;
}

.download-unavailable,
.error-recovery-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    max-width: 42rem;
}

.download-unavailable .mud-typography-body1,
.error-recovery-card .mud-typography-body1 {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.65;
}

.error-page {
    align-items: center;
    display: flex;
    flex: 1 0 auto;
    min-height: 32rem;
}

.error-request-id {
    color: rgba(255, 255, 255, 0.65);
    overflow-wrap: anywhere;
}

/* ===== Feature Card Hover ===== */
.feature-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(255, 59, 10, 0.14) !important;
    border-color: rgba(255, 59, 10, 0.35) !important;
}

/* ===== Mobile Navigation ===== */
/* Default: Desktop visible, mobile hidden */
.desktop-nav {
    display: flex;
}

.mobile-menu-btn {
    display: none;
}

/* Mobile breakpoint */
@media (max-width: 768px) {
    /* Reduce container padding on mobile */
    .mud-container {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    /* Smaller hero text on mobile */
    .hero-bg h1, .section-dark h1, .section-dark h2 {
        font-size: 1.75rem;
    }
    
    /* Ensure buttons are touch-friendly */
    .mud-button {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Footer links touch targets */
    .site-footer a {
        display: inline-block;
        padding: 8px 0;
        min-height: 44px;
    }
    
    /* Mobile nav drawer improvements */
    .mud-drawer {
        width: 280px;
    }
    
    .mud-nav-link {
        min-height: 48px;
        padding: 12px 16px;
    }
    
    /* Mobile: Hide desktop nav, show mobile button */
    .desktop-nav {
        display: none;
    }
    
    .mobile-menu-btn {
        display: flex;
    }

    .site-navbar-logo img {
        height: 32px !important;
        max-width: calc(100vw - 104px);
    }

    .page-header h1,
    .community-header h1,
    .legal-header {
        font-size: clamp(2rem, 9vw, 2.5rem);
    }

    .section-dark .page-header h1,
    .hero-bg .community-header h1,
    .section-dark h1.legal-header {
        font-size: clamp(2rem, 9vw, 2.5rem) !important;
    }

    .section-dark .subsection-heading,
    .section-gradient .subsection-heading {
        font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
        line-height: 1.2;
    }

    .section-gradient .shared-cta-heading,
    .section-gradient .proposal-cta-heading {
        font-size: clamp(1.9rem, 8vw, 2.4rem) !important;
        line-height: 1.15;
    }

    .page-header .mud-typography-body1,
    .community-header .mud-typography-body1 {
        font-size: 1rem;
    }

    .legal-container {
        max-width: 100% !important;
    }

    .legal-container .mud-paper {
        padding: 1.25rem;
    }

    .cta-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .cta-actions .mud-button-root {
        width: 100%;
    }
}

@media (min-width: 600px) and (max-width: 959px) {
    .site-footer-container {
        max-width: 46rem !important;
    }

    .footer-brand-column {
        padding-bottom: 0.5rem;
    }
}

/* ===== Marquee ===== */
.marquee-container {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.marquee-track {
    display: flex;
    gap: 0;
    white-space: nowrap;
    animation: marquee-scroll 45s linear infinite;
    width: max-content;
}

.marquee-group {
    box-sizing: border-box;
    display: flex;
    flex: none;
    gap: 12px;
    min-width: 100vw;
    padding-right: 12px;
    width: max-content;
}

.marquee-reverse .marquee-track {
    animation-direction: reverse;
}

.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    flex-shrink: 0;
}

@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ===== Feature Highlight Icons ===== */
.feature-highlight-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-color: var(--redot-brand-deep);
    display: flex;
    align-items: center;
    justify-content: center;
}

.features-highlight-grid {
    padding: 64px 0;
    position: relative;
    background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* ===== Blazor Error Boundary ===== */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* ===== Light Rays Effect ===== */
.light-rays {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.light-rays::before,
.light-rays::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(255, 59, 10, 0.03) 20deg,
        transparent 40deg,
        rgba(255, 59, 10, 0.02) 60deg,
        transparent 80deg,
        rgba(217, 47, 11, 0.02) 100deg,
        transparent 120deg,
        rgba(255, 59, 10, 0.03) 140deg,
        transparent 160deg,
        rgba(217, 47, 11, 0.02) 180deg,
        transparent 200deg
    );
    animation: light-rays-rotate 30s linear infinite;
}

.light-rays::before {
    top: -50%;
    left: -50%;
    transform-origin: center;
}

.light-rays::after {
    top: -50%;
    right: -50%;
    transform-origin: center;
    animation-direction: reverse;
    animation-duration: 25s;
}

@keyframes light-rays-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== Particle Network Effect ===== */
.particle-network {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 59, 10, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 59, 10, 0.4);
}

.particle-1 { top: 20%; left: 10%; animation: particle-float-1 15s ease-in-out infinite; }
.particle-2 { top: 60%; left: 25%; animation: particle-float-2 18s ease-in-out infinite; animation-delay: -3s; }
.particle-3 { top: 30%; left: 40%; animation: particle-float-3 20s ease-in-out infinite; animation-delay: -6s; }
.particle-4 { top: 70%; left: 55%; animation: particle-float-4 16s ease-in-out infinite; animation-delay: -9s; }
.particle-5 { top: 40%; left: 70%; animation: particle-float-5 19s ease-in-out infinite; animation-delay: -12s; }
.particle-6 { top: 80%; left: 85%; animation: particle-float-6 17s ease-in-out infinite; animation-delay: -15s; }
.particle-7 { top: 15%; left: 60%; animation: particle-float-1 21s ease-in-out infinite; animation-delay: -2s; }
.particle-8 { top: 50%; left: 80%; animation: particle-float-2 14s ease-in-out infinite; animation-delay: -8s; }
.particle-9 { top: 85%; left: 20%; animation: particle-float-3 22s ease-in-out infinite; animation-delay: -11s; }
.particle-10 { top: 10%; left: 90%; animation: particle-float-4 16s ease-in-out infinite; animation-delay: -5s; }

@keyframes particle-float-1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
    25% { transform: translate(30px, -50px) scale(1.2); opacity: 0.8; }
    50% { transform: translate(60px, 20px) scale(0.8); opacity: 0.5; }
    75% { transform: translate(20px, 60px) scale(1.1); opacity: 0.7; }
}

@keyframes particle-float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    25% { transform: translate(-40px, 30px) scale(0.9); opacity: 0.7; }
    50% { transform: translate(-20px, -60px) scale(1.3); opacity: 0.9; }
    75% { transform: translate(50px, -20px) scale(0.8); opacity: 0.6; }
}

@keyframes particle-float-3 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    25% { transform: translate(50px, 40px) scale(1.2); opacity: 0.7; }
    50% { transform: translate(-30px, 50px) scale(0.9); opacity: 0.5; }
    75% { transform: translate(-60px, -30px) scale(1.1); opacity: 0.8; }
}

@keyframes particle-float-4 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
    25% { transform: translate(-50px, -40px) scale(0.8); opacity: 0.4; }
    50% { transform: translate(40px, -50px) scale(1.2); opacity: 0.8; }
    75% { transform: translate(30px, 40px) scale(1); opacity: 0.6; }
}

@keyframes particle-float-5 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
    25% { transform: translate(40px, 60px) scale(1.1); opacity: 0.7; }
    50% { transform: translate(-50px, 30px) scale(0.8); opacity: 0.5; }
    75% { transform: translate(-20px, -50px) scale(1.3); opacity: 0.9; }
}

@keyframes particle-float-6 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    25% { transform: translate(-30px, -30px) scale(1.2); opacity: 0.8; }
    50% { transform: translate(30px, -40px) scale(0.9); opacity: 0.6; }
    75% { transform: translate(60px, 20px) scale(1.1); opacity: 0.7; }
}

/* ===== Enhanced Aurora Gradient Mesh Effect ===== */
.aurora-bg {
    position: relative;
    overflow: hidden;
}

.aurora-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0;
    will-change: transform;
}

.aurora-blob-1 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(255, 59, 10, 0.5) 0%, rgba(255, 59, 10, 0) 70%);
    top: -250px;
    left: -150px;
    animation: aurora-float-1 15s ease-in-out infinite;
    animation-delay: 0s;
}

.aurora-blob-2 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(217, 47, 11, 0.45) 0%, rgba(217, 47, 11, 0) 70%);
    top: 40%;
    right: -200px;
    animation: aurora-float-2 18s ease-in-out infinite;
    animation-delay: -5s;
}

.aurora-blob-3 {
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(104, 27, 12, 0.55) 0%, rgba(104, 27, 12, 0) 70%);
    bottom: -150px;
    left: 30%;
    animation: aurora-float-3 18s ease-in-out infinite;
    animation-delay: -10s;
}

.aurora-blob-4 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 59, 10, 0.3) 0%, rgba(255, 59, 10, 0) 70%);
    top: 30%;
    left: 50%;
    animation: aurora-float-4 25s ease-in-out infinite;
    animation-delay: -15s;
}

.aurora-blob-5 {
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(26, 26, 46, 0.5) 0%, rgba(26, 26, 46, 0) 70%);
    bottom: 20%;
    left: -100px;
    animation: aurora-float-5 23s ease-in-out infinite;
    animation-delay: -8s;
}

@keyframes aurora-float-1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    50% {
        transform: translate(100px, 80px) scale(1.1);
        opacity: 0.5;
    }
    90% {
        opacity: 0.6;
    }
}

@keyframes aurora-float-2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.5;
    }
    50% {
        transform: translate(-80px, -60px) scale(1.15);
        opacity: 0.4;
    }
    90% {
        opacity: 0.5;
    }
}

@keyframes aurora-float-3 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.55;
    }
    50% {
        transform: translate(60px, -100px) scale(1.2);
        opacity: 0.45;
    }
    90% {
        opacity: 0.55;
    }
}

@keyframes aurora-float-4 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.4;
    }
    50% {
        transform: translate(-70px, 90px) scale(1.1);
        opacity: 0.35;
    }
    90% {
        opacity: 0.4;
    }
}

@keyframes aurora-float-5 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.45;
    }
    50% {
        transform: translate(120px, 50px) scale(1.05);
        opacity: 0.4;
    }
    90% {
        opacity: 0.45;
    }
}

/* Mobile adjustments for aurora */
@media (max-width: 768px) {
    .aurora-blob {
        filter: blur(60px);
    }
    
    .aurora-blob-1 {
        width: 350px;
        height: 350px;
    }
    
    .aurora-blob-2 {
        width: 300px;
        height: 300px;
    }
    
    .aurora-blob-3 {
        width: 280px;
        height: 280px;
    }
    
    .aurora-blob-4 {
        width: 250px;
        height: 250px;
    }
    
    .aurora-blob-5 {
        width: 320px;
        height: 320px;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .aurora-blob {
        animation: none;
        opacity: 0.3;
    }
}

/* ===== Pixel Blast Hero ===== */
.hero-bg {
    align-items: center;
    border-top: 1px solid rgba(255, 59, 10, 0.2);
    display: flex;
    isolation: isolate;
    min-height: clamp(580px, 72vh, 760px);
    position: relative;
}

/* This secondary page uses the hero treatment without the home page's tall canvas layout. */
.hero-bg.community-hero {
    min-height: 0;
    padding-top: 64px;
}

.hero-bg::after {
    background: linear-gradient(180deg, transparent 75%, rgba(5, 5, 8, 0.8) 100%);
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

.pixel-blast-layer {
    inset: 0;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.4), #000 45%, rgba(0, 0, 0, 0.85));
    opacity: 0.36;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

.pixel-blast-canvas {
    display: block;
    height: 100%;
    width: 100%;
}

.hero-container {
    margin-inline: auto !important;
    max-width: 1500px !important;
    padding: clamp(4.5rem, 7vw, 7.5rem) clamp(1.5rem, 4vw, 4rem) !important;
    position: relative;
    width: 100%;
    z-index: 2;
}

.hero-layout {
    align-items: center;
    display: grid;
    gap: clamp(3rem, 6vw, 7rem);
    grid-template-columns: minmax(0, 0.92fr) minmax(460px, 1.08fr);
}

.hero-copy {
    max-width: 680px;
}

.hero-eyebrow {
    align-items: center;
    color: rgba(255, 255, 255, 0.72);
    display: flex;
    font-size: 0.78rem;
    font-weight: 700;
    gap: 0.65rem;
    letter-spacing: 0.13em;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
}

.hero-eyebrow-mark {
    background: var(--redot-brand);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(255, 59, 10, 0.13), 0 0 18px rgba(255, 59, 10, 0.68);
    height: 0.45rem;
    width: 0.45rem;
}

.hero-bg .hero-title {
    color: #fff;
    font-size: clamp(3.35rem, 4.45vw, 4.75rem);
    font-weight: 850;
    letter-spacing: -0.055em;
    line-height: 1.06;
    margin: 0 0 1.6rem;
}

.hero-title-line {
    display: block;
    padding-bottom: 0.04em;
    white-space: nowrap;
}

.hero-gradient-title {
    animation: hero-gradient-shift 5.5s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #ffc1ad 16%,
        #ff7957 32%,
        var(--redot-brand) 47%,
        #ff7a00 60%,
        #ff4b1a 74%,
        #ffd0c2 88%,
        #ffffff 100%
    );
    background-clip: text;
    background-position: 100% 100%;
    background-repeat: repeat;
    background-size: 160% 160%;
    filter: drop-shadow(0 0 20px rgba(255, 59, 10, 0.16));
    overflow: visible;
    padding-bottom: 0.08em;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes hero-gradient-shift {
    from {
        background-position: 100% 100%;
    }

    to {
        background-position: 0% 0%;
    }
}

.hero-description {
    color: #ffffff !important;
    font-size: clamp(1rem, 1.25vw, 1.18rem) !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    margin-bottom: 2rem !important;
    max-width: 620px;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.hero-buttons .mud-button-root {
    border-radius: 11px;
    font-weight: 700;
    min-height: 52px;
    padding: 0.8rem 1.6rem;
    text-transform: none;
}

.hero-primary-action {
    box-shadow: 0 12px 30px rgba(255, 59, 10, 0.24);
}

.hero-secondary-action {
    backdrop-filter: blur(10px);
    background: rgba(10, 10, 16, 0.38) !important;
    border-color: rgba(255, 59, 10, 0.78) !important;
}

.hero-proof {
    align-items: center;
    color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.82rem;
    gap: 0.7rem 1.2rem;
    margin-top: 1.65rem;
}

.hero-proof span {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
    white-space: nowrap;
}

.hero-proof .mud-icon-root {
    color: var(--redot-brand);
    font-size: 1rem;
}

.hero-media {
    min-width: 0;
    position: relative;
}

.hero-media-glow {
    background: radial-gradient(circle, rgba(255, 59, 10, 0.36), transparent 68%);
    filter: blur(30px);
    inset: 8% -7% -12% 15%;
    pointer-events: none;
    position: absolute;
}

.hero-media-frame {
    background: #08090d;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(255, 59, 10, 0.1);
    overflow: hidden;
    position: relative;
    transform: perspective(1400px) rotateY(-2deg) rotateX(1deg);
}

.hero-media-chrome {
    align-items: center;
    background: linear-gradient(180deg, rgba(30, 31, 39, 0.98), rgba(17, 18, 24, 0.98));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    gap: 0.42rem;
    height: 38px;
    padding: 0 0.9rem;
}

.hero-media-chrome > span {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    height: 7px;
    width: 7px;
}

.hero-media-chrome > span:first-child {
    background: var(--redot-brand);
}

.hero-media-label {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    margin-left: auto;
    text-transform: uppercase;
}

.hero-media video {
    aspect-ratio: 16 / 9;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

@media (max-width: 1100px) {
    .hero-layout {
        gap: 3rem;
        grid-template-columns: minmax(0, 0.95fr) minmax(390px, 1.05fr);
    }

    .hero-bg .hero-title {
        font-size: clamp(3rem, 5.2vw, 4.25rem);
    }
}

@media (max-width: 900px) {
    .hero-bg {
        min-height: auto;
    }

    .hero-layout {
        grid-template-columns: 1fr;
    }

    .hero-copy {
        max-width: 720px;
    }

    .hero-media {
        margin-inline: auto;
        max-width: 760px;
        width: 100%;
    }

    .hero-media-frame {
        transform: none;
    }

    .pixel-blast-layer {
        mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.4));
        opacity: 0.28;
    }
}

@media (max-width: 600px) {
    .hero-container {
        padding-block: 4rem !important;
    }

    .hero-bg .hero-title {
        font-size: clamp(2.4rem, 10.5vw, 3.2rem);
    }

    .hero-description {
        font-size: 1rem !important;
    }

    .hero-buttons {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-buttons .mud-button-root {
        width: 100%;
    }

    .hero-proof {
        align-items: flex-start;
        flex-direction: column;
    }

    .hero-media-chrome {
        height: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-media-frame {
        transform: none;
    }

    .hero-gradient-title {
        animation: none;
        background-position: 58% 58%;
    }
}

@media (forced-colors: active) {
    .hero-gradient-title {
        animation: none;
        background: none;
        color: CanvasText;
        -webkit-text-fill-color: currentColor;
    }
}

/* Skip-link and programmatic focus remain visible only when useful to keyboard users. */
.skip-link {
    background: #fff;
    color: #121212;
    left: 1rem;
    padding: 0.75rem 1rem;
    position: fixed;
    top: -5rem;
    z-index: 10000;
}

.skip-link:focus {
    top: 1rem;
}

#main-content:focus {
    outline: none;
}

#main-heading:focus {
    outline: none;
}

/* ===== GSAP Animation Support ===== */
.gsap-word {
    display: inline-block;
    white-space: nowrap;
    margin-right: 0.3em;
    will-change: transform, opacity;
}

.magnetic-btn {
    display: inline-block;
    will-change: transform;
    transition: transform 0.1s ease-out;
}

/* Fix text wrapping - ensure proper line breaks */
.hero-animate-text .gsap-word,
.section-animate-text .gsap-word,
.download-animate-text .gsap-word {
    white-space: nowrap;
}

/* Hero text responsive sizing */
.hero-animate-text {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.2;
}

@media (max-width: 1200px) {
    .hero-animate-text {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
    }
}

@media (max-width: 768px) {
    .hero-animate-text {
        font-size: 2rem;
        line-height: 1.3;
    }
}

/* Prevent text wrapping issues */
.hero-animate-text,
.section-animate-text,
.download-animate-text {
    overflow: visible;
    word-wrap: normal;
}

/* Tablet and smaller responsive adjustments */
@media (max-width: 1024px) {
    .hero-animate-text {
        word-wrap: normal;
        hyphens: none;
    }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .hero-animate-text {
        word-wrap: normal;
        hyphens: none;
    }
    
    /* Reduce parallax effect on mobile for better performance */
    .aurora-blob {
        animation-duration: 30s;
    }
}

/* Smooth reveal for feature and download cards */
.feature-animate,
.download-animate {
    will-change: transform, opacity;
}

/* Hero video parallax support */
.hero-video {
    will-change: transform;
}

/* Download tabs animation support */
.download-tabs {
    will-change: transform, opacity;
}

/* Mobile adjustments for GSAP */
@media (max-width: 768px) {
    .magnetic-btn {
        /* Disable magnetic effect on mobile for better touch experience */
        transform: none !important;
    }
}

/* Reduced motion for GSAP animations */
@media (prefers-reduced-motion: reduce) {
    .gsap-word,
    .magnetic-btn,
    .feature-animate,
    .download-animate,
    .hero-video,
    .download-tabs {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        will-change: auto;
    }
}

/* ===== Scroll Progress Bar ===== */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--redot-brand), var(--redot-brand-dark), var(--redot-brand-deep));
    z-index: 9999;
    transition: width 0.1s ease-out;
}

/* ===== Glassmorphism Cards ===== */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 59, 10, 0.22);
}

/* ===== 3D Tilt Effect ===== */
.tilt-card {
    transform-style: preserve-3d;
    perspective: 1000px;
    will-change: transform;
}

.tilt-card-inner {
    transition: transform 0.15s ease-out;
}

/* ===== Stats Counter Section ===== */
.stats-section {
    background: #0e0e12;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 16px;
}

@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 640px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-item {
    text-align: center;
    padding: 16px 8px;
}

.stat-number {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin-bottom: 4px;
    white-space: nowrap;
}

/* Release identifiers (raw tag names, e.g. "redot-4.6-stable") wrap readably
   at full width instead of being shrunk or clipped. */
.stat-number.stat-number--release {
    font-size: clamp(0.95rem, 0.45rem + 0.9vw, 1.125rem);
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
}

.stat-label {
    font-size: 0.75rem;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 59, 10, 0.11);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.stat-icon svg {
    color: var(--redot-brand);
    font-size: 22px;
}

/* Share one set of icon/value/label rows across every stat so wrapped values
   (release identifiers) and wrapped labels ("Redot Contributors") keep every
   row on the same baseline. Intra-row spacing stays margin-driven, so the
   row gap is collapsed to keep band separation unchanged. */
@supports (grid-template-rows: subgrid) {
    .stats-grid {
        gap: 0 16px;
        grid-template-rows: auto auto auto;
    }

    .stat-item {
        grid-row: span 3;
        display: grid;
        grid-template-rows: subgrid;
    }
}

/* Browsers without subgrid: uniform rows via fixed minimum slot heights. */
@supports not (grid-template-rows: subgrid) {
    .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .stat-number {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 2.5rem;
    }

    .stat-label {
        line-height: 1.2;
        min-height: 1.95em;
    }
}

/* Counter animation */
.counter-animate {
    display: inline-block;
}

/* ===== Community Card Enhanced ===== */
.community-card-enhanced {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.community-card-enhanced::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 59, 10, 0.11) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.community-card-enhanced:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 59, 10, 0.34);
}

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

.community-card-icon {
    transition: transform 0.3s ease;
}

.community-card-enhanced:hover .community-card-icon {
    transform: scale(1.1) rotate(5deg);
}

/* ===== Community Page Hierarchy ===== */
.community-eyebrow {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
}

.community-section-intro {
    color: rgba(255, 255, 255, 0.72) !important;
    line-height: 1.65;
    margin-inline: auto;
    max-width: 42rem;
}

.community-muted {
    color: rgba(255, 255, 255, 0.72) !important;
    line-height: 1.55;
}

.community-space-card {
    height: 100%;
}

.community-space-body {
    align-items: flex-start;
    display: flex;
    gap: 1.25rem;
    height: 100%;
}

.community-space-icon {
    align-items: center;
    border-radius: 14px;
    display: flex;
    flex: 0 0 auto;
    height: 56px;
    justify-content: center;
    width: 56px;
}

.community-space-copy {
    align-items: flex-start;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.375rem;
    text-align: left;
}

.community-join-btn {
    border-radius: 10px;
    font-weight: 600;
    margin-top: 0.625rem;
    text-transform: none;
}

.community-follow-row {
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    color: inherit;
    display: flex;
    gap: 0.875rem;
    height: 100%;
    padding: 0.75rem 1rem;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.community-follow-row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 59, 10, 0.34);
}

.community-follow-row:focus-visible {
    border-color: var(--redot-brand);
    outline: 2px solid var(--redot-brand);
    outline-offset: 2px;
}

.community-follow-icon {
    align-items: center;
    border-radius: 10px;
    display: flex;
    flex: 0 0 auto;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.community-follow-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.community-follow-name {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
}

.community-follow-desc {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.85rem;
    line-height: 1.4;
}

.community-follow-arrow {
    color: rgba(255, 255, 255, 0.65);
    flex: 0 0 auto;
    margin-left: auto;
}

.community-follow-row:hover .community-follow-arrow {
    color: var(--redot-brand);
}

@media (max-width: 599px) {
    .community-space-body {
        gap: 1rem;
    }

    .community-space-copy {
        align-items: stretch;
    }

    .community-join-btn {
        align-self: stretch;
    }

    .community-join-btn .mud-button-root {
        width: 100%;
    }
}

/* ===== Skeleton Loaders ===== */
.skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 8px;
}

.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
}

.skeleton-text-sm {
    height: 12px;
    width: 60%;
}

.skeleton-button {
    height: 48px;
    width: 200px;
    border-radius: 10px;
}

.skeleton-card {
    height: 120px;
    border-radius: 12px;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== Enhanced Button Glow ===== */
.btn-glow {
    position: relative;
    overflow: hidden;
}

.btn-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, var(--redot-brand), var(--redot-brand-dark), var(--redot-brand-deep), var(--redot-brand));
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: btn-glow-rotate 3s linear infinite;
}

.btn-glow:hover::before {
    opacity: 1;
}

@keyframes btn-glow-rotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===== Floating Animation for Icons ===== */
.float-animation {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ===== Pulse Animation ===== */
.pulse-animation {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ===== Mobile Adjustments for New Features ===== */
@media (max-width: 768px) {
    .stat-number {
        font-size: 1.75rem;
    }
    
    .community-card-enhanced:hover {
        transform: translateY(-4px);
    }
    
    .tilt-card {
        transform-style: flat;
    }
}

/* ===== Team Page ===== */
.team-hero {
    background: linear-gradient(135deg, var(--redot-ink-deep) 0%, #171318 52%, var(--redot-ink) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    position: relative;
}

.team-hero-container {
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.team-eyebrow {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
}

.team-card {
    display: flex;
    height: 100%;
}

.team-card > div {
    flex: 1;
    /* Lift content above the card's ::before hover overlay, which is
       positioned over the whole card and otherwise swallows clicks on
       the in-card social links. */
    position: relative;
    z-index: 1;
}

.team-avatar {
    border-radius: 50%;
    flex-shrink: 0;
    height: 96px;
    object-fit: cover;
    width: 96px;
}

.team-avatar-fallback {
    align-items: center;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.18), transparent 55%),
        linear-gradient(140deg, var(--redot-brand-deep), var(--redot-brand-dark) 55%, var(--redot-brand));
    border: 2px solid rgba(255, 59, 10, 0.35);
    box-shadow: 0 0 24px rgba(255, 59, 10, 0.22);
    display: flex;
    justify-content: center;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.team-avatar-fallback span {
    color: #fff;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.team-card:hover .team-avatar-fallback {
    box-shadow: 0 0 36px rgba(255, 59, 10, 0.38);
    transform: scale(1.04);
}

.team-avatar-photo {
    border: 2px solid rgba(255, 59, 10, 0.35);
    box-shadow: 0 0 24px rgba(255, 59, 10, 0.22);
}

.team-role {
    color: var(--redot-brand);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    margin: 0;
    text-transform: uppercase;
}

.team-bio {
    margin: 0;
}

.team-department {
    margin-bottom: 4.5rem;
}

.team-department:last-child {
    margin-bottom: 0;
}

.team-socials {
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: auto;
    padding-top: 14px;
    width: 100%;
}

.team-social-link {
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.72);
    display: flex;
    height: 32px;
    justify-content: center;
    transition: all 0.2s ease;
    width: 32px;
}

.team-social-link:hover {
    background: rgba(255, 59, 10, 0.12);
    border-color: rgba(255, 59, 10, 0.42);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .team-card:hover {
        transform: translateY(-4px);
    }

    .team-social-link:hover {
        transform: none;
    }
}

/* ===== Reduced Motion for New Animations ===== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .scroll-progress,
    .skeleton,
    .section-divider-animated::after,
    .btn-glow::before,
    .float-animation,
    .pulse-animation {
        animation: none !important;
    }
    
    .glass-card:hover,
    .community-card-enhanced:hover {
        transform: none;
    }
}