/* ==========================================
   FUTURESPORE - Solarpunk Bio-Futuristic Design System
   Brutalist / Glassmorphic / Immersive Organic
   ========================================== */

/* Google Fonts loaded via <link> in HTML for better performance */

/* Custom Fonts */
@font-face {
    font-family: 'Bicubik';
    src: url('fonts/Bicubik-71qR.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Struktur';
    src: url('fonts/STRUKTUR-2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Futura Condensed';
    src: url('fonts/futura-medium-condensed-bt.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'The Belt';
    src: url('fonts/the-belt.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ==========================================
   Design Tokens
   ========================================== */
:root {
    /* Core palette - Solarpunk Bio-Futuristic */
    --color-bg: #050505;
    --color-bg-elevated: #0a0f0a;
    --color-surface: rgba(144, 238, 144, 0.03);
    --color-border: rgba(144, 238, 144, 0.08);

    /* Accent colors - Mycelial greens */
    --color-primary: #9ff79a;
    --color-accent: #56b54d;
    --color-glow: rgba(159, 247, 154, 0.4);
    --color-primary-dim: rgba(159, 247, 154, 0.1);

    /* Text hierarchy */
    --color-text: #f0f0f0;
    --color-text-dim: #a0b0a0;
    --color-text-muted: #809080;

    /* Functional */
    --color-error: #f87171;
    --color-success: #9ff79a;

    /* Overlay backgrounds */
    --color-overlay: #000000a6;
    --color-navbar-bg: #000000ad;

    /* Typography — primary */
    --font-display: 'Bicubik', sans-serif;
    --font-body: 'Inconsolata', monospace;
    --font-accent: 'Struktur', sans-serif;
    --font-ui: 'Exo', sans-serif;

    /* Typography — extended */
    --font-mono: 'Inconsolata', monospace;
    --font-condensed: 'Futura Condensed', 'Futura', sans-serif;
    --font-belt: 'The Belt', serif;

    /* Glassmorphism */
    --glass-bg: rgba(5, 5, 5, 0.55);
    --glass-bg-dense: rgba(5, 5, 5, 0.78);
    --glass-border: rgba(159, 247, 154, 0.12);
    --glass-blur: 20px;

    /* Z-index layers */
    --z-neural: -2;
    --z-neural-overlay: -1;
    --z-content: 1;
    --z-glass: 10;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 5rem;
    --space-4xl: 8rem;

    /* Layout */
    --container-max: 1400px;
    --container-narrow: 940px;
    --nav-height: 80px;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height);
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Body vignette — depth over neural bg */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: var(--z-neural-overlay);
    pointer-events: none;
    background: radial-gradient(
        ellipse 80% 70% at 50% 50%,
        transparent 0%,
        rgba(5, 5, 5, 0.3) 50%,
        rgba(5, 5, 5, 0.7) 100%
    );
}

::selection {
    background: var(--color-primary);
    color: var(--color-bg);
}

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

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

/* ==========================================
   Neural Background Canvas
   ========================================== */
#neural-bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-neural);
    pointer-events: none;
}

/* ==========================================
   Noise Texture Overlay
   ========================================== */
.noise-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ==========================================
   Glass Panel Utility
   ========================================== */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

.glass-dense {
    background: var(--glass-bg-dense);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

/* ==========================================
   Container
   ========================================== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.container-narrow {
    width: 100%;
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

@media (max-width: 768px) {
    .container, .container-narrow {
        padding: 0 var(--space-md);
    }
}

/* ==========================================
   Navigation
   ========================================== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    z-index: 100;
    background: linear-gradient(to bottom, rgba(5, 5, 5, 0.6) 0%, transparent 100%);
    overflow: visible;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.nav-logo img {
    height: clamp(85px, 14vw, 110px);
    width: auto;
}

.nav-menu {
    display: flex;
    gap: var(--space-xl);
    list-style: none;
}

.nav-link {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-primary);
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-sm);
}

.hamburger {
    display: block;
    width: 28px;
    height: 2px;
    background: var(--color-text);
    position: relative;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 2px;
    background: var(--color-text);
    left: 0;
    transition: var(--transition-base);
}

.hamburger::before { top: -9px; }
.hamburger::after { top: 9px; }

.nav-toggle.active .hamburger { background: transparent; }
.nav-toggle.active .hamburger::before { top: 0; transform: rotate(45deg); }
.nav-toggle.active .hamburger::after { top: 0; transform: rotate(-45deg); }

/* ---- Nav Dropdown (desktop) ---- */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    /* Reset button defaults, match .nav-link */
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: var(--transition-fast);
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.active {
    color: var(--color-primary);
}

/* Chevron */
.nav-dropdown-toggle::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--transition-fast);
}

.nav-dropdown-toggle.active::after {
    transform: rotate(-135deg) translateY(-2px);
}

/* Dropdown menu panel */
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    list-style: none;
    background: var(--glass-bg-dense);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    padding: var(--space-sm) 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

/* Invisible bridge to cover gap between toggle and menu */
.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    height: 10px;
}

.nav-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.nav-dropdown-menu li {
    list-style: none;
}

.nav-dropdown-menu a {
    display: block;
    padding: var(--space-md) var(--space-xl);
    font-family: var(--font-condensed);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-dim);
    transition: color var(--transition-fast), background var(--transition-fast);
    white-space: nowrap;
}

.nav-dropdown-menu a:hover {
    color: var(--color-primary);
    background: rgba(159, 247, 154, 0.05);
}

@media (max-width: 768px) {
    .nav {
        mix-blend-mode: normal;
        background: rgba(5, 5, 5, 0.95);
    }
    .nav-toggle { display: block; }

    .nav-menu {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(180deg,
            rgba(10, 15, 10, 0.98) 0%,
            rgba(5, 8, 5, 0.99) 100%
        );
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--space-2xl);
        transform: translateX(100%);
        transition: var(--transition-slow);
        border-top: 2px solid rgba(80, 100, 80, 0.3);
    }

    .nav-menu.active { transform: translateX(0); }

    .nav-link {
        font-size: 1.25rem;
        padding-bottom: 6px;
    }
    .nav-dropdown-toggle { font-size: 1.25rem; }

    /* LED dots slightly larger on mobile */
    .nav-link::before {
        box-shadow: 0 0 6px var(--color-primary);
    }
    .nav-link:hover::before,
    .nav-link.active::before {
        width: 6px;
        height: 6px;
        margin-right: 8px;
    }

    /* Mobile: accordion instead of hover */
    .nav-dropdown {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .nav-dropdown-menu {
        position: static;
        transform: none;
        min-width: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: max-height 0.4s ease;
    }

    .nav-dropdown-toggle.active + .nav-dropdown-menu,
    .nav-dropdown-menu.show {
        max-height: 300px;
    }

    .nav-dropdown-toggle.active + .nav-dropdown-menu {
        max-height: 300px;
    }

    /* Dropdown chevron — indicate expandable */
    .nav-dropdown-toggle::after {
        border-color: var(--color-text-dim);
        width: 7px;
        height: 7px;
    }

    .nav-dropdown-menu a {
        text-align: center;
        padding: var(--space-sm) var(--space-lg);
        font-size: 1rem;
        color: var(--color-text-dim);
        transition: color var(--transition-fast);
    }

    .nav-dropdown-menu a:hover,
    .nav-dropdown-menu a:active {
        color: var(--color-primary);
    }
}

/* ---- Nav Y2K Chrome Enhancements ---- */

/* Smooth transition for scroll state */
.nav {
    transition: background var(--transition-base), box-shadow var(--transition-base);
}

/* 1. Chrome bottom edge bezel */
.nav::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%, #404540 15%, #707570 35%,
        #a0a5a0 50%,
        #707570 65%, #404540 85%, transparent 100%
    );
    opacity: 0.4;
    transition: opacity var(--transition-base), background var(--transition-base);
    z-index: 1;
}

/* 7. Scrolled state — chrome toolbar */
.nav.scrolled {
    background: linear-gradient(180deg,
        rgba(20, 25, 20, 0.96) 0%,
        rgba(12, 16, 12, 0.94) 100%
    );
    box-shadow:
        0 2px 0 0 rgba(80, 100, 80, 0.25),
        0 4px 16px rgba(0, 0, 0, 0.4);
}

.nav.scrolled::after {
    opacity: 0.8;
    background: linear-gradient(90deg,
        transparent 0%, #304030 15%, #508050 30%, #70b070 45%,
        #9ff79a 50%,
        #70b070 55%, #508050 70%, #304030 85%, transparent 100%
    );
}

/* 2 & 4. Nav link LED + chrome underline */
.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-bottom: 4px;
    background-image: linear-gradient(90deg,
        transparent, #505550, #808880, #a0a8a0, #808880, #505550, transparent
    );
    background-position: bottom center;
    background-size: 0% 2px;
    background-repeat: no-repeat;
    transition: color 150ms ease, background-size 300ms ease;
}

.nav-link:hover,
.nav-link.active {
    background-size: 100% 2px;
}

/* LED indicator dot */
.nav-link::before {
    content: '';
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 4px var(--color-primary);
    margin-right: 0;
    transition: width 150ms ease, height 150ms ease, margin 150ms ease;
    flex-shrink: 0;
}

.nav-link:hover::before {
    width: 5px;
    height: 5px;
    margin-right: 6px;
    animation: led-blink 1.2s infinite;
}

.nav-link.active::before {
    width: 5px;
    height: 5px;
    margin-right: 6px;
    animation: none;
}

/* 3. Chrome-panel dropdown */
.nav-dropdown-menu {
    background: linear-gradient(180deg, #151a15 0%, #0a0f0a 100%);
    border: 2px solid #505850;
    border-top-color: #687068;
    border-left-color: #586058;
    border-right-color: #485048;
    border-bottom-color: #384038;
    box-shadow:
        inset 0 1px 0 rgba(159, 247, 154, 0.06),
        0 8px 24px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 100;
}

.nav-dropdown-menu a:hover {
    background: rgba(159, 247, 154, 0.06);
    color: var(--color-primary);
}

/* 5. Logo status lights */
.nav-status {
    display: none;
    align-items: center;
    gap: 5px;
    margin-left: var(--space-md);
    opacity: 0.55;
    transition: opacity var(--transition-base);
}

.nav.scrolled .nav-status {
    opacity: 0.85;
}

.nav-status .y2k-status-label {
    font-size: 0.5rem;
    letter-spacing: 0.1em;
}

.nav-status .y2k-status-light {
    width: 5px;
    height: 5px;
}

/* 6. Chrome hamburger + mobile overrides */
@media (max-width: 768px) {
    .nav-toggle {
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 50%;
        border: 2px solid #505850;
        background: linear-gradient(145deg, #252a25 0%, #151a15 100%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 2px 6px rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    .nav-toggle:active {
        box-shadow:
            inset 0 2px 4px rgba(0, 0, 0, 0.4),
            0 1px 2px rgba(0, 0, 0, 0.2);
    }

    .nav-toggle.active {
        border-color: var(--color-primary);
        box-shadow:
            0 0 8px rgba(159, 247, 154, 0.2),
            inset 0 1px 0 rgba(159, 247, 154, 0.1);
    }

    .nav-status {
        display: none;
    }

    /* Mobile dropdown — improved accordion */
    .nav-dropdown-menu {
        background: none;
        border: none;
        box-shadow: none;
        border-radius: 0;
        margin-top: var(--space-sm);
    }

    .nav-dropdown-menu a {
        position: relative;
        padding: var(--space-sm) var(--space-lg);
        font-size: 0.95rem;
        color: var(--color-text-dim);
        text-align: center;
        border-left: 2px solid transparent;
        transition: color var(--transition-fast), border-color var(--transition-fast);
    }

    .nav-dropdown-menu a:hover,
    .nav-dropdown-menu a:active {
        color: var(--color-primary);
        border-left-color: var(--color-primary);
    }

    .nav.scrolled {
        background: rgba(12, 16, 12, 0.96);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .nav-status .y2k-status-label {
        display: none;
    }
}

/* nav-logo uses clamp() for fluid sizing — no breakpoint overrides needed */

/* ==========================================
   Hero Section — Full-Bleed Image
   ========================================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

/* Full-bleed background image */
.hero-image {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

/* Gradient overlays — dark at bottom for text legibility, subtle green tint */
.hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(5, 5, 5, 1) 0%, rgba(5, 5, 5, 0.8) 30%, rgba(5, 5, 5, 0.3) 55%, transparent 75%),
        linear-gradient(to bottom, rgba(5, 5, 5, 0.4) 0%, transparent 30%);
    pointer-events: none;
}

/* Content — sits at bottom over the gradient */
.hero-content {
    position: relative;
    z-index: var(--z-content);
    padding: 0 clamp(2rem, 8vw, 10rem) var(--space-4xl);
    max-width: var(--container-max);
    width: 100%;
}

.hero-logo {
    height: clamp(40px, 6vw, 70px);
    width: auto;
    margin-bottom: var(--space-xl);
    filter: drop-shadow(0 2px 20px rgba(0, 0, 0, 0.5));
}

.hero-headline {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 6.5vw, 5.5rem);
    color: #fff;
    line-height: 1.05;
    max-width: 800px;
    margin-bottom: var(--space-lg);
    text-shadow: 0 2px 40px rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
    word-break: break-word;
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    max-width: 620px;
    margin-bottom: var(--space-2xl);
}

/* Hero CTAs */
.hero-ctas {
    display: flex;
    gap: var(--space-lg);
    align-items: center;
    flex-wrap: wrap;
}

.cta-primary {
    display: inline-block;
    font-family: var(--font-accent);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(5, 15, 5, 0.8);
    padding: 14px 38px;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 16px;
    cursor: pointer;
    background: linear-gradient(
        180deg,
        #c8ffb8 0%,
        #9ff79a 45%,
        #6ecf68 100%
    );
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.35),
        0 0 14px rgba(159, 247, 154, 0.2),
        inset 0 3px 2px rgba(255, 255, 255, 0.65),
        inset 0 -2px 2px rgba(0, 0, 0, 0.18);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: all var(--transition-fast);
}

