:root {
    --bg-main: #000000;
    --bg-section: #0a0a0a;
    --bg-darker: #050505;
    --text-primary: #ffffff;
    --text-secondary: #bfbfbf;
    --accent: #e5e5e5;
    --accent-primary: #6c5ce7;
    --accent-secondary: #9d8df4;
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Inter', sans-serif;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --transition-smooth: cubic-bezier(0.165, 0.84, 0.44, 1);
}

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

html {
    overflow-x: hidden;
    scroll-padding-top: 84px;
}

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

/* ========================================
   LOADER
   ======================================== */
.experience-loader {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1rem;
    padding: 2rem;
    background:
        radial-gradient(circle at 50% 42%, rgba(255,255,255,0.08), transparent 34%),
        #000;
    color: #fff;
    transition: opacity 0.75s ease, visibility 0.75s ease;
}

.experience-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-brand {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 6vw, 4.5rem);
    letter-spacing: 0.05em;
}

.loader-title,
.loader-percent {
    color: rgba(255,255,255,0.68);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.loader-track {
    width: min(320px, 72vw);
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
}

.loader-track span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255,255,255,0.35), #fff);
    box-shadow: 0 0 22px rgba(255,255,255,0.35);
    transition: width 0.25s ease;
}

/* ========================================
   CUSTOM CURSOR
   ======================================== */
@media (hover: hover) and (pointer: fine) {
    body,
    a,
    button,
    input {
        cursor: none;
    }
}

.cursor-dot,
.cursor-outline {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
    transition: width 0.3s, height 0.3s, background-color 0.3s, border-color 0.3s;
}

.cursor-dot {
    width: 6px;
    height: 6px;
    background-color: #fff;
}

.cursor-outline {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

html[data-cursor-hover="true"] .cursor-outline {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: transparent;
}

@media (max-width: 768px) {
    .cursor-dot,
    .cursor-outline,
    .ambient-glow {
        display: none !important;
    }
}

/* ========================================
   AMBIENT EFFECTS
   ======================================== */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.035;
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
}

.ambient-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(800px circle at var(--mouse-x, 50vw) var(--mouse-y, 50vh), rgba(255,255,255,0.03), transparent 50%);
    transition: opacity 0.5s ease;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

h1 {
    font-size: clamp(3.5rem, 8vw, 6.5rem);
    margin-bottom: 1.5rem;
    letter-spacing: -0.04em;
}

h2 {
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    margin-bottom: 2rem;
    letter-spacing: -0.03em;
}

h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

h4 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

p {
    color: var(--text-secondary);
    font-size: 1.125rem;
    max-width: 600px;
}

.subtitle {
    font-size: 1.25rem;
    margin: 0 auto;
}

a {
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.3s ease;
}

img,
svg {
    max-width: 100%;
}

:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

.skip-link {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 10000;
    padding: 0.85rem 1.1rem;
    border-radius: 999px;
    background: #fff;
    color: #000;
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 5%;
}

.container-sm {
    max-width: 800px;
}

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

.text-center p {
    margin: 0 auto;
}

.mb-l {
    margin-bottom: 3rem;
}

.mb-xl {
    margin-bottom: 5rem;
}

.mt-l {
    margin-top: 3rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.section {
    padding: 8rem 0;
    position: relative;
    z-index: 2;
}

.bg-darker {
    background-color: var(--bg-section);
}

.relative {
    position: relative;
}

/* ========================================
   GLASS CARD
   ======================================== */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 2.5rem;
    transition: transform 0.4s var(--transition-smooth), box-shadow 0.4s ease, border-color 0.4s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

.glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: radial-gradient(800px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(255,255,255,0.06), transparent 40%);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
    z-index: -1;
}

.glass:hover::before {
    opacity: 1;
}

.glass:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 255, 255, 0.05) inset;
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-8px);
}

/* ========================================
   BADGE
   ======================================== */
.badge {
    display: inline-block;
    font-size: clamp(0.85rem, 0.8vw + 0.4rem, 0.95rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 0.5rem 1rem;
    border: 1px solid var(--glass-border);
    border-radius: 100px;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    border-radius: 100px;
    font-weight: 500;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.4s var(--transition-smooth);
    border: 1px solid transparent;
    min-height: 48px;
}

.btn:disabled {
    cursor: wait;
    opacity: 0.7;
    transform: none;
}

.btn-primary {
    background-color: var(--text-primary);
    color: var(--bg-main);
}

.btn-primary:hover {
    background-color: transparent;
    border-color: var(--text-primary);
    color: var(--text-primary);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.btn-secondary {
    background-color: transparent;
    border-color: var(--glass-border);
    color: var(--text-primary);
}

.btn-secondary:hover {
    border-color: var(--text-primary);
}

.btn.sm {
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
}

.btn.is-loading .btn-text {
    display: none;
}

.btn.is-loading .btn-loader {
    display: inline;
}

.btn-loader {
    display: none;
}

/* ========================================
   NAVBAR
   ======================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    z-index: 100;
    transition: all 0.4s ease;
}

.navbar.scrolled {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
}

.nav-container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    padding-left: 10px;
}

.nav-logo-svg {
    height: 48px;
    width: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

.nav-logo-svg:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.nav-link {
    font-size: clamp(1rem, 1vw + 0.5rem, 1.18rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: #fff;
    transition: width 0.3s ease;
}

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

.nav-link:hover {
    color: #fff;
    opacity: 0.7;
}

.mobile-menu-toggle,
.mobile-menu {
    display: none;
}

/* ========================================
   HERO SECTION
   ======================================== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 6rem;
    overflow: hidden;
    position: relative;
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 4;
}

.hero-content {
    position: relative;
    z-index: 4;
}

.hero-actions {
    display: flex;
    gap: 1.5rem;
    margin-top: 3rem;
}

.hero-product-logo {
    max-width: 280px;
    height: auto;
    margin-bottom: 2rem;
    display: block;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-product-logo:hover {
    transform: scale(1.03);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.15);
}

.hero-headline {
    margin-bottom: 1.5rem;
}

.hero-title-line {
    display: block;
    will-change: transform, opacity;
}

/* ── Hero reveal: keep all hero content hidden until the wheelchair settles.
   No blur is used here — buttons and text animate with transform + opacity
   only, so they never render fuzzy. JS clears these once the 3D finishes. ── */
.hero .badge,
.hero-product-logo,
.hero-title-line,
.hero-content > p,
.hero-actions {
    opacity: 0;
}

/* The headline wrapper itself stays visible so its lines can animate inside it,
   but it must not carry the global .fade-up blur/transform initial state. */
.hero-headline {
    opacity: 1;
    filter: none;
    transform: none;
}

/* Neutralise the global .fade-up hidden state (blur + scale) for hero items so
   GSAP only ever drives transform + opacity here. */
.hero .badge.fade-up,
.hero-content > p.fade-up,
.hero-actions.fade-up {
    filter: none;
    transform: none;
}

/* ========================================
   PRODUCT STAGE (3D CONTAINER)
   ======================================== */
.hero-visual {
    position: relative;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    isolation: isolate;
}

.product-stage {
    position: fixed;
    top: 86px;
    right: -3vw;
    bottom: 0;
    width: min(58vw, 860px);
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
    z-index: 2;
    pointer-events: none;
}

.stage-backdrop {
    position: absolute;
    width: min(90%, 620px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 40%, rgba(255,255,255,0.18), rgba(255,255,255,0.035) 34%, transparent 68%),
        radial-gradient(circle at 50% 68%, rgba(255,255,255,0.07), transparent 55%);
    filter: blur(18px);
    opacity: 0.86;
    transform: translateZ(-120px);
}

.stage-spotlight {
    position: absolute;
    width: min(84%, 560px);
    height: min(84%, 560px);
    border-radius: 50%;
    background:
        radial-gradient(circle at var(--light-x, 52%) var(--light-y, 28%), rgba(255,255,255,0.28), rgba(255,255,255,0.08) 24%, transparent 63%);
    filter: blur(20px);
    opacity: 0.82;
    transform: translateZ(-70px);
}

.stage-depth {
    position: absolute;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;
    transform: rotateX(72deg) translateZ(-90px);
}

.depth-one {
    width: min(76%, 520px);
    height: min(32%, 210px);
}

.depth-two {
    width: min(56%, 380px);
    height: min(24%, 150px);
    opacity: 0.62;
}

.product-orbit {
    position: relative;
    z-index: 3;
    width: min(105%, 660px);
    transform-style: preserve-3d;
    will-change: transform;
}

.product-object {
    position: relative;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
    will-change: transform, filter;
}

/* ========================================
   3D CANVAS
   ======================================== */
.product-canvas {
    width: min(105%, 660px);
    height: min(70vh, 530px);
    position: relative;
    z-index: 2;
    transform: translateZ(90px);
    user-select: none;
    pointer-events: auto;
    cursor: grab;
    filter: drop-shadow(0 34px 34px rgba(0,0,0,0.58));
}

.product-canvas:active {
    cursor: grabbing;
}

.product-fallback {
    position: absolute;
    z-index: 1;
    width: min(92%, 620px);
    max-height: min(68vh, 520px);
    object-fit: contain;
    opacity: 0;
    transform: translateZ(70px);
    filter:
        grayscale(1)
        contrast(1.08)
        brightness(0.82)
        drop-shadow(0 42px 38px rgba(0,0,0,0.72));
    animation: fallbackFloat 6s ease-in-out infinite;
    transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
    pointer-events: none;
}

.product-fallback.is-hidden {
    opacity: 0;
    transform: translateZ(50px) scale(0.96);
}

.product-stage.is-fallback .product-canvas {
    opacity: 0;
}

.product-stage.is-fallback .product-fallback {
    opacity: 0.96;
}

/* While the GLB loads in the background, show the silhouette placeholder and
   keep the (empty) canvas hidden. Removing this class fades the model in. */
.product-stage.is-model-loading .product-canvas {
    opacity: 0;
}

.product-stage.is-model-loading .product-fallback {
    opacity: 0.82;
}

.product-canvas {
    transition: opacity 0.6s ease;
}

.model-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 999px;
    background: rgba(0,0,0,0.44);
    color: rgba(255,255,255,0.7);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(16px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.model-loader.is-hidden {
    opacity: 0;
    transform: translate(-50%, -40%);
    pointer-events: none;
}

.product-light-sweep {
    position: absolute;
    inset: 6% 0 10%;
    z-index: 2;
    width: 38%;
    background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.32) 48%, transparent 100%);
    filter: blur(16px);
    mix-blend-mode: screen;
    opacity: 0;
    transform: translateX(-190%) skewX(-14deg);
    pointer-events: none;
}

.product-shadow {
    position: absolute;
    bottom: 6%;
    width: min(58%, 430px);
    height: 54px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.78), rgba(0,0,0,0.32) 42%, transparent 72%);
    filter: blur(16px);
    opacity: 0.88;
    transform: rotateX(62deg) translateZ(-140px);
    z-index: 1;
}

