* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #00d4ff;
    --secondary: #7c3aed;
    --accent: #ff006e;
    --gold: #ffd700;
    --dark: #000000;
    --darker: #000000;
    --light: #e0e7ff;
    --gray: #94a3b8;
    --mystic: #c084fc;
    --silver-shine: #f0f4ff;
    --silver-glow: #d8e3ff;
    --metallic-silver: #c8d5f0;
    --chrome-light: #ffffff;
    --chrome-mid: #e5ecff;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--darker);
    color: var(--light);
    line-height: 1.6;
    overflow-x: hidden;
}

#galaxy-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #000000 url('https://images.unsplash.com/photo-1543722530-d2c3201371e7?q=80&w=2574&auto=format&fit=crop') center/cover no-repeat;
    animation: galaxyMove 120s linear infinite;
    /* Globally dim the galaxy so the bright core never dominates */
    filter: brightness(0.55) contrast(1.05);
}

@keyframes galaxyMove {
    0% {
        background-position: center center;
        transform: scale(1);
    }
    25% {
        background-position: 65% 35%;
        transform: scale(1.08);
    }
    50% {
        background-position: 60% 50%;
        transform: scale(1.15);
    }
    75% {
        background-position: 40% 60%;
        transform: scale(1.08);
    }
    100% {
        background-position: center center;
        transform: scale(1);
    }
}

#galaxy-canvas::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Strongly tame the bright galactic core and even out lighting
       across the frame while preserving stars and cosmic texture. */
    background:
        radial-gradient(ellipse 70% 60% at center, rgba(0, 0, 0, 0.97) 0%, rgba(0, 0, 0, 0.90) 30%, rgba(0, 0, 0, 0.75) 55%, rgba(0, 0, 0, 0.55) 80%, rgba(0, 0, 0, 0.45) 100%),
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(0, 0, 0, 0.60) 50%,
            rgba(0, 0, 0, 0.75) 75%,
            rgba(0, 0, 0, 0.90) 100%
        );
    z-index: 1;
}

.hero .hero-content,
.hero > .container {
    position: relative;
    z-index: 1;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    /* Cinematic navbar blend:
       1. Soft horizontal navy gradient: dark edges, slightly warmer mid where the logo sits.
       2. Wide, low-contrast radial bloom centered on the logo so its glow merges seamlessly.
       3. Vertical fade at the bottom so the navbar dissolves into the hero section.
       4. No hard border line — replaced with a soft inset glow. */
    background:
        /* Dimmer, more subtle bloom — just enough to suggest depth without glare. */
        radial-gradient(ellipse 50% 260% at 22% 50%, rgba(95, 140, 195, 0.28) 0%, rgba(70, 110, 165, 0.18) 22%, rgba(45, 78, 125, 0.10) 45%, rgba(25, 45, 80, 0.04) 70%, transparent 90%),
        radial-gradient(ellipse 60% 320% at 22% 0%, rgba(80, 125, 180, 0.20) 0%, rgba(50, 88, 140, 0.12) 35%, rgba(25, 45, 80, 0.04) 65%, transparent 88%),
        linear-gradient(90deg,
            rgba(8, 14, 26, 0.94) 0%,
            rgba(12, 20, 36, 0.94) 22%,
            rgba(14, 24, 42, 0.94) 45%,
            rgba(10, 18, 32, 0.94) 75%,
            rgba(8, 14, 26, 0.94) 100%),
        linear-gradient(180deg, rgba(12, 20, 36, 1) 0%, rgba(8, 14, 26, 0.85) 75%, rgba(6, 10, 20, 0.55) 100%);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    border-bottom: none;
    box-shadow:
        inset 0 -1px 0 rgba(120, 170, 230, 0.06),
        0 6px 24px -16px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    padding: 1.2rem 0;
    transition: padding 0.35s ease, background 0.4s ease, box-shadow 0.4s ease;
}

/* Compact navbar after scrolling — smaller logo, tighter padding, denser background. */
.navbar.scrolled {
    padding: 0.7rem 0;
    background:
        radial-gradient(ellipse 28% 160% at 22% 0%, rgba(70, 110, 160, 0.18) 0%, rgba(45, 78, 120, 0.10) 30%, rgba(25, 45, 75, 0.03) 60%, transparent 85%),
        linear-gradient(90deg,
            rgba(6, 12, 22, 0.96) 0%,
            rgba(12, 20, 36, 0.96) 22%,
            rgba(14, 24, 42, 0.96) 45%,
            rgba(10, 18, 32, 0.96) 75%,
            rgba(6, 12, 22, 0.96) 100%);
    box-shadow:
        inset 0 -1px 0 rgba(120, 170, 230, 0.10),
        0 6px 20px -10px rgba(0, 0, 0, 0.7);
}
.navbar.scrolled .logo-image {
    height: 56px;
    transition: height 0.35s ease;
}
.navbar.scrolled .nav-logo::before {
    width: 360px;
    height: 150px;
    transition: width 0.35s ease, height 0.35s ease;
}
.logo-image { transition: height 0.35s ease; }
.nav-logo::before { transition: width 0.35s ease, height 0.35s ease; }

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
}

/* Soft warm-blue glow behind floating logo — wider and gentler so it merges
   with the navbar gradient instead of forming a visible blob. */
.nav-logo::before {
    content: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 360px;
    border-radius: 50%;
    /* Wider, denser halo that fully envelops the logo's image edges,
       so any residual rectangular border melts into the navbar. */
    background: radial-gradient(ellipse 50% 55% at center,
        rgba(130, 185, 255, 0.34) 0%,
        rgba(110, 170, 250, 0.22) 30%,
        rgba(90, 155, 245, 0.12) 55%,
        rgba(80, 145, 235, 0.05) 78%,
        transparent 100%
    );
    filter: blur(90px);
    pointer-events: none;
    z-index: -1;
    animation: logoGlowPulse 9s ease-in-out infinite;
}

@keyframes logoGlowPulse {
    0%, 100% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15);
    }
}

.logo-image {
    height: 72px;
    width: auto;
    object-fit: contain;
    display: block;
    /* Nudge upward so the SV mark sits visually centered in the navbar.
       The shooting-star trail extends above the SV, so without an offset the
       mark appears low. */
    margin-top: -6px;
    margin-bottom: -6px;
    /* PNG is pre-cut: only the silver SV + shooting star are visible, on a
       transparent background. Subtle drop-shadow gives lift without a halo. */
    filter:
        drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45))
        drop-shadow(0 0 14px rgba(120, 175, 240, 0.30))
        drop-shadow(0 0 28px rgba(90, 150, 220, 0.18));
}

.sv-letter {
    font-size: 2.5rem;
    font-weight: 400;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: linear-gradient(135deg,
        #d0d0d0 0%,
        #f0f0f0 15%,
        #ffffff 30%,
        #e0e0e0 50%,
        #ffffff 70%,
        #f0f0f0 85%,
        #d0d0d0 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7))
            drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
    position: absolute;
    letter-spacing: 0.05em;
}

.sv-s {
    top: 50%;
    left: 50%;
    transform: translate(-100%, -50%);
    z-index: 2;
}

.sv-v {
    top: 50%;
    left: 50%;
    transform: translate(0%, -50%);
    z-index: 1;
}

.nav-logo-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    gap: 0.1rem;
}

.logo-line {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg,
        #c0c0c0 0%,
        #e8e8e8 15%,
        #ffffff 30%,
        #d0d0d0 50%,
        #ffffff 70%,
        #e8e8e8 85%,
        #c0c0c0 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-transform: uppercase;
}


@keyframes steelShine {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}



.logo-container {
    position: relative;
    height: 80px;
    display: inline-block;
    transform: scale(1.3);
    transform-origin: left center;
    background: rgba(10, 10, 15, 0.8);
    backdrop-filter: blur(10px);
    padding: 10px 15px;
}

.logo-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 12%;
    width: 45px;
    height: 45px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
        rgba(0, 212, 255, 0.5) 0%,
        rgba(0, 180, 255, 0.3) 30%,
        rgba(0, 150, 255, 0.15) 60%,
        transparent 100%
    );
    filter: blur(6px);
    animation: blackHoleGlow 6s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes blackHoleGlow {
    0%, 100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(6px) hue-rotate(0deg);
    }
    33% {
        opacity: 0.85;
        transform: translate(-50%, -50%) scale(1.15);
        filter: blur(8px) hue-rotate(10deg);
    }
    66% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.05);
        filter: blur(7px) hue-rotate(-5deg);
    }
}

.logo-full {
    height: 80px;
    width: auto;
    display: block;
    mix-blend-mode: lighten;
    filter: brightness(1.3) contrast(1.4);
    background: transparent;
    position: relative;
    z-index: 2;
}

.logo-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 70%;
    height: 100%;
    background: linear-gradient(135deg,
        rgba(192, 192, 192, 0.3) 0%,
        rgba(224, 224, 224, 0.4) 25%,
        rgba(176, 176, 176, 0.3) 50%,
        rgba(208, 208, 208, 0.4) 75%,
        rgba(192, 192, 192, 0.3) 100%
    );
    mix-blend-mode: overlay;
    pointer-events: none;
}

.logo-galaxy-overlay {
    display: none;
}

/* Tiny stars being sucked into black hole */
.tiny-star {
    position: absolute;
    width: 2.5px;
    height: 2.5px;
    background: rgba(255, 255, 255, 1);
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(100, 200, 255, 1),
                0 0 8px rgba(100, 200, 255, 0.6);
    pointer-events: none;
    z-index: 10;
}

.star-1 {
    animation: starSuckIn1 7s ease-in infinite;
}

.star-2 {
    animation: starSuckIn2 8s ease-in infinite;
    animation-delay: 1.5s;
}

.star-3 {
    animation: starSuckIn3 6.5s ease-in infinite;
    animation-delay: 3s;
}

.star-4 {
    animation: starSuckIn4 7.5s ease-in infinite;
    animation-delay: 4.5s;
}

.star-5 {
    animation: starSuckIn5 8.5s ease-in infinite;
    animation-delay: 6s;
}

