/* =========================================
   MEI+ Fluid Premium CSS Styles
   Theme: Pure Black, Grey, Soft Silver Gradients
   Inspired by: Cloudinary, Abstract Fluid Web Design
   ========================================= */

:root {
    --clr-bg-deep: #000000;
    --clr-bg-alt: #0a0a0c;
    --clr-text-main: #f0f0f5;
    --clr-text-muted: #888c96;
    
    --gradient-silver: linear-gradient(135deg, #ffffff 0%, #a0a5ad 100%);
    --gradient-dark-silver: linear-gradient(135deg, #495057 0%, #212529 100%);
    
    --font-heading: 'Sora', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    
    --transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

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

img, video, canvas, iframe {
    max-width: 100%;
    height: auto;
}

html {
    scroll-behavior: smooth;
    background-color: var(--clr-bg-deep);
    overflow-x: hidden;
    overflow-x: clip;
    overscroll-behavior-x: none;
    width: 100%;
    max-width: 100vw;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Typography Base */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #fff;
}

body {
    font-family: var(--font-body);
    color: var(--clr-text-main);
    background-color: var(--clr-bg-deep);
    line-height: 1.7;
    position: relative;
    font-weight: 400;
    overflow-x: hidden;
    overflow-x: clip;
    overscroll-behavior-x: none;
    width: 100%;
    max-width: 100vw;
}

.gradient-text {
    background: var(--gradient-silver);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.mega-title {
    font-size: clamp(3.5rem, 8vw, 6.5rem);
    margin-bottom: 2rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.95;
}

.subtitle {
    font-size: 1.3rem;
    color: var(--clr-text-muted);
    max-width: 650px;
    margin-bottom: 3rem;
    font-weight: 400;
    line-height: 1.6;
    text-align: justify;
    text-align-last: left;
}

.hero-tagline {
    font-size: 1.35rem;
    font-weight: 500;
    color: #8b9bb4;
    max-width: 560px;
    letter-spacing: 0.01em;
    text-align: left;
    text-align-last: left;
}

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

ul {
    list-style: none;
}

/* Ambient Abstract Backgrounds */
.ambient-glow-wrapper {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

.ambient-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.12;
    pointer-events: none;
    animation: drift 30s infinite ease-in-out alternate;
}

.glow-1 { width: 50vw; height: 50vw; background: #ffffff; top: -20%; left: -10%; }
.glow-2 { width: 60vw; height: 50vw; background: #6c757d; bottom: -20%; right: -20%; animation-delay: -10s; }
.glow-3 { width: 40vw; height: 40vw; background: #495057; top: 30%; left: 40%; animation-delay: -20s; }

@keyframes drift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(10vw, 5vh) scale(1.1); }
}

/* UI Elements */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.8rem;
    border-radius: 100px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    border: none;
}

.btn-large {
    padding: 1.2rem 2.5rem;
    font-size: 1.15rem;
}

.btn-primary {
    background: #fff;
    color: #000;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255,255,255,0.2);
    background: #f8f9fa;
}

.premium-social-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition);
}
.premium-social-link:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}
.social-icon-box {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    font-size: 1.2rem;
}
.social-text span { display: block; font-size: 0.75rem; color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: 1px; }
.social-text strong { display: block; font-size: 0.95rem; color: #fff; }

.bare-link {
    font-weight: 500;
    color: var(--clr-text-muted);
    position: relative;
}
.bare-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: #fff;
    transition: var(--transition);
}
.bare-link:hover {
    color: #fff;
}
.bare-link:hover::after {
    width: 100%;
}

/* Layout Utilities */
.fluid-section {
    padding: 10rem 0;
    position: relative;
}

.content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5vw;
}