.product-reflection {
    position: absolute;
    bottom: 0;
    width: min(52%, 380px);
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.13), transparent 70%);
    filter: blur(22px);
    opacity: 0.24;
    transform: rotateX(72deg) translateZ(-130px);
    z-index: 0;
}

@keyframes fallbackFloat {
    0%,
    100% {
        transform: translate3d(0, -8px, 70px) rotateY(-5deg) rotateX(1deg);
    }
    50% {
        transform: translate3d(0, 8px, 70px) rotateY(5deg) rotateX(-1deg);
    }
}

/* ========================================
   PROBLEM SECTION
   ======================================== */
.problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 4rem;
}

.problem-item {
    text-align: left;
    padding: 2rem;
    border-left: 2px solid var(--glass-border);
}

.problem-item .stat {
    font-size: 3rem;
    font-family: var(--font-heading);
    color: #fff;
    margin-bottom: 1rem;
    line-height: 1;
}

/* ========================================
   SPLIT LAYOUT
   ======================================== */
.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
}

.align-center {
    align-items: center;
}

.solution {
    overflow: hidden;
}

.solution::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.055), transparent 34rem),
        linear-gradient(180deg, rgba(255,255,255,0.028), transparent 28%, transparent 74%, rgba(255,255,255,0.022));
}

.solution .container {
    position: relative;
    z-index: 2;
}

.solution-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 4rem;
}

/* Solution cards manage their own reveal — never inherit the global .fade-up
   blur/scale hidden state (would render the cards fuzzy before GSAP runs). */
.solution-item.fade-up {
    filter: none;
    transform: none;
}

.solution-item {
    --mx: 50%;
    --my: 50%;
    --glow: 0;
    min-height: 250px;
    position: relative;
    overflow: hidden;
    text-align: left;
    padding: 2rem;
    cursor: pointer;
    border: 1px solid var(--glass-border);
    border-left: 2px solid var(--glass-border);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.026), rgba(255,255,255,0.008));
    /* Only transform/opacity-cheap props are eased; tilt is driven inline per-frame by GSAP/raf. */
    transition: border-color 0.36s ease, background 0.36s ease, box-shadow 0.36s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

/* Soft spotlight that follows the cursor (mouse-tracked via --mx/--my). */
.solution-item::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(
        220px circle at var(--mx) var(--my),
        rgba(255,255,255,0.14),
        rgba(255,255,255,0.04) 38%,
        transparent 62%
    );
    opacity: var(--glow);
    transition: opacity 0.4s ease;
    z-index: 1;
}

/* Border shimmer that sweeps on hover. */
.solution-item::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        120deg,
        transparent 20%,
        rgba(255,255,255,0.55) 48%,
        rgba(255,255,255,0.0) 60%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    background-size: 220% 100%;
    background-position: 140% 0;
    opacity: 0;
    transition: opacity 0.4s ease, background-position 0.9s var(--transition-smooth);
    z-index: 2;
}

.solution-item:hover,
.solution-item:focus-visible {
    border-color: rgba(255,255,255,0.32);
    border-left-color: rgba(255,255,255,0.6);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.016));
    box-shadow: 0 30px 70px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);
    outline: none;
}

.solution-item:hover::before,
.solution-item:focus-visible::before {
    --glow: 1;
    opacity: 1;
}

.solution-item:hover::after,
.solution-item:focus-visible::after {
    opacity: 1;
    background-position: -40% 0;
}

/* Active / selected card — brighter border + soft white glow, stays highlighted. */
.solution-item.is-active {
    border-color: rgba(255,255,255,0.7);
    border-left-color: #fff;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.25), 0 0 42px rgba(255,255,255,0.18), 0 30px 70px rgba(0,0,0,0.5);
}

/* "Learn more" affordance to invite the click. */
.solution-cue {
    position: absolute;
    left: 2rem;
    bottom: 1.6rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-secondary);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.36s ease, transform 0.36s var(--transition-smooth), color 0.36s ease;
}

.solution-cue::after {
    content: '\2192';
    transition: transform 0.36s var(--transition-smooth);
}

.solution-item:hover .solution-cue,
.solution-item:focus-visible .solution-cue {
    opacity: 1;
    transform: translateY(0);
    color: #fff;
}

.solution-item:hover .solution-cue::after {
    transform: translateX(4px);
}

/* Keep content above the spotlight/shimmer layers. */
.solution-title,
.solution-item p {
    position: relative;
    z-index: 3;
}