@keyframes starSuckIn1 {
    0% {
        top: 15%;
        left: 45%;
        transform: scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        top: 50%;
        left: 12%;
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes starSuckIn2 {
    0% {
        top: 70%;
        left: 50%;
        transform: scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        top: 50%;
        left: 12%;
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes starSuckIn3 {
    0% {
        top: 35%;
        left: 60%;
        transform: scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        top: 50%;
        left: 12%;
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes starSuckIn4 {
    0% {
        top: 55%;
        left: 38%;
        transform: scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        top: 50%;
        left: 12%;
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes starSuckIn5 {
    0% {
        top: 25%;
        left: 55%;
        transform: scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        top: 50%;
        left: 12%;
        transform: scale(0);
        opacity: 0;
    }
}



.logo-icon {
    width: 45px;
    height: 45px;
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.6))
            drop-shadow(0 0 35px rgba(124, 58, 237, 0.5))
            drop-shadow(0 0 50px rgba(255, 0, 110, 0.3));
}

/* Rotating animation for outer ring */
.rotating-ring {
    transform-origin: 50px 50px;
    animation: rotateRing 20s linear infinite;
}

/* Counter-rotating animation for orbiting elements */
.orbiting-elements {
    transform-origin: 50px 50px;
    animation: rotateOrbs 15s linear infinite reverse;
}

@keyframes rotateRing {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateOrbs {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--chrome-light), var(--silver-shine), var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a {
    background: linear-gradient(90deg, var(--chrome-mid), var(--silver-shine), var(--chrome-mid));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s;
    position: relative;
    filter: drop-shadow(0 0 8px rgba(240, 244, 255, 0.3));
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width 0.3s;
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links a:hover {
    background: linear-gradient(90deg, var(--chrome-light), var(--chrome-light), var(--chrome-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 35px rgba(0, 212, 255, 0.4));
}

/* Premium Reports Button */
.premium-dropdown {
    margin-left: 1rem;
}

/* ---------- Liquid-glass Premium Reports button ---------- */
.premium-btn {
    /* Plain white text, no color gradient */
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: initial !important;
    color: #ffffff !important;
    font-weight: 600;
    padding: 0.55rem 1.5rem;
    border-radius: 999px;
    position: relative;
    isolation: isolate;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    transition: transform 0.25s ease, filter 0.25s ease;
    filter: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* Kill the nav-link underline indicator for the premium button.
   This selector has higher specificity than .nav-links a::after so it wins,
   and we immediately redefine the ::after below as a specular highlight. */

/* Glass pill container (the actual see-through surface + rim + highlights) */
.premium-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        /* luminous cyan rim */
        0 0 0 1px rgba(0, 212, 255, 0.55),
        0 0 18px rgba(0, 212, 255, 0.40),
        0 0 40px rgba(124, 58, 237, 0.22),
        /* floating depth */
        0 10px 24px rgba(0, 0, 0, 0.40),
        0 3px 8px rgba(0, 0, 0, 0.30),
        /* inner glass highlights */
        inset 0 1px 0 rgba(255, 255, 255, 0.50),
        inset 0 -1px 0 rgba(255, 255, 255, 0.10),
        inset 0 0 18px rgba(255, 255, 255, 0.06);
    z-index: -1;
    pointer-events: none;
}

/* Specular top highlight for glossy glass feel.
   Uses higher-specificity selector to override .nav-links a::after underline. */
.nav-links a.premium-btn::after,
.premium-dropdown a.premium-btn::after,
.premium-btn::after {
    content: '';
    position: absolute;
    top: 1.5px;
    left: 4%;
    right: 4%;
    bottom: auto;
    width: auto;
    height: 55%;
    border-radius: 999px 999px 40px 40px / 999px 999px 22px 22px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.32) 0%,
        rgba(255, 255, 255, 0.14) 45%,
        rgba(255, 255, 255, 0) 100%) !important;
    transition: none !important;
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: screen;
}

/* Explicitly prevent the .nav-links a:hover::after underline from expanding on premium */
.nav-links a.premium-btn:hover::after,
.premium-dropdown a.premium-btn:hover::after {
    width: auto !important;
    height: 55% !important;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.32) 0%,
        rgba(255, 255, 255, 0.14) 45%,
        rgba(255, 255, 255, 0) 100%) !important;
}

.premium-btn:hover,
.premium-btn:focus,
.premium-btn:active {
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    filter: none !important;
    outline: none !important;
    box-shadow: none;
}

.premium-btn:focus-visible {
    outline: none !important;
}

.premium-btn:hover::before {
    box-shadow:
        0 0 0 1px rgba(0, 212, 255, 0.85),
        0 0 28px rgba(0, 212, 255, 0.65),
        0 0 55px rgba(124, 58, 237, 0.35),
        0 14px 30px rgba(0, 0, 0, 0.5),
        0 5px 12px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 20px rgba(255, 255, 255, 0.08);
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.hero > .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 6rem;
}

/* === Singularity Ventures wordmark — premium polished chrome, matched to SV logo ===
   Three stacked layers create a dimensional bevelled chrome effect:
     1. .sv-chrome-base       — full silver-chrome gradient (dark top→bright middle→dark bottom),
                                this is the recessed body of each letter
     2. .sv-chrome-sheen      — bright top bevel + animated specular sweep
     3. .hero h1.sv-chrome::after — micro rim-light at the very top edge
   The h1 itself supplies the deep cast shadow + cyan rim glow for floating presence. */
.hero h1.sv-chrome {
    font-size: clamp(2.4rem, 7vw, 4.4rem);
    font-weight: 900;
    margin: 0 auto 3.5rem;
    transform: translateY(1rem);
    text-align: center;
    letter-spacing: 2px;
    position: relative;
    isolation: isolate;
    /* Tighter line-height with just enough bottom padding so descenders
       (g, y) never clip and the drop-shadow filter has room to render. */
    line-height: 1.15;
    padding-bottom: 0.12em;
    overflow: visible;
    background: none;
    -webkit-text-fill-color: initial;
    color: transparent;
    /* Liquid-glass cyan rim glow + floating cast shadow — mirrors the .cta-button
       Explore button. Galaxy passes through the transparent letter body. */
    filter:
        /* minimal cyan rim — ~5% glow intensity */
        drop-shadow(0 0 1px rgba(0, 212, 255, 0.18))
        drop-shadow(0 0 2px rgba(0, 212, 255, 0.10))
        drop-shadow(0 0 6px rgba(0, 212, 255, 0.06))
        /* depth shadow for floating feel */
        drop-shadow(0 14px 30px rgba(0, 0, 0, 0.45))
        drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

@keyframes svChromePulse {
    0%, 100% {
        filter:
            drop-shadow(0 2px 1px rgba(255, 255, 255, 0.35))
            drop-shadow(0 4px 8px rgba(4, 10, 22, 0.75))
            drop-shadow(0 8px 22px rgba(4, 10, 22, 0.55))
            drop-shadow(0 0 12px rgba(120, 200, 240, 0.18))
            drop-shadow(0 0 34px rgba(70, 160, 220, 0.14));
    }
    50% {
        filter:
            drop-shadow(0 2px 1px rgba(255, 255, 255, 0.4))
            drop-shadow(0 4px 8px rgba(4, 10, 22, 0.75))
            drop-shadow(0 8px 22px rgba(4, 10, 22, 0.55))
            drop-shadow(0 0 18px rgba(140, 215, 255, 0.32))
            drop-shadow(0 0 50px rgba(80, 170, 230, 0.24));
    }
}

.sv-chrome-base,
.sv-chrome-sheen {
    display: inline-block;
    line-height: inherit;
    position: relative;
    /* Ensure descenders are not clipped by inline-block baseline boxes */
    overflow: visible;
    padding-bottom: 0.08em;
}

/* Layer 1 — Spot UV / print-shop silver foil. High-gloss mirror finish with crisp
   bright→dark→bright bands and a sharp horizon glint at the center. Cool neutral
   silver, no color tint, the way silver foil reflects studio light off paper. */
.sv-chrome-base {
    /* Polished blue-steel chrome — stripeless. The dark sky-reflection and horizon
       mirror bands have been removed, leaving a smooth silver-to-slate-blue
       gradient that stays bright across the entire letter height. */
    background:
        linear-gradient(180deg,
            #f5f7fb 0%,
            #e2e8f0 12%,
            #cdd6e0 28%,
            #b6c1cf 44%,
            #a8b4c4 50%,
            #b6c1cf 56%,
            #cdd6e0 72%,
            #e2e8f0 88%,
            #f5f7fb 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}

/* removed previous iridescent layers */
.sv-chrome-base-unused {
    background:
        /* Iridescent color ribbons — horizontal hue shifts across the wordmark */
        linear-gradient(95deg,
            rgba(140, 215, 240, 0.55) 0%,
            rgba(230, 240, 250, 0.35) 10%,
            rgba(180, 230, 240, 0.50) 22%,
            rgba(245, 248, 252, 0.30) 32%,
            rgba(120, 210, 230, 0.55) 44%,
            rgba(255, 215, 235, 0.35) 54%,
            rgba(235, 245, 252, 0.30) 62%,
            rgba(200, 175, 230, 0.40) 72%,
            rgba(140, 220, 235, 0.55) 84%,
            rgba(225, 240, 250, 0.30) 92%,
            rgba(140, 215, 240, 0.55) 100%),
        /* Dimensional vertical chrome bevel — bright top, mid-shadow, lit belly, dark base */
        linear-gradient(180deg,
            #f6faff 0%,
            #dde7f2 10%,
            #b4c4d8 24%,
            #7e8fa8 40%,
            #56697f 52%,
            #8294ad 62%,
            #bccada 74%,
            #dde6f0 86%,
            #95a4bb 96%,
            #5d6e87 100%);
    background-blend-mode: overlay, normal;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}

/* Layer 2 — Spot UV specular highlights. Crisp top-edge gloss, sharp horizon glint
   aligned with the base's mirror line, and a bottom-edge gloss for the foil lift. */
.sv-chrome-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Top specular crescent + soft bottom inner reflection — mirrors
       .cta-button::before (top gloss) and .cta-button::after (bottom sheen). */
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.28) 18%,
            rgba(255, 255, 255, 0.08) 38%,
            rgba(255, 255, 255, 0) 55%,
            rgba(255, 255, 255, 0) 78%,
            rgba(255, 255, 255, 0.10) 92%,
            rgba(255, 255, 255, 0.22) 100%);
    background-repeat: no-repeat;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    mix-blend-mode: screen;
}

@keyframes svLiquidGlass {
    0%   { background-position: 50% 0%, 160% 0%; }
    45%  { background-position: 50% 0%, -60% 0%; }
    100% { background-position: 50% 0%, -60% 0%; }
}

/* Layer 3 — Micro rim-light at the very top edge of each letter (1-2px of bright
   white catching the imagined studio light), exactly like the SV logo's top highlight. */
.hero h1.sv-chrome::after {
    content: "Singularity Ventures";
    position: absolute;
    inset: 0;
    pointer-events: none;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-align: inherit;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(240, 250, 255, 0.7) 3%,
            rgba(255, 255, 255, 0.15) 9%,
            rgba(255, 255, 255, 0) 16%);
    background-repeat: no-repeat;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    mix-blend-mode: screen;
    opacity: 1;
}

/* Shooting-star sparkle — a small bright comet that travels across the wordmark every
   ~10s, echoing the shooting-star on the SV logo. Kept subtle and premium, not flashy. */
.hero h1.sv-chrome::before {
    content: "";
    position: absolute;
    top: 8%;
    left: -8%;
    width: 14%;
    height: 22%;
    pointer-events: none;
    background:
        radial-gradient(ellipse 100% 60% at 100% 50%,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(220, 240, 255, 0.6) 18%,
            rgba(180, 220, 250, 0.25) 40%,
            transparent 70%);
    filter: blur(0.5px);
    opacity: 0;
    transform: rotate(-12deg);
    display: none;
    z-index: 4;
}

@keyframes svShootingStar {
    0%   { left: -12%;  opacity: 0; }
    8%   { opacity: 0.95; }
    35%  { left: 105%;  opacity: 0; }
    100% { left: 105%;  opacity: 0; }
}

.hero-accent {
    background: linear-gradient(135deg,
        var(--primary) 0%,
        var(--secondary) 35%,
        var(--accent) 70%,
        var(--mystic) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 30px rgba(0, 212, 255, 0.8))
            drop-shadow(0 0 50px rgba(124, 58, 237, 0.6))
            drop-shadow(0 0 70px rgba(255, 0, 110, 0.4));
}

.glitch {
    position: relative;
}

.hero-subtitle {
    font-size: 1.75rem;
    background: linear-gradient(90deg, var(--chrome-mid), var(--chrome-light), var(--chrome-mid));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 400;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 50px rgba(255, 255, 255, 0.4));
}

/* ===== Hero typed sequence ===== */
.hero-typed {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 2.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    min-height: clamp(5.5rem, 11vw, 7.5rem);
}

.hero-tagline-typed,
.hero-welcome-typed {
    margin: 0;
    /* Match the site — same font stack as .hero-subtitle / nav */
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 1px;
    text-align: center;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 1.4em;
}

.hero-tagline-typed {
    font-size: clamp(1.45rem, 3.0vw, 2.3rem);
    color: #eef2f7;
    text-shadow: 0 0 22px rgba(238, 242, 247, 0.18);
}

.hero-tagline-typed .edge {
    font-style: italic;
    color: #f4ead2;
    text-shadow: 0 0 18px rgba(244, 234, 210, 0.35);
    padding: 0 0.05em;
}

/* Subtle italic for the quoted portion of the hero tagline */
.hero-tagline-typed .quote {
    font-style: italic;
    font-weight: 400;
    color: #f3f6fb;
    letter-spacing: 0.5px;
    text-shadow: 0 0 18px rgba(180, 220, 255, 0.22);
}

.hero-welcome-typed {
    font-size: clamp(1.25rem, 2.6vw, 1.85rem);
    color: #33c4d9;
    text-shadow:
        0 0 14px rgba(51, 196, 217, 0.45),
        0 0 32px rgba(51, 196, 217, 0.25);
}

.typed-text {
    white-space: pre-wrap;
}

/* Blinking cursor — only visible on the line currently being typed */
.typed-cursor {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 4px;
    transform: translateY(0.15em);
    background: #eef2f7;
    opacity: 0;
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(238, 242, 247, 0.5);
}

.hero-typed .typing .typed-cursor {
    opacity: 1;
    animation: heroCursorBlink 0.95s steps(1) infinite;
}

.hero-typed .blink-hold .typed-cursor {
    opacity: 1;
    animation: heroCursorBlink 0.6s steps(1) infinite;
}

@keyframes heroCursorBlink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Welcome line uses a teal cursor to match its color */
.hero-welcome-typed .typed-cursor {
    background: #33c4d9;
    box-shadow: 0 0 10px rgba(51, 196, 217, 0.7);
}

/* Replay button — appears after the sequence ends */
.hero-replay {
    margin-top: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    background: rgba(255, 255, 255, 0.04);
    color: #cfd8e3;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font: 500 0.82rem/1 "Inter", system-ui, sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.5s ease, transform 0.5s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.hero-replay.is-visible {
    opacity: 0.85;
    pointer-events: auto;
    transform: translateY(0);
}

.hero-replay:hover {
    background: rgba(0, 212, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.45);
    color: #eaf6ff;
    opacity: 1;
}

@media (max-width: 640px) {
    .hero-typed { gap: 0.8rem; margin-bottom: 2rem; }
}

.hero-tagline {
    font-size: 1.75rem;
    background: linear-gradient(90deg, var(--chrome-mid), var(--chrome-light), var(--chrome-mid));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 2rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 400;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 50px rgba(255, 255, 255, 0.4));
}

/* ---------------- Apple-inspired liquid glass CTA ---------------- */
.cta-button {
    display: inline-block;
    padding: 1.05rem 2.75rem;
    color: #ffffff;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-align: center;
    position: relative;
    isolation: isolate;
    border-radius: 999px;
    /* Fully transparent — pure glass window, galaxy passes through untouched */
    background: transparent;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    /* Luminous cyan rim + soft hairline + crisp inner highlight + floating shadow */
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        /* outer cyan luminance */
        0 0 0 1px rgba(0, 212, 255, 0.55),
        0 0 22px rgba(0, 212, 255, 0.45),
        0 0 48px rgba(0, 212, 255, 0.25),
        /* depth shadow for floating feel */
        0 14px 30px rgba(0, 0, 0, 0.45),
        0 4px 10px rgba(0, 0, 0, 0.35),
        /* inner glass highlights */
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(255, 255, 255, 0.10),
        inset 0 0 20px rgba(255, 255, 255, 0.06);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* Glossy top specular highlight — a crescent of light across the upper half */
.cta-button::before {
    content: '';
    position: absolute;
    top: 1.5px;
    left: 3%;
    right: 3%;
    height: 55%;
    border-radius: 999px 999px 40px 40px / 999px 999px 22px 22px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.38) 0%,
        rgba(255, 255, 255, 0.18) 35%,
        rgba(255, 255, 255, 0.04) 75%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
}

/* Subtle bottom inner reflection + fine refractive sheen */
.cta-button::after {
    content: '';
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 2px;
    height: 28%;
    border-radius: 999px;
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.04) 55%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
    filter: blur(0.5px);
}

.cta-button:hover {
    transform: translateY(-1px);
    background: transparent;
    box-shadow:
        0 0 0 1px rgba(0, 212, 255, 0.8),
        0 0 30px rgba(0, 212, 255, 0.65),
        0 0 60px rgba(0, 212, 255, 0.35),
        0 18px 38px rgba(0, 0, 0, 0.5),
        0 6px 14px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 22px rgba(255, 255, 255, 0.08);
}

.cta-button:active {
    transform: translateY(0);
    box-shadow:
        0 0 0 1px rgba(0, 212, 255, 0.7),
        0 0 18px rgba(0, 212, 255, 0.4),
        0 6px 14px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

@keyframes borderSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Sections */
section {
    padding: 6rem 0;
    position: relative;
}

h2 {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 3rem;
    background: linear-gradient(135deg, var(--chrome-light), var(--silver-shine), var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 2px;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 35px rgba(0, 212, 255, 0.3));
}

/* Premium Reports Section */
.premium-reports {
    padding: 6rem 0;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(124, 58, 237, 0.05), rgba(255, 0, 110, 0.05));
    border-top: 1px solid rgba(0, 212, 255, 0.3);
    border-bottom: 1px solid rgba(124, 58, 237, 0.3);
}

.premium-reports-title {
    text-align: center;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.6))
            drop-shadow(0 0 35px rgba(124, 58, 237, 0.4));
}

.premium-reports-intro {
    text-align: center;
    font-size: 1.2rem;
    color: var(--text);
    max-width: 700px;
    margin: 0 auto 4rem;
    line-height: 1.8;
}

.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.report-placeholder {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.report-placeholder:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 212, 255, 0.5);
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.2),
                0 0 40px rgba(124, 58, 237, 0.15);
}

.placeholder-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.4));
}

.report-placeholder h3 {
    color: var(--text);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.report-placeholder p {
    color: var(--gray);
    font-size: 1rem;
}

.premium-reports-cta {
    text-align: center;
    padding: 3rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    border: 1px solid rgba(0, 212, 255, 0.3);
}

/* Flip Card Styles */
.flip-card {
    perspective: 1000px;
    position: relative;
    min-height: 200px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.flip-card-front {
    z-index: 2;
}

.flip-card-back {
    transform: rotateY(180deg);
    z-index: 1;
}

.flip-back-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--chrome-light), var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.4));
}

.flip-form {
    display: flex;
    gap: 1rem;
    width: 100%;
    max-width: 450px;
    margin-bottom: 1rem;
}

.flip-form input {
    flex: 1;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 50px;
    color: var(--light);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.flip-form input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

.flip-form input::placeholder {
    color: var(--gray);
}

.flip-submit-btn {
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
    white-space: nowrap;
}

.flip-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.5),
                0 0 50px rgba(124, 58, 237, 0.4);
}

.flip-back-btn {
    background: none;
    border: none;
    color: var(--gray);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}

.flip-back-btn:hover {
    color: var(--primary);
}

/* Explosion Canvas */
.explosion-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.explosion-canvas.active {
    opacity: 1;
}

@media (max-width: 768px) {
    .flip-form {
        flex-direction: column;
    }

    .flip-submit-btn {
        width: 100%;
    }
}

.cta-text {
    font-size: 1.3rem;
    color: var(--chrome-light);
    margin-bottom: 2rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.premium-subscribe-btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.4),
                0 0 40px rgba(124, 58, 237, 0.3);
    border: none;
    cursor: pointer;
}

.premium-subscribe-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.6),
                0 0 60px rgba(124, 58, 237, 0.5),
                0 0 80px rgba(255, 0, 110, 0.3);
}

/* Research Section */
.research {
    background: rgba(99, 102, 241, 0.03);
    /* Borders removed — seamless section transitions */
}

.steel-title {
    background: linear-gradient(120deg,
        #c0c0c0 0%,      /* Silver */
        #d3d3d3 25%,     /* Light Gray */
        #e0e0e0 50%,     /* Lighter Silver */
        #d3d3d3 75%,     /* Light Gray */
        #c0c0c0 100%     /* Silver */
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3))
            drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.steel-title::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 140%;
    background: radial-gradient(ellipse,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.05) 15%,
        rgba(255, 255, 255, 0.025) 30%,
        rgba(255, 255, 255, 0.01) 45%,
        transparent 65%
    );
    z-index: -1;
    pointer-events: none;
    filter: blur(20px);
}

@keyframes rocketShine {
    0%, 100% {
        background-position: 0% center;
        filter: drop-shadow(0 0 40px rgba(255, 255, 255, 1))
                drop-shadow(0 0 60px rgba(255, 255, 255, 0.9))
                drop-shadow(0 0 80px rgba(255, 255, 255, 0.8))
                drop-shadow(0 0 100px rgba(240, 240, 240, 0.6));
    }
    50% {
        background-position: 100% center;
        filter: drop-shadow(0 0 50px rgba(255, 255, 255, 1))
                drop-shadow(0 0 70px rgba(255, 255, 255, 1))
                drop-shadow(0 0 90px rgba(255, 255, 255, 0.9))
                drop-shadow(0 0 120px rgba(255, 255, 255, 0.7));
    }
}

.singularity-accent {
    background: linear-gradient(135deg,
        #00d4ff 0%,      /* Cyan */
        #0099ff 50%,     /* Sky Blue */
        #0066ff 100%     /* Deep Blue */
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 25px rgba(0, 153, 255, 0.6))
            drop-shadow(0 0 40px rgba(0, 102, 255, 0.4));
}

.research-accent {
    background: linear-gradient(135deg,
        #6366f1 0%,      /* Indigo */
        #8b5cf6 50%,     /* Purple */
        #a78bfa 100%     /* Light Purple */
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 25px rgba(99, 102, 241, 0.7))
            drop-shadow(0 0 45px rgba(139, 92, 246, 0.5));
}

.research-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.sr-logo-heading {
    height: 3rem;
    width: auto;
    filter: drop-shadow(0 0 20px rgba(192, 192, 192, 0.8))
            drop-shadow(0 0 35px rgba(255, 255, 255, 0.6))
            drop-shadow(0 0 50px rgba(0, 212, 255, 0.4));
    animation: logoGlowPulse 4s ease-in-out infinite;
}

.research-content {
    max-width: 1000px;
    margin: 0 auto;
}

.research-intro {
    font-size: 1.25rem;
    line-height: 2;
    margin-bottom: 3rem;
    background: linear-gradient(180deg, var(--chrome-light), var(--silver-glow), var(--chrome-mid));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    filter: drop-shadow(0 0 12px rgba(216, 227, 255, 0.3));
}

.research-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.research-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.research-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 212, 255, 0.5);
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.2),
                0 0 40px rgba(124, 58, 237, 0.15);
}

.research-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.5rem;
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.5));
}

.research-icon svg {
    width: 100%;
    height: 100%;
}

.research-card h4 {
    color: var(--text);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.research-card p {
    color: var(--gray);
    font-size: 1rem;
    line-height: 1.8;
}

.research-cta {
    text-align: center;
    margin-top: 3rem;
}

/* Pricing Section */
.pricing {
    background: rgba(99, 102, 241, 0.03);
    /* Borders removed — seamless section transitions */
}

.pricing-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 100%;
}

.pricing-card-centered {
    display: flex;
    justify-content: center;
}

.pricing-card-centered .pricing-card {
    max-width: 550px;
    width: 100%;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.pricing-card-centered .pricing-card:hover {
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.5),
                0 0 60px rgba(124, 58, 237, 0.4),
                0 0 90px rgba(0, 212, 255, 0.3),
                0 0 120px rgba(255, 0, 110, 0.2);
}

/* Pricing Card Flip Styles */
.pricing-card-flip {
    perspective: 1000px;
    position: relative;
    max-width: 550px;
    width: 100%;
    height: 480px;
}

.pricing-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.pricing-card-flip.flipped .pricing-card-inner {
    transform: rotateY(180deg);
}

.pricing-card-front,
.pricing-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: rgba(99, 102, 241, 0.05);
    border: 2px solid rgba(99, 102, 241, 0.3);
    transition: box-shadow 0.3s ease;
}

.pricing-card-front {
    z-index: 2;
}

.pricing-card-back {
    transform: rotateY(180deg);
    z-index: 1;
    justify-content: center;
    align-items: center;
}

.pricing-card-flip:hover .pricing-card-front,
.pricing-card-flip:hover .pricing-card-back {
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.5),
                0 0 60px rgba(124, 58, 237, 0.4),
                0 0 90px rgba(0, 212, 255, 0.3),
                0 0 120px rgba(255, 0, 110, 0.2);
}

.pricing-card-front h3 {
    font-size: 2rem;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, var(--chrome-light), var(--silver-shine), var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
}

.pricing-card-front .subscribe-button {
    margin-top: auto;
    border: none;
    cursor: pointer;
}

.pricing-back-title {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, var(--chrome-light), var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.4));
}

.pricing-signup-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 300px;
    margin-bottom: 1.5rem;
}

.pricing-signup-form input {
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 50px;
    color: var(--light);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.pricing-signup-form input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

.pricing-signup-form input::placeholder {
    color: var(--gray);
}

.pricing-submit-btn {
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
}

.pricing-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.5);
}

.pricing-back-btn {
    background: none;
    border: none;
    color: var(--gray);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pricing-back-btn:hover {
    color: var(--primary);
}

.pricing-explosion-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 20px;
}

.pricing-explosion-canvas.active {
    opacity: 1;
}

@media (max-width: 968px) {
    .pricing-cards-grid {
        grid-template-columns: 1fr;
    }
}

.pricing-card {
    background: rgba(99, 102, 241, 0.05);
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.pricing-card .subscribe-button {
    margin-top: auto;
}

.pricing-card.elite {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(124, 58, 237, 0.08), rgba(255, 0, 110, 0.08));
    border: 2px solid rgba(0, 212, 255, 0.5);
}