/* Top Banner */
.top-banner {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    text-align: center;
    padding: 0.8rem;
    font-size: 0.9rem;
    position: sticky;
    top: 0;
    z-index: 1001;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.top-banner p { color: #d0d4dc; }
.top-banner i { color: #fff; margin-right: 5px; }
.banner-link { font-weight: 600; color: #fff; text-decoration: underline; margin-left: 10px; }

/* Navbar */
.navbar {
    position: sticky;
    top: 2.85rem;
    width: 100%;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.2rem 5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo { display:flex; align-items:center; gap: 0.6rem; }
.dummy-logo { width: 28px; height: 28px; }
.logo-text { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; color: #fff; letter-spacing: -0.5px; }
.logo .plus { color: var(--clr-text-muted); }

.nav-links { display: flex; gap: 2.5rem; }
.nav-links li a { font-size: 0.95rem; font-weight: 500; color: var(--clr-text-muted); transition: var(--transition); }
.nav-links li a:hover { color: #fff; }

.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

/* Hero Section */
.hero {
    min-height: 90vh;
    display: flex;
    align-items: center;
    padding-top: 5rem;
}

.fluid-hero-wrapper {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: center;
    width: 100%;
}

.pill-badge {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 2rem;
    color: var(--clr-text-muted);
    text-transform: uppercase;
}

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

.hero-abstract::before {
    content: '';
    position: absolute;
    inset: -15%;
    background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 45%, transparent 72%);
    filter: blur(45px);
    z-index: 0;
    pointer-events: none;
}

.abstract-orb {
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffffff, #6c757d, #000);
    box-shadow: 0 0 80px rgba(255,255,255,0.1);
    animation: pulseOrb 8s infinite alternate ease-in-out;
}

.custom-intro-anim {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
    object-fit: cover;
    z-index: 1;
    -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 78%);
    mask-image: radial-gradient(circle, #000 55%, transparent 78%);
}

.abstract-ring {
    position: absolute;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,0.2);
    animation: rotateRing 40s linear infinite;
}

@keyframes pulseOrb { 0% { transform: scale(0.9); } 100% { transform: scale(1.1); } }
@keyframes rotateRing { 100% { transform: rotate(360deg); } }

/* Scales Marquee Showcase */
.scales-showcase {
    padding: 6rem 0;
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.03);
    background: rgba(10,10,12,0.4);
}

.scales-header h2 {
    text-align: center;
    font-size: 1.5rem;
    color: var(--clr-text-muted);
    font-weight: 500;
    margin-bottom: 3rem;
}

.marquee-wrapper { display: flex; flex-direction: column; gap: 1.5rem; position: relative; }
.marquee-wrapper::before, .marquee-wrapper::after {
    content: ''; position: absolute; top: 0; width: 15vw; height: 100%; z-index: 2; pointer-events: none;
}
.marquee-wrapper::before { left: 0; background: linear-gradient(to right, var(--clr-bg-deep) 0%, transparent 100%); }
.marquee-wrapper::after { right: 0; background: linear-gradient(to left, var(--clr-bg-deep) 0%, transparent 100%); }

.marquee { display: flex; overflow: hidden; user-select: none; gap: 1.5rem; }
.marquee-content { display: flex; gap: 1.5rem; min-width: 100%; flex-shrink: 0; align-items: center; animation: scroll var(--speed, 40s) linear infinite; }

.marquee-right .marquee-content { animation-direction: reverse; }
.marquee-left .marquee-content { animation-direction: normal; display: flex; gap: 1rem; padding-right: 1rem; }

/* Counter Highlight */
.counter-highlight { font-size: 1.8em; text-shadow: 0 0 35px rgba(255,255,255,0.6); display: inline-block; font-weight: 800; min-width: 15px; color: #fff; transform: translateY(3px); }
.marquee-slow .marquee-content { animation-duration: 50s; }
.marquee-wrapper:hover .marquee-content { animation-play-state: paused; }

.marquee span {
    font-size: 1rem;
    color: #adb5bd;
    white-space: nowrap;
    font-weight: 500;
    transition: var(--transition);
    padding: 0.8rem 1.6rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0; /* Point-edged rectangle */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
}
.marquee span:hover { 
    color: #fff; 
    background: rgba(255, 255, 255, 0.1); 
    border-color: rgba(255,255,255,0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

@keyframes scroll-left { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 1.5rem)); } }
@keyframes scroll-right { from { transform: translateX(calc(-100% - 1.5rem)); } to { transform: translateX(0); } }


/* Fluid About Section Design */
.fluid-split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 8vw;
    align-items: center;
    position: relative;
    z-index: 10;
}


/* Modern Redesign Sections */
.redesign-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: flex-start;
}

.section-tag {
    color: #adb5bd;
    letter-spacing: 3px;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.mega-heading {
    font-size: clamp(2.5rem, 5vw, 3.2rem);
    line-height: 1.1;
    margin-bottom: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.modern-text-block {
    margin-bottom: 3rem;
}

.lead-text {
    font-size: 1.15rem;
    color: #fff;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-weight: 500;
    text-align: justify;
}

.highlight-quote {
    font-size: 1.25rem;
    color: #fff;
    font-weight: 600;
    font-family: var(--font-heading);
    letter-spacing: -0.01em;
    margin-top: 2rem;
}

.secondary-text {
    font-size: 1rem;
    color: #adb5bd;
    line-height: 1.7;
    text-align: justify;
}

.value-strip {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.value-item {
    display: flex;
    flex-direction: column;
}

.value-num {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    font-family: var(--font-heading);
}

.value-label {
    font-size: 0.8rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.value-divider {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.1);
}

/* Impact Grid */
.modern-subheading {
    font-size: clamp(2.5rem, 5vw, 3.2rem);
    margin-bottom: 3rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

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

.impact-tile {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 2rem;
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}

.impact-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(255,255,255,0.05), transparent);
    opacity: 0;
    transition: opacity 0.4s;
}

.impact-tile:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.impact-tile:hover::before {
    opacity: 1;
}

.tile-icon {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 1.5rem;
    transition: transform 0.4s;
}

.impact-tile:hover .tile-icon {
    transform: scale(1.1) rotate(5deg);
    background: #fff;
    color: #000;
}

.tile-info h4 {
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
    color: #fff;
}

.tile-info p {
    font-size: 0.95rem;
    color: #868e96;
    line-height: 1.6;
    text-align: justify;
    text-align-last: left;
}

@media (max-width: 1100px) {
    .redesign-split {
        grid-template-columns: 1fr;
        gap: 5rem;
    }
}

@media (max-width: 600px) {
    .impact-grid {
        grid-template-columns: 1fr;
    }
}
    transform: translateX(0); opacity: 1; color: var(--accent, #fff);
}


/* Highly Interactive Features Section */
.center-heading { text-align: center; font-size: clamp(3rem, 6vw, 4.5rem); margin-bottom: 5rem; }

.interactive-features {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 5vw;
    align-items: center;
    min-height: 500px;
}

.feature-tabs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feature-tab {
    padding: 1.5rem 2rem;
    border-radius: 16px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    gap: 1.5rem;
    opacity: 0.6;
    position: relative;
    overflow: hidden;
}

.feature-tab::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    height: 70%;
    width: 3px;
    background: #fff;
    box-shadow: 0 0 10px #fff;
    transform: scaleY(0);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transform-origin: center;
    border-radius: 5px;
}

.feature-tab.active::before {
    transform: scaleY(1);
}

.feature-tab:hover {
    opacity: 0.9;
    background: rgba(255,255,255,0.02);
}

.feature-tab.active {
    opacity: 1;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, transparent 100%);
    border: 1px solid rgba(255,255,255,0.05);
    border-left: none;
}

.tab-icon {
    font-size: 1.8rem;
    color: #fff;
    margin-top: 5px;
}

.tab-text h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.tab-text p { color: var(--clr-text-muted); font-size: 0.95rem; line-height: 1.4; }

.feature-display {
    position: relative;
    height: 100%;
    min-height: 400px;
    background: transparent;
    border: none;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-scene {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-scene.active-scene {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Premium Mockups Foundation */
.premium-mockup {
    width: 75%;
    background: rgba(15, 15, 18, 0.95);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1);
    backdrop-filter: blur(20px);
    overflow: hidden;
    color: #e2e8f0;
}

.mockup-header {
    background: rgba(255,255,255,0.03);
    padding: 0.8rem 1rem;
    display: flex;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.r { background: #ff5f56; }
.dot.y { background: #ffbd2e; }
.dot.g { background: #27c93f; }

.mockup-body, .center-mockup, .align-left { padding: 2rem; }
.center-mockup { display: flex; justify-content: center; align-items: center; }

/* Scale UI (PHQ-9) */
.question-tag { font-family:var(--font-heading); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--clr-text-muted); margin-bottom: 0.5rem; }
.mockup-q { font-size: 1.25rem; font-weight: 500; margin-bottom: 1.5rem; color: #fff; }
.options-grid { display: flex; flex-direction: column; gap: 0.8rem; }
.option-btn { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 0.8rem 1.2rem; border-radius: 8px; cursor: pointer; transition: var(--transition); }
.option-btn:hover { background: rgba(255,255,255,0.08); }
.active-opt { background: #fff !important; color: #000; border-color: #fff; box-shadow: 0 4px 15px rgba(255,255,255,0.2); transform: translateX(5px); font-weight: 600; }

/* Severity Dashboard UI */
.severity-layout { display: flex; align-items: center; gap: 2.5rem; }
.circular-chart { display: block; margin: 0 auto; max-width: 140px; max-height: 140px; }
.circle-bg { fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 2.5; }
.circle { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke: #ffbd2e; animation: progress 2s ease-out forwards; }
@keyframes progress { 0% { stroke-dasharray: 0 100; } }
.percentage { fill: #fff; font-family: var(--font-heading); font-size: 0.4rem; font-weight: 700; text-anchor: middle; }
.severity-info h4 { font-size: 1.4rem; margin-bottom: 0.8rem; color: #fff; }
.clinical-tag { background: rgba(255, 189, 46, 0.1); color: #ffbd2e; border: 1px solid rgba(255, 189, 46, 0.3); padding: 0.4rem 1rem; border-radius: 100px; font-size: 0.85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

/* MSE Report UI */
.doc-header { font-family: "Courier New", monospace; letter-spacing: 2px; color: #fff; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem; margin-bottom: 2rem; font-weight: bold; }
.doc-group { margin-bottom: 1.5rem; }
.doc-line { height: 10px; background: rgba(255,255,255,0.08); border-radius: 4px; margin-bottom: 0.8rem; }
.doc-line.full { width: 100%; }
.doc-line.mid { width: 80%; }
.doc-line.short { width: 40%; }
.verified-stamp { margin-top: 2.5rem; display: inline-flex; align-items: center; gap: 0.8rem; background: rgba(39, 201, 63, 0.1); color: #27c93f; border: 1px solid rgba(39, 201, 63, 0.3); padding: 0.8rem 1.5rem; border-radius: 8px; font-weight: 600; box-shadow: 0 5px 20px rgba(39, 201, 63, 0.1); }
.verified-stamp i { font-size: 1.2rem; }

/* Patient Journey UI */
.patient-row { display: flex; align-items: center; gap: 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 1.5rem; margin-bottom: 2rem; }
.p-avatar { width: 50px; height: 50px; border-radius: 50%; background: #fff; color: #000; display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: var(--font-heading); font-size: 1.2rem; }
.p-info h5 { margin: 0; font-size: 1.1rem; color: #fff; }
.p-info span { color: var(--clr-text-muted); font-size: 0.85rem; }
.p-status { margin-left: auto; background: rgba(255,255,255,0.05); padding: 0.3rem 0.8rem; border-radius: 100px; font-size: 0.8rem; border: 1px solid rgba(255,255,255,0.1); }
.journey-tracker { display: flex; align-items: center; justify-content: space-between; }
.tracker-item { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; z-index: 2; position: relative; }
.track-dot { width: 26px; height: 26px; border-radius: 50%; background: #0f0f12; border: 2px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: #000; transition: var(--transition); }
.active-track .track-dot { background: #fff; border-color: #fff; }
.tracker-item span { font-size: 0.85rem; color: var(--clr-text-muted); font-weight: 500; white-space: nowrap; }
.highlight-track .track-dot { border-color: #fff; }
.highlight-track span { color: #fff; font-weight: 600; }
.tracker-line { flex: 1; height: 2px; background: rgba(255,255,255,0.1); margin: -20px -20px 0; z-index: 1; }
.active-line { background: #fff; }
.pulse-dot { position: relative; }
.pulse-dot::after { content: ''; position: absolute; inset: -8px; border: 2px solid rgba(255,255,255,0.4); border-radius: 50%; animation: pulse-ring 2s infinite cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 1; border-width: 2px; } 100% { transform: scale(1.6); opacity: 0; border-width: 0; } }

/* Test List UI */
.test-list { display: flex; flex-direction: column; gap: 1rem; width: 100%; }
.test-item { display: flex; align-items: center; gap: 1.2rem; background: rgba(255,255,255,0.03); padding: 1rem 1.2rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); transition: var(--transition); cursor: pointer; }
.test-item:hover { background: rgba(255,255,255,0.05); }
.active-test { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.08); transform: translateX(10px); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
.t-icon { font-size: 1.5rem; color: #adb5bd; }
.active-test .t-icon { color: #fff; }
.t-details h4 { margin: 0 0 0.2rem; font-size: 1rem; color: #fff; }
.t-details span { font-size: 0.85rem; color: var(--clr-text-muted); }
.loading-bar { width: 120px; height: 4px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.loading-fill { height: 100%; width: 50%; background: #fff; animation: loadingAnim 2s infinite linear; }
@keyframes loadingAnim { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.t-btn { margin-left: auto; padding: 0.3rem 0.8rem; background: rgba(255,255,255,0.05); border-radius: 100px; font-size: 0.75rem; border: 1px solid rgba(255,255,255,0.1); color: #adb5bd; font-weight: 600; }
.t-btn.glow { background: #fff; color: #000; box-shadow: 0 0 15px rgba(255,255,255,0.3); border-color: #fff; }

/* Cascade Layout Print UI */
.print-ui { flex-direction: column !important; justify-content: center; align-items: center; gap: 1.5rem; padding: 2.5rem 1rem !important; }
.cascade-layout { display: flex; gap: 1rem; justify-content: center; align-items: flex-end; width: 100%; flex-wrap: wrap; margin-top: 0; }
.cascade-layout .doc-card { position: relative; width: 100px; height: 130px; padding: 1rem 0.5rem; background: rgba(15,15,18,0.95); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; cursor: pointer; flex: 0 0 auto; }

/* Dedicated Entrance Animations for PDF Scene */
.active-scene .cascade-layout .doc-card { animation: docEntrance 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.active-scene .cascade-layout .doc-card:nth-child(1) { animation-delay: 0.1s; }
.active-scene .cascade-layout .doc-card:nth-child(2) { animation-delay: 0.25s; }
.active-scene .cascade-layout .doc-card:nth-child(3) { animation-delay: 0.4s; }

@keyframes docEntrance {
    0% { opacity: 0; transform: translateY(40px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.cascade-layout .doc-card:hover { transform: translateY(-15px) !important; border-color: rgba(255,255,255,0.5); z-index: 5; box-shadow: 0 20px 40px rgba(0,0,0,0.7); }
.cascade-layout .doc-title { font-size: 0.7rem; margin: 0.8rem 0 0.5rem; white-space: nowrap; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.cascade-layout .pdf-icon { color: #ff5f56; font-size: 1.5rem; }
.doc-title { font-weight: 600; font-size: 0.9rem; margin: 1rem 0 0.5rem; color: #fff; }
.pdf-icon { color: #ff5f56; font-size: 2rem; margin-bottom: 0.5rem; }
.print-action-bar { display: flex; gap: 1rem; width: 100%; justify-content: center; margin-top: 2rem; }
.print-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 0.8rem 1.5rem; border-radius: 100px; cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 0.8rem; font-family: var(--font-heading); font-weight: 600; }
.print-btn:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }
.primary-btn { background: #fff; color: #000; }
.primary-btn:hover { background: #e2e8f0; }

/* Audience Section */
.audience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    perspective: 1000px;
}
.audience-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.audience-card::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.05) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}
.audience-card:hover {
    transform: translateY(-10px) rotateX(5deg);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.04);
}
.audience-card:hover::before { opacity: 1; }
.audience-icon {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px; height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(0,0,0,0.5));
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    transition: transform 0.4s ease, border-color 0.4s;
}
.audience-card:hover .audience-icon {
    transform: scale(1.1);
    border-color: rgba(255,255,255,0.4);
    box-shadow: 0 15px 30px rgba(255,255,255,0.1);
}
.audience-card h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: #e2e8f0;
    font-family: var(--font-heading);
}
.audience-card:hover h3 { color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.3); }
.audience-card p {
    color: var(--clr-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: justify;
    text-align-last: left;
}

/* Developer Section */
.developer-section {
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.02), transparent);
    border-top: 1px solid rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.developer-profile {
    display: flex;
    gap: 4rem;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}

.profile-pic {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: var(--transition);
}
.profile-pic:hover { filter: grayscale(0%); transform: scale(1.05); }

.developer-name { font-size: 2.5rem; margin-bottom: 0.5rem; }
.developer-title { color: var(--clr-text-muted); font-family: var(--font-heading); letter-spacing: 2px; text-transform: uppercase; font-size: 0.85rem; margin-bottom: 1.5rem; }
.large-text {
    text-align: justify;
    text-align-last: left;
}

.developer-bio { font-size: 1.15rem; font-weight: 300; color: #d0d4dc; line-height: 1.8; margin-bottom: 2rem; }
.profile-socials i { margin-right: 8px; font-size: 1.2rem; }


/* Enquiries Section (Minimalist Input lines) */
.fluid-form-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8vw;
}

.form-container { width: 100%; }

.input-line {
    margin-bottom: 3rem;
    position: relative;
}

.input-line input, 
.input-line select, 
.input-line textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 1.25rem;
    font-family: inherit;
    padding: 1rem 0;
    transition: var(--transition);
}

.input-line input:focus, 
.input-line select:focus, 
.input-line textarea:focus {
    outline: none;
    border-bottom-color: #fff;
}

.input-line input::placeholder, 
.input-line textarea::placeholder {
    color: var(--clr-text-muted);
}

.input-line select {
    color: var(--clr-text-muted);
    cursor: pointer;
    appearance: none;
}
.input-line select option {
    background: var(--clr-bg-deep);
    color: #fff;
}
.input-line select:focus { color: #fff; }

.btn-submit-fluid {
    width: 100%;
    padding: 1.5rem;
    font-size: 1.25rem;
    margin-top: 1rem;
}


/* Footer Constraints */
.fluid-footer {
    padding: 6rem 5vw 2rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.4));
}

.footer-wrapper {
    max-width: 1200px;
    margin: 0 auto 6rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
}

/* Premium Submit Button - Rectangular */
.submit-btn { width: 100%; padding: 1.25rem; font-size: 0.95rem; margin-top: 2.5rem; }

/* Premium Form Design */
.premium-form-wrapper { background: rgba(15,15,18,0.95); border: 1px solid rgba(255,255,255,0.08); padding: 3rem; border-radius: 24px; box-shadow: 0 30px 60px rgba(0,0,0,0.6); position: relative; overflow: hidden; backdrop-filter: blur(20px); }
.premium-form-wrapper::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--gradient-silver); }

.form-header { margin-bottom: 2.5rem; text-align: center; }
.form-header h3 { font-size: 1.6rem; font-family: var(--font-heading); color: #fff; margin-bottom: 0.5rem; letter-spacing: -0.5px; }
.form-header p { color: #adb5bd; font-size: 0.95rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

.input-modern { margin-bottom: 1.5rem; text-align: left; }
.input-modern label { display: block; font-size: 0.85rem; font-weight: 600; color: #ced4da; margin-bottom: 0.6rem; letter-spacing: 0.5px; }
.input-modern label span { color: #ff5f56; } /* Required star */
.input-field { position: relative; display: flex; align-items: center; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; transition: var(--transition); overflow: visible; }
.input-field:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); }
.input-field:focus-within { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.08); background: rgba(255,255,255,0.06); }

.input-field i { position: absolute; left: 1.2rem; top: 50%; transform: translateY(-50%); color: #6c757d; font-size: 1rem; transition: var(--transition); }
.textarea-field i { top: 1.2rem; transform: none; }
.input-field:focus-within i { color: #fff; }

.input-field input, .input-field textarea { width: 100%; background: transparent; border: none; padding: 1rem 1rem 1rem 3.2rem; color: #fff; font-size: 0.95rem; font-family: var(--font-body); }
.custom-select { width: 100%; padding: 1rem 1rem 1rem 3.2rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 0.95rem; font-family: var(--font-body); }
.custom-select .arrow-down { position: static; transform: none; color: #6c757d; font-size: 0.8rem; }
.custom-options { display: none; position: absolute; top: calc(100% + 5px); left: 0; right: 0; background: linear-gradient(145deg, #2a2a35, #15151a); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; z-index: 20; box-shadow: 0 15px 35px rgba(0,0,0,0.6); overflow: hidden; }
.custom-options.show { display: block; animation: dropDownFade 0.2s ease-out forwards; }
.custom-option { padding: 1rem 1.5rem; color: #e2e8f0; font-size: 0.95rem; transition: var(--transition); cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.05); }
.custom-option:last-child { border-bottom: none; }
.custom-option:hover { background: rgba(255,255,255,0.1); color: #fff; padding-left: 2rem; border-left: 3px solid #fff; }
@keyframes dropDownFade { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } }

.input-field textarea { min-height: 120px; resize: vertical; padding-top: 1rem; }
.input-field input:focus, .input-field textarea:focus { outline: none; }
.input-field input::placeholder, .input-field textarea::placeholder { color: #6c757d; }

/* Custom Checkbox */
.trust-consent { margin: 2rem 0; font-size: 0.85rem; color: #adb5bd; }
.checkbox-container { display: flex; align-items: flex-start; cursor: pointer; gap: 0.8rem; user-select: none; line-height: 1.4; }
.checkbox-container input { display: none; }
.checkmark { width: 22px; height: 22px; flex-shrink: 0; border: 1.5px solid rgba(255,255,255,0.3); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; position: relative; transition: var(--transition); }
.checkbox-container:hover .checkmark { border-color: rgba(255,255,255,0.6); }
.checkbox-container input:checked ~ .checkmark { background: #fff; border-color: #fff; }
.checkbox-container input:checked ~ .checkmark::after { content: '\f00c'; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #000; font-size: 0.75rem; }
.trust-consent a { color: #fff; text-decoration: underline; transition: var(--transition); }
.trust-consent a:hover { color: #adb5bd; }

.secure-notice { margin-top: 1.5rem; text-align: center; font-size: 0.75rem; color: #6c757d; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 600; letter-spacing: 0.5px; }
.secure-notice i { color: #28a745; font-size: 0.9rem; }

.footer-logo-img { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; transition: var(--transition); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.footer-logo-img:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); }
/* Global UI Components */
.primary-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem; background: transparent; color: #fff; text-decoration: none; padding: 1rem 2rem; border-radius: 0; font-weight: 700; font-size: 0.85rem; letter-spacing: 1.5px; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.3); transition: all 0.4s ease; position: relative; overflow: hidden; font-family: var(--font-body); cursor: pointer; z-index: 1; }
.primary-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: #fff; transition: all 0.4s ease; z-index: -1; }
.primary-btn:hover::before { width: 100%; }
.primary-btn:hover { color: #000; border-color: #fff; box-shadow: 0 10px 30px rgba(255,255,255,0.1); }
.marquee-content { animation: marqueeScroll 20s linear infinite; }
@keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.counter-highlight { font-size: 3.5rem; font-weight: 800; }
.gradient-text { background: var(--gradient-silver); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tagline { color: #adb5bd; font-size: 1rem; margin-bottom: 2rem; max-width: 300px; line-height: 1.6; }
/* Availability Card Redesign */
.availability-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.5rem;
    margin-top: 2rem;
    max-width: 400px;
    backdrop-filter: blur(10px);
    transition: var(--transition);
}

.availability-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

.availability-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--clr-text-muted);
    font-weight: 700;
    margin-bottom: 1.2rem;
    text-align: center;
}

.availability-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.platform-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.platform-icon-wrapper {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    transition: var(--transition);
}

.availability-card:hover .platform-icon-wrapper {
    border-color: rgba(255,255,255,0.3);
    background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
    color: #fff;
    box-shadow: 0 0 15px rgba(255,255,255,0.1);
}

.platform-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #adb5bd;
    white-space: nowrap;
    text-align: center;
}

.availability-sync {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
}

.sync-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    flex: 1;
}

.sync-icon {
    font-size: 0.9rem;
    color: #6c757d;
}

.availability-card:hover .sync-icon {
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
}
.opacity-70 { opacity: 0.7; }

.footer-heading { font-family: var(--font-heading); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1.5px; color: #fff; margin-bottom: 2rem; opacity: 0.9; }
.footer-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.footer-nav a { color: #adb5bd; text-decoration: none; transition: var(--transition); display: inline-flex; align-items: center; font-size: 0.95rem; }
.footer-nav a:hover { color: #fff; transform: translateX(5px); }

.contact-col { display: flex; flex-direction: column; align-items: flex-start; }
.social-links-list { display: flex; flex-direction: column; gap: 1rem; width: 100%; min-width: 260px; }
.premium-social-link { display: flex; align-items: center; gap: 1.2rem; text-decoration: none; padding: 0.8rem 1.2rem 0.8rem 0.8rem; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; transition: var(--transition); }
.premium-social-link:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15); transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.3); }
.social-icon-box { width: 38px; height: 38px; border-radius: 8px; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; transition: var(--transition); border: 1px solid rgba(255,255,255,0.05); }
.premium-social-link:hover .social-icon-box { background: var(--gradient-silver); color: #000; box-shadow: 0 5px 15px rgba(255,255,255,0.2); border-color: transparent; }
.social-text { display: flex; flex-direction: column; }
.social-text span { font-size: 0.72rem; color: #6c757d; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.1rem; font-weight: 600; }
.social-text strong { font-size: 0.95rem; color: #adb5bd; font-weight: 600; transition: var(--transition); }
.premium-social-link:hover .social-text strong { color: #fff; }

/* Minimalistic Compliance Footer */
.footer-minimal-compliance {
    margin: 0;
    padding: 0;
    background: #0a0c10;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    width: 100%;
    overflow: hidden;
}

/* Taskbar-style clickable disclaimer trigger - full-bleed rectangular bar
   spanning the entire width of the screen, edge to edge. */
.disclaimer-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    position: relative;
    margin: 0;
    padding: 1.1rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #adb5bd;
    font-weight: 700;
    transition: var(--transition);
}

.disclaimer-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.disclaimer-toggle .disclaimer-chevron {
    font-size: 0.7rem;
    color: currentColor;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.disclaimer-toggle.open .disclaimer-chevron {
    transform: rotate(180deg);
}

/* Slide-down panel — also spans full-bleed to match the bar above it */
.disclaimer-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.015);
    transition: grid-template-rows 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}

.disclaimer-panel.open {
    grid-template-rows: 1fr;
    opacity: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.disclaimer-panel-inner {
    overflow: hidden;
    min-height: 0;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.disclaimer-body {
    padding-top: 2.5rem;
}

.disclaimer-body p {
    font-size: 0.82rem;
    line-height: 1.8;
    color: #6c757d;
    margin-bottom: 1.5rem;
    text-align: justify;
    text-align-last: left;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.disclaimer-meta {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    font-size: 0.75rem;
    color: #495057;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.meta-separator {
    color: rgba(255, 255, 255, 0.1);
    font-size: 1rem;
}

@media (max-width: 768px) {
    .disclaimer-toggle {
        padding: 0.9rem 1rem;
        gap: 0.6rem;
        font-size: 0.6rem;
        letter-spacing: 1.5px;
    }
    .disclaimer-panel-inner {
        padding: 0 1.25rem;
    }
    .disclaimer-body p {
        text-align: justify !important;
        text-align-last: left !important;
    }
    .disclaimer-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
    .meta-separator {
        display: none;
    }
}

@media (max-width: 1024px) {
    .fluid-hero-wrapper, .fluid-split, .fluid-form-layout { grid-template-columns: 1fr !important; gap: 4rem !important; }
    .interactive-features { grid-template-columns: 1fr; gap: 2rem; }
    .footer-wrapper { grid-template-columns: 1fr; gap: 3rem; text-align: left; }
    .footer-logo-row { justify-content: flex-start; }
    .contact-col { align-items: flex-start; }
    .developer-profile { flex-direction: column; text-align: center; }
}

@media (max-width: 768px) {
    .nav-links, .nav-actions { display: none; }
    .mobile-menu-btn { display: flex; }
    .mega-title { font-size: 3rem !important; }
    .fluid-heading { font-size: 2.8rem !important; }
    .footer-disclaimer { flex-direction: column; gap: 1rem; text-align: center; }
    .premium-form-wrapper { padding: 1.5rem; border-radius: 16px; }
    .about-glass-card { padding: 1.5rem; border-radius: 16px; }
    .impact-card { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.5rem; }
    .impact-arrow { display: none; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .audience-grid { grid-template-columns: 1fr; }
    .audience-card { padding: 1.5rem; }
}
.nav-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 8px;
    filter: drop-shadow(0 4px 10px rgba(255,255,255,0.2));
}
.footer-link {
    display: block;
    color: var(--clr-text-muted);
    font-size: 0.95rem;
    margin-bottom: 8px;
    font-weight: 500;
}

.footer-link i {
    margin-right: 8px;
    font-size: 0.9rem;
}
.footer-link {
    display: block;
    color: var(--clr-text-muted);
    font-size: 0.95rem;
    margin-bottom: 8px;
    font-weight: 500;
    transition: var(--transition); /* IMPORTANT */
}

.footer-link:hover {
    color: #fff;
    transform: translateX(5px);
}
.footer-disclaimer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
    width: 100%;
}
.footer-disclaimer {
    border-top: 1px solid rgba(255,255,255,0.15);
}
.tagline {
    font-size: 0.8rem; 
}
.reg-box-clean {
    margin-top: 10px;
}

.reg-box-clean .opacity-70 {
    display: block;
    font-size: 0.8rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.6);
    text-align: justify;
    max-width: 700px;
}

/* Make "Disclaimer:" stand out */
.reg-box-clean .opacity-70 strong {
    color: #fff;
    font-weight: 600;
}
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.top-banner {
    position: relative;
    z-index: 999; /* lower than navbar */
}
.bare-link span {
    display: inline-block;
    transition: var(--transition);
}

.bare-link:hover span {
    transform: translateX(4px);
}
.dev-profile-img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;

    filter: grayscale(100%);
    transition: all 0.4s ease;

    border: 2px solid rgba(255,255,255,0.1);
}

/* Hover effect */
.dev-profile-img:hover {
    filter: grayscale(0%);
    transform: scale(1.05);
    box-shadow: 0 10px 40px rgba(255,255,255,0.15);
}
.coin {
    width: 180px;
    aspect-ratio: 1 / 1;           /* 🔥 ensures perfect square */
    border-radius: 50%;
    overflow: hidden;
    perspective: 1000px;
    flex-shrink: 0;                /* 🔥 prevents flex stretching */
}

.coin-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s ease;
}

/* Spin */
.coin:hover .coin-inner {
    transform: rotateY(180deg);
}

/* Front & Back */
.coin-front,
.coin-back {
    position: absolute;
    inset: 0;                      /* 🔥 better than width/height */
    border-radius: 50%;
    overflow: hidden;
    backface-visibility: hidden;
}

/* Front image */
.coin-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Back (logo side) */
.coin-back {
    transform: rotateY(180deg);
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo (don’t stretch like profile) */
.coin-back img {
    width: 60%;
    height: auto;
    object-fit: contain;
    border-radius: 0;
}
.developer-bio {
    text-align: justify;
    line-height: 1.6;
    font-size: 16px;
    color: #FFF;
}

/* Tooltip on Asterisk */
/* Asterisk Flip Trigger */
.pulse-asterisk {
    display: inline-block;
    animation: asteriskPulse 2s infinite;
    cursor: help;
    padding: 10px;
    margin: -10px;
    color: #fff;
    font-weight: 900;
}
@keyframes asteriskPulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; text-shadow: 0 0 15px rgba(255,255,255,0.5); }
    100% { transform: scale(1); opacity: 0.8; }
}



/* Intelligence Engine Hub */
.engine-hub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
}

.engine-branding {
    flex: 1.2;
}

/* Intelligence Engine Hub - 3D Flip */
.metrics-card {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    perspective: 1200px;
    height: 420px;
    width: 100%;
    max-width: 500px;
}

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

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

.metrics-card-front, .metrics-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 40px;
}

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

.metrics-card-back {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: rotateY(180deg);
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    backdrop-filter: blur(20px);
}

.metrics-display {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 40px;
    padding: 3rem;
    height: 100%;
    width: 100%;
    overflow: hidden;
    transition: var(--transition);
}

.metrics-display:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

.metrics-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
}

.counter-wrapper {
    display: flex;
    align-items: baseline;
    margin-bottom: 1.5rem;
}

.metrics-num {
    font-family: var(--font-heading);
    font-size: clamp(5rem, 10vw, 7rem);
    font-weight: 800;
    line-height: 1;
    background: var(--gradient-silver);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -2px;
}

.metrics-plus {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    margin-left: 5px;
}

.metrics-label-box {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 2rem;
}

.metrics-tag {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #495057;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
}

.metrics-desc {
    font-size: 1rem;
    color: #868e96;
    line-height: 1.6;
}

@media (max-width: 1100px) {
    .engine-hub {
        flex-direction: column;
        text-align: center;
        gap: 3rem;
    }
    .metrics-card {
        justify-content: center;
    }
    .engine-branding {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* MEI+lab Section */
.meilab-section {
    padding: 8rem 0;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at center, rgba(255,255,255,0.02) 0%, transparent 70%);
}

/* Hub and Spoke System */
.hub-spoke-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 700px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hub-center {
    position: relative;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.1);
    box-shadow: 0 0 40px rgba(255,255,255,0.05);
    z-index: 10;
    overflow: hidden;
    background: #000;
}

.hub-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.hub-paths {
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
}

.spoke-line {
    position: absolute;
    top: 0; left: 0;
    width: 320px;
    height: 1px;
    background: rgba(255,255,255,0.15);
    transform-origin: left center;
    transform: rotate(var(--rot));
    z-index: 5;
}

.spoke-line::after {
    content: '';
    position: absolute;
    top: -1px; left: 0;
    width: 30px; height: 3px;
    background: #fff;
    box-shadow: 0 0 10px #fff, 0 0 20px #fff;
    border-radius: 5px;
    opacity: 0;
    animation: spokeFlow 3s infinite linear;
}

.spoke-line:nth-child(1)::after { animation-delay: 0s; }
.spoke-line:nth-child(2)::after { animation-delay: 0.5s; }
.spoke-line:nth-child(3)::after { animation-delay: 1.2s; }
.spoke-line:nth-child(4)::after { animation-delay: 0.8s; }
.spoke-line:nth-child(5)::after { animation-delay: 2s; }
.spoke-line:nth-child(6)::after { animation-delay: 1.5s; }

@keyframes spokeFlow {
    0% { left: 100%; opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { left: 0; opacity: 0; }
}

.hub-node {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(320px) rotate(calc(-1 * var(--angle)));
    z-index: 20;
}

.node-pill {
    display: flex;
    align-items: center;
    background: rgba(15,15,18,0.9);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px;
    padding: 0.4rem 1.2rem 0.4rem 0.4rem;
    gap: 0.8rem;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
    white-space: nowrap;
}

.node-pill:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.3);
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5), 0 0 20px rgba(255,255,255,0.1);
}

.node-pill-icon {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 1rem;
    transition: all 0.4s ease;
}

.node-pill:hover .node-pill-icon {
    background: #fff;
    color: #000;
}

.node-pill-text {
    color: #ced4da;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.4s ease;
}

.node-pill:hover .node-pill-text {
    color: #fff;
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    .hub-spoke-container { height: auto; padding: 4rem 0; flex-direction: column; gap: 2rem; }
    .hub-paths { display: none; }
    .hub-center { width: 200px; height: 200px; margin-bottom: 2rem; position: static; transform: none; }
    .hub-node { position: static; transform: none !important; width: 100%; max-width: 300px; }
    .node-pill { padding: 0.8rem; }
}

/* MEI+lab Modal Styles */
.meilab-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 12, 16, 0.85);
    backdrop-filter: blur(10px);
    overscroll-behavior: none;
    align-items: center;
    justify-content: center;
}
.meilab-modal-content {
    background: linear-gradient(145deg, #161a22, #0d1117);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 3rem;
    width: 90%;
    overscroll-behavior: contain;
    max-width: 800px; /* Wider to accommodate flex layout and watermark */
    text-align: left; /* Text aligned to left */
    position: relative;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden; /* Prevent watermark from escaping */
}
.modal-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-watermark img {
    max-width: 60%;
    max-height: 80%;
    object-fit: contain;
    filter: grayscale(100%);
}
.modal-layout {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}
.modal-left {
    flex-shrink: 0;
    padding-top: 5px;
}
.modal-right {
    flex-grow: 1;
}
@keyframes modalPop {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.close-modal {
    position: absolute;
    top: 15px;
    right: 25px;
    color: #adb5bd;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    z-index: 2;
}
.close-modal:hover { color: #fff; }
.modal-icon {
    font-size: 4rem; /* Larger icon on the left */
    color: #a8b2bd; /* Silver grey black theme icon */
    margin-bottom: 0;
}
.modal-title {
    font-size: 1.6rem;
    color: #fff;
    margin-bottom: 1rem;
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
}
.modal-message {
    margin-bottom: 2rem;
}
.modal-message p {
    color: #ced4da;
    line-height: 1.6;
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
}
.modal-message p:last-child {
    margin-bottom: 0;
}
.modal-buttons {
    display: flex;
    gap: 1rem;
    justify-content: flex-start; /* Aligned to left */
    flex-wrap: wrap;
}
.modal-btn {
    padding: 0.8rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.95rem;
}
.modal-btn.primary {
    background: #fff;
    color: #000;
    border: none;
}
.modal-btn.primary:hover {
    background: var(--accent, #ffbd2e);
}
.modal-btn.secondary {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
}
.modal-btn.secondary:hover {
    border-color: #fff;
}

/* Modal Redesigned Buttons & Checkbox */
.modal-btn-outline {
    width: 100%;
    padding: 1rem 1.5rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    border-radius: 6px;
    margin-top: 1rem;
}
.modal-btn-outline:hover:not(:disabled) {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.05);
}
.modal-btn-outline:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.2);
}
.modal-checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.modal-checkbox-container input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.modal-checkbox-container label {
    color: #adb5bd;
    font-size: 0.9rem;
    line-height: 1.5;
    cursor: pointer;
    user-select: none;
}

/* --- COMPREHENSIVE MOBILE RESPONSIVE FIXES --- */
@media (max-width: 1024px) {
    .redesign-split, .interactive-features, .engine-grid, .fluid-form-layout, .impact-grid, .audience-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .redesign-section {
        padding: 4rem 1.5rem !important;
    }
    .fluid-hero-wrapper {
        grid-template-columns: 1fr !important;
        gap: 2rem;
        padding-top: 2rem;
    }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    .hub-spoke-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        height: auto !important;
        padding: 2rem 0 !important;
        gap: 1.5rem !important;
    }
    .hub-center {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: 250px !important;
        margin: 0 auto 2rem auto !important;
    }
    .hub-node {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: 320px !important;
        margin-bottom: 1rem !important;
    }
    .hub-paths {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* Navbar & Menu */
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(10, 10, 12, 0.98);
        padding: 2rem;
        gap: 1.5rem;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        z-index: 100;
        backdrop-filter: blur(10px);
    }
    .nav-links.active {
        display: flex !important;
    }
    .nav-actions {
        display: none !important;
    }
    
    /* Typography */
    .hero-heading { font-size: 2.2rem !important; }
    .mega-title, .fluid-heading { font-size: 2rem !important; }
    .section-tagline { font-size: 1rem !important; }
    
    /* Engine Hub Fixes */
    .engine-hub {
        flex-direction: column !important;
        gap: 2rem !important;
    }
    .engine-branding {
        text-align: center !important;
    }
    .engine-code-preview {
        overflow-x: auto !important;
        max-width: 100% !important;
    }

    /* Forms */
    input, textarea, select, .meilab-input {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Footer */
    .footer-content {
        flex-direction: column !important;
        gap: 3rem !important;
    }
    .footer-left, .footer-middle, .footer-right {
        width: 100% !important;
    }
    
    /* Modals */
    .meilab-modal-content {
        width: 95% !important;
        padding: 2rem 1.5rem !important;
    }
    .modal-layout {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.5rem !important;
        text-align: center !important;
    }
    .modal-right {
        text-align: center !important;
    }
    .modal-buttons {
        justify-content: center !important;
    }
    
    /* Cards */
    .impact-card, .audience-card, .feature-card, .glass-card {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* --- UI REFINEMENTS --- */
@media (max-width: 768px) {
    /* Marquee Overlap Fix */
    .marquee-wrapper { gap: 2rem !important; }
    .marquee { gap: 2rem !important; }
    .marquee span { 
        padding: 1rem 1.5rem !important; 
        line-height: 1.2 !important; 
        display: inline-flex !important;
        align-items: center !important;
    }
    
    /* Hero Padding & Fix Overlap */
    .hero {
        min-height: auto !important;
        height: auto !important;
        display: block !important;
        padding-top: 8rem !important;
        padding-bottom: 4rem !important;
    }
    .fluid-hero-wrapper {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* Premium Mobile Menu Overlay */
    .nav-links.active {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: rgba(8, 8, 10, 0.98) !important;
        padding: 8rem 2rem 2rem 2rem !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 2.5rem !important;
        z-index: 1000 !important;
        border: none !important;
    }
    .nav-links li a {
        font-size: 1.8rem !important;
        font-weight: 600 !important;
        color: #fff !important;
        letter-spacing: 1px !important;
    }
    .mobile-menu-btn {
        z-index: 1001 !important;
        position: relative !important;
    }
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    /* Hub Spoke Vertical Dashed Line */
    .hub-spoke-container {
        position: relative !important;
    }
    .hub-spoke-container::before {
        content: '' !important;
        position: absolute !important;
        top: 250px !important;
        bottom: 50px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 2px !important;
        background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.2) 0, rgba(255,255,255,0.2) 10px, transparent 10px, transparent 20px) !important;
        z-index: 0 !important;
    }
    .hub-node {
        position: relative !important;
        z-index: 1 !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 auto 1.5rem auto !important; /* Centered */
    }
    .node-pill {
        background: rgba(10, 12, 16, 0.95) !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
    }
}
@media (max-width: 768px) {
    /* Reformat the 30+ counter to naturally flow without the bulky 3D container on mobile */
    .metrics-card {
        height: auto !important;
        perspective: none !important;
        margin-bottom: 2rem !important;
    }
    .metrics-card-inner {
        transform: none !important;
        transition: none !important;
        transform-style: flat !important;
    }
    .metrics-card-front {
        position: relative !important;
        height: auto !important;
    }
    /* Hide the back of the card entirely on mobile */
    .metrics-card-back {
        display: none !important;
    }
    /* Remove the bulky dark container styles */
    .metrics-display {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }
    .metrics-glow {
        display: none !important; /* Hide background glow to keep it clean */
    }
    /* Center and elegantly feature the text */
    .metrics-content {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .metrics-num {
        font-size: 6rem !important;
    }
    .metrics-plus {
        font-size: 4rem !important;
        transform: translateY(-10px) !important;
        display: inline-block !important;
    }
    .metrics-label-box {
        border-top: none !important;
        padding-top: 1rem !important;
    }
    .metrics-tag {
        font-size: 0.85rem !important;
        color: #fff !important;
        margin-bottom: 0.8rem !important;
        display: block !important;
    }
    .metrics-desc {
        font-size: 1.05rem !important;
        max-width: 90% !important;
        margin: 0 auto !important;
    }
    
    .engine-section {
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
    .marquee-container {
        margin-top: 1rem !important;
    }
}
@media (max-width: 768px) {
    .hero .pill-badge {
        display: none !important;
    }
    .hero .mega-title {
        font-size: 3.5rem !important;
        line-height: 1.1 !important;
        margin-top: 2rem !important;
    }
}
@media (max-width: 768px) {
    .hub-node {
        left: 0 !important;
        transform: none !important;
    }
}
@media (max-width: 768px) {
    /* Make top banner scroll on mobile */
    .top-banner {
        overflow: hidden !important;
        white-space: nowrap !important;
        position: relative !important;
        padding-bottom: 0.5rem !important;
    }
    .top-banner p {
        display: inline-block !important;
        min-width: 100% !important;
        animation: scroll-banner 12s linear infinite !important;
    }
    @keyframes scroll-banner {
        /* Text is visible immediately on load/loop instead of waiting to
           scroll in from off-screen — fixes the perceived load delay. */
        0% { transform: translateX(0%); }
        85% { transform: translateX(-100%); }
        100% { transform: translateX(-100%); }
    }

    /* Fix Hero spacing and title size */
    .hero {
        padding-top: 5rem !important; /* Reduced from 8rem to remove empty space */
    }
    .hero .mega-title {
        font-size: 4.5rem !important; /* Made even bigger */
        line-height: 1 !important;
        margin-top: 0 !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Justify subtitle */
    .hero .subtitle {
        text-align: justify !important;
        font-size: 1.1rem !important; /* Slightly larger for readability */
        line-height: 1.5 !important;
    }
}
@media (max-width: 768px) {
    /* Make Let's Connect much bigger on mobile */
    .form-typography .mega-title {
        font-size: 5rem !important;
        line-height: 1 !important;
        margin-top: 2rem !important;
    }
}
/* Make JPEG logos transparent on dark backgrounds */
img[src*="static%20logo.jpeg"] {
    mix-blend-mode: screen;
}

/* Mobile Interleaved Features Layout (Overriding default stacked layout) */
@media (max-width: 1024px) {
    .interactive-features {
        display: flex !important;
        flex-direction: column;
        gap: 0 !important;
    }
    
    .feature-tabs, .feature-display {
        display: contents !important;
    }
    
    .feature-scene {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        height: auto !important;
        margin-bottom: 4rem !important;
        width: 100%;
        display: block !important;
    }
    
    .feature-tab {
        margin-bottom: 1.5rem !important;
        background: transparent !important;
        border: none !important;
        padding: 0 0.5rem !important;
        opacity: 1 !important;
        pointer-events: none;
    }
    
    .feature-tab::before {
        display: none !important;
    }
    
    .feature-tab .tab-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
    
    .feature-tab:nth-child(1) { order: 1; }
    #scene-1 { order: 2; }
    
    .feature-tab:nth-child(2) { order: 3; }
    #scene-2 { order: 4; }
    
    .feature-tab:nth-child(3) { order: 5; }
    #scene-3 { order: 6; }
    
    .feature-tab:nth-child(4) { order: 7; }
    #scene-4 { order: 8; }
    
    .feature-tab:nth-child(5) { order: 9; }
    #scene-5 { order: 10; margin-bottom: 0 !important; }
}

/* ==========================================================================
   COMPREHENSIVE MOBILE RESPONSIVE OPTIMIZATION
   ========================================================================== */

/* 1. Safari Safe Area Insets */
@supports (padding-top: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
    }
}

/* 2. Fluid Typography Enhancements (All Devices) */
h1.mega-title {
    font-size: clamp(3.5rem, 7vw, 6.5rem) !important;
    line-height: 1.05;
}
h2.mega-heading {
    font-size: clamp(2rem, 7vw, 4rem) !important;
}
.fluid-heading {
    font-size: clamp(1.8rem, 6vw, 3rem) !important;
}
p.large-text {
    font-size: clamp(1rem, 3vw, 1.25rem) !important;
}

/* 3. Small Mobile Devices (<= 480px) */
@media (max-width: 480px) {
    /* Container adjustments */
    .content-wrapper {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    
    /* Ensure no section overflows */
    section {
        overflow-x: hidden !important;
    }
    
    /* MEI+Lab Hub Specifics */
    .hub-center {
        width: 140px !important;
        height: 140px !important;
    }
    
    .hub-center img {
        width: 80px !important;
    }
    
    .node-pill {
        padding: 0.5rem 1rem !important;
        font-size: 0.8rem !important;
        white-space: normal !important;
        text-align: center;
        width: max-content;
        max-width: 140px;
    }
    
    /* Form & Modal Adjustments */
    .premium-form-wrapper {
        padding: 1.2rem !important;
    }
    .modal-content {
        padding: 1.5rem !important;
        margin: 1rem;
        width: auto;
    }
    
    /* Features Mockup Fixes */
    .feature-scene {
        margin-bottom: 2rem !important;
    }
    .premium-mockup {
        padding: 1rem !important;
    }
    
    .feature-tab {
        padding: 0.2rem !important;
    }
    
    .mockup-body {
        grid-template-columns: 1fr !important; /* Stack grid on small screens */
    }
    
    /* Footer */
    .footer-wrapper {
        gap: 2rem !important;
    }
    .footer-links-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
    }
}

/* 4. Extremely Narrow Viewports (<= 380px) e.g., iPhone SE, Galaxy S8 */
@media (max-width: 380px) {
    /* Extreme typography scaling */
    h1.mega-title {
        font-size: 2.6rem !important;
    }
    
    h2.mega-heading {
        font-size: 1.8rem !important;
    }
    
    /* Stack side-by-side flex items */
    .hub-actions {
        flex-direction: column;
        gap: 1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    
    .hero-buttons .primary-btn, .hero-buttons .secondary-btn {
        width: 100%;
        text-align: center;
    }
    
    /* Timeline Fixes for super narrow */
    .journey-tracker {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1.5rem !important;
        padding-left: 1rem;
        border-left: 2px solid rgba(255,255,255,0.1);
    }
    .tracker-item {
        flex-direction: row !important;
        text-align: left !important;
        max-width: 100% !important;
    }
    .tracker-item > div {
        text-align: left !important;
        max-width: none !important;
        margin-top: 0 !important;
    }
    .tracker-line {
        display: none !important; /* Hide horizontal lines when vertical */
    }
    .track-dot {
        position: absolute;
        left: -29px; /* Pull dot over the border */
    }
    
    /* Record Builder cascade */
    .cascade-layout {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    
    /* Footer links entirely stacked */
    .footer-links-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Fix Impact Grid */
    .impact-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Fix Developer Section */
    .developer-links {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ==========================================================================
   MOBILE CORE ENGINE REDESIGN (Alignments & Layout)
   ========================================================================== */
@media (max-width: 1024px) {
    /* Center align everything in the engine section for a unified look */
    .engine-hub {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 3rem !important;
    }
    
    .engine-branding {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center !important;
        margin: 0 auto;
    }
    
    /* Fix justified text causing whitespace rivers and perfectly balance the lines */
    .engine-branding p.secondary-text {
        text-align: center !important;
        max-width: 95% !important;
        padding: 0;
        text-wrap: balance; /* Perfectly balances the text lines */
        margin: 0 auto;
    }
    
    /* Neatly package the metrics card so it doesn't float awkwardly */
    .metrics-card {
        width: 100%;
        max-width: 380px;
        margin: 0 auto;
        background: linear-gradient(145deg, rgba(20,20,20,0.8), rgba(0,0,0,0.6));
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
        border-radius: 20px;
        padding: 2rem 1.5rem 2.5rem;
        position: relative;
        overflow: hidden;
    }
    
    .metrics-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; height: 100%;
        background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.08) 0%, transparent 60%);
        pointer-events: none;
    }
    
    .metrics-display {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
    }
    
    .metrics-num {
        font-family: 'Helvetica Neue', 'Arial', sans-serif !important; /* New professional sleek font */
        font-size: 10rem !important; /* Massive size to fill space */
        line-height: 0.8;
        letter-spacing: -3px;
        margin-bottom: 0;
    }
    
    .metrics-plus {
        font-family: 'Helvetica Neue', 'Arial', sans-serif !important;
        font-size: 5rem !important;
        transform: translateY(-20px) !important;
    }
    
    .metrics-label-box {
        margin-top: 0.2rem; /* Reduced gap between 30+ and the lines */
    }
    
    .metrics-tag {
        display: inline-block;
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        font-weight: 700;
        letter-spacing: 1px;
        padding: 0.6rem 1.2rem;
        border-radius: 30px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 1.2rem;
        font-size: 0.75rem;
    }
    
    .metrics-desc {
        text-align: center !important;
        font-size: 0.9rem;
        color: #adb5bd;
    }
}

/* Final Mobile Polish Updates */
@media (max-width: 1024px) {
    /* 1. Fix the 30+ overflowing and alignment */
    .metrics-num {
        font-size: clamp(4rem, 25vw, 9rem) !important;
    }
    .metrics-plus {
        font-size: clamp(2rem, 12vw, 4.5rem) !important;
        transform: translateY(-10%) !important;
    }
    .engine-hub, .engine-branding, .metrics-card, .metrics-display {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    /* 2. Center the Feature Mockups */
    .feature-scene .premium-mockup {
        width: 100% !important;
        max-width: 500px !important;
        margin: 0 auto !important;
    }
}

/* Final Fixes for 30+ Clipping & Hero Logo Positioning (Mobile Only) */
@media (max-width: 1024px) {
    /* 1. Prevent 30+ from getting cut off at the bottom */
    .metrics-num {
        line-height: 1 !important;
        padding-bottom: 5px; /* Extra safety buffer */
    }
    
    /* 2. Reorder Hero Section Elements */
    .fluid-hero-wrapper {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .hero-text {
        display: contents !important;
    }
    
    .hero-text .pill-badge {
        order: 1;
        margin-bottom: 1.5rem;
    }
    
    .hero-text .mega-title {
        order: 2;
        margin-bottom: 2rem;
    }
    
    .hero-abstract {
        order: 3;
        margin: 0 auto 2rem auto !important; /* Center and add spacing */
        width: 100%;
        max-width: 400px;
        display: flex;
        justify-content: center;
    }
    
    .hero-abstract .custom-intro-anim {
        width: 100% !important;
        height: auto !important;
    }
    
    .hero-text .subtitle {
        order: 4;
        margin-bottom: 2rem;
    }
    
    .hero-text .cta-group {
        order: 5;
    }
}

/* ==========================================================================
   MOBILE LAYOUT REFINEMENTS (Tasks 1-4)
   ========================================================================== */
@media (max-width: 1024px) {
    /* Task 1: Fix Gap Before Less Paperwork */
    .hero.fluid-section {
        padding-top: 5rem !important;
    }
    .fluid-hero-wrapper {
        padding-top: 0 !important;
    }
    .hero-text .pill-badge {
        margin-top: 0 !important;
        margin-bottom: 1rem !important;
    }
    .hero-text .mega-title {
        margin-top: 0 !important;
    }
    
    /* Task 2: Justify Text in Engine Section */
    .engine-branding p.secondary-text {
        text-align: justify !important;
        text-wrap: normal !important;
        text-align-last: center; /* Looks great on last line */
        padding: 0 1.5rem !important;
        line-height: 1.6;
    }
    
    /* Task 3: Redesign 30+ Metric (Clean & Typographic) */
    .metrics-card {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }
    .metrics-card::before {
        display: none !important;
    }
    .metrics-num {
        font-size: clamp(6rem, 30vw, 11rem) !important;
        letter-spacing: -4px !important;
        color: #fff !important;
        background: none !important; /* Remove gradient clipping */
        -webkit-text-fill-color: initial !important;
    }
    .metrics-tag {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        font-size: 0.85rem !important;
        letter-spacing: 2px !important;
        color: #fff !important;
        text-transform: uppercase;
        border-radius: 0 !important;
        margin-bottom: 0.8rem !important;
    }
    .metrics-desc {
        color: #868e96 !important;
        font-size: 0.95rem !important;
    }
    
    /* Task 4: Fix MEI+Lab Nodes */
    .node-pill {
        width: 100% !important;
        max-width: 250px !important;
        border-radius: 100px !important;
        padding: 0.5rem 1.5rem 0.5rem 0.5rem !important;
        justify-content: flex-start !important;
    }
    .node-pill-text {
        text-align: left !important;
        margin-left: 0.5rem;
    }
    /* Expand the dashed line slightly to ensure it connects properly */
    .hub-spoke-container::before {
        top: 200px !important;
        bottom: 20px !important;
    }
}

/* ==========================================================================
   MOBILE INTERLEAVED FEATURES REDESIGN
   ========================================================================== */
@media (max-width: 1024px) {
    .interactive-features {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 1rem !important;
    }
    
    .feature-tabs, .feature-display {
        display: contents !important;
    }
    
    /* Style the tabs to look like beautiful section headers on mobile */
    .feature-tab {
        display: flex !important;
        align-items: flex-start !important;
        background: rgba(20, 20, 25, 0.9) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 16px !important;
        padding: 1.5rem !important;
        margin-bottom: 1rem !important;
        pointer-events: none !important; /* Stop clicks */
        opacity: 1 !important;
        transition: none !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    }
    
    /* Kill any JS interval flashing styles */
    .feature-tab.active {
        background: rgba(20, 20, 25, 0.9) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        transform: none !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    }
    
    .feature-tab .tab-icon {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.2rem !important;
        background: rgba(255,255,255,0.05) !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-right: 1rem !important;
        flex-shrink: 0 !important;
    }
    
    .feature-tab .tab-text h3 {
        font-size: 1.2rem !important;
        margin-bottom: 0.4rem !important;
        color: #fff !important;
    }
    
    .feature-tab .tab-text p {
        font-size: 0.95rem !important;
        color: #adb5bd !important;
        line-height: 1.5 !important;
    }
    
    /* Display scenes statically beneath tabs */
    .feature-scene {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        height: auto !important;
        width: 100% !important;
        display: block !important;
        margin-bottom: 4rem !important;
        transition: none !important;
    }
    
    .feature-scene.active-scene {
        transform: none !important;
    }
    
    .feature-scene .premium-mockup {
        width: 100% !important;
        max-width: 500px !important;
        margin: 0 auto !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.4) !important;
        border-radius: 16px !important;
    }
    
    /* Ordering */
    .feature-tab:nth-child(1) { order: 1; }
    #scene-1 { order: 2; }
    .feature-tab:nth-child(2) { order: 3; }
    #scene-2 { order: 4; }
    .feature-tab:nth-child(3) { order: 5; }
    #scene-3 { order: 6; }
    .feature-tab:nth-child(4) { order: 7; }
    #scene-4 { order: 8; }
    .feature-tab:nth-child(5) { order: 9; }
    #scene-5 { order: 10; margin-bottom: 2rem !important; }
}

/* ==========================================================================
   DEVELOPER HEADER MOBILE FIX
   ========================================================================== */
@media (max-width: 768px) {
    .profile-header {
        gap: 0.8rem !important;
        margin-bottom: 1.5rem !important;
    }
    .profile-header .coin {
        width: 60px !important;
        height: 60px !important;
    }
    .developer-name {
        font-size: clamp(1.2rem, 5vw, 1.8rem) !important;
        white-space: nowrap !important; /* Force single line */
        margin-bottom: 0.2rem !important;
    }
    .developer-title {
        font-size: 0.7rem !important;
        line-height: 1.3 !important;
    }
}

/* ==========================================================================
   MOBILE CORE ENGINE - REDESIGN V3 (Premium Typography)
   ========================================================================== */
@media (max-width: 1024px) {
    /* 1. Fix the ugly justified text gaps */
    .engine-branding p.secondary-text {
        text-align: justify !important;
        text-justify: inter-word !important;
        text-align-last: center !important;
        text-wrap: wrap !important;
        padding: 0 1rem !important;
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
        color: #ced4da !important;
    }
    
    /* 2. Containerless but polished metrics section */
    .metrics-card {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 2rem 0 !important;
        margin-top: 1rem !important;
        position: relative;
    }
    
    /* Add a subtle ethereal glow behind the number */
    .metrics-display::before {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 180px !important;
        height: 180px !important;
        background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%) !important;
        z-index: -1 !important;
        pointer-events: none !important;
    }
    
    /* Sleek metallic gradient for the 30+ */
    .metrics-num {
        font-size: 8.5rem !important;
        letter-spacing: -3px !important;
        line-height: 1 !important;
        background: linear-gradient(180deg, #ffffff 30%, #6c757d 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }
    
    .metrics-plus {
        font-size: 4.5rem !important;
        background: linear-gradient(180deg, #ffffff 30%, #6c757d 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        transform: translateY(-15px) !important;
    }
    
    /* Elegant pill for the tag */
    .metrics-tag {
        display: inline-block !important;
        color: #fff !important;
        font-size: 0.75rem !important;
        letter-spacing: 2px !important;
        font-weight: 800 !important;
        margin-top: 1rem !important;
        margin-bottom: 1.2rem !important;
        background: rgba(255,255,255,0.04) !important;
        padding: 0.6rem 1.2rem !important;
        border-radius: 30px !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
    }
    
    .metrics-desc {
        color: #868e96 !important;
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        text-align: center !important;
        text-wrap: balance !important;
    }
}

/* ==========================================================================
   MOBILE CORE ENGINE - REDESIGN V4 (Side-by-Side Card Layout)
   ========================================================================== */
@media (max-width: 1024px) {
    /* The Card Container */
    .metrics-card {
        background: rgba(15, 15, 18, 0.8) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important;
        padding: 2.5rem 1.5rem !important;
        margin-top: 2rem !important;
        border-radius: 20px !important;
        backdrop-filter: blur(10px) !important;
        position: relative;
    }
    
    /* Remove previous ethereal glow */
    .metrics-display::before {
        display: none !important;
    }
    
    /* Align Content Side-by-Side */
    .metrics-content {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .counter-wrapper {
        display: flex !important;
        align-items: center !important;
        border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
        padding-right: 1.5rem !important;
        margin-right: 1.5rem !important;
    }
    
    /* Sleek metallic gradient for the 30+ */
    .metrics-num {
        font-size: clamp(4rem, 15vw, 6rem) !important; /* Scaled down slightly to fit side-by-side */
        letter-spacing: -2px !important;
        line-height: 1 !important;
        background: linear-gradient(180deg, #ffffff 20%, #868e96 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        margin: 0 !important;
    }
    
    .metrics-plus {
        font-size: clamp(2.5rem, 8vw, 3.5rem) !important;
        background: linear-gradient(180deg, #ffffff 20%, #868e96 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        transform: translateY(-5px) !important;
    }
    
    /* Right Side Text container */
    .metrics-label-box {
        text-align: left !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    
    /* Text Styling to match the expected output */
    .metrics-tag {
        display: block !important;
        color: #fff !important;
        font-size: 0.95rem !important;
        letter-spacing: 0.5px !important;
        font-weight: 600 !important;
        margin: 0 0 0.4rem 0 !important;
        background: transparent !important;
        padding: 0 !important;
        border: none !important;
        text-transform: capitalize !important; /* Converts all-caps to Title Case */
    }
    
    .metrics-desc {
        color: #adb5bd !important;
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
        max-width: 100% !important;
        margin: 0 !important;
        text-align: left !important;
        text-wrap: normal !important;
    }
}

/* ==========================================================================
   MOBILE CORE ENGINE - REDESIGN V5 (Enhanced Card & Remove Desc)
   ========================================================================== */
@media (max-width: 1024px) {
    /* Hide the description text on mobile entirely */
    .metrics-desc {
        display: none !important;
    }
    
    /* Enhance the container with a premium white/silver gradient touch */
    .metrics-card {
        background: linear-gradient(135deg, rgba(30, 30, 35, 0.9), rgba(15, 15, 18, 0.95)) !important;
        /* Add a stunning white/silver gradient border effect using box-shadow */
        box-shadow: 
            0 20px 40px rgba(0,0,0,0.6), 
            inset 0 1px 1px rgba(255,255,255,0.4), 
            inset 0 0 20px rgba(255,255,255,0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        position: relative;
        overflow: hidden;
    }
    
    /* Add a soft white radial gradient glow behind the card to make it pop */
    .metrics-card::before {
        content: '' !important;
        position: absolute !important;
        top: -50px;
        left: -50px;
        width: 150px;
        height: 150px;
        background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%) !important;
        display: block !important;
        pointer-events: none;
    }
    
    /* Adjust text sizing slightly since the bottom text is gone */
    .metrics-tag {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        margin-top: 0 !important;
    }
}

/* ==========================================================================
   CORE ENGINE ORBITAL REDESIGN (Desktop & Mobile)
   ========================================================================== */

/* The Main Wrapper */
.orbital-metrics-wrapper {
    position: relative;
    width: 480px;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* Orbital Rings */
.orbital-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    pointer-events: none;
}
.orbital-ring-outer {
    width: 100%;
    height: 100%;
}
.orbital-ring-inner {
    width: 70%;
    height: 70%;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Center Core */
.orbital-center {
    position: relative;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 10;
    /* Glassmorphic center */
    background: radial-gradient(circle, rgba(20,20,25,0.95) 0%, rgba(10,10,12,0.98) 100%);
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 50px rgba(255,255,255,0.1), inset 0 0 20px rgba(255,255,255,0.05);
}

.orbital-center-glow {
    position: absolute;
    top: -20px;
    width: 100px;
    height: 40px;
    background: radial-gradient(ellipse, rgba(255,255,255,0.8) 0%, transparent 70%);
    filter: blur(10px);
    pointer-events: none;
}

.orbital-center .metrics-num {
    font-size: 5rem !important;
    letter-spacing: -2px !important;
    line-height: 1 !important;
    background: linear-gradient(180deg, #ffffff 20%, #868e96 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    margin: 0 !important;
}

.orbital-center .metrics-plus {
    font-size: 2.5rem !important;
    background: linear-gradient(180deg, #ffffff 20%, #868e96 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    transform: translateY(-5px) !important;
}

.orbital-center-label {
    font-size: 0.65rem;
    color: #fff;
    letter-spacing: 2px;
    line-height: 1.4;
    font-weight: 700;
    margin-top: 0.5rem;
}

/* Satellite Nodes */
.orbital-node {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 120px;
    z-index: 20;
}

.node-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(15,15,18,0.9);
    border: 1px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 0.8rem;
    box-shadow: 0 0 15px rgba(255,255,255,0.1);
    position: relative;
}

/* Dots on the ring */
.node-icon::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
}

/* Specific node placements */
.node-top { top: -20px; left: 50%; transform: translateX(-50%); }
.node-top .node-icon::before { bottom: -25px; }

.node-right { top: 25%; right: -40px; }
.node-right .node-icon::before { left: -25px; top: 50%; transform: translateY(-50%); }

.node-bottom-right { bottom: 0; right: 0; }
.node-bottom-right .node-icon::before { top: -15px; left: -15px; }

.node-bottom-left { bottom: 0; left: 0; }
.node-bottom-left .node-icon::before { top: -15px; right: -15px; }

.node-left { top: 25%; left: -40px; }
.node-left .node-icon::before { right: -25px; top: 50%; transform: translateY(-50%); }

.node-label {
    font-size: 0.65rem;
    color: #ced4da;
    line-height: 1.3;
    font-weight: 600;
}

/* Impact Pill */
.impact-pill {
    display: flex;
    align-items: center;
    background: rgba(10, 10, 12, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 0.8rem 2rem 0.8rem 0.8rem;
    gap: 1.5rem;
    box-shadow: 0 15px 30px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.1);
    position: relative;
    backdrop-filter: blur(10px);
}

.impact-pill::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 20px;
    background: radial-gradient(ellipse, rgba(255,255,255,0.6) 0%, transparent 70%);
    filter: blur(8px);
    pointer-events: none;
}

.impact-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    flex-shrink: 0;
}

.impact-text {
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255,255,255,0.2);
    padding-left: 1.5rem;
}

.impact-title {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 0.2rem;
}

.impact-desc {
    color: #adb5bd;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
}

/* Mobile Scaling */
@media (max-width: 1024px) {
    .engine-hub {
        flex-direction: column;
    }
    
    .orbital-metrics-wrapper {
        width: min(320px, 78vw);
        height: min(320px, 78vw);
        margin: 2rem auto;
    }
    
    .orbital-center {
        width: min(160px, 39vw);
        height: min(160px, 39vw);
    }
    
    .orbital-center .metrics-num {
        font-size: 3.5rem !important;
    }
    
    .orbital-center .metrics-plus {
        font-size: 1.8rem !important;
    }
    
    .orbital-center-label {
        font-size: 0.5rem;
    }
    
    .orbital-node {
        width: 90px;
    }
    
    .node-icon {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    
    .node-label {
        font-size: 0.55rem;
    }
    
    .node-right { right: -20px; }
    .node-left { left: -20px; }
    
    .impact-pill {
        padding: 0.6rem 1.5rem 0.6rem 0.6rem;
        gap: 1rem;
    }
    
    .impact-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
    
    .impact-text {
        padding-left: 1rem;
    }
    
    .impact-title, .impact-desc {
        font-size: 0.6rem;
    }
}

/* ==========================================================================
   FIX 30+ ALIGNMENT IN ORBITAL CORE (Desktop & Mobile)
   ========================================================================== */
.orbital-center .counter-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.orbital-center .metrics-num {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

.orbital-center .metrics-plus {
    margin: 0 0 0 4px !important;
    padding: 0 !important;
}

/* ==========================================================================
   REMOVE ORBITAL DOTS
   ========================================================================== */
.node-icon::before {
    display: none !important;
}

/* ==========================================================================
   FIX MOBILE 30+ VERTICAL ALIGNMENT
   ========================================================================== */
@media (max-width: 1024px) {
    .orbital-center .metrics-plus {
        transform: translateY(-12px) !important; /* Push the plus sign up to align with the top of the 30 */
    }
}

/* ==========================================================================
   FIX MOBILE 30+ VERTICAL ALIGNMENT (Centered Level)
   ========================================================================== */
@media (max-width: 1024px) {
    .orbital-center .metrics-plus {
        /* Remove the top-alignment and perfectly center it vertically */
        transform: translateY(-2px) !important; 
    }
}

/* ==========================================================================
   MOBILE TIMELINE LAYOUT REDESIGN
   ========================================================================== */
@media (max-width: 1024px) {
    .interactive-features {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 50/50 split */
        column-gap: 1rem !important;
        row-gap: 2.5rem !important;
        position: relative !important;
        padding-left: 30px !important;
        counter-reset: timeline-counter;
        margin-top: 3rem !important;
    }
    
    .feature-tabs, .feature-display {
        display: contents !important;
    }
    
    /* Vertical line */
    .interactive-features::before {
        content: '';
        position: absolute;
        left: 0;
        top: 20px;
        bottom: 50px;
        width: 1px;
        background: rgba(255, 255, 255, 0.2);
    }
    
    /* Assign Grid Rows */
    .feature-tab:nth-child(1) { grid-row: 1; grid-column: 1; }
    #scene-1 { grid-row: 1; grid-column: 2; }
    .feature-tab:nth-child(2) { grid-row: 2; grid-column: 1; }
    #scene-2 { grid-row: 2; grid-column: 2; }
    .feature-tab:nth-child(3) { grid-row: 3; grid-column: 1; }
    #scene-3 { grid-row: 3; grid-column: 2; }
    .feature-tab:nth-child(4) { grid-row: 4; grid-column: 1; }
    #scene-4 { grid-row: 4; grid-column: 2; }
    .feature-tab:nth-child(5) { grid-row: 5; grid-column: 1; }
    #scene-5 { grid-row: 5; grid-column: 2; }
    
    /* Tab Styling */
    .feature-tab {
        position: relative !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        counter-increment: timeline-counter;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        order: unset !important;
        pointer-events: none !important;
    }
    
    /* Numbered Circle */
    .feature-tab::before {
        content: counter(timeline-counter);
        position: absolute;
        left: -40px; /* Aligns over the timeline line */
        top: 5px;
        width: 20px;
        height: 20px;
        background: #111;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.65rem;
        font-weight: 700;
        color: #fff;
        z-index: 10;
    }
    
    .tab-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.2rem !important;
        margin-bottom: 0.5rem !important;
        background: rgba(255,255,255,0.05) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .tab-text h3 {
        font-size: 1rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    .tab-text p {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        color: #adb5bd !important;
    }
    
    /* Scene Styling (Right Column) */
    .feature-scene {
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        height: auto !important;
        margin: 0 !important;
        width: 100% !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        order: unset !important;
    }
    
    .feature-scene .premium-mockup {
        width: 180% !important; /* Make it wide enough to not squish */
        max-width: none !important;
        margin: 0 !important;
        transform: scale(0.55);
        transform-origin: top right;
        box-shadow: 0 10px 20px rgba(0,0,0,0.5) !important;
    }
}

/* ==========================================================================
   FIX MOBILE FEATURES LAYOUT SQUISHING & MOCKUP SIZING
   ========================================================================== */
@media (max-width: 1024px) {
    .interactive-features {
        /* Give text more space, fix mockup column width */
        grid-template-columns: 1fr 140px !important; 
        column-gap: 1rem !important;
    }
    
    .feature-tab {
        /* Ensure text doesn't squish too much */
        min-width: 0 !important; 
    }
    
    .tab-text p {
        /* slightly smaller font to fit narrow screens */
        font-size: 0.7rem !important; 
    }
    
    /* Make the scene container a fixed square */
    .feature-scene {
        width: 140px !important;
        height: 140px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }
    
    /* Scale the complex mockup down inside the fixed square */
    .feature-scene .premium-mockup {
        width: 350px !important; /* Original width to render at */
        height: 350px !important; /* Force square aspect ratio before scaling */
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) scale(0.4) !important;
        transform-origin: center center !important;
        margin: 0 !important;
        /* Optional: Hide scrollbars or overflowing complex content in the square */
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    
    /* Specific adjustments for inner contents of the mockups so they center nicely in the square */
    .premium-mockup .mockup-body {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
}

/* ==========================================================================
   MAKE DOCUMENTATION STUDIO MOCKUP SQUARE
   ========================================================================== */
#scene-3 .premium-mockup {
    height: auto !important;
    aspect-ratio: 1 / 1 !important; /* Force a perfect square */
    justify-content: center !important; /* Center the internal content vertically */
    margin: 0 auto !important; /* Ensure it stays centered */
}

/* ==========================================================================
   MEI+ LAB MOBILE REDESIGN (v2 — clean stacked cards)
   ========================================================================== */
/* Hide desktop injections initially */
.lab-mobile-only {
    display: none !important;
}

@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    /* Show injections on mobile */
    .lab-mobile-only {
        display: block !important;
    }
    .node-arrow.lab-mobile-only {
        display: inline-block !important;
    }

    /* Tighten the intro copy so the section doesn't feel so top-heavy */
    .meilab-section .mega-title {
        font-size: 2.4rem !important;
        margin-bottom: 0.75rem !important;
    }
    .meilab-section > .content-wrapper > p.secondary-text {
        font-size: 0.92rem !important;
        line-height: 1.6 !important;
        margin: 0 auto 2.5rem auto !important;
        padding: 0 0.5rem !important;
        text-align: justify !important;
        text-align-last: center !important;
    }

    /* Redesign the Hub Container */
    .interactive-hub {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding-top: 1rem !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    /* Reposition the Spinning Video Logo to Top Center */
    .hub-center {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        margin-bottom: 3rem !important;
        background: rgba(0, 0, 0, 0.4) !important;
        border: 3px solid rgba(255,255,255,0.8) !important;
        border-radius: 50% !important;
        box-shadow: 0 0 20px rgba(255,255,255,0.4), inset 0 0 15px rgba(255,255,255,0.2) !important;
        z-index: 10 !important;
        width: 140px !important;
        height: 140px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Soft ambient glow behind the logo instead of a hard circle outline */
    .hub-center::before {
        content: '' !important;
        position: absolute !important;
        inset: -25% !important;
        background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 45%, transparent 72%) !important;
        filter: blur(25px) !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }

    /* Glowing ring encircling the logo */
    .hub-center::after {
        content: '' !important;
        position: absolute !important;
        inset: -14% !important;
        border-radius: 50% !important;
        border: 1.5px solid rgba(255,255,255,0.7) !important;
        box-shadow: 0 0 12px rgba(255,255,255,0.35), 0 0 24px rgba(255,255,255,0.15), inset 0 0 12px rgba(255,255,255,0.1) !important;
        z-index: 2 !important;
        pointer-events: none !important;
        animation: hubRingPulse 4s infinite ease-in-out !important;
    }

    .hub-video {
        position: relative !important;
        width: 82% !important;
        height: 82% !important;
        z-index: 1 !important;
        -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 78%) !important;
        mask-image: radial-gradient(circle, #000 55%, transparent 78%) !important;
    }

    /* Vertical stack of cards */
    .hub-spoke-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.1rem !important;
        position: relative !important;
        width: 100% !important;
        max-width: 460px !important;
        margin: 0 auto !important;
        padding: 0 0.25rem !important;
    }

    /* Hide the desktop radial layout (circle + rotating spoke lines) */
    .spoke-line {
        display: none !important;
    }

    /* Vertical line connecting the logo ring down through every card,
       centered exactly under the logo, running behind the cards */
    .hub-spoke-container::before {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        top: 140px !important;
        bottom: 12px !important;
        width: 2px !important;
        transform: translateX(-50%) !important;
        background: linear-gradient(to bottom, rgba(255,255,255,0.85), rgba(255,255,255,0.3)) !important;
        box-shadow: 0 0 10px rgba(255,255,255,0.5) !important;
        z-index: 0 !important;
    }

    /* Stack Nodes */
    .hub-node {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        margin: 0 !important;
        display: block !important;
        max-width: none !important;
    }

    /* Chevron connector marking each card's junction with the line —
       centered exactly under the logo, sitting in the gap above each card */
    .hub-node::before {
        content: '\f078' !important;
        font-family: 'Font Awesome 6 Free' !important;
        font-weight: 900 !important;
        position: absolute !important;
        left: 50% !important;
        top: -1px !important;
        transform: translate(-50%, -50%) !important;
        font-size: 0.65rem !important;
        color: #fff !important;
        text-shadow: 0 0 8px rgba(255,255,255,0.8) !important;
        background: #0a0a0b !important;
        width: 18px !important;
        height: 18px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 2 !important;
        border: 1px solid rgba(255,255,255,0.3) !important;
    }

    .hub-node::after {
        display: none !important;
    }

    @keyframes hubRingPulse {
        0%, 100% { opacity: 0.55; box-shadow: 0 0 12px rgba(255,255,255,0.3), 0 0 24px rgba(255,255,255,0.12), inset 0 0 12px rgba(255,255,255,0.08); }
        50% { opacity: 1; box-shadow: 0 0 18px rgba(255,255,255,0.5), 0 0 34px rgba(255,255,255,0.22), inset 0 0 16px rgba(255,255,255,0.12); }
    }

    /* Card */
    .node-pill {
        display: grid !important;
        grid-template-columns: 50px 1fr !important;
        grid-template-rows: auto auto !important;
        column-gap: 0.9rem !important;
        row-gap: 0.3rem !important;
        background: linear-gradient(165deg, rgba(16,16,18,0.96), rgba(6,6,7,0.98)) !important;
        border: 1px solid rgba(255,255,255,0.06) !important;
        border-radius: 18px !important;
        padding: 1.05rem 2.5rem 1.05rem 1.05rem !important;
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        box-shadow: 0 6px 16px rgba(0,0,0,0.4) !important;
        position: relative !important;
        z-index: 1 !important;
        transition: border-color 0.3s ease, transform 0.3s ease !important;
    }

    .node-pill:active {
        transform: scale(0.98) !important;
        border-color: rgba(255,255,255,0.16) !important;
    }

    /* Circular Icon */
    .node-pill-icon {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        width: 46px !important;
        height: 46px !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,0.06) !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        font-size: 1.05rem !important;
        color: #fff !important;
    }

    /* Title Text */
    .node-pill-text {
        grid-column: 2 !important;
        grid-row: 1 !important;
        text-align: left !important;
        margin: 0 !important;
        font-size: 0.98rem !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        align-self: end !important;
        color: #fff !important;
    }

    /* Description Text */
    .node-pill-desc {
        grid-column: 2 !important;
        grid-row: 2 !important;
        font-size: 0.78rem !important;
        color: #9ba1a8 !important;
        line-height: 1.45 !important;
        text-align: justify !important;
        text-align-last: left !important;
        align-self: start !important;
        white-space: normal !important;
    }

    /* Numbering — small badge pinned to the top-right corner */
    .node-num {
        position: absolute !important;
        top: 1rem !important;
        right: 1.1rem !important;
        font-size: 0.68rem !important;
        letter-spacing: 0.05em !important;
        color: rgba(255,255,255,0.35) !important;
        text-align: right !important;
    }

    /* Arrow — pinned to the bottom-right corner */
    .node-arrow {
        position: absolute !important;
        bottom: 1.05rem !important;
        right: 1.1rem !important;
        font-size: 0.85rem !important;
        color: rgba(255,255,255,0.5) !important;
        text-align: right !important;
    }
}

/* ==========================================================================
   FINAL CONSOLIDATED MOBILE FIX — HERO SECTION
   (Supersedes all earlier conflicting hero mobile rules above. Desktop
   is untouched since everything here is scoped to max-width: 1024px.)
   ========================================================================== */
@media (max-width: 1024px) {
    .hero.fluid-section {
        min-height: auto !important;
        height: auto !important;
        display: block !important;
        padding: 2rem 0 2.5rem 0 !important;
    }

    .fluid-hero-wrapper {
        display: flex !important;
        flex-direction: column !important;
        padding-top: 0 !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        gap: 0 !important;
    }

    .hero-text {
        display: contents !important;
    }

    .hero-text .pill-badge {
        order: 1;
        margin: 0 0 1rem 0 !important;
        font-size: 0.68rem !important;
    }

    .hero-text .mega-title {
        order: 2;
        font-size: clamp(2.6rem, 10vw, 3.8rem) !important;
        line-height: 1.04 !important;
        margin: 0 0 1rem 0 !important;
    }

    /* Logo / intro animation — kept modest so it never dominates the screen */
    .hero-abstract {
        order: 3;
        position: relative !important;
        width: 100% !important;
        max-width: 240px !important;
        margin: 0 auto 1.3rem auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        aspect-ratio: 1 / 1 !important;
    }

    /* Soft ambient glow behind the logo instead of a hard card edge */
    .hero-abstract::before {
        content: '' !important;
        position: absolute !important;
        inset: -15% !important;
        background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 45%, transparent 72%) !important;
        filter: blur(20px) !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }

    .hero-abstract .custom-intro-anim {
        position: relative !important;
        width: 82% !important;
        height: 82% !important;
        max-width: 210px !important;
        object-fit: cover !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        z-index: 1 !important;
        /* Fade the hard rectangular edges into the background */
        -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 78%) !important;
        mask-image: radial-gradient(circle, #000 55%, transparent 78%) !important;
    }

    .hero-text .hero-tagline {
        order: 4;
        text-align: left !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin: 0 0 1.6rem 0 !important;
    }

    .hero-text .cta-group {
        order: 5;
        width: 100%;
    }

    .hero-text .cta-group .primary-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   FINAL CONSOLIDATED MOBILE FIX — ENQUIRY SECTION "LET'S CONNECT" HEADING
   The old rule (.form-typography .mega-title { font-size: 5rem !important })
   was never brought in line with the hero's fluid clamp fix above, so on
   narrow phones (Galaxy S8+ 360px, iPhone SE, etc.) the word "Connect."
   rendered at a fixed 80px and overflowed past the edge of the screen.
   This uses the exact same fluid clamp approach as the hero fix so both
   headings scale consistently. Desktop is untouched (scoped to max-width:1024).
   ========================================================================== */
@media (max-width: 1024px) {
    .form-typography .mega-title {
        font-size: clamp(2.6rem, 10vw, 3.8rem) !important;
        line-height: 1.05 !important;
        margin-top: 0 !important;
        margin-bottom: 1.25rem !important;
    }

    .enquiries-section .form-typography p.large-text {
        max-width: 100% !important;
    }
}

/* ==========================================================================
   FINAL CONSOLIDATED MOBILE FIX — FEATURES SECTION REDESIGN
   Replaces the old tab+animated-preview interaction (built for hover/click)
   with a clean static list. No transitions/animations on mobile.
   Desktop (.feature-tabs / .feature-display side-by-side interactive
   showcase) is completely untouched — everything here is scoped to
   max-width: 1024px.
   ========================================================================== */
@media (max-width: 1024px) {
    .features-section .mega-heading {
        font-size: clamp(2rem, 8vw, 2.8rem) !important;
        margin-bottom: 2.25rem !important;
    }

    .interactive-features {
        display: block !important;
        min-height: auto !important;
    }

    /* The live preview mockups were designed for hover/tab interaction on
       desktop; on mobile we show a clean text-forward card list instead. */
    .feature-display {
        display: none !important;
    }

    .feature-tabs {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .feature-tab {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 50px 1fr !important;
        column-gap: 1rem !important;
        row-gap: 0.35rem !important;
        background: linear-gradient(165deg, rgba(16,16,18,0.96), rgba(6,6,7,0.98)) !important;
        border: 1px solid rgba(255,255,255,0.06) !important;
        border-radius: 18px !important;
        padding: 1.2rem 1.3rem !important;
        margin: 0 !important;
        opacity: 1 !important;
        order: unset !important;
        counter-increment: none !important;
        cursor: default !important;
        pointer-events: none !important;
        transition: none !important;
        box-shadow: 0 6px 16px rgba(0,0,0,0.4) !important;
    }

    /* Kill every ::before trick from earlier redesign attempts
       (active-tab bar, numbered timeline circle, etc.) */
    .feature-tab::before {
        content: none !important;
        display: none !important;
    }

    .interactive-features::before {
        content: none !important;
        display: none !important;
    }

    .feature-tab .tab-icon {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        align-self: center !important;
        width: 46px !important;
        height: 46px !important;
        margin-top: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,0.06) !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        font-size: 1.05rem !important;
        color: #fff !important;
    }

    .feature-tab .tab-text {
        grid-column: 2 !important;
    }

    .feature-tab .tab-text h3 {
        font-size: 1rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.35rem !important;
        color: #fff !important;
        font-weight: 700 !important;
    }

    .feature-tab .tab-text p {
        font-size: 0.82rem !important;
        line-height: 1.5 !important;
        color: #9ba1a8 !important;
        margin: 0 !important;
        text-align: justify !important;
        text-align-last: left !important;
    }
}

/* ==========================================================================
   FINAL CONSOLIDATED MOBILE FIX — GENERAL SECTION SPACING
   Unifies vertical rhythm across phones AND tablets (iPad portrait widths
   fall inside this same max-width:1024 bucket, so they now get identical,
   consistent treatment instead of landing in a gap between old breakpoints).
   Desktop untouched.
   ========================================================================== */
@media (max-width: 1024px) {
    .fluid-section:not(.hero) {
        padding: 5rem 0 !important;
    }

    #engine.engine-section {
        padding: 4rem 0 3rem 0 !important;
    }

    .content-wrapper {
        box-sizing: border-box !important;
    }
}
/* ==========================================================================
   FINAL CONSOLIDATED MOBILE FIX — UNIFIED PREMIUM CARD THEME
   Every card-like component across the mobile experience (impact tiles,
   audience cards, availability card, social links, contact form, feature
   cards, meilab cards) now shares one consistent gunmetal/graphite surface
   language: the same gradient, border, radius and shadow. Icons share one
   consistent circular treatment too. Nothing is restructured — only the
   surface styling changes. Desktop is completely untouched (max-width:1024).
   ========================================================================== */
@media (max-width: 1024px) {
    /* Shared card surface — flat matte black, not glossy */
    .impact-tile,
    .audience-card,
    .availability-card,
    .premium-social-link {
        background: linear-gradient(165deg, rgba(16,16,18,0.96), rgba(6,6,7,0.98)) !important;
        border: 1px solid rgba(255,255,255,0.06) !important;
        border-radius: 18px !important;
        box-shadow: 0 6px 16px rgba(0,0,0,0.4) !important;
        backdrop-filter: none !important;
    }

    .impact-tile {
        padding: 1.4rem !important;
    }

    .audience-card {
        padding: 1.75rem 1.4rem !important;
    }

    /* This card is centered top-to-bottom (icon, title, description) —
       the description must stay centered too, not justified, or it
       clashes visually with the centered icon/title above it. */
    .audience-card p {
        text-align: center !important;
        text-align-last: center !important;
    }

    .availability-card {
        padding: 1.4rem !important;
        max-width: 100% !important;
    }

    .premium-social-link {
        padding: 0.9rem 1.1rem 0.9rem 0.9rem !important;
    }

    .premium-form-wrapper {
        background: linear-gradient(165deg, rgba(16,16,18,0.96), rgba(6,6,7,0.98)) !important;
        border: 1px solid rgba(255,255,255,0.06) !important;
        border-radius: 18px !important;
        box-shadow: 0 6px 16px rgba(0,0,0,0.4) !important;
        padding: 1.6rem !important;
        transform: none !important;
    }

    /* Shared icon treatment — matte, not glossy */
    .tile-icon,
    .audience-icon,
    .platform-icon-wrapper,
    .social-icon-box {
        border-radius: 50% !important;
        background: rgba(255,255,255,0.06) !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        box-shadow: none !important;
    }

    .tile-icon {
        width: 46px !important;
        height: 46px !important;
        font-size: 1.05rem !important;
        margin-bottom: 1.1rem !important;
    }

    .audience-icon {
        width: 64px !important;
        height: 64px !important;
        font-size: 1.8rem !important;
        margin-bottom: 1.1rem !important;
    }

    .platform-icon-wrapper {
        width: 44px !important;
        height: 44px !important;
    }

    .social-icon-box {
        width: 42px !important;
        height: 42px !important;
    }

    /* Titles inside the unified cards stay clean and consistent */
    .audience-card h3,
    .impact-tile h4 {
        font-size: 1.02rem !important;
        margin-bottom: 0.5rem !important;
    }
}

/* ==========================================================================
   MEI+ LAB ACTIVATION SCREEN
   ========================================================================== */
.activation-form {
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.act-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 15px;
    border-radius: 8px;
    color: #fff;
    font-size: 0.95rem;
    font-family: var(--font-body);
    transition: all 0.3s;
    width: 100%;
}

.act-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
}

.act-accordion {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.act-accordion-header {
    padding: 12px 15px;
    font-size: 0.85rem;
    color: #adb5bd;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s;
}

.act-accordion-header:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.act-accordion-body {
    padding: 0 15px 15px 15px;
    font-size: 0.8rem;
    color: #868e96;
    line-height: 1.5;
}

/* Link underline hover animation */
.act-link {
    position: relative;
    display: inline-block;
    padding-bottom: 3px;
    transition: transform 0.3s ease;
}
.act-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: currentColor;
    transition: width 0.3s ease;
}
.act-link:hover {
    transform: translateX(4px);
}
.act-link:hover::after {
    width: 100%;
}
@media (max-width: 768px) { .core-engine-desc { text-align: justify !important; text-justify: inter-word !important; } }

/* ==========================================================================
   MOBILE NAVIGATION FOR TABLETS (iPad Mini / Air / Pro 11" PORTRAIT)
   The navbar only switched to the hamburger menu below 768px, but every
   other section of the site (hero, features, cards, hub) already switches
   to its mobile layout up through 1024px. That mismatch meant iPad Mini
   (768px), Air (820px), and Pro 11" (834px) in portrait were forced to
   cram all 7 nav links plus the pill "JOIN THE WAITING LIST" button into
   a bar with nowhere near enough room, while the content below it was
   already rendering in mobile layout. This brings the nav breakpoint in
   line with the rest of the site. True desktops/laptops (1025px+) are
   unaffected.
   ========================================================================== */
@media (max-width: 1024px) {
    .nav-links, .nav-actions {
        display: none !important;
    }
    .mobile-menu-btn {
        display: flex !important;
        position: relative !important;
        z-index: 1001 !important;
    }
    .nav-links.active {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: rgba(8, 8, 10, 0.98) !important;
        padding: 8rem 2rem 2rem 2rem !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 2.5rem !important;
        z-index: 1000 !important;
        border: none !important;
        overflow-y: auto !important;
    }
    .nav-links.active li a {
        font-size: 1.8rem !important;
        font-weight: 600 !important;
        color: #fff !important;
        letter-spacing: 1px !important;
    }
}

/* ==========================================================================
   MOBILE NAVIGATION FOR LANDSCAPE PHONES
   Width-only breakpoints (max-width: 768px) miss landscape phones — most
   report an innerWidth well above 768px once rotated, so the full desktop
   nav (every link inline, plus the pill-shaped "JOIN THE WAITING LIST"
   button) was rendering in a viewport only ~350-430px *tall*. With no room,
   the pill's text wrapped to multiple lines and its border-radius:100px
   turned it into the broken circular blob seen in landscape.
   Targeting a short viewport height in landscape orientation is a reliable
   signal for "this is a phone" regardless of which way it's rotated —
   tablets and laptops in landscape have far more vertical space than this
   and are unaffected. This forces the same hamburger + linear (stacked)
   dropdown menu already used in portrait mode.
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .nav-links, .nav-actions {
        display: none;
    }
    .mobile-menu-btn {
        display: flex !important;
        position: relative !important;
        z-index: 1001 !important;
    }
    .nav-links.active {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: rgba(8, 8, 10, 0.98) !important;
        padding: 4.5rem 2rem 2rem 2rem !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 1.1rem !important;
        z-index: 1000 !important;
        border: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .nav-links.active li a {
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        color: #fff !important;
        letter-spacing: 0.5px !important;
    }
}
/* ==========================================================================
   HERO REDESIGN — FINAL (matches reference screenshot)
   Placed last on purpose so it wins over every earlier hero patch above.
   Structure: stacked 3-line title -> logo mark with orbit/wave decoration
   -> muted tagline -> outlined rectangular CTA. Fully fluid from small
   phones through large desktop monitors, plus explicit landscape handling.
   ========================================================================== */

/* ---- Base (mobile-first) ---- */
.hero.fluid-section {
    min-height: auto !important;
    padding: 2.5rem 0 3.5rem !important;
    display: flex !important;
    align-items: stretch !important;
}

.hero .fluid-hero-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0 !important;
    width: 100% !important;
}

.hero .hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    order: 1;
}

.hero-stack-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    font-size: clamp(2.6rem, 11vw, 4.4rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 1.25rem !important;
}

.hero-stack-title .title-line {
    display: block;
    color: #fff;
    font-weight: 800;
}

.hero-stack-title .title-line.gradient-text {
    background: linear-gradient(135deg, #ffffff 0%, #9aa0a8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---- Logo / orbit graphic ---- */
.hero .hero-abstract {
    order: 2;
    width: min(92vw, 460px);
    aspect-ratio: 1 / 1;
    margin: 0.5rem auto 1.75rem;
    position: relative;
}

.hero-orbit-deco {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.orbit-ring-a { animation: heroRingSpin 60s linear infinite; transform-origin: 300px 300px; }
.orbit-ring-b { animation: heroRingSpin 45s linear infinite reverse; transform-origin: 300px 300px; }
@keyframes heroRingSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.wave-path { stroke-dasharray: 340; stroke-dashoffset: 0; animation: heroWaveFlow 8s ease-in-out infinite alternate; }
.wave-path-right { animation-delay: -3s; }
@keyframes heroWaveFlow {
    0%   { stroke-dashoffset: 0; opacity: 0.55; }
    50%  { stroke-dashoffset: 40; opacity: 0.9; }
    100% { stroke-dashoffset: 0; opacity: 0.55; }
}

.orbit-dots circle, .wave-nodes circle { animation: heroDotPulse 3.2s ease-in-out infinite; }
.wave-nodes circle:nth-child(2n) { animation-delay: -1.1s; }
.wave-nodes circle:nth-child(3n) { animation-delay: -2s; }
@keyframes heroDotPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }

.hero .hero-abstract .custom-intro-anim {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 62%;
    height: 62%;
    margin: 0;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.6));
}

.hero .hero-abstract::before {
    inset: 6%;
    background: radial-gradient(circle, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.02) 45%, transparent 72%);
}

/* ---- Tagline ---- */
.hero .hero-tagline {
    order: 3;
    text-align: center !important;
    text-align-last: center !important;
    max-width: 480px;
    margin: 0 auto 2.25rem !important;
    font-size: clamp(1.05rem, 4vw, 1.3rem) !important;
    color: #8b9bb4 !important;
}

/* ---- CTA: outlined rectangular button, matches reference ---- */
.hero .cta-group {
    order: 4;
    width: 100%;
    display: flex;
    justify-content: center;
}

.hero .cta-group .outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 420px;
    padding: 1.1rem 1.5rem;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 4px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(0.85rem, 3.6vw, 1rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: var(--transition);
}

.hero .cta-group .outline-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.7);
    transform: translateY(-2px);
}

.hero .cta-group .outline-btn i {
    transition: transform 0.3s ease;
}
.hero .cta-group .outline-btn:hover i {
    transform: translateX(4px);
}

/* ---- Small phones (<=380px, e.g. iPhone SE) ---- */
@media (max-width: 380px) {
    .hero-stack-title { font-size: clamp(2.2rem, 12vw, 2.6rem) !important; }
    .hero .hero-abstract { width: 88vw; margin-bottom: 1.25rem; }
    .hero .cta-group .outline-btn { padding: 1rem 1rem; font-size: 0.8rem; }
}

/* ---- Large phones / small tablets portrait (481–767px) ---- */
@media (min-width: 481px) and (max-width: 767px) {
    .hero-stack-title { font-size: clamp(3rem, 9vw, 3.8rem) !important; }
    .hero .hero-abstract { width: min(80vw, 420px); }
}

/* ---- Tablets portrait: iPad Mini/Air/Pro 11" (768–1024px, portrait) ---- */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .hero.fluid-section { padding: 3rem 0 4rem !important; }
    .hero-stack-title { font-size: clamp(3.4rem, 8vw, 4.6rem) !important; }
    .hero .hero-abstract { width: min(62vw, 460px); }
    .hero .hero-tagline { max-width: 560px; }
    .hero .cta-group .outline-btn { max-width: 380px; }
}

/* ---- Landscape phones (short viewport height) ---- */
@media (max-height: 500px) and (orientation: landscape) {
    .hero.fluid-section { padding: 1.5rem 0 2rem !important; }
    .hero .fluid-hero-wrapper { flex-direction: row !important; text-align: left !important; gap: 2rem !important; align-items: center !important; }
    .hero .hero-text { align-items: flex-start; order: 1; flex: 1 1 55%; }
    .hero-stack-title { align-items: flex-start !important; font-size: clamp(1.8rem, 6vw, 2.6rem) !important; margin-bottom: 0.75rem !important; }
    .hero .hero-tagline { text-align: left !important; text-align-last: left !important; margin: 0 0 1.25rem !important; font-size: 0.95rem !important; }
    .hero .cta-group { justify-content: flex-start; }
    .hero .cta-group .outline-btn { width: auto; padding: 0.75rem 1.4rem; font-size: 0.75rem; }
    .hero .hero-abstract { order: 2; flex: 0 0 38%; width: 38%; max-width: 220px; margin: 0; }
}

/* ---- Tablets landscape (900–1180px roughly) ---- */
@media (min-width: 900px) and (max-width: 1180px) and (orientation: landscape) {
    .hero .fluid-hero-wrapper { flex-direction: row !important; text-align: left !important; gap: 3rem !important; }
    .hero .hero-text { align-items: flex-start; flex: 1 1 55%; }
    .hero-stack-title { align-items: flex-start !important; font-size: clamp(3rem, 6vw, 4rem) !important; }
    .hero .hero-tagline { text-align: left !important; text-align-last: left !important; margin: 0 0 2rem !important; }
    .hero .cta-group { justify-content: flex-start; }
    .hero .cta-group .outline-btn { width: auto; }
    .hero .hero-abstract { flex: 0 0 38%; width: 38%; max-width: 340px; margin: 0; }
}

/* ---- Desktop and up (1025px+): side-by-side ---- */
@media (min-width: 1025px) {
    .hero.fluid-section { min-height: 88vh !important; padding-top: 4rem !important; }
    .hero .fluid-hero-wrapper {
        flex-direction: row !important;
        text-align: left !important;
        align-items: center !important;
        gap: 4rem !important;
    }
    .hero .hero-text {
        align-items: flex-start;
        flex: 1 1 55%;
    }
    .hero-stack-title {
        align-items: flex-start !important;
        font-size: clamp(3.6rem, 5.5vw, 5.6rem) !important;
        margin-bottom: 1.75rem !important;
    }
    .hero .hero-tagline {
        text-align: left !important;
        text-align-last: left !important;
        margin: 0 0 2.5rem !important;
        max-width: 520px;
    }
    .hero .cta-group { justify-content: flex-start; }
    .hero .cta-group .outline-btn { width: auto; min-width: 320px; }
    .hero .hero-abstract {
        flex: 0 0 42%;
        width: 42%;
        max-width: 480px;
        margin: 0;
        order: unset;
    }
}

/* ---- Large desktop / wide monitors ---- */
@media (min-width: 1600px) {
    .hero-stack-title { font-size: clamp(5rem, 5vw, 6.5rem) !important; }
    .hero .hero-abstract { max-width: 560px; }
}

/* ==========================================================================
   HERO FIX PATCH 2 — button hover bug, single-line tagline on desktop,
   full-width CTA alignment, interactive neural/synapse hero animation.
   Self-contained class names (.hero-cta-btn / .neuro-*) so nothing here
   collides with the legacy .primary-btn / .outline-btn rules elsewhere
   in this file — those old rules are simply no longer referenced.
   ========================================================================== */

/* ---- CTA button: solid, readable in every state ---- */
.hero .cta-group .hero-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1.1rem 1.5rem;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 4px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(0.85rem, 3.6vw, 1rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.35s ease;
}

.hero .cta-group .hero-cta-btn:hover,
.hero .cta-group .hero-cta-btn:focus-visible {
    background: #fff;
    color: #000;
    border-color: #fff;
    transform: translateY(-2px);
}

.hero .cta-group .hero-cta-btn i {
    transition: transform 0.3s ease;
}
.hero .cta-group .hero-cta-btn:hover i,
.hero .cta-group .hero-cta-btn:focus-visible i {
    transform: translateX(4px);
}

/* ---- Tagline: force single line on desktop-class widths ---- */
@media (min-width: 900px) {
    .hero .hero-tagline {
        white-space: nowrap;
        max-width: none !important;
    }
}

/* ---- CTA sizing per breakpoint (overrides earlier patch's max-width caps) ---- */
@media (max-width: 1024px) {
    .hero .cta-group .hero-cta-btn { max-width: 460px; margin: 0 auto; }
}

@media (min-width: 1025px) {
    /* left edge lines up with the heading; right edge reaches the end
       of the text column (same width the tagline/heading occupy) */
    .hero .cta-group { justify-content: flex-start; width: 100%; }
    .hero .cta-group .hero-cta-btn { width: 100%; max-width: none; min-width: 0; }
}

/* ---- Premium ambient halo around the (untouched) spinning logo ---- */
.hero .hero-abstract {
    perspective: 900px;
}

.neuro-anim {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    z-index: 0;
}

.neuro-group {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.4s ease-out;
    will-change: transform;
}

/* slow, elegant bezel rotation — premium watch-like pacing, not busy */
.neuro-orbit-a { animation: heroRingSpin 140s linear infinite; transform-origin: 300px 300px; }
.neuro-orbit-b { animation: heroRingSpin 100s linear infinite reverse; transform-origin: 300px 300px; }

.bezel-ticks {
    animation: neuroBezelBreathe 5s ease-in-out infinite;
    transform-origin: 300px 300px;
}
@keyframes neuroBezelBreathe {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.85; }
}

.synapse-lines line {
    animation: neuroLinePulse 5s ease-in-out infinite;
}
.synapse-lines line:nth-child(odd) { animation-delay: -1.8s; }
.synapse-lines line:nth-child(3n) { animation-delay: -3.2s; }
@keyframes neuroLinePulse {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 0.6; }
}

.pulse-dot {
    filter: drop-shadow(0 0 4px rgba(205, 215, 228, 0.85));
}

.neuron-node {
    fill: #e9edf3;
    stroke: rgba(200, 210, 225, 0.55);
    stroke-width: 1.2;
    filter: drop-shadow(0 0 4px rgba(200, 210, 225, 0.5));
    animation: neuroNodePulse 4s ease-in-out infinite;
    transition: filter 0.3s ease, r 0.3s ease;
}
.neurons .neuron-node:nth-child(2n) { animation-delay: -1.3s; }
.neurons .neuron-node:nth-child(3n) { animation-delay: -2.4s; }

@keyframes neuroNodePulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

.dust-particles circle {
    animation: neuroDustDrift 9s ease-in-out infinite;
}
.dust-particles circle:nth-child(2) { animation-delay: -3s; }
.dust-particles circle:nth-child(3) { animation-delay: -6s; }
.dust-particles circle:nth-child(4) { animation-delay: -1.5s; }
@keyframes neuroDustDrift {
    0%, 100% { transform: translate(0, 0); opacity: 0.35; }
    50% { transform: translate(6px, -8px); opacity: 0.8; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .neuro-orbit-a, .neuro-orbit-b, .bezel-ticks,
    .synapse-lines line, .neuron-node, .dust-particles circle, .neuro-group {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   MOBILE-ONLY HERO TITLE POLISH
   Scoped strictly to phone widths (<=600px) — tablets, and the 1025px+
   desktop layout, are completely untouched. Adjusts vertical rhythm and
   spacing of the stacked "Less / Paperwork. / More Care." title so it
   doesn't feel cramped under the navbar or visually lopsided.
   ========================================================================== */
@media (max-width: 600px) {
    .hero.fluid-section {
        padding-top: 3.25rem !important;
    }

    .hero-stack-title {
        line-height: 1.08 !important;
        letter-spacing: -0.02em !important;
        gap: 0.15rem;
        margin-bottom: 1.5rem !important;
    }

    .hero-stack-title .title-line {
        margin: 0 auto;
    }
}

/* ==========================================================================
   FIX: hero logo/video overflowing its column once the real asset is added
   Flex children default to min-width:auto, which lets a video's intrinsic
   pixel size force the flex item (and the video) to render far larger than
   its 42%/38%/etc flex-basis — that's what caused the logo to spill over
   the heading text once assets/animated logo.mp4 was a real file instead
   of a broken link. min-width:0 removes that intrinsic-size floor so the
   flex-basis percentages actually win, on every breakpoint.
   ========================================================================== */
.hero .fluid-hero-wrapper > .hero-text,
.hero .fluid-hero-wrapper > .hero-abstract {
    min-width: 0;
}

.hero .hero-abstract .custom-intro-anim {
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   MOBILE NAV — reliable scrolling inside the open menu (fixes Samsung /
   some Android browsers where the page behind kept scrolling instead of
   the menu list itself). Body is pinned with position:fixed while the
   menu is open (see the openMobileNav/closeMobileNav script), and the
   menu itself gets proper momentum scrolling + scroll containment.
   Desktop is unaffected — .nav-open only ever gets added below 1024px.
   ========================================================================== */
/* Note: we intentionally do NOT set overflow:hidden on body/html here.
   Doing so turns body into a scroll container, which breaks the navbar's
   position:sticky. Scroll is instead locked purely via the touchmove/
   wheel prevention in openMobileNav()/closeMobileNav(), which is enough
   on its own and doesn't disturb layout. */

@media (max-width: 1024px) {
    .nav-links.active {
        height: 100vh !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
    }
}

/* ==========================================================================
   MOBILE-ONLY: hero title left-aligned + slightly larger for a more
   premium feel. Scoped to phone widths only — tablets (768–1024px) and
   the 1025px+ desktop layout are untouched.
   ========================================================================== */
@media (max-width: 600px) {
    .hero .fluid-hero-wrapper {
        align-items: flex-start !important;
        text-align: left !important;
    }

    .hero .hero-text {
        align-items: flex-start !important;
    }

    .hero-stack-title {
        align-items: flex-start !important;
        text-align: left !important;
        font-size: clamp(3rem, 13.5vw, 4rem) !important;
    }

    .hero-stack-title .title-line {
        margin: 0;
    }

    .hero .hero-tagline {
        text-align: left !important;
        text-align-last: left !important;
        margin: 0 0 2.25rem !important;
    }

    .hero .cta-group {
        justify-content: flex-start;
    }
}

@media (max-width: 380px) {
    .hero-stack-title { font-size: clamp(2.6rem, 14vw, 3.1rem) !important; }
}

/* ==========================================================================
   FINAL FIX: logo video centering on mobile/tablet (<=1024px)
   Several legacy !important rules further up this file (originally meant
   to keep the old placeholder video "modest") were fighting the newer
   hero rebuild — one forced position:relative while another rule tried
   to center via top/left/transform meant for position:absolute, and the
   two together threw the logo far off-center once a real video file was
   present instead of a broken link. This block uses the same !important
   weight but a more specific selector, so it always wins, and relies on
   the flex parent (.hero .hero-abstract) to do the centering — no
   position:absolute/top/left hacks needed.
   ========================================================================== */
@media (max-width: 1024px) {
    .hero .hero-abstract {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .hero .hero-abstract .custom-intro-anim {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: 62% !important;
        height: 62% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        object-fit: contain !important;
    }
}

/* ==========================================================================
   MEI+lab HUB — PREMIUM REDESIGN (desktop only, >900px)
   The stacked mobile/tablet layout (<=900px) is completely untouched;
   everything below is scoped to the radial hub-and-spoke layout that only
   ever renders above 900px.
   ========================================================================== */
@media (min-width: 901px) {

    .meilab-section {
        background:
            radial-gradient(circle at 50% 45%, rgba(200,210,225,0.05) 0%, transparent 55%),
            radial-gradient(circle at center, rgba(255,255,255,0.02) 0%, transparent 70%);
    }

    .hub-spoke-container {
        height: 760px;
    }

    /* slow-rotating ambient bezel rings around the whole hub, echoing the
       hero's premium halo so the two sections feel like one system */
    .hub-spoke-container::before,
    .hub-spoke-container::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        pointer-events: none;
        transform: translate(-50%, -50%);
    }
    .hub-spoke-container::before {
        width: 620px;
        height: 620px;
        border: 1px dashed rgba(200,210,225,0.14);
        animation: hubBezelSpin 130s linear infinite;
    }
    .hub-spoke-container::after {
        width: 520px;
        height: 520px;
        border: 1px solid rgba(255,255,255,0.05);
        animation: hubBezelSpin 90s linear infinite reverse;
    }
    @keyframes hubBezelSpin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

    /* ---- Central hub ---- */
    .hub-center {
        width: 270px;
        height: 270px;
        background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.06), rgba(0,0,0,0.9) 70%);
        border: 1px solid rgba(210,218,230,0.22);
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.03) inset,
            0 0 50px rgba(210,218,230,0.10),
            0 25px 60px rgba(0,0,0,0.55);
        animation: hubGlowBreathe 5s ease-in-out infinite;
    }

    @keyframes hubGlowBreathe {
        0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset, 0 0 50px rgba(210,218,230,0.10), 0 25px 60px rgba(0,0,0,0.55); }
        50%      { box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset, 0 0 70px rgba(210,218,230,0.18), 0 25px 60px rgba(0,0,0,0.55); }
    }

    .hub-center::before {
        content: '';
        position: absolute;
        inset: 10px;
        border-radius: 50%;
        border: 1px dashed rgba(255,255,255,0.12);
        animation: hubBezelSpin 60s linear infinite;
    }

    .hub-center::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: radial-gradient(circle at 50% 50%, transparent 60%, rgba(0,0,0,0.5) 100%);
        pointer-events: none;
    }

    .hub-video {
        opacity: 0.92;
        -webkit-mask-image: radial-gradient(circle, #000 62%, transparent 85%);
        mask-image: radial-gradient(circle, #000 62%, transparent 85%);
    }

    /* ---- Spoke lines: soft gradient "synapse" lines instead of flat white ---- */
    .spoke-line {
        width: 300px;
        height: 1px;
        background: linear-gradient(to right, rgba(210,218,230,0) 0%, rgba(210,218,230,0.35) 78%, rgba(225,230,238,0.7) 100%);
    }

    .spoke-line::after {
        background: #e7ebf1;
        box-shadow: 0 0 10px #e7ebf1, 0 0 18px rgba(210,218,230,0.7);
    }

    /* small glowing terminus where each spoke meets its node */
    .spoke-line::before {
        content: '';
        position: absolute;
        top: -2px;
        right: -2px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #e7ebf1;
        box-shadow: 0 0 8px rgba(231,235,241,0.9);
        animation: hubNodeDotPulse 3.6s ease-in-out infinite;
    }
    .spoke-line:nth-child(2)::before { animation-delay: -0.6s; }
    .spoke-line:nth-child(3)::before { animation-delay: -1.2s; }
    .spoke-line:nth-child(4)::before { animation-delay: -1.8s; }
    .spoke-line:nth-child(5)::before { animation-delay: -2.4s; }
    .spoke-line:nth-child(6)::before { animation-delay: -3s; }
    @keyframes hubNodeDotPulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } }

    .hub-node {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(300px) rotate(calc(-1 * var(--angle)));
        animation: hubNodeFloat 6s ease-in-out infinite;
    }
    .hub-node:nth-child(odd)  { animation-delay: -1.5s; }
    .hub-node:nth-child(even) { animation-delay: -3.8s; }
    @keyframes hubNodeFloat {
        0%, 100% { margin-top: 0; }
        50%      { margin-top: -6px; }
    }

    /* ---- Node pills: glass, gold-tinted premium treatment ---- */
    .node-pill {
        background: linear-gradient(180deg, rgba(24,24,26,0.75), rgba(10,10,11,0.85));
        border: 1px solid rgba(255,255,255,0.09);
        box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 12px 30px rgba(0,0,0,0.4);
        padding: 0.5rem 1.4rem 0.5rem 0.5rem;
    }

    .node-pill:hover {
        background: linear-gradient(180deg, rgba(32,30,26,0.85), rgba(14,13,10,0.92));
        border-color: rgba(210,218,230,0.45);
        transform: translateY(-3px) scale(1.045);
        box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 18px 34px rgba(0,0,0,0.55), 0 0 24px rgba(210,218,230,0.2);
    }

    .node-pill-icon {
        width: 44px;
        height: 44px;
        background: linear-gradient(135deg, rgba(210,218,230,0.2), rgba(255,255,255,0.02));
        border: 1px solid rgba(210,218,230,0.28);
    }

    .node-pill:hover .node-pill-icon {
        background: linear-gradient(135deg, #e7ebf1, #aab4c2);
        border-color: #e7ebf1;
        color: #17140d;
    }

    .node-pill-text {
        letter-spacing: 0.01em;
    }

    /* ---- Scroll-triggered entrance: hub fades/scales in, nodes cascade ---- */
    .hub-spoke-container { opacity: 0; }
    .hub-spoke-container.in-view { opacity: 1; }

    .hub-spoke-container .hub-center {
        opacity: 0;
        transform: scale(0.82);
        transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hub-spoke-container.in-view .hub-center {
        opacity: 1;
        transform: scale(1);
    }

    .hub-spoke-container .hub-node {
        opacity: 0;
        transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hub-spoke-container.in-view .hub-node {
        opacity: 1;
    }
    .hub-spoke-container.in-view .hub-node[style*="--angle: 0deg"]   { transition-delay: 0.05s; }
    .hub-spoke-container.in-view .hub-node[style*="--angle: 60deg"]  { transition-delay: 0.15s; }
    .hub-spoke-container.in-view .hub-node[style*="--angle: 120deg"] { transition-delay: 0.25s; }
    .hub-spoke-container.in-view .hub-node[style*="--angle: 180deg"] { transition-delay: 0.35s; }
    .hub-spoke-container.in-view .hub-node[style*="--angle: 240deg"] { transition-delay: 0.45s; }
    .hub-spoke-container.in-view .hub-node[style*="--angle: 300deg"] { transition-delay: 0.55s; }

    .hub-spoke-container .spoke-line {
        opacity: 0;
        transition: opacity 1s ease 0.5s;
    }
    .hub-spoke-container.in-view .spoke-line {
        opacity: 1;
    }

    @media (prefers-reduced-motion: reduce) {
        .hub-spoke-container::before, .hub-spoke-container::after,
        .hub-center, .hub-center::before, .hub-node, .spoke-line::before {
            animation: none !important;
        }
    }
}

/* ==========================================================================
   PRODUCTION POLISH LAYER
   Consolidated final overrides: engine/resources redesign, marquee fix,
   MEI+lab header, orbital motion, focus states, responsive rhythm.
   Appended last on purpose — it wins the cascade over legacy rules above.
   ========================================================================== */

/* ---------- Section rhythm: one consistent vertical scale ---------- */
.engine-section {
    position: relative;
    overflow: hidden;
    padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 4.5rem) 0;
}

.engine-bg-accent {
    position: absolute;
    top: 20%;
    right: -5%;
    width: 40vw;
    height: 40vw;
    background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}

.engine-heading {
    font-size: clamp(2.5rem, 6vw, 4rem);
    margin-bottom: 1.5rem;
}

.core-engine-desc {
    max-width: 500px;
    font-size: 1.1rem;
    line-height: 1.6;
}

.engine-right-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    position: relative;
}

/* ---------- Engine stat strip (new) ---------- */
.engine-stat-strip {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.25rem);
    margin-top: 2.5rem;
    padding: 1.1rem 1.5rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    width: max-content;
    max-width: 100%;
}

.engine-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.engine-stat-num {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    background: var(--gradient-silver);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.engine-stat-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #868e96;
    line-height: 1.45;
}

.engine-stat-divider {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.15), transparent);
}

@media (max-width: 1100px) {
    .engine-stat-strip { margin-left: auto; margin-right: auto; }
}
@media (max-width: 480px) {
    .engine-stat-strip {
        width: 100%;
        justify-content: space-between;
        padding: 1rem 1.1rem;
        gap: 0.75rem;
    }
    .engine-stat-num { font-size: 1.35rem; }
    .engine-stat-label { font-size: 0.55rem; letter-spacing: 0.1em; }
}

/* ---------- Resource library ticker header (new) ---------- */
.library-strip-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 1200px;
    margin: clamp(3rem, 7vw, 5rem) auto 2rem auto;
    padding: 0 clamp(1.5rem, 4vw, 3rem);
}

.library-strip-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.18));
}
.library-strip-line:last-child {
    background: linear-gradient(to left, transparent, rgba(255,255,255,0.18));
}

.library-strip-title {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: #adb5bd;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.library-strip-title i { color: #e7ebf1; font-size: 0.8rem; }

/* ---------- Marquee: seamless loop + premium chips ---------- */
/* The legacy rule animated each half-track by -50% of its own width,
   which caused a visible jump every cycle; -100% minus the track gap is
   the exact width of one copy, so the loop restart is invisible. */
.marquee { gap: 1.5rem; }
.marquee .marquee-content {
    gap: 1.5rem;
    padding-right: 0;
    animation: scroll-left var(--speed, 48s) linear infinite;
}
.marquee-right .marquee-content { animation-direction: reverse; }
.marquee-wrapper .marquee:nth-child(1) .marquee-content { --speed: 58s; }
.marquee-wrapper .marquee:nth-child(2) .marquee-content { --speed: 46s; }
.marquee-wrapper .marquee:nth-child(3) .marquee-content { --speed: 52s; }
.marquee-wrapper .marquee:nth-child(4) .marquee-content { --speed: 40s; }

.marquee span {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: #adb5bd;
    padding: 0.7rem 1.4rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 100px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    backdrop-filter: blur(5px);
}
.marquee span::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff, #868e96);
    box-shadow: 0 0 6px rgba(255,255,255,0.5);
    flex-shrink: 0;
}
.marquee span:hover {
    color: #fff;
    background: rgba(255,255,255,0.09);
    border-color: rgba(210,218,230,0.35);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.35), 0 0 18px rgba(210,218,230,0.12);
}

@media (max-width: 768px) {
    .marquee span { font-size: 0.8rem; padding: 0.55rem 1.05rem; gap: 0.5rem; }
    .marquee-wrapper { gap: 1rem; }
    .marquee, .marquee .marquee-content { gap: 1rem; }
    /* keep the loop math in sync with the smaller gap */
    .marquee .marquee-content { animation-name: scroll-left-sm; }
}
@keyframes scroll-left-sm { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 1rem)); } }

/* ---------- Orbital hub: gentle motion so the 30+ core feels alive ---------- */
.orbital-ring-outer {
    border-style: dashed;
    border-color: rgba(210,218,230,0.18);
    animation: orbitalSpin 80s linear infinite;
}
.orbital-ring-inner {
    animation: orbitalSpin 55s linear infinite reverse;
}
@keyframes orbitalSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* a single satellite spark travelling the outer ring */
.orbital-ring-outer::after {
    content: '';
    position: absolute;
    top: -3px;
    left: calc(50% - 3px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e7ebf1;
    box-shadow: 0 0 10px rgba(231,235,241,0.9), 0 0 20px rgba(210,218,230,0.5);
}

.orbital-node .node-icon {
    transition: var(--transition);
}
.orbital-node:hover .node-icon {
    border-color: rgba(231,235,241,0.7);
    box-shadow: 0 0 22px rgba(210,218,230,0.3);
    transform: translateY(-3px);
}

/* ---------- MEI+lab header (new) ---------- */
.meilab-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.meilab-title {
    text-align: center;
    margin-bottom: 1rem;
    font-size: clamp(2.6rem, 6vw, 4rem);
}

.meilab-intro {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 1.75rem auto;
}

.meilab-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: clamp(1.5rem, 4vw, 3rem);
}

.meilab-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ced4da;
    padding: 0.5rem 1.1rem;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px;
    background: rgba(255,255,255,0.03);
}
.meilab-badge i { color: #e7ebf1; font-size: 0.8rem; }

/* ---------- Accessibility: visible keyboard focus everywhere ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[onclick]:focus-visible {
    outline: 2px solid rgba(231,235,241,0.85);
    outline-offset: 3px;
    border-radius: 4px;
}

/* clickable node pills are div[onclick] — make them keyboard-perceivable */
.node-pill { -webkit-tap-highlight-color: transparent; }

/* ---------- Reduced motion: stop every decorative loop ---------- */
@media (prefers-reduced-motion: reduce) {
    .marquee .marquee-content,
    .orbital-ring-outer,
    .orbital-ring-inner,
    .hub-node,
    .spoke-line::after,
    .spoke-line::before,
    .neuro-orbit,
    .coin-inner {
        animation: none !important;
    }
    html { scroll-behavior: auto; }
}

/* ==========================================================================
   PRODUCTION POLISH LAYER v2 — de-boxing pass
   Audience flow (cards removed), engine caption (impact pill removed),
   orbital converge-reveal states, and the new MEI+lab orbital dial.
   ========================================================================== */

/* ---------- Who can use MEI+ — open flow, no cards ---------- */
.audience-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 3.5rem;
    max-width: 980px;
    margin: 0 auto;
}

.audience-item {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.audience-ic {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.07), transparent 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e7ebf1;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: var(--transition);
}

.audience-item span {
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 600;
    color: #ced4da;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.audience-item:hover .audience-ic {
    border-color: rgba(231,235,241,0.6);
    box-shadow: 0 0 20px rgba(210,218,230,0.2);
    transform: translateY(-3px);
}
.audience-item:hover span { color: #fff; }

@media (max-width: 600px) {
    .audience-flow {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.4rem;
        width: max-content;
        max-width: 100%;
    }
    .audience-ic { width: 46px; height: 46px; font-size: 0.95rem; }
    .audience-item span { white-space: normal; font-size: 0.98rem; }
}

/* ---------- Quiet caption lines (replace pill/badge containers) ---------- */
.engine-caption,
.meilab-meta {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #868e96;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    margin: 0;
}
.engine-caption i { color: #e7ebf1; }
.caption-dot { color: rgba(255,255,255,0.3); }
.meilab-meta { margin-bottom: clamp(1.5rem, 4vw, 3rem); }

/* ---------- 30+ orbital converge-reveal (rings/core states) ---------- */
.orbital-ring,
.orbital-center {
    transition: scale 1.1s cubic-bezier(0.16,1,0.3,1), opacity 0.7s ease;
}
.orb-hidden .orbital-ring { scale: 0.55; opacity: 0; }
.orb-hidden .orbital-center { scale: 0.6; opacity: 0; }

/* ==========================================================================
   MEI+LAB — ORBITAL DIAL
   Spinning logo core, boxless satellite tools, auto-cycling focus readout.
   ========================================================================== */
.lab-orbit {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.lab-stage {
    position: relative;
    width: 680px;
    height: 640px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lab-stage-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
}
.lab-stage-ring-a {
    width: 530px;
    height: 530px;
    border: 1px dashed rgba(200,210,225,0.14);
    animation: labSpin 120s linear infinite;
}
.lab-stage-ring-b {
    width: 440px;
    height: 440px;
    border: 1px solid rgba(255,255,255,0.05);
    animation: labSpin 80s linear infinite reverse;
}
@keyframes labSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.lab-core {
    position: relative;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(210,218,230,0.22);
    box-shadow: 0 0 60px rgba(210,218,230,0.1), 0 25px 60px rgba(0,0,0,0.55);
    z-index: 5;
    animation: hubGlowBreathe 5s ease-in-out infinite;
}
.lab-core::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, transparent 58%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}
.lab-core-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.92;
}

.lab-spokes {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
}
.lab-spoke {
    position: absolute;
    top: 0;
    left: 0;
    width: 118px;
    height: 1px;
    background: linear-gradient(to right, rgba(210,218,230,0.05), rgba(210,218,230,0.28));
    transform-origin: left center;
    transform: rotate(var(--rot)) translateX(126px);
    transition: background 0.4s ease, box-shadow 0.4s ease;
}
.lab-spoke.active {
    background: linear-gradient(to right, rgba(231,235,241,0.15), #e7ebf1);
    box-shadow: 0 0 12px rgba(231,235,241,0.35);
}
.lab-spoke.active::after {
    content: '';
    position: absolute;
    right: -3px;
    top: -2.5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px #fff;
}

.lab-sat {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(255px) rotate(calc(-1 * var(--angle)));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    width: 150px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
    font-family: inherit;
}
.lab-sat-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.16);
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.08), rgba(10,10,12,0.9) 75%);
    color: #cfd6df;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}
.lab-sat-label {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #8a919b;
    line-height: 1.25;
    transition: color 0.35s ease;
}
.lab-sat:hover .lab-sat-icon {
    border-color: rgba(231,235,241,0.5);
    color: #fff;
    transform: translateY(-3px);
}
.lab-sat:hover .lab-sat-label { color: #ced4da; }
.lab-sat.active .lab-sat-icon {
    background: linear-gradient(135deg, #f3f5f8, #b9c0ca);
    color: #0a0a0b;
    border-color: #e7ebf1;
    box-shadow: 0 0 26px rgba(231,235,241,0.35), 0 10px 24px rgba(0,0,0,0.4);
}
.lab-sat.active .lab-sat-label { color: #fff; }

/* ---------- Focus readout — pure typography, no container ---------- */
.lab-focus {
    position: relative;
    text-align: center;
    max-width: 560px;
    margin-top: 1.5rem;
    min-height: 190px;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.lab-focus.switching { opacity: 0; transform: translateY(6px); }

.lab-focus-counter {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    color: #5c636b;
    margin-bottom: 0.8rem;
}
.lab-focus-counter span { color: #e7ebf1; }

.lab-focus-name {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 0.7rem;
}

.lab-focus-desc {
    color: #8a919b;
    font-size: 0.98rem;
    line-height: 1.65;
    margin-bottom: 1.4rem;
}

.lab-focus-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.lab-focus-status {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #868e96;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.lab-focus-status.live { color: #cfd6df; }
.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5c636b;
    display: inline-block;
}
.status-dot.live {
    background: #e7ebf1;
    box-shadow: 0 0 10px rgba(231,235,241,0.8);
    animation: labLivePulse 2s ease-in-out infinite;
}
@keyframes labLivePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.lab-focus-cta {
    background: none;
    border: none;
    border-bottom: 1px solid rgba(231,235,241,0.4);
    padding: 0.35rem 0.15rem;
    color: #e7ebf1;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    transition: var(--transition);
}
.lab-focus-cta:hover {
    border-color: #fff;
    color: #fff;
    gap: 0.85rem;
}

/* ---------- Lab dial: phone & small tablet ---------- */
@media (max-width: 900px) {
    .lab-stage { width: 320px; height: 320px; }
    .lab-stage-ring-a { width: 296px; height: 296px; }
    .lab-stage-ring-b { width: 250px; height: 250px; }
    .lab-core { width: 148px; height: 148px; }

    .lab-sat {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(126px) rotate(calc(-1 * var(--angle)));
        width: auto;
    }
    .lab-sat-label { display: none; }
    .lab-sat-icon { width: 44px; height: 44px; font-size: 0.95rem; }

    .lab-spoke { width: 40px; transform: rotate(var(--rot)) translateX(80px); }

    .lab-focus {
        margin-top: 1.8rem;
        padding: 0 1rem;
        min-height: 215px;
    }
    /* thread of light connecting the readout back to the spinning logo */
    .lab-focus::before {
        content: '';
        position: absolute;
        top: -1.6rem;
        left: 50%;
        transform: translateX(-50%);
        width: 1px;
        height: 1.3rem;
        background: linear-gradient(to bottom, rgba(231,235,241,0.5), transparent);
    }
    .lab-focus-desc { font-size: 0.92rem; }
    .lab-focus-footer { gap: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .lab-stage-ring-a,
    .lab-stage-ring-b,
    .lab-core,
    .status-dot.live {
        animation: none !important;
    }
}

/* ==========================================================================
   PRODUCTION POLISH LAYER v3
   1. Mobile nav fix: .navbar's backdrop-filter made it the containing
      block for position:fixed, so the open menu anchored to the navbar
      instead of the viewport (content bled through). Dropping the filter
      while the menu is open restores true full-screen positioning.
   2. MEI+lab dial: spokes now land exactly on icon centres, labels sit
      outside the orbit, and on wide screens the readout moves beside the
      dial (dial left / text right) with a 2s auto-cycle.
   ========================================================================== */

/* ---------- 1. Mobile navigation overlay ---------- */
@media (max-width: 1024px), (max-height: 500px) and (orientation: landscape) {
    body.nav-open .navbar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(8, 8, 10, 0.98) !important;
    }
    body.nav-open .top-banner {
        visibility: hidden !important;
    }
    .nav-links.active li {
        width: 100%;
        text-align: center;
    }
    .nav-links.active li a {
        display: inline-block;
        padding: 0.2rem 1rem;
    }
}

/* ---------- 2. Lab dial geometry (radius-driven, exact alignment) ---------- */
.lab-stage {
    --lab-r: 230px;   /* orbit radius: centre -> icon centre */
    --core-r: 120px;  /* logo disc radius */
    --sat-r: 28px;    /* satellite icon radius */
    width: 780px;
    height: 600px;
}

/* satellite button IS the icon — labels hang outside it, so the box
   centre equals the icon centre and every spoke lands precisely */
.lab-sat {
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--lab-r)) rotate(calc(-1 * var(--angle)));
    width: calc(var(--sat-r) * 2);
    height: calc(var(--sat-r) * 2);
    display: block;
}
.lab-sat-icon {
    width: 100%;
    height: 100%;
    font-size: 1.15rem;
}
.lab-sat-label {
    position: absolute;
    width: 140px;
    pointer-events: none;
}
.pos-top .lab-sat-label    { bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); text-align: center; }
.pos-bottom .lab-sat-label { top: calc(100% + 10px); left: 50%; transform: translateX(-50%); text-align: center; }
.pos-tr .lab-sat-label,
.pos-br .lab-sat-label     { left: calc(100% + 14px); top: 50%; transform: translateY(-50%); text-align: left; }
.pos-tl .lab-sat-label,
.pos-bl .lab-sat-label     { right: calc(100% + 14px); top: 50%; transform: translateY(-50%); text-align: right; }

.lab-spoke {
    transform: rotate(var(--rot)) translateX(calc(var(--core-r) + 6px));
    width: calc(var(--lab-r) - var(--core-r) - var(--sat-r) - 6px);
}

.lab-core {
    width: calc(var(--core-r) * 2);
    height: calc(var(--core-r) * 2);
}

.lab-focus-cta { margin-top: 0.25rem; }

/* ---------- Wide screens: dial left, readout right ---------- */
@media (min-width: 1101px) {
    .lab-orbit {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 3rem;
    }
    .lab-stage { flex-shrink: 0; }
    .lab-focus {
        text-align: left;
        max-width: 400px;
        margin-top: 0;
        min-height: 230px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    /* thread of light tying the readout back to the dial */
    .lab-focus::before {
        content: '';
        position: absolute;
        left: -2.6rem;
        top: 50%;
        width: 1.8rem;
        height: 1px;
        background: linear-gradient(to right, rgba(231,235,241,0.45), transparent);
    }
    .lab-focus-counter { margin-bottom: 1rem; }
    .lab-focus-name { font-size: 2rem; }
}

/* ---------- 901-1100px: stacked, dial scaled to fit ---------- */
@media (min-width: 901px) and (max-width: 1100px) {
    .lab-stage {
        --lab-r: 205px;
        --core-r: 105px;
        width: 720px;
        height: 550px;
    }
}

/* ---------- Phones & small tablets: icon-only dial (labels off) ---------- */
@media (max-width: 900px) {
    .lab-stage {
        --lab-r: 126px;
        --core-r: 74px;
        --sat-r: 22px;
        width: 320px;
        height: 320px;
    }
    .lab-sat-icon { font-size: 0.95rem; }
    .lab-sat-label { display: none; }

    /* keep the ACCESS <tool name> CTA on one line — long names like
       "ACCESS COGNITIVE BIAS TRAINER" were wrapping to two lines */
    .lab-focus-cta {
        white-space: nowrap;
        font-size: 0.68rem;
        letter-spacing: 0.12em;
        max-width: 100%;
    }
}

/* ==========================================================================
   PRODUCTION POLISH LAYER v4
   1. "Let's Connect" — boxless editorial form: underline fields, role
      chips (incl. Student), restyled enquiry dropdown, contact channels.
   2. "Features of MEI+" — numbered editorial list on both desktop and
      mobile; desktop keeps the live mockup display, mobile drops it.
   3. Mobile one-liners: hero tagline + founder title never wrap.
   ========================================================================== */

/* ---------- 1. Let's Connect ---------- */
.connect-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 5vw;
    align-items: center;
}

.connect-title {
    font-size: clamp(3rem, 6vw, 5.5rem);
    line-height: 1.05;
    margin-bottom: 0;
}

.connect-sub {
    margin-top: 1.5rem;
    max-width: 430px;
    color: #adb5bd;
    line-height: 1.65;
}

.connect-channels {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.connect-channel {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: #8a919b;
    font-size: 0.9rem;
}
.connect-channel i { color: #e7ebf1; width: 18px; text-align: center; }
a.connect-channel:hover { color: #fff; }

.connect-form { display: flex; flex-direction: column; }

.cf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2.5rem;
}

.cf-field {
    margin-bottom: 1.9rem;
    text-align: left;
    position: relative;
}

.cf-field label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8a919b;
    margin-bottom: 0.35rem;
}
.cf-field label span { color: #cfd6df; }

.cf-field input,
.cf-field textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    border-radius: 0;
    padding: 0.65rem 0.1rem;
    color: #fff;
    font-size: 1rem;
    font-family: var(--font-body);
    transition: border-color 0.3s ease;
}
.cf-field input::placeholder,
.cf-field textarea::placeholder { color: #565c63; }
.cf-field input:hover,
.cf-field textarea:hover { border-bottom-color: rgba(255,255,255,0.3); }
.cf-field input:focus,
.cf-field textarea:focus {
    outline: none;
    border-bottom-color: #e7ebf1;
}
.cf-field input:focus-visible,
.cf-field textarea:focus-visible { outline: none; }
.cf-field textarea { resize: vertical; min-height: 110px; }

/* role chips — single-select, tap again to clear */
.cf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding-top: 0.35rem;
}
.cf-chip {
    background: none;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 100px;
    color: #9aa1a9;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.45rem 1.05rem;
    cursor: pointer;
    font-family: var(--font-body);
    transition: all 0.3s ease;
}
.cf-chip:hover { border-color: rgba(231,235,241,0.5); color: #e7ebf1; }
.cf-chip.active {
    background: linear-gradient(135deg, #f3f5f8, #c7ccd4);
    color: #0a0a0b;
    border-color: #e7ebf1;
}

/* enquiry-type dropdown, underline style */
.cf-select-wrap {
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    transition: border-color 0.3s ease;
}
.cf-select-wrap:hover { border-bottom-color: rgba(255,255,255,0.3); }
.cf-select-wrap .custom-select {
    width: 100%;
    padding: 0.65rem 0.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: #fff;
    font-size: 1rem;
    font-family: var(--font-body);
}
#customSelectText { color: #565c63; }
.cf-select-wrap .arrow-down { color: #8a919b; font-size: 0.8rem; }
.cf-select-wrap .custom-options {
    top: calc(100% + 8px);
    background: linear-gradient(160deg, #17181c, #0c0d10);
    border-radius: 14px;
}
.custom-select.cf-error {
    box-shadow: 0 1px 0 0 #ff6b6b;
    animation: cfShake 0.4s ease;
}
@keyframes cfShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.cf-submit {
    margin-top: 0.75rem;
    width: 100%;
    padding: 1.15rem;
}

@media (max-width: 1024px) {
    .connect-layout {
        grid-template-columns: 1fr;
        gap: 3.5rem;
        align-items: start;
    }
    .connect-sub { margin-top: 1.25rem; }
    .cf-row { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- 2. Features of MEI+ — numbered editorial list ---------- */
.feature-tabs {
    counter-reset: feat;
    gap: 0;
}

.feature-tab {
    counter-increment: feat;
    padding: 1.5rem 0.5rem 1.5rem 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: none;
    opacity: 1;
    gap: 1.4rem;
    align-items: baseline;
    overflow: visible;
}
.feature-tab:first-child { border-top: 1px solid rgba(255,255,255,0.08); }

/* ghost index number replaces the old glowing side-bar */
.feature-tab::before {
    content: counter(feat, decimal-leading-zero);
    position: static;
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
    transform: none;
    border-radius: 0;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #45494f;
    transition: color 0.35s ease;
    flex-shrink: 0;
}
.feature-tab.active::before { transform: none; color: #fff; }

.feature-tab .tab-icon { display: none; }

.feature-tab .tab-text h3 {
    font-size: 1.25rem;
    margin-bottom: 0.4rem;
    color: #a9b0b8;
    transition: color 0.35s ease;
}
.feature-tab .tab-text p {
    color: #6e747c;
    font-size: 0.92rem;
    line-height: 1.5;
    transition: color 0.35s ease;
}

.feature-tab:hover { background: none; opacity: 1; }
.feature-tab:hover .tab-text h3 { color: #e2e6ea; }

.feature-tab.active {
    background: none;
    border-left: none;
    border-bottom-color: rgba(231,235,241,0.4);
}
.feature-tab.active .tab-text h3 {
    background: var(--gradient-silver);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.feature-tab.active .tab-text p { color: #9aa1a9; }

/* mobile: same list, full width, no mockup column */
@media (max-width: 1024px) {
    .interactive-features {
        display: flex !important;
        flex-direction: column !important;
        padding-left: 0 !important;
        margin-top: 2rem !important;
        min-height: 0 !important;
        gap: 0 !important;
    }
    .interactive-features::before { display: none !important; }

    .feature-tabs {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    .feature-display { display: none !important; }

    .feature-tab {
        counter-increment: feat !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        pointer-events: auto !important;
        padding: 1.25rem 0 !important;
        margin: 0 !important;
        background: none !important;
        border: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        gap: 1.1rem !important;
    }
    .feature-tab:first-child { border-top: 1px solid rgba(255,255,255,0.08) !important; }

    .feature-tab::before {
        content: counter(feat, decimal-leading-zero) !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        transform: none !important;
        font-family: var(--font-heading) !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        color: #45494f !important;
        display: block !important;
    }
    .feature-tab.active::before { color: #fff !important; }

    .feature-tab .tab-icon { display: none !important; }
    .feature-tab .tab-text h3 { font-size: 1.05rem !important; margin-bottom: 0.35rem !important; }
    .feature-tab .tab-text p { font-size: 0.85rem !important; line-height: 1.55 !important; }
}

/* ---------- 3. Mobile one-liners ---------- */
@media (max-width: 1024px) {
    /* hero tagline: one line, fluid size — 2.1vw keeps the full 53-char
       sentence inside the padded viewport down to 320px screens.
       (.hero .hero-text prefix out-ranks the older .hero .hero-tagline
       clamp(1.05rem…) rule, which also carries !important) */
    .hero .hero-text .hero-tagline,
    .hero .hero-tagline {
        white-space: nowrap !important;
        font-size: clamp(0.55rem, 3.1vw, 1.05rem) !important;
        letter-spacing: 0.01em !important;
        max-width: none !important;
        text-align: left !important;
        text-align-last: auto !important;
    }

    /* founder title: one line */
    .developer-title {
        white-space: nowrap !important;
        font-size: clamp(0.58rem, 2.9vw, 0.85rem) !important;
        letter-spacing: 0.14em !important;
    }
}
@media (max-width: 400px) {
    .profile-header { gap: 1rem !important; }
    .profile-header .coin { width: 60px !important; height: 60px !important; }
}

/* ==========================================================================
   PRODUCTION POLISH LAYER v5
   "Nature of Enquiry" dropdown — replace the heavy two-tone box + white
   left-bar hover with a clean glass menu of soft rounded item highlights
   that matches the minimal underline form. Scoped to .cf-select-wrap so
   no other custom-select instance is touched.
   ========================================================================== */
.cf-select-wrap .custom-options {
    top: calc(100% + 10px);
    background: rgba(13, 14, 17, 0.97);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    padding: 0.4rem;
    overflow: hidden;
}

.cf-select-wrap .custom-option {
    padding: 0.85rem 1rem;
    margin: 0;
    border: none;
    border-radius: 10px;
    color: #9aa1a9;
    font-size: 0.92rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* small silver dot marker instead of the old white side-bar */
.cf-select-wrap .custom-option::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.35;
    flex-shrink: 0;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.cf-select-wrap .custom-option:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    padding-left: 1rem;          /* cancel the legacy shift */
    border-left: none;           /* cancel the legacy white bar */
}
.cf-select-wrap .custom-option:hover::before {
    opacity: 1;
    box-shadow: 0 0 8px rgba(231, 235, 241, 0.7);
}

/* rotate the chevron while the menu is open */
.cf-select-wrap .custom-options.show ~ .custom-select .arrow-down,
.cf-select-wrap .custom-select:has(~ .custom-options.show) .arrow-down {
    transform: rotate(180deg);
}
.cf-select-wrap .arrow-down { transition: transform 0.25s ease; }

/* ==========================================================================
   PRODUCTION POLISH LAYER v6
   1. "Why it matters" — boxless connected impact list.
   2. Features mockups — unified premium silver/grey "app window" system
      (.fx-*), replacing the old loud mac-coloured mockups.
   3. Features mobile — remove the cycling highlight box, left-align text
      with even spacing, and show the redesigned mockup below the list.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. WHY IT MATTERS — connected impact list
   ------------------------------------------------------------------------- */
.impact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
/* vertical rail linking the icons */
.impact-list::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 26px;
    bottom: 26px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.14) 12%, rgba(255,255,255,0.14) 88%, transparent);
}
.impact-row {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
    padding: 1.3rem 0;
    position: relative;
}
.impact-row + .impact-row { border-top: 1px solid rgba(255,255,255,0.06); }

.impact-row-ic {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 49px;
    height: 49px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: #cfd6df;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.09), rgba(12,13,16,0.95) 78%);
    border: 1px solid rgba(255,255,255,0.12);
    transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
}
.impact-row:hover .impact-row-ic {
    color: #0a0a0b;
    background: linear-gradient(135deg, #f3f5f8, #b9c0ca);
    border-color: #e7ebf1;
    box-shadow: 0 0 24px rgba(231,235,241,0.28);
    transform: translateY(-2px);
}
.impact-row-text h4 {
    font-size: 1.12rem;
    color: #fff;
    margin: 0.35rem 0 0.4rem;
}
.impact-row-text p {
    font-size: 0.93rem;
    color: #8a919b;
    line-height: 1.6;
    margin: 0;
    text-align: left;
}

@media (max-width: 600px) {
    .impact-list::before { left: 21px; }
    .impact-row { gap: 1.1rem; padding: 1.1rem 0; }
    .impact-row-ic { width: 43px; height: 43px; font-size: 1rem; border-radius: 12px; }
    .impact-row-text h4 { font-size: 1.02rem; }
    .impact-row-text p { font-size: 0.86rem; }
}

/* -------------------------------------------------------------------------
   2. FEATURE MOCKUPS — unified "fx" app-window system
   ------------------------------------------------------------------------- */
.fx-win {
    width: 84%;
    max-width: 440px;
    background: linear-gradient(165deg, rgba(22,23,27,0.96), rgba(9,10,12,0.98));
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
    color: #e2e8f0;
    backdrop-filter: blur(18px);
}

.fx-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.02);
}
.fx-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
}
.fx-dot:nth-child(2) { background: rgba(255,255,255,0.13); }
.fx-dot:nth-child(3) { background: rgba(255,255,255,0.09); }
.fx-bar-title {
    margin-left: 0.5rem;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #aab2bc;
}
.fx-bar-tag {
    margin-left: auto;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9aa1a9;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px;
}
.fx-live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #e7ebf1;
    box-shadow: 0 0 8px rgba(231,235,241,0.9);
    animation: fxPulse 1.8s ease-in-out infinite;
}
@keyframes fxPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.fx-body { padding: 1.4rem; }

.fx-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6e747c;
    margin-bottom: 0.7rem;
}

/* shimmering skeleton lines */
.fx-line {
    height: 9px;
    border-radius: 5px;
    margin-bottom: 0.6rem;
    background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.06) 75%);
    background-size: 200% 100%;
    animation: fxShimmer 2.2s linear infinite;
}
.fx-line.w-100 { width: 100%; }
.fx-line.w-90 { width: 90%; }
.fx-line.w-70 { width: 70%; }
.fx-line.w-60 { width: 60%; }
.fx-line.w-40 { width: 40%; }
.fx-mb { margin-bottom: 1.4rem; }
@keyframes fxShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Scene 1 — library tiles */
.fx-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}
.fx-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 1rem;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    transition: all 0.35s ease;
}
.fx-tile-ic {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #cfd6df;
    font-size: 1rem;
    margin-bottom: 0.55rem;
    transition: all 0.35s ease;
}
.fx-tile-name { font-size: 0.85rem; font-weight: 600; color: #e7ebf1; }
.fx-tile-meta { font-size: 0.68rem; color: #6e747c; }
.active-scene .fx-tile:hover,
.fx-tile:hover {
    border-color: rgba(231,235,241,0.28);
    background: rgba(255,255,255,0.05);
}
.fx-tile:hover .fx-tile-ic { background: linear-gradient(135deg,#f3f5f8,#c7ccd4); color: #0a0a0b; }

/* Scene 2 — vault */
.fx-vault-badge {
    width: 58px; height: 58px;
    margin: 0.2rem auto 0.8rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    color: #e7ebf1;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.1), rgba(12,13,16,0.9) 75%);
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 0 26px rgba(210,218,230,0.14);
}
.fx-vault-note {
    text-align: center;
    font-size: 0.78rem;
    color: #8a919b;
    margin: 0 0 1.1rem;
}
.fx-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 0.55rem;
}
.fx-file:last-child { margin-bottom: 0; }
.fx-file-l { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: #cfd6df; }
.fx-file-l i { color: #8a919b; }
.fx-file-lock { color: #565c63; font-size: 0.8rem; }

/* Scene 3 — stamp */
.fx-stamp {
    margin-top: 1.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #cfd6df;
    padding: 0.45rem 0.9rem;
    border: 1px solid rgba(231,235,241,0.25);
    border-radius: 100px;
    background: rgba(255,255,255,0.03);
}
.fx-stamp i { color: #e7ebf1; }

/* Scene 4 — record builder */
.fx-sources {
    display: flex;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}
.fx-source {
    flex: 1;
    height: 46px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.03);
    border: 1px dashed rgba(255,255,255,0.16);
    color: #9aa1a9;
    font-size: 1rem;
}
.fx-merge {
    text-align: center;
    color: #6e747c;
    margin-bottom: 0.9rem;
    font-size: 1rem;
    animation: fxNudge 2s ease-in-out infinite;
}
@keyframes fxNudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.fx-record {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(231,235,241,0.16);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 12px 26px rgba(0,0,0,0.45);
}
.fx-record-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.9rem;
}
.fx-record-head > span:first-child {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: #fff;
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.fx-record-head i { color: #cfd6df; }
.fx-chip {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0a0a0b;
    background: linear-gradient(135deg,#f3f5f8,#c7ccd4);
    padding: 0.25rem 0.6rem;
    border-radius: 100px;
    display: inline-flex; align-items: center; gap: 0.3rem;
}

/* Scene 5 — timeline */
.fx-patient {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-bottom: 1.1rem;
    margin-bottom: 1.3rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.fx-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700;
    color: #0a0a0b;
    background: linear-gradient(135deg,#e7ebf1,#aab4c2);
    flex-shrink: 0;
}
.fx-patient-info { display: flex; flex-direction: column; line-height: 1.3; }
.fx-patient-info strong { color: #fff; font-size: 0.92rem; }
.fx-patient-info small { color: #8a919b; font-size: 0.72rem; }
.fx-status {
    margin-left: auto;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #cfd6df;
    padding: 0.3rem 0.7rem;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 100px;
}
.fx-tl { display: flex; justify-content: space-between; position: relative; }
.fx-tl::before {
    content: '';
    position: absolute;
    top: 13px;
    left: 13px; right: 13px;
    height: 1px;
    background: rgba(255,255,255,0.12);
}
.fx-tl-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
    flex: 1;
}
.fx-tl-dot {
    width: 27px; height: 27px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem;
    background: #15161a;
    border: 1px solid rgba(255,255,255,0.2);
    color: #8a919b;
}
.fx-tl-step.done .fx-tl-dot {
    background: linear-gradient(135deg,#f3f5f8,#c7ccd4);
    border-color: #e7ebf1;
    color: #0a0a0b;
}
.fx-tl-step.now .fx-tl-dot {
    border-color: #e7ebf1;
    box-shadow: 0 0 0 4px rgba(231,235,241,0.12);
    animation: fxNowPulse 1.8s ease-in-out infinite;
}
@keyframes fxNowPulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(231,235,241,0.1); }
    50% { box-shadow: 0 0 0 7px rgba(231,235,241,0.05); }
}
.fx-tl-txt {
    display: flex; flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 0.72rem;
    color: #aab2bc;
    line-height: 1.3;
    max-width: 84px;
}
.fx-tl-txt small { color: #6e747c; font-size: 0.62rem; margin-top: 2px; }
.fx-tl-step.now .fx-tl-txt small { color: #cfd6df; font-weight: 600; }

/* -------------------------------------------------------------------------
   3. FEATURES — MOBILE (<=1024px): no highlight, left text, show mockup
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* left-align every feature description, even spacing (kills justify) */
    .feature-tab .tab-text p {
        text-align: left !important;
        text-align-last: left !important;
        text-justify: auto !important;
        word-spacing: normal !important;
    }

    /* remove the cycling highlight box entirely on mobile */
    .feature-tab.active {
        background: none !important;
        border: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        box-shadow: none !important;
    }
    .feature-tab.active::before { color: #45494f !important; }   /* number stays quiet */
    .feature-tab.active .tab-text h3 {
        -webkit-text-fill-color: currentColor !important;
        background: none !important;
        color: #a9b0b8 !important;
    }
    .feature-tab.active .tab-text p { color: #6e747c !important; }

    /* re-enable the mockup, shown once below the list (not per-item) */
    .interactive-features {
        display: flex !important;
        flex-direction: column !important;
        gap: 2.25rem !important;
    }
    .feature-display {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: 330px !important;
        min-height: 0 !important;
    }
    .feature-scene {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(12px) !important;
        transition: all 0.5s cubic-bezier(0.25,1,0.5,1) !important;
    }
    .feature-scene.active-scene {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
    .fx-win {
        width: 100% !important;
        max-width: 380px !important;
        transform: none !important;
    }
}

@media (max-width: 400px) {
    .fx-win { max-width: 320px !important; }
    .fx-body { padding: 1.1rem !important; }
    .fx-tile { padding: 0.8rem !important; }
    .feature-display { height: 320px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-line, .fx-live-dot, .fx-merge, .fx-tl-step.now .fx-tl-dot { animation: none !important; }
}

/* v6b — keep the mockup window bar tidy on narrow screens */
@media (max-width: 480px) {
    .fx-bar { padding: 0.8rem 1rem; gap: 0.4rem; }
    .fx-bar-title { white-space: nowrap; letter-spacing: 0.08em; font-size: 0.68rem; }
    .fx-bar-tag { white-space: nowrap; font-size: 0.55rem; padding: 0.22rem 0.5rem; }
    .fx-dot { width: 8px; height: 8px; }
}

/* ==========================================================================
   v6c — "Why it matters" connector fix
   The continuous rail + horizontal row dividers crossed each other (odd "+"
   intersections) and the rail poked past the first/last icons. Replace with
   clean per-gap segments that run only from one icon centre to the next,
   masked behind each (now fully opaque) icon.
   ========================================================================== */
.impact-list::before { display: none !important; }              /* drop global rail */
.impact-row + .impact-row { border-top: none !important; }       /* drop crossing dividers */

.impact-row-ic {
    position: relative;
    z-index: 2 !important;
    /* solid base so the connector is fully hidden behind the icon */
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.09), rgba(12,13,16,0.98) 78%), #0d0e11 !important;
}

/* connector segment: this icon's centre → next icon's centre */
.impact-row:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 24px;                        /* icon horizontal centre (49/2) */
    top: calc(1.3rem + 24.5px);        /* icon vertical centre */
    bottom: calc(-1.3rem - 24.5px);    /* extend to the next icon's centre */
    width: 1px;
    background: rgba(255,255,255,0.14);
    z-index: 0;
}

@media (max-width: 600px) {
    .impact-row:not(:last-child)::before {
        left: 21px;                     /* icon 43px → centre 21.5 */
        top: calc(1.1rem + 21.5px);
        bottom: calc(-1.1rem - 21.5px);
    }
}

/* v6d — match "Why it matters" heading size to "What is MEI+?" (.mega-heading)
   so the two section headings read at the same scale on every breakpoint. */
.impact-grid-container .modern-subheading {
    font-size: clamp(2rem, 7vw, 4rem);
    line-height: 1.1;
}
@media (max-width: 380px) {
    .impact-grid-container .modern-subheading { font-size: 1.8rem; }
}

/* ==========================================================================
   v7 — Clinical Library mockup redesign + mobile "paired" feature layout
   ========================================================================== */

/* ---- Clinical Library: search + category browser (no count numbers) ---- */
.fx-search {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.9rem;
    border-radius: 10px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.08);
    color: #6e747c;
    font-size: 0.82rem;
}
.fx-search > span { flex: 1; }
.fx-search .fx-search-end { color: #8a919b; }

.fx-cat {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    border: 1px solid transparent;
    margin-bottom: 0.45rem;
    transition: all 0.35s ease;
}
.fx-cat:last-child { margin-bottom: 0; }
.fx-cat-ic {
    width: 34px; height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    color: #cfd6df;
    font-size: 0.9rem;
    transition: all 0.35s ease;
}
.fx-cat-name {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: #aab2bc;
    transition: color 0.35s ease;
}
.fx-cat-arrow { color: #565c63; font-size: 0.75rem; transition: transform 0.35s ease, color 0.35s ease; }

/* the active row cycles via a subtle silver highlight (auto, CSS-only) */
.fx-cat.active {
    background: rgba(255,255,255,0.05);
    border-color: rgba(231,235,241,0.18);
}
.fx-cat.active .fx-cat-ic { background: linear-gradient(135deg,#f3f5f8,#c7ccd4); color: #0a0a0b; border-color: #e7ebf1; }
.fx-cat.active .fx-cat-name { color: #fff; }
.fx-cat.active .fx-cat-arrow { color: #cfd6df; transform: translateX(3px); }

/* gentle auto-scan of the highlighted row while the scene is on screen */
.active-scene .fx-cat { animation: fxCatScan 8s infinite; }
.active-scene .fx-cat:nth-child(2) { animation-delay: 0s; }
.active-scene .fx-cat:nth-child(3) { animation-delay: 2s; }
.active-scene .fx-cat:nth-child(4) { animation-delay: 4s; }
.active-scene .fx-cat:nth-child(5) { animation-delay: 6s; }
/* first child is the search bar (nth-child 1); categories are 2..5 */
@keyframes fxCatScan {
    0%, 18%, 100% { background: transparent; border-color: transparent; }
    4%, 14% { background: rgba(255,255,255,0.05); border-color: rgba(231,235,241,0.18); }
}
.active-scene .fx-cat .fx-cat-ic,
.active-scene .fx-cat .fx-cat-name,
.active-scene .fx-cat .fx-cat-arrow { animation: none; }
/* keep the static .active styling as the resting state; disable auto-scan for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .active-scene .fx-cat { animation: none !important; }
}

/* ---- Mobile: pair each mockup with its own feature (no lone cycling card) ---- */
@media (max-width: 1024px) {
    .interactive-features {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    /* dissolve the two wrappers so tabs and scenes become siblings we can interleave */
    .feature-tabs, .feature-display {
        display: contents !important;
    }

    /* interleave order: tab1, scene1, tab2, scene2 … */
    .feature-tab:nth-of-type(1) { order: 1 !important; }
    #scene-1 { order: 2 !important; }
    .feature-tab:nth-of-type(2) { order: 3 !important; }
    #scene-2 { order: 4 !important; }
    .feature-tab:nth-of-type(3) { order: 5 !important; }
    #scene-3 { order: 6 !important; }
    .feature-tab:nth-of-type(4) { order: 7 !important; }
    #scene-4 { order: 8 !important; }
    .feature-tab:nth-of-type(5) { order: 9 !important; }
    #scene-5 { order: 10 !important; }

    /* the tab sits directly above its own mockup, no divider between the pair */
    .feature-tab {
        border-bottom: none !important;
        padding: 1.4rem 0 1rem 0 !important;
    }
    .feature-tab:first-child { border-top: none !important; }

    /* every scene is shown statically beneath its feature (no cycling on mobile) */
    .feature-display { }
    .feature-scene {
        position: static !important;
        inset: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        justify-content: flex-start !important;
        padding: 0 0 2.5rem 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        margin-bottom: 1rem !important;
    }
    .feature-scene:last-of-type { border-bottom: none !important; }

    .fx-win {
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
    }
}

/* ==========================================================================
   v8 — Orbital center: 30+ in the middle, arched labels hugging the circle
   Upper arch = DEDICATED PROFESSIONAL RESOURCES, lower arch = the (shortened)
   clinician-supervised / for-impact line. One SVG scales for desktop+mobile.
   ========================================================================== */
.orbital-arc {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}
/* medallion ring border the text rides on */
.orbital-arc .seal-ring {
    fill: none;
    stroke: url(#sealRing);
    stroke-width: 1.4;
}
.orbital-arc .seal-ring-outer {
    fill: none;
    stroke: rgba(255,255,255,0.06);
    stroke-width: 1;
}
.orbital-arc .seal-ring-inner {
    fill: none;
    stroke: rgba(255,255,255,0.08);
    stroke-width: 1;
}
.orbital-arc .seal-sep {
    fill: #e7ebf1;
    filter: drop-shadow(0 0 3px rgba(231,235,241,0.7));
}

.orbital-arc text {
    fill: #cfd6df;
    font-family: var(--font-heading);
    font-weight: 600;
}
.orbital-arc textPath { text-anchor: middle; }
.orbital-arc .arc-up { font-size: 9.5px; letter-spacing: 1.4px; }
.orbital-arc .arc-down {
    font-size: 9.5px;
    fill: #aab2bc;
    letter-spacing: 1.8px;
}

/* the 30+ counter sits above the arcs, dead centre */
.orbital-center .counter-wrapper { position: relative; z-index: 2; }

/* the standalone caption line below the orbital is gone (now the lower arch) */
.engine-caption { display: none; }

/* ==========================================================================
   v9 — smaller 30+ so it clears the ring, + role dropdown placeholder color
   ========================================================================== */
.orbital-center .metrics-num { font-size: 3.3rem !important; letter-spacing: -1px !important; }
.orbital-center .metrics-plus { font-size: 1.7rem !important; transform: translateY(-6px) !important; }
@media (max-width: 1024px) {
    .orbital-center .metrics-num { font-size: 2.4rem !important; }
    .orbital-center .metrics-plus { font-size: 1.25rem !important; transform: translateY(-4px) !important; }
}

/* role dropdown uses the same underline-select styling; match placeholder */
#roleSelectText { color: #565c63; }

/* ==========================================================================
   v10 — Core Engine interior circle: concentric-ring glowing medallion
   (silver/grey/black reinterpretation of the reference: nested rings, two
   glowing silver arc segments at the top + a small bottom accent, big 30+,
   straight "DEDICATED PROFESSIONAL RESOURCES", arched "CLINICIAN SUPERVISED")
   ========================================================================== */
.medallion-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}

/* concentric rings */
.med-ring { fill: none; }
.med-ring-outer { stroke: rgba(255,255,255,0.05); stroke-width: 1; }
.med-track     { stroke: rgba(255,255,255,0.07); stroke-width: 1.5; }
.med-dashed    { stroke: rgba(255,255,255,0.12); stroke-width: 1; stroke-dasharray: 1.5 5; }
.med-inner     { stroke: rgba(255,255,255,0.05); stroke-width: 1; }
.med-ring-outer { animation: medSpin 90s linear infinite; transform-origin: 110px 110px; }
.med-dashed    { animation: medSpin 60s linear infinite reverse; transform-origin: 110px 110px; }
@keyframes medSpin { to { transform: rotate(360deg); } }

/* glowing silver arc segments */
.med-glow {
    fill: none;
    stroke: url(#silverArc);
    stroke-width: 3;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px rgba(210,218,230,0.55)) drop-shadow(0 0 12px rgba(180,190,205,0.3));
}
.med-glow-sm { stroke-width: 2.4; opacity: 0.9; }

/* glowing endpoint dots */
.med-dot {
    fill: #eef1f5;
    filter: drop-shadow(0 0 4px rgba(230,235,241,0.9)) drop-shadow(0 0 9px rgba(200,208,220,0.5));
}

/* arched lower label */
.clin-text {
    fill: #9aa1a9;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 2.6px;
}
.medallion-svg text { text-anchor: middle; }
.clin-text textPath { text-anchor: middle; }

/* center stack: 30+ over the straight resources label */
.medallion-inner {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-bottom: 14px; /* leave room for the arched bottom label */
}
.medallion-inner .counter-wrapper {
    justify-content: center;
    margin: 0 0 0.35rem 0 !important;
}
.medallion-label {
    font-family: var(--font-heading);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.35;
    color: #cbd2db;
    text-transform: uppercase;
}

/* mobile scale-down of the straight label + arched text */
@media (max-width: 1024px) {
    .medallion-label { font-size: 0.5rem; letter-spacing: 0.12em; }
    .medallion-inner { padding-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .med-ring-outer, .med-dashed { animation: none !important; }
}