.solution-title {
    position: relative;
    color: #fff;
    font-family: var(--font-heading);
    font-size: clamp(2.05rem, 3vw, 3rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    margin-bottom: 1rem;
}

.solution-item p {
    position: relative;
    max-width: none;
    font-size: 1.02rem;
    padding-bottom: 1.6rem;
}

.solution h2,
.tech h2,
.stage > .container > h2,
.team h2 {
    font-size: clamp(3rem, 5.35vw, 4.85rem);
    line-height: 1.04;
    margin-bottom: 2.15rem;
}

/* ========================================
   SOLUTION MODAL / LIGHTBOX
   ======================================== */
.solution-modal {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    visibility: hidden;
    pointer-events: none;
}

.solution-modal.is-open {
    visibility: visible;
    pointer-events: auto;
}

body.modal-open {
    overflow: hidden;
}

.solution-modal-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(20,20,20,0.6), rgba(0,0,0,0.88));
    opacity: 0;
    will-change: opacity;
}

.solution-modal-card {
    position: relative;
    width: min(560px, 100%);
    text-align: left;
    padding: 3rem 2.75rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    background: linear-gradient(180deg, rgba(22,22,24,0.96), rgba(10,10,11,0.98));
    box-shadow: 0 40px 120px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05), 0 0 60px rgba(255,255,255,0.06);
    opacity: 0;
    transform: translateY(24px) scale(0.96);
    will-change: transform, opacity;
}

.solution-modal-kicker {
    display: inline-block;
    font-size: 0.74rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.solution-modal-title {
    color: #fff;
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 4vw, 3rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin-bottom: 1.25rem;
}

.solution-modal-detail {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
}

.solution-modal-close {
    position: absolute;
    top: 1.1rem;
    right: 1.3rem;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.3s var(--transition-smooth), background 0.3s ease, border-color 0.3s ease;
}

.solution-modal-close:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.4);
    transform: scale(1.08) rotate(90deg);
}

/* ========================================
   FEATURES
   ======================================== */
.features-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* ── Floating particles behind the grid (disabled on mobile) ── */
.feature-particles {
    position: absolute;
    inset: -2rem 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.feature-particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    opacity: 0;
    will-change: transform, opacity;
}

/* ── Premium interactive feature cards ── */
.feature-card {
    --mx: 50%;
    --my: 50%;
    --glow: 0;
    position: relative;
    z-index: 1;
    cursor: pointer;
    overflow: hidden;
    /* Transform owned by GSAP; only cheap props transition here. */
    transition: border-color 0.4s var(--transition-smooth), box-shadow 0.4s var(--transition-smooth), background 0.4s ease;
    will-change: transform;
}

/* Cursor-following radial spotlight inside the card. */
.feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(
        260px circle at var(--mx) var(--my),
        rgba(255,255,255,0.12),
        rgba(255,255,255,0.03) 40%,
        transparent 64%
    );
    opacity: var(--glow);
    transition: opacity 0.4s ease;
    z-index: 1;
}

/* Slow elegant glowing line that travels around the border on hover. */
.feature-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: conic-gradient(
        from var(--angle, 0deg),
        transparent 0deg,
        rgba(255,255,255,0.85) 40deg,
        transparent 110deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.45s ease;
    z-index: 2;
}

.feature-card:hover,
.feature-card:focus-visible {
    border-color: rgba(255,255,255,0.42);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
    box-shadow: 0 30px 70px rgba(0,0,0,0.5), 0 0 46px rgba(255,255,255,0.08), 0 0 0 1px rgba(255,255,255,0.08);
    outline: none;
}

.feature-card:hover::before,
.feature-card:focus-visible::before {
    --glow: 1;
    opacity: 1;
}

.feature-card:hover::after,
.feature-card:focus-visible::after {
    opacity: 1;
    animation: featureBorderSpin 4s linear infinite;
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes featureBorderSpin {
    to { --angle: 360deg; }
}

.feature-card.is-expanded {
    border-color: rgba(255,255,255,0.5);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.16), 0 0 40px rgba(255,255,255,0.1), 0 30px 70px rgba(0,0,0,0.5);
}

.feature-card h3,
.feature-card > p {
    position: relative;
    z-index: 3;
}

/* Breathing indicator dot, top-right. */
.feature-dot {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 3;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255,255,255,0.5);
    animation: featureDotBreathe 2.8s ease-in-out infinite;
}

@keyframes featureDotBreathe {
    0%, 100% { opacity: 0.55; box-shadow: 0 0 6px rgba(255,255,255,0.4); }
    50%      { opacity: 1;    box-shadow: 0 0 14px rgba(255,255,255,0.85); }
}

/* Click-to-expand extra detail — animated via max-height/opacity. */
.feature-more {
    position: relative;
    z-index: 3;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.45s var(--transition-smooth), opacity 0.4s ease, margin-top 0.45s var(--transition-smooth);
}

.feature-more p {
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.12);
    font-size: 0.96rem;
    color: var(--text-secondary);
}

.feature-card.is-expanded .feature-more {
    max-height: 240px;
    opacity: 1;
    margin-top: 1rem;
}

/* ========================================
   AI ARCHITECTURE (How It Works)
   ======================================== */
.how-it-works {
    position: relative;
    overflow: hidden;
}

.how-it-works::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 38%, rgba(255,255,255,0.07), transparent 42%),
        radial-gradient(circle at 50% 100%, rgba(255,255,255,0.04), transparent 46%);
}

.how-it-works .container { position: relative; z-index: 2; }

/* Floating particle field behind the architecture. */
.arch-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.arch-particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,0.55);
    opacity: 0;
    will-change: transform, opacity;
}

/* ── Architecture grid ── */
.arch {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    align-items: stretch;
    margin-top: 4rem;
}

/* Connector rail sits behind nodes, centered vertically on desktop.
   5 equal cells mirror the node columns; each of the first 4 cells holds a
   line that bridges its node center to the next node center. */
.arch-rail {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
}

.arch-line {
    position: absolute;
    top: 50%;
    /* JS sets left/width per pair; defaults keep it sane before init. */
    height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.06));
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

/* A traveling data pulse on each connector — the continuous data-flow. */
.arch-pulse {
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0.65) 35%, transparent 70%);
    box-shadow: 0 0 14px rgba(255,255,255,0.8);
    opacity: 0;
    will-change: transform, opacity;
}

/* ── Nodes (glassmorphism cards) ── */
/* Arch nodes don't mouse-track the .glass spotlight; suppress it so it doesn't
   flash a stray glow at the card's 0,0 origin on hover. */
.arch-node.glass::before,
.arch-modal-card.glass::before,
.waitlist-modal-card.glass::before { display: none; }

.arch-node {
    --glow: 0;
    position: relative;
    z-index: 2;
    text-align: left;
    padding: 1.6rem 1.5rem;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    cursor: pointer;
    transition: transform 0.4s var(--transition-smooth), border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
    will-change: transform;
}

.arch-node:hover,
.arch-node:focus-visible {
    transform: translateY(-8px);
    border-color: rgba(255,255,255,0.34);
    box-shadow: 0 28px 70px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
    outline: none;
}

/* Active processing / selected glow. */
.arch-node.is-active,
.arch-node.is-processing {
    border-color: rgba(255,255,255,0.7);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.28), 0 0 46px rgba(255,255,255,0.22), 0 28px 70px rgba(0,0,0,0.55);
}

.arch-index {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.4);
}

.arch-node-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.arch-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    box-shadow: 0 0 0 0 rgba(255,255,255,0.5);
    flex-shrink: 0;
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

.arch-node.is-processing .arch-dot,
.arch-node:hover .arch-dot {
    background: #fff;
    box-shadow: 0 0 12px rgba(255,255,255,0.9);
}