.cta-primary:hover {
    background: linear-gradient(
        180deg,
        #dfffcf 0%,
        #b8ffb0 45%,
        #9ff79a 100%
    );
    color: #050505;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 24px rgba(159, 247, 154, 0.4),
        inset 0 3px 2px rgba(255, 255, 255, 0.5),
        inset 0 -2px 2px rgba(0, 0, 0, 0.12);
}

.cta-outline {
    display: inline-block;
    font-family: var(--font-accent);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(5, 15, 5, 0.8);
    padding: 14px 38px;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 16px;
    cursor: pointer;
    background: linear-gradient(
        180deg,
        #d4e0d4 0%,
        #a4b4a4 40%,
        #c4d0c4 100%
    );
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.35),
        inset 0 3px 2px rgba(255, 255, 255, 0.65),
        inset 0 -2px 2px rgba(0, 0, 0, 0.18);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: all var(--transition-fast);
}

.cta-outline:hover {
    background: linear-gradient(
        180deg,
        #c8ffb8 0%,
        #9ff79a 45%,
        #6ecf68 100%
    );
    color: #050505;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 18px rgba(159, 247, 154, 0.3),
        inset 0 3px 2px rgba(255, 255, 255, 0.5),
        inset 0 -2px 2px rgba(0, 0, 0, 0.12);
}

/* Scroll indicator — bottom-center */
.hero-scroll-indicator {
    position: absolute;
    bottom: var(--space-xl);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    z-index: var(--z-content);
}

.scroll-text {
    font-family: var(--font-condensed);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.4);
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--color-primary), transparent);
    animation: scroll-pulse 2s ease-in-out infinite;
}

@keyframes scroll-pulse {
    0%, 100% { transform: scaleY(0.5); opacity: 0.3; }
    50% { transform: scaleY(1); opacity: 1; }
}

@media (max-width: 768px) {
    .hero-content {
        padding: 0 var(--space-xl) var(--space-3xl);
    }

    .hero-scroll-indicator {
        display: none;
    }

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

@media (max-width: 480px) {
    .hero-content {
        padding: 0 var(--space-md) var(--space-2xl);
    }

    .hero-subtitle {
        font-size: clamp(1rem, 4vw, 1.2rem);
    }
}

/* ==========================================
   Contact / Inner Page Hero (no image, neural bg only)
   ========================================== */
.contact-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 45vh;
    padding: calc(80px + var(--space-3xl)) var(--space-xl) var(--space-3xl);
    text-align: center;
}

.contact-hero-content {
    position: relative;
    z-index: var(--z-content);
    max-width: 700px;
}

.contact-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.05;
    color: var(--color-text);
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
    text-shadow: 0 0 40px rgba(159, 247, 154, 0.15);
}

.contact-hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.6;
    color: var(--color-text-dim);
}

/* ==========================================
   Section Base
   ========================================== */
.section {
    padding: var(--space-3xl) 0;
    position: relative;
}

@media (max-width: 480px) {
    .section {
        padding: var(--space-2xl) 0;
    }
}

/* Ghost watermark behind section headers */
.section-ghost {
    position: absolute;
    top: -0.2em;
    left: -0.05em;
    font-family: var(--font-display);
    font-size: clamp(8rem, 18vw, 16rem);
    line-height: 1;
    -webkit-text-stroke: 1.5px rgba(159, 247, 154, 0.05);
    -webkit-text-fill-color: transparent;
    color: transparent;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

/* Section number */
.section-number {
    font-family: var(--font-belt);
    font-size: 3rem;
    color: rgba(159, 247, 154, 0.08);
    line-height: 1;
    margin-bottom: var(--space-sm);
}

/* ==========================================
   Manifesto Band
   ========================================== */
.manifesto-band {
    position: relative;
    border-top: 1px solid rgba(159, 247, 154, 0.2);
    border-bottom: 1px solid rgba(159, 247, 154, 0.2);
    padding: var(--space-3xl) 0;
    overflow: hidden;
}

.manifesto-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    text-align: center;
}

.manifesto-text {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3.5vw, 2.8rem);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.2;
    text-transform: uppercase;
}

.manifesto-highlight {
    color: var(--color-primary);
    text-shadow: 0 0 30px rgba(159, 247, 154, 0.4), 0 0 60px rgba(159, 247, 154, 0.15);
}

@media (max-width: 768px) {
    .manifesto-inner {
        padding: 0 var(--space-md);
    }
}

/* ==========================================
   Featured Sporecast — Asymmetric Split
   ========================================== */
.sporecast-section {
    padding: var(--space-4xl) 0;
}

.sporecast-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    max-width: var(--container-max);
    margin: 0 auto;
    min-height: 500px;
}

.sporecast-meta {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    padding: clamp(2rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: var(--z-glass);
}

.sporecast-label {
    font-family: var(--font-accent);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
}

.sporecast-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 4vw, 3.2rem);
    line-height: 1.1;
    color: #fff;
    margin-bottom: var(--space-xl);
}

.sporecast-details {
    display: flex;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
    flex-wrap: wrap;
}

.sporecast-date {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.sporecast-tag {
    font-family: var(--font-body);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    background: var(--color-primary-dim);
    padding: var(--space-xs) var(--space-sm);
}

.sporecast-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-primary);
    transition: var(--transition-base);
}

.sporecast-link::after {
    content: '\2192';
    transition: transform var(--transition-fast);
}

.sporecast-link:hover::after {
    transform: translateX(5px);
}

.sporecast-image {
    position: relative;
    overflow: hidden;
    clip-path: polygon(8% 0, 100% 0, 100% 100%, 0% 100%);
}

.sporecast-image.y2k-screen-inset {
    clip-path: none;
    overflow: hidden;
}

.sporecast-image.y2k-screen-inset img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.sporecast-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform var(--transition-slow);
}

.sporecast-image:hover img {
    transform: scale(1.05);
}

/* Gradient overlay on left edge of image */
.sporecast-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(to right, rgba(5, 5, 5, 0.6), transparent);
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .sporecast-grid {
        grid-template-columns: 1fr;
    }

    .sporecast-image {
        clip-path: none;
        order: -1;
    }

    .sporecast-meta {
        padding: var(--space-2xl);
    }
}

@media (max-width: 768px) {
    .sporecast-section {
        padding: var(--space-3xl) var(--space-md);
    }
}

@media (max-width: 480px) {
    .sporecast-section {
        padding: var(--space-2xl) var(--space-sm);
    }
}

/* ==========================================
   From The Grimoire — Asymmetric Masonry
   ========================================== */
.grimoire-section {
    padding: var(--space-4xl) 0;
}

.grimoire-header {
    position: relative;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--space-2xl);
}

.grimoire-header-left {
    position: relative;
}

.grimoire-heading {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    color: #fff;
    line-height: 1;
}

.grimoire-view-all {
    font-family: var(--font-condensed);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-dim);
    transition: color var(--transition-fast);
    flex-shrink: 0;
}

.grimoire-view-all:hover {
    color: var(--color-primary);
}

/* Grimoire grid */
.grimoire-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

/* Featured card — same structure as regular cards */
.grimoire-card-featured {
    position: relative;
    overflow: hidden;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    transition: border-color var(--transition-base), transform var(--transition-base);
    text-decoration: none;
    color: inherit;
}

.grimoire-card-featured:hover {
    border-color: var(--color-primary);
    transform: translateY(-3px);
}

.grimoire-card-featured .grimoire-card-img {
    overflow: hidden;
    aspect-ratio: 8 / 5;
}

.grimoire-card-featured .grimoire-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}

.grimoire-card-featured:hover .grimoire-card-img img {
    transform: scale(1.05);
}

.grimoire-card-featured .grimoire-card-body {
    padding: var(--space-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.grimoire-card-featured .grimoire-card-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.25;
    color: #fff;
    transition: color var(--transition-fast);
}

.grimoire-card-featured:hover .grimoire-card-title {
    color: var(--color-primary);
}

.grimoire-card-featured .grimoire-card-tags {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
}

/* Standard grimoire cards */
.grimoire-card {
    display: flex;
    flex-direction: column;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    overflow: hidden;
    transition: border-color var(--transition-base), transform var(--transition-base);
    text-decoration: none;
    color: inherit;
}

.grimoire-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-3px);
}

.grimoire-card .grimoire-card-img {
    overflow: hidden;
    aspect-ratio: 8 / 5;
}

.grimoire-card .grimoire-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-base);
}

.grimoire-card:hover .grimoire-card-img img {
    transform: scale(1.05);
}

.grimoire-card .grimoire-card-body {
    padding: var(--space-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.grimoire-card .grimoire-card-tags {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
}

.grimoire-card .grimoire-card-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.25;
    color: #fff;
    transition: color var(--transition-fast);
}

.grimoire-card:hover .grimoire-card-title {
    color: var(--color-primary);
}

@media (max-width: 1024px) {
    .grimoire-grid {
        grid-template-columns: 1fr 1fr;
    }

    .grimoire-card-featured {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .grimoire-grid {
        grid-template-columns: 1fr;
        padding: 0 var(--space-md);
    }

    .grimoire-header {
        padding: 0 var(--space-md);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }
}

/* ==========================================
   Mission Section — Staggered Glass Blocks
   ========================================== */
.mission-section {
    padding: var(--space-4xl) 0;
}

.mission-header {
    position: relative;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
    margin-bottom: var(--space-3xl);
}

.mission-heading {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    color: #fff;
    line-height: 1;
}

.mission-blocks {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.mission-block {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    padding: var(--space-2xl) var(--space-2xl);
    max-width: 720px;
    position: relative;
}

.mission-block em {
    font-style: normal;
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: rgba(159, 247, 154, 0.3);
    text-underline-offset: 3px;
}

/* Alternating alignment */
.mission-block.align-left {
    align-self: flex-start;
    border-left: 3px solid var(--color-primary);
}

.mission-block.align-right {
    align-self: flex-end;
    border-right: 3px solid var(--color-accent);
}

.mission-block.align-center {
    align-self: center;
    border: 2px solid var(--color-primary);
    max-width: 800px;
    text-align: center;
}

.mission-block-number {
    position: absolute;
    top: -0.3em;
    left: var(--space-lg);
    font-family: var(--font-belt);
    font-size: 2.5rem;
    color: rgba(159, 247, 154, 0.06);
    line-height: 1;
    pointer-events: none;
}

.mission-block.align-right .mission-block-number {
    left: auto;
    right: var(--space-lg);
}

.mission-block.align-center .mission-block-number {
    left: 50%;
    transform: translateX(-50%);
}

.mission-block-text {
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
}

.mission-block.align-center .mission-block-text {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    color: #fff;
    line-height: 1.35;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .mission-blocks {
        padding: 0 var(--space-md);
    }

    .mission-block {
        max-width: 100%;
    }

    .mission-block.align-left,
    .mission-block.align-right,
    .mission-block.align-center {
        align-self: stretch;
    }

    .mission-block.align-right {
        border-right: none;
        border-left: 3px solid var(--color-accent);
    }

    .mission-header {
        padding: 0 var(--space-md);
    }
}

@media (max-width: 480px) {
    .mission-block {
        padding: var(--space-lg) var(--space-md);
    }

    .mission-blocks {
        padding: 0 var(--space-sm);
    }

    .founder-portrait {
        max-width: 100%;
    }

    .founder-section {
        padding: 0 var(--space-sm);
        gap: var(--space-lg);
    }

    .founder-manifesto {
        padding-left: var(--space-md);
    }
}

/* Mission blocks inside chrome-panel: remove glass bg, let chrome handle the frame */
.chrome-panel.mission-block {
    background: linear-gradient(
        168deg,
        #dce8dc 0%, #b8c8b8 6%, #ccdccc 14%, #a0b8a0 24%,
        #d4e4d4 32%, #88a488 44%, #b8ccb8 56%, #6e8a6e 66%,
        #9cb49c 76%, #7a947a 85%, #b4c8b4 93%, #98ac98 100%
    );
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    padding: 6px;
}

.chrome-panel.mission-block.align-left {
    border-left: none;
}

.chrome-panel.mission-block.align-right {
    border-right: none;
}

.chrome-panel.mission-block.align-center {
    border: none;
}

/* Number badges inside chrome-panel mission blocks */
.chrome-panel.mission-block .mission-block-number {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    font-family: var(--font-accent);
    font-size: 0.6rem;
    color: rgba(5, 15, 5, 0.7);
    pointer-events: auto;
    margin-bottom: var(--space-sm);
    display: inline-block;
}

@media (max-width: 768px) {
    .chrome-panel.mission-block.align-right {
        border-right: none;
        border-left: none;
    }
}

/* ==========================================
   Newsletter Section — Standalone Full-Width
   ========================================== */
.newsletter-section {
    padding: var(--space-4xl) 0;
    position: relative;
}

/* Top/bottom gradient fade — neural bg bleeds through */
.newsletter-section::before,
.newsletter-section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 120px;
    pointer-events: none;
    z-index: 0;
}

.newsletter-section::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(5, 5, 5, 0.5), transparent);
}

.newsletter-section::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(5, 5, 5, 0.5), transparent);
}

.newsletter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
    position: relative;
    z-index: var(--z-content);
    align-items: center;
}

.newsletter-copy {
    max-width: 500px;
}

.newsletter-heading {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    color: #fff;
    line-height: 1.1;
    margin-bottom: var(--space-lg);
}

.newsletter-subtext {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
}

.newsletter-form-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    padding: var(--space-2xl);
}

.newsletter-form {
    font-family: var(--font-body);
    color: var(--color-text);
}

.newsletter-form .form-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.newsletter-form .field-label {
    display: block;
    font-family: var(--font-accent);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-text-dim);
    margin-bottom: var(--space-sm);
}

.newsletter-form .text-field {
    width: 100%;
    padding: 14px 0;
    min-height: 44px;
    font-size: 1rem;
    font-family: var(--font-body);
    border: none;
    border-bottom: 1px solid var(--color-text-muted);
    color: var(--color-text);
    outline: none;
    background: transparent;
    transition: border-color var(--transition-fast);
}

.newsletter-form .text-field::placeholder {
    color: var(--color-text-muted);
}

.newsletter-form .text-field:focus {
    border-bottom-color: var(--color-primary);
}