.elite-badge {
    position: absolute;
    top: -15px;
    right: 30px;
    background: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 2px;
}

.pricing-card:hover {
    box-shadow: 0 20px 60px rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.5);
    transform: translateY(-5px);
}

.pricing-card.elite:hover {
    box-shadow: 0 30px 80px rgba(0, 212, 255, 0.4),
                0 0 60px rgba(124, 58, 237, 0.3);
    border-color: rgba(0, 212, 255, 0.8);
    transform: translateY(-5px);
}

.pricing-card h3 {
    font-size: 2rem;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, var(--chrome-light), var(--silver-shine), var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
}

.price {
    margin-bottom: 2rem;
}

.price .amount {
    font-size: 4rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--chrome-light), var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.4));
}

.price .period {
    font-size: 1.5rem;
    background: linear-gradient(180deg, var(--chrome-mid), var(--metallic-silver));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.features-list {
    list-style: none;
    margin-bottom: 2rem;
    text-align: left;
}

.features-list li {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
    background: linear-gradient(180deg, var(--chrome-light), var(--chrome-mid));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.features-list li:before {
    content: "✓ ";
    color: var(--primary);
    font-weight: bold;
    margin-right: 0.5rem;
}

.subscribe-button {
    display: inline-block;
    padding: 1rem 3rem;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
}

.subscribe-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.5);
}

.elite-button {
    background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent)) !important;
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.5),
                0 0 30px rgba(124, 58, 237, 0.4) !important;
}

.elite-button:hover {
    box-shadow: 0 20px 50px rgba(0, 212, 255, 0.7),
                0 0 50px rgba(124, 58, 237, 0.6),
                0 0 70px rgba(255, 0, 110, 0.4) !important;
    transform: translateY(-3px) !important;
}

/* Mission Section — full viewport page */
.mission {
    background: rgba(99, 102, 241, 0.02);
    /* No bottom border — keep the transition to the next section seamless */
    border-bottom: none;
    /* Fill the entire viewport and center the content vertically */
    padding: 0 !important;
    min-height: 100vh;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mission-content {
    max-width: 900px;
    margin: 0 auto;
}

.mission-text {
    font-size: 1.45rem;
    line-height: 1.9;
    margin-bottom: 1.75rem;
    background: linear-gradient(180deg, var(--chrome-light), var(--silver-glow), var(--chrome-mid));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(216, 227, 255, 0.3));
}

.highlight {
    color: var(--light);
    font-weight: 600;
    background: linear-gradient(135deg, #ffffff, var(--primary), var(--mystic));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}

/* Focus Areas */
.cards-container {
    position: relative;
    padding: 2rem 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.cards-grid {
    display: contents;
}

.bottom-card {
    grid-column: 1 / 4;
    display: flex;
}

.bottom-card .card {
    width: 100%;
}

.card {
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 20px;
    padding: 2.5rem;
    transition: box-shadow 0.3s, border-color 0.3s;
    position: relative;
    z-index: 2;
}

.card:hover {
    box-shadow: 0 20px 60px rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.5);
}

.card.convergence {
    text-align: center;
}

.card.convergence h3 {
    background: linear-gradient(135deg, #ffffff, #00d4ff, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
    transition: all 0.3s ease;
}

.card.convergence h3 {
    background-size: 300% 300%;
    background-image: linear-gradient(135deg,
        #00d4ff, #7c3aed, #ff006e,
        #00d4ff, #7c3aed, #ff006e,
        #00d4ff);
}

.card.convergence:hover h3 {
    animation: convergencePulse 8s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.5));
}

@keyframes convergencePulse {
    0% {
        background-position: 0% 50%;
        filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.5));
    }
    25% {
        background-position: 50% 50%;
        filter: drop-shadow(0 0 20px rgba(124, 58, 237, 0.5));
    }
    50% {
        background-position: 100% 50%;
        filter: drop-shadow(0 0 20px rgba(255, 0, 110, 0.5));
    }
    75% {
        background-position: 50% 50%;
        filter: drop-shadow(0 0 20px rgba(124, 58, 237, 0.5));
    }
    100% {
        background-position: 0% 50%;
        filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.5));
    }
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #ffffff, #00d4ff, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}

.card p {
    background: linear-gradient(180deg, var(--chrome-mid), var(--metallic-silver), var(--chrome-mid));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.8;
    filter: drop-shadow(0 0 8px rgba(200, 213, 240, 0.25));
}

.connection-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.connection-line {
    stroke: rgba(99, 102, 241, 0.4);
    stroke-width: 2;
    stroke-dasharray: 8, 4;
    animation: pulse-line 3s ease-in-out infinite;
}

.connection-line.line-1 {
    animation-delay: 0s;
}

.connection-line.line-2 {
    animation-delay: 1s;
}

.connection-line.line-3 {
    animation-delay: 2s;
}

@keyframes pulse-line {
    0%, 100% {
        stroke: rgba(99, 102, 241, 0.4);
        stroke-width: 2;
    }
    50% {
        stroke: rgba(236, 72, 153, 0.6);
        stroke-width: 3;
    }
}

/* Portfolio / Thesis */
.thesis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.thesis-item {
    text-align: center;
    padding: 2rem;
}

.thesis-item h4 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--chrome-light), var(--silver-shine), var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.35)) drop-shadow(0 0 20px rgba(0, 212, 255, 0.2));
}

/* Portfolio Dashboard */
.portfolio-dashboard {
    margin-top: 5rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.portfolio-stats {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.stat-item {
    text-align: center;
    padding: 1.5rem 3rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 12px;
    width: 100%;
}

.stat-value {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    color: #10b981;
    filter: drop-shadow(0 0 15px rgba(16, 185, 129, 0.6));
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1rem;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.dashboard-title {
    text-align: center;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2rem;
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.6));
}

.positions-table {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 3rem;
    overflow-x: auto;
}

.positions-table table {
    width: 100%;
    border-collapse: collapse;
}

.positions-table th {
    text-align: left;
    padding: 1rem;
    border-bottom: 2px solid rgba(0, 212, 255, 0.5);
    color: var(--primary);
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.positions-table td {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid rgba(0, 212, 255, 0.1);
    color: var(--text);
    font-size: 1.1rem;
}

.positions-table tbody tr {
    transition: all 0.3s ease;
}

.positions-table tbody tr:hover {
    background: rgba(0, 212, 255, 0.05);
    transform: scale(1.01);
}

.asset-cell {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.asset-icon {
    font-size: 1.8rem;
    filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.6));
}

.crypto-logo {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.5));
    transition: all 0.3s ease;
}

.positions-table tbody tr:hover .crypto-logo {
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.8));
    transform: scale(1.1);
}

.asset-name {
    font-weight: 600;
    font-size: 1.2rem;
}

.positions-table td.return-positive {
    color: #10b981 !important;
    font-weight: 700;
    font-size: 1.3rem;
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.5));
}

.return-negative {
    color: #ef4444;
    font-weight: 700;
    font-size: 1.3rem;
    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.5));
}

/* Premium rows in table */
.premium-row {
    position: relative;
}

.premium-row td {
    opacity: 0.7;
}

.blurred {
    filter: blur(8px);
    user-select: none;
    opacity: 0.5;
}

.premium-row .crypto-logo {
    filter: blur(12px);
    opacity: 0.25;
}

.premium-row:hover .crypto-logo {
    filter: blur(12px) !important;
    opacity: 0.25 !important;
    transform: none !important;
}

.premium-row:hover {
    background: transparent !important;
    transform: none !important;
}

.premium-row:hover .blurred {
    filter: blur(8px) !important;
    opacity: 0.5 !important;
}

.premium-badge-small {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    font-size: 0.6rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-left: 0.5rem;
    filter: none !important;
}

.returns-chart {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 12px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.returns-chart::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.02), rgba(124, 58, 237, 0.02));
    pointer-events: none;
}

.chart-title {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--text);
    font-size: 1.5rem;
    position: relative;
    z-index: 1;
}

#returns-canvas {
    width: 100%;
    height: 400px;
    position: relative;
    z-index: 1;
}

.thesis-item p {
    background: linear-gradient(180deg, var(--chrome-mid), var(--metallic-silver), var(--chrome-mid));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.1rem;
    filter: drop-shadow(0 0 8px rgba(200, 213, 240, 0.25));
}

/* Contact Section */
.contact {
    position: relative;
    padding-top: 1rem; /* tight flow out of Focus Areas */
    margin-top: -60px; /* overlap into the Focus Areas fade for seamless blend */
    background:
        /* Soft purple-to-transparent halo that continues the Focus Areas palette */
        radial-gradient(ellipse 70% 55% at 50% 10%, rgba(124,58,237,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 30% 5%, rgba(0,212,255,0.05) 0%, transparent 55%),
        rgba(99, 102, 241, 0.02);
}
/* Bridge gradient: matches Focus Areas bottom — now overlapping so no visible seam */
.contact::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 180px;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(180deg,
        rgba(0,0,0,0.9) 0%,
        rgba(8,6,22,0.7) 25%,
        rgba(12,8,28,0.35) 55%,
        rgba(0,0,0,0) 100%);
}
.contact > .container { position: relative; z-index: 1; padding-top: 2rem; }

.contact-intro {
    text-align: center;
    font-size: 1.25rem;
    background: linear-gradient(180deg, var(--chrome-light), var(--silver-glow), var(--chrome-mid));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 1.5rem;
    filter: drop-shadow(0 0 12px rgba(216, 227, 255, 0.3));
}

/* ======================================================================
   TEAM SECTION — cinematic editorial card with dynamic aurora background.
   The portrait is feathered with a radial vignette + cyan halo so the
   studio-removed PNG blends seamlessly with the cosmic backdrop.
====================================================================== */
.team {
    position: relative;
    padding: 6.5rem 0 5.5rem;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0, 212, 255, 0.06) 0%, transparent 60%),
        linear-gradient(180deg, rgba(6, 8, 22, 0) 0%, rgba(6, 8, 22, 0.35) 50%, rgba(6, 8, 22, 0) 100%);
}

/* Dynamic aurora orbs that drift behind the team card */
.team-aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.team-aurora-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    will-change: transform;
}
.team-aurora-orb--cyan {
    width: 520px; height: 520px;
    top: -10%; left: -8%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.55) 0%, rgba(56, 189, 248, 0) 70%);
    animation: teamDrift1 18s ease-in-out infinite alternate;
}
.team-aurora-orb--indigo {
    width: 600px; height: 600px;
    top: 20%; right: -12%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.45) 0%, rgba(99, 102, 241, 0) 70%);
    animation: teamDrift2 22s ease-in-out infinite alternate;
}
.team-aurora-orb--violet {
    width: 480px; height: 480px;
    bottom: -15%; left: 30%;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.35) 0%, rgba(167, 139, 250, 0) 70%);
    animation: teamDrift3 26s ease-in-out infinite alternate;
}
@keyframes teamDrift1 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(60px, 40px, 0) scale(1.08); }
}
@keyframes teamDrift2 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-50px, 50px, 0) scale(1.1); }
}
@keyframes teamDrift3 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(40px, -30px, 0) scale(1.05); }
}

.team > .container {
    position: relative;
    z-index: 1;
}

/* Header lockup */
.team-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 4rem;
}
.team-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(125, 211, 252, 0.85);
    padding: 0.35rem 0.9rem;
    border: 1px solid rgba(125, 211, 252, 0.3);
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.06);
    margin-bottom: 1.25rem;
}
.team-title {
    font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
    font-weight: 500;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.15;
    margin: 0 0 1rem;
    color: #eaf2ff;
    letter-spacing: 0.3px;
}
.team-title-accent {
    font-style: italic;
    background: linear-gradient(180deg, #bae6fd 0%, #38bdf8 60%, #0ea5e9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 18px rgba(56, 189, 248, 0.35));
}
.team-subtitle {
    font-size: 1.05rem;
    line-height: 1.65;
    color: rgba(226, 232, 240, 0.78);
    margin: 0 auto;
    max-width: 620px;
}

/* Card grid — single card today, ready for additional members */
.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 920px;
    margin: 0 auto;
}
.team-card {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 2.5rem;
    align-items: start;
    padding: 2.25rem 2.5rem;
    border-radius: 24px;
    background:
        linear-gradient(135deg,
            rgba(15, 23, 42, 0.55) 0%,
            rgba(15, 23, 42, 0.35) 50%,
            rgba(30, 41, 59, 0.45) 100%);
    border: 1px solid rgba(125, 211, 252, 0.18);
    box-shadow:
        0 30px 80px rgba(2, 6, 23, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.02) inset,
        0 0 60px rgba(56, 189, 248, 0.08) inset;
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    position: relative;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;
}
.team-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 40px 100px rgba(2, 6, 23, 0.65),
        0 0 80px rgba(56, 189, 248, 0.18) inset;
}

/* Portrait — feathered into the cosmic backdrop */
.team-portrait {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    isolation: isolate;
}
/* Circular crop wrapper — hides the photo edges so we can re-center the face */
.team-portrait-crop {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
}
/* Soft cyan halo behind the portrait */
.team-portrait-aura {
    position: absolute;
    inset: -10%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 45%,
            rgba(125, 211, 252, 0.45) 0%,
            rgba(56, 189, 248, 0.18) 35%,
            rgba(56, 189, 248, 0) 70%);
    filter: blur(8px);
    animation: teamAuraPulse 6s ease-in-out infinite alternate;
}
@keyframes teamAuraPulse {
    0%   { opacity: 0.7; transform: scale(1); }
    100% { opacity: 1;   transform: scale(1.06); }
}
/* Crisp light-blue ring outline — sits above the crop */
.team-portrait-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(125, 211, 252, 0.45);
    box-shadow:
        0 0 24px rgba(56, 189, 248, 0.35),
        0 0 0 6px rgba(56, 189, 248, 0.06);
    pointer-events: none;
    z-index: 2;
}
/* The portrait image itself — masked into a soft circle so studio edges fade into the cosmos */
.team-portrait-img {
    /* Image is wider than container (130%). We center the IMAGE at left:50%
       and then use translateX to fine-tune horizontal position. A value of
       -50% means perfectly centered; reducing the magnitude (e.g. -30%)
       shifts the image to the RIGHT, moving the subject's face right within
       the visible circle. */
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateX(-38%);
    object-fit: cover;
    object-position: 50% 15%;
    border-radius: 0;
    /* Feather the photo's outer edge so it blends with the section bg */
    -webkit-mask-image: radial-gradient(circle at 50% 50%,
        #000 60%,
        rgba(0, 0, 0, 0.85) 78%,
        rgba(0, 0, 0, 0) 100%);
            mask-image: radial-gradient(circle at 50% 50%,
        #000 60%,
        rgba(0, 0, 0, 0.85) 78%,
        rgba(0, 0, 0, 0) 100%);
    filter:
        contrast(1.03)
        saturate(1.05)
        drop-shadow(0 12px 30px rgba(2, 6, 23, 0.6));
}

/* Info column */
.team-info {
    min-width: 0;
    text-align: left;
    padding-top: 0.5rem;
}
.team-name {
    text-align: left;
    font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
    font-weight: 500;
    font-size: clamp(1.7rem, 2.4vw, 2.2rem);
    color: #f1f5f9;
    margin: 0 0 0.35rem;
    letter-spacing: 0.3px;
}
.team-role {
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(125, 211, 252, 0.92);
    margin: 0 0 1.25rem;
}
.team-bio {
    font-size: 1.02rem;
    line-height: 1.7;
    color: rgba(226, 232, 240, 0.82);
    margin: 0 0 1.5rem;
    max-width: 56ch;
}
.team-tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.team-tags li {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    color: rgba(186, 230, 253, 0.95);
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(125, 211, 252, 0.25);
}

/* Standalone Team page — add navbar clearance + min height */
.team-page main { padding-top: 90px; }
.team.team--page { padding-top: 4rem; min-height: calc(100vh - 90px); }
.team.team--page .team-title { font-size: clamp(2.4rem, 4.5vw, 3.6rem); }

/* Responsive: stack the card on small screens */
@media (max-width: 760px) {
    .team { padding: 4.5rem 0 4rem; }
    .team-card {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.75rem;
        text-align: center;
    }
    .team-portrait { max-width: 260px; margin: 0 auto; }
    .team-bio { margin-left: auto; margin-right: auto; }
    .team-tags { justify-content: center; }
    .team-role { margin-bottom: 1rem; }
}

/* ======================================================================
   TEAM BADGES — Human vs AI Operator pills sitting above the name.
   Subtle pills that contextualize each teammate before the eye reaches
   the name and role lockup.
====================================================================== */
.team-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    padding: 0.32rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 0.85rem;
    line-height: 1;
}
.team-badge--human {
    color: rgba(226, 232, 240, 0.88);
    background: rgba(148, 163, 184, 0.10);
    border: 1px solid rgba(148, 163, 184, 0.28);
}
.team-badge--ai {
    color: rgba(186, 230, 253, 0.98);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.14), rgba(99, 102, 241, 0.14));
    border: 1px solid rgba(125, 211, 252, 0.45);
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.18);
}
.team-badge__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.95), 0 0 18px rgba(56, 189, 248, 0.6);
    animation: aiBadgePulse 1.6s ease-in-out infinite;
}
@keyframes aiBadgePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.75); }
}

/* ======================================================================
   AI TEAMMATE CARD — Claude Fable.
   Futuristic glass card with orbital rings, scanning line, and a stat
   matrix. Matches the team page palette but reads as machine-built.
====================================================================== */
.team-card--ai {
    border: 1px solid rgba(125, 211, 252, 0.32);
    background:
        linear-gradient(135deg,
            rgba(8, 47, 73, 0.42) 0%,
            rgba(15, 23, 42, 0.55) 50%,
            rgba(30, 27, 75, 0.45) 100%);
    box-shadow:
        0 30px 80px rgba(2, 6, 23, 0.6),
        0 0 0 1px rgba(125, 211, 252, 0.08) inset,
        0 0 90px rgba(56, 189, 248, 0.12) inset;
    position: relative;
}
/* Faint corner brackets — "HUD" feel */
.team-card--ai::before,
.team-card--ai::after {
    content: "";
    position: absolute;
    width: 22px; height: 22px;
    border: 1px solid rgba(125, 211, 252, 0.55);
    pointer-events: none;
    opacity: 0.7;
}
.team-card--ai::before {
    top: 14px; left: 14px;
    border-right: none; border-bottom: none;
    border-top-left-radius: 6px;
}
.team-card--ai::after {
    bottom: 14px; right: 14px;
    border-left: none; border-top: none;
    border-bottom-right-radius: 6px;
}
.team-card--ai:hover {
    box-shadow:
        0 40px 100px rgba(2, 6, 23, 0.7),
        0 0 0 1px rgba(125, 211, 252, 0.12) inset,
        0 0 120px rgba(56, 189, 248, 0.22) inset;
}