.arch-node h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
}

.arch-node-lead {
    font-size: 0.92rem;
    color: var(--text-secondary);
}

.arch-tags {
    list-style: none;
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.arch-tags li {
    position: relative;
    padding-left: 1rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.arch-tags li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
}

/* ── AI centerpiece ── */
.arch-core {
    border-color: rgba(255,255,255,0.22);
    background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
    transform: translateY(-6px) scale(1.04);
    z-index: 3;
}

.arch-core:hover,
.arch-core:focus-visible {
    transform: translateY(-12px) scale(1.05);
}

.arch-core h3 { font-size: 1.7rem; }

.arch-core-glow {
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.18), transparent 62%);
    opacity: 0.9;
    z-index: -1;
    animation: archCorePulse 3.4s ease-in-out infinite;
}

@keyframes archCorePulse {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50%      { opacity: 0.95; transform: scale(1.05); }
}

.arch-badge { margin-bottom: 1.25rem; }

/* ========================================
   ARCHITECTURE MODAL
   ======================================== */
.arch-modal {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    visibility: hidden;
    pointer-events: none;
}

.arch-modal.is-open { visibility: visible; pointer-events: auto; }

.arch-modal-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(20,20,20,0.6), rgba(0,0,0,0.9));
    opacity: 0;
    will-change: opacity;
}

.arch-modal-card {
    position: relative;
    width: min(560px, 100%);
    text-align: left;
    padding: 3rem 2.75rem;
    border-radius: 20px;
    opacity: 0;
    transform: translateY(24px) scale(0.96);
    will-change: transform, opacity;
    box-shadow: 0 40px 120px rgba(0,0,0,0.7), 0 0 60px rgba(255,255,255,0.06);
}

.arch-modal-kicker {
    display: inline-block;
    font-size: 0.74rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.arch-modal-title {
    color: #fff;
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 4vw, 3rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin-bottom: 1.25rem;
}

.arch-modal-detail {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
}

.arch-modal-close {
    position: absolute;
    top: 1.1rem;
    right: 1.3rem;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.3s var(--transition-smooth), background 0.3s ease, border-color 0.3s ease;
}

.arch-modal-close:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.4);
    transform: scale(1.08) rotate(90deg);
}

/* ========================================
   TECH SECTION
   ======================================== */
.tech-list {
    list-style: none;
    margin-top: 3rem;
}

.tech-list li {
    margin-bottom: 2.5rem;
    position: relative;
    padding-left: 2rem;
}

.tech-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    background: var(--accent-primary);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-primary);
}

.tech-list strong {
    font-size: 1.3rem;
    color: #fff;
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.tech-graphic {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.glow-ring {
    position: absolute;
    width: 60%;
    aspect-ratio: 1;
    border: 1px solid var(--accent-primary);
    border-radius: 50%;
    animation: expandRing 4s infinite linear;
    opacity: 0.3;
}

.glow-ring.delay {
    animation-delay: -2s;
}

@keyframes expandRing {
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* ========================================
   TECHNOLOGY SPHERE (3D stack)
   ======================================== */
.tech-sphere {
    --cyan: #38e1ff;
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    aspect-ratio: 1;
    border-radius: 50%;
    isolation: isolate;
}

/* Ambient cyan glow behind the sphere. */
.tech-sphere::before {
    content: '';
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 50% 45%, rgba(56,225,255,0.18), rgba(56,225,255,0.05) 46%, transparent 68%);
    filter: blur(6px);
    z-index: 0;
}

.tech-sphere-canvas {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: pan-y;
}

.tech-sphere-canvas:active { cursor: grabbing; }

.tech-sphere.is-fallback .tech-sphere-canvas { display: none; }

/* Floating tooltip for hovered nodes (overlay, never in flow). */
.tech-tooltip {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    max-width: 240px;
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    border: 1px solid rgba(56,225,255,0.4);
    background: rgba(6,16,22,0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #eafbff;
    font-size: 0.82rem;
    line-height: 1.35;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5), 0 0 18px rgba(56,225,255,0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
    white-space: nowrap;
}

.tech-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tech-tooltip strong {
    display: block;
    color: var(--cyan);
    font-weight: 600;
    font-family: var(--font-body);
}

.tech-tooltip span {
    color: rgba(234,251,255,0.6);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.tech-hint {
    position: absolute;
    z-index: 4;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(234,251,255,0.4);
    pointer-events: none;
    white-space: nowrap;
}

/* Legend below the sphere. */
.tech-legend {
    list-style: none;
    margin: 1.75rem auto 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.4rem;
    max-width: 460px;
}

.tech-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    cursor: default;
    transition: color 0.3s ease;
}

.tech-legend li::before { content: none; }
.tech-legend li:hover { color: #fff; }

.tech-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dot, var(--cyan));
    box-shadow: 0 0 8px var(--dot, rgba(56,225,255,0.8));
    flex-shrink: 0;
}

.tech-legend li[data-layer="core"]    { --dot: #ffffff; }
.tech-legend li[data-layer="sensor"]  { --dot: #38e1ff; }
.tech-legend li[data-layer="control"] { --dot: #5b9dff; }
.tech-legend li[data-layer="power"]   { --dot: #38ffd0; }
.tech-legend li[data-layer="infra"]   { --dot: #8aa0b4; }

/* Fallback (no WebGL / file://) reuses the animated glow rings. */
.tech-sphere-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
    place-items: center;
    border-radius: 50%;
}

.tech-sphere.is-fallback .tech-sphere-fallback { display: grid; }

.tech-sphere-fallback-label {
    position: absolute;
    color: rgba(234,251,255,0.7);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
}

/* ========================================
   MARKET / IMPACT STATS
   Story: Problem → Gap → India → Growth → Opportunity → Response → Stage
   ======================================== */
.market .subtitle {
    margin-top: 1.25rem;
    color: var(--text-secondary);
}

.impact-grid {
    display: grid;
    /* Desktop: 12-col base → 4 cards row 1 (span 3), 3 cards row 2 (span 4) */
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    margin-top: 4rem;
    text-align: left;
}

.impact-card {
    grid-column: span 3;            /* row 1: four cards */
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2.4rem 2.1rem;
    overflow: hidden;
    isolation: isolate;
    min-height: 280px;
}

/* Row 2: three cards, each spanning four of the twelve columns */
.impact-card:nth-child(5),
.impact-card:nth-child(6),
.impact-card:nth-child(7) {
    grid-column: span 4;
}

/* Soft top sheen unique to the impact cards (premium glass accent) */
.impact-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, 0.07), transparent 55%);
    opacity: 0.6;
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.5s var(--transition-smooth);
}

.impact-label {
    align-self: flex-start;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--text-secondary);
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--glass-border);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.02);
    margin-bottom: 1.6rem;
    transition: color 0.4s ease, border-color 0.4s ease;
}

.impact-stat {
    font-family: var(--font-heading);
    font-size: clamp(2.9rem, 4vw, 4rem);
    line-height: 1;
    font-weight: 600;
    margin-bottom: 1rem;
    background: linear-gradient(180deg, #fff 0%, #8a8a8a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transform-origin: left center;
    transition: transform 0.45s var(--transition-smooth);
    will-change: transform;
    font-variant-numeric: tabular-nums;
}

.impact-desc {
    color: var(--text-secondary);
    font-size: 0.98rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.impact-source {
    margin-top: auto;
    font-size: 0.74rem;
    line-height: 1.45;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.42);
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Hover: lift, glow, statistic grows 5%, stronger glass ─────────────── */
.impact-card:hover {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.6),
        0 0 50px rgba(255, 255, 255, 0.07) inset,
        0 0 32px rgba(255, 255, 255, 0.06);
    transform: translateY(-8px);
}

.impact-card:hover::after {
    opacity: 1;
}

.impact-card:hover .impact-stat {
    transform: scale(1.05);
}

.impact-card:hover .impact-label {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.28);
}