.newsletter-form .submit-btn {
    margin-top: var(--space-md);
    background-color: var(--color-primary);
    color: var(--color-bg);
    font-family: var(--font-accent);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 14px 36px;
    border: 2px solid var(--color-primary);
    cursor: pointer;
    width: 100%;
    transition: var(--transition-base);
}

.newsletter-form .submit-btn:hover {
    background: transparent;
    color: var(--color-primary);
}

.newsletter-form .submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-success {
    background-color: rgba(86, 181, 77, 0.15);
    color: var(--color-primary);
    border: 1px solid rgba(159, 247, 154, 0.2);
    padding: var(--space-lg);
    margin-top: var(--space-lg);
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.form-error {
    background-color: rgba(248, 113, 113, 0.15);
    color: var(--color-error);
    border: 1px solid rgba(248, 113, 113, 0.2);
    padding: var(--space-lg);
    margin-top: var(--space-lg);
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.form-consent {
    margin-top: var(--space-sm);
    font-size: 0.6rem;
    color: var(--color-text-dim);
    font-family: var(--font-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.4;
    opacity: 0.7;
}

.form-consent a {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(159, 247, 154, 0.3);
    transition: border-color var(--transition-fast);
}

.form-consent a:hover {
    border-color: var(--color-primary);
}

@media (max-width: 768px) {
    .newsletter-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
        padding: 0 var(--space-md);
    }
}

@media (max-width: 480px) {
    .newsletter-grid {
        gap: var(--space-xl);
        padding: 0 var(--space-sm);
    }
}

/* ==========================================
   About Page — Shared Subpage Styles
   ========================================== */

/* About section header (ghost watermark + heading) */
.about-section-header {
    position: relative;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
    margin-bottom: var(--space-2xl);
}

.about-section-heading {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    color: #fff;
    line-height: 1;
}

/* Asymmetric 2-column split: image left, glass text right */
.about-split-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 0;
    max-width: var(--container-max);
    margin: 0 auto;
    min-height: 420px;
}

.about-split-image {
    overflow: hidden;
}

.about-split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-split-text {
    padding: clamp(2rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-lg);
}

.about-split-text p {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

/* Philosophy blocks reuse mission-block pattern */
.philosophy-blocks {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* Philosophy section image */
.about-philosophy-image {
    max-width: var(--container-max);
    margin: var(--space-2xl) auto 0;
    padding: 0 var(--space-xl);
}

.about-philosophy-image img {
    width: 100%;
    height: auto;
}

/* Founder Section */
.founder-section {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3xl);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
    align-items: start;
}

.founder-portrait {
    width: 340px;
    border: 1px solid var(--glass-border);
    overflow: hidden;
}

.founder-portrait img {
    width: 100%;
    height: auto;
    display: block;
}

.founder-info {
    padding-top: var(--space-md);
}

.founder-name-new {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    color: #fff;
    line-height: 1.1;
    margin-bottom: var(--space-sm);
}

.founder-role {
    font-family: var(--font-condensed);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-dim);
    margin-bottom: var(--space-xl);
}

.founder-manifesto {
    border-left: 3px solid var(--color-primary);
    padding-left: var(--space-xl);
    margin-bottom: var(--space-xl);
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}

.founder-bio-text {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: var(--space-lg);
}

@media (max-width: 1024px) {
    .about-split-grid {
        grid-template-columns: 1fr;
    }

    .about-split-image {
        height: 350px;
    }

    .founder-section {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .founder-portrait {
        width: 280px;
    }
}

@media (max-width: 768px) {
    .about-section-header {
        padding: 0 var(--space-md);
    }

    .about-split-image {
        height: 280px;
    }

    .about-split-text {
        padding: var(--space-2xl) var(--space-md);
    }

    .philosophy-blocks {
        padding: 0 var(--space-md);
    }

    .about-philosophy-image {
        padding: 0 var(--space-md);
    }

    .founder-section {
        padding: 0 var(--space-md);
    }

    .founder-portrait {
        width: 100%;
        max-width: min(280px, 85vw);
    }
}

/* ==========================================
   Contact Page — Inside Y2K Device Frame
   ========================================== */

/* Contact screen — single column layout (no sidebar) */
.contact-screen {
    flex-direction: column;
    align-items: stretch;
    min-height: 520px;
}

.contact-screen .y2k-screen-header {
    text-align: center;
    border-bottom: none;
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.contact-screen-content {
    width: 100%;
}

/* Textarea — needs internal padding inside the screen-inset */
.contact-form-fields textarea.text-field {
    padding: var(--space-md) var(--space-lg);
}

/* Give bottom bezel more room inside the curved screen-wrap */
.contact-device-section .y2k-bezel-bottom {
    padding-bottom: 16px;
}

.contact-device-section .chrome-label {
    font-size: 0.6rem;
    letter-spacing: 0.35em;
}

/* Form fields */
.contact-form-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.contact-form-fields .text-field {
    width: 100%;
    padding: 14px 0;
    min-height: 44px;
    font-size: 1rem;
    font-family: var(--font-body);
    border: none;
    border-bottom: 1px solid var(--color-text-muted);
    color: var(--color-text);
    outline: none;
    background: transparent;
    transition: border-color var(--transition-fast);
}

.contact-form-fields .text-field::placeholder {
    color: var(--color-text-muted);
}

.contact-form-fields .text-field:focus {
    border-bottom-color: var(--color-primary);
}

.contact-form-fields textarea.text-field {
    min-height: 150px;
    resize: vertical;
}

.contact-form-fields .field-label {
    display: block;
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-text-dim);
    margin-bottom: var(--space-sm);
}

/* Channels — chrome pill buttons */
.contact-channels {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(159, 247, 154, 0.08);
    position: relative;
    z-index: 5;
}

.contact-channels-label {
    font-family: var(--font-accent);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-muted);
    width: 100%;
    margin-bottom: var(--space-xs);
}

.contact-channels a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-accent);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #2a4a2a;
    padding: 10px 20px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 14px;
    text-decoration: none;
    background: linear-gradient(
        180deg,
        #d4e0d4 0%,
        #a4b8a4 40%,
        #bccabc 100%
    );
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.35),
        inset 0 2px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(0, 0, 0, 0.15);
    transition: all var(--transition-fast);
}

.contact-channels a:hover {
    background: linear-gradient(
        180deg,
        #c8ffb8 0%,
        #9ff79a 45%,
        #6ecf68 100%
    );
    color: #050505;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.3),
        0 0 18px rgba(159, 247, 154, 0.35),
        inset 0 2px 1px rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.contact-channels a .y2k-status-light {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .contact-screen {
        min-height: auto;
    }
    .contact-channels {
        gap: var(--space-sm);
    }
    .contact-channels a {
        font-size: 0.65rem;
        padding: 8px 14px;
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    .contact-channels {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }
    .contact-channels a {
        justify-content: center;
        width: 100%;
        padding: 10px 16px;
    }
}

/* ==========================================
   Y2K Device Frame System
   Thick organic chrome bezel with LED indicators,
   decorative buttons, and glossy specular highlight
   — inspired by Y2K consumer electronics
   (SOTAGI, iMac G3, Pokémon Mini, etc.)
   ========================================== */
.chrome-frame {
    position: relative;
    padding: 14px 16px;
    margin-bottom: var(--space-xl);
    /* Organic asymmetric shape — no two corners identical */
    border-radius: 32px 36px 28px 34px / 34px 28px 36px 32px;
    /* Thick silver-chrome metallic gradient with green undertone */
    background: linear-gradient(
        168deg,
        #dce8dc 0%,
        #b8c8b8 6%,
        #ccdccc 14%,
        #a0b8a0 24%,
        #d4e4d4 32%,
        #88a488 44%,
        #b8ccb8 56%,
        #6e8a6e 66%,
        #9cb49c 76%,
        #7a947a 85%,
        #b4c8b4 93%,
        #98ac98 100%
    );
    box-shadow:
        /* Deep floating shadow */
        0 16px 55px rgba(0, 0, 0, 0.6),
        0 6px 20px rgba(0, 0, 0, 0.35),
        /* Top edge bright specular — convex 3D illusion */
        inset 0 4px 2px rgba(255, 255, 255, 0.7),
        /* Left edge highlight */
        inset 4px 0 2px rgba(255, 255, 255, 0.25),
        /* Bottom edge shadow — convex illusion */
        inset 0 -4px 3px rgba(0, 0, 0, 0.4),
        /* Right edge shadow */
        inset -4px 0 2px rgba(0, 0, 0, 0.2);
    transition: box-shadow var(--transition-base);
}

/* Alternate organic shape on even items */
.chrome-frame:nth-child(even) {
    border-radius: 34px 30px 36px 32px / 30px 36px 32px 34px;
}

/* Glossy specular reflection — bubble highlight across top */
.chrome-frame::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 4%;
    right: 4%;
    height: 50%;
    border-radius: 30px 34px 50% 50% / 32px 28px 50% 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.45) 0%,
        rgba(255, 255, 255, 0.18) 20%,
        rgba(255, 255, 255, 0.05) 45%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 10;
}

/* Hover — green glow around chrome shell */
.chrome-frame:hover {
    box-shadow:
        0 16px 60px rgba(159, 247, 154, 0.12),
        0 6px 20px rgba(0, 0, 0, 0.35),
        0 0 35px rgba(159, 247, 154, 0.08),
        inset 0 4px 2px rgba(255, 255, 255, 0.75),
        inset 4px 0 2px rgba(255, 255, 255, 0.28),
        inset 0 -4px 3px rgba(0, 0, 0, 0.4),
        inset -4px 0 2px rgba(0, 0, 0, 0.2);
}

/* FAQ open state — stronger glow */
.chrome-frame:has(details[open]) {
    box-shadow:
        0 16px 65px rgba(159, 247, 154, 0.18),
        0 0 45px rgba(159, 247, 154, 0.1),
        0 6px 20px rgba(0, 0, 0, 0.35),
        inset 0 4px 2px rgba(255, 255, 255, 0.75),
        inset 4px 0 2px rgba(255, 255, 255, 0.28),
        inset 0 -4px 3px rgba(0, 0, 0, 0.4),
        inset -4px 0 2px rgba(0, 0, 0, 0.2);
}

/* --- LED Indicator Dots --- */
.chrome-leds {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 2px 0 8px;
    position: relative;
    z-index: 6;
}

.chrome-leds span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #c8ffb8, #4a8a3a);
    box-shadow:
        0 0 6px rgba(159, 247, 154, 0.5),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

/* LEDs glow brighter on active/open state */
.chrome-frame:has(details[open]) .chrome-leds span {
    background: radial-gradient(circle at 35% 35%, #eeffee, #9ff79a);
    box-shadow:
        0 0 10px rgba(159, 247, 154, 0.9),
        0 0 3px rgba(159, 247, 154, 0.5),
        inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

/* --- Decorative Buttons --- */
.chrome-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 8px 0 2px;
    position: relative;
    z-index: 6;
}

.chrome-btns span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(
        180deg,
        #d4e0d4 0%,
        #a4b4a4 40%,
        #c4d0c4 100%
    );
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.35),
        inset 0 2px 1px rgba(255, 255, 255, 0.65),
        inset 0 -1px 1px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.chrome-btns span.wide {
    width: 30px;
    height: 10px;
    border-radius: 5px;
}