/* AI portrait — orbital rings around a glowing core */
.ai-portrait {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-portrait__core {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(56, 189, 248, 0.18) 0%,
            rgba(15, 23, 42, 0.0) 65%);
}
.ai-portrait__ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(125, 211, 252, 0.45);
    pointer-events: none;
}
.ai-portrait__ring--1 {
    inset: 6%;
    border-color: rgba(125, 211, 252, 0.55);
    border-style: solid;
    border-top-color: rgba(56, 189, 248, 0.95);
    border-right-color: rgba(56, 189, 248, 0.25);
    box-shadow: 0 0 24px rgba(56, 189, 248, 0.25);
    animation: aiRingSpin 12s linear infinite;
}
.ai-portrait__ring--2 {
    inset: 18%;
    border: 1px dashed rgba(125, 211, 252, 0.35);
    animation: aiRingSpinReverse 18s linear infinite;
}
.ai-portrait__ring--3 {
    inset: 30%;
    border-color: rgba(167, 139, 250, 0.5);
    border-top-color: rgba(167, 139, 250, 0.0);
    border-bottom-color: rgba(167, 139, 250, 0.95);
    animation: aiRingSpin 8s linear infinite reverse;
}
@keyframes aiRingSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes aiRingSpinReverse {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}
.ai-portrait__orb {
    position: absolute;
    width: 38%;
    height: 38%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%,
            rgba(224, 242, 254, 0.95) 0%,
            rgba(56, 189, 248, 0.85) 25%,
            rgba(14, 165, 233, 0.65) 55%,
            rgba(30, 27, 75, 0.6) 100%);
    box-shadow:
        0 0 40px rgba(56, 189, 248, 0.55),
        0 0 80px rgba(99, 102, 241, 0.35),
        inset 0 0 24px rgba(255, 255, 255, 0.25);
    animation: aiOrbPulse 3.2s ease-in-out infinite alternate;
}
@keyframes aiOrbPulse {
    0%   { transform: scale(1);    filter: brightness(1); }
    100% { transform: scale(1.06); filter: brightness(1.15); }
}
.ai-portrait__scan {
    position: absolute;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(56, 189, 248, 0) 0%,
        rgba(56, 189, 248, 0.95) 50%,
        rgba(56, 189, 248, 0) 100%);
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.9));
    animation: aiScan 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes aiScan {
    0%   { top: 18%; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { top: 82%; opacity: 0; }
}
.ai-portrait__glyph {
    position: relative;
    z-index: 2;
    font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
    font-weight: 500;
    font-style: italic;
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    letter-spacing: 1px;
    color: #f8fafc;
    text-shadow:
        0 0 12px rgba(255, 255, 255, 0.75),
        0 0 24px rgba(56, 189, 248, 0.85);
    mix-blend-mode: screen;
}

/* Brand logo placed over the orb — sized so it reads as the portrait */
.ai-portrait__logo {
    position: relative;
    z-index: 3;
    width: 30%;
    height: 30%;
    pointer-events: none;
    filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.55));
}
.ai-portrait__logo--claude {
    fill: #ffffff;
    filter:
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.55))
        drop-shadow(0 0 18px rgba(217, 119, 87, 0.85))
        drop-shadow(0 0 36px rgba(217, 119, 87, 0.5));
    animation: aiLogoFloat 4s ease-in-out infinite alternate;
}
.ai-portrait__logo--pplx {
    color: #ffffff;
    width: 32%;
    height: 32%;
    filter:
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.6))
        drop-shadow(0 0 18px rgba(32, 128, 141, 0.95))
        drop-shadow(0 0 36px rgba(56, 189, 248, 0.55));
    animation: aiLogoFloat 4s ease-in-out infinite alternate;
}
@keyframes aiLogoFloat {
    0%   { transform: translateY(0)    scale(1);    opacity: 0.95; }
    100% { transform: translateY(-2px) scale(1.04); opacity: 1; }
}

/* ----- Perplexity Atlas variant — teal / cyan orb instead of pure cyan ----- */
.ai-portrait__orb--pplx {
    background:
        radial-gradient(circle at 35% 30%,
            rgba(224, 242, 254, 0.95) 0%,
            rgba(94, 234, 212, 0.75) 25%,
            rgba(32, 128, 141, 0.7) 55%,
            rgba(15, 23, 42, 0.65) 100%);
    box-shadow:
        0 0 40px rgba(94, 234, 212, 0.5),
        0 0 80px rgba(32, 128, 141, 0.45),
        inset 0 0 24px rgba(255, 255, 255, 0.28);
}
.ai-portrait__scan--pplx {
    background: linear-gradient(90deg,
        rgba(94, 234, 212, 0) 0%,
        rgba(94, 234, 212, 0.95) 50%,
        rgba(94, 234, 212, 0) 100%);
    filter: drop-shadow(0 0 6px rgba(94, 234, 212, 0.9));
}
.ai-portrait--pplx .ai-portrait__ring--1 {
    border-color: rgba(125, 211, 252, 0.5);
    border-top-color: rgba(94, 234, 212, 0.95);
    border-right-color: rgba(94, 234, 212, 0.25);
    box-shadow: 0 0 24px rgba(94, 234, 212, 0.3);
}
.ai-portrait--pplx .ai-portrait__ring--3 {
    border-color: rgba(94, 234, 212, 0.5);
    border-top-color: rgba(94, 234, 212, 0.0);
    border-bottom-color: rgba(94, 234, 212, 0.95);
}
.team-card--pplx {
    background:
        linear-gradient(135deg,
            rgba(8, 47, 73, 0.4) 0%,
            rgba(15, 23, 42, 0.55) 50%,
            rgba(13, 67, 70, 0.45) 100%);
}
.team-badge--pplx {
    background: linear-gradient(135deg, rgba(94, 234, 212, 0.16), rgba(56, 189, 248, 0.12));
    border-color: rgba(94, 234, 212, 0.45);
    box-shadow: 0 0 18px rgba(94, 234, 212, 0.22);
}
.team-badge--pplx .team-badge__dot {
    background: #5eead4;
    box-shadow: 0 0 8px rgba(94, 234, 212, 0.95), 0 0 18px rgba(94, 234, 212, 0.6);
}

/* ----- Grok Vega variant — electric violet with silver highlights ----- */
.ai-portrait__logo--grok {
    width: 52%;
    height: 52%;
    object-fit: contain;
    filter:
        drop-shadow(0 0 6px rgba(233, 213, 255, 0.6))
        drop-shadow(0 0 18px rgba(167, 139, 250, 0.45));
    animation: aiLogoFloat 4s ease-in-out infinite alternate;
}
.ai-portrait__orb--grok {
    background:
        radial-gradient(circle at 35% 30%,
            rgba(226, 232, 240, 0.55) 0%,
            rgba(167, 139, 250, 0.4) 35%,
            rgba(46, 16, 101, 0.55) 70%,
            rgba(15, 23, 42, 0.85) 100%);
    box-shadow:
        0 0 24px rgba(167, 139, 250, 0.25),
        0 0 50px rgba(139, 92, 246, 0.18),
        inset 0 0 18px rgba(226, 232, 240, 0.15);
}
.ai-portrait__scan--grok {
    background: linear-gradient(90deg,
        rgba(226, 232, 240, 0) 0%,
        rgba(226, 232, 240, 0.95) 50%,
        rgba(226, 232, 240, 0) 100%);
    filter: drop-shadow(0 0 6px rgba(226, 232, 240, 0.9));
}
.ai-portrait--grok .ai-portrait__ring--1 {
    border-color: rgba(226, 232, 240, 0.5);
    border-top-color: rgba(248, 250, 252, 0.95);
    border-right-color: rgba(226, 232, 240, 0.25);
    box-shadow: 0 0 24px rgba(226, 232, 240, 0.3);
}
.ai-portrait--grok .ai-portrait__ring--2 {
    border-color: rgba(203, 213, 225, 0.35);
}
.ai-portrait--grok .ai-portrait__ring--3 {
    border-color: rgba(167, 139, 250, 0.5);
    border-top-color: rgba(167, 139, 250, 0.0);
    border-bottom-color: rgba(167, 139, 250, 0.95);
}
.team-card--grok {
    background:
        linear-gradient(135deg,
            rgba(8, 47, 73, 0.4) 0%,
            rgba(15, 23, 42, 0.55) 50%,
            rgba(46, 16, 101, 0.3) 100%);
}
.team-badge--grok {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.14), rgba(125, 211, 252, 0.1));
    border-color: rgba(196, 181, 253, 0.4);
    box-shadow: 0 0 14px rgba(167, 139, 250, 0.2);
}
.team-badge--grok .team-badge__dot {
    background: #c4b5fd;
    box-shadow: 0 0 8px rgba(196, 181, 253, 0.85), 0 0 16px rgba(139, 92, 246, 0.55);
}

/* ======================================================================
   TEAM SECTION BREAK — separates the four-card lineup from the
   Cumulative Team Intelligence panel below. Editorial chapter mark.
====================================================================== */
.team-section-break {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    max-width: 1180px;
    margin: 5rem auto 0;
    padding: 0 2rem;
}
.team-section-break__rail {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(125, 211, 252, 0) 0%,
        rgba(125, 211, 252, 0.35) 50%,
        rgba(125, 211, 252, 0) 100%);
}
.team-section-break__label {
    font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    color: rgba(125, 211, 252, 0.85);
    text-shadow: 0 0 18px rgba(125, 211, 252, 0.25);
    white-space: nowrap;
}
@media (max-width: 640px) {
    .team-section-break { margin-top: 3.5rem; gap: 1rem; }
    .team-section-break__label { font-size: 1.2rem; }
}

/* ======================================================================
   CUMULATIVE TEAM INTELLIGENCE — composite headline + growth projection.
   Closes out the team page with a single big-number panel and a chart
   that frames the team as a compounding asset.
====================================================================== */
.team-intel {
    position: relative;
    margin: 2.5rem auto 1rem;
    max-width: 1180px;
    padding: 3.25rem 3.5rem 3rem;
    border-radius: 28px;
    background:
        linear-gradient(135deg,
            rgba(8, 47, 73, 0.45) 0%,
            rgba(15, 23, 42, 0.55) 50%,
            rgba(30, 27, 75, 0.5) 100%);
    border: 1px solid rgba(125, 211, 252, 0.22);
    box-shadow:
        0 30px 90px rgba(2, 6, 23, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.025) inset,
        0 0 100px rgba(56, 189, 248, 0.10) inset;
    backdrop-filter: blur(20px) saturate(125%);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
    overflow: hidden;
    isolation: isolate;
}
.team-intel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(56, 189, 248, 0.10) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 100% 100%, rgba(167, 139, 250, 0.10) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.team-intel__header {
    text-align: center;
    margin-bottom: 2.25rem;
}
.team-intel__eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: rgba(125, 211, 252, 0.95);
    padding: 0.3rem 0.85rem;
    border: 1px solid rgba(125, 211, 252, 0.35);
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.08);
    margin-bottom: 1rem;
}
.team-intel__title {
    font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
    font-weight: 500;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    color: #f1f5f9;
    margin: 0 0 0.6rem;
    letter-spacing: 0.3px;
}
.team-intel__subtitle {
    font-size: 0.98rem;
    line-height: 1.6;
    color: rgba(226, 232, 240, 0.78);
    max-width: 560px;
    margin: 0 auto;
}

.team-intel__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
    gap: 2.5rem;
}
@media (max-width: 1080px) {
    .team-intel { padding: 2.25rem 2rem; max-width: 920px; }
    .team-intel__grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
}
@media (max-width: 880px) {
    .team-intel { padding: 1.75rem; }
    .team-intel__grid { grid-template-columns: 1fr; }
}

.team-intel__label {
    display: block;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.9);
    margin-bottom: 0.75rem;
}