/* ── Scroll-reveal initial hidden state ────────────────────────────────
   Only hidden once JS is confirmed (.js-ready). Without JS the cards stay
   fully visible by default, so content is never lost. JS removes the hidden
   state (or skips it) for reduced-motion / mobile and on reveal. */
.js-ready .impact-card {
    opacity: 0;
    transform: translateY(40px);
}

.js-ready .impact-card.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   STAGE / PROGRESS ROADMAP
   ======================================== */
.progress-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;   /* equal-height cards */
    text-align: left;
}

.progress-card {
    --accent: 91, 157, 255;            /* blue accent (rgb) */
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2.75rem;
    overflow: hidden;
    transition: transform 0.45s var(--transition-smooth), box-shadow 0.45s ease, border-color 0.45s ease;
    will-change: transform;
}

/* Animated border highlight that sweeps along the top edge on hover. */
.progress-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent), 0.9), transparent);
    transform: translateX(-100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.progress-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(var(--accent), 0.4);
    box-shadow: 0 36px 80px rgba(0,0,0,0.55), 0 0 46px rgba(var(--accent), 0.16), 0 0 0 1px rgba(var(--accent), 0.18);
}

.progress-card:hover::after {
    opacity: 1;
    animation: progressBorderSweep 1.1s var(--transition-smooth) forwards;
}

@keyframes progressBorderSweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.progress-card-kicker {
    display: inline-block;
    font-size: clamp(1.10rem, 1.4vw, 1.10rem);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(var(--accent), 0.85);
    margin-bottom: 0.9rem;
}

.progress-card-title {
    font-size: clamp(1.95rem, 2.4vw, 2.4rem);
    line-height: 1.05;
    margin-bottom: 2rem;
}

/* ── Left card: vertical timeline ── */
.progress-timeline {
    list-style: none;
    position: relative;
    margin: 0;
    padding-left: 2.25rem;
}

/* The vertical line; scaleY animated in by JS (origin top). */
.progress-timeline::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: linear-gradient(180deg, rgba(var(--accent),0.7), rgba(var(--accent),0.15));
    transform: scaleY(var(--line-scale, 1));
    transform-origin: top center;
}

.progress-step {
    position: relative;
    margin-bottom: 2rem;
}

.progress-step:last-child { margin-bottom: 0; }

.progress-dot {
    position: absolute;
    left: -2.25rem;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(var(--accent), 1);
    box-shadow: 0 0 0 4px rgba(var(--accent), 0.14), 0 0 12px rgba(var(--accent), 0.6);
    transform: translateX(0);
}

/* Sequential pulse driven by a JS-toggled class. */
.progress-dot.is-pulsing {
    animation: progressDotPulse 0.9s ease-out;
}

@keyframes progressDotPulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--accent), 0.5), 0 0 12px rgba(var(--accent), 0.6); }
    70%  { box-shadow: 0 0 0 12px rgba(var(--accent), 0), 0 0 18px rgba(var(--accent), 0.8); }
    100% { box-shadow: 0 0 0 4px rgba(var(--accent), 0.14), 0 0 12px rgba(var(--accent), 0.6); }
}

.progress-step-body strong {
    display: block;
    font-size: 1.2rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 0.35rem;
}

.progress-step-body p {
    font-size: 0.98rem;
    margin: 0;
}

/* ── Right card: future vision ── */
.future-vision {
    --accent: 56, 209, 255;            /* cyan-blue accent for vision */
}

/* Soft blue glow pulse behind the vision card. */
.future-vision::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 80% at 80% 0%, rgba(var(--accent), 0.14), transparent 60%);
    opacity: 0.6;
    animation: visionGlowPulse 5s ease-in-out infinite;
    z-index: 0;
}

@keyframes visionGlowPulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 0.8; }
}

.future-vision > * { position: relative; z-index: 1; }

.vision-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.vision-item {
    position: relative;
    padding-left: 1.75rem;
}

.vision-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(var(--accent), 1);
    box-shadow: 0 0 10px rgba(var(--accent), 0.7);
}

.vision-item strong {
    display: block;
    font-size: 1.15rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 0.3rem;
}

.vision-item p {
    font-size: 0.96rem;
    margin: 0;
}

/* ========================================
   ABOUT US — story + credibility cards
   ======================================== */
.about-head {
    max-width: 820px;
    margin: 0 auto;
}

/* 2-column: story (left) + credibility cards (right). */
.about-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
    margin-top: 3.25rem;
    text-align: left;
}

/* ── LEFT: startup story ── */
.about-story {
    max-width: 500px;
}

.about-story-p {
    margin: 0 0 1.5rem;
    font-size: 1.06rem;
    line-height: 1.75;
    color: var(--text-secondary);
}

.about-story-p:last-child {
    margin-bottom: 0;
}

/* First paragraph reads as the lead statement. */
.about-story-p:first-child {
    font-size: 1.18rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.9);
}

/* ── RIGHT: credibility cards ── */
.about-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.about-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    min-height: 184px;
    padding: 1.75rem 1.6rem;
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.45s var(--transition-smooth),
                box-shadow 0.45s ease,
                border-color 0.45s ease;
}

/* Soft border glow ring (intensifies on hover). */
.about-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 1px;
    background: linear-gradient(140deg, rgba(157,141,244,0.35), rgba(255,255,255,0.04) 45%, rgba(108,92,231,0.25));
    -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.35;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

/* Glass reflection sweep on hover. */
.about-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255,255,255,0.10) 45%,
        rgba(255,255,255,0.16) 50%,
        rgba(255,255,255,0.10) 55%,
        transparent 100%
    );
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

.about-card:hover::before {
    animation: teamSheen 0.9s ease forwards;
}

.about-card-icon {
    font-size: 1.7rem;
    line-height: 1;
    margin-bottom: 1.1rem;
    filter: saturate(0.85);
    transition: transform 0.45s var(--transition-smooth);
}

.about-card-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-secondary);
    margin-bottom: 0.5rem;
}

.about-card-title {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.15;
    color: rgba(255,255,255,0.92);
    margin-bottom: 0.35rem;
    transition: color 0.35s ease, text-shadow 0.35s ease;
}

.about-card-sub {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.about-card:hover {
    transform: translateY(-8px);
    border-color: rgba(157,141,244,0.4);
    box-shadow: 0 24px 50px rgba(0,0,0,0.6),
                0 0 36px rgba(108,92,231,0.18);
}

.about-card:hover::after {
    opacity: 1;
}

.about-card:hover .about-card-title {
    color: #ffffff;
    text-shadow: 0 0 18px rgba(157,141,244,0.4);
}

.about-card:hover .about-card-icon {
    transform: translateY(-3px) scale(1.1);
}

/* ── Leadership sub-header ── */
.team-head {
    max-width: 820px;
    margin: clamp(4rem, 8vw, 6.5rem) auto 0;
}

.team-head-kicker {
    display: inline-block;
    font-size: clamp(0.85rem, 0.8vw + 0.4rem, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-secondary);
    margin-bottom: 1rem;
}

.team-head h3 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 600;
    line-height: 1.1;
    color: var(--text-primary);
}

/* ========================================
   TEAM — leadership cards
   ======================================== */
.team-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 2.25rem;
    text-align: left;
}

/* ── Glowing collaboration line: Vision → Technology → Market → Research.
   Sits behind the cards, animates once when the section reveals. ── */
.team-connector {
    position: absolute;
    top: 92px;                 /* aligns roughly with the icon row */
    left: 7%;
    right: 7%;
    height: 1px;
    pointer-events: none;
    z-index: 0;
}