/* --- Brand Label (embossed into bezel) --- */
.chrome-label {
    text-align: center;
    font-family: var(--font-accent);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    color: rgba(5, 15, 5, 0.55);
    padding: 4px 0 0;
    position: relative;
    z-index: 6;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ==========================================
   Y2K Full-Page Device
   One big gadget that contains all content
   ========================================== */
.y2k-device-full {
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
    padding: 10px 0 14px;
    /* No visible shell — wings and screen create the contour */
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
    /* Same chrome metallic gradient, scaled up */
    background: linear-gradient(
        168deg,
        #dce8dc 0%,
        #b8c8b8 6%,
        #ccdccc 14%,
        #a0b8a0 24%,
        #d4e4d4 32%,
        #88a488 44%,
        #b8ccb8 56%,
        #6e8a6e 66%,
        #9cb49c 76%,
        #7a947a 85%,
        #b4c8b4 93%,
        #98ac98 100%
    );
    box-shadow:
        0 20px 70px rgba(0, 0, 0, 0.65),
        0 8px 25px rgba(0, 0, 0, 0.4),
        inset 0 5px 3px rgba(255, 255, 255, 0.7),
        inset 5px 0 3px rgba(255, 255, 255, 0.25),
        inset 0 -5px 4px rgba(0, 0, 0, 0.45),
        inset -5px 0 3px rgba(0, 0, 0, 0.2);
}

/* Glossy specular — disabled, wings handle their own */
.y2k-device-full::before {
    display: none;
}

/* Larger LED cluster for big device */
.chrome-leds-lg {
    gap: 12px;
    padding: 6px 0 14px;
}

.chrome-leds-lg span {
    width: 12px;
    height: 12px;
    background: radial-gradient(circle at 35% 35%, #eeffee, #4a8a3a);
    box-shadow:
        0 0 10px rgba(159, 247, 154, 0.7),
        0 0 20px rgba(159, 247, 154, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* Larger button cluster for big device */
.chrome-btns-lg {
    gap: 10px;
    padding: 12px 0 4px;
}

.chrome-btns-lg span {
    width: 14px;
    height: 14px;
}

.chrome-btns-lg span.wide {
    width: 40px;
    height: 14px;
    border-radius: 7px;
}

/* ==========================================
   Y2K Gadget Details — bezels, buttons, grilles
   ========================================== */

/* --- Top Strip --- */
.y2k-bezel-top {
    position: relative;
    z-index: 6;
    padding: 8px 12% 8px;
}

/* Status indicator lights */
.y2k-status-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}

.y2k-status-light {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(60, 80, 60, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.15);
    margin-left: 10px;
}

.y2k-status-light:first-child {
    margin-left: 0;
}

.y2k-status-light.on {
    background: radial-gradient(circle at 35% 35%, #eeffee, #4a8a3a);
    box-shadow: 0 0 10px rgba(159, 247, 154, 0.8), 0 0 20px rgba(159, 247, 154, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.y2k-status-light.blink {
    background: radial-gradient(circle at 35% 35%, #ffffcc, #8a8a3a);
    box-shadow: 0 0 8px rgba(247, 247, 154, 0.7), 0 0 16px rgba(247, 247, 154, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.4);
    animation: y2k-blink 2s ease-in-out infinite;
}

@keyframes y2k-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.y2k-status-label {
    font-family: var(--font-accent);
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(5, 15, 5, 0.55);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Model label */
.y2k-model-label {
    text-align: center;
    font-family: var(--font-accent);
    font-size: clamp(0.45rem, 1.2vw, 0.6rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(5, 15, 5, 0.5);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    padding-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Device Body — 3-column: left grip / screen / right grip --- */
.y2k-device-body {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
    z-index: 2;
}

/* Side wings — bulging chrome grips with organic contour */
.y2k-wing {
    flex: 0 0 150px;
    min-height: 310px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 28px 18px;
    position: relative;
    z-index: 6;
    /* Each wing gets its own chrome shell */
    background: linear-gradient(
        168deg,
        #dce8dc 0%, #b8c8b8 6%, #ccdccc 14%, #a0b8a0 24%,
        #d4e4d4 32%, #88a488 44%, #b8ccb8 56%, #6e8a6e 66%,
        #9cb49c 76%, #7a947a 85%, #b4c8b4 93%, #98ac98 100%
    );
    box-shadow:
        0 14px 45px rgba(0, 0, 0, 0.55),
        0 6px 16px rgba(0, 0, 0, 0.35),
        inset 0 4px 2px rgba(255, 255, 255, 0.7),
        inset 0 -4px 3px rgba(0, 0, 0, 0.4);
}

/* Left grip — bulges left with organic pill shape */
.y2k-wing-left {
    border-radius: 60px 20px 20px 70px / 55px 18px 18px 65px;
    margin-right: -6px;
    box-shadow:
        -8px 12px 40px rgba(0, 0, 0, 0.5),
        0 6px 16px rgba(0, 0, 0, 0.3),
        inset 4px 4px 2px rgba(255, 255, 255, 0.65),
        inset 0 -4px 3px rgba(0, 0, 0, 0.35),
        inset -3px 0 2px rgba(0, 0, 0, 0.15);
}

/* Right grip — bulges right, mirror shape */
.y2k-wing-right {
    border-radius: 20px 60px 70px 20px / 18px 55px 65px 18px;
    margin-left: -6px;
    box-shadow:
        8px 12px 40px rgba(0, 0, 0, 0.5),
        0 6px 16px rgba(0, 0, 0, 0.3),
        inset -4px 4px 2px rgba(255, 255, 255, 0.65),
        inset 0 -4px 3px rgba(0, 0, 0, 0.35),
        inset 3px 0 2px rgba(0, 0, 0, 0.15);
}

/* Glossy specular on each wing */
.y2k-wing::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 8%;
    right: 8%;
    height: 50%;
    border-radius: 50px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.15) 20%,
        rgba(255, 255, 255, 0.03) 45%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 10;
}

/* Speaker grille */
.y2k-speaker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.y2k-speaker span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* D-pad */
.y2k-dpad {
    position: relative;
    width: 88px;
    height: 88px;
}

.y2k-dpad button {
    position: absolute;
    background: linear-gradient(180deg, #d0dcd0 0%, #a0b0a0 45%, #c0ccc0 100%);
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.35),
        inset 0 3px 2px rgba(255, 255, 255, 0.65),
        inset 0 -2px 2px rgba(0, 0, 0, 0.18);
}

.dpad-up {
    width: 28px;
    height: 32px;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    border-radius: 8px 8px 0 0;
}

.dpad-down {
    width: 28px;
    height: 32px;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    border-radius: 0 0 8px 8px;
}

.dpad-left {
    width: 32px;
    height: 28px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-radius: 8px 0 0 8px;
}

.dpad-right {
    width: 32px;
    height: 28px;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    border-radius: 0 8px 8px 0;
}

.dpad-center {
    width: 28px;
    height: 28px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: linear-gradient(180deg, #bccabc 0%, #90a490 50%, #b0c0b0 100%);
}

/* Charging port slot */
.y2k-port {
    width: 36px;
    height: 10px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Action buttons */
.y2k-action-btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.y2k-btn-round {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(180deg, #d4e0d4 0%, #a4b4a4 40%, #c4d0c4 100%);
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 3px 2px rgba(255, 255, 255, 0.7),
        inset 0 -2px 2px rgba(0, 0, 0, 0.2);
}

.y2k-btn-round.green {
    background: linear-gradient(180deg, #b8f0b0 0%, #6ecf68 45%, #9ff79a 100%);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.4),
        0 0 14px rgba(159, 247, 154, 0.3),
        inset 0 3px 2px rgba(255, 255, 255, 0.5),
        inset 0 -2px 2px rgba(0, 0, 0, 0.15);
}

.y2k-btn-pill {
    width: 62px;
    height: 22px;
    border-radius: 11px;
    background: linear-gradient(180deg, #d4e0d4 0%, #a4b4a4 40%, #c4d0c4 100%);
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 3px 2px rgba(255, 255, 255, 0.7),
        inset 0 -2px 2px rgba(0, 0, 0, 0.2);
}

/* Jog wheel */
.y2k-jog {
    position: relative;
    width: 70px;
    height: 70px;
}

.jog-outer {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, #c8d4c8 0%, #8ca08c 40%, #b0c0b0 70%, #94a894 100%);
    border: 1.5px solid rgba(0, 0, 0, 0.14);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 3px 3px rgba(255, 255, 255, 0.55),
        inset 0 -3px 3px rgba(0, 0, 0, 0.22);
}

.jog-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(180deg, #b8c8b8 0%, #7a947a 50%, #a8bca8 100%);
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    box-shadow:
        inset 0 2px 2px rgba(255, 255, 255, 0.45),
        inset 0 -2px 2px rgba(0, 0, 0, 0.22);
}

/* Mic holes */
.y2k-mic {
    display: flex;
    gap: 4px;
}

.y2k-mic span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* --- Bottom Strip --- */
.y2k-bezel-bottom {
    position: relative;
    z-index: 6;
    padding: 8px 12% 8px;
}

/* Mobile — stack vertically, wings hidden by later query */
@media (max-width: 768px) {
    .y2k-device-body {
        flex-direction: column;
    }
}

/* Screen wrapper — chrome bezel around the dark screen */
.y2k-screen-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 3;
    padding: 22px 28px;
    border-radius: 50% / 42%;
    background: linear-gradient(
        168deg,
        #dce8dc 0%, #b8c8b8 6%, #ccdccc 14%, #a0b8a0 24%,
        #d4e4d4 32%, #88a488 44%, #b8ccb8 56%, #6e8a6e 66%,
        #9cb49c 76%, #7a947a 85%, #b4c8b4 93%, #98ac98 100%
    );
    box-shadow:
        0 16px 55px rgba(0, 0, 0, 0.6),
        0 6px 20px rgba(0, 0, 0, 0.35),
        inset 0 5px 3px rgba(255, 255, 255, 0.7),
        inset 0 -5px 4px rgba(0, 0, 0, 0.45),
        inset 5px 0 4px rgba(255, 255, 255, 0.15),
        inset -5px 0 4px rgba(0, 0, 0, 0.15);
}

/* Glossy specular on screen surround */
.y2k-screen-wrap::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 10%;
    right: 10%;
    height: 45%;
    border-radius: 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.45) 0%,
        rgba(255, 255, 255, 0.15) 25%,
        rgba(255, 255, 255, 0.03) 50%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 10;
}

/* The Screen — dark display area with bulbous CRT glass */
.y2k-screen {
    position: relative;
    display: flex;
    border-radius: 42% / 34%;
    border: 2.5px solid rgba(0, 0, 0, 0.6);
    background:
        radial-gradient(ellipse 90% 80% at 40% 35%, rgba(30, 60, 30, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 70% 60% at 60% 65%, rgba(10, 30, 10, 0.15) 0%, transparent 50%),
        linear-gradient(180deg, #0c180c 0%, #060e06 100%);
    box-shadow:
        inset 0 8px 24px rgba(0, 0, 0, 0.6),
        inset 0 -6px 20px rgba(0, 0, 0, 0.4),
        inset 6px 0 16px rgba(0, 0, 0, 0.3),
        inset -6px 0 16px rgba(0, 0, 0, 0.3),
        0 2px 0 rgba(255, 255, 255, 0.12);
    padding: 4rem 6rem;
    gap: var(--space-lg);
    z-index: 2;
    overflow: hidden;
}

/* Bulbous glass reflection overlay */
.y2k-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse 80% 50% at 35% 25%, rgba(159, 247, 154, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 30% 20%, rgba(255, 255, 255, 0.07) 0%, transparent 50%);
    pointer-events: none;
    z-index: 20;
}

/* Sidebar — title + vertical tab nav */
.y2k-sidebar {
    flex: 0 0 160px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(159, 247, 154, 0.1);
    padding-right: var(--space-lg);
}

/* Scrollable content area */
.y2k-screen-content {
    flex: 1;
    min-width: 0;
    max-height: 440px;
    overflow-y: auto;
    padding-right: var(--space-sm);
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(159, 247, 154, 0.2) transparent;
}

.y2k-screen-content::-webkit-scrollbar {
    width: 5px;
}

.y2k-screen-content::-webkit-scrollbar-track {
    background: transparent;
}

.y2k-screen-content::-webkit-scrollbar-thumb {
    background: rgba(159, 247, 154, 0.2);
    border-radius: 3px;
}

.y2k-screen-content::-webkit-scrollbar-thumb:hover {
    background: rgba(159, 247, 154, 0.35);
}

/* Device section — extra top spacing when hero is removed */
.y2k-device-section {
    padding-top: calc(var(--space-4xl) + 80px);
}

/* Screen Header — title in sidebar */
.y2k-screen-header {
    text-align: left;
    padding-bottom: var(--space-md);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
    border-bottom: 1px solid rgba(159, 247, 154, 0.1);
    position: relative;
}

.y2k-screen-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    color: var(--color-primary);
    letter-spacing: 0.15em;
    line-height: 1.1;
    margin-bottom: var(--space-sm);
    text-shadow:
        0 0 30px rgba(159, 247, 154, 0.3),
        0 0 60px rgba(159, 247, 154, 0.1);
}

.y2k-screen-subtitle {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-dim);
    letter-spacing: 0.02em;
    line-height: 1.5;
}

/* FAQ items INSIDE the screen — simplified UI elements, not full devices */
.y2k-screen .faq-item {
    border-radius: 14px;
    border: 1px solid rgba(159, 247, 154, 0.06);
    background: rgba(159, 247, 154, 0.015);
    box-shadow: none;
    margin-bottom: var(--space-sm);
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-base);
}

.y2k-screen .faq-item:hover {
    border-color: rgba(159, 247, 154, 0.15);
    background: rgba(159, 247, 154, 0.035);
}

.y2k-screen details[open].faq-item {
    border-color: rgba(159, 247, 154, 0.2);
    background: rgba(159, 247, 154, 0.025);
    box-shadow: 0 0 25px rgba(159, 247, 154, 0.04);
}

/* Screen CTA at bottom */
.y2k-screen-cta {
    text-align: center;
    padding: var(--space-2xl) 0 var(--space-md);
    border-top: 1px solid rgba(159, 247, 154, 0.08);
    margin-top: var(--space-xl);
}

.y2k-screen-cta p:first-child {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: var(--color-text);
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
}

.y2k-screen-cta p:last-child {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text-dim);
}

.y2k-screen-cta a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(159, 247, 154, 0.3);
    transition: text-decoration-color var(--transition-fast);
}

.y2k-screen-cta a:hover {
    text-decoration-color: var(--color-primary);
}

@media (max-width: 768px) {
    .y2k-device-section {
        padding-top: calc(var(--space-3xl) + 60px);
    }
    .y2k-screen {
        flex-direction: column;
        gap: var(--space-md);
    }
    .y2k-sidebar {
        flex: none;
        border-right: none;
        border-bottom: 1px solid rgba(159, 247, 154, 0.1);
        padding-right: 0;
        padding-bottom: var(--space-md);
    }
    .y2k-screen-header {
        text-align: center;
        padding-bottom: var(--space-sm);
        margin-bottom: var(--space-sm);
        margin-top: var(--space-sm);
    }
    .y2k-screen-title {
        font-size: clamp(1.8rem, 6vw, 2.4rem);
    }
    .y2k-screen-subtitle {
        font-size: 0.8rem;
    }
}

/* --- Y2K Tab Navigation (vertical sidebar) --- */
.y2k-tabs {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.y2k-tab {
    font-family: var(--font-accent);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #2a4a2a;
    padding: 8px 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    text-align: left;
    width: 100%;
    cursor: pointer;
    background: linear-gradient(
        180deg,
        #d4e0d4 0%,
        #a4b8a4 40%,
        #bccabc 100%
    );
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.35),
        inset 0 2px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(0, 0, 0, 0.15);
    transition: all var(--transition-fast);
}

.y2k-tab:hover {
    background: linear-gradient(
        180deg,
        #e0eee0 0%,
        #b4c8b4 40%,
        #c8d8c8 100%
    );
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.3),
        0 0 12px rgba(159, 247, 154, 0.15),
        inset 0 2px 1px rgba(255, 255, 255, 0.65),
        inset 0 -1px 1px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.y2k-tab.active {
    color: #050505;
    background: linear-gradient(
        180deg,
        #c8ffb8 0%,
        #9ff79a 45%,
        #6ecf68 100%
    );
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.3),
        0 0 18px rgba(159, 247, 154, 0.35),
        inset 0 2px 1px rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px rgba(0, 0, 0, 0.1);
}

/* --- Y2K Panels --- */
.y2k-panel {
    display: none;
    animation: y2k-fade-in 0.3s ease;
}

.y2k-panel.active {
    display: block;
}

@keyframes y2k-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive FAQ device — mobile overrides
   (placed AFTER base tab/panel rules so they win the cascade) */
@media (max-width: 768px) {
    .y2k-wing {
        display: none;
    }
    .y2k-screen-wrap {
        padding: 12px 14px;
        border-radius: 20px;
    }
    .y2k-screen-wrap::before {
        display: none;
    }
    .y2k-screen {
        border-radius: 12px;
        padding: var(--space-lg) var(--space-md);
    }
    .y2k-tabs {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }
    .y2k-tab {
        width: auto;
        text-align: center;
        font-size: 0.65rem;
        padding: 8px 14px;
        border-radius: 8px;
        min-height: 36px;
    }
    .y2k-screen-content {
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }
    .y2k-device-full {
        margin: 0 var(--space-xs);
        padding: 8px 6px 10px;
    }
    .y2k-bezel-top {
        padding: 6px 10px;
    }
    .y2k-bezel-bottom {
        padding: 6px 8px;
    }
    .y2k-model-label {
        font-size: 0.55rem;
        letter-spacing: 0.15em;
    }
    .chrome-label {
        font-size: 0.55rem;
        letter-spacing: 0.2em;
    }
}

@media (max-width: 480px) {
    .y2k-wing {
        display: none;
    }
    .y2k-tab {
        font-size: 0.65rem;
        padding: 6px 10px;
        letter-spacing: 0.08em;
    }
    .y2k-screen {
        padding: var(--space-md) var(--space-sm);
        border-radius: 10px;
    }
    .y2k-screen-wrap {
        padding: 8px 10px;
        border-radius: 14px;
    }
    .y2k-device-full {
        margin: 0 4px;
        padding: 6px 6px 8px;
        border-radius: 14px;
    }
}

/* ==========================================
   FAQ Page — Y2K Chrome Accordion
   ========================================== */
.faq-group {
    margin-bottom: var(--space-3xl);
}

.faq-group:last-child {
    margin-bottom: 0;
}

.faq-group-title {
    font-family: var(--font-accent);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--color-primary);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(159, 247, 154, 0.15);
}

/* ==========================================
   G.A.I.A. Info Blocks (inside Y2K device screen)
   ========================================== */
.gaia-block {
    border-radius: 14px;
    border: 1px solid rgba(159, 247, 154, 0.06);
    background: rgba(159, 247, 154, 0.015);
    padding: var(--space-lg) var(--space-xl);
    margin-bottom: var(--space-sm);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.gaia-block:hover {
    border-color: rgba(159, 247, 154, 0.15);
    background: rgba(159, 247, 154, 0.035);
}

.gaia-block-label {
    font-family: var(--font-accent);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.gaia-block p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-dim);
}

.gaia-block p strong {
    color: var(--color-primary);
}

.gaia-block--highlight {
    border-color: rgba(159, 247, 154, 0.15);
    background: rgba(159, 247, 154, 0.03);
    text-align: center;
}

.gaia-block--highlight p {
    font-family: var(--font-display);
    font-size: clamp(0.9rem, 1.8vw, 1.15rem);
    color: var(--color-text);
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.gaia-tech-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: var(--space-lg) 0 var(--space-sm);
}

.gaia-tech-tag {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-dim);
    padding: 6px var(--space-md);
    border-radius: 10px;
    border: 1px solid rgba(159, 247, 154, 0.1);
    background: rgba(159, 247, 154, 0.02);
    transition: all var(--transition-fast);
}

.gaia-tech-tag:hover {
    border-color: rgba(159, 247, 154, 0.35);
    color: var(--color-primary);
    background: rgba(159, 247, 154, 0.05);
}

@media (max-width: 768px) {
    .gaia-block {
        padding: var(--space-md);
    }
    .gaia-block p {
        font-size: 0.88rem;
    }
    .gaia-block-label {
        font-size: 0.65rem;
    }
}

@media (max-width: 480px) {
    .gaia-block p {
        font-size: 0.82rem;
    }
}

/* --- G.A.I.A. Device Screen — custom layout (no sidebar) --- */

/* Override default y2k-screen flex direction for GAIA page */
.gaia-screen {
    flex-direction: column;
    padding: var(--space-xl) var(--space-2xl);
    gap: var(--space-md);
}

/* Top area: title + horizontal tabs */
.gaia-screen-top {
    flex: none;
    text-align: center;
    border-bottom: 1px solid rgba(159, 247, 154, 0.1);
    padding-bottom: var(--space-md);
}

.gaia-screen-header {
    margin-bottom: var(--space-md);
}

.gaia-screen-header .y2k-screen-title {
    margin-bottom: var(--space-xs);
}

.gaia-screen-header .y2k-screen-subtitle {
    font-size: 0.8rem;
}

/* Horizontal tabs */
.gaia-tabs-hz {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.gaia-tabs-hz .y2k-tab {
    width: auto;
    text-align: center;
    padding: 6px 14px;
    font-size: 0.6rem;
}

/* Body: avatar left + content right */
.gaia-screen-body {
    flex: 1;
    display: flex;
    gap: var(--space-xl);
    min-height: 0;
    align-items: stretch;
}

/* Content area inside gaia-screen-body */
.gaia-screen-body .y2k-screen-content {
    flex: 1;
    min-width: 0;
    max-height: 480px;
    order: 1;
    padding-bottom: var(--space-2xl);
}

/* --- G.A.I.A. Avatar column --- */
.gaia-avatar-column {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    order: 2;
}

.gaia-avatar-wrap {
    position: relative;
    width: 100%;
}

.gaia-avatar-img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    filter: brightness(1.05) contrast(1.02);
    mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 92%, transparent 100%);
}

/* Bioluminescent glow behind avatar */
.gaia-avatar-glow {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 140%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(159, 247, 154, 0.08) 0%,
        rgba(159, 247, 154, 0.03) 40%,
        transparent 70%
    );
    z-index: 1;
    pointer-events: none;
    animation: gaia-glow-breathe 4s ease-in-out infinite;
}

@keyframes gaia-glow-breathe {
    0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.6; transform: translateX(-50%) scale(0.95); }
}

