/* ============================================================================
   BRAND COLORS - CSS Custom Properties for Brand-Specific Styling
   ============================================================================
   This file defines color variables for all brands used across the site.
   Use with modifier classes (e.g., .brand-dell) to apply brand-specific colors
   to generic components.

   Usage:
   <div class="brand-dell">
       <section class="page-hero">...</section>
   </div>

   Components then use var(--brand-color) which resolves to the brand's color.
   ============================================================================ */

:root {
    /* ========================================================================
       SLYD BRAND COLORS — Track 2: aliased to --slyd-* tokens.
       (This file's :root block is a near-duplicate of brand-colors.css's.
       Both live in load order; the later one wins. Aliased here so the
       cascade resolves to tokens regardless of which file loads last.)
       ======================================================================== */
    --brand-slyd-cyan: var(--slyd-info);
    --brand-slyd-cyan-dark: var(--slyd-info);
    --brand-slyd-cyan-rgb: var(--slyd-info-rgb);

    --brand-slyd-gold: var(--slyd-accent-gold);
    --brand-slyd-gold-dark: var(--slyd-accent-gold-dark);
    --brand-slyd-gold-rgb: var(--slyd-accent-gold-rgb);

    --brand-slyd-purple: var(--slyd-accent-purple);
    --brand-slyd-purple-dark: var(--slyd-accent-purple-dark);
    --brand-slyd-purple-rgb: var(--slyd-accent-purple-rgb);

    --brand-slyd-green: var(--slyd-success);
    --brand-slyd-green-dark: var(--slyd-success-dark);
    --brand-slyd-green-rgb: var(--slyd-success-rgb);

    /* ========================================================================
       OEM BRAND COLORS (extracted from existing page CSS)
       ======================================================================== */

    /* Dell - Blue */
    --brand-dell: #007db8;
    --brand-dell-dark: #0078d4;
    --brand-dell-rgb: 0, 125, 184;

    /* HPE - Green */
    --brand-hpe: #01a982;
    --brand-hpe-dark: #007d64;
    --brand-hpe-rgb: 1, 169, 130;

    /* Lenovo - Red */
    --brand-lenovo: #e2001a;
    --brand-lenovo-dark: #a30015;
    --brand-lenovo-rgb: 226, 0, 26;

    /* Supermicro - Green */
    --brand-supermicro: #00ae42;
    --brand-supermicro-dark: #00c853;
    --brand-supermicro-rgb: 0, 174, 66;

    /* Gigabyte - Orange */
    --brand-gigabyte: #f47920;
    --brand-gigabyte-dark: #d66a1a;
    --brand-gigabyte-light: #ff8c3a;
    --brand-gigabyte-rgb: 244, 121, 32;

    /* ========================================================================
       GPU BRAND COLORS (extracted from existing page CSS)
       ======================================================================== */

    /* NVIDIA - Green */
    --brand-nvidia: #76b900;
    --brand-nvidia-dark: #8acc00;
    --brand-nvidia-rgb: 118, 185, 0;

    /* AMD Instinct - Silver/Professional (design choice for MI300X) */
    --brand-amd-instinct: #9ca3af;
    --brand-amd-instinct-dark: #6b7280;
    --brand-amd-instinct-light: #d4d4d4;
    --brand-amd-instinct-rgb: 156, 163, 175;

    /* AMD Traditional Red (if needed elsewhere) */
    --brand-amd: #ed1c24;
    --brand-amd-dark: #c41e3a;
    --brand-amd-rgb: 237, 28, 36;

    /* ========================================================================
       ARCHITECTURE COLORS (for product lines)
       ======================================================================== */
    --brand-hopper: #06b6d4;
    --brand-hopper-rgb: 6, 182, 212;

    --brand-blackwell: #8b5cf6;
    --brand-blackwell-rgb: 139, 92, 246;

    --brand-rubin: #ec4899;
    --brand-rubin-rgb: 236, 72, 153;
}

/* ============================================================================
   BRAND MODIFIER CLASSES
   ============================================================================
   Apply these classes to a parent container to set --brand-color variables
   that child components will use.
   ============================================================================ */

/* SLYD Brands */
.brand-slyd-cyan,
.brand-cyan {
    --brand-color: var(--brand-slyd-cyan);
    --brand-color-dark: var(--brand-slyd-cyan-dark);
    --brand-color-rgb: var(--brand-slyd-cyan-rgb);
}

