/* =========================================
   2026 VISUAL REFINEMENT PATCH
   ========================================= */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

* {
    -webkit-tap-highlight-color: transparent;
}

.transition-all,
.transition,
.transition-colors,
.transition-opacity,
.transition-transform {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: -0.02em;
}

/* =========================================
   DESIGN SYSTEM
   ========================================= */
:root {
    /* Colors - DARK MODE (Restored & Refined) */
    --color-bg-primary: #011215;
    --color-bg-accent: #05262C;
    --color-text-primary: #E6F4F1;
    --color-text-secondary: #8CA8A6;
    --color-accent: #2A9D8F;
    --color-accent-bright: #6FFFE9;
    --color-accent-glow: rgba(42, 157, 143, 0.25);

    /* Typography */
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* REFINED SPACING SYSTEM */
    --space-micro: 8px;
    --space-tight: 16px;
    --space-para: 24px;
    --space-stack: 32px;
    --space-section: clamp(56px, 8vh, 72px);

    /* Legacy compatibility (to be phased out or mapped) */
    --spacing-sm: var(--space-para);
    --spacing-md: var(--space-stack);
    --spacing-lg: var(--space-section);
    --spacing-xl: calc(var(--space-section) * 1.5);

    /* Transitions */
    --transition-fast: 150ms ease-out;
    --transition-base: 220ms ease-out;
    --transition-slow: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-med: 0.4s ease-out;

    /* 2026 Interaction Layer Constants */
    --glow-primary: rgba(15, 118, 110, 0.4);
    --glow-accent: rgba(111, 255, 233, 0.2);
    --precision-border: rgba(255, 255, 255, 0.15);
}

/* =========================================
   INTERACTION LAYER UTILITIES
   ========================================= */
.blueprint-overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--precision-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--precision-border) 1px, transparent 1px);
    background-size: 100px 100px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease;
}

.section-reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: transform, opacity;
}

/* Progressive enhancement: only hide when JS is active and section not yet in view */
.js-enabled .section-reveal:not(.active) {
    opacity: 0;
    transform: translateY(24px);
    /* Reduced from 40px — less jarring */
}

.section-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.magnetic-item {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.kinetic-underline {
    position: relative;
    display: inline-block;
}

.kinetic-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-accent);
    transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.kinetic-underline:hover::after {
    width: 100%;
}

/* Glow Pulse for CTAs */
@keyframes glow-pulse {
    0% {
        box-shadow: 0 0 5px var(--glow-primary);
    }

    50% {
        box-shadow: 0 0 20px var(--glow-primary), 0 0 30px var(--glow-accent);
    }

    100% {
        box-shadow: 0 0 5px var(--glow-primary);
    }
}

.glow-pulse {
    animation: glow-pulse 3s infinite ease-in-out;
}

hr {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--precision-border), transparent);
    margin: var(--space-section) 0;
    opacity: 0.8;
}

.max-w-prose {
    max-width: 75ch;
    margin-left: auto;
    margin-right: auto;
}

.section-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: transform, opacity;
}

.section-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Drawing gridlines effect */
.grid-line-draw {
    position: relative;
}

.grid-line-draw::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: var(--line-width, 0%);
    height: 1px;
    background: var(--precision-border);
    transition: none;
}

/* =========================================
   PHASE 4: INTERACTIVE REVENUE MODEL
   ========================================= */
.system-map-container {
    perspective: 1000px;
}

.system-layer {
    transition: transform 0.6s var(--transition-slow), opacity 0.6s ease, filter 0.6s ease;
    cursor: pointer;
    position: relative;
}

.system-layer:hover {
    transform: translateZ(24px) scale(1.015);
    filter: brightness(1.08);
    z-index: 10;
}

/* Mobile: layer-info always visible as normal card content */
.layer-info {
    position: static;
    background: transparent;
    border: none;
    padding: 0;
    opacity: 1;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
    border-top: 1px solid rgba(15, 118, 110, 0.2);
    padding-top: 1rem;
}

/* Desktop: restore overlay hover effect */
@media (hover: hover) and (pointer: fine) {
    .layer-info {
        position: absolute;
        inset: 0;
        background: rgba(5, 10, 15, 0.97);
        backdrop-filter: blur(8px);
        border: 1px solid var(--primary);
        padding: 2rem;
        opacity: 0;
        pointer-events: none;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 50;
        justify-content: center;
        border-radius: 0.5rem;
        margin-top: 0;
        border-top: none;
        padding-top: 2rem;
    }

    .system-layer:hover .layer-info {
        opacity: 1;
        pointer-events: auto;
    }
}

.layer-info h4,
h4,
h5 {
    color: var(--color-accent);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.7rem;
    margin-bottom: var(--space-micro);
    letter-spacing: 0.15em;
    opacity: 0.9;
}

/* Leadership Dimensional Overlays */
.leadership-profile {
    position: relative;
    overflow: visible;
}

.leadership-stat-overlay {
    position: absolute;
    background: var(--background-dark);
    border: 1px solid var(--primary);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 800;
    color: white;
    opacity: 0;
    transform: translateZ(50px) scale(0.8);
    transition: all 0.5s var(--transition-medium);
    pointer-events: none;
    z-index: 50;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.leadership-profile:hover .leadership-stat-overlay {
    opacity: 1;
    transform: translateZ(50px) scale(1);
}

.stat-top-right {
    top: -10px;
    right: -10px;
}

.stat-bottom-left {
    bottom: 10px;
    left: -20px;
}

/* Kinetic Underline Glow */
.kinetic-underline {
    position: relative;
    text-decoration: none;
}

.kinetic-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--glow-accent);
    box-shadow: 0 0 10px var(--glow-accent);
    transition: width 0.4s ease;
}

.kinetic-underline:hover::after {
    width: 100%;
}

/* Expanding Timeline */
.timeline-track {
    position: relative;
    padding-left: 2rem;
}

.timeline-track::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: var(--track-height, 0%);
    background: linear-gradient(to bottom, var(--primary), var(--glow-accent));
    transition: none;
}

.timeline-step {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.6s ease-out;
    margin-bottom: var(--space-stack);
    position: relative;
}

/* Only animate-in if JS is active */
/* Fallback visibility if JS fails is handled by removing :not(.active) opacity */
.timeline-step {
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: transform, opacity;
}