/* HUD bar beneath avatar */
.gaia-avatar-hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 10px;
    margin-top: -4px;
    border-radius: 0 0 8px 8px;
    background: rgba(5, 10, 5, 0.85);
    border: 1px solid rgba(159, 247, 154, 0.12);
    border-top: none;
}

.gaia-hud-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gaia-hud-pulse {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 6px rgba(159, 247, 154, 0.6);
    animation: gaia-pulse 2s ease-in-out infinite;
}

@keyframes gaia-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(159, 247, 154, 0.6); }
    50% { opacity: 0.3; box-shadow: 0 0 3px rgba(159, 247, 154, 0.2); }
}

.gaia-hud-label {
    font-family: var(--font-accent);
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-primary);
    opacity: 0.7;
}

.gaia-hud-name {
    font-family: var(--font-body);
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    color: rgba(159, 247, 154, 0.35);
}

/* Tablet */
@media (max-width: 1024px) {
    .gaia-avatar-column {
        flex: 0 0 220px;
    }
    .gaia-screen {
        padding: var(--space-lg) var(--space-xl);
    }
}

/* Mobile: stack vertically — avatar on top, content below */
@media (max-width: 768px) {
    .gaia-screen {
        padding: var(--space-md);
    }
    .gaia-screen-body {
        flex-direction: column;
        gap: var(--space-md);
    }
    .gaia-avatar-column {
        flex: none;
        max-width: 180px;
        margin: 0 auto;
    }
    .gaia-screen-body .y2k-screen-content {
        max-height: none;
        overflow-y: visible;
    }
    .gaia-tabs-hz .y2k-tab {
        padding: 6px 12px;
        font-size: 0.65rem;
    }
}

/* Each FAQ item — dark inner "screen" recessed into the device bezel */
.faq-item {
    position: relative;
    margin: 0;
    padding: 0;
    border-radius: 20px 24px 16px 22px / 22px 16px 24px 20px;
    border: 1.5px solid rgba(0, 0, 0, 0.4);
    background: linear-gradient(180deg, #0c180c 0%, #060e06 100%);
    box-shadow:
        inset 0 3px 10px rgba(0, 0, 0, 0.7),
        inset 0 0 3px rgba(0, 0, 0, 0.4),
        0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
    z-index: 2;
}

.faq-question {
    position: relative;
    font-family: var(--font-display);
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--color-text);
    cursor: pointer;
    padding: var(--space-lg) var(--space-xl);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-lg);
    transition: color var(--transition-fast);
    z-index: 3;
}

.faq-question::-webkit-details-marker {
    display: none;
}

/* Toggle indicator — chunky raised Y2K button */
.faq-question::after {
    content: '+';
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: #2a4a2a;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: linear-gradient(180deg, #d4e0d4 0%, #a0b4a0 45%, #bccabc 100%);
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.35),
        inset 0 2px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(0, 0, 0, 0.15);
    transition: all var(--transition-fast);
}

.faq-question:hover {
    color: var(--color-primary);
}

.faq-question:hover::after {
    color: #1a3a1a;
    background: linear-gradient(180deg, #e0ece0 0%, #b0c4b0 45%, #c8d4c8 100%);
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.3),
        0 0 8px rgba(159, 247, 154, 0.15),
        inset 0 2px 1px rgba(255, 255, 255, 0.7),
        inset 0 -1px 1px rgba(0, 0, 0, 0.12);
}

details[open] .faq-question {
    color: var(--color-primary);
    border-bottom: 1px solid rgba(159, 247, 154, 0.08);
}

details[open] .faq-question::after {
    content: '\2212';
    color: #050505;
    background: linear-gradient(180deg, #c8ffb8 0%, #9ff79a 45%, #6ecf68 100%);
    border-color: rgba(159, 247, 154, 0.5);
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.3),
        0 0 12px rgba(159, 247, 154, 0.4),
        inset 0 2px 1px rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px rgba(0, 0, 0, 0.15);
}

.faq-answer {
    position: relative;
    padding: var(--space-lg) var(--space-xl) var(--space-xl);
    z-index: 3;
}

.faq-answer p {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-dim);
}

.faq-answer a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(159, 247, 154, 0.3);
    transition: text-decoration-color var(--transition-fast);
}

.faq-answer a:hover {
    text-decoration-color: var(--color-primary);
}

@media (max-width: 768px) {
    .faq-question {
        padding: var(--space-md) var(--space-lg);
        font-size: clamp(0.85rem, 2.5vw, 1rem);
        gap: var(--space-md);
    }
    .faq-question::after {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }
    .faq-answer {
        padding: var(--space-md) var(--space-lg) var(--space-lg);
    }
    .faq-answer p {
        font-size: 0.9rem;
    }
    .faq-item {
        border-radius: 12px;
    }
}

@media (max-width: 480px) {
    .faq-question {
        padding: var(--space-sm) var(--space-md);
    }
    .faq-question::after {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }
    .faq-answer {
        padding: var(--space-sm) var(--space-md) var(--space-md);
    }
    .faq-answer p {
        font-size: 0.85rem;
        line-height: 1.6;
    }
}

/* ==========================================
   Y2K Reusable Components — Site-Wide
   Chrome accents, panels, strips, badges
   for carrying the Y2K gadget aesthetic
   across all pages without full device shells.
   ========================================== */

/* --- Chrome Panel — Metallic-bordered content wrapper --- */
.chrome-panel {
    position: relative;
    padding: 6px;
    border-radius: 28px 32px 24px 30px / 30px 24px 32px 28px;
    background: linear-gradient(
        168deg,
        #dce8dc 0%, #b8c8b8 6%, #ccdccc 14%, #a0b8a0 24%,
        #d4e4d4 32%, #88a488 44%, #b8ccb8 56%, #6e8a6e 66%,
        #9cb49c 76%, #7a947a 85%, #b4c8b4 93%, #98ac98 100%
    );
    box-shadow:
        0 12px 45px rgba(0, 0, 0, 0.5),
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 3px 2px rgba(255, 255, 255, 0.65),
        inset 3px 0 2px rgba(255, 255, 255, 0.2),
        inset 0 -3px 2px rgba(0, 0, 0, 0.35),
        inset -3px 0 2px rgba(0, 0, 0, 0.15);
}

/* Glossy specular on chrome panel */
.chrome-panel::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 5%;
    right: 5%;
    height: 45%;
    border-radius: 26px 30px 50% 50% / 28px 22px 50% 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.15) 20%,
        rgba(255, 255, 255, 0.04) 45%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 10;
}

/* Alternate shape on even panels */
.chrome-panel:nth-child(even) {
    border-radius: 30px 26px 32px 28px / 26px 32px 28px 30px;
}

/* Inner dark screen area */
.chrome-panel-inner {
    position: relative;
    padding: var(--space-2xl);
    border-radius: 22px 26px 18px 24px / 24px 18px 26px 22px;
    border: 1.5px solid rgba(0, 0, 0, 0.4);
    background: linear-gradient(180deg, #0c180c 0%, #060e06 100%);
    overflow: hidden;
    box-shadow:
        inset 0 3px 10px rgba(0, 0, 0, 0.7),
        inset 0 0 3px rgba(0, 0, 0, 0.4),
        0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
    z-index: 2;
}

/* --- Chrome Strip — Horizontal accent toolbar --- */
.chrome-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 20px;
    background: linear-gradient(
        168deg,
        #dce8dc 0%, #b8c8b8 8%, #ccdccc 18%, #a0b8a0 30%,
        #d4e4d4 42%, #88a488 56%, #b8ccb8 70%, #9cb49c 85%, #b4c8b4 100%
    );
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.25),
        inset 0 2px 1px rgba(255, 255, 255, 0.6),
        inset 0 -2px 1px rgba(0, 0, 0, 0.3);
    max-width: var(--container-max);
    margin: 0 auto;
}

.chrome-strip .y2k-status-label {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
}