.team-connector-line {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(
        90deg,
        rgba(157,141,244,0) 0%,
        rgba(157,141,244,0.55) 18%,
        rgba(108,92,231,0.65) 50%,
        rgba(157,141,244,0.55) 82%,
        rgba(157,141,244,0) 100%
    );
    box-shadow: 0 0 14px rgba(108,92,231,0.45);
}

.team-grid.is-revealed .team-connector-line {
    animation: teamConnectorDraw 1.6s var(--transition-smooth) 0.25s forwards;
}

@keyframes teamConnectorDraw {
    to { transform: scaleX(1); }
}

/* ── Premium glass leadership card ── */
.team-member {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;                 /* equal-height cards via stretched grid items */
    padding: 2.25rem 1.9rem 2.1rem;
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.45s var(--transition-smooth),
                box-shadow 0.45s ease,
                border-color 0.45s ease;
}

/* Soft border glow ring (intensifies on hover). */
.team-member::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 1px;
    background: linear-gradient(140deg, rgba(157,141,244,0.35), rgba(255,255,255,0.04) 45%, rgba(108,92,231,0.25));
    -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.35;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

/* Glass reflection sweep — runs across the card on hover. */
.team-member > .team-sheen,
.team-member::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255,255,255,0.10) 45%,
        rgba(255,255,255,0.16) 50%,
        rgba(255,255,255,0.10) 55%,
        transparent 100%
    );
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

.team-member:hover::before {
    animation: teamSheen 0.9s ease forwards;
}

@keyframes teamSheen {
    0%   { left: -60%; opacity: 0; }
    12%  { opacity: 1; }
    100% { left: 130%; opacity: 0; }
}

/* Responsibility icon. */
.team-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1.5rem;
    border-radius: 13px;
    color: var(--accent-secondary);
    background: rgba(108,92,231,0.08);
    border: 1px solid rgba(157,141,244,0.22);
    transition: transform 0.45s var(--transition-smooth),
                color 0.45s ease,
                box-shadow 0.45s ease,
                background 0.45s ease;
}

.team-icon svg {
    width: 26px;
    height: 26px;
}

/* Member name. */
.team-member h4 {
    font-family: var(--font-heading);
    font-size: 1.72rem;
    line-height: 1.15;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    transition: color 0.35s ease, text-shadow 0.35s ease;
}

/* Role chip. */
.team-role {
    display: inline-block;
    margin-top: 0.55rem;
    margin-bottom: 1.1rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-secondary);
}

/* Short bold tagline. */
.team-member .team-tagline {
    margin: 0 0 0.85rem;
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.45;
    color: rgba(255,255,255,0.82);
}

/* Full professional description — pushes equal-height alignment. */
.team-member .team-desc {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ── Hover state ── */
.team-member:hover {
    transform: translateY(-10px);
    border-color: rgba(157,141,244,0.4);
    box-shadow: 0 26px 55px rgba(0,0,0,0.6),
                0 0 38px rgba(108,92,231,0.18);
}

.team-member:hover::after {
    opacity: 1;
}

.team-member:hover h4 {
    color: #ffffff;
    text-shadow: 0 0 18px rgba(157,141,244,0.4);
}

.team-member:hover .team-icon {
    transform: translateY(-3px) scale(1.08);
    color: #ffffff;
    background: rgba(108,92,231,0.16);
    box-shadow: 0 0 22px rgba(108,92,231,0.4);
}

/* ========================================
   FORM
   ======================================== */
.cta-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1.25rem;
}

.form-group {
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 0.55rem;
    color: rgba(255,255,255,0.74);
    font-size: 0.9rem;
}

.optional-label {
    color: rgba(255,255,255,0.46);
    font-weight: 400;
}

.cta-form input {
    width: 100%;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.05);
    color: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
}

.cta-form input:focus {
    border-color: var(--accent-primary);
    background: rgba(255,255,255,0.08);
    box-shadow: 0 0 15px rgba(108,92,231,0.15);
}

.cta-form input[aria-invalid="true"] {
    border-color: rgba(248,113,113,0.8);
}

.field-error {
    display: block;
    min-height: 1.1rem;
    margin-top: 0.42rem;
    color: #fca5a5;
    font-size: 0.82rem;
}

.honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.success-msg,
.error-msg {
    display: none;
}

.success-msg {
    color: #86efac;
    font-size: 0.95rem;
    font-weight: 500;
}

.error-msg {
    color: #fca5a5;
    font-size: 0.95rem;
}

.success-msg.is-visible,
.error-msg.is-visible {
    display: block;
    margin-top: 0.25rem;
}

/* ========================================
   WAITLIST MODAL
   ======================================== */
.waitlist-modal {
    position: fixed;
    inset: 0;
    z-index: 11500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    visibility: hidden;
    pointer-events: none;
}

.waitlist-modal.is-open {
    visibility: visible;
    pointer-events: auto;
}

.waitlist-modal-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(20,20,22,0.6), rgba(0,0,0,0.9));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    will-change: opacity;
}

.waitlist-modal-card {
    position: relative;
    z-index: 1;
    width: min(480px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    text-align: left;
    padding: 2.75rem 2.5rem;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 40px 120px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05), 0 0 60px rgba(255,255,255,0.06);
    opacity: 0;
    transform: scale(0.95);
    will-change: transform, opacity;
}

.waitlist-modal-title {
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 3.4vw, 2.7rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: #fff;
    margin-bottom: 0.75rem;
}

.waitlist-modal-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.waitlist-modal .cta-form {
    margin-top: 0;
}

.waitlist-modal-close {
    position: absolute;
    top: 1.1rem;
    right: 1.2rem;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.3s var(--transition-smooth), background 0.3s ease, border-color 0.3s ease;
}

.waitlist-modal-close:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.4);
    transform: scale(1.08) rotate(90deg);
}

/* ========================================
   FOOTER CTA
   ======================================== */
.footer-cta {
    position: relative;
    padding: 8rem 0 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(108,92,231,0.08), transparent 32rem),
        linear-gradient(180deg, rgba(8,8,8,0) 0%, #0a0a0a 68%, #0a0a0a 100%);
    overflow: hidden;
}

.footer-cta::before {
    content: "";
    position: absolute;
    inset: auto 8% -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
    opacity: 0.7;
}

.footer-cta-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    padding: 3rem;
    border: 1px solid rgba(255,255,255,0.14);
    border-bottom: 0;
    border-radius: 28px 28px 0 0;
    background:
        linear-gradient(135deg, rgba(108,92,231,0.08), rgba(255,255,255,0.025)),
        rgba(255,255,255,0.035);
    box-shadow:
        0 -18px 70px rgba(108,92,231,0.045),
        inset 0 1px 0 rgba(255,255,255,0.18);
    backdrop-filter: blur(22px);
}

.footer-cta-kicker {
    margin-bottom: 0.85rem;
    color: rgba(255,255,255,0.62);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.footer-cta h2 {
    margin-bottom: 1rem;
    font-size: clamp(2.15rem, 5vw, 4.5rem);
    line-height: 0.95;
}

.footer-cta p {
    max-width: 680px;
    color: rgba(255,255,255,0.68);
}

.footer-cta-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ========================================
   FOOTER
   ======================================== */
.site-footer {
    position: relative;
    padding: 0 0 3rem;
    background: linear-gradient(
        180deg,
        #0a0a0a 0%,
        #000000 100%
    );
    overflow: hidden;
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 0%, rgba(108,92,231,0.08), transparent 22rem),
        radial-gradient(circle at 82% 20%, rgba(255,255,255,0.04), transparent 18rem);
}