.brand-slyd-gold,
.brand-gold {
    --brand-color: var(--brand-slyd-gold);
    --brand-color-dark: var(--brand-slyd-gold-dark);
    --brand-color-rgb: var(--brand-slyd-gold-rgb);
}

.brand-slyd-purple,
.brand-purple {
    --brand-color: var(--brand-slyd-purple);
    --brand-color-dark: var(--brand-slyd-purple-dark);
    --brand-color-rgb: var(--brand-slyd-purple-rgb);
}

.brand-slyd-green,
.brand-green {
    --brand-color: var(--brand-slyd-green);
    --brand-color-dark: var(--brand-slyd-green-dark);
    --brand-color-rgb: var(--brand-slyd-green-rgb);
}

/* OEM Brands */
.brand-dell {
    --brand-color: var(--brand-dell);
    --brand-color-dark: var(--brand-dell-dark);
    --brand-color-rgb: var(--brand-dell-rgb);
}

.brand-hpe {
    --brand-color: var(--brand-hpe);
    --brand-color-dark: var(--brand-hpe-dark);
    --brand-color-rgb: var(--brand-hpe-rgb);
}

.brand-lenovo {
    --brand-color: var(--brand-lenovo);
    --brand-color-dark: var(--brand-lenovo-dark);
    --brand-color-rgb: var(--brand-lenovo-rgb);
}

.brand-supermicro {
    --brand-color: var(--brand-supermicro);
    --brand-color-dark: var(--brand-supermicro-dark);
    --brand-color-rgb: var(--brand-supermicro-rgb);
}

.brand-gigabyte {
    --brand-color: var(--brand-gigabyte);
    --brand-color-dark: var(--brand-gigabyte-dark);
    --brand-color-rgb: var(--brand-gigabyte-rgb);
}

/* GPU Brands */
.brand-nvidia {
    --brand-color: var(--brand-nvidia);
    --brand-color-dark: var(--brand-nvidia-dark);
    --brand-color-rgb: var(--brand-nvidia-rgb);
}

.brand-amd-instinct {
    --brand-color: var(--brand-amd-instinct);
    --brand-color-dark: var(--brand-amd-instinct-dark);
    --brand-color-rgb: var(--brand-amd-instinct-rgb);
}

.brand-amd {
    --brand-color: var(--brand-amd);
    --brand-color-dark: var(--brand-amd-dark);
    --brand-color-rgb: var(--brand-amd-rgb);
}

/* Architecture/Product Line Brands */
.brand-hopper {
    --brand-color: var(--brand-hopper);
    --brand-color-dark: var(--brand-slyd-cyan-dark);
    --brand-color-rgb: var(--brand-hopper-rgb);
}

.brand-blackwell {
    --brand-color: var(--brand-blackwell);
    --brand-color-dark: var(--brand-slyd-purple-dark);
    --brand-color-rgb: var(--brand-blackwell-rgb);
}

.brand-rubin {
    --brand-color: var(--brand-rubin);
    --brand-color-dark: #db2777;
    --brand-color-rgb: var(--brand-rubin-rgb);
}

/* ============================================================================
   DEFAULT BRAND (SLYD Cyan)
   ============================================================================
   When no brand modifier is applied, components default to SLYD cyan.
   ============================================================================ */
:root {
    --brand-color: var(--brand-slyd-cyan);
    --brand-color-dark: var(--brand-slyd-cyan-dark);
    --brand-color-rgb: var(--brand-slyd-cyan-rgb);
}
/* ============================================================================
   ANIMATIONS - Shared Keyframe Animations
   ============================================================================
   Consolidates commonly duplicated animations from page CSS files.
   These were found duplicated in 10+ files across the codebase.
   ============================================================================ */

/* ============================================================================
   PULSE ANIMATIONS
   ============================================================================ */

/* Pulse Dot - Used in hero tags, status indicators */
@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

/* Pulse Ring - Expanding ring effect */
@keyframes pulse-ring {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* Pulse Glow - Subtle glow pulse */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(var(--brand-color-rgb, 6, 182, 212), 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(var(--brand-color-rgb, 6, 182, 212), 0.5);
    }
}

/* ============================================================================
   FADE ANIMATIONS
   ============================================================================ */