/* --- Y2K Screen Inset — Recessed dark area (lighter than full .y2k-screen) --- */
.y2k-screen-inset {
    position: relative;
    padding: var(--space-xl);
    border-radius: 16px 18px 14px 16px / 14px 16px 18px 14px;
    border: 1.5px solid rgba(0, 0, 0, 0.35);
    background:
        radial-gradient(ellipse 80% 70% at 40% 35%, rgba(30, 60, 30, 0.15) 0%, transparent 60%),
        linear-gradient(180deg, #0c180c 0%, #060e06 100%);
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 0.6),
        inset 0 -2px 6px rgba(0, 0, 0, 0.3),
        inset 3px 0 6px rgba(0, 0, 0, 0.2),
        inset -3px 0 6px rgba(0, 0, 0, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    z-index: 2;
}

/* --- Y2K Scanline Overlay — CRT texture via ::after --- */
.y2k-scanline {
    position: relative;
}

.y2k-scanline::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.08) 2px,
        rgba(0, 0, 0, 0.08) 4px
    );
    pointer-events: none;
    z-index: 15;
}

/* --- Chrome Badge — Metallic pill for tags/labels --- */
.chrome-badge {
    display: inline-block;
    font-family: var(--font-accent);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(5, 15, 5, 0.7);
    padding: 4px 12px;
    border-radius: 10px;
    background: linear-gradient(
        180deg,
        #d4e0d4 0%,
        #a4b8a4 40%,
        #c4d0c4 100%
    );
    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.3),
        inset 0 2px 1px rgba(255, 255, 255, 0.55),
        inset 0 -1px 1px rgba(0, 0, 0, 0.15);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* --- Chrome Divider — Pill-shaped section separator --- */
.chrome-divider {
    height: 6px;
    border-radius: 3px;
    max-width: 200px;
    margin: var(--space-2xl) auto;
    background: linear-gradient(
        90deg,
        #88a488 0%, #b8c8b8 20%, #d4e4d4 50%, #b8c8b8 80%, #88a488 100%
    );
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px rgba(0, 0, 0, 0.2);
}

/* --- Y2K Antenna — Decorative aerial element --- */
.y2k-antenna {
    position: relative;
    width: 4px;
    height: 60px;
    margin: 0 auto var(--space-md);
    background: linear-gradient(
        180deg,
        #d4e0d4 0%, #a0b4a0 50%, #c4d0c4 100%
    );
    border-radius: 2px;
    box-shadow:
        1px 0 2px rgba(0, 0, 0, 0.2),
        -1px 0 2px rgba(0, 0, 0, 0.2),
        inset 1px 0 1px rgba(255, 255, 255, 0.4);
}

/* Antenna tip — glowing ball */
.y2k-antenna::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #eeffee, #4a8a3a);
    box-shadow:
        0 0 10px rgba(159, 247, 154, 0.8),
        0 0 20px rgba(159, 247, 154, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

/* Antenna base */
.y2k-antenna::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(180deg, #c4d0c4, #90a490);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

/* --- Y2K Submit Button — Chrome-styled form submit --- */
.y2k-submit-btn {
    display: inline-block;
    font-family: var(--font-accent);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(5, 15, 5, 0.8);
    padding: 12px 32px;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 16px;
    cursor: pointer;
    background: linear-gradient(
        180deg,
        #d4e0d4 0%,
        #a4b4a4 40%,
        #c4d0c4 100%
    );
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.35),
        inset 0 3px 2px rgba(255, 255, 255, 0.65),
        inset 0 -2px 2px rgba(0, 0, 0, 0.18);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: all var(--transition-fast);
}

.y2k-submit-btn:hover {
    background: linear-gradient(
        180deg,
        #c8ffb8 0%,
        #9ff79a 45%,
        #6ecf68 100%
    );
    color: #050505;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 18px rgba(159, 247, 154, 0.3),
        inset 0 3px 2px rgba(255, 255, 255, 0.5),
        inset 0 -2px 2px rgba(0, 0, 0, 0.12);
}

.y2k-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* (Sporecast responsive rules moved after base rules — see below .footer-grid) */

/* --- Y2K Mobile Variants --- */
@media (max-width: 768px) {
    .chrome-panel {
        padding: 4px;
        border-radius: 18px 20px 16px 18px / 20px 16px 18px 18px;
    }

    .chrome-panel-inner {
        padding: var(--space-lg);
        border-radius: 14px 16px 12px 14px / 16px 12px 14px 14px;
    }

    .chrome-strip {
        padding: 8px 16px;
        border-radius: 14px;
        flex-wrap: wrap;
        gap: 6px;
    }

    .chrome-strip .y2k-status-label {
        font-size: 0.5rem;
        letter-spacing: 0.12em;
    }

    .y2k-screen-inset {
        padding: var(--space-md);
        border-radius: 12px;
    }

    .chrome-badge {
        font-size: 0.55rem;
        padding: 3px 8px;
    }

    .y2k-antenna {
        height: 40px;
    }

    .y2k-submit-btn {
        padding: 10px 24px;
        font-size: 0.65rem;
    }
}

@media (max-width: 480px) {
    .chrome-strip .y2k-speaker,
    .chrome-strip .y2k-mic,
    .chrome-strip .chrome-btns {
        display: none;
    }

    .chrome-frame {
        padding: 10px 10px;
        border-radius: 22px 24px 20px 22px / 24px 20px 22px 22px;
    }

    .chrome-panel-inner {
        padding: var(--space-md);
    }
}

/* ==========================================
   Resources Page — Category Grid
   ========================================== */
.resource-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: var(--space-xl);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

/* Chrome frames inside resource grid — same height, screen absorbs extra space */
.resource-grid > .chrome-frame {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

.resource-grid > .chrome-frame > .resource-category {
    flex: 1;
}

/* Dark inner "screen" recessed into the device bezel */
.resource-category {
    position: relative;
    padding: var(--space-2xl);
    border-radius: 20px 24px 16px 22px / 22px 16px 24px 20px;
    border: 1.5px solid rgba(0, 0, 0, 0.4);
    background: linear-gradient(180deg, #0c180c 0%, #060e06 100%);
    box-shadow:
        inset 0 3px 10px rgba(0, 0, 0, 0.7),
        inset 0 0 3px rgba(0, 0, 0, 0.4),
        0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
    z-index: 2;
}

.resource-category-title {
    font-family: var(--font-accent);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-primary);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(159, 247, 154, 0.12);
}

.resource-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.resource-link {
    display: block;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
    transition: border-color var(--transition-fast);
}

.resource-link:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.resource-link:hover {
    border-color: rgba(159, 247, 154, 0.2);
}

.resource-link-title {
    display: block;
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
    transition: color var(--transition-fast);
}

.resource-link:hover .resource-link-title {
    color: var(--color-primary);
}

.resource-link-desc {
    display: block;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-dim);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .resource-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        padding: 0 var(--space-md);
    }

    .resource-category {
        padding: var(--space-lg);
    }

    /* Force resource section and all children visible on mobile — scroll animation race fix */
    .resource-section,
    .resource-section .resource-grid,
    .resource-section .chrome-frame,
    .resource-section .chrome-frame--nouveau {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 480px) {
    .resource-grid {
        padding: 0 var(--space-sm);
        gap: var(--space-lg);
    }

    .resource-category {
        padding: var(--space-md);
    }

    .resource-link-desc {
        font-size: 0.8rem;
    }
}

/* ==========================================
   projectGAIA — Tech Stack Grid
   ========================================== */
.tech-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.tech-badge {
    position: relative;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-dim);
    padding: 10px var(--space-xl);
    border-radius: 20px;
    background:
        linear-gradient(165deg, rgba(180, 210, 180, 0.08) 0%, rgba(5, 10, 5, 0.65) 50%, rgba(5, 15, 5, 0.7) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid rgba(159, 247, 154, 0.1);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.3),
        0 1px 0 rgba(159, 247, 154, 0.05) inset;
    transition: all var(--transition-fast);
}

.tech-badge:hover {
    border-color: rgba(159, 247, 154, 0.4);
    color: var(--color-primary);
    box-shadow:
        0 2px 12px rgba(159, 247, 154, 0.12),
        0 1px 0 rgba(159, 247, 154, 0.1) inset;
}

@media (max-width: 768px) {
    .tech-grid {
        padding: 0 var(--space-md);
    }
}

/* ==========================================
   Generic field-label and text-field fallbacks
   ========================================== */
.field-label {
    display: block;
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-dim);
    margin-bottom: var(--space-sm);
}

.text-field {
    width: 100%;
    padding: 12px 0;
    font-size: 1rem;
    font-family: var(--font-body);
    border: none;
    border-bottom: 1px solid var(--color-text-muted);
    color: var(--color-text);
    outline: none;
    background: transparent;
    transition: border-color var(--transition-fast);
}

.text-field::placeholder {
    color: var(--color-text-muted);
}

.text-field:focus {
    border-bottom-color: var(--color-primary);
}

.text-field[type="date"] {
    color-scheme: dark;
}

.field-hint {
    margin-top: 4px;
    font-size: 0.65rem;
    color: var(--color-text-muted);
    font-family: var(--font-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.4;
}

.submit-btn {
    margin-top: var(--space-md);
    background-color: var(--color-primary);
    color: var(--color-bg);
    font-family: var(--font-condensed);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 14px 36px;
    border: 2px solid var(--color-primary);
    cursor: pointer;
    width: fit-content;
    transition: var(--transition-base);
}

.submit-btn:hover {
    background: transparent;
    color: var(--color-primary);
}

.submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================
   Footer — Expanded 4-Column Grid
   ========================================== */
.footer {
    padding: var(--space-3xl) 0 var(--space-xl);
    position: relative;
}

/* Chrome-panel override: when inner is also newsletter-form-panel, reset glass bg */
.chrome-panel-inner.newsletter-form-panel {
    background: linear-gradient(180deg, #0c180c 0%, #060e06 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1.5px solid rgba(0, 0, 0, 0.4);
}

/* Sporecast meta inside chrome-panel-inner — transparent bg, panel provides frame */
.chrome-panel-inner .sporecast-meta {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
    border: none;
}

/* Sporecast grid inside chrome-panel-inner */
.chrome-panel-inner .sporecast-grid {
    max-width: none;
    margin: 0;
}

/* Sporecast image inside chrome-panel — contained within grid cell */
.chrome-panel-inner .sporecast-image {
    overflow: hidden;
    position: relative;
    min-width: 0;
    min-height: 0;
}

.chrome-panel-inner .sporecast-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center center;
}

/* Sporecast responsive — single-column layout below 1024px */
@media (max-width: 1024px) {
    .chrome-panel-inner .sporecast-image {
        min-height: 250px;
    }

    .chrome-panel-inner .sporecast-image img {
        position: relative;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 768px) {
    .chrome-panel-inner .sporecast-image {
        min-height: 180px;
    }

    .chrome-panel-inner .sporecast-meta {
        padding: var(--space-lg) var(--space-md);
    }

    .sporecast-title {
        font-size: clamp(1.1rem, 4.5vw, 1.6rem) !important;
    }

    .sporecast-link {
        font-size: 0.95rem;
    }

    .sporecast-details {
        gap: var(--space-sm);
        margin-bottom: var(--space-lg);
    }
}

@media (max-width: 480px) {
    .chrome-panel-inner .sporecast-image {
        min-height: 140px;
    }

    .sporecast-title {
        font-size: clamp(0.95rem, 4vw, 1.3rem) !important;
        margin-bottom: var(--space-md);
    }

    .sporecast-label {
        margin-bottom: var(--space-sm);
        font-size: 0.65rem;
    }
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-2xl);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.footer-col-label {
    font-family: var(--font-accent);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}

/* Brand column */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.footer-logo {
    height: 100px;
    width: auto;
    max-height: 100px;
    align-self: flex-start;
    object-fit: contain;
}

.footer-tagline {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-dim);
    max-width: 280px;
    line-height: 1.6;
}

/* Navigate column */
.footer-nav-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    list-style: none;
}

.footer-nav-links a {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-dim);
    transition: color var(--transition-fast);
}

.footer-nav-links a:hover {
    color: var(--color-primary);
}

/* Contact column */
.footer-contact-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer-contact-links a {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-dim);
    transition: color var(--transition-fast);
}

.footer-contact-links a:hover {
    color: var(--color-primary);
}

/* Copyright column */
.footer-copy {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.footer-copy .year {
    font-family: var(--font-belt);
    font-size: 0.9rem;
}

/* Green accent line at bottom */
.footer-accent {
    height: 2px;
    background: linear-gradient(to right, transparent, var(--color-primary), transparent);
    max-width: var(--container-max);
    margin: var(--space-2xl) auto 0;
    opacity: 0.3;
}

/* (Legacy footer-content styles removed — all pages now use footer-grid) */

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
        padding: 0 var(--space-md);
    }
}

@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        padding: 0 var(--space-sm);
    }
}

/* (About page styles moved to shared subpage section above) */

/* (Blog card grid styles removed — blog listing now uses grimoire-card pattern) */