.timeline-dot {
    position: absolute;
    left: -2.35rem;
    top: 0.5rem;
    width: 12px;
    height: 12px;
    background: var(--background-dark);
    border: 2px solid var(--primary);
    border-radius: 50%;
    z-index: 1;
}

/* Knowledge Cards */
.knowledge-card {
    border: 1px solid var(--precision-border);
    transition: all 0.5s var(--transition-medium);
    /* Removed fixed max-height and overflow: hidden so card can stretch */
}

.knowledge-card.expanded {
    border-color: var(--primary);
    box-shadow: 0 0 30px rgba(15, 118, 110, 0.1);
}

.knowledge-card-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
}

.knowledge-card-content-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.knowledge-card.expanded .knowledge-card-content-wrapper {
    grid-template-rows: 1fr;
}

.knowledge-card-content {
    min-height: 0;
    overflow: hidden;
    padding: 0 1.5rem;
    /* Padding applied here, but vertical padding handled inside */
    opacity: 0;
    transition: opacity 0.4s ease;
}

.knowledge-card.expanded .knowledge-card-content {
    opacity: 1;
    padding-bottom: var(--space-para);
}

.faq-item {
    padding-top: var(--space-para);
    padding-bottom: var(--space-para);
    border-bottom: 1px solid var(--precision-border);
    transition: background-color var(--transition-base);
}

.faq-item:hover {
    background-color: rgba(255, 255, 255, 0.01);
}

/* =========================================
   RESET & BASE
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

    /* Architectural Grid - DARK MODE Style */
    background-image:
        linear-gradient(rgba(42, 157, 143, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(42, 157, 143, 0.03) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, transparent 20%, #011215 90%);
    /* Vignette */

    background-size: 40px 40px, 40px 40px, 100% 100%;
    /* No blend mode needed for dark grid on dark bg, just transparency */
}

@keyframes gridPan {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }

    100% {
        background-position: 40px 40px, 40px 40px, 0 0;
    }
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.15;
}

p {
    color: var(--color-text-secondary);
    line-height: 1.7;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all var(--transition-base);
}

section {
    position: relative;
    padding: 6rem 0;
    /* py-24 equivalent */
}

#hero {
    padding: 0;
}

/* =========================================
   FRAMER COMPONENTS (Glassy Button - DARK MODE)
   ========================================= */
.btn-framer-glassy {
    position: relative;
    padding: 1.5rem 3.5rem;
    font-size: 1.1rem;
    font-family: var(--font-heading);
    color: var(--color-accent-bright);
    /* Electric Cyan Text for Pop */
    background: linear-gradient(135deg,
            rgba(42, 157, 143, 0.1) 0%,
            rgba(1, 18, 21, 0.4) 100%);
    border: 1px solid rgba(42, 157, 143, 0.3);
    /* Teal border */
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    box-shadow:
        0 4px 24px -1px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Shine Effect */
.btn-framer-glassy::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(111, 255, 233, 0.2),
            /* Cyan shine */
            transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.btn-framer-glassy:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg,
            rgba(42, 157, 143, 0.2) 0%,
            rgba(1, 18, 21, 0.6) 100%);
    box-shadow:
        0 0 30px rgba(42, 157, 143, 0.4),
        /* Stronger glow */
        inset 0 0 0 1px rgba(111, 255, 233, 0.3);
    color: #FFFFFF;
    border-color: var(--color-accent-bright);
}

.btn-framer-glassy:hover::before {
    left: 100%;
}


/* =========================================
   HERO LOGO
   ========================================= */
/* =========================================
   HERO LOGO
   ========================================= */
.hero-logo {
    display: block;
    max-width: 900px;
    /* INCREASED SIZE as requested */
    width: 90vw;
    height: auto;
    margin: 0 auto var(--spacing-md);

    /* LOGO TREATMENT (V3 Transparent) */
    /* original is Dark Teal. We INVERT it to make it White/Ice Blue. */
    /* Then we add a subtle glow. */
    filter: invert(1) hue-rotate(180deg) drop-shadow(0 0 20px rgba(111, 255, 233, 0.3));

    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.5s;
}

/* =========================================
   TOP ACCESS BUTTON (Fixed)
   ========================================= */
.top-access-btn {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 1000;
    padding: 0.8rem 1.5rem;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: var(--color-accent-bright);
    background: rgba(1, 18, 21, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(42, 157, 143, 0.3);
    border-radius: 50px;
    /* Pill shape */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.top-access-btn:hover {
    background: rgba(42, 157, 143, 0.15);
    border-color: var(--color-accent-bright);
    box-shadow: 0 0 15px rgba(42, 157, 143, 0.4);
    transform: translateY(-2px);
}

/* =========================================
   PARTICLE SPRINKLES (CSS Stars)
   ========================================= */
.particle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Behind content, above shimmer */
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    opacity: 0;
    animation: sprinkleFloat 10s infinite linear;
}

/* Creating random positions via multiple particles in HTML or box-shadow (using HTML method here for easier control) */
/* Actually, using a simple box-shadow method on ::after is cleaner for "sprinkles" */
.particle-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    /* Generating stars via box-shadow */
    box-shadow:
        10vw 10vh 1px 0px rgba(111, 255, 233, 0.5),
        20vw 80vh 1px 0px rgba(111, 255, 233, 0.4),
        30vw 30vh 1px 0px rgba(255, 255, 255, 0.5),
        40vw 60vh 1px 0px rgba(111, 255, 233, 0.3),
        50vw 20vh 1px 0px rgba(255, 255, 255, 0.6),
        60vw 90vh 1px 0px rgba(111, 255, 233, 0.5),
        70vw 40vh 1px 0px rgba(255, 255, 255, 0.4),
        80vw 10vh 1px 0px rgba(111, 255, 233, 0.6),
        90vw 70vh 1px 0px rgba(255, 255, 255, 0.5),
        15vw 50vh 2px 0px rgba(111, 255, 233, 0.3),
        35vw 85vh 1px 0px rgba(255, 255, 255, 0.4),
        55vw 15vh 1px 0px rgba(111, 255, 233, 0.5),
        75vw 55vh 2px 0px rgba(255, 255, 255, 0.3),
        85vw 25vh 1px 0px rgba(111, 255, 233, 0.4),
        95vw 95vh 1px 0px rgba(255, 255, 255, 0.5);
    opacity: 0.6;
    animation: sprinkleFloat 60s linear infinite;
}

@keyframes sprinkleFloat {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100vh);
    }
}