/* ---- Hero composite score ---- */
.team-intel__hero {
    padding: 1.5rem 1.5rem 1.5rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.45), rgba(15, 23, 42, 0.25));
    border: 1px solid rgba(125, 211, 252, 0.2);
    position: relative;
}
.team-intel__value {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}
.team-intel__number {
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
    font-weight: 600;
    font-size: clamp(3.2rem, 6vw, 4.6rem);
    line-height: 1;
    letter-spacing: -1px;
    background: linear-gradient(180deg, #ffffff 0%, #bae6fd 45%, #38bdf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 24px rgba(56, 189, 248, 0.45));
}
.team-intel__delta {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #5eead4;
    background: rgba(94, 234, 212, 0.10);
    border: 1px solid rgba(94, 234, 212, 0.35);
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
}
.team-intel__hero-meta {
    font-size: 0.85rem;
    line-height: 1.55;
    color: rgba(186, 230, 253, 0.7);
    margin: 0 0 1.5rem;
    font-style: italic;
}

/* Breakdown bars */
.team-intel__breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.18);
}
.team-intel__breakdown-label {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.72);
    margin-bottom: 0.35rem;
    font-weight: 500;
}
.team-intel__breakdown-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 50px;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.82rem;
}
.tib-name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(226, 232, 240, 0.92);
    font-weight: 500;
}
.tib-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.tib-dot--human  { background: #94a3b8; box-shadow: 0 0 8px rgba(148, 163, 184, 0.7); }
.tib-dot--claude { background: #d97757; box-shadow: 0 0 8px rgba(217, 119, 87, 0.85); }
.tib-dot--pplx   { background: #5eead4; box-shadow: 0 0 8px rgba(94, 234, 212, 0.85); }
.tib-dot--grok   { background: #e2e8f0; box-shadow: 0 0 8px rgba(226, 232, 240, 0.85), 0 0 14px rgba(167, 139, 250, 0.5); }
.tib-bar {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: rgba(148, 163, 184, 0.12);
    overflow: hidden;
}
.tib-bar__fill {
    position: absolute;
    inset: 0;
    width: var(--w, 0%);
    border-radius: 3px;
    animation: tibBarFill 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.tib-bar__fill--human  { background: linear-gradient(90deg, rgba(148, 163, 184, 0.6), #cbd5e1); }
.tib-bar__fill--claude { background: linear-gradient(90deg, rgba(217, 119, 87, 0.6), #fdba74); }
.tib-bar__fill--pplx   { background: linear-gradient(90deg, rgba(32, 128, 141, 0.6), #5eead4); }
.tib-bar__fill--grok   { background: linear-gradient(90deg, rgba(167, 139, 250, 0.6), #e2e8f0); }
@keyframes tibBarFill {
    from { width: 0; }
    to   { width: var(--w, 0%); }
}
.tib-num {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    text-align: right;
    color: #f1f5f9;
    font-weight: 500;
    font-size: 0.9rem;
}

/* ---- Growth projection chart card ---- */
.team-intel__chart-card {
    padding: 1.5rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.45), rgba(15, 23, 42, 0.25));
    border: 1px solid rgba(125, 211, 252, 0.2);
    display: flex;
    flex-direction: column;
}
.team-intel__chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.team-intel__chart-head .team-intel__label { margin: 0; }
.team-intel__trend {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #5eead4;
}
.intel-chart__legend {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin: 0 0 0.85rem;
    padding: 0.5rem 0.75rem;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 6px;
}
.intel-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: rgba(226, 232, 240, 0.78);
    text-transform: uppercase;
}
.intel-legend__swatch {
    width: 22px;
    height: 2px;
    border-radius: 2px;
    flex-shrink: 0;
}
.intel-legend__swatch--team {
    background: linear-gradient(90deg, #bae6fd 0%, #38bdf8 50%, #a78bfa 100%);
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.6);
}
.intel-legend__swatch--model {
    background: repeating-linear-gradient(90deg, rgba(148,163,184,0.7) 0 4px, transparent 4px 8px);
}
.team-intel__chart {
    position: relative;
    width: 100%;
    aspect-ratio: 600 / 300;
}
.intel-chart {
    width: 100%;
    height: 100%;
    display: block;
}
/* Animate the chart lines drawing in */
.intel-chart__line--solid {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: intelDraw 2s ease-out 0.2s forwards;
}
.intel-chart__line--dashed {
    opacity: 0;
    animation: intelFadeIn 0.8s ease-out 2.0s forwards;
}
.intel-chart__area {
    opacity: 0;
    animation: intelFadeIn 1.2s ease-out 1.2s forwards;
}
.intel-chart__dots circle {
    opacity: 0;
    animation: intelDotPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.intel-chart__dots circle:nth-child(1) { animation-delay: 0.4s; }
.intel-chart__dots circle:nth-child(2) { animation-delay: 0.7s; }
.intel-chart__dots circle:nth-child(3) { animation-delay: 1.0s; }
.intel-chart__dots circle:nth-child(4) { animation-delay: 1.3s; }
.intel-chart__dots circle:nth-child(5) { animation-delay: 2.2s; }
.intel-chart__dots circle:nth-child(6) { animation-delay: 2.5s; }
.intel-chart__dots circle:nth-child(7) {
    animation-delay: 2.8s;
    transform-origin: 560px 30px;
}
.intel-chart__dots circle:last-child {
    animation: intelDotPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 2.8s forwards,
               intelDotPulse 1.8s ease-in-out 3.2s infinite;
}
@keyframes intelDraw {
    to { stroke-dashoffset: 0; }
}
@keyframes intelFadeIn {
    to { opacity: 1; }
}
@keyframes intelDotPop {
    from { opacity: 0; transform: scale(0.3); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes intelDotPulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.7)); }
    50%      { filter: drop-shadow(0 0 14px rgba(167, 139, 250, 1)); }
}
.intel-chart__endpoint text {
    opacity: 0;
    animation: intelFadeIn 0.8s ease-out 2.8s forwards;
}
.intel-chart__now line, .intel-chart__now text {
    opacity: 0;
    animation: intelFadeIn 0.8s ease-out 1.5s forwards;
}

.intel-chart__xaxis {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0.5rem 0 2rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.65rem;
    letter-spacing: 1px;
    color: rgba(148, 163, 184, 0.7);
}

/* Milestone trio */
.team-intel__milestones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-top: 2.75rem;
}
.intel-milestone {
    padding: 0.7rem 0.6rem;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(125, 211, 252, 0.18);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.intel-milestone__year {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: rgba(125, 211, 252, 0.85);
    text-transform: uppercase;
    white-space: nowrap;
}
.intel-milestone__value {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    line-height: 1.1;
}
.intel-milestone__meta {
    font-size: 0.65rem;
    color: rgba(186, 230, 253, 0.65);
    font-style: italic;
}
.intel-milestone--terminal {
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.12), rgba(15, 23, 42, 0.4));
    border-color: rgba(167, 139, 250, 0.4);
}
.intel-milestone--terminal .intel-milestone__year { color: #c4b5fd; }
.intel-milestone--terminal .intel-milestone__value {
    background: linear-gradient(180deg, #ddd6fe 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Stat matrix — 2-3 column responsive grid of system stats */
.ai-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0 0 1.25rem;
}
.ai-stat {
    position: relative;
    padding: 0.6rem 0.7rem;
    border-radius: 10px;
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0.55) 0%,
        rgba(15, 23, 42, 0.25) 100%);
    border: 1px solid rgba(125, 211, 252, 0.18);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.ai-stat::before {
    content: "";
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(56, 189, 248, 0) 0%,
        rgba(56, 189, 248, 0.55) 50%,
        rgba(56, 189, 248, 0) 100%);
}
.ai-stat:hover {
    border-color: rgba(125, 211, 252, 0.4);
    transform: translateY(-2px);
}
.ai-stat__label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.85);
}
.ai-stat__value {
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
    font-weight: 500;
    font-size: 1.05rem;
    color: #f1f5f9;
    line-height: 1.1;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: baseline;
    gap: 0.15rem;
    white-space: nowrap;
}
.ai-stat__unit {
    white-space: nowrap;
}
.ai-stat__unit {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(125, 211, 252, 0.9);
    letter-spacing: 1px;
    margin-left: 0.18rem;
    text-transform: uppercase;
}
.ai-stat__meta {
    font-size: 0.72rem;
    color: rgba(186, 230, 253, 0.7);
    font-style: italic;
    line-height: 1.35;
}

/* AI tag variant — a touch more saturated than the human tags */
.team-tags--ai li {
    color: rgba(224, 242, 254, 0.98);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.14), rgba(99, 102, 241, 0.10));
    border-color: rgba(125, 211, 252, 0.4);
}

@media (max-width: 760px) {
    .ai-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .team-card--ai::before,
    .team-card--ai::after { display: none; }
    .ai-portrait { max-width: 240px; margin: 0 auto; }
}
@media (max-width: 420px) {
    .ai-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ======================================================================
   TEAM PULL QUOTE — Licklider epigraph between Nicholas and AI operators.
   Editorial bridge: human → partnership thesis.
====================================================================== */
.team-pullquote {
    max-width: 1240px;
    margin: 4.5rem auto 2.5rem;
    padding: 2.5rem 3rem 2.25rem;
    text-align: center;
    position: relative;
    color: rgba(226, 232, 240, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    border-radius: 24px;
    background:
        radial-gradient(ellipse at center,
            rgba(8, 14, 28, 0.78) 0%,
            rgba(8, 14, 28, 0.55) 55%,
            rgba(8, 14, 28, 0) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.team-pullquote__mark {
    width: 36px;
    height: 28px;
    color: rgba(125, 211, 252, 0.55);
    flex-shrink: 0;
    filter: drop-shadow(0 0 12px rgba(125, 211, 252, 0.25));
}

.team-pullquote__text {
    margin: 0;
    font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.5rem, 2.1vw, 1.95rem);
    line-height: 1.4;
    letter-spacing: 0.005em;
    color: #ffffff;
    max-width: 920px;
    text-wrap: balance;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.85),
        0 4px 18px rgba(0, 0, 0, 0.65);
}

.team-pullquote__cite {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-style: normal;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.85);
    flex-wrap: wrap;
    justify-content: center;
}

.team-pullquote__name {
    color: rgba(125, 211, 252, 0.9);
    font-weight: 600;
}

.team-pullquote__sep {
    color: rgba(125, 211, 252, 0.5);
}

.team-pullquote__source {
    color: rgba(148, 163, 184, 0.75);
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.78rem;
}

.team-pullquote__source em {
    font-style: italic;
    color: rgba(203, 213, 225, 0.85);
}

@media (max-width: 720px) {
    .team-pullquote {
        margin: 3rem auto 2rem;
        padding: 1.75rem 1.25rem 1.5rem;
    }
    .team-pullquote__text {
        font-size: 1.35rem;
        line-height: 1.4;
    }
    .team-pullquote__br { display: none; }
}

/* ======================================================================
   TEAM DIVIDER — separates Nicholas (human) from the AI operators trio.
   Horizontal rail with a labeled chip in the middle.
====================================================================== */
.team-divider {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 0.5rem auto;
    max-width: 920px;
    padding: 0 0.5rem;
}
.team-divider__rail {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(125, 211, 252, 0) 0%,
        rgba(125, 211, 252, 0.35) 50%,
        rgba(125, 211, 252, 0) 100%);
}
.team-divider__label {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: rgba(186, 230, 253, 0.85);
    padding: 0.45rem 1rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(125, 211, 252, 0.25);
    box-shadow:
        0 0 24px rgba(56, 189, 248, 0.12),
        inset 0 0 12px rgba(56, 189, 248, 0.06);
    backdrop-filter: blur(8px);
}
.team-divider__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #5eead4;
    box-shadow: 0 0 8px rgba(94, 234, 212, 0.9);
    animation: teamDividerDotPulse 2.4s ease-in-out infinite alternate;
}
@keyframes teamDividerDotPulse {
    0%   { opacity: 0.55; transform: scale(0.85); }
    100% { opacity: 1;    transform: scale(1.15); }
}
@media (max-width: 760px) {
    .team-divider { gap: 0.75rem; }
    .team-divider__label { font-size: 0.62rem; letter-spacing: 2.5px; padding: 0.4rem 0.75rem; }
}

/* ======================================================================
   MANIFESTO QUOTE — standalone pull-quote section with typed animation.
   Sits between Team and Contact, giving the quote room to breathe.
====================================================================== */
.manifesto-quote {
    position: relative;
    padding: 7rem 0 6rem;
    text-align: center;
    isolation: isolate;
}
.manifesto-quote::before {
    /* Soft cyan haze backdrop so the quote sits on a subtle light pool */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 60% at 50% 50%, rgba(56,189,248,0.07) 0%, transparent 65%);
    z-index: -1;
}
.manifesto-quote__text {
    font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    line-height: 1.35;
    letter-spacing: 0.4px;
    margin: 0 auto;
    padding: 0 1rem;
    max-width: 900px;
    color: #eaf2ff;
    text-shadow: 0 0 24px rgba(180, 220, 255, 0.22);
}
.manifesto-quote__typed {
    /* The letters get appended into this span by JS */
    white-space: pre-wrap;
}
.manifesto-quote__mark {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.35em;
    line-height: 0;
    color: rgba(0, 212, 255, 0.55);
    vertical-align: -0.18em;
    padding: 0 0.06em;
    opacity: 0;
    transition: opacity 0.6s ease 0.1s;
}
.manifesto-quote.is-active .manifesto-quote__mark { opacity: 1; }
.manifesto-quote__caret {
    display: inline-block;
    width: 2px;
    height: 0.95em;
    background: rgba(125, 211, 252, 0.9);
    margin-left: 4px;
    vertical-align: -0.12em;
    animation: manifestoBlink 1s steps(2, start) infinite;
    opacity: 0;
}
.manifesto-quote.is-typing .manifesto-quote__caret { opacity: 1; }
@keyframes manifestoBlink { 50% { opacity: 0; } }
.manifesto-quote__rule {
    display: block;
    width: 0;
    height: 1px;
    margin: 2.5rem auto 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(180, 220, 255, 0.5) 50%,
        transparent 100%
    );
    transition: width 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s;
}
.manifesto-quote.is-done .manifesto-quote__rule { width: 200px; }

/* ----------------------------------------------------------------------
   Contact section header — framing for Join Us
---------------------------------------------------------------------- */
.contact { padding-top: 5rem; }
.contact-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}
.contact-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(125, 211, 252, 0.85);
    padding: 0.35rem 0.9rem;
    border: 1px solid rgba(125, 211, 252, 0.3);
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.06);
    margin-bottom: 1.25rem;
}
.contact-header h2 {
    margin: 0 0 0.75rem;
    letter-spacing: 0.5px;
}
.contact-lede {
    font-size: 1.02rem;
    line-height: 1.65;
    color: rgba(226, 232, 240, 0.78);
    margin: 0 auto;
    max-width: 580px;
}

/* ----------------------------------------------------------------------
   Contact masthead — refined editorial treatment for the
   pull-quote + "Join Us" lockup.
---------------------------------------------------------------------- */
.contact-masthead {
    margin: 0 auto 3.5rem;
    max-width: 900px;
    padding: 0 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.contact-intro-quote {
    /* Elegant serif pull-quote */
    font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.5rem, 2.6vw, 2.15rem);
    line-height: 1.3;
    letter-spacing: 0.3px;
    margin: 0;
    padding: 0 0.5rem;
    color: #e8edf6;
    text-shadow: 0 0 22px rgba(180, 220, 255, 0.18);
    position: relative;
}

.contact-intro-quote-open,
.contact-intro-quote-close {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.35em;
    line-height: 0;
    color: rgba(0, 212, 255, 0.55);
    vertical-align: -0.18em;
    padding: 0 0.06em;
}
.contact-intro-quote-open { margin-right: 0.05em; }
.contact-intro-quote-close { margin-left: 0.05em; }

/* Thin metallic rule beneath the quote */
.contact-rule {
    display: block;
    width: 120px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(180, 220, 255, 0.45) 50%,
        transparent 100%
    );
    margin: 0.25rem auto 0.5rem;
    opacity: 0.85;
}

/* Tighten the "Join Us" inside the masthead so it reads as one lockup */
.contact-masthead h2 {
    margin: 0;
    letter-spacing: 0.5px;
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 10px;
    color: var(--light);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s, background 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--gray);
}

.submit-button {
    width: 100%;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}

.submit-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.5);
}

/* Footer */
.footer {
    padding: 2rem 0;
    text-align: center;
    border-top: 1px solid rgba(99, 102, 241, 0.1);
    color: var(--gray);
}

/* Responsive */
/* Email Signup Popup */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.popup-content {
    background: linear-gradient(135deg, rgba(20, 20, 30, 0.95), rgba(10, 10, 20, 0.98));
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 20px;
    padding: 3rem;
    max-width: 450px;
    width: 90%;
    text-align: center;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: all 0.3s ease;
    box-shadow: 0 0 60px rgba(0, 212, 255, 0.2),
                0 0 100px rgba(124, 58, 237, 0.15),
                0 25px 50px rgba(0, 0, 0, 0.5);
}

.popup-overlay.active .popup-content {
    transform: scale(1) translateY(0);
}

.popup-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: var(--gray);
    font-size: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1;
}

.popup-close:hover {
    color: var(--primary);
    transform: scale(1.1);
}

.popup-title {
    font-size: 1.8rem;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, var(--chrome-light), var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.4));
}

.popup-subtitle {
    color: var(--gray);
    margin-bottom: 2rem;
    font-size: 1rem;
}

.popup-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.popup-form input {
    width: 100%;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 50px;
    color: var(--light);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.popup-form input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

.popup-form input::placeholder {
    color: var(--gray);
}

.popup-submit {
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
}

.popup-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.5),
                0 0 50px rgba(124, 58, 237, 0.4);
}

.popup-disclaimer {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--gray);
    opacity: 0.7;
}

@media (max-width: 768px) {
    .nav-links {
        gap: 1rem;
    }

    h2 {
        font-size: 2rem;
    }

    .cards-container {
        grid-template-columns: 1fr;
    }

    .bottom-card {
        grid-column: 1;
    }

    .connection-lines {
        display: none;
    }

    .popup-content {
        padding: 2rem;
    }

    .popup-title {
        font-size: 1.5rem;
    }
}

/* ============================================================
   UNIVERSAL LIQUID-GLASS BUTTON TREATMENT
   Apple-inspired see-through glass pills applied to every action
   button on the site. Galaxy background flows through each one.
   ============================================================ */

/* Core glass look — applied to all action buttons */
.flip-submit-btn,
.premium-subscribe-btn,
.pricing-submit-btn,
.subscribe-button,
.elite-button,
.submit-button,
.popup-submit {
    position: relative !important;
    isolation: isolate;
    display: inline-block;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-align: center;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 999px !important;
    background: transparent !important;
    background-image: none !important;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    letter-spacing: 0.02em;
    box-shadow:
        0 0 0 1px rgba(0, 212, 255, 0.55),
        0 0 22px rgba(0, 212, 255, 0.45),
        0 0 48px rgba(0, 212, 255, 0.25),
        0 14px 30px rgba(0, 0, 0, 0.45),
        0 4px 10px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(255, 255, 255, 0.10),
        inset 0 0 20px rgba(255, 255, 255, 0.06) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* Top specular crescent — glossy gloss across upper half */
.flip-submit-btn::before,
.premium-subscribe-btn::before,
.pricing-submit-btn::before,
.subscribe-button::before,
.elite-button::before,
.submit-button::before,
.popup-submit::before {
    content: '';
    position: absolute;
    top: 1.5px;
    left: 3%;
    right: 3%;
    height: 55%;
    border-radius: 999px 999px 40px 40px / 999px 999px 22px 22px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.38) 0%,
        rgba(255, 255, 255, 0.18) 35%,
        rgba(255, 255, 255, 0.04) 75%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
}

/* Bottom refractive reflection */
.flip-submit-btn::after,
.premium-subscribe-btn::after,
.pricing-submit-btn::after,
.subscribe-button::after,
.elite-button::after,
.submit-button::after,
.popup-submit::after {
    content: '';
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 2px;
    height: 28%;
    border-radius: 999px;
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.04) 55%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
    filter: blur(0.5px);
}

/* Hover state — amplified cyan luminance, slight lift */
.flip-submit-btn:hover,
.premium-subscribe-btn:hover,
.pricing-submit-btn:hover,
.subscribe-button:hover,
.elite-button:hover,
.submit-button:hover,
.popup-submit:hover {
    transform: translateY(-1px) !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow:
        0 0 0 1px rgba(0, 212, 255, 0.8),
        0 0 30px rgba(0, 212, 255, 0.65),
        0 0 60px rgba(0, 212, 255, 0.35),
        0 18px 38px rgba(0, 0, 0, 0.5),
        0 6px 14px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 22px rgba(255, 255, 255, 0.08) !important;
}

/* Active / pressed state */
.flip-submit-btn:active,
.premium-subscribe-btn:active,
.pricing-submit-btn:active,
.subscribe-button:active,
.elite-button:active,
.submit-button:active,
.popup-submit:active {
    transform: translateY(0) !important;
    box-shadow:
        0 0 0 1px rgba(0, 212, 255, 0.7),
        0 0 18px rgba(0, 212, 255, 0.4),
        0 6px 14px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Preserve subscribe button default padding/text color when inside .subscribe-button
   but ensure inline text fill overrides any gradient-text on parents */
.subscribe-button,
.elite-button {
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: initial !important;
}

/* Tertiary/link-like buttons stay subtle (don't force pill on back buttons) */
.flip-back-btn,
.pricing-back-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.65) !important;
    transition: color 0.25s ease;
}
.flip-back-btn:hover,
.pricing-back-btn:hover {
    color: #ffffff !important;
    text-shadow: 0 0 12px rgba(0, 212, 255, 0.55);
}

/* ============================================================
   MISSION SECTION — CINEMATIC SCROLL REVEAL
   ============================================================ */

.mission {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Stardust particle canvas — sits behind content, drifts slowly */
.mission-stardust {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.4s ease;
}
.mission.in-view .mission-stardust { opacity: 1; }

/* Soft cosmic orb that drifts up as section enters */
.mission-orb {
    position: absolute;
    left: 50%;
    top: 55%;
    width: 720px;
    height: 720px;
    transform: translate(-50%, 20%) scale(0.85);
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        rgba(0, 212, 255, 0.22) 0%,
        rgba(124, 58, 237, 0.14) 28%,
        rgba(255, 0, 110, 0.06) 55%,
        rgba(0, 0, 0, 0) 72%);
    filter: blur(18px);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 1.4s ease;
}
.mission.in-view .mission-orb {
    opacity: 1;
    transform: translate(-50%, -18%) scale(1);
}

/* Content sits above the atmospheric layers */
.mission .container { position: relative; z-index: 2; }

/* ---------- Title: cinematic sheen reveal ---------- */
/* The h2 is a block element — keep it centered like other section headings.
   overflow:hidden on the block would hide the sheen streak too early,
   so we move overflow to the inner wrapper. */
.mission-title {
    position: relative;
    display: block;
    text-align: center;
    margin: 0 auto 2.5rem;
    overflow: visible;
}

.mission-title-inner {
    display: inline-block;
    position: relative;
    /* Clip the sheen to the text box here instead of the outer h2 */
    overflow: hidden;
    /* Re-apply the h2 gradient here since background-clip:text doesn't inherit to inline-block children */
    background: linear-gradient(135deg, var(--chrome-light), var(--silver-shine), var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0;
    transform: translateY(22px);
    filter: blur(10px);
    letter-spacing: 0.05em;
    transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
                filter 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.mission.in-view .mission-title-inner {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Diagonal sheen streak that sweeps across the title on reveal */
.mission-title-sheen {
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 45%,
        rgba(0, 212, 255, 0.65) 55%,
        rgba(255, 255, 255, 0) 100%);
    filter: blur(8px);
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: 0;
}
.mission.in-view .mission-title-sheen {
    animation: missionSheen 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

@keyframes missionSheen {
    0%   { left: -120%; opacity: 0; }
    20%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { left: 220%; opacity: 0; }
}

/* ---------- Word-by-word reveal for body text ---------- */
/* Re-apply the silver gradient fill per word since each inline-block
   creates its own painting box (parent background-clip:text doesn't inherit). */
.mission-text .word {
    display: inline-block;
    background: linear-gradient(180deg, var(--chrome-light), var(--silver-glow), var(--chrome-mid));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px) drop-shadow(0 0 12px rgba(216, 227, 255, 0.25));
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--word-delay, 0s);
    will-change: opacity, transform, filter;
}

/* Highlighted words use the accent cyan→violet gradient */
.mission-text .word.is-highlight {
    background: linear-gradient(135deg, #ffffff, var(--primary), var(--mystic));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}
.mission-text .word-space { display: inline-block; width: 0.28em; }

.mission.in-view .mission-text .word {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0) drop-shadow(0 0 12px rgba(216, 227, 255, 0.25));
}

/* Highlighted phrases get a delayed glow pulse after they land */
.mission-text .word.is-highlight {
    position: relative;
}
.mission.in-view .mission-text .word.is-highlight {
    animation: highlightPulse 2.2s ease-out forwards;
    animation-delay: calc(var(--word-delay, 0s) + 0.6s);
}

@keyframes highlightPulse {
    0%   { filter: drop-shadow(0 0 0 rgba(0, 212, 255, 0)); }
    40%  { filter: drop-shadow(0 0 18px rgba(0, 212, 255, 0.75))
                    drop-shadow(0 0 32px rgba(124, 58, 237, 0.45)); }
    100% { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3)); }
}