/* ==========================================
   Animations
   ========================================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
}

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

/* Typing reveal for hero text */
.typing-text {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.typing-text.typing-hidden {
    opacity: 0;
    transform: translateY(10px);
}

.typing-text.typing-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   Utility Classes
   ========================================== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.text-dim { color: var(--color-text-dim); }

/* ==========================================
   Responsive
   ========================================== */
/* (Blog card responsive styles removed — now in blog.css) */

@media (max-width: 480px) {
    :root {
        --nav-height: 80px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-line { animation: none; }
    .fade-in-up { animation: none; opacity: 1; }
    .typing-text.typing-hidden { opacity: 1; transform: none; }
    #neural-bg-canvas { opacity: 0.15; }
}

/* ==========================================
   ART NOUVEAU + Y2K CHROME FUSION
   Verdigris chrome, botanical motifs, Mucha-inspired ornaments
   ========================================== */

/* --- Art Nouveau Color Tokens --- */
:root {
    --an-gold: #c4a44a;
    --an-gold-light: #e8d48c;
    --an-gold-dim: rgba(196, 164, 74, 0.3);
    --an-bronze: #8a6e3e;
    --an-copper: #b87333;
    --an-patina: #5a8a6a;
    --an-cream: #f0e8d0;

    /* Evolved verdigris chrome — original green chrome with subtle warm patina at edges */
    --an-chrome-gradient: linear-gradient(
        168deg,
        #dce8dc 0%,
        #b8c8b8 8%,
        #c8bc9c 18%,
        #ccdccc 28%,
        #a0b8a0 40%,
        #d4e4d4 52%,
        #88a488 64%,
        #b8ccb8 76%,
        #b0a888 88%,
        #98ac98 100%
    );

    /* Gold-green border gradient */
    --an-border-gradient: linear-gradient(
        180deg,
        var(--an-gold) 0%,
        var(--an-patina) 50%,
        var(--an-gold) 100%
    );
}

/* ==========================================
   Art Nouveau Ornamental Utilities
   ========================================== */

/* Evolved gradient application */
.an-chrome {
    background: var(--an-chrome-gradient);
}

/* Gold accent left border */
.an-border-left {
    border-left: 3px solid transparent;
    border-image: var(--an-border-gradient) 1;
}

/* Gold glow on hover */
.an-glow:hover {
    box-shadow:
        0 0 25px var(--an-gold-dim),
        0 0 50px rgba(196, 164, 74, 0.12);
}

/* The Belt serif decorative text */
.an-text-decorative {
    font-family: var(--font-belt);
    color: var(--an-bronze);
    text-shadow: 0 1px 0 var(--an-cream);
}

/* Botanical overlay — replaces scanlines on content sections */
.an-botanical-overlay {
    position: relative;
}

.an-botanical-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 5 C30 15 20 20 15 25 C10 30 12 35 15 38 M30 5 C30 15 40 20 45 25 C50 30 48 35 45 38 M30 5 C30 18 30 25 30 40 M15 38 C18 42 24 44 30 40 M45 38 C42 42 36 44 30 40 M10 30 C8 28 5 25 3 28 M50 30 C52 28 55 25 57 28 M30 40 C30 48 28 55 30 58 M30 40 C25 45 20 50 22 56 M30 40 C35 45 40 50 38 56' stroke='%239ff79a' fill='none' stroke-width='0.5' opacity='0.6'/%3E%3C/svg%3E");
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 15;
}

/* SVG corner ornament positioning system */
.an-corners {
    position: relative;
}

.an-corner {
    position: absolute;
    width: 52px;
    height: 52px;
    color: var(--an-gold-light, #e8d48c);
    opacity: 0.8;
    z-index: 11;
    transition: opacity var(--transition-base), transform var(--transition-base);
    pointer-events: none;
    filter: drop-shadow(0 0 2px rgba(196, 164, 74, 0.2));
}

.an-corner--tl { top: 4px; left: 4px; }
.an-corner--tr { top: 4px; right: 4px; transform: scaleX(-1); }
.an-corner--bl { bottom: 4px; left: 4px; transform: scaleY(-1); }
.an-corner--br { bottom: 4px; right: 4px; transform: scale(-1); }

/* Vine divider container */
.an-vine-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    height: 32px;
    color: var(--an-gold-light, #e8d48c);
    opacity: 0.8;
    transition: opacity var(--transition-base);
    filter: drop-shadow(0 0 3px rgba(196, 164, 74, 0.25));
}

.an-vine-divider:hover {
    opacity: 0.85;
}

.an-vine-divider svg {
    width: 100%;
    height: 100%;
}

/* --- Vine Frame — Flowing border for panels --- */
.an-vine-frame {
    position: relative;
}

.an-vine-frame-top,
.an-vine-frame-bottom {
    position: absolute;
    left: 10%;
    right: 10%;
    height: 20px;
    color: var(--an-gold-light, #e8d48c);
    opacity: 0.75;
    z-index: 11;
    pointer-events: none;
    transition: opacity var(--transition-base);
    filter: drop-shadow(0 0 2px rgba(196, 164, 74, 0.2));
}

.an-vine-frame-top {
    top: -2px;
}

.an-vine-frame-bottom {
    bottom: -2px;
    transform: scaleY(-1);
}

.an-vine-frame-top svg,
.an-vine-frame-bottom svg {
    width: 100%;
    height: 100%;
}

.an-vine-frame:hover .an-vine-frame-top,
.an-vine-frame:hover .an-vine-frame-bottom {
    opacity: 0.95;
    filter: drop-shadow(0 0 4px rgba(196, 164, 74, 0.35));
}

/* --- Side Vine Accents --- */
.an-vine-side-left,
.an-vine-side-right {
    position: absolute;
    top: 15%;
    bottom: 15%;
    width: 16px;
    color: var(--an-gold-light, #e8d48c);
    opacity: 0.65;
    z-index: 11;
    pointer-events: none;
    transition: opacity var(--transition-base);
}

.an-vine-side-left {
    left: 2px;
}

.an-vine-side-right {
    right: 2px;
    transform: scaleX(-1);
}

.an-vine-side-left svg,
.an-vine-side-right svg {
    width: 100%;
    height: 100%;
}

.an-vine-frame:hover .an-vine-side-left,
.an-vine-frame:hover .an-vine-side-right {
    opacity: 0.85;
}

/* --- Section Flourish — Wider ornate horizontal vine --- */
.an-section-flourish {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 700px;
    margin: var(--space-lg) auto;
    height: 40px;
    color: var(--an-gold-light, #e8d48c);
    opacity: 0.75;
    transition: opacity var(--transition-base);
    filter: drop-shadow(0 0 3px rgba(196, 164, 74, 0.25));
}

.an-section-flourish svg {
    width: 100%;
    height: 100%;
}

.section:hover .an-section-flourish {
    opacity: 0.95;
    filter: drop-shadow(0 0 5px rgba(196, 164, 74, 0.4));
}

/* Medallion wrapper for section numbers */
.an-medallion {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: var(--an-gold);
}

.an-medallion svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
}

.an-medallion-text {
    position: relative;
    z-index: 2;
    font-family: var(--font-belt);
    font-size: 1.1rem;
    color: var(--an-gold-light);
    text-shadow: 0 0 8px var(--an-gold-dim);
}

/* Badge frame for chrome-badge */
.an-badge-frame {
    position: relative;
    display: inline-block;
}

.an-badge-frame svg {
    position: absolute;
    top: -4px;
    left: -8px;
    right: -8px;
    bottom: -4px;
    width: calc(100% + 16px);
    height: calc(100% + 8px);
    color: var(--an-gold);
    opacity: 0.4;
    pointer-events: none;
}

/* Scroll indicator vine */
.an-scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--an-gold);
}

.an-scroll-indicator svg {
    width: 20px;
    height: 60px;
}

/* ==========================================
   Art Nouveau Chrome Modifier Classes
   --nouveau transforms existing chrome into verdigris Art Nouveau
   ========================================== */

/* --- Chrome Strip — Nouveau --- */
.chrome-strip--nouveau {
    background: var(--an-chrome-gradient);
    border-radius: 24px;
    position: relative;
    overflow: visible;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.25),
        inset 0 2px 1px rgba(255, 255, 255, 0.5),
        inset 0 -2px 1px rgba(0, 0, 0, 0.3),
        inset 0 0 12px rgba(196, 164, 74, 0.08);
}

/* Vine extensions on chrome-strip */
.chrome-strip--nouveau::before,
.chrome-strip--nouveau::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--an-gold), transparent);
    opacity: 0.3;
}

.chrome-strip--nouveau::before { left: -40px; }
.chrome-strip--nouveau::after {
    right: -40px;
    background: linear-gradient(270deg, var(--an-gold), transparent);
}

/* --- Chrome Panel — Nouveau --- */
.chrome-panel--nouveau {
    background: var(--an-chrome-gradient);
    border-radius: 32px 36px 28px 34px / 34px 28px 36px 32px;
    box-shadow:
        0 12px 45px rgba(0, 0, 0, 0.5),
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 3px 2px rgba(255, 255, 255, 0.55),
        inset 3px 0 2px rgba(255, 255, 255, 0.15),
        inset 0 -3px 2px rgba(0, 0, 0, 0.35),
        inset -3px 0 2px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(196, 164, 74, 0.06);
}

/* Subtle warm-tinted specular */
.chrome-panel--nouveau::before {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(232, 212, 140, 0.1) 20%,
        rgba(255, 255, 255, 0.03) 45%,
        transparent 100%
    );
}

.chrome-panel--nouveau:nth-child(even) {
    border-radius: 34px 30px 36px 32px / 30px 36px 32px 34px;
}

/* --- Chrome Frame — Nouveau --- */
.chrome-frame--nouveau {
    background: var(--an-chrome-gradient);
    border-top: 1px solid rgba(196, 164, 74, 0.15);
    border-radius: 36px 40px 32px 38px / 38px 32px 40px 36px;
    box-shadow:
        0 16px 55px rgba(0, 0, 0, 0.6),
        0 6px 20px rgba(0, 0, 0, 0.35),
        inset 0 4px 2px rgba(255, 255, 255, 0.6),
        inset 4px 0 2px rgba(255, 255, 255, 0.2),
        inset 0 -4px 3px rgba(0, 0, 0, 0.4),
        inset -4px 0 2px rgba(0, 0, 0, 0.2);
}

.chrome-frame--nouveau:nth-child(even) {
    border-radius: 38px 34px 40px 36px / 34px 40px 36px 38px;
}

/* Gold + green dual glow on hover */
.chrome-frame--nouveau:hover {
    box-shadow:
        0 16px 60px rgba(196, 164, 74, 0.1),
        0 6px 20px rgba(0, 0, 0, 0.35),
        0 0 30px rgba(159, 247, 154, 0.06),
        0 0 20px rgba(196, 164, 74, 0.08),
        inset 0 4px 2px rgba(255, 255, 255, 0.65),
        inset 4px 0 2px rgba(255, 255, 255, 0.25),
        inset 0 -4px 3px rgba(0, 0, 0, 0.4),
        inset -4px 0 2px rgba(0, 0, 0, 0.2);
}

/* Subtle warm-tinted specular on frame */
.chrome-frame--nouveau::before {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.38) 0%,
        rgba(232, 212, 140, 0.1) 20%,
        rgba(255, 255, 255, 0.03) 45%,
        transparent 100%
    );
}

/* --- Chrome Badge — Nouveau --- */
.chrome-badge--nouveau {
    background: linear-gradient(
        180deg,
        var(--an-gold-light) 0%,
        var(--an-bronze) 40%,
        var(--an-gold) 100%
    );
    color: rgba(30, 20, 5, 0.8);
    border: 1px solid rgba(196, 164, 74, 0.25);
    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.3),
        inset 0 2px 1px rgba(255, 255, 255, 0.45),
        inset 0 -1px 1px rgba(0, 0, 0, 0.2);
    text-shadow: 0 1px 0 rgba(232, 212, 140, 0.4);
}

/* --- Chrome Divider — Nouveau (vine SVG replaces pill) --- */
.chrome-divider--nouveau {
    height: auto;
    max-width: 320px;
    background: none;
    box-shadow: none;
    display: flex;
    justify-content: center;
    color: var(--an-gold);
    opacity: 0.5;
}

/* --- Chrome Label — Nouveau --- */
.chrome-label--nouveau {
    font-family: var(--font-belt);
    font-size: 0.8rem;
    letter-spacing: 0.35em;
    color: rgba(138, 110, 62, 0.7);
    text-shadow: 0 1px 0 rgba(240, 232, 208, 0.4);
}

/* --- Scanline → Botanical Overlay swap on content sections --- */
/* When both y2k-scanline and --nouveau are present, replace scanlines */
.y2k-scanline--nouveau::after {
    background: none;
}

.y2k-scanline--nouveau {
    position: relative;
}

/* Layer the botanical pattern instead */
.y2k-scanline--nouveau .an-botanical-overlay::after,
.y2k-scanline--nouveau::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 5 C30 15 20 20 15 25 C10 30 12 35 15 38 M30 5 C30 15 40 20 45 25 C50 30 48 35 45 38 M30 5 C30 18 30 25 30 40 M15 38 C18 42 24 44 30 40 M45 38 C42 42 36 44 30 40 M10 30 C8 28 5 25 3 28 M50 30 C52 28 55 25 57 28 M30 40 C30 48 28 55 30 58 M30 40 C25 45 20 50 22 56 M30 40 C35 45 40 50 38 56' stroke='%239ff79a' fill='none' stroke-width='0.5' opacity='0.6'/%3E%3C/svg%3E");
    background-size: 60px 60px;
    opacity: 0.04;
    background-color: transparent;
}

/* --- Section Headers — Nouveau (ghost text gold tint) --- */
.section-header--nouveau .section-ghost {
    -webkit-text-stroke-color: rgba(196, 164, 74, 0.08);
}

/* --- Hero Scroll Indicator — Nouveau --- */
.hero-scroll-indicator--nouveau .scroll-text {
    font-family: var(--font-belt);
    color: rgba(196, 164, 74, 0.5);
    letter-spacing: 0.3em;
    font-size: 0.65rem;
}

.hero-scroll-indicator--nouveau .scroll-line {
    background: linear-gradient(to bottom, var(--an-gold), var(--color-primary), transparent);
}

/* --- Footer vine divider above chrome-strip --- */
.footer-vine-divider {
    max-width: var(--container-max);
    margin: 0 auto var(--space-md);
    display: flex;
    justify-content: center;
}

/* --- Blog Post Content — Nouveau Accents --- */
.blog-post-content--nouveau blockquote {
    border-left: none;
    border-image: none;
    position: relative;
}

.blog-post-content--nouveau blockquote::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--an-gold), var(--an-patina), var(--an-gold));
    border-radius: 2px;
    z-index: 2;
}

.blog-post-content--nouveau h2 {
    position: relative;
    padding-bottom: var(--space-sm);
}

.blog-post-content--nouveau h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--an-gold), transparent);
    opacity: 0.4;
}

/* ==========================================
   Art Nouveau — Vine Draw Animation
   ========================================== */
@keyframes vineDraw {
    from { stroke-dashoffset: 300; }
    to { stroke-dashoffset: 0; }
}

.an-vine-draw {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
}