/* Fade In */
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Fade Out */
@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Fade In Up */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Down */
@keyframes fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Left */
@keyframes fade-in-left {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In Right */
@keyframes fade-in-right {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================================================
   SLIDE ANIMATIONS
   ============================================================================ */

/* Slide Up */
@keyframes slide-up {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Slide Down */
@keyframes slide-down {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Slide In */
@keyframes slide-in {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

/* ============================================================================
   SCALE ANIMATIONS
   ============================================================================ */

/* Scale In */
@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Scale Out */
@keyframes scale-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* Pop In - Bouncy scale */
@keyframes pop-in {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    70% {
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================================================
   SPIN ANIMATIONS
   ============================================================================ */

/* Spin */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Spin Slow */
@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================================
   SHIMMER / LOADING ANIMATIONS
   ============================================================================ */

/* Shimmer - Skeleton loading effect */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Progress - Indeterminate loading bar */
@keyframes progress {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* ============================================================================
   BOUNCE ANIMATIONS
   ============================================================================ */

/* Bounce */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Bounce Subtle */
@keyframes bounce-subtle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* ============================================================================
   ATTENTION ANIMATIONS
   ============================================================================ */

/* Shake */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* Wiggle */
@keyframes wiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

/* Animation delay utilities */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* Animation duration utilities */
.duration-fast { animation-duration: 150ms; }
.duration-normal { animation-duration: 300ms; }
.duration-slow { animation-duration: 500ms; }
.duration-slower { animation-duration: 1000ms; }

/* Animation classes */
.animate-pulse-dot {
    animation: pulse-dot 2s ease-in-out infinite;
}

.animate-fade-in {
    animation: fade-in 0.3s ease-out forwards;
}

.animate-fade-in-up {
    animation: fade-in-up 0.4s ease-out forwards;
}

.animate-fade-in-right {
    opacity: 0;
    animation: fade-in-right 1.8s ease-out 0.2s forwards;
}


.animate-scale-in {
    animation: scale-in 0.3s ease-out forwards;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-spin-slow {
    animation: spin-slow 3s linear infinite;
}

.animate-shimmer {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.animate-bounce {
    animation: bounce 1s ease-in-out infinite;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* ============================================================================
   GENERIC HERO - Reusable Split-Layout Hero Section
   ============================================================================
   Use with brand modifier classes from brand-colors.css to apply brand colors.

   Usage:
   <div class="brand-dell">
       <section class="page-hero">
           <div class="page-hero-container">
               <div class="page-hero-content">
                   <span class="page-hero-tag">Category</span>
                   <h1 class="page-hero-headline">Title <span class="accent">Gradient</span></h1>
                   <p class="page-hero-subhead">Description</p>
                   <div class="page-hero-props">...</div>
                   <div class="page-hero-actions">...</div>
               </div>
               <div class="page-hero-preview">...</div>
           </div>
       </section>
   </div>
   ============================================================================ */

/* ============================================================================
   HERO SECTION - MAIN CONTAINER
   ============================================================================ */
.page-hero {
    position: relative;
    z-index: 1;
    min-height: 60vh;
    padding: 100px 0 80px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(var(--brand-color-rgb), 0.15), transparent),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(var(--brand-color-rgb), 0.08), transparent);
    pointer-events: none;
}

/* ============================================================================
   HERO CONTAINER - SPLIT LAYOUT GRID
   ============================================================================ */
.page-hero-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
}

/* ============================================================================
   HERO CONTENT - LEFT SIDE
   ============================================================================ */
.page-hero-content {
    position: relative;
}

/* Hero Tag/Badge */
.page-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-color);
    padding: 10px 16px;
    background: rgba(var(--brand-color-rgb), 0.08);
    border: 1px solid rgba(var(--brand-color-rgb), 0.3);
    border-radius: 4px;
    margin-bottom: 28px;
}

/* Animated dot before tag */
.page-hero-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--brand-color);
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

/* Tag without animated dot */
.page-hero-tag.no-dot::before {
    display: none;
}

/* Hero Headline */
.page-hero-headline {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.75rem, 4.5vw, 4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--slyd-text-primary);
    margin: 0 0 24px 0;
}

.page-hero-headline .accent {
    background: linear-gradient(135deg, var(--brand-color) 0%, var(--brand-color-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Accent variant: brand to cyan gradient */
.page-hero-headline .accent-cyan {
    background: linear-gradient(135deg, var(--brand-color) 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero Subheadline */
.page-hero-subhead {
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--slyd-text-tertiary);
    margin: 0 0 32px 0;
    max-width: 540px;
}

/* ============================================================================
   HERO PROPS - FEATURE LIST
   ============================================================================ */
.page-hero-props {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
    margin-bottom: 40px;
}

.page-hero-prop {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9375rem;
    color: var(--slyd-text-tertiary);
}

.page-hero-prop :deep(svg),
.page-hero-prop :global(.icon) {
    width: 18px;
    height: 18px;
    color: var(--brand-color);
}

/* ============================================================================
   HERO ACTIONS - CTA BUTTONS
   ============================================================================ */
.page-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* ============================================================================
   HERO PREVIEW - RIGHT SIDE
   ============================================================================ */
.page-hero-preview {
    position: relative;
}

/* Grid decoration element */
.page-hero-grid-deco {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background-image:
        linear-gradient(rgba(var(--brand-color-rgb), 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--brand-color-rgb), 0.15) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.5;
    transform: rotate(15deg);
    pointer-events: none;
}

/* ============================================================================
   HERO PREVIEW CARD - COMMON STYLES
   ============================================================================ */
.page-hero-card {
    position: relative;
    background: var(--slyd-bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.page-hero-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--slyd-bg-elevated);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.page-hero-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
}

.page-hero-card-title :deep(svg),
.page-hero-card-title :global(.icon) {
    width: 16px;
    height: 16px;
    color: var(--brand-color);
}

.page-hero-card-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brand-color);
    background: rgba(var(--brand-color-rgb), 0.1);
    padding: 5px 10px;
    border-radius: 20px;
}

.page-hero-card-body {
    padding: 24px 20px;
}

.page-hero-card-footer {
    padding: 16px 20px;
    background: var(--slyd-bg-elevated);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* ============================================================================
   SHOWCASE CARD - OEM STYLE HERO CARD
   ============================================================================ */
.showcase-card {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(var(--brand-color-rgb), 0.3);
    border-radius: 16px;
    padding: 0;
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(var(--brand-color-rgb), 0.2);
}

.showcase-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: rgba(var(--brand-color-rgb), 0.1);
    border-bottom: 1px solid rgba(var(--brand-color-rgb), 0.2);
}

.showcase-badge {
    padding: 4px 12px;
    background: linear-gradient(135deg, var(--brand-color), var(--brand-color-dark));
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
}

.showcase-type {
    font-size: 0.875rem;
    color: rgba(248, 250, 252, 0.6);
}

.showcase-content {
    padding: 32px 24px;
    text-align: center;
}

.showcase-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, rgba(var(--brand-color-rgb), 0.2), rgba(var(--brand-color-rgb), 0.1));
    border: 1px solid rgba(var(--brand-color-rgb), 0.3);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.showcase-icon :deep(svg),
.showcase-icon :global(.icon) {
    width: 40px;
    height: 40px;
    color: var(--brand-color);
}

.showcase-icon .showcase-logo {
    max-width: 56px;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.showcase-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--slyd-text-primary);
    margin-bottom: 8px;
}

.showcase-subtitle {
    font-size: 0.875rem;
    color: rgba(248, 250, 252, 0.6);
    margin-bottom: 20px;
}

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

.showcase-stat {
    text-align: center;
}

.showcase-stat-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-color);
}

.showcase-stat-label {
    font-size: 0.75rem;
    color: rgba(248, 250, 252, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================================================
   RESPONSIVE - 1200px
   ============================================================================ */
@media (max-width: 1200px) {
    .page-hero-container {
        gap: 48px;
    }
}

/* ============================================================================
   RESPONSIVE - 1024px (Tablet)
   ============================================================================ */
@media (max-width: 1024px) {
    .page-hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .page-hero-content {
        max-width: 600px;
        margin: 0 auto;
    }

    .page-hero-subhead {
        margin-left: auto;
        margin-right: auto;
    }

    .page-hero-props {
        justify-content: center;
    }

    .page-hero-actions {
        justify-content: center;
    }

    .page-hero-preview {
        display: none;
    }

    /* Show preview on tablet if explicitly enabled */
    .page-hero-preview.show-tablet {
        display: block;
        max-width: 400px;
        margin: 0 auto;
    }

    .page-hero-grid-deco {
        display: none;
    }

    .showcase-card {
        margin: 0 auto;
    }
}

/* ============================================================================
   RESPONSIVE - 768px (Mobile)
   ============================================================================ */
@media (max-width: 768px) {
    .page-hero {
        min-height: auto;
        padding: 120px 0 60px;
    }

    .page-hero-container {
        padding: 0 24px;
    }

    .page-hero-headline {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }

    .page-hero-subhead {
        font-size: 1.125rem;
    }

    .page-hero-props {
        gap: 12px 24px;
    }

    .page-hero-prop {
        font-size: 0.875rem;
    }

    .showcase-card {
        max-width: 100%;
    }

    .showcase-content {
        padding: 24px 20px;
    }
}

/* ============================================================================
   RESPONSIVE - 480px (Small Mobile)
   ============================================================================ */
@media (max-width: 480px) {
    .page-hero {
        padding: 100px 0 40px;
    }

    .page-hero-container {
        padding: 0 16px;
    }

    .page-hero-tag {
        font-size: 0.6875rem;
        padding: 8px 12px;
    }

    .page-hero-headline {
        font-size: 1.75rem;
        margin-bottom: 16px;
    }

    .page-hero-subhead {
        font-size: 1rem;
        margin-bottom: 24px;
    }

    .page-hero-props {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 32px;
    }

    .page-hero-actions {
        flex-direction: column;
    }

    .page-hero-actions > * {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   HERO VARIANTS
   ============================================================================ */

/* Taller hero for homepage/landing pages */
.page-hero--tall {
    min-height: 95vh;
}

/* Shorter hero for subpages */
.page-hero--short {
    min-height: 70vh;
    padding: 120px 0 80px;
}

/* Centered hero (no split layout) */
.page-hero--centered .page-hero-container {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 900px;
}

.page-hero--centered .page-hero-content {
    max-width: 700px;
    margin: 0 auto;
}

.page-hero--centered .page-hero-subhead {
    margin-left: auto;
    margin-right: auto;
}

.page-hero--centered .page-hero-props {
    justify-content: center;
}

.page-hero--centered .page-hero-actions {
    justify-content: center;
}
/* ============================================================================
   GENERIC BUTTONS - Brand-Aware Button System
   ============================================================================
   Use with brand modifier classes from brand-colors.css to apply brand colors.

   Usage:
   <div class="brand-dell">
       <a href="#" class="btn-brand-primary">Primary CTA</a>
       <a href="#" class="btn-brand-secondary">Secondary</a>
   </div>

   Or use the global SLYD buttons (gold/outline) anywhere:
   <a href="#" class="btn-gold">Gold CTA</a>
   <a href="#" class="btn-outline">Outline</a>
   ============================================================================ */

/* ============================================================================
   BRAND-AWARE BUTTONS
   These use --brand-color from parent brand modifier class
   ============================================================================ */

.btn-brand-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--brand-color), var(--brand-color-dark));
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-brand-primary:active {
    transform: translateY(0);
}

.btn-brand-primary :deep(svg),
.btn-brand-primary :global(.icon) {
    width: 18px;
    height: 18px;
}

.btn-brand-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    background: transparent;
    color: var(--brand-color);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    border: 1px solid rgba(var(--brand-color-rgb), 0.4);
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-brand-secondary :deep(svg),
.btn-brand-secondary :global(.icon) {
    width: 18px;
    height: 18px;
}

/* ============================================================================
   SLYD GLOBAL BUTTONS
   Use anywhere without brand modifier class
   ============================================================================ */

/* Gold CTA Button - Primary action */
.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: var(--slyd-bg-body);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.btn-gold:active {
    transform: translateY(0);
}

.btn-gold :deep(svg),
.btn-gold :global(.icon) {
    width: 18px;
    height: 18px;
}

/* Outline Button - Secondary action */
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--slyd-text-primary);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-outline :deep(svg),
.btn-outline :global(.icon) {
    width: 18px;
    height: 18px;
}

/* Cyan Outline - Branded secondary */
.btn-outline-cyan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    background: transparent;
    color: #06b6d4;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    border: 1px solid rgba(6, 182, 212, 0.4);
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-outline-cyan :deep(svg),
.btn-outline-cyan :global(.icon) {
    width: 18px;
    height: 18px;
}

/* ============================================================================
   BUTTON SIZES
   ============================================================================ */

/* Small */
.btn-sm {
    padding: 10px 20px;
    font-size: 0.875rem;
    gap: 8px;
}

.btn-sm :deep(svg),
.btn-sm :global(.icon) {
    width: 16px;
    height: 16px;
}

/* Large */
.btn-lg {
    padding: 20px 40px;
    font-size: 1.125rem;
    gap: 12px;
}

.btn-lg :deep(svg),
.btn-lg :global(.icon) {
    width: 20px;
    height: 20px;
}

/* ============================================================================
   BUTTON MODIFIERS
   ============================================================================ */

/* Full width */
.btn-full {
    width: 100%;
}

/* Icon only (square button) */
.btn-icon {
    padding: 14px;
    gap: 0;
}

.btn-icon.btn-sm {
    padding: 10px;
}

.btn-icon.btn-lg {
    padding: 18px;
}

/* Disabled state */
.btn-brand-primary:disabled,
.btn-brand-secondary:disabled,
.btn-gold:disabled,
.btn-outline:disabled,
.btn-outline-cyan:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
    .btn-brand-primary,
    .btn-brand-secondary,
    .btn-gold,
    .btn-outline,
    .btn-outline-cyan {
        padding: 14px 24px;
        font-size: 0.9375rem;
    }

    .btn-lg {
        padding: 16px 32px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .btn-brand-primary,
    .btn-brand-secondary,
    .btn-gold,
    .btn-outline,
    .btn-outline-cyan {
        padding: 12px 20px;
        font-size: 0.875rem;
    }
}
/* ============================================================================
   GENERIC SECTIONS - Reusable Page Section Patterns
   ============================================================================
   Standard section layouts used across all pages.

   Usage:
   <section class="page-section">
       <div class="container">
           <div class="page-section-header">
               <span class="page-section-tag">Category</span>
               <h2 class="page-section-title">Section Title</h2>
               <p class="page-section-desc">Description text</p>
           </div>
           <!-- Content grid here -->
       </div>
   </section>

   <section class="page-section page-section--alt">
       <!-- Alternating dark background -->
   </section>
   ============================================================================ */

/* ============================================================================
   CONTAINER
   ============================================================================ */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
}

/* ============================================================================
   PAGE SECTION - BASE
   ============================================================================ */
.page-section {
    position: relative;
    z-index: 1;
    padding: 120px 0;
}

/* Alternating background */
.page-section--alt {
    background: var(--slyd-bg-elevated);
}

/* Lighter alternate background */
.page-section--alt-light {
    background: #0f172a;
}

/* ============================================================================
   SECTION HEADER
   ============================================================================ */
.page-section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 64px;
}

/* Left-aligned header variant */
.page-section-header--left {
    text-align: left;
    margin-left: 0;
    margin-right: auto;
}

/* Section Tag */
.page-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-color, #06b6d4);
    margin-bottom: 16px;
}