/* =========================================
   AMBIENT SHIMMER (Responsive Background)
   ========================================= */
.ambient-shimmer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    /* Behind content */
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, rgba(42, 157, 143, 0.03), transparent 60%),
        linear-gradient(120deg, transparent 30%, rgba(111, 255, 233, 0.02) 50%, transparent 70%);
    background-size: 200% 200%;
    animation: shimmerFlow 15s ease-in-out infinite alternate;
}

@keyframes shimmerFlow {
    0% {
        background-position: 0% 0%;
        transform: scale(1);
    }

    100% {
        background-position: 100% 100%;
        transform: scale(1.05);
        /* Subtle breathing */
    }
}


/* =========================================
   LAYOUT UTILITIES
   ========================================= */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    position: relative;
    z-index: 10;
}

.section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-lg) 0;
    position: relative;
}

/* =========================================
   ANIMATIONS & LOCK-IN
   ========================================= */
.lock-in-line {
    position: fixed;
    top: 0;
    left: 50%;
    width: 1px;
    height: 0;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
    z-index: 4;
    transform: translateX(-50%);
    box-shadow: 0 0 15px rgba(42, 157, 143, 0.5);
    animation: lockInLine 2.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes lockInLine {
    0% {
        height: 0;
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        height: 100vh;
        opacity: 0.4;
    }
}

.lock-in-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg-primary);
    z-index: 100;
    animation: revealPage 1.5s ease-in-out forwards;
    pointer-events: none;
}

@keyframes revealPage {
    0% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.delay-1 {
    animation-delay: 1.8s;
}

/* Starts after reveal */
.delay-2 {
    animation-delay: 2.1s;
}

.delay-3 {
    animation-delay: 2.4s;
}

/* Scroll Animations Base Class */
.fade-on-scroll {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: transform, opacity;
}

/* Progressive enhancement */
.js-enabled .fade-on-scroll:not(.visible) {
    opacity: 0;
    transform: translateY(16px);
}

.fade-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   SECTION 1: ENTRY (Hero Video with Text Overlays)
   ========================================= */
.entry-section {
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 8vh;
}

/* Hero Video Background */
.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    background: #011215;
    /* Fallback background color */
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center top;
    /* Align to top to show logo */
}

/* Desktop Video - Show by default, hide on mobile */
.hero-video-desktop {
    display: block;
}

/* Mobile Video - Hidden by default, show on mobile */
.hero-video-mobile {
    display: none;
}

/* Ink-Black Cinematic Tint - minimal for new video */
.video-tint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 20, 22, 0.15);
    /* Very light overlay to preserve video quality */
    z-index: 1;
}

/* Text Overlay Container */
.hero-text-overlay {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1200px;
    padding: 2rem;
    color: #ffffff;
}

/* Hero Logo Overlay */
.hero-logo-overlay {
    display: block;
    max-width: 500px;
    width: 80vw;
    height: auto;
    margin: 0 auto 3rem;
    filter: drop-shadow(0 0 30px rgba(111, 255, 233, 0.4));
    opacity: 0;
    animation: fadeInLogo 1.5s ease-out forwards;
}

/* Hero Logo - Desktop (Top Left corner - only on hero section) */
.hero-logo-desktop {
    display: block;
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    width: 280px;
    height: auto;
    z-index: 100;
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));
    opacity: 0;
    animation: fadeInLogoDesktop 1.5s ease-out 0.5s forwards;
}

@keyframes fadeInLogoDesktop {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero Logo - Mobile Only (Top Center) */
.hero-logo-mobile {
    display: none;
    /* Hidden by default - shown only on mobile via media query */
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

@keyframes fadeInLogo {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Text Sequence Container */
.hero-text-sequence {
    position: relative;
    min-height: 120px;
    margin-top: 1.5rem;
}

/* Base Text Styling */
.hero-headline,
.hero-block-2,
.hero-block-3,
.hero-paragraph {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    opacity: 0;
    font-family: var(--font-heading);
    text-align: center;
    color: #ffffff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

/* Headline - First text block */
.hero-headline {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    animation: fadeInOutText 16s ease-in-out infinite;
    animation-delay: 0s;
}

/* Block 2 */
.hero-block-2 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.4;
    animation: fadeInOutText 16s ease-in-out infinite;
    animation-delay: 4s;
}

/* Block 3 */
.hero-block-3 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.4;
    animation: fadeInOutText 16s ease-in-out infinite;
    animation-delay: 8s;
}

/* Paragraph - "We work alongside ambitious teams..." */
.hero-paragraph {
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    font-weight: 300;
    font-family: var(--font-body);
    letter-spacing: 0.02em;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
    animation: fadeInOutText 16s ease-in-out infinite;
    animation-delay: 12s;
}

/* Fade In/Out Animation - No overlap */
@keyframes fadeInOutText {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }

    3% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    22% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    25% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
}

/* Persistent Micro Super */
.hero-micro-super {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    z-index: 15;
}

/* CTA Block (Lower Third) - Positioned relative to entry-section */
.hero-cta-block {
    position: absolute;
    bottom: 3rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
    z-index: 15;
    width: 100%;
    max-width: 500px;
    padding: 0 1rem;
    box-sizing: border-box;
}

.hero-cta-primary {
    font-family: var(--font-heading);
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(42, 157, 143, 0.9);
    padding: 1rem 2rem;
    border-radius: 2px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.hero-cta-primary:hover {
    background: rgba(42, 157, 143, 1);
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(42, 157, 143, 0.4);
}

.hero-cta-secondary {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.hero-cta-secondary:hover {
    color: rgba(255, 255, 255, 1);
}

/* Content Layer - Below Text Overlays */
.entry-content {
    position: relative;
    z-index: 2;
    display: none;
    /* Hide original content, using overlay system instead */
}

.entry-header h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.entry-subtext .lead {
    font-size: 1.25rem;
    color: var(--color-text-primary);
    max-width: 600px;
    margin: 0 auto var(--spacing-sm);
}

.entry-subtext .descriptors {
    font-family: var(--font-heading);
    color: var(--color-accent);
    font-size: 1rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: var(--spacing-lg);
}

/* =========================================
   SECTION 2: OFFERING
   ========================================= */
.offering-section {
    /* Subtle Premium Gradient */
    background: linear-gradient(180deg, rgba(1, 18, 21, 0) 0%, rgba(42, 157, 143, 0.05) 50%, rgba(1, 18, 21, 0) 100%);
}

.offering-lead {
    text-align: center;
    font-size: 1.5rem;
    max-width: 1100px;
    margin: 0 auto var(--spacing-xl);
    line-height: 1.6;
    color: var(--color-text-primary);
    border-left: 1px solid var(--color-accent);
    padding-left: var(--spacing-md);
    background: linear-gradient(90deg, rgba(42, 157, 143, 0.08) 0%, transparent 100%);
    padding: var(--spacing-lg) var(--spacing-xl);
    letter-spacing: 0.01em;
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.pillar-card {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(5, 38, 44, 0.4);
    /* Darker glass for dark mode */
    backdrop-filter: blur(12px);
    padding: var(--spacing-md);
    transition: all 0.4s ease;
    border-radius: 4px;
    border: 1px solid rgba(42, 157, 143, 0.1);
}

.pillar-card:hover {
    transform: translateY(-8px);
    border-top-color: var(--color-accent-bright);
    background: rgba(5, 38, 44, 0.8);
    box-shadow: 0 15px 40px -10px rgba(42, 157, 143, 0.15);
}

.pillar-number {
    font-family: var(--font-heading);
    color: var(--color-accent);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-sm);
    opacity: 0.8;
}

/* =========================================
   INTERACTIVE REFINEMENTS (Shimmer & Hovers)
   ========================================= */
.shimmer-card {
    position: relative;
    overflow: hidden;
}

.shimmer-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(42, 157, 143, 0.05),
            rgba(111, 255, 233, 0.1),
            rgba(42, 157, 143, 0.05),
            transparent);
    transform: skewX(-20deg);
    transition: none;
}

.shimmer-card:hover::after {
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        left: -150%;
    }

    100% {
        left: 150%;
    }
}