/* Reduced motion — skip the choreography, keep it accessible */
@media (prefers-reduced-motion: reduce) {
    .mission-title-inner,
    .mission-text .word {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
    .mission-title-sheen,
    .mission-stardust,
    .mission-orb { display: none; }
    .mission.in-view .mission-text .word.is-highlight { animation: none; }
}

/* ============================================================
   INVESTMENT FOCUS I — AI (video background section)
   ============================================================ */

.focus-ai {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 0 !important;
    min-height: 100vh;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Full-bleed looping video */
.focus-ai-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    /* Subtle grade — pull blue/cyan, slight contrast lift for cinematic feel */
    filter: brightness(0.85) contrast(1.08) saturate(1.1);
}

/* Dark vignette + cinematic gradient for legibility */
.focus-ai-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        /* Top-edge blend — fully opaque black fading in so the section
           begins from the same deep black as the Mission section ends with */
        linear-gradient(180deg,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.92) 6%,
            rgba(0, 0, 0, 0.55) 14%,
            rgba(0, 0, 0, 0.25) 28%,
            rgba(0, 0, 0, 0.25) 72%,
            rgba(0, 0, 0, 0.55) 86%,
            rgba(0, 0, 0, 0.92) 94%,
            rgba(0, 0, 0, 1) 100%),
        /* center-focused radial for reading zone */
        radial-gradient(ellipse 70% 60% at 50% 50%,
            rgba(0, 0, 0, 0.15) 0%,
            rgba(0, 0, 0, 0.55) 100%);
}

/* Content sits above video and overlay */
.focus-ai-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1100px;
}

/* Eyebrow label — small uppercase cyan tag above title */
.focus-ai-eyebrow {
    font-size: 0.85rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(0, 212, 255, 0.95);
    margin-bottom: 1.25rem;
    font-weight: 600;
    text-shadow: 0 0 18px rgba(0, 212, 255, 0.6),
                 0 1px 2px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px);
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1s cubic-bezier(0.22, 1, 0.36, 1),
                filter 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Main title */
.focus-ai-title {
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.05;
    margin: 0 0 2rem;
    background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 50%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 28px rgba(0, 212, 255, 0.45))
            drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
                transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

/* Statement */
.focus-ai-statement {
    font-size: clamp(1.25rem, 2.2vw, 1.85rem);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 400;
    max-width: 900px;
    margin: 0 auto;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75),
                 0 0 30px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(18px);
    filter: blur(4px);
    transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s,
                transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s,
                filter 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

/* Accent words in the statement — tuned to site's cyan/violet/silver palette */
.focus-ai-accent {
    background: linear-gradient(135deg, #d6e9f5 0%, #9fd8ef 55%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 500;
    letter-spacing: 0.005em;
    filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.35));
}
.focus-ai-accent--bright {
    background: linear-gradient(110deg,
                #b8ecff 0%,
                var(--primary) 38%,
                #a78bfa 72%,
                var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
    letter-spacing: 0.005em;
    filter: drop-shadow(0 0 14px rgba(0, 212, 255, 0.4))
            drop-shadow(0 0 20px rgba(124, 58, 237, 0.45));
}

/* Reveal states — triggered by IntersectionObserver via .in-view class */
.focus-ai.in-view .focus-ai-eyebrow,
.focus-ai.in-view .focus-ai-title,
.focus-ai.in-view .focus-ai-statement,
.focus-ai.in-view .focus-ai-statement-wrap {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
.focus-ai.in-view .focus-ai-title {
    filter: drop-shadow(0 0 28px rgba(0, 212, 255, 0.45))
            drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
}
.focus-ai.in-view .focus-ai-statement {
    filter: blur(0);
}

/* Reduced motion — show content immediately */
@media (prefers-reduced-motion: reduce) {
    .focus-ai-eyebrow,
    .focus-ai-title,
    .focus-ai-statement,
    .focus-ai-statement-wrap {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
    .focus-ai-video { display: none; }
    .focus-ai { background: radial-gradient(ellipse at center, #0a0a1a, #000); }
}

/* Mobile */
@media (max-width: 768px) {
    .focus-ai { padding: 0 !important; min-height: 100vh; height: 100vh; }
    .focus-ai-eyebrow { font-size: 0.75rem; letter-spacing: 0.3em; }
}


/* ============================================================
   LIQUID GLASS — Focus AI Statement
   Frosted capsule that lets the video shimmer through the text.
   ============================================================ */

.focus-ai-statement-wrap {
    display: flex;
    justify-content: center;
    margin: 2.5rem auto 0;
    /* Allow the wrapper to grow as wide as needed for one-line text */
    max-width: 96vw;
    width: auto;
    opacity: 0;
    transform: translateY(20px);
    filter: blur(6px);
    transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s,
                transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s,
                filter 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.focus-ai-statement.focus-ai-statement--glass {
    /* Reset the previous reveal transitions — the wrapper handles them */
    position: relative;
    isolation: isolate;
    display: inline-block;
    padding: 1.3rem 2.6rem;
    margin: 0;
    max-width: none;
    /* Viewport-scaled so it always fits on one line */
    font-size: clamp(0.82rem, 1.55vw, 1.45rem);
    line-height: 1.4;
    white-space: nowrap;
    color: #ffffff;
    font-weight: 400;
    letter-spacing: 0.005em;
    text-align: center;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 0 18px rgba(0, 0, 0, 0.35);

    /* Glass surface */
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 28px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(255, 255, 255, 0.04) 45%,
            rgba(0, 212, 255, 0.06) 100%
        );
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
            backdrop-filter: blur(14px) saturate(1.4);

    /* Cyan edge light + chromatic rim + inner gloss */
    box-shadow:
        0 0 0 1px rgba(0, 212, 255, 0.32),
        0 0 28px rgba(0, 212, 255, 0.28),
        0 0 70px rgba(124, 58, 237, 0.18),
        0 18px 44px rgba(0, 0, 0, 0.55),
        0 6px 16px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.50),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 40px rgba(255, 255, 255, 0.04);

    /* Override previous statement opacity/transform — wrapper handles reveal */
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;

    overflow: hidden;
}

/* Top specular gloss — the "wet" light across upper half */
.focus-ai-statement--glass::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 2%;
    right: 2%;
    height: 55%;
    border-radius: 28px 28px 120px 120px / 28px 28px 40px 40px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.32) 0%,
        rgba(255, 255, 255, 0.14) 35%,
        rgba(255, 255, 255, 0.03) 75%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
}

/* Bottom refractive reflection */
.focus-ai-statement--glass::after {
    content: '';
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 2px;
    height: 30%;
    border-radius: 0 0 24px 24px;
    background: linear-gradient(
        to top,
        rgba(0, 212, 255, 0.18) 0%,
        rgba(124, 58, 237, 0.08) 40%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
    opacity: 0.85;
}

/* Keep text above the gloss layers */
.focus-ai-statement__text {
    position: relative;
    z-index: 2;
    display: inline-block;
}

/* Slow drifting shimmer sweep — liquid motion across the glass */
.focus-ai.in-view .focus-ai-statement--glass {
    animation: focus-ai-glass-shimmer 9s ease-in-out infinite;
    background-size: 200% 200%;
}
@keyframes focus-ai-glass-shimmer {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

/* Mobile tuning for glass — still one line, capsule fits viewport cleanly */
@media (max-width: 768px) {
    .focus-ai-statement.focus-ai-statement--glass {
        padding: 0.7rem 0.75rem;
        border-radius: 14px;
        /* Pure vw scaling — the single line is guaranteed to fit any mobile width */
        font-size: 2.45vw;
        letter-spacing: -0.01em;
        max-width: calc(100vw - 1rem);
    }
    .focus-ai-statement-wrap {
        margin-top: 1.8rem;
        max-width: calc(100vw - 1rem);
        padding: 0 0.5rem;
    }
}

/* Reduced motion — no shimmer */
@media (prefers-reduced-motion: reduce) {
    .focus-ai.in-view .focus-ai-statement--glass {
        animation: none;
    }
}


/* ============================================================
   Focus AI statement — per-character slow reveal
   Each character starts invisible + blurred and fades in with
   a cascading delay set inline by JS.
   ============================================================ */
.focus-ai-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(6px);
    filter: blur(3px);
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform, filter;
}
.focus-ai-char--space {
    /* Spaces still need to be visible (they're just whitespace) but the
       animation is harmless */
    opacity: 1;
}
.focus-ai.in-view .focus-ai-char {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .focus-ai-char {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}


/* ============================================================
   Seamless blending between Mission and Focus AI sections
   Adds soft vignettes at both ends so there's no hard seam.
   ============================================================ */

/* Mission: fade the top and bottom to black so it blends into
   whatever section sits above (hero) and below (focus-ai). */
.mission::before,
.mission::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 3; /* above stardust/orb, below content (content is z-5+) */
}
.mission::before {
    top: 0;
    height: 18%;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.4) 40%,
        rgba(0, 0, 0, 0) 100%
    );
}
.mission::after {
    bottom: 0;
    height: 28%;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.45) 45%,
        rgba(0, 0, 0, 0.88) 82%,
        rgba(0, 0, 0, 1) 100%
    );
}

/* Ensure mission-content (text) sits above the fade overlays */
.mission-content {
    position: relative;
    z-index: 5;
}

/* ========= Portfolio Returns Section ========= */
.portfolio-returns {
    position: relative;
    min-height: 100vh;
    padding: 120px 0 140px;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(124, 58, 237, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 100%, rgba(0, 212, 255, 0.16) 0%, transparent 55%),
        linear-gradient(180deg, #000000 0%, #050812 45%, #000000 100%);
    overflow: hidden;
    isolation: isolate;
}

/* Blend seam from preceding blockchain section */
.portfolio-returns::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 140px;
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: 1;
}
.portfolio-returns::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 180px;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: 1;
}

.pr-stardust {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.8), transparent 60%),
        radial-gradient(1px 1px at 68% 14%, rgba(255,255,255,0.6), transparent 60%),
        radial-gradient(1px 1px at 82% 74%, rgba(255,255,255,0.5), transparent 60%),
        radial-gradient(1px 1px at 34% 58%, rgba(255,255,255,0.7), transparent 60%),
        radial-gradient(1px 1px at 92% 42%, rgba(255,255,255,0.4), transparent 60%),
        radial-gradient(1px 1px at 46% 88%, rgba(255,255,255,0.6), transparent 60%),
        radial-gradient(1px 1px at 6% 72%, rgba(255,255,255,0.5), transparent 60%),
        radial-gradient(1px 1px at 76% 32%, rgba(255,255,255,0.7), transparent 60%);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
    animation: pr-stardust-drift 24s ease-in-out infinite alternate;
}
@keyframes pr-stardust-drift {
    from { transform: translateY(0) translateX(0); opacity: 0.45; }
    to   { transform: translateY(-12px) translateX(6px); opacity: 0.7; }
}

.pr-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}
.pr-glow--1 {
    width: 520px; height: 520px;
    top: -140px; left: -160px;
    background: radial-gradient(circle, rgba(0,212,255,0.55) 0%, transparent 70%);
    animation: pr-glow-pulse 12s ease-in-out infinite;
}
.pr-glow--2 {
    width: 620px; height: 620px;
    bottom: -200px; right: -180px;
    background: radial-gradient(circle, rgba(124,58,237,0.5) 0%, transparent 70%);
    animation: pr-glow-pulse 14s ease-in-out infinite 2s;
}
@keyframes pr-glow-pulse {
    0%, 100% { transform: scale(1); opacity: 0.45; }
    50%      { transform: scale(1.08); opacity: 0.75; }
}

.pr-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    text-align: center;
}

.pr-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: #00d4ff;
    font-weight: 600;
    margin-bottom: 18px;
}

.pr-title {
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #ffffff 0%, #00d4ff 50%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 14px;
}

.pr-subtitle {
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    color: rgba(255,255,255,0.72);
    max-width: 640px;
    margin: 0 auto 56px;
    line-height: 1.55;
}

/* Metrics grid */
.pr-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-bottom: 56px;
}
.pr-metric {
    position: relative;
    padding: 28px 22px 26px;
    background: linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.015) 100%);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-align: left;
    overflow: hidden;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.pr-metric::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,212,255,0.08) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.pr-metric:hover {
    transform: translateY(-4px);
    border-color: rgba(0,212,255,0.35);
    box-shadow: 0 16px 48px rgba(0,212,255,0.15);
}
.pr-metric:hover::before { opacity: 1; }

.pr-metric--hero {
    background: linear-gradient(180deg, rgba(0,212,255,0.10) 0%, rgba(124,58,237,0.06) 100%);
    border-color: rgba(0,212,255,0.25);
}

.pr-metric__label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    font-weight: 600;
    margin-bottom: 14px;
}
.pr-metric__value {
    display: block;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #ffffff 0%, #00d4ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
    margin-bottom: 10px;
    line-height: 1;
}
.pr-metric--hero .pr-metric__value {
    background: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pr-metric__delta {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.pr-metric__delta--up { color: #34d399; }

/* Chart */
.pr-chart-wrap {
    position: relative;
    padding: 28px 28px 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 18px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-bottom: 48px;
}
.pr-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}
.pr-chart-title {
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    font-weight: 600;
}
.pr-chart-legend {
    display: flex;
    gap: 22px;
}
.pr-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.7);
}
.pr-legend-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.pr-legend-dot--fund { background: linear-gradient(135deg, #00d4ff, #7c3aed); box-shadow: 0 0 10px rgba(0,212,255,0.6); }
.pr-legend-dot--bench { background: rgba(255,255,255,0.45); }

.pr-chart {
    width: 100%;
    height: 260px;
    display: block;
}
.pr-chart__fund {
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
    filter: drop-shadow(0 0 12px rgba(0,212,255,0.45));
    transition: stroke-dashoffset 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pr-chart__fund-area {
    opacity: 0;
    transition: opacity 1.2s ease 0.9s;
}
.pr-chart__bench {
    stroke-dasharray: 4 4;
    opacity: 0;
    transition: opacity 1.0s ease 0.4s;
}

.portfolio-returns.in-view .pr-chart__fund { stroke-dashoffset: 0; }
.portfolio-returns.in-view .pr-chart__fund-area { opacity: 1; }
.portfolio-returns.in-view .pr-chart__bench { opacity: 1; }

.pr-chart-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding: 0 4px;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
}

/* Footer stats */
.pr-footer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 32px;
}
.pr-stat {
    padding: 18px 14px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    text-align: center;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.pr-stat:hover {
    border-color: rgba(0,212,255,0.3);
    background: rgba(0,212,255,0.04);
}
.pr-stat__label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    font-weight: 600;
    margin-bottom: 8px;
}
.pr-stat__value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.pr-disclaimer {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.5;
    font-style: normal;
}

/* Scroll reveal for pr */
[data-pr-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.portfolio-returns.in-view [data-pr-reveal] { opacity: 1; transform: none; }
.portfolio-returns.in-view [data-pr-reveal]:nth-child(1) { transition-delay: 0s; }
.portfolio-returns.in-view [data-pr-reveal]:nth-child(2) { transition-delay: 0.08s; }
.portfolio-returns.in-view [data-pr-reveal]:nth-child(3) { transition-delay: 0.16s; }
.portfolio-returns.in-view [data-pr-reveal]:nth-child(4) { transition-delay: 0.28s; }
.portfolio-returns.in-view [data-pr-reveal]:nth-child(5) { transition-delay: 0.48s; }
.portfolio-returns.in-view [data-pr-reveal]:nth-child(6) { transition-delay: 0.64s; }
.portfolio-returns.in-view [data-pr-reveal]:nth-child(7) { transition-delay: 0.82s; }

@media (max-width: 900px) {
    .pr-metrics { grid-template-columns: repeat(2, 1fr); }
    .pr-footer { grid-template-columns: repeat(2, 1fr); }
    .pr-chart { height: 220px; }
}
@media (max-width: 540px) {
    .portfolio-returns { padding: 90px 0 100px; }
    .pr-metrics { grid-template-columns: 1fr; }
    .pr-chart-header { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .pr-stardust, .pr-glow--1, .pr-glow--2 { animation: none; }
    [data-pr-reveal] { opacity: 1; transform: none; }
    .pr-chart__fund { stroke-dashoffset: 0; transition: none; }
    .pr-chart__fund-area, .pr-chart__bench { opacity: 1; transition: none; }
}

/* ========= Research Section v2 (premium redesign) ========= */
.research.research--v2 {
    position: relative;
    min-height: 100vh;
    padding: 140px 0 160px;
    background:
        radial-gradient(ellipse at 85% 10%, rgba(0, 212, 255, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse at 15% 90%, rgba(124, 58, 237, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, #000000 0%, #060813 50%, #000000 100%);
    overflow: hidden;
    isolation: isolate;
}
.research.research--v2::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 160px;
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: 1;
}
.research.research--v2::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 200px;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: 1;
}

.research-stardust {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 18% 28%, rgba(255,255,255,0.8), transparent 60%),
        radial-gradient(1px 1px at 72% 18%, rgba(255,255,255,0.6), transparent 60%),
        radial-gradient(1px 1px at 88% 78%, rgba(255,255,255,0.55), transparent 60%),
        radial-gradient(1px 1px at 32% 62%, rgba(255,255,255,0.7), transparent 60%),
        radial-gradient(1px 1px at 94% 46%, rgba(255,255,255,0.4), transparent 60%),
        radial-gradient(1px 1px at 42% 92%, rgba(255,255,255,0.6), transparent 60%),
        radial-gradient(1px 1px at 8% 76%, rgba(255,255,255,0.5), transparent 60%),
        radial-gradient(1px 1px at 64% 38%, rgba(255,255,255,0.7), transparent 60%);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
    animation: research-stardust-drift 28s ease-in-out infinite alternate;
}
@keyframes research-stardust-drift {
    from { transform: translateY(0) translateX(0); opacity: 0.4; }
    to   { transform: translateY(-10px) translateX(-6px); opacity: 0.65; }
}

.research-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}
.research-glow--1 {
    width: 560px; height: 560px;
    top: -180px; right: -160px;
    background: radial-gradient(circle, rgba(0,212,255,0.45) 0%, transparent 70%);
    animation: research-glow-pulse 14s ease-in-out infinite;
}
.research-glow--2 {
    width: 640px; height: 640px;
    bottom: -220px; left: -180px;
    background: radial-gradient(circle, rgba(124,58,237,0.5) 0%, transparent 70%);
    animation: research-glow-pulse 16s ease-in-out infinite 2s;
}
@keyframes research-glow-pulse {
    0%, 100% { transform: scale(1); opacity: 0.45; }
    50%      { transform: scale(1.08); opacity: 0.7; }
}

.research-content-v2 {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    text-align: center;
}

.research-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: #00d4ff;
    font-weight: 600;
    margin-bottom: 18px;
}

.research--v2 .research-title {
    font-size: clamp(2.6rem, 5.5vw, 4.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #ffffff 0%, #00d4ff 50%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 28px;
    line-height: 1.05;
}

.research-intro-v2 {
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    color: rgba(255,255,255,0.72);
    max-width: 820px;
    margin: 0 auto 80px;
    line-height: 1.65;
    font-weight: 300;
}
.research-accent {
    color: #ffffff;
    font-weight: 500;
    background: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Card grid */
/* ==========================================================
   Research Cards v3 — sleeker, cooler
   ========================================================== */
.research-grid-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 72px;
}

.research-card-v2 {
    --mx: 50%;
    --my: 50%;
    --accent: #00d4ff;
    --accent-2: #7c3aed;
    position: relative;
    padding: 40px 34px 36px;
    background:
        linear-gradient(180deg, rgba(18,22,38,0.55) 0%, rgba(8,10,20,0.78) 100%);
    border: 1px solid rgba(255,255,255,0.055);
    border-radius: 22px;
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    text-align: left;
    overflow: hidden;
    transition:
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.6s ease,
        box-shadow 0.6s ease;
    isolation: isolate;
}

/* Category accent */
.research-card-v2:nth-child(1) { --accent: #00d4ff; --accent-2: #6cf0ff; }
.research-card-v2:nth-child(2) { --accent: #b88cff; --accent-2: #7c3aed; }
.research-card-v2:nth-child(3) { --accent: #ff6ec4; --accent-2: #ff006e; }

/* Base dot-grid texture — very faint, adds depth */
.research-card-v2::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
    background-size: 22px 22px;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%);
}

/* Mouse-tracked spotlight */
.research-card-v2::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(420px circle at var(--mx) var(--my),
            color-mix(in srgb, var(--accent) 22%, transparent) 0%,
            transparent 55%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
}
.research-card-v2:hover::before { opacity: 1; }

/* Card rim — static accent border (rotating animation removed per request) */
.research-card-v2__rim {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    padding: 1px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--accent) 55%, transparent) 0%,
        color-mix(in srgb, var(--accent-2) 45%, transparent) 50%,
        color-mix(in srgb, var(--accent) 30%, transparent) 100%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 2;
}
.research-card-v2:hover .research-card-v2__rim { opacity: 0; }

/* Top-left corner accent — category indicator */
.research-card-v2 > * { position: relative; z-index: 3; }

.research-card-v2__icon,
.research-card-v2__title,
.research-card-v2__body,
.research-card-v2__num {
    position: relative;
    z-index: 3;
}

.research-card-v2:hover {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--accent) 35%, rgba(255,255,255,0.06));
    box-shadow:
        0 30px 80px -20px color-mix(in srgb, var(--accent) 28%, transparent),
        0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) inset,
        0 12px 40px rgba(124, 58, 237, 0.12);
}