/* Tag with dot indicator */
.page-section-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--brand-color, #06b6d4);
    border-radius: 50%;
}

/* Tag without dot */
.page-section-tag.no-dot::before {
    display: none;
}

/* Section Title */
.page-section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--slyd-text-primary);
    margin: 0 0 20px 0;
}

/* Title with accent */
.page-section-title .accent {
    background: linear-gradient(135deg, var(--brand-color, #06b6d4) 0%, var(--brand-color-dark, #0891b2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Section Description */
.page-section-desc {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--slyd-text-tertiary);
    max-width: 600px;
    margin: 0 auto;
}

.page-section-header--left .page-section-desc {
    margin-left: 0;
    margin-right: auto;
}

/* ============================================================================
   COMMON GRID PATTERNS
   ============================================================================ */

/* 2 Column Grid */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

/* 3 Column Grid */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* 4 Column Grid */
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Auto-fit Grid (responsive) */
.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

/* ============================================================================
   SPLIT LAYOUTS
   ============================================================================ */

/* Two-column split (50/50) */
.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

/* Asymmetric split (content/visual) */
.split-layout--content-first {
    grid-template-columns: 1.2fr 1fr;
}

.split-layout--visual-first {
    grid-template-columns: 1fr 1.2fr;
}

/* ============================================================================
   CTA SECTION
   ============================================================================ */
.page-cta {
    position: relative;
    z-index: 1;
    padding: 100px 0;
    text-align: center;
}

.page-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(var(--brand-color-rgb, 6, 182, 212), 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.page-cta-content {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
}

.page-cta-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--slyd-text-primary);
    margin: 0 0 20px 0;
}

.page-cta-desc {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--slyd-text-tertiary);
    margin: 0 0 32px 0;
}