.card-interactive {
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card-interactive:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.3);
}

.list-item-aligned {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-left: 0.5rem;
}

.list-item-aligned .material-symbols-outlined {
    font-size: 1.25rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

/* Base Utility */
.tracking-premium {
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pillar-card h3 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
    letter-spacing: 0.02em;
}

.offering-frame {
    text-align: center;
    font-family: var(--font-heading);
    color: var(--color-text-secondary);
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    text-transform: uppercase;
    opacity: 0.7;
    margin-top: var(--spacing-md);
    margin-bottom: 0;
}

/* =========================================
   SECTION 3: INTAKE
   ========================================= */
.intake-section {
    background-color: transparent;
    text-align: center;
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-lg);
    position: relative;
}

.pedigree {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto var(--spacing-lg);
    border-bottom: 1px solid rgba(42, 157, 143, 0.2);
    padding-bottom: var(--spacing-md);
    display: inline-block;
}

.intake-lead h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
}

/* =========================================
   SHIMMER SPARKLE ANIMATION
   ========================================= */
.shimmer-heading-container {
    position: relative;
    display: inline-block;
    padding: 1rem 3rem;
}

.sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--color-accent-bright);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    box-shadow:
        0 0 6px var(--color-accent-bright),
        0 0 12px var(--color-accent),
        0 0 20px rgba(111, 255, 233, 0.3);
}

/* Sparkle positions around the heading */
.sparkle-1 {
    top: 0;
    left: 10%;
}

.sparkle-2 {
    top: 20%;
    right: 0;
}

.sparkle-3 {
    bottom: 10%;
    right: 15%;
}

.sparkle-4 {
    bottom: 0;
    left: 30%;
}

.sparkle-5 {
    top: 30%;
    left: 0;
}

.sparkle-6 {
    top: 50%;
    right: 25%;
}

/* Staggered sparkle animations */
.sparkle-1 {
    animation: sparkleFloat 3s ease-in-out infinite;
    animation-delay: 0s;
}

.sparkle-2 {
    animation: sparkleFloat 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

.sparkle-3 {
    animation: sparkleFloat 3s ease-in-out infinite;
    animation-delay: 1s;
}

.sparkle-4 {
    animation: sparkleFloat 3s ease-in-out infinite;
    animation-delay: 1.5s;
}

.sparkle-5 {
    animation: sparkleFloat 3s ease-in-out infinite;
    animation-delay: 2s;
}

.sparkle-6 {
    animation: sparkleFloat 3s ease-in-out infinite;
    animation-delay: 2.5s;
}

@keyframes sparkleFloat {
    0% {
        opacity: 0;
        transform: scale(0) translateY(0);
    }

    20% {
        opacity: 1;
        transform: scale(1) translateY(-5px);
    }

    40% {
        opacity: 0.8;
        transform: scale(0.8) translateY(-10px);
    }

    60% {
        opacity: 0.6;
        transform: scale(0.6) translateY(-5px);
    }

    80% {
        opacity: 0.3;
        transform: scale(0.4) translateY(0);
    }

    100% {
        opacity: 0;
        transform: scale(0) translateY(5px);
    }
}

/* Subtle glow effect on the heading itself */
.shimmer-heading-container h2 {
    position: relative;
    z-index: 1;
    text-shadow:
        0 0 10px rgba(111, 255, 233, 0.3),
        0 0 20px rgba(42, 157, 143, 0.2);
}

.intake-context {
    max-width: 600px;
    margin: 0 auto var(--spacing-lg);
    font-size: 1.1rem;
}

.promise-box {
    margin-bottom: var(--spacing-xl);
    font-family: var(--font-heading);
    color: var(--color-accent-bright);
    font-size: 1.2rem;
    letter-spacing: 0.1em;
}

.promise-item {
    color: var(--color-text-primary);
}

.btn-large {
    padding: 1.5rem 3rem;
    font-size: 1.2rem;
}

.site-footer {
    margin-top: var(--spacing-xl);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.3);
}

/* =========================================
   RESPONSIVE DESIGN
   ========================================= */

/* Large Laptops & Small Desktops (1200px and below) */
@media (max-width: 1200px) {
    :root {
        --spacing-xl: 6rem;
        --spacing-lg: 3.5rem;
    }

    .container {
        max-width: 1000px;
    }

    .offering-lead {
        max-width: 900px;
        font-size: 1.4rem;
    }

    .pillars-grid {
        gap: 1.5rem;
    }
}