.footer-shell {
    position: relative;
    padding: 4rem 3rem 2rem;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 0 0 28px 28px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.072), rgba(255,255,255,0.018)),
        rgba(255,255,255,0.025);
    box-shadow:
        0 28px 90px rgba(0,0,0,0.58),
        0 0 80px rgba(108,92,231,0.03),
        inset 0 1px 0 rgba(255,255,255,0.12);
    backdrop-filter: blur(24px);
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.55fr) repeat(3, minmax(140px, 1fr));
    gap: 3.5rem;
    align-items: start;
}

.footer-brand {
    max-width: 360px;
}

.footer-logo {
    display: inline-flex;
    margin-bottom: 1.5rem;
}

.footer-logo-svg {
    width: 190px;
    height: auto;
    display: block;
}

.footer-logo:hover .footer-logo-svg {
    filter: drop-shadow(0 0 28px rgba(108,92,231,0.3));
    transform: translateY(-2px);
}

.footer-brand h2,
.footer-col h3 {
    color: #fff;
    font-family: var(--font-body);
}

.footer-brand h2 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    letter-spacing: 0.01em;
}

.footer-brand p {
    color: rgba(255,255,255,0.62);
    font-size: 0.96rem;
    line-height: 1.8;
}

.footer-col h3 {
    margin-bottom: 1.2rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.footer-col ul {
    display: grid;
    gap: 0.82rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-col a {
    position: relative;
    display: inline-flex;
    color: rgba(255,255,255,0.58);
    font-size: 0.95rem;
    transition: color 0.28s ease, transform 0.28s ease;
}

.footer-col a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.22rem;
    height: 1px;
    background: var(--accent-primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.28s ease;
}

.footer-col a:hover {
    color: #fff;
    transform: translateX(4px);
}

.footer-col a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.35rem;
}

.social-links a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    background: rgba(255,255,255,0.045);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.11);
    color: rgba(255,255,255,0.72);
}

.social-links a::after {
    display: none;
}

.social-links svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.social-links a:hover {
    border-color: var(--accent-primary);
    background: rgba(108,92,231,0.15);
    box-shadow: 0 12px 32px rgba(108,92,231,0.15);
    transform: translateY(-5px);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-bottom p {
    color: rgba(255,255,255,0.48);
    font-size: 0.88rem;
    line-height: 1.7;
}

.footer-bottom p:last-child {
    text-align: right;
}

/* ========================================
   ANIMATIONS
   ======================================== */
.fade-up,
.fade-left,
.fade-right,
.fade-in,
.reveal-text {
    opacity: 0;
    will-change: transform, opacity, filter;
}

.fade-up,
.fade-in {
    filter: blur(8px);
    transform: scale(0.95) translateY(40px);
}

.reveal-text {
    filter: blur(8px);
    transform: translateY(20px);
}

.char {
    display: inline-block;
    opacity: 0;
    filter: blur(4px);
    transform: translateY(20px);
    will-change: transform, opacity, filter;
}

/* ========================================
   RESPONSIVE
   ======================================== */
/* Narrow-desktop polish — kept at >=1024px so it never affects tablet.
   (Desktop visuals unchanged: this still applies across 1024–1100px as before.) */
@media (max-width: 1100px) and (min-width: 1024px) {
    .nav-links {
        gap: 1.5rem;
    }

    .hero-container {
        gap: 2.5rem;
    }

    .hero-visual {
        height: 520px;
    }

    .impact-grid {
        gap: 1rem;
    }

    .impact-card {
        padding: 2rem 1.75rem;
    }

    .impact-stat {
        font-size: clamp(2.6rem, 3.4vw, 3.2rem);
    }
}

/* TABLET (768px–1023px) and down — single-column hero/split, 2-col grids.
   Desktop (>=1024px) is untouched. */
@media (max-width: 1023px) {
    h1 {
        font-size: clamp(3rem, 8vw, 4.8rem);
    }

    h2 {
        font-size: clamp(2.35rem, 6vw, 3.6rem);
    }

    .solution h2,
    .tech h2,
    .stage > .container > h2,
    .team h2 {
        font-size: clamp(2.5rem, 6.4vw, 3.85rem);
        line-height: 1.03;
        margin-bottom: 2.05rem;
    }

    .future-vision h3 {
        font-size: 1.94rem;
        line-height: 1.08;
    }

    p,
    .subtitle {
        font-size: 1.05rem;
    }

    .section {
        padding: 6rem 0;
    }

    .hero-container,
    .split-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }

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

    .hero {
        min-height: auto;
        padding: 8rem 0 4rem;
    }

    .hero-container {
        gap: 3rem;
    }

    .hero-product-logo {
        margin-left: auto;
        margin-right: auto;
        max-width: 230px;
    }

    .hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .solution-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .hero-visual {
        height: auto;
        min-height: 360px;
        order: initial;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }

    .hero-visual img {
        max-width: min(88vw, 620px);
        max-height: 420px;
    }

    /* In-flow model on tablet too (not pinned like the desktop fixed stage). */
    .product-stage {
        position: relative;
        inset: auto;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 360px;
    }

    .product-orbit {
        width: min(100%, 560px);
    }

    .product-canvas {
        width: min(100%, 560px);
        height: min(58vh, 420px);
    }

    .product-fallback {
        width: min(88vw, 520px);
        max-height: 390px;
    }

    .problem-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }

    /* Impact grid → 2 columns on tablet (reset the desktop 12-col spans). */
    .impact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
        margin-top: 3rem;
    }

    .impact-card,
    .impact-card:nth-child(5),
    .impact-card:nth-child(6),
    .impact-card:nth-child(7) {
        grid-column: span 1;
        min-height: 260px;
    }

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

    /* Connector line only makes sense across a single row of cards. */
    .team-connector {
        display: none;
    }

    /* About: story stacks above the credibility cards. */
    .about-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        align-items: start;
    }

    .about-story {
        max-width: 640px;
        margin: 0 auto;
        text-align: center;
    }

    /* Architecture stacks vertically; rail becomes a centered spine. */
    .arch {
        grid-template-columns: 1fr;
        gap: 2.25rem;
        margin-top: 2.5rem;
    }

    .arch-core {
        transform: none;
    }

    .arch-core:hover,
    .arch-core:focus-visible {
        transform: translateY(-6px);
    }

    .arch-node:hover {
        transform: translateY(-4px);
    }

    .tech-list li {
        text-align: left;
    }

    .footer-cta-panel {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .footer-brand {
        max-width: none;
    }
}