.page-cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================================
   RESPONSIVE - 1200px
   ============================================================================ */
@media (max-width: 1200px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================================
   RESPONSIVE - 1024px (Tablet)
   ============================================================================ */
@media (max-width: 1024px) {
    .split-layout,
    .split-layout--content-first,
    .split-layout--visual-first {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================================
   RESPONSIVE - 768px (Mobile)
   ============================================================================ */
@media (max-width: 768px) {
    .container {
        padding: 0 24px;
    }

    .page-section {
        padding: 80px 0;
    }

    .page-section-header {
        margin-bottom: 48px;
    }

    .page-section-title {
        font-size: clamp(1.75rem, 6vw, 2.25rem);
    }

    .page-section-desc {
        font-size: 1rem;
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .grid-auto {
        grid-template-columns: 1fr;
    }

    .page-cta {
        padding: 80px 0;
    }

    .page-cta-actions {
        flex-direction: column;
        align-items: center;
    }

    .page-cta-actions > * {
        width: 100%;
        max-width: 300px;
    }
}

/* ============================================================================
   RESPONSIVE - 480px (Small Mobile)
   ============================================================================ */
@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    .page-section {
        padding: 60px 0;
    }

    .page-section-header {
        margin-bottom: 40px;
    }

    .page-section-tag {
        font-size: 0.6875rem;
    }

    .page-cta {
        padding: 60px 0;
    }
}

/* ============================================================================
   SECTION SPACING MODIFIERS
   ============================================================================ */

/* Compact section */
.page-section--compact {
    padding: 80px 0;
}

/* Extra padding section */
.page-section--spacious {
    padding: 160px 0;
}

/* No top padding (after hero) */
.page-section--no-top {
    padding-top: 0;
}

/* No bottom padding */
.page-section--no-bottom {
    padding-bottom: 0;
}

/* ===========================================
   HERO GRID FIELD
   The masked grid + corner glow first built for the /broker hero.
   Put `hero-grid-field` on a hero <section> to get it — one copy of
   the treatment, no per-page duplication.

   Both layers sit at z-index -1: they paint over the section's own
   background but under its content, so a consumer needs no stacking
   fix of its own. A page that already defines its own hero ::before
   glow keeps it — scoped page CSS outranks this, and only the grid
   ::after lands.

   `isolation: isolate` is load-bearing. Without a stacking context on
   the section itself, the z-index: -1 layers escape to the nearest one
   and paint behind whatever opaque background an ancestor carries —
   which is exactly what the v3 page wrappers (.v3hs, .v3hw …) do, so
   the grid rendered as nothing at all. It costs nothing here: the
   overflow: hidden above already keeps hero content from escaping.
   =========================================== */
.hero-grid-field {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.hero-grid-field::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(900px 520px at 75% 0%,
        var(--primary-glow, var(--slyd-primary-glow)), transparent 65%);
}

.hero-grid-field::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* --slyd-grid-line isn't in DesignTokens.css yet, hence the literal
       fallback — same chain the v3 pages already use locally. */
    background-image:
        linear-gradient(to right, var(--grid-line, var(--slyd-grid-line, hsla(0, 0%, 100%, 0.04))) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line, var(--slyd-grid-line, hsla(0, 0%, 100%, 0.04))) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 800px 520px at 60% 20%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 800px 520px at 60% 20%, #000 30%, transparent 75%);
}

/* ===========================================
   HERO HEADLINE SLIDE-UP REVEAL
   Applied by hero-reveal.js — must be global
   because JS-created elements don't get
   Blazor scoped-CSS attributes.
   =========================================== */
/* Hide hero content by default — prevents flash before JS animates */
.hero-headline {
    opacity: 0;
}

.hero-content > :not(.hero-headline) {
    opacity: 0;
}

/* Opt-in for bespoke heroes (v3 pages): put data-hero-reveal on the element
   whose direct children are the eyebrow / h1 / lede / CTAs. Everything else —
   the masked line slide, the staggered fade-up — is shared, so a page never
   needs its own copy of these styles. */
[data-hero-reveal] > * {
    opacity: 0;
}

/* Respect reduced motion — hero-reveal.js skips the animation and reveals
   the content directly, so nothing may stay hidden here. */
@media (prefers-reduced-motion: reduce) {
    .hero-headline,
    .hero-content > :not(.hero-headline),
    [data-hero-reveal] > * {
        opacity: 1;
    }

    .hero-line-inner,
    .hero-fade-up {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ===========================================
   SCROLL REVEAL
   Fade-up animation triggered by IntersectionObserver.
   Add class="scroll-reveal" to any element.
   Use data-delay="0.15" for stagger on siblings.
   Applied by scroll-reveal.js — must be global.
   =========================================== */
.scroll-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* `none`, not translateY(0): a transform of any value keeps a stacking
   context alive on the element, which would trap the z-index: -1
   decoration layers some sections paint. Interpolates the same. */
.scroll-reveal.revealed {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.hero-line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.1em;
    margin-top: -0.1em;
}

.hero-line-inner {
    display: block;
    opacity: 0;
    transform: translateY(100%);
    animation: hero-line-reveal 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes hero-line-reveal {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-fade-up {
    opacity: 0;
    transform: translateY(16px);
    animation: hero-fade-up 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes hero-fade-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   PINNED REVEAL — Scroll-driven image overlay
   ============================================================================ */
.pinned-reveal {
    position: relative;
    height: 300vh;
}

.pinned-reveal-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pinned-reveal-frame {
    position: relative;
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 16 / 11;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 25px 80px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(6, 182, 212, 0.08);
}

.pinned-reveal-chrome {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    background: #1e293b;
    display: flex;
    align-items: center;
    padding-left: 14px;
    gap: 7px;
    z-index: 3;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pinned-reveal-chrome-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
}

.pinned-reveal-chrome-dot:nth-child(1) { background: #ef4444; }
.pinned-reveal-chrome-dot:nth-child(2) { background: #f59e0b; }
.pinned-reveal-chrome-dot:nth-child(3) { background: #22c55e; }

.pinned-reveal-base,
.pinned-reveal-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding-top: 36px;
}

.pinned-reveal-base {
    z-index: 1;
}

.pinned-reveal-overlay {
    z-index: 2;
    transform: translateY(-100%);
    will-change: transform;
}

/* Responsive */
@media (max-width: 1024px) {
    .pinned-reveal { height: 260vh; }
    .pinned-reveal-frame { max-width: 90%; }
}

@media (max-width: 768px) {
    .pinned-reveal { height: 220vh; }
    .pinned-reveal-frame { max-width: 95%; }
    .pinned-reveal-chrome { height: 28px; padding-left: 10px; gap: 6px; }
    .pinned-reveal-chrome-dot { width: 8px; height: 8px; }
    .pinned-reveal-base,
    .pinned-reveal-overlay { padding-top: 28px; }
}

@media (max-width: 480px) {
    .pinned-reveal { height: 200vh; }
    .pinned-reveal-frame { max-width: 100%; border-radius: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .pinned-reveal { height: auto; }
    .pinned-reveal-sticky { position: relative; height: auto; min-height: 50vh; }
    .pinned-reveal-overlay { transform: translateY(0) !important; }
    .pinned-reveal-base { display: none; }
}

/* ===========================================
   GLASS SURFACE  —  new design system component, review
   -------------------------------------------
   Translucent card material. Put `glass-surface` on any card-like element;
   it supplies background, border and rim only, so the consumer keeps its
   own padding, radius and layout. The rim follows whatever border-radius
   the consumer sets, because it is drawn with inset shadows.

   Pair it with `glass-field` on the SECTION behind. That is not optional
   decoration — backdrop-filter blurs whatever is behind it, and this site's
   body is near-flat near-black, so blur alone returns near-flat near-black
   and the glass reads as nothing at all. The field supplies the luminance
   the material bends. See Need.razor.css, which records the same failure
   from the other direction ("glass tokens wash out on bg-body + particles")
   — that happens when the FILL is light; here the fill stays dark and the
   light sits behind.

   Deliberately neutral white, never a coloured wash: the brand direction
   rules out "generic AI purple gradients", and warm accents go muddy behind
   a dark translucent fill.

   No hover state here by design (Design.md 3.2) — most consumers are static
   cards. Interactive consumers add their own.
   =========================================== */
.glass-surface {
    background:
        var(--slyd-card-bg-frosted-glass),
        color-mix(in oklab, var(--slyd-bg-body) 55%, transparent);
    border: 1px solid color-mix(in oklab, var(--slyd-text-primary) 16%, transparent);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    box-shadow:
        /* specular rim, brightest along the top edge where light would catch */
        inset 0 1px 0 color-mix(in oklab, var(--slyd-text-primary) 22%, transparent),
        inset 0 0 0 1px color-mix(in oklab, var(--slyd-text-primary) 5%, transparent),
        0 12px 32px -16px hsl(229 84% 2% / .9);
}

/* Older Firefox / some embedded webviews: degrade to the solid surface. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass-surface {
        background: var(--slyd-bg-card);
        border-color: var(--slyd-border);
    }
}

/* The light the glass bends. `isolation: isolate` is load-bearing for the
   same reason it is on hero-grid-field: without a stacking context the
   z-index:-1 layer escapes and paints behind the page wrapper's opaque
   background, rendering as nothing. */
.glass-field {
    position: relative;
    isolation: isolate;
}

.glass-field::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(760px 420px at 22% 38%, color-mix(in oklab, var(--slyd-text-primary) 13%, transparent), transparent 68%),
        radial-gradient(720px 400px at 82% 62%, color-mix(in oklab, var(--slyd-text-primary) 10%, transparent), transparent 66%);
    opacity: .6;
}