/* Laptops (1024px and below) */
@media (max-width: 1024px) {
    :root {
        --spacing-xl: 5rem;
        --spacing-lg: 3rem;
    }

    .container {
        max-width: 900px;
        padding: 0 1.5rem;
    }

    .hero-video {
        object-position: center center;
    }

    .hero-cta-block {
        bottom: 3rem;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .offering-lead {
        max-width: 800px;
        font-size: 1.3rem;
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .pillars-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .pillar-card:last-child {
        grid-column: 1 / -1;
        max-width: 600px;
        margin: 0 auto;
    }

    .pedigree {
        max-width: 500px;
    }

    .founder-contact-card {
        padding: 1.5rem;
    }
}

/* Tablets (768px and below) */
@media (max-width: 768px) {
    :root {
        --spacing-xl: 4rem;
        --spacing-lg: 2.5rem;
        --spacing-md: 1.5rem;
    }

    .lock-in-line {
        display: none;
        /* Can be distracting on small mobile screens */
    }

    .hero-video {
        object-position: center center;
    }

    .offering-lead {
        font-size: 1.2rem;
        border-left: none;
        padding-left: 0;
        padding: var(--spacing-md);
        max-width: 100%;
    }

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

    .pillar-card:last-child {
        max-width: 100%;
    }
}

/* =========================================
   3D POLYHEDRON (Tetrahedron - Clean)
   ========================================= */
.system-core-container {
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    perspective: 800px;
    margin: var(--spacing-lg) 0;
    overflow: hidden;
}

.scene {
    position: relative;
    width: 150px;
    height: 150px;
    transform-style: preserve-3d;
    animation: floatingCore 6s ease-in-out infinite;
}

.polyhedron {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    /* Rotation removed for premium static look */
    transform: rotateY(15deg) rotateX(10deg);
    /* Fixed elegant angle */
}

.face {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 75px solid transparent;
    border-right: 75px solid transparent;
    border-bottom: 130px solid rgba(42, 157, 143, 0.15);
    /* Slightly clearer fill */
    opacity: 0.9;
    top: 50%;
    left: 50%;
    margin-left: -75px;
    margin-top: -65px;
    backface-visibility: visible;
    transform-origin: 50% 60%;
    /* Removed large box-shadow "fuzz". Now clean. */
}

/* Sharp Wireframe Edges */
.face::before {
    content: '';
    position: absolute;
    top: 5px;
    /* Offset to create rim */
    left: -70px;
    width: 0;
    height: 0;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-bottom: 121px solid transparent;
    border-bottom-color: rgba(111, 255, 233, 0.6);
    /* Clean bright edge */
    pointer-events: none;
    filter: drop-shadow(0 0 2px rgba(111, 255, 233, 0.4));
    /* Very tight glow only on line */
}

/* Tetrahedron Construction scale factor */
/*
   We will make a triangular pyramid.
   3 faces meeting a top point.
   1 face as base.
   Simplest "Sci-Fi" look is just the 3 spinning faces + base.
*/

/* 3 Sides */
.face-1 {
    transform: rotateY(0deg) translateZ(43px) rotateX(19.5deg);
}

.face-2 {
    transform: rotateY(120deg) translateZ(43px) rotateX(19.5deg);
}

.face-3 {
    transform: rotateY(240deg) translateZ(43px) rotateX(19.5deg);
}

/* Base */
.face-4 {
    transform: rotateX(90deg) translateZ(-55px);
    border-bottom-color: rgba(1, 18, 21, 0.5);
    /* Darker base */
}


/* Core Values Ring - Cleaned up */
.core-values-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 320px;
    transform: translate(-50%, -50%) rotateX(75deg);
    /* Fixed elegant tilt */
    transform-style: preserve-3d;
    /* Rotation removed for premium static look */
    border: 1px dashed rgba(42, 157, 143, 0.3);
    /* Clean dashed line */
    border-radius: 50%;
}

.core-val {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: var(--font-heading);
    color: var(--color-accent-bright);
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: none;
    /* Removed text glow fuzz */
}

/* Position values on the ring */
.val-1 {
    transform: translate(-50%, -50%) rotate(0deg) translate(200px) rotate(-0deg);
}

.val-2 {
    transform: translate(-50%, -50%) rotate(120deg) translate(200px) rotate(-120deg);
}

.val-3 {
    transform: translate(-50%, -50%) rotate(240deg) translate(200px) rotate(-240deg);
}


/* Animations - Rotation removed, keeping only float */
@keyframes floatingCore {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* =========================================
   RESPONSIVE DESIGN (Mobile & Tablet)
   ========================================= */
@media (max-width: 768px) {
    :root {
        --spacing-xl: 4rem;
        --spacing-md: 1.5rem;
    }

    /* Top Button adjustment */
    .top-access-btn {
        top: 1rem;
        right: 1rem;
        padding: 0.6rem 1rem;
        font-size: 0.75rem;
    }

    /* Hero Section - Mobile */
    .entry-section {
        padding-top: 5vh;
    }

    /* Hero Video - Mobile: Switch to 9:16 Portrait Video */
    .hero-video-bg {
        width: 100%;
        height: 100vh;
    }

    /* Hide desktop video on mobile */
    .hero-video-desktop {
        display: none;
    }

    /* Show mobile video on mobile */
    .hero-video-mobile {
        display: block;
        width: 100%;
        height: 100vh;
        object-fit: cover;
        object-position: center center;
        left: 0;
        transform: none;
        min-width: 100%;
    }

    /* Hero Logo - Scale down */
    .hero-logo {
        max-width: 90vw;
        margin-top: 2rem;
    }

    .hero-logo-overlay {
        max-width: 280px;
        margin-bottom: 1.5rem;
    }

    /* Hide Desktop Logo on Mobile */
    .hero-logo-desktop {
        display: none;
    }

    /* Hero Logo Mobile - Show on phones only (Top Center) */
    .hero-logo-mobile {
        display: block;
        max-width: 350px;
        width: 80vw;
        height: auto;
        filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));
        opacity: 1;
        animation: fadeInLogo 1s ease-out forwards;
    }

    .entry-header h1 {
        font-size: 2.5rem;
    }

    /* Hero Text Sequence - Mobile */
    .hero-text-sequence {
        min-height: 100px;
        margin-top: 0.5rem;
    }

    .hero-headline {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }

    .hero-block-2,
    .hero-block-3 {
        font-size: clamp(1.2rem, 5vw, 1.8rem) !important;
    }

    .hero-paragraph {
        font-size: clamp(0.95rem, 4vw, 1.2rem) !important;
        padding: 0 1rem;
    }

    /* Hero CTA Block - Mobile */
    .hero-cta-block {
        bottom: 2rem;
        gap: 0.5rem;
        width: 90%;
        max-width: 400px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .hero-cta-primary {
        font-size: 0.85rem;
        padding: 0.8rem 1.5rem;
        width: 100%;
        text-align: center;
    }

    .hero-cta-secondary {
        font-size: 0.8rem;
    }

    /* Hero Micro Super - Mobile */
    .hero-micro-super {
        font-size: 0.6rem;
        top: 1rem;
        letter-spacing: 0.1em;
    }

    /* 3D Core - Scale down */
    .system-core-container {
        height: 250px;
    }

    .scene {
        transform: scale(0.6);
    }

    /* Shimmer Sparkle - Mobile */
    .shimmer-heading-container {
        padding: 0.5rem 1rem;
    }

    .sparkle {
        width: 5px;
        height: 5px;
    }

    .intake-lead h2 {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }

    /* Intake Form - Mobile */
    .intake-form input[type="email"] {
        width: 100%;
        padding: 1rem;
        font-size: 0.9rem;
    }

    .intake-form-container {
        padding: 0 1rem;
    }

    /* Adjust grid */
    .pillars-grid {
        grid-template-columns: 1fr;
    }

    /* Pillar Cards - Mobile */
    .pillar-card {
        padding: 1.5rem;
    }

    /* Promise Box - Mobile */
    .promise-box {
        font-size: 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* General Contact Card - Mobile */
    .general-contact-card {
        padding: 1.5rem;
    }

    /* Text Overlay Container - Mobile */
    .hero-text-overlay {
        padding: 1rem;
    }

    /* Intake Context - Mobile */
    .intake-context {
        font-size: 1rem;
        padding: 0 1rem;
    }
}

/* Extra small devices (phones in portrait) */
@media (max-width: 480px) {
    :root {
        --spacing-xl: 3rem;
        --spacing-lg: 2rem;
        --spacing-md: 1rem;
    }

    .container {
        padding: 0 1rem;
    }

    .hero-logo-overlay {
        max-width: 220px;
    }

    /* Hero Logo Mobile - Smaller screens */
    .hero-logo-mobile {
        max-width: 280px;
        width: 75vw;
    }

    /* Hero Video - Small Mobile: Use mobile video */
    .hero-video-mobile {
        object-position: center center;
    }

    .hero-headline {
        font-size: clamp(1.3rem, 7vw, 1.8rem) !important;
    }

    .hero-block-2,
    .hero-block-3 {
        font-size: clamp(1rem, 5vw, 1.4rem) !important;
    }

    .hero-paragraph {
        font-size: clamp(0.85rem, 4vw, 1rem) !important;
    }

    .hero-cta-block {
        bottom: 1.5rem;
        width: 95%;
        max-width: 350px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .hero-cta-primary {
        font-size: 0.8rem;
        padding: 0.75rem 1.2rem;
    }

    .hero-cta-secondary {
        font-size: 0.75rem;
    }

    .offering-lead {
        font-size: 1rem;
        padding: 1rem;
    }

    .offering-lead p {
        font-size: 0.95rem;
    }

    .pillar-card {
        padding: 1rem;
    }

    .pillar-card h3 {
        font-size: 1rem;
    }

    .pillar-card p {
        font-size: 0.9rem;
    }

    .shimmer-heading-container h2 {
        font-size: clamp(1.3rem, 7vw, 2rem);
    }

    .sparkle {
        width: 4px;
        height: 4px;
    }

    /* Hide some sparkles on very small screens */
    .sparkle-5,
    .sparkle-6 {
        display: none;
    }

    .btn-framer-glassy {
        padding: 1rem 2rem;
        font-size: 0.9rem;
    }

    .pedigree {
        font-size: 0.85rem;
        padding-bottom: 1rem;
    }

    .intake-form input[type="email"] {
        font-size: 0.85rem;
        padding: 0.8rem;
    }

    .founders-contact-section {
        gap: 1rem;
    }
}


/* =========================================
   NEW WIREFRAME STYLES
   ========================================= */

/* Hero Section - New Design */
.hero-section {
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    width: 100%;
    padding-top: 80px;
}

.hero-main {
    margin-bottom: 4rem;
}

.hero-headline {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.5);
}

.hero-subtext {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

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

.btn-primary {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: var(--color-accent);
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: var(--color-accent-bright);
    color: #011215;
    transform: translateY(-2px);
}

.btn-secondary {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: transparent;
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

/* Hero Comparison */
.hero-comparison {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.comparison-col {
    text-align: left;
}

.comparison-col h3 {
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
    color: var(--color-accent-bright);
}

.comparison-col.legacy h3 {
    color: rgba(255, 100, 100, 0.8);
}

.comparison-col ul {
    list-style: none;
    padding: 0;
}

.comparison-col li {
    padding: 0.5rem 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    position: relative;
    padding-left: 1.5rem;
}

.comparison-col li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

.comparison-col.legacy li::before {
    color: rgba(255, 100, 100, 0.6);
}

.comparison-divider {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-badge {
    background: var(--color-accent);
    color: #011215;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.8rem;
}


/* Section Titles */
.section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    color: var(--color-text-primary);
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    margin-bottom: 3rem;
}

/* Systemic Section */
.systemic-section {
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.systemic-section .pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.systemic-section .pillar-card {
    background: rgba(42, 157, 143, 0.05);
    border: 1px solid rgba(42, 157, 143, 0.2);
    border-radius: 8px;
    padding: 2.5rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.systemic-section .pillar-card:hover {
    background: rgba(42, 157, 143, 0.1);
    border-color: var(--color-accent);
    transform: translateY(-5px);
}

.pillar-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.systemic-section .pillar-card h3 {
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    color: var(--color-accent-bright);
}

.systemic-section .pillar-card p {
    font-size: 0.95rem;
    line-height: 1.6;
}

.readiness-cta {
    margin-top: 2rem;
}

.btn-accent {
    display: inline-block;
    padding: 1rem 2rem;
    background: transparent;
    color: var(--color-accent-bright);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 2px solid var(--color-accent);
    border-radius: 4px;
    transition: all 0.3s ease;
}

.btn-accent:hover {
    background: var(--color-accent);
    color: #011215;
}

/* Stats Section */
.stats-section {
    padding: var(--spacing-lg) 0;
    background: rgba(42, 157, 143, 0.08);
    border-top: 1px solid rgba(42, 157, 143, 0.2);
    border-bottom: 1px solid rgba(42, 157, 143, 0.2);
}

.stats-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    text-align: center;
    width: 100%;
}

.stat-item {
    padding: 1rem;
}

.stat-number {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 600;
    color: var(--color-accent-bright);
    margin-bottom: 0.5rem;
}

.stat-label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* Value Section */
.value-section {
    padding: var(--spacing-xl) 0;
    background: rgba(20, 30, 35, 0.8);
}

.value-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.value-text h2 {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--color-text-primary);
}

.value-text p {
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.value-image {
    position: relative;
}

.image-placeholder {
    background: rgba(42, 157, 143, 0.1);
    border: 2px dashed rgba(42, 157, 143, 0.3);
    border-radius: 8px;
    padding: 6rem 2rem;
    text-align: center;
    color: var(--color-text-secondary);
}


/* Leadership Section */
.leadership-section {
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.founders-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    max-width: 900px;
    margin: 0 auto;
}

.founder-card {
    background: rgba(42, 157, 143, 0.05);
    border: 1px solid rgba(42, 157, 143, 0.2);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.founder-card:hover {
    background: rgba(42, 157, 143, 0.08);
    border-color: var(--color-accent);
}

.founder-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 1.5rem;
    border: 3px solid var(--color-accent);
}

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

.founder-info h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-primary);
}

.founder-title {
    color: var(--color-accent-bright);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.founder-info .founder-bio {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.founder-links {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.founder-links a {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: 4px;
    transition: all 0.3s ease;
}

.founder-links a:hover {
    background: var(--color-accent);
    color: #011215;
}

/* Protocol Section */
.protocol-section {
    padding: var(--spacing-xl) 0;
    background: rgba(20, 30, 35, 0.5);
    text-align: center;
}

.protocol-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

.protocol-step {
    position: relative;
    text-align: center;
}

.step-number {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    background: var(--color-accent);
    color: #011215;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    border-radius: 50%;
    margin-bottom: 1.5rem;
}

.step-content h3 {
    font-size: 1rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
    color: var(--color-accent-bright);
}

.step-content p {
    font-size: 0.9rem;
    line-height: 1.5;
}

/* FAQ Section */
.faq-section {
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.faq-item {
    border-bottom: 1px solid rgba(42, 157, 143, 0.2);
}

.faq-question {
    width: 100%;
    padding: 1.5rem 0;
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    font-family: var(--font-heading);
    font-size: 1.1rem;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.3s ease;
}

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

.faq-icon {
    font-size: 1.5rem;
    color: var(--color-accent);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 200px;
    padding-bottom: 1.5rem;
}

.faq-answer p {
    font-size: 0.95rem;
    line-height: 1.7;
}


/* CTA Footer Section */
.cta-footer-section {
    padding: var(--spacing-xl) 0;
    background: linear-gradient(180deg, rgba(42, 157, 143, 0.1) 0%, rgba(1, 18, 21, 1) 100%);
    text-align: center;
}

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

.cta-content h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--color-text-primary);
}

.cta-content>p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: var(--color-text-secondary);
}

.cta-form {
    max-width: 500px;
    margin: 0 auto 2rem;
}

.form-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.cta-form input[type="email"] {
    flex: 1;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(42, 157, 143, 0.3);
    border-radius: 4px;
    color: var(--color-text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.cta-form input[type="email"]:focus {
    outline: none;
    border-color: var(--color-accent);
    background: rgba(255, 255, 255, 0.08);
}

.cta-form input[type="email"]::placeholder {
    color: var(--color-text-secondary);
}

/* Site Footer */
.site-footer {
    padding: 2rem 0;
    border-top: 1px solid rgba(42, 157, 143, 0.1);
    margin-top: 2rem;
}

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

.footer-content p {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.footer-links a {
    color: var(--color-accent);
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--color-accent-bright);
}

/* =========================================
   RESPONSIVE - NEW SECTIONS
   ========================================= */
@media (max-width: 1024px) {
    .protocol-timeline {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .hero-comparison {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .comparison-divider {
        order: -1;
    }

    .vs-badge {
        margin: 0.5rem 0;
    }

    .systemic-section .pillars-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .value-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

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

    .protocol-timeline {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .form-row {
        flex-direction: column;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}

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

    .hero-ctas {
        flex-direction: column;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
    }
}

/* =========================================
   Global Header & Icon Fixes
   ========================================= */

/* Premium Language Dropdown */
.lang-dropdown {
    position: relative;
    display: inline-block;
}

.lang-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: #d1d5db;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.lang-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(111, 255, 249, 0.3);
    color: #fff;
}

.lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 160px;
    background: rgba(5, 10, 15, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(6px);
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease,
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.3s ease;
    z-index: 1000;
}

.lang-menu.active {
    max-height: 240px;
    opacity: 1;
    transform: translateY(0);
    padding: 8px;
}

.lang-option {
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lang-option:hover {
    background: rgba(111, 255, 249, 0.1);
    color: #6ffff9;
    padding-left: 16px;
}

/* Material Symbols fix for Tailwind */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* =========================================
   Layer Numbers � Glowing Teal Accent
   ========================================= */
@keyframes layer-glow {

    0%,
    100% {
        text-shadow: 0 0 8px rgba(111, 255, 249, 0.35), 0 0 18px rgba(0, 122, 100, 0.2);
        color: rgba(111, 255, 249, 0.55);
    }

    50% {
        text-shadow: 0 0 18px rgba(111, 255, 249, 0.75), 0 0 36px rgba(0, 122, 100, 0.45), 0 0 55px rgba(111, 255, 249, 0.15);
        color: rgba(111, 255, 249, 0.88);
    }
}

.layer-number {
    color: rgba(111, 255, 249, 0.55);
    font-variant-numeric: tabular-nums;
    animation: layer-glow 3.5s ease-in-out infinite;
    letter-spacing: -0.03em;
    display: block;
}

.system-layer:hover .layer-number {
    color: #6ffff9;
    text-shadow: 0 0 25px rgba(111, 255, 249, 1), 0 0 50px rgba(0, 122, 100, 0.7);
    animation: none;
    transition: all 0.3s ease;
}

.system-layer:nth-child(1) .layer-number {
    animation-delay: 0s;
}

.system-layer:nth-child(2) .layer-number {
    animation-delay: 0.7s;
}

.system-layer:nth-child(3) .layer-number {
    animation-delay: 1.4s;
}

.system-layer:nth-child(4) .layer-number {
    animation-delay: 2.1s;
}

.system-layer:nth-child(5) .layer-number {
    animation-delay: 2.8s;
}

/* =========================================
   MOBILE FIRST & TABLET REFINEMENT (2026)
   ========================================= */

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Tablet & Mobile Global Optimization */
@media (max-width: 1024px) {
    section {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    h1,
    h2 {
        font-size: clamp(1.6rem, 5vw, 2.5rem);
        line-height: 1.2;
    }

    h3 {
        font-size: clamp(1.1rem, 4vw, 1.5rem);
    }

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

    .protocol-timeline {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    video {
        width: 100% !important;
        height: 100% !important;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
        /* Prevents iOS zoom */
    }

    /* Intelligence layer cards: compact on tablet */
    .system-layer {
        padding: 1.25rem !important;
    }

    .layer-info h4 {
        font-size: 0.65rem;
    }

}

/* Mobile Only (Below 768px) */
@media (max-width: 767px) {

    h1,
    h2 {
        font-size: clamp(1.4rem, 6.5vw, 2rem);
        line-height: 1.15;
        letter-spacing: -0.01em;
    }

    /* Intelligence cards stack cleanly on mobile */
    .system-map-container {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Timeline indentation fix on mobile */
    .timeline-track {
        padding-left: 1.5rem;
    }

    .timeline-dot {
        left: -1.85rem;
    }

    /* Knowledge cards expand by default on mobile */
    .knowledge-card-content-wrapper {
        grid-template-rows: 1fr !important;
    }

    .knowledge-card-content {
        opacity: 1 !important;
        padding-bottom: 1rem !important;
    }

    /* Section list text size */
    .text-lg {
        font-size: 1rem;
    }
}

/* Specific Mobile Refinements (Below 640px) */
@media (max-width: 640px) {
    .fixed.bottom-6.right-6 {
        bottom: 1.25rem !important;
        right: 1.25rem !important;
        left: 1.25rem !important;
        width: auto !important;
        display: flex;
        justify-content: center;
    }

    .fixed.bottom-6.right-6>div {
        width: 100%;
        max-width: 400px;
        justify-content: center;
    }

    .hero-section {
        padding-top: 100px !important;
    }

    .hero-ctas {
        flex-direction: column !important;
        width: 100%;
    }

    .hero-ctas>* {
        width: 100% !important;
        text-align: center;
        margin-bottom: var(--space-tight);
    }

    section {
        padding-top: calc(var(--space-section) * 1.25) !important;
        padding-bottom: calc(var(--space-section) * 1.25) !important;
    }
}

/* LinkedIn Button Styling Fix */
.linkedin-btn {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    background: #0077b5 !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 6px !important;
    color: white !important;
    margin-top: 1.5rem !important;
    font-size: 0.7rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    width: fit-content !important;
    box-shadow: 0 4px 12px rgba(0, 119, 181, 0.2) !important;
    transition: all var(--transition-base) !important;
}

.linkedin-btn:hover {
    background: #0089d1 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 119, 181, 0.3) !important;
}

.linkedin-btn svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
}

/* =========================================
   2026 EXECUTIVE POLISH LAYER
   ========================================= */

/* Calm Vertical Rhythm - Specific Helpers Only */
.stack-section-header {
    margin-bottom: var(--space-section);
}

.hero-subheading {
    margin-top: calc(var(--space-tight) * -1 + var(--space-para));
    margin-bottom: var(--space-stack);
}

/* Paragraph Readability Helper */
.max-w-prose {
    max-width: 68ch;
    margin-left: auto;
    margin-right: auto;
}

p {
    line-height: inherit;
    letter-spacing: inherit;
}

/* Subtle Interaction Softening */
.btn-framer-glassy,
.top-access-btn,
.cta-button {
    transition: all var(--transition-base) !important;
}

/* Headline Breathing Room - Use standard tailwind where possible */
.hero-headline {
    margin-bottom: var(--space-stack);
}

/* Mobile Smoothing */
@media (max-width: 768px) {
    p {
        font-size: 15px;
        line-height: 1.7;
    }

    h2 {
        margin-bottom: var(--space-para);
    }
}

/* Divider Opacity Softening */
.border-white\/5,
.border-white\/10,
.border-white\/20 {
    border-color: rgba(255, 255, 255, 0.04) !important;
    transition: border-color var(--transition-base);
}

/* FAQ & Long-form Breathing */
.faq-item p {
    margin-top: var(--space-micro);
    margin-bottom: 0;
}

/* Visual Stillness: Reduce excessive animation complexity */
.particle-container {
    opacity: 0.4;
}

/* Fix for SVH (Short Viewport Height) on mobile browsers */
.min-h-screen {
    min-height: 100svh !important;
}

/* =========================================
   FAQ & TEAM SCA-NNABILITY REFINEMENTS
   ========================================= */

.faq-answer {
    line-height: 1.8 !important;
    color: var(--color-text-secondary) !important;
    font-size: 0.95rem !important;
    padding-bottom: var(--space-para) !important;
    max-width: 80ch !important;
}

.faq-question h3 {
    font-family: var(--font-body) !important;
    text-transform: none !important;
    font-size: 1.1rem !important;
    letter-spacing: 0 !important;
    margin-bottom: 0 !important;
    font-weight: 600 !important;
}

.team-card h3 {
    letter-spacing: 0.01em !important;
    margin-bottom: var(--space-micro) !important;
}

.team-card p.uppercase {
    letter-spacing: 0.1em !important;
    opacity: 0.8 !important;
}

.stat-box span.uppercase {
    letter-spacing: 0.05em !important;
    font-size: 9px !important;
    opacity: 0.7 !important;
}

/* Specific Alignment Restorations */
.team-card,
.pillar-card,
.system-layer,
.systemic-card {
    text-align: center !important;
}

.team-card .linkedin-btn,
.pillar-card .linkedin-btn {
    margin-left: auto !important;
    margin-right: auto !important;
}

.system-layer h3,
.pillar-card h4 {
    text-align: center !important;
    width: 100%;
}

/* Visual Stillness: Hover Transitions */
.card-interactive,
.system-layer,
.btn-framer-glassy {
    transition: all var(--transition-base) !important;
}