/* Number — large, on the right edge as a design element */
.research-card-v2__num {
    position: absolute;
    top: 22px;
    right: 26px;
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    font-weight: 600;
    color: rgba(255,255,255,0.28);
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", monospace;
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 100px;
    background: rgba(255,255,255,0.02);
    transition: color 0.5s ease, border-color 0.5s ease, background 0.5s ease;
}
.research-card-v2:hover .research-card-v2__num {
    color: color-mix(in srgb, var(--accent) 85%, white);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Icon frame */
.research-card-v2__icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 14%, transparent) 0%,
            color-mix(in srgb, var(--accent-2) 10%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    border-radius: 16px;
    margin-bottom: 28px;
    position: relative;
    transition:
        border-color 0.5s ease,
        box-shadow 0.5s ease,
        transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.research-card-v2__icon::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 0%,
        color-mix(in srgb, var(--accent) 45%, transparent),
        transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.research-card-v2:hover .research-card-v2__icon {
    border-color: color-mix(in srgb, var(--accent) 65%, transparent);
    box-shadow:
        0 0 30px color-mix(in srgb, var(--accent) 32%, transparent),
        0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent) inset;
    transform: translateY(-2px) scale(1.03);
}
.research-card-v2:hover .research-card-v2__icon::after { opacity: 1; }
.research-card-v2__icon svg {
    width: 30px;
    height: 30px;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 45%, transparent));
    transition: filter 0.5s ease;
}
.research-card-v2:hover .research-card-v2__icon svg {
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 75%, transparent));
}

.research-card-v2__title {
    font-size: 1.38rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: #ffffff;
    margin: 0 0 14px;
    line-height: 1.25;
    position: relative;
    padding-bottom: 16px;
}
/* Hairline divider under title */
.research-card-v2__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32px;
    height: 1px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 85%, transparent) 0%,
        transparent 100%);
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.research-card-v2:hover .research-card-v2__title::after { width: 64px; }

.research-card-v2__body {
    font-size: 0.94rem;
    color: rgba(225,230,245,0.62);
    line-height: 1.7;
    font-weight: 300;
    margin: 0;
    letter-spacing: 0.005em;
}

/* CTA */
.research-cta-v2 {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}
.research-cta-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 36px;
    border-radius: 100px;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(0,212,255,0.18) 0%, rgba(124,58,237,0.18) 100%);
    border: 1px solid rgba(0,212,255,0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease;
    overflow: hidden;
    isolation: isolate;
}
.research-cta-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,212,255,0.35) 0%, rgba(124,58,237,0.35) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}
.research-cta-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(0,212,255,0.7);
    box-shadow: 0 14px 40px rgba(0,212,255,0.28), 0 0 24px rgba(124,58,237,0.2);
}
.research-cta-btn:hover::before { opacity: 1; }
.research-cta-btn__arrow {
    transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
    font-size: 1.1em;
}
.research-cta-btn:hover .research-cta-btn__arrow {
    transform: translateX(6px);
}

/* Scroll reveal */
[data-research-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.research.research--v2.in-view [data-research-reveal] { opacity: 1; transform: none; }
.research.research--v2.in-view [data-research-reveal]:nth-of-type(1) { transition-delay: 0s; }
.research.research--v2.in-view [data-research-reveal]:nth-of-type(2) { transition-delay: 0.1s; }
.research.research--v2.in-view [data-research-reveal]:nth-of-type(3) { transition-delay: 0.22s; }
.research.research--v2.in-view [data-research-reveal]:nth-of-type(4) { transition-delay: 0.38s; }
.research.research--v2.in-view [data-research-reveal]:nth-of-type(5) { transition-delay: 0.58s; }

/* Stagger individual cards inside the grid after the grid itself reveals */
.research-card-v2 {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1),
                border-color 0.5s ease, box-shadow 0.5s ease;
}
.research.research--v2.in-view .research-card-v2 { opacity: 1; transform: none; }
.research.research--v2.in-view .research-card-v2:nth-child(1) { transition-delay: 0.36s, 0.36s, 0s, 0s; }
.research.research--v2.in-view .research-card-v2:nth-child(2) { transition-delay: 0.46s, 0.46s, 0s, 0s; }
.research.research--v2.in-view .research-card-v2:nth-child(3) { transition-delay: 0.56s, 0.56s, 0s, 0s; }

@media (max-width: 900px) {
    .research-grid-v2 { grid-template-columns: 1fr; gap: 18px; }
    .research.research--v2 { padding: 100px 0 120px; }
    .research-intro-v2 { margin-bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    .research-stardust, .research-glow--1, .research-glow--2 { animation: none; }
    [data-research-reveal], .research-card-v2 { opacity: 1; transform: none; }
}

/* ========= Focus Areas v2 ========= */
.focus-areas.focus-areas--v2 {
    position: relative;
    min-height: 100vh;
    padding: 140px 0 40px;
    background:
        radial-gradient(ellipse at 15% 8%, rgba(0, 212, 255, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 95%, rgba(124, 58, 237, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, #000000 0%, #060813 50%, #000000 100%);
    overflow: hidden;
    isolation: isolate;
}
.focus-areas.focus-areas--v2::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 160px;
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none; z-index: 1;
}
.focus-areas.focus-areas--v2::after {
    content: "";
    position: absolute; inset: auto 0 -1px 0; height: 260px;
    /* Soft fade toward deep violet-tinted black so it blends into Contact's starfield */
    background: linear-gradient(0deg,
        rgba(0,0,0,1) 0%,
        rgba(6,4,18,0.92) 35%,
        rgba(12,8,30,0.55) 65%,
        rgba(0,0,0,0) 100%);
    pointer-events: none; z-index: 1;
}

.fa-stardust {
    position: absolute; inset: 0;
    background-image:
        radial-gradient(1px 1px at 22% 32%, rgba(255,255,255,0.8), transparent 60%),
        radial-gradient(1px 1px at 68% 14%, rgba(255,255,255,0.6), transparent 60%),
        radial-gradient(1px 1px at 82% 74%, rgba(255,255,255,0.55), transparent 60%),
        radial-gradient(1px 1px at 36% 58%, rgba(255,255,255,0.7), transparent 60%),
        radial-gradient(1px 1px at 92% 42%, rgba(255,255,255,0.4), transparent 60%),
        radial-gradient(1px 1px at 46% 88%, rgba(255,255,255,0.6), transparent 60%),
        radial-gradient(1px 1px at 10% 72%, rgba(255,255,255,0.5), transparent 60%),
        radial-gradient(1px 1px at 72% 38%, rgba(255,255,255,0.7), transparent 60%);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
    animation: fa-stardust-drift 26s ease-in-out infinite alternate;
}
@keyframes fa-stardust-drift {
    from { transform: translateY(0) translateX(0); opacity: 0.4; }
    to   { transform: translateY(-12px) translateX(8px); opacity: 0.65; }
}

.fa-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}
.fa-glow--1 {
    width: 560px; height: 560px;
    top: -180px; left: -160px;
    background: radial-gradient(circle, rgba(0,212,255,0.45) 0%, transparent 70%);
    animation: fa-glow-pulse 14s ease-in-out infinite;
}
.fa-glow--2 {
    width: 640px; height: 640px;
    bottom: -220px; right: -180px;
    background: radial-gradient(circle, rgba(124,58,237,0.5) 0%, transparent 70%);
    animation: fa-glow-pulse 16s ease-in-out infinite 2s;
}
@keyframes fa-glow-pulse {
    0%, 100% { transform: scale(1); opacity: 0.45; }
    50%      { transform: scale(1.08); opacity: 0.7; }
}

.fa-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    text-align: center;
}

.fa-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: #00d4ff;
    font-weight: 600;
    margin-bottom: 18px;
}

.focus-areas--v2 .fa-title {
    font-size: clamp(2.6rem, 5.5vw, 4.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #ffffff 0%, #00d4ff 50%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 24px;
    line-height: 1.05;
}
.fa-intro {
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    color: rgba(255,255,255,0.68);
    max-width: 760px;
    margin: 0 auto 72px;
    line-height: 1.65;
    font-weight: 300;
}

.fa-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.fa-card {
    position: relative;
    padding: 36px 32px 34px;
    background: linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.012) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-align: left;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s ease, box-shadow 0.5s ease;
    isolation: isolate;
}
.fa-card::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 0%, rgba(0,212,255,0.10) 0%, transparent 55%);
    opacity: 0.8;
    pointer-events: none;
    z-index: -1;
}
.fa-card__rim {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0,212,255,0.6), rgba(124,58,237,0.5) 50%, rgba(0,212,255,0));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.fa-card:hover .fa-card__rim { opacity: 1; }
.fa-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0, 212, 255, 0.14), 0 0 40px rgba(124, 58, 237, 0.1);
}

.fa-card__num {
    position: absolute;
    top: 24px; right: 26px;
    font-size: 0.72rem;
    letter-spacing: 0.26em;
    font-weight: 600;
    color: rgba(255,255,255,0.32);
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", monospace;
}

.fa-card__icon {
    width: 56px; height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0,212,255,0.1) 0%, rgba(124,58,237,0.08) 100%);
    border: 1px solid rgba(0,212,255,0.22);
    border-radius: 14px;
    margin-bottom: 26px;
    position: relative;
    transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.fa-card__icon::after {
    content: "";
    position: absolute; inset: -1px;
    border-radius: 14px;
    background: radial-gradient(circle at 50% 0%, rgba(0,212,255,0.35), transparent 65%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.fa-card:hover .fa-card__icon {
    border-color: rgba(0,212,255,0.55);
    box-shadow: 0 0 24px rgba(0,212,255,0.25);
    transform: translateY(-2px);
}
.fa-card:hover .fa-card__icon::after { opacity: 1; }
.fa-card__icon svg {
    width: 30px; height: 30px;
    filter: drop-shadow(0 0 6px rgba(0,212,255,0.35));
}

.fa-card__title {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin-bottom: 12px;
    line-height: 1.3;
}
.fa-card__body {
    font-size: 0.94rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.6;
    font-weight: 300;
    margin: 0;
}

/* Hero convergence card */
.fa-hero {
    position: relative;
    padding: 56px 48px 56px;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(0,212,255,0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 100%, rgba(124,58,237,0.14) 0%, transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.012) 100%);
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
}
.fa-hero__rim {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    padding: 1.5px;
    background: conic-gradient(from 120deg, rgba(0,212,255,0.75), rgba(124,58,237,0.65), rgba(255,0,110,0.3), rgba(0,212,255,0.75));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: fa-hero-rim-spin 18s linear infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes fa-hero-rim-spin {
    to { transform: rotate(360deg); }
}
.fa-hero__aurora {
    position: absolute;
    inset: -20% -10%;
    background:
        radial-gradient(circle at 30% 50%, rgba(0,212,255,0.22) 0%, transparent 40%),
        radial-gradient(circle at 70% 50%, rgba(124,58,237,0.22) 0%, transparent 40%);
    filter: blur(40px);
    opacity: 0.9;
    pointer-events: none;
    z-index: 0;
    animation: fa-aurora-drift 12s ease-in-out infinite alternate;
}
@keyframes fa-aurora-drift {
    from { transform: translateX(-3%) translateY(0); }
    to   { transform: translateX(3%) translateY(-2%); }
}
.fa-hero__content {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin: 0 auto;
}
.fa-hero__eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: #00d4ff;
    font-weight: 600;
    margin-bottom: 14px;
}
.fa-hero__title {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #ffffff 0%, #00d4ff 45%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
    line-height: 1.1;
}
.fa-hero__body {
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    color: rgba(255,255,255,0.72);
    line-height: 1.7;
    font-weight: 300;
    margin: 0;
}

/* Reveal */
[data-fa-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.focus-areas.focus-areas--v2.in-view [data-fa-reveal] { opacity: 1; transform: none; }
.focus-areas.focus-areas--v2.in-view [data-fa-reveal]:nth-of-type(1) { transition-delay: 0s; }
.focus-areas.focus-areas--v2.in-view [data-fa-reveal]:nth-of-type(2) { transition-delay: 0.1s; }
.focus-areas.focus-areas--v2.in-view [data-fa-reveal]:nth-of-type(3) { transition-delay: 0.22s; }
.focus-areas.focus-areas--v2.in-view [data-fa-reveal]:nth-of-type(4) { transition-delay: 0.38s; }
.focus-areas.focus-areas--v2.in-view [data-fa-reveal]:nth-of-type(5) { transition-delay: 0.7s; }

.fa-card {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1),
                border-color 0.5s ease, box-shadow 0.5s ease;
}
.focus-areas.focus-areas--v2.in-view .fa-card { opacity: 1; transform: none; }
.focus-areas.focus-areas--v2.in-view .fa-card:nth-child(1) { transition-delay: 0.36s, 0.36s, 0s, 0s; }
.focus-areas.focus-areas--v2.in-view .fa-card:nth-child(2) { transition-delay: 0.48s, 0.48s, 0s, 0s; }
.focus-areas.focus-areas--v2.in-view .fa-card:nth-child(3) { transition-delay: 0.60s, 0.60s, 0s, 0s; }

@media (max-width: 900px) {
    .fa-grid { grid-template-columns: 1fr; gap: 18px; }
    .focus-areas.focus-areas--v2 { padding: 100px 0 120px; }
    .fa-intro { margin-bottom: 48px; }
    .fa-hero { padding: 40px 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .fa-stardust, .fa-glow--1, .fa-glow--2, .fa-hero__rim, .fa-hero__aurora { animation: none; }
    [data-fa-reveal], .fa-card { opacity: 1; transform: none; }
}

/* ========= Singularity Convergence — canvas animation (overrides rim/aurora) ========= */
.fa-hero {
    /* darker, deeper background so particles read cleanly */
    background:
        radial-gradient(ellipse at 50% 50%, rgba(10, 14, 28, 0.6) 0%, rgba(0, 0, 0, 0.92) 70%),
        linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.008) 100%);
    border: 1px solid rgba(0, 212, 255, 0.18);
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hide the legacy rotating rim + aurora */
.fa-hero .fa-hero__rim,
.fa-hero .fa-hero__aurora {
    display: none !important;
}

.fa-hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: block;
}

/* Bright core behind the title — the "point" everything falls toward */
.fa-hero__core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280px;
    height: 280px;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(0, 212, 255, 0.22) 14%,
            rgba(124, 58, 237, 0.16) 32%,
            rgba(124, 58, 237, 0) 60%);
    border-radius: 50%;
    filter: blur(12px);
    z-index: 1;
    pointer-events: none;
    animation: fa-core-breath 5s ease-in-out infinite;
}
@keyframes fa-core-breath {
    0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}

/* Keep content above canvas + core */
.fa-hero__content {
    position: relative;
    z-index: 2;
}