.fade-in-up .an-vine-draw,
.an-vine-draw.an-drawn {
    animation: vineDraw 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Corner hover microinteraction */
.an-corners:hover .an-corner {
    opacity: 0.95;
    filter: drop-shadow(0 0 4px rgba(196, 164, 74, 0.35));
}

.an-corners:hover .an-corner--tl { transform: rotate(-2deg); }
.an-corners:hover .an-corner--tr { transform: scaleX(-1) rotate(-2deg); }
.an-corners:hover .an-corner--bl { transform: scaleY(-1) rotate(2deg); }
.an-corners:hover .an-corner--br { transform: scale(-1) rotate(2deg); }

/* Vine opacity increase on section hover */
.section:hover .an-vine-divider {
    opacity: 0.95;
    filter: drop-shadow(0 0 4px rgba(196, 164, 74, 0.35));
}

/* --- Page Edge Vines — Fixed vertical vines framing the viewport --- */
.an-page-vine-left,
.an-page-vine-right {
    position: fixed;
    top: -30px;
    bottom: -30px;
    width: 36px;
    z-index: 50;
    pointer-events: none;
    opacity: 0.65;
    color: var(--an-gold-light, #e8d48c);
    filter: drop-shadow(0 0 4px rgba(196, 164, 74, 0.3));
}

.an-page-vine-left {
    left: 0;
}

.an-page-vine-right {
    right: 0;
    transform: scaleX(-1);
}

.an-page-vine-left svg,
.an-page-vine-right svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

body:hover .an-page-vine-left,
body:hover .an-page-vine-right {
    opacity: 0.8;
    filter: drop-shadow(0 0 6px rgba(196, 164, 74, 0.45));
}

/* --- Nav Vine Border — Ornate vine below the navbar --- */
.an-nav-vine {
    position: absolute;
    bottom: -16px;
    left: 2%;
    right: 2%;
    height: 24px;
    color: var(--an-gold-light, #e8d48c);
    opacity: 0.75;
    pointer-events: none;
    z-index: 101;
    transition: opacity var(--transition-base);
    filter: drop-shadow(0 0 3px rgba(196, 164, 74, 0.3));
}

.an-nav-vine svg {
    width: 100%;
    height: 100%;
}

.nav.scrolled .an-nav-vine {
    opacity: 0.9;
    filter: drop-shadow(0 0 5px rgba(196, 164, 74, 0.4));
}

/* ==========================================
   Art Nouveau — Mobile Responsive
   ========================================== */
@media (min-width: 1440px) {
    .an-corner {
        width: 66px;
        height: 66px;
    }

    .an-vine-divider {
        max-width: 600px;
        height: 36px;
    }

    .an-section-flourish {
        max-width: 850px;
        height: 48px;
    }

    .an-medallion {
        width: 60px;
        height: 60px;
    }

    .an-vine-frame-top,
    .an-vine-frame-bottom {
        left: 8%;
        right: 8%;
        height: 24px;
    }

    .an-page-vine-left,
    .an-page-vine-right {
        width: 40px;
        opacity: 0.65;
    }

    .an-nav-vine {
        left: 2%;
        right: 2%;
        height: 28px;
        opacity: 0.8;
    }
}

@media (max-width: 768px) {
    .an-corner {
        display: none;
    }

    .an-vine-divider {
        max-width: 280px;
        height: 22px;
    }

    .an-section-flourish {
        max-width: 400px;
        height: 28px;
    }

    .an-vine-frame-top,
    .an-vine-frame-bottom {
        left: 15%;
        right: 15%;
        height: 14px;
    }

    .an-vine-side-left,
    .an-vine-side-right {
        display: none;
    }

    .an-medallion {
        width: 40px;
        height: 40px;
        transform: scale(0.7);
    }

    .an-badge-frame svg {
        display: none;
    }

    .an-page-vine-left,
    .an-page-vine-right {
        width: 22px;
        opacity: 0.45;
        overflow: hidden;
    }

    .an-page-vine-left svg,
    .an-page-vine-right svg {
        overflow: hidden;
    }

    .an-nav-vine {
        left: 5%;
        right: 5%;
        height: 18px;
        opacity: 0.6;
    }

    .chrome-strip--nouveau::before,
    .chrome-strip--nouveau::after {
        display: none;
    }

    .chrome-panel--nouveau {
        border-radius: 20px 22px 18px 20px / 22px 18px 20px 20px;
    }

    .chrome-frame--nouveau {
        border-radius: 24px 26px 20px 24px / 26px 20px 24px 24px;
    }

    .chrome-frame--nouveau:nth-child(even) {
        border-radius: 24px 22px 26px 24px / 22px 26px 24px 24px;
    }
}

@media (max-width: 480px) {
    .an-vine-divider {
        max-width: none;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--an-gold), transparent);
        opacity: 0.3;
    }

    .an-vine-divider svg {
        display: none;
    }

    .an-section-flourish {
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--an-gold), transparent);
        opacity: 0.25;
    }

    .an-section-flourish svg {
        display: none;
    }

    .an-vine-frame-top,
    .an-vine-frame-bottom,
    .an-vine-side-left,
    .an-vine-side-right {
        display: none;
    }

    .an-page-vine-left,
    .an-page-vine-right {
        width: 14px;
        opacity: 0.3;
    }

    .an-nav-vine {
        left: 5%;
        right: 5%;
        height: 14px;
        opacity: 0.5;
    }

    .an-corner,
    .an-medallion svg,
    .an-badge-frame svg {
        display: none;
    }

    .an-scroll-indicator svg {
        display: none;
    }

    .an-scroll-indicator::after {
        content: '';
        width: 1px;
        height: 30px;
        background: linear-gradient(to bottom, var(--an-gold), transparent);
    }

    .footer-vine-divider {
        display: none;
    }
}


/* Art Nouveau — Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .an-vine-draw {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        animation: none;
    }

    .an-corners:hover .an-corner {
        transform: none;
    }

    .an-corners:hover .an-corner--tr {
        transform: scaleX(-1);
    }

    .an-corners:hover .an-corner--bl {
        transform: scaleY(-1);
    }

    .an-corners:hover .an-corner--br {
        transform: scale(-1);
    }
}

/* ==========================================
   Y2K Device Controls — Interactive States
   ========================================== */

/* Button reset for wing controls */
.y2k-wing button {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    outline: none;
    font: inherit;
    color: inherit;
}

/* D-pad hover — lighter chrome + subtle green glow */
.y2k-dpad button:hover {
    background: linear-gradient(180deg, #e0ece0 0%, #b4c8b4 45%, #d4e0d4 100%);
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.35),
        0 0 8px rgba(159, 247, 154, 0.15),
        inset 0 3px 2px rgba(255, 255, 255, 0.7),
        inset 0 -2px 2px rgba(0, 0, 0, 0.18);
}

/* D-pad active — pressed inward, each direction preserves its transform */
.y2k-dpad button:active {
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.4),
        0 0 10px rgba(159, 247, 154, 0.2),
        inset 0 2px 3px rgba(0, 0, 0, 0.25),
        inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}

.dpad-up:active {
    transform: translateX(-50%) translateY(1px);
}

.dpad-down:active {
    transform: translateX(-50%) translateY(-1px);
}

.dpad-left:active {
    transform: translateY(-50%) translateX(1px);
}

.dpad-right:active {
    transform: translateY(-50%) translateX(-1px);
}

.dpad-center:active {
    transform: translate(-50%, -50%) scale(0.92);
}

/* Round action buttons — hover */
button.y2k-btn-round:hover {
    background: linear-gradient(180deg, #e0ece0 0%, #b8c8b8 40%, #d4e0d4 100%);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.4),
        0 0 10px rgba(159, 247, 154, 0.15),
        inset 0 3px 2px rgba(255, 255, 255, 0.75),
        inset 0 -2px 2px rgba(0, 0, 0, 0.2);
}

button.y2k-btn-round.green:hover {
    background: linear-gradient(180deg, #c8f8c0 0%, #80e078 45%, #b0ffaa 100%);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.4),
        0 0 18px rgba(159, 247, 154, 0.45),
        inset 0 3px 2px rgba(255, 255, 255, 0.55),
        inset 0 -2px 2px rgba(0, 0, 0, 0.15);
}

/* Round action buttons — active/pressed */
button.y2k-btn-round:active {
    transform: scale(0.92);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.45),
        0 0 12px rgba(159, 247, 154, 0.2),
        inset 0 2px 3px rgba(0, 0, 0, 0.25),
        inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}

button.y2k-btn-round.green:active {
    transform: scale(0.92);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.45),
        0 0 16px rgba(159, 247, 154, 0.5),
        inset 0 2px 3px rgba(0, 0, 0, 0.2),
        inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}

/* Pill button — hover */
button.y2k-btn-pill:hover {
    background: linear-gradient(180deg, #e0ece0 0%, #b8c8b8 40%, #d4e0d4 100%);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.4),
        0 0 10px rgba(159, 247, 154, 0.15),
        inset 0 3px 2px rgba(255, 255, 255, 0.75),
        inset 0 -2px 2px rgba(0, 0, 0, 0.2);
}

/* Pill button — active/pressed */
button.y2k-btn-pill:active {
    transform: scale(0.95);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.45),
        inset 0 2px 3px rgba(0, 0, 0, 0.25),
        inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}

/* Pill button — speaking state (pulsing green glow) */
button.y2k-btn-pill.speaking {
    background: linear-gradient(180deg, #b8f0b0 0%, #6ecf68 45%, #9ff79a 100%);
    animation: pill-speak-pulse 1.2s ease-in-out infinite;
}

@keyframes pill-speak-pulse {
    0%, 100% {
        box-shadow:
            0 4px 8px rgba(0, 0, 0, 0.4),
            0 0 10px rgba(159, 247, 154, 0.3),
            inset 0 3px 2px rgba(255, 255, 255, 0.5),
            inset 0 -2px 2px rgba(0, 0, 0, 0.15);
    }
    50% {
        box-shadow:
            0 4px 8px rgba(0, 0, 0, 0.4),
            0 0 22px rgba(159, 247, 154, 0.6),
            0 0 40px rgba(159, 247, 154, 0.2),
            inset 0 3px 2px rgba(255, 255, 255, 0.5),
            inset 0 -2px 2px rgba(0, 0, 0, 0.15);
    }
}

/* Pill button — loading state (blinking while TTS model loads) */
button.y2k-btn-pill.loading {
    animation: pill-loading-blink 0.6s ease-in-out infinite;
}

@keyframes pill-loading-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Jog wheel — hover */
button.jog-outer:hover {
    background: linear-gradient(145deg, #d8e4d8 0%, #a0b8a0 40%, #c4d4c4 70%, #a8bca8 100%);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 0 8px rgba(159, 247, 154, 0.12),
        inset 0 3px 3px rgba(255, 255, 255, 0.6),
        inset 0 -3px 3px rgba(0, 0, 0, 0.22);
}

/* Jog wheel — active */
button.jog-outer:active {
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.45),
        inset 0 2px 4px rgba(0, 0, 0, 0.25),
        inset 0 -2px 2px rgba(255, 255, 255, 0.3);
}

/* Jog wheel rotation feedback */
button.jog-outer.rotating-up {
    transform: rotate(-15deg);
    transition: transform 200ms ease-out;
}

button.jog-outer.rotating-down {
    transform: rotate(15deg);
    transition: transform 200ms ease-out;
}

/* Tab focus ring via d-pad (distinct from .active) */
.y2k-tab.y2k-focused {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Form field device-focus highlight */
.text-field.y2k-device-focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(159, 247, 154, 0.3);
}

/* Transitions on interactive wing buttons */
.y2k-dpad button,
button.y2k-btn-round,
button.y2k-btn-pill,
button.jog-outer {
    transition: all var(--transition-fast);
}

/* Reduced motion — disable device control animations */
@media (prefers-reduced-motion: reduce) {
    button.y2k-btn-pill.speaking {
        animation: none;
        box-shadow:
            0 4px 8px rgba(0, 0, 0, 0.4),
            0 0 16px rgba(159, 247, 154, 0.5),
            inset 0 3px 2px rgba(255, 255, 255, 0.5),
            inset 0 -2px 2px rgba(0, 0, 0, 0.15);
    }

    button.y2k-btn-pill.loading {
        animation: none;
        opacity: 0.6;
    }

    button.jog-outer.rotating-up,
    button.jog-outer.rotating-down {
        transform: none;
        transition: none;
    }

    .y2k-dpad button,
    button.y2k-btn-round,
    button.y2k-btn-pill,
    button.jog-outer {
        transition: none;
    }
}

/* ==========================================
   Skip Link (Accessibility)
   ========================================== */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-md);
    z-index: 10000;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-primary);
    color: var(--color-bg);
    font-family: var(--font-ui);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
}
.skip-link:focus {
    top: 0;
}

/* ==========================================
   Blog Search (Grimoire)
   ========================================== */
.search-hidden { display: none !important; }

.grimoire-search {
    width: 100%;
    max-width: 360px;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.9rem;
    outline: none;
    transition: border-color var(--transition-fast);
}
.grimoire-search::placeholder {
    color: var(--color-text-muted);
}
.grimoire-search:focus {
    border-color: var(--color-primary);
}

/* ==========================================
   Print Styles
   ========================================== */
@media print {
    #neural-bg-canvas,
    .noise-overlay,
    .nav,
    .an-page-vine-left,
    .an-page-vine-right,
    .an-section-flourish,
    .an-vine-divider,
    .an-corners .an-corner,
    .an-vine-frame-top,
    .an-vine-frame-bottom,
    .chrome-strip,
    .chrome-btns,
    .chrome-leds-lg,
    .chrome-label,
    .y2k-bezel-top,
    .y2k-status-light,
    .y2k-status-row,
    .hero-scroll-indicator,
    .skip-link,
    .footer { display: none !important; }

    body {
        background: #fff !important;
        color: #000 !important;
    }
    * {
        color: #000 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    .chrome-panel,
    .chrome-panel--nouveau,
    .chrome-frame,
    .chrome-frame--nouveau {
        border: 1px solid #ccc !important;
    }
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555 !important;
    }
    nav a[href]::after,
    .nav-logo a[href]::after {
        content: none;
    }
    img { max-width: 100% !important; }
}

/* ==========================================
   Back to Top Button
   ========================================== */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 90;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-primary);
    background: var(--color-bg);
    color: var(--color-primary);
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity var(--transition-base), transform var(--transition-base), background var(--transition-fast);
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--color-primary);
    color: var(--color-bg);
}

.back-to-top svg {
    width: 20px;
    height: 20px;
}