@media (max-width: 768px) {
    body.mobile-menu-open {
        overflow: hidden;
    }

    .container {
        padding: 0 1.25rem;
    }

    /* Loader brand must not overflow narrow viewports. */
    .loader-brand {
        font-size: clamp(1.8rem, 8vw, 2.6rem);
        letter-spacing: 0.03em;
        text-align: center;
        padding: 0 1rem;
        line-height: 1.1;
    }

    .loader-title,
    .loader-percent {
        text-align: center;
        padding: 0 1rem;
    }

    .navbar {
        height: 68px;
        background: rgba(0,0,0,0.66);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .nav-container {
        padding: 0 1rem;
    }

    .logo {
        padding-left: 0;
    }

    .nav-logo-svg {
        height: 43px;
        max-width: 132px;
    }

    .nav-links {
        display: none;
    }

    .mobile-menu-toggle {
        position: relative;
        z-index: 1002;
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 50%;
        background: rgba(255,255,255,0.055);
        color: #fff;
        transition: background 0.3s ease;
    }

    .mobile-menu-toggle:hover {
        background: rgba(255,255,255,0.1);
    }

    .mobile-menu-toggle span {
        display: block;
        width: 18px;
        height: 2px;
        grid-area: 1 / 1;
        border-radius: 99px;
        background: currentColor;
        transition: transform 0.28s ease;
    }

    .mobile-menu-toggle span:first-child {
        transform: translateY(-4px);
    }

    .mobile-menu-toggle span:last-child {
        transform: translateY(4px);
    }

    .mobile-menu-open .mobile-menu-toggle span:first-child {
        transform: rotate(45deg);
    }

    .mobile-menu-open .mobile-menu-toggle span:last-child {
        transform: rotate(-45deg);
    }

    .mobile-menu {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: block;
        padding: 5.25rem 1rem 1rem;
        pointer-events: none;
        opacity: 0;
        background: rgba(0,0,0,0.68);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        transition: opacity 0.28s ease;
    }

    .mobile-menu-open .mobile-menu {
        pointer-events: auto;
        opacity: 1;
    }

    .mobile-menu-panel {
        display: grid;
        gap: 0.35rem;
        padding: 1rem;
        border: 1px solid rgba(255,255,255,0.13);
        border-radius: 24px;
        background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025));
        box-shadow: 0 24px 80px rgba(0,0,0,0.55);
        transform: translateY(-12px) scale(0.98);
        transition: transform 0.28s ease;
    }

    .mobile-menu-open .mobile-menu-panel {
        transform: translateY(0) scale(1);
    }

    .mobile-menu-panel a {
        min-height: 54px;
        display: flex;
        align-items: center;
        padding: 0 1rem;
        border-radius: 16px;
        color: #fff;
        font-size: 1.3rem;
        font-weight: 600;
        transition: background 0.3s ease;
    }

    .mobile-menu-panel a:hover,
    .mobile-menu-panel a:focus-visible {
        background: rgba(108,92,231,0.15);
    }

    h1 {
        font-size: clamp(2.7rem, 12vw, 4rem);
        line-height: 0.98;
        letter-spacing: -0.035em;
    }

    h2 {
        font-size: clamp(2.15rem, 10vw, 3.1rem);
        line-height: 1;
    }

    .solution h2,
    .tech h2,
    .stage > .container > h2,
    .team h2 {
        font-size: clamp(2.28rem, 10.5vw, 3.3rem);
        line-height: 1;
        margin-bottom: 2rem;
    }

    .future-vision h3 {
        font-size: 1.55rem;
        line-height: 1.1;
    }

    h3 {
        font-size: 1.45rem;
    }

    p,
    .subtitle {
        font-size: 1rem;
        line-height: 1.68;
    }

    .section {
        padding: 4.8rem 0;
    }

    .badge {
        font-size: 0.85rem;
        letter-spacing: 0.16em;
    }

    .hero {
        padding: 7.5rem 0 3.2rem;
    }

    .hero-container {
        gap: 2rem;
    }

    .hero-actions {
        width: 100%;
        flex-direction: column;
        gap: 0.9rem;
        margin-top: 2rem;
    }

    .btn {
        width: 100%;
        min-height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.95rem 1.25rem;
    }

    .hero-product-logo {
        max-width: min(74vw, 220px);
        margin-bottom: 1.4rem;
        border-radius: 14px;
    }

    .hero-visual {
        min-height: 300px;
        margin-top: 0.5rem;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .hero-visual img {
        max-width: min(98vw, 430px);
        max-height: 300px;
    }

    /* On mobile the model must flow in document order (after the buttons),
       not stay pinned to the viewport like the desktop fixed stage. */
    .product-stage {
        position: relative;
        inset: auto;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 300px;
    }

    .product-orbit {
        width: min(100%, 420px);
    }

    .product-canvas {
        width: min(100%, 420px);
        height: min(42vh, 290px);
        filter: drop-shadow(0 24px 24px rgba(0,0,0,0.62));
    }

    .product-fallback {
        width: min(94vw, 390px);
        max-height: 280px;
    }

    .stage-backdrop,
    .stage-spotlight {
        width: 96%;
        height: 96%;
        filter: blur(14px);
    }

    .stage-depth {
        display: none;
    }

    .product-shadow {
        bottom: 4%;
        width: 70%;
        height: 42px;
        filter: blur(13px);
    }

    .product-reflection {
        width: 62%;
        height: 64px;
    }

    .problem-grid,
    .features-grid,
    .team-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Credibility cards → single column on mobile. */
    .about-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Impact grid → single column on mobile. */
    .impact-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 2.5rem;
    }

    .impact-card,
    .impact-card:nth-child(5),
    .impact-card:nth-child(6),
    .impact-card:nth-child(7) {
        grid-column: span 1;
        min-height: 0;
        padding: 1.6rem 1.5rem;
    }

    .impact-stat {
        font-size: 2.7rem;
    }

    /* Touch: no lift/scale chrome (matches the rest of the mobile theme). */
    .impact-card:hover {
        transform: none;
        box-shadow: none;
    }

    .impact-card:hover .impact-stat {
        transform: none;
    }

    /* Feature grid on mobile: no particles or hover chrome, keep tap-to-expand. */
    .feature-particles {
        display: none;
    }

    .feature-card::before,
    .feature-card::after {
        display: none;
    }

    .feature-card:hover {
        transform: none;
    }

    .problem-grid {
        margin-top: 2.5rem;
    }

    .problem-item {
        padding: 1.25rem 1.25rem 1.25rem 1.4rem;
        border-left-color: rgba(255,255,255,0.18);
    }

    .problem-item .stat {
        font-size: 2.45rem;
    }

    .glass {
        padding: 1.35rem;
        border-radius: 14px;
        transform-style: flat;
        will-change: auto;
    }

    .glass:hover {
        transform: none;
    }

    .solution-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 2.5rem;
    }

    .solution-item {
        min-height: auto;
        padding: 1.35rem 1.35rem 2.6rem;
    }

    .solution-item:hover {
        transform: none !important;
    }

    /* No tilt/spotlight chrome on touch; keep the click-to-expand affordance. */
    .solution-cue {
        left: 1.35rem;
        bottom: 1rem;
        opacity: 0.7;
        transform: none;
    }

    .solution-modal-card {
        padding: 2.25rem 1.5rem;
    }

    .tech-graphic {
        max-width: 260px;
        margin: 0 auto;
    }

    .tech-list {
        margin-top: 2rem;
    }

    .tech-list li {
        margin-bottom: 1.6rem;
        padding-left: 1.35rem;
    }

    .tech-list strong {
        font-size: 1.08rem;
    }

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

    .progress-card {
        padding: 2rem 1.6rem;
    }

    .progress-card:hover {
        transform: translateY(-4px);
    }

    .cta-form input {
        min-height: 52px;
        padding: 0.95rem 1rem;
        font-size: 1rem;
    }

    .waitlist-modal-card {
        padding: 2rem 1.5rem;
        max-height: 92vh;
    }

    .waitlist-modal-title {
        font-size: clamp(1.9rem, 8vw, 2.4rem);
    }

    .footer-cta {
        padding-top: 5rem;
    }

    .footer-cta-panel,
    .footer-shell {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 3rem;
    }

    .footer-bottom p:last-child {
        text-align: left;
    }
}

@media (max-width: 420px) {
    .container {
        padding: 0 1rem;
    }

    h1 {
        font-size: clamp(2.38rem, 12.5vw, 3.15rem);
    }

    h2 {
        font-size: clamp(1.95rem, 10.5vw, 2.65rem);
    }

    .hero-product-logo {
        max-width: 190px;
    }

    .hero-visual {
        min-height: 230px;
    }

    .hero-visual img {
        max-height: 250px;
    }

    .product-canvas {
        height: min(38vh, 245px);
    }

    .footer-cta-panel,
    .footer-shell {
        border-radius: 20px;
    }
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce),
(max-width: 768px) {
    .fade-up,
    .fade-left,
    .fade-right,
    .fade-in,
    .reveal-text {
        filter: none;
    }

    .glow-ring {
        animation-duration: 8s;
    }

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