/* Optional subtle glow behind the title itself */
.fa-hero__title {
    text-shadow:
        0 0 24px rgba(0, 212, 255, 0.25),
        0 0 60px rgba(124, 58, 237, 0.15);
}

@media (prefers-reduced-motion: reduce) {
    .fa-hero__core { animation: none; }
}

/* ========= Singularity Galaxy + Black Hole (v3) ========= */
/* Override to become a mini-galaxy with a central black hole */
.fa-hero {
    min-height: 420px;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(8, 10, 22, 0.55) 0%, rgba(0, 0, 0, 0.94) 72%),
        #000;
    border: 1px solid rgba(0, 212, 255, 0.14);
}

/* Hide legacy core (was blue/violet blob — replaced by black hole) */
.fa-hero .fa-hero__core { display: none !important; }

/* Galaxy backdrop — milky way image, heavily dimmed, slowly rotating */
.fa-hero__galaxy {
    position: absolute;
    inset: -20%;
    background: url('milky-way.jpg') center/cover no-repeat;
    opacity: 0.32;
    filter: brightness(0.55) contrast(1.1) saturate(0.9);
    transform-origin: center center;
    animation: fa-galaxy-spin 240s linear infinite;
    z-index: 0;
    pointer-events: none;
}
@keyframes fa-galaxy-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Heavy vignette — keeps the center dark so the black hole reads clean */
.fa-hero__vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 42% 42% at 50% 50%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.25) 75%, rgba(0,0,0,0) 100%),
        radial-gradient(ellipse 90% 80% at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 85%, rgba(0,0,0,0.85) 100%);
    z-index: 1;
    pointer-events: none;
}

.fa-hero__canvas {
    z-index: 2;
}

/* Black hole assembly — centered */
.fa-hero__blackhole {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
    opacity: 0.92;
}

/* Gravitational lensing halo — soft outer glow */
.fa-hero__lensing {
    position: absolute;
    inset: -60%;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(255, 200, 140, 0.0) 24%,
            rgba(255, 180, 120, 0.08) 32%,
            rgba(180, 140, 255, 0.10) 42%,
            rgba(0, 212, 255, 0.06) 55%,
            rgba(0, 0, 0, 0) 72%);
    filter: blur(10px);
    pointer-events: none;
}

/* Accretion disk — luminous ring around event horizon */
.fa-hero__disk {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        conic-gradient(from 0deg,
            rgba(255, 210, 150, 0.0) 0deg,
            rgba(255, 180, 120, 0.95) 40deg,
            rgba(255, 240, 200, 1) 90deg,
            rgba(180, 140, 255, 0.85) 160deg,
            rgba(0, 212, 255, 0.55) 220deg,
            rgba(124, 58, 237, 0.70) 290deg,
            rgba(255, 180, 120, 0.90) 350deg,
            rgba(255, 210, 150, 0.0) 360deg);
    -webkit-mask:
        radial-gradient(circle, transparent 40%, #000 44%, #000 58%, transparent 62%);
            mask:
        radial-gradient(circle, transparent 40%, #000 44%, #000 58%, transparent 62%);
    filter: blur(1.5px) saturate(1.15);
    animation: fa-disk-spin 28s linear infinite;
    opacity: 0.92;
}
@keyframes fa-disk-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Event horizon — perfect black disk sitting on top of the disk */
.fa-hero__event {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42%;
    height: 42%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle, #000 0%, #000 72%, rgba(0,0,0,0.85) 92%, rgba(0,0,0,0) 100%);
    box-shadow:
        0 0 20px 2px rgba(0, 0, 0, 0.9),
        0 0 40px 8px rgba(0, 0, 0, 0.7);
}

/* Content sits above everything */
.fa-hero__content {
    z-index: 5;
}
.fa-hero__title {
    text-shadow:
        0 0 28px rgba(0, 0, 0, 0.95),
        0 0 60px rgba(0, 0, 0, 0.85),
        0 0 90px rgba(0, 0, 0, 0.6);
}
.fa-hero__body {
    text-shadow: 0 0 22px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 0, 0, 0.7);
}
.fa-hero__eyebrow {
    text-shadow: 0 0 18px rgba(0, 0, 0, 0.85);
}

@media (max-width: 900px) {
    .fa-hero__blackhole { width: 120px; height: 120px; }
    .fa-hero { min-height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
    .fa-hero__galaxy, .fa-hero__disk { animation: none; }
}

/* ========= Research CTA — Liquid Glass Override ========= */
.research-cta-btn.research-cta-btn--glass {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 36px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.96);
    text-decoration: none;
    /* Frosted glass surface */
    background:
        linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 55%, rgba(255,255,255,0.08) 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),        /* top highlight edge */
        inset 0 -1px 0 rgba(255, 255, 255, 0.06),       /* subtle bottom edge */
        inset 0 0 24px rgba(255, 255, 255, 0.04),       /* inner ambient */
        0 10px 40px rgba(0, 0, 0, 0.45),                /* drop shadow on dark bg */
        0 0 0 1px rgba(255, 255, 255, 0.04);
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.45s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.45s cubic-bezier(0.22,1,0.36,1),
                border-color 0.45s ease,
                background 0.45s ease;
}

/* Kill the legacy cyan/violet before-layer so glass reads pure */
.research-cta-btn.research-cta-btn--glass::before {
    display: none;
}

/* Specular highlight — glossy sweep across the top of the pill */
.research-cta-btn__specular {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background:
        /* top glossy arc */
        radial-gradient(ellipse 120% 60% at 50% -20%,
            rgba(255, 255, 255, 0.35) 0%,
            rgba(255, 255, 255, 0.12) 28%,
            rgba(255, 255, 255, 0) 55%),
        /* faint color refraction from bg */
        linear-gradient(105deg,
            rgba(0, 212, 255, 0.08) 0%,
            rgba(255, 255, 255, 0) 35%,
            rgba(255, 255, 255, 0) 65%,
            rgba(124, 58, 237, 0.10) 100%);
    mix-blend-mode: screen;
    opacity: 0.95;
    transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
}

/* Moving shine on hover */
.research-cta-btn.research-cta-btn--glass::after {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0.28) 50%,
        rgba(255, 255, 255, 0) 80%,
        transparent 100%);
    transform: skewX(-18deg);
    transition: left 0.7s cubic-bezier(0.22,1,0.36,1);
    pointer-events: none;
    z-index: 1;
}

.research-cta-btn.research-cta-btn--glass .research-cta-btn__label,
.research-cta-btn.research-cta-btn--glass .research-cta-btn__arrow {
    position: relative;
    z-index: 2;
}

.research-cta-btn.research-cta-btn--glass:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.32);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.06) 55%, rgba(255,255,255,0.12) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 30px rgba(255, 255, 255, 0.06),
        0 18px 50px rgba(0, 0, 0, 0.55),
        0 0 30px rgba(0, 212, 255, 0.18),
        0 0 60px rgba(124, 58, 237, 0.12);
}

.research-cta-btn.research-cta-btn--glass:hover::after {
    left: 140%;
}

.research-cta-btn.research-cta-btn--glass:hover .research-cta-btn__specular {
    opacity: 1;
}

.research-cta-btn.research-cta-btn--glass:active {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .research-cta-btn.research-cta-btn--glass,
    .research-cta-btn.research-cta-btn--glass::after,
    .research-cta-btn__specular { transition: none; }
}

/* ========= Singularity — Cinematic Image Hero (v4) ========= */
.fa-hero.fa-hero--cinematic {
    position: relative;
    min-height: 520px;
    padding: 88px 48px;
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Background image layer with a very slow cinematic zoom/pan */
.fa-hero.fa-hero--cinematic .fa-hero__image {
    position: absolute;
    inset: -4%;
    background: url('singularity-hero.png') center center / cover no-repeat;
    transform-origin: center center;
    animation: fa-cinematic-zoom 36s ease-in-out infinite alternate;
    z-index: 0;
    pointer-events: none;
}

@keyframes fa-cinematic-zoom {
    0%   { transform: scale(1.00) translate(0, 0); }
    100% { transform: scale(1.06) translate(-0.6%, 0.4%); }
}

/* Overlay — subtle edge vignette so the image blends into the card border
   and a faint dark layer at bottom for text legibility.
   IMPORTANT: keep the center mostly clear so the singularity reads. */
.fa-hero.fa-hero--cinematic .fa-hero__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        /* edge vignette */
        radial-gradient(ellipse 95% 95% at 50% 50%,
            rgba(0, 0, 0, 0) 55%,
            rgba(0, 0, 0, 0.35) 80%,
            rgba(0, 0, 0, 0.75) 100%),
        /* bottom text protection */
        linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0) 45%,
            rgba(0, 0, 0, 0.35) 100%);
}

/* Content placement: push text to the bottom so the singularity sphere sits above it */
.fa-hero.fa-hero--cinematic .fa-hero__content {
    position: relative;
    z-index: 3;
    max-width: 820px;
    margin: 0 auto;
    padding-top: 260px; /* leave room for the sphere above the title */
}

/* Override legacy canvas/blackhole/galaxy styles inside the cinematic variant */
.fa-hero.fa-hero--cinematic .fa-hero__canvas,
.fa-hero.fa-hero--cinematic .fa-hero__core,
.fa-hero.fa-hero--cinematic .fa-hero__galaxy,
.fa-hero.fa-hero--cinematic .fa-hero__vignette,
.fa-hero.fa-hero--cinematic .fa-hero__blackhole,
.fa-hero.fa-hero--cinematic .fa-hero__rim,
.fa-hero.fa-hero--cinematic .fa-hero__aurora {
    display: none !important;
}

/* Title/body readability — stronger shadows against the luminous image */
.fa-hero.fa-hero--cinematic .fa-hero__title {
    text-shadow:
        0 0 30px rgba(0, 0, 0, 0.95),
        0 0 70px rgba(0, 0, 0, 0.85),
        0 2px 30px rgba(0, 0, 0, 0.75);
}
.fa-hero.fa-hero--cinematic .fa-hero__body {
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 0 24px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 0, 0, 0.7);
}
.fa-hero.fa-hero--cinematic .fa-hero__eyebrow {
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
}

@media (max-width: 900px) {
    .fa-hero.fa-hero--cinematic {
        min-height: 440px;
        padding: 56px 28px;
    }
    .fa-hero.fa-hero--cinematic .fa-hero__content {
        padding-top: 180px;
    }
}

@media (max-width: 600px) {
    .fa-hero.fa-hero--cinematic {
        min-height: 420px;
    }
    .fa-hero.fa-hero--cinematic .fa-hero__content {
        padding-top: 160px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fa-hero.fa-hero--cinematic .fa-hero__image { animation: none; }
}

/* ========= Singularity — Cinematic Video (v5, overrides v4) ========= */
.fa-hero.fa-hero--cinematic {
    padding: 0;
    min-height: 0;
    display: block;
    text-align: center;
}

/* Hide any leftover image layer (now replaced by video) */
.fa-hero.fa-hero--cinematic .fa-hero__image { display: none !important; }

/* Video fills the card at 16:9 native aspect */
.fa-hero.fa-hero--cinematic .fa-hero__video {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    z-index: 0;
    /* Very slight slow-down playback feel via CSS is not possible for video —
       handled in JS by setting playbackRate = 0.5 */
}

/* Overlay: vignette + gradient at top for text legibility against the poster void */
.fa-hero.fa-hero--cinematic .fa-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        /* soft radial darkening behind centered text for legibility */
        radial-gradient(ellipse 70% 42% at 50% 50%,
            rgba(0, 0, 0, 0.62) 0%,
            rgba(0, 0, 0, 0.35) 45%,
            rgba(0, 0, 0, 0) 80%),
        /* subtle edge vignette */
        radial-gradient(ellipse 100% 100% at 50% 50%,
            rgba(0, 0, 0, 0.7) 0%,
            rgba(0, 0, 0, 0.35) 12%,
            rgba(0, 0, 0, 0) 40%);
}

/* Content: centered over the video — title + body fade in together when section enters view */
.fa-hero.fa-hero--cinematic .fa-hero__content {
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 48px 48px;
    max-width: 100%;
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1.6s ease-out 0.25s, transform 1.6s ease-out 0.25s;
}
.focus-areas.in-view .fa-hero.fa-hero--cinematic .fa-hero__content {
    opacity: 1;
    transform: translateY(0);
}
/* Stagger title and body for a more cinematic entrance */
.fa-hero.fa-hero--cinematic .fa-hero__title,
.fa-hero.fa-hero--cinematic .fa-hero__body {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
.focus-areas.in-view .fa-hero.fa-hero--cinematic .fa-hero__title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}
.focus-areas.in-view .fa-hero.fa-hero--cinematic .fa-hero__body {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.0s;
}
@media (prefers-reduced-motion: reduce) {
    .fa-hero.fa-hero--cinematic .fa-hero__content,
    .fa-hero.fa-hero--cinematic .fa-hero__title,
    .fa-hero.fa-hero--cinematic .fa-hero__body {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Title becomes the bold image header */
.fa-hero.fa-hero--cinematic .fa-hero__title {
    font-size: clamp(2.2rem, 4.2vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.1;
    margin: 0 0 18px;
    background: linear-gradient(135deg, #ffffff 0%, #00d4ff 45%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 20px rgba(0, 0, 0, 0.9))
            drop-shadow(0 0 40px rgba(0, 0, 0, 0.6));
}

.fa-hero.fa-hero--cinematic .fa-hero__body {
    font-size: clamp(1.15rem, 1.4vw, 1.32rem);
    color: #ffffff;
    max-width: 820px;
    margin: 0 auto;
    line-height: 1.7;
    font-weight: 400;
    text-shadow: 0 0 24px rgba(0, 0, 0, 0.95), 0 0 40px rgba(0, 0, 0, 0.8);
}

@media (max-width: 900px) {
    .fa-hero.fa-hero--cinematic .fa-hero__content {
        padding: 32px 24px 40px;
    }
    .fa-hero.fa-hero--cinematic .fa-hero__title {
        margin-bottom: 14px;
    }
}

@media (max-width: 600px) {
    .fa-hero.fa-hero--cinematic .fa-hero__video {
        aspect-ratio: 4 / 3;
    }
    .fa-hero.fa-hero--cinematic .fa-hero__content {
        padding: 24px 20px 32px;
    }
}

/* ========= Research CTA — Premium Liquid Glass (v2, matches .cta-button) ========= */
/* Reset the darker prior treatment */
.research-cta-btn.research-cta-btn--glass {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 1.05rem 2.75rem;
    color: #ffffff;
    font-weight: 600;
    font-size: 1.0rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    /* Fully transparent — pure glass window, galaxy flows through */
    background: transparent;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        /* outer cyan luminance halo */
        0 0 0 1px rgba(0, 212, 255, 0.55),
        0 0 22px rgba(0, 212, 255, 0.45),
        0 0 48px rgba(0, 212, 255, 0.25),
        /* depth shadow for floating feel */
        0 14px 30px rgba(0, 0, 0, 0.45),
        0 4px 10px rgba(0, 0, 0, 0.35),
        /* inner glass highlights */
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(255, 255, 255, 0.10),
        inset 0 0 20px rgba(255, 255, 255, 0.06);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    isolation: isolate;
    overflow: visible;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Remove prior specular/shine pseudo approach — we use ::before/::after now */
.research-cta-btn.research-cta-btn--glass .research-cta-btn__specular { display: none; }

/* Glossy top specular highlight crescent */
.research-cta-btn.research-cta-btn--glass::before {
    content: '';
    position: absolute;
    top: 1.5px;
    left: 3%;
    right: 3%;
    height: 55%;
    border-radius: 999px 999px 40px 40px / 999px 999px 22px 22px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.38) 0%,
        rgba(255, 255, 255, 0.18) 35%,
        rgba(255, 255, 255, 0.04) 75%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
    opacity: 1;
    display: block;
}

/* Bottom inner reflection */
.research-cta-btn.research-cta-btn--glass::after {
    content: '';
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 2px;
    top: auto;
    width: auto;
    height: 28%;
    transform: none;
    border-radius: 999px;
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.04) 55%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
    filter: blur(0.5px);
}

.research-cta-btn.research-cta-btn--glass .research-cta-btn__label,
.research-cta-btn.research-cta-btn--glass .research-cta-btn__arrow {
    position: relative;
    z-index: 2;
}

.research-cta-btn.research-cta-btn--glass:hover {
    transform: translateY(-1px);
    background: transparent;
    box-shadow:
        0 0 0 1px rgba(0, 212, 255, 0.85),
        0 0 32px rgba(0, 212, 255, 0.7),
        0 0 70px rgba(0, 212, 255, 0.4),
        0 0 44px rgba(124, 58, 237, 0.25),
        0 18px 40px rgba(0, 0, 0, 0.5),
        0 6px 14px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 24px rgba(255, 255, 255, 0.08);
}

.research-cta-btn.research-cta-btn--glass:hover .research-cta-btn__arrow {
    transform: translateX(6px);
}

.research-cta-btn.research-cta-btn--glass:active {
    transform: translateY(0);
    box-shadow:
        0 0 0 1px rgba(0, 212, 255, 0.7),
        0 0 18px rgba(0, 212, 255, 0.4),
        0 6px 14px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

/* ========= Focus Areas Connectors (cards → singularity) ========= */
.fa-connectors {
    position: relative;
    width: 100%;
    /* Container spans from card-middle down through the gap to the hero image.
       Negative margin-top pulls it up ~200px (past card-center). */
    height: 320px;
    margin-top: -200px;
    margin-bottom: -48px;
    pointer-events: none;
    z-index: 3;
    overflow: visible;
}
.fa-connectors__node {
    filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.9));
}
.fa-connectors__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.fa-connectors__path,
.fa-connectors__hline {
    opacity: 1;
    filter:
        drop-shadow(0 0 3px rgba(0, 212, 255, 0.85))
        drop-shadow(0 0 8px rgba(0, 212, 255, 0.35));
}
.fa-connectors__pulse {
    filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.9))
            drop-shadow(0 0 12px rgba(0, 212, 255, 0.5));
}
.fa-connectors__pulse--sweep {
    filter: drop-shadow(0 0 5px rgba(127, 228, 255, 0.95))
            drop-shadow(0 0 14px rgba(0, 212, 255, 0.55));
}
@media (max-width: 720px) {
    /* On mobile, cards stack vertically — skip the side horizontal segments,
       keep only vertical drops behind the last card. */
    .fa-connectors { height: 120px; margin-top: -30px; margin-bottom: -30px; }
    .fa-connectors__hline { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .fa-connectors__path, .fa-connectors__pulse { animation: none !important; }
}