:root {
    --primary-blue: #041a3b;
    --accent-blue: #0D1B8C;
    --white-bg: #FFFFFF;
    --text-dark: #1A1A1A;
    --text-gray-dark: #4A4A4A;
    --text-light: #E6F1FF;
    --text-gray-light: #8892B0;
    --cta-color: #64FFDA;

    /* ===== NEW MATCHING PRIMARY COLORS ===== */
    --primary-deep: #050c3a;
    --primary-mid: #0d1133;
    --sec-lavender: #4c4e6d;
    --sec-muted: #B0B4D9;
    --light-cool: #E6E8F2;
    --light-tint: #F4F6FB;
    --gradient-card: linear-gradient(135deg, rgba(13, 27, 140, 0.8), rgba(46, 63, 191, 0.8));
}

html {
    overflow-y: scroll;
    /* keep scroll position trackable */
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    overflow-x: clip;
    background: #020617;
}

/* ==================================================
   LENIS SMOOTH SCROLL BOILERPLATE
================================================== */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

/* ==================================================
   DYNAMIC PREMIUM SCROLLBAR (SIMPLIFIED TO STATIC BLUE/WHITE)
================================================== */
/* === Hide native scrollbar on all browsers === */
* {
    scrollbar-width: none;
    /* Firefox */
}

::-webkit-scrollbar {
    display: none;
    /* Chrome / Edge / Safari */
}

/* === Custom overlay scrollbar === */
#custom-scrollbar-track {
    position: fixed;
    top: 0;
    right: 4px;
    width: 6px;
    height: 100vh;
    z-index: 99999;
    pointer-events: auto;
    background: transparent;
}

#custom-scrollbar-thumb {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    border-radius: 10px;
    background: linear-gradient(180deg, #1C31A5, #3b82f6);
    cursor: pointer;
    transition: opacity 0.3s ease;
    opacity: 0.85;
}

#custom-scrollbar-thumb:hover {
    opacity: 1;
}

/* ==================================================
   PREMIUM PRELOADER
================================================== */
.premium-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #ffffff;
    /* pure white for contrast */
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Lock body scroll while preloader is visible so browser scroll-restoration
   can't show a mid-page section before the hero animation starts. */
body.preloader-active {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    top: 0;
}

.preloader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* SVG Animations */
.medical-globe-svg {
    overflow: visible;
}

.medical-globe-svg .globe-lines {
    opacity: 0;
    animation: fadeInLines 1s ease-in-out 0.8s forwards;
}

.medical-globe-svg .globe-outline {
    stroke-dasharray: 277;
    stroke-dashoffset: 277;
    animation: drawPath 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.medical-globe-svg .ecg-line {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: drawPath 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.4s forwards;
}

@keyframes drawPath {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeInLines {
    to {
        opacity: 0.5;
    }
}

/* Text & Progress */
.preloader-text-wrap {
    text-align: center;
    opacity: 0;
    animation: fadeInText 0.8s ease forwards 1.2s;
}

.preloader-brand {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #041a3b;
    letter-spacing: -0.5px;
    display: block;
    margin-bottom: 15px;
}

.progress-bar-container {
    width: 140px;
    height: 3px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin: 0 auto;
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: #2563eb;
    animation: progressFill 2s ease-in-out forwards;
}

@keyframes progressFill {
    0% {
        width: 0%;
    }

    50% {
        width: 70%;
    }

    100% {
        width: 100%;
    }
}

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

/* Master Pin Container — white mat, flush at top so navbar merges seamlessly */
#pinned-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: visible;
    background: var(--white-bg);
    box-sizing: border-box;
    /* no top padding — navbar top is flush with white bg edge */
    padding: 0 10px 10px 10px;
}


/* Image frame — sits below the navbar droopdown, white visible on sides/bottom */
.hero-image-frame {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
    z-index: 0;
    /* Neutral fill behind the image — matches the surrounding white frame so the
       rounded corners never show a coloured lining if the cover image doesn't fill
       the corner pixels exactly. */
    background-color: var(--white-bg, #FFFFFF);
}

/* ==================================================
   HERO BACKGROUND LAYERS (HTML/CSS)
================================================== */
.hero-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    pointer-events: none;
}

.hero-bg-img-1 {
    opacity: 1;
    /* Default visible; the JS intro fades it in together with the hero content
       so the image and text/cards appear as one unit. */
}

/* Before the JS intro runs, keep the hero CONTENT hidden from the very first paint
   so none of it (title, subtitle, button, cards, nav) flashes in early. The hero
   background image is intentionally NOT hidden here — it's preloaded at high priority
   and should paint as the very first thing the user sees, with the content lifting in
   over it. The intro removes .hero-prep and reveals the content together. */
html.hero-prep #nav-wrapper,
html.hero-prep .nav-brand-corner,
html.hero-prep .nav-cta-corner,
html.hero-prep .image-hero-title,
html.hero-prep .image-hero-subtitle,
html.hero-prep .hero-cta-btn,
html.hero-prep .hero-card-bl,
html.hero-prep .hero-card-br {
    opacity: 0 !important;
}

.hero-bg-img-2 {
    opacity: 0;
    /* Hidden initially, crossfaded by GSAP */
}

.hero-dark-overlay {
    background-color: #020617;
    /* Matches phase 2 space theme */
    opacity: 0;
    /* Fades to 1 just before the globe scales up */
}

.dynamic-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(232, 238, 255);
    z-index: 0;
}

/* ==================================================
   MEDICAL BACKGROUND ELEMENTS (Phase 2)
================================================== */
.medical-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    /* revealed by GSAP */
    overflow: hidden;
}

/* Base icon styles */
.med-el {
    position: absolute;
    color: rgba(59, 130, 246, 0.12);
    transition: color 0.5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.med-el i {
    display: block;
}

/* Light Background Overrides */
.light-bg-med-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0 !important;
    overflow: hidden;
    opacity: 0.5 !important;
}

.light-bg-med-elements .med-el {
    color: rgba(13, 27, 140, 0.15) !important;
    opacity: 0.5 !important;
    transform: scale(1) !important;
    visibility: visible !important;
    display: flex !important;
}

.light-bg-med-elements .med-dot {
    background: rgba(13, 27, 140, 0.15) !important;
    box-shadow: 0 0 10px rgba(13, 27, 140, 0.2) !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    visibility: visible !important;
    display: block !important;
}

/* Individual icon placements & sizes */
.med-el-1 {
    /* Stethoscope — top left */
    font-size: 80px;
    top: 8%;
    left: 4%;
    animation: med-float-1 9s ease-in-out infinite;
    color: rgba(99, 102, 241, 0.13);
}

.med-el-2 {
    /* DNA — top right */
    font-size: 70px;
    top: 5%;
    right: 6%;
    animation: med-float-2 11s ease-in-out infinite;
    color: rgba(59, 130, 246, 0.10);
}

.med-el-3 {
    /* Cross — bottom left */
    font-size: 60px;
    bottom: 12%;
    left: 7%;
    animation: med-float-3 8s ease-in-out infinite;
    color: rgba(14, 165, 233, 0.13);
}

.med-el-4 {
    /* Pill — bottom right */
    font-size: 70px;
    bottom: 18%;
    right: 5%;
    animation: med-float-1 12s ease-in-out infinite reverse;
    color: rgba(99, 102, 241, 0.10);
}

.med-el-5 {
    /* ECG line — top center */
    font-size: 65px;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    animation: med-float-2 10s ease-in-out infinite;
    color: rgba(59, 130, 246, 0.10);
}

.med-el-6 {
    /* Microscope — mid left */
    font-size: 65px;
    top: 45%;
    left: 2%;
    animation: med-float-3 13s ease-in-out infinite;
    color: rgba(14, 165, 233, 0.09);
}

.med-el-7 {
    /* Syringe — mid right */
    font-size: 75px;
    top: 40%;
    right: 3%;
    animation: med-float-1 15s ease-in-out infinite;
    color: rgba(99, 102, 241, 0.11);
}

.med-el-8 {
    /* Shield — bottom center */
    font-size: 65px;
    bottom: 8%;
    left: 48%;
    animation: med-float-2 9.5s ease-in-out infinite reverse;
    color: rgba(59, 130, 246, 0.11);
}

.med-el-9 {
    /* Capsule — mid top right */
    font-size: 50px;
    top: 25%;
    right: 15%;
    animation: med-float-3 14s ease-in-out infinite reverse;
    color: rgba(14, 165, 233, 0.12);
}

.med-el-10 {
    /* Hospital — mid bottom left */
    font-size: 70px;
    bottom: 25%;
    left: 15%;
    animation: med-float-1 11s ease-in-out infinite;
    color: rgba(59, 130, 246, 0.10);
}

.med-el-large {
    width: 600px;
    height: 1400px;
    top: 15%;
    left: 50%;
    margin-top: -300px;
    margin-left: -300px;
    animation: med-float-large 20s ease-in-out infinite;
    position: absolute;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.med-el-large img {
    width: 200%;
    height: 100%;
    object-fit: contain;
    opacity: 0.08;
    /* subtle opacity for image */
}

@keyframes med-float-large {

    0%,
    100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }

    50% {
        transform: translateY(-20px) rotate(2deg) scale(1.05);
    }
}

/* Decorative floating dots */
.med-dot {
    position: absolute;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.18);
    animation: med-pulse 6s ease-in-out infinite;
}

.med-dot-1 {
    width: 6px;
    height: 6px;
    top: 20%;
    left: 15%;
    animation-delay: 0s;
}

.med-dot-2 {
    width: 4px;
    height: 4px;
    top: 35%;
    left: 88%;
    animation-delay: 1s;
    background: rgba(14, 165, 233, 0.2);
}

.med-dot-3 {
    width: 8px;
    height: 8px;
    top: 65%;
    left: 20%;
    animation-delay: 2s;
    background: rgba(59, 130, 246, 0.15);
}

.med-dot-4 {
    width: 5px;
    height: 5px;
    top: 75%;
    left: 80%;
    animation-delay: 3s;
}

.med-dot-5 {
    width: 7px;
    height: 7px;
    top: 50%;
    left: 50%;
    animation-delay: 1.5s;
    background: rgba(14, 165, 233, 0.12);
}

.med-dot-6 {
    width: 4px;
    height: 4px;
    top: 88%;
    left: 40%;
    animation-delay: 0.8s;
}

.med-dot-7 {
    width: 9px;
    height: 9px;
    top: 12%;
    left: 75%;
    animation-delay: 2.5s;
    background: rgba(99, 102, 241, 0.14);
}

.med-dot-8 {
    width: 6px;
    height: 6px;
    bottom: 30%;
    right: 25%;
    animation-delay: 1.2s;
    background: rgba(14, 165, 233, 0.16);
}

/* Keyframe animations */
@keyframes med-float-1 {

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

    33% {
        transform: translateY(-14px) rotate(3deg);
    }

    66% {
        transform: translateY(8px) rotate(-2deg);
    }
}

@keyframes med-float-2 {

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

    40% {
        transform: translateY(-10px) rotate(-4deg);
    }

    70% {
        transform: translateY(12px) rotate(2deg);
    }
}

@keyframes med-float-3 {

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

    50% {
        transform: translateY(-18px) translateX(6px);
    }
}

@keyframes med-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.6);
        opacity: 1;
    }
}

/* On small screens, hide outer elements */
@media (max-width: 768px) {

    .med-el-6,
    .med-el-7,
    .med-el-8 {
        display: none;
    }

    .med-el-1 {
        width: 60px;
        height: 60px;
    }

    .med-el-5 {
        width: 90px;
        height: 36px;
    }
}

.webgl-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
}

/* UI Layer */
.ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
}

.content-block {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    pointer-events: none;
    /* Make clicks pass through to the globe */
}

.initial-text {
    text-align: left;
    top: -5%;
    padding: 0 10px;
}

.final-text {
    top: 0;
    pointer-events: none;
    opacity: 0;
    transform: translateY(50px);
}

.final-text-header {
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
    pointer-events: none;
}

/* Phase 1 & 2 Restored Inline Styles */
.image-hero-title {
    color: #1a1f6e;
    font-size: 4.2rem;
    font-weight: 900;
    line-height: 1.05;
    pointer-events: auto;
}

.image-hero-subtitle {
    color: #0f172a;
    font-weight: 500;
    pointer-events: none;
    max-width: 400px;
    width: auto;
    font-size: 0.95rem;
    line-height: 1.65;
}

.btn-primary-pill {
    background-color: var(--accent-blue);
    color: white;
    padding: 18px 40px;
    border-radius: 40px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    pointer-events: auto;
}

.btn-primary-pill:hover {
    background-color: var(--primary-mid);
    color: white;
    box-shadow: 0 10px 20px rgba(13, 27, 140, 0.2);
}

.btn-play {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--primary-deep);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    pointer-events: auto;
}

.play-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--sec-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-play:hover .play-icon {
    border-color: var(--primary-deep);
    background: rgba(13, 27, 140, 0.05);
}

/* ---- Top Destinations: universal font ---- */
.final-text,
.final-text-header,
.final-text-header h2,
.final-text-header p,
.country-info,
.country-info h3,
.country-info p,
.globe-detail-badge,
.carousel-title,
.country-list li,
#country-title,
#country-desc {
    font-family: 'Outfit', sans-serif;
}

.country-info {
    pointer-events: auto;
    max-width: 400px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.globe-detail-badge {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffffff;
    backdrop-filter: blur(8px);
    margin-bottom: 14px;
    align-self: flex-start;
}

.dest-divider {
    width: 42px;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #818cf8 60%, transparent);
    border-radius: 2px;
    margin: 14px 0 18px;
}

.country-info h3 {
    color: white;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
}

.country-info p {
    color: #ffffff;
    opacity: 1;
    font-size: 0.97rem;
    line-height: 1.7;
    font-weight: 400;
    margin: 0;
}

#country-title {
    font-size: 3rem;
    letter-spacing: -0.5px;
}

#country-desc {
    margin-top: 10px !important;
}

.btn-thick-border {
    border-width: 2px !important;
    pointer-events: auto;
}

/* ---- Right carousel ---- */
.country-carousel {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.carousel-title {
    letter-spacing: 2.5px;
    pointer-events: none;
    font-size: 0.68rem;
    font-weight: 700;
    color: #ffffff !important;
    text-transform: uppercase;
    margin-bottom: 18px !important;
}

.vertical-carousel-container {
    height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 260px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.country-list {
    padding-top: 150px !important;
    padding-bottom: 150px !important;
}

/* Typography */
h1,
h2 {
    font-family: 'Outfit', sans-serif;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 3.5rem;
    line-height: 1.1;
}

p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 0;
}

.dark-text {
    color: var(--primary-blue);
}

.dark-para {
    color: var(--text-gray-dark);
}

.light-para {
    margin: 0 auto;
    max-width: 600px;
    color: #ffffff;
    font-size: 1rem;
}

/* Keep header text readable over the bright globe behind it */
.final-text-header h2,
.final-text-header p {
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(4, 12, 36, 0.9), 0 0 5px rgba(4, 12, 36, 0.65);
}

.glass-text {
    color: #ffffff;
    font-weight: 600;
}

/* Hero Buttons */
.button-group {
    display: flex;
    gap: 20px;
    margin-top: 35px;
}

.cta-primary {
    background: var(--primary-blue);
    color: var(--white-bg);
    border: none;
    padding: 16px 32px;
    font-size: 1.1rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(10, 25, 47, 0.2);
}

.cta-secondary {
    background: transparent;
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
    padding: 14px 30px;
    /* Reduced to align with primary border-box */
    font-size: 1.1rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cta-secondary:hover {
    background: rgba(10, 25, 47, 0.05);
    transform: translateY(-3px);
}

@media (max-width: 500px) {
    .button-group {
        flex-direction: column;
        gap: 15px;
    }
}

/* Country Pins (HTML Elements placed via JS) */
#html-pins-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    z-index: 10;
    /* Bring pins above the base canvas but below UI if needed */
}

.country-pin {
    position: absolute;
    /* top/left set dynamically by JS */
    transform: translate(-50%, -100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    font-size: 0.5rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: auto;
    /* Enable clicks */
    cursor: pointer;
}

.country-pin .pin-icon {
    width: 16px;
    height: 16px;
    margin-bottom: 6px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
    transition: transform 0.3s ease, stroke 0.3s ease, fill 0.3s ease;
}

.country-pin:hover {
    transform: translate(-50%, -100%) scale(1.2);
    z-index: 10;
}

.country-pin:hover .pin-icon {
    stroke: #facc15;
    fill: #facc15;
}

/* Normal Section Below */
.normal-section {
    padding: 100px 10%;
    background: var(--primary-blue);
    color: white;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 3;
}

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

@media (max-width: 768px) {

    h1,
    h2 {
        font-size: 2.2rem;
    }

    .initial-text {
        top: 20%;
        padding: 0 5%;
    }

    .initial-text::before {
        content: '';
        position: absolute;
        inset: -40px -30px;
        border-radius: 0;
        background: radial-gradient(ellipse at 40% 50%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 50%, transparent 75%);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        -webkit-mask-image: radial-gradient(ellipse at 40% 50%, black 30%, transparent 75%);
        mask-image: radial-gradient(ellipse at 40% 50%, black 30%, transparent 75%);
        z-index: 0;
        pointer-events: none;
    }

    .initial-text > * {
        position: relative;
        z-index: 1;
    }
}

/* ==================================================
   CONTACT SECTION (Lead Form)
================================================== */
.contact-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 5% 80px;
    overflow: hidden;
    background: #f8fafc;
    color: inherit;
}

/* Liquid Glass Background effect for Contact */
.contact-bg-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    overflow: hidden;
    filter: blur(100px);
}

.contact-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.35;
    animation: float 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-shape-1 {
    width: 70vw;
    height: 70vw;
    max-width: 800px;
    max-height: 800px;
    background: rgba(14, 165, 233, 0.18);
    bottom: -20%;
    left: -10%;
}

.contact-shape-2 {
    width: 60vw;
    height: 60vw;
    max-width: 600px;
    max-height: 600px;
    background: rgba(139, 92, 246, 0.1);
    top: -20%;
    right: -10%;
    animation-delay: -5s;
    opacity: 0.25;
}

.contact-shape-3 {
    width: 40vw;
    height: 40vw;
    max-width: 500px;
    max-height: 500px;
    background: rgba(28, 49, 165, 0.1);
    bottom: 0%;
    right: 30%;
    animation-delay: -10s;
    opacity: 0.2;
}

.contact-container {
    position: relative;
    z-index: 10;
    max-width: 1280px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* CONTACT LEFT CONTENT */
.urgency-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sec-muted);
    margin-bottom: 24px;
    backdrop-filter: blur(10px);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: var(--sec-muted);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--sec-muted);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(176, 180, 217, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(176, 180, 217, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(176, 180, 217, 0);
    }
}

.contact-title {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -1.5px;
    color: #0f172a;
}

.highlight-text {
    background: linear-gradient(90deg, var(--sec-muted), var(--sec-lavender));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.highlight-text-light {
    background: linear-gradient(100deg, #1C31A5 10%, #0ea5e9 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Contact section left-side refinements for light theme */
.contact-section .trust-indicators .col-sm-6 {
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151 !important;
}

.contact-subtitle {
    font-size: 1.05rem;
    color: #64748b;
    line-height: 1.65;
    margin-bottom: 36px;
    max-width: 480px;
}

/* BUTTONS */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, #1C31A5 0%, #3b82f6 100%);
    color: white;
    box-shadow: 0 10px 20px rgba(28, 49, 165, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 25px rgba(28, 49, 165, 0.4);
    background: linear-gradient(135deg, #243dba 0%, #4f8ff7 100%);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.contact-ctas {
    display: flex;
    gap: 16px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

/* TRUST INDICATORS */
.trust-indicators {
    display: flex;
    flex-direction: row;
    /* gap: 16px; */
    margin-bottom: 40px;
    margin-top: 0.5rem;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: #cbd5e1;
}

.trust-item svg {
    width: 20px;
    height: 20px;
    color: #10b981;
}

.country-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tag {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #e2e8f0;
    transition: all 0.3s;
    cursor: default;
}

.tag:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
}

/* CONTACT RIGHT FORM - legacy kept for other pages */
.glass-form {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.04), 0 20px 50px rgba(14, 165, 233, 0.07);
    position: relative;
    overflow: hidden;
}

/* ── Flat Underline Contact Form ── */
.cfc-heading {
    font-size: 2rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.6px;
    line-height: 1.2;
    margin: 0 0 8px;
}

.cfc-subheading {
    font-size: 0.9rem;
    color: #94a3b8;
    margin: 0 0 48px;
}

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

/* Two-column row */
.cfc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 48px;
}

.cfc-field {
    padding: 18px 0 14px;
    border-bottom: 1px solid rgba(0,0,0,0.13);
    cursor: text;
}

/* Full-name field gets top border too */
.cfc-form > .cfc-field:first-child,
.cfc-row .cfc-field {
    border-top: 1px solid rgba(0,0,0,0.13);
}

/* Row — only the row itself gets the bottom border, not each child */
.cfc-row {
    border-bottom: none;
}

.cfc-row .cfc-field {
    border-bottom: 1px solid rgba(0,0,0,0.13);
}

.cfc-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
}

.cfc-input {
    width: 100%;
    background: transparent;
    border: none;
    padding: 8px 0;
    font-size: 1rem;
    font-weight: 400;
    color: #0f172a;
    font-family: inherit;
    outline: none;
    appearance: none;
    line-height: 1.4;
    cursor: text;
    display: block;
}

.cfc-input::placeholder {
    color: transparent;
}

/* Phone */
.cfc-phone-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
}

.cfc-prefix {
    font-size: 1rem;
    font-weight: 400;
    color: #475569;
    white-space: nowrap;
    user-select: none;
    flex-shrink: 0;
}

.cfc-input--phone {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
    flex: 1;
    min-width: 0;
    font-size: 1rem;
}

/* Select */
.cfc-select-wrap {
    position: relative;
}

.cfc-select {
    padding-right: 24px !important;
    cursor: pointer;
    color: #0f172a;
    width: 100%;
}

.cfc-select option {
    color: #0f172a;
}

.cfc-chevron {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

/* Bottom row */
.cfc-bottom {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 32px;
}

.cfc-textarea {
    resize: none;
    line-height: 1.6;
    min-height: 56px;
}

/* Submit button */
.cfc-submit {
    padding: 14px 36px;
    background: var(--primary-deep);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.cfc-submit:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

.cfc-submit:active {
    transform: translateY(0);
    opacity: 1;
}

.glass-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.05) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    animation: shine 6s infinite;
}

@keyframes shine {
    0% {
        left: -100%;
    }

    20% {
        left: 200%;
    }

    100% {
        left: 200%;
    }
}

.glass-form h3 {
    font-size: 1.8rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.glass-form p {
    color: var(--sec-muted);
    font-size: 0.95rem;
    margin-bottom: 32px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: #374151;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Light-theme form controls for contact section */
.contact-section .form-label {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.contact-section .form-control,
.contact-section .form-select,
.contact-section .input-group-text {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #0f172a !important;
    border-radius: 10px !important;
    font-size: 0.95rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.contact-section .form-control:focus,
.contact-section .form-select:focus {
    background: #ffffff !important;
    border-color: #0ea5e9 !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12) !important;
    outline: none !important;
}

.contact-section .form-control::placeholder {
    color: #cbd5e1 !important;
}

.contact-section .input-group-text {
    border-right: none !important;
    color: #64748b !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}

.contact-section .input-group .form-control {
    border-left: none !important;
}

.form-control {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 14px 16px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s;
}

.form-control:focus {
    outline: none;
    border-color: var(--sec-lavender);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(140, 144, 199, 0.2);
}

.form-control::placeholder {
    color: #64748b;
}

.phone-input {
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s;
}

.phone-input:focus-within {
    border-color: var(--sec-lavender);
    box-shadow: 0 0 0 3px rgba(140, 144, 199, 0.2);
}

.country-code {
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.phone-input .form-control {
    border: none;
    background: transparent;
    border-radius: 0;
}

.phone-input .form-control:focus {
    box-shadow: none;
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

select.form-control option {
    background-color: #0f172a;
    color: white;
}

.btn-submit {
    width: 100%;
    margin-top: 10px;
    background: var(--primary-mid);
    color: white;
    padding: 16px;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-submit:hover {
    background: var(--primary-deep);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(13, 27, 140, 0.3);
}

.secure-badge {
    text-align: center;
    margin-top: 20px;
    font-size: 0.85rem;
    color: var(--sec-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {
    .image-hero-title {
        font-size: 3.5rem;
    }

    .contact-title {
        font-size: 2.8rem;
    }

    .contact-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .contact-content {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .contact-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .contact-ctas {
        justify-content: center;
    }

    .trust-indicators {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .who-we-are-row {
        flex-direction: column;
        gap: 30px;
    }

    .why-us-content {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .image-hero-title {
        font-size: 2.8rem;
    }

    .contact-title {
        font-size: 2.2rem;
    }

    .image-hero-top {
        padding-top: 100px;
        flex-direction: column;
    }

    .hero-top-left {
        padding-bottom: 60px;
    }

    .hero-top-right {
        opacity: 0.5;
    }

    .overlap-container {
        flex-direction: column;
    }

    .arch-wrapper {
        margin-top: 0;
        width: 100%;
        padding: 0 5%;
    }

    .arch-img {
        border-radius: 20px;
    }

    .glass-form {
        padding: 30px 20px;
    }

    .trust-indicators {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hero-stats {
        flex-direction: column;
        gap: 20px;
        padding: 24px 40px;
    }

    .divider {
        width: 50px;
        height: 1px;
    }
}

/* ==================================================
   DESTINATION CAROUSEL & ACTIVE PINS STRATEGY
================================================== */
.country-carousel {
    max-width: 280px;
    position: relative;
}

.country-list {
    margin: 0;
    padding: 0;
}

.country-list li {
    font-size: 1.7rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    color: #ffffff;
    padding: 14px 0;
    cursor: pointer;
    transition: all 0.35s ease;
    scroll-snap-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.country-list li.active {
    color: #ffffff;
    font-size: 2.4rem;
    font-weight: 700;
    border-bottom: 2px solid rgba(165, 180, 252, 0.5);
    text-shadow: 0 0 20px rgba(165, 180, 252, 0.4);
}

.country-list li:hover {
    color: #ffffff;
}

.vertical-carousel-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.vertical-carousel-container::-webkit-scrollbar {
    display: none;
}

/* Active Pin Highlight */
.country-pin.active-layer {
    z-index: 10;
}

.country-pin.active-pin {
    opacity: 1 !important;
    transform: translate(-50%, -100%) scale(1.0);
    z-index: 100 !important;
}

.country-pin.active-pin .pin-icon {
    stroke: #facc15;
    fill: #facc15;
    filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.85));
    animation: pinBounce 0.5s ease-out forwards;
}

.country-pin.active-pin span {
    color: #fde047;
    font-size: 1rem;
    /* background: rgba(0, 0, 0, 0.195); */
    padding: 3px 8px;
    border-radius: 6px;
    margin-top: 2px;
    /* border: 1px solid rgba(250, 204, 21, 0.3); */
}

@keyframes pinBounce {
    0% {
        transform: translateY(0);
    }

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

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

/* ==================================================
   ABOUT SECTION
================================================== */
.about-section {
    overflow: hidden;
    position: relative;
    z-index: 5;
}

.about-section-fade {
    height: 180px;
    background: linear-gradient(to bottom, #020617 0%, #ffffff 100%);
    width: 100%;
}

.about-subtitle {
    letter-spacing: 2px;
    color: var(--primary-deep);
}

.about-title {
    font-family: 'Outfit', sans-serif;
    line-height: 1.1;
    letter-spacing: -1px;
}

.about-text {
    line-height: 1.8;
}

.about-text-small {
    line-height: 1.8;
}

.about-divider {
    width: 2px;
    height: 40px;
}

.about-accent-shape {
    background: var(--primary-mid);
    opacity: 0.1;
    width: 400px;
    height: 400px;
    top: 0;
    right: 0;
    transform: translate(10%, -10%);
    z-index: 0;
}

.about-image-wrapper {
    aspect-ratio: 4/3;
}

.transition-scale {
    transition: transform 0.5s ease;
}

.about-image-wrapper:hover .transition-scale {
    transform: scale(1.05);
}

.about-floating-badge {
    margin-bottom: -50px;
    margin-left: -30px;
}

.about-badge-icon {
    width: 50px;
    height: 50px;
    color: var(--primary-deep);
    background: rgba(28, 49, 165, 0.1);
}

@media (max-width: 991px) {
    .about-floating-badge {
        margin-left: 0;
        margin-bottom: -30px;
    }
}

/* ========== PREMIUM GLASS BUTTON SYSTEM ========== */
@property --angle-1 {
    syntax: "<angle>";
    inherits: false;
    initial-value: -75deg;
}

@property --angle-2 {
    syntax: "<angle>";
    inherits: false;
    initial-value: -45deg;
}

.button-wrap {
    position: relative;
    z-index: 2;
    display: inline-block;
}

.button-shadow {
    display: none;
}

/* ========== MODERN PREMIUM GLASS BUTTON ========== */
.premium-glass-btn {
    all: unset;
    cursor: pointer;
    position: relative;
    z-index: 3;
    display: block;
    text-decoration: none !important;
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow:
        0 8px 32px 0 rgba(0, 0, 0, 0.25),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden;
}

.premium-glass-btn:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow:
        0 12px 40px 0 rgba(0, 0, 0, 0.35),
        0 0 20px 0 rgba(255, 255, 255, 0.15),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
}

.premium-glass-btn:active {
    transform: translateY(1px);
    box-shadow:
        0 4px 16px 0 rgba(0, 0, 0, 0.2),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

/* Button Text */
.premium-glass-btn>span {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.5px;
    color: #ffffff;
    padding: 14px 32px;
    white-space: nowrap;
    z-index: 3;
    transition: all 0.4s ease;
}

.premium-glass-btn:hover>span {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Sweeping Shine Hover Effect */
.premium-glass-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    z-index: 1;
    transition: all 0.6s ease;
}

.premium-glass-btn:hover::after {
    left: 150%;
}

/* Dark theme specific override */
.dark-theme-btn .premium-glass-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-theme-btn .premium-glass-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

/* WhatsApp Gradient Button override */
.dark-theme-btn .premium-glass-btn.whatsapp-gradient-btn,
.premium-glass-btn.whatsapp-gradient-btn {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.85), rgba(18, 140, 126, 0.95)) !important;
    border-color: rgba(37, 211, 102, 0.5) !important;
    box-shadow: 0 8px 32px rgba(37, 211, 102, 0.25) !important;
}

.dark-theme-btn .premium-glass-btn.whatsapp-gradient-btn:hover,
.premium-glass-btn.whatsapp-gradient-btn:hover {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.95), rgba(18, 140, 126, 1)) !important;
    border-color: rgba(37, 211, 102, 0.8) !important;
    box-shadow: 0 12px 40px rgba(37, 211, 102, 0.4) !important;
}


.page-home .liquid-navbar::after {
    display: none;
}

/* ==================================================
   NEW HYBRID ABOUT SECTION (Premium Modern Design)
================================================== */
.about-modern {
    background-color: #f1f5f9;
    font-family: inherit;
    overflow: hidden;
}

/* Part 1: Dark Area */
.about-dark-area {
    background-color: #020617;
    /* Deep midnight blue/black matching phase 2 */
    padding: 100px 0 140px 0;
    color: white;
}

.about-breadcrumb {
    color: #94a3b8;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

.about-page-title {
    font-size: 3.5rem;
}

.about-manifesto {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -1px;
}

.about-manifesto-para {
    font-size: 1.1rem;
    color: #94a3b8;
    /* Slate gray */
    line-height: 1.7;
    margin-bottom: 0;
}

/* Part 2: Geometric Wireframe Features */
.about-features-area {
    padding: 80px 0 140px 0;
    background-color: #f1f5f9;
    /* Slate 100 - nice light gray */
}

.feature-card {
    padding: 0 15px;
}

.wireframe-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 25px;
    color: #0f172a;
}

.wireframe-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 0.8;
}

.feature-card h4 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 15px;
}

.feature-card p {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.6;
}

/* Part 3: Overlapping Stat Banner & Video */
.about-media-area {
    background-color: #f1f5f9;
    padding-bottom: 100px;
    position: relative;
}

.stat-banner {
    background: #020617;
    /* Very dark blue/black */
    border-radius: 20px;
    padding: 50px 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(-90px);
    position: relative;
    z-index: 10;
}

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

.stat-item h3 {
    font-size: 3.5rem;
    font-weight: 700;
    color: #0ea5e9;
    /* Light futuristic blue */
    margin-bottom: 5px;
}

.stat-item span {
    color: #e2e8f0;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.stat-dot {
    width: 6px;
    height: 6px;
    background-color: #0ea5e9;
    border-radius: 50%;
    opacity: 0.7;
}

.video-preview-box {
    margin-top: -60px;
    /* Pull under the banner */
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    border: 10px solid white;
}

.video-preview-box img {
    height: 600px;
    width: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease;
}

.video-preview-box:hover img {
    transform: scale(1.05);
}

/* Play Button */
.play-btn-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.play-btn-circle svg {
    width: 30px;
    height: 30px;
    color: #0f172a;
    margin-left: 5px;
    /* Visual center triangle */
}

.play-btn-circle:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

/* Responsive */
@media (max-width: 991px) {
    .stat-banner {
        flex-direction: column;
        gap: 40px;
        transform: translateY(-50px);
        padding: 40px 20px;
    }

    .stat-dot {
        display: none;
    }

    .about-manifesto {
        font-size: 2.2rem;
    }

    .about-page-title {
        font-size: 2.8rem;
    }

    .video-preview-box img {
        height: 400px;
    }
}

/* ==================================================
   LIQUID GLASS BUTTON
================================================== */
.liquid-glass-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 32px 0 rgba(13, 27, 140, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    color: var(--primary-deep);
    border-radius: 40px;
    padding: 16px 36px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
    pointer-events: auto;
}

.liquid-glass-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: -1;
}

.liquid-glass-btn:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.8);
    color: var(--primary-deep);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px 0 rgba(13, 27, 140, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.liquid-glass-btn:hover::before {
    left: 200%;
}

/* Vignette to blend edges and protect text legibility on the left */
.img-vignette {
    display: none;
}

/* ==================================================
   HERO PHASE 1 — CTA BUTTON & FLOATING CARDS
================================================== */

/* Dark navy CTA button matching reference image */
.hero-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #1a1f6e;
    color: #ffffff;
    border: none;
    border-radius: 40px;
    padding: 16px 32px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none !important;
    letter-spacing: 0.3px;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(26, 31, 110, 0.4);
}

.hero-cta-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent);
    border-radius: inherit;
}

.hero-cta-btn:hover {
    background: #252c8a;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(26, 31, 110, 0.5);
}

.hero-cta-btn svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.hero-cta-btn:hover svg {
    transform: translate(2px, -2px);
}

/* Cards hidden until JS intro animation reveals them */
.initial-text-cards {
    pointer-events: auto;
    opacity: 0;
}

/* Bottom-left card */
.hero-card-bl {
    position: absolute;
    bottom: 8px;
    left: 52px;
    width: 300px;
    z-index: 3;
    overflow: visible;
}

.hero-bl-card-inner {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 20px 18px 28px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: visible;
    border-radius: 24px;
    filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.14));
}

.hero-bl-card-icon {
    width: 40px;
    height: 40px;
    background: #1a1f6e;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.hero-bl-card-text {
    flex: 1;
}

.hero-bl-card-text h5 {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 5px 0;
    line-height: 1.3;
}

.hero-bl-card-text p {
    font-size: 0.78rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.hero-bl-card-arrow {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    background: rgba(26, 31, 110, 0.08);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1f6e;
}

/* Bottom-right stats card — liquid glass style */
.hero-card-br {
    position: absolute;
    bottom: 8px;
    right: 52px;
    width: 340px;
    z-index: 3;
    background: rgba(240, 235, 255, 0.55);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 24px;
    padding: 20px 22px 18px;
    box-shadow: 0 8px 40px rgba(80, 60, 180, 0.15), inset 0 1px 0 rgba(255,255,255,0.8);
}

.hero-br-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.hero-br-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.hero-br-stat-num {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

.hero-br-stat-label {
    font-size: 0.68rem;
    color: #64748b;
    line-height: 1.3;
    margin-top: 3px;
}

.hero-br-logo {
    width: 44px;
    height: 44px;
    background: #1a1f6e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(26, 31, 110, 0.35);
}

.hero-br-quote {
    font-size: 0.78rem;
    color: #334155;
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}

.hero-br-quote span {
    font-style: normal;
    font-weight: 600;
    color: #1a1f6e;
}

@media (max-width: 1024px) {
    .hero-card-bl,
    .hero-card-br {
        display: none;
    }

    /* Subjects sit right-of-center — bias the crop right so they stay in frame */
    .hero-bg-img-1,
    .hero-bg-img-2 {
        background-position: 68% center;
    }

    .image-hero-title {
        font-size: 4rem;
        font-weight: 900 !important;
        letter-spacing: -0.5px;
        text-shadow: none;
        -webkit-text-stroke: 0;
    }

    .image-hero-subtitle {
        font-size: 1.05rem;
        font-weight: 900;
        text-shadow: none;
    }

    .initial-text {
        top: -4%;
    }

    /* Blur overlay behind hero content on tablet — same radial spread as mobile */
    .initial-text::before {
        content: '';
        position: absolute;
        inset: -40px -30px;
        border-radius: 0;
        background: radial-gradient(ellipse at 40% 50%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 50%, transparent 75%);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        -webkit-mask-image: radial-gradient(ellipse at 40% 50%, black 30%, transparent 75%);
        mask-image: radial-gradient(ellipse at 40% 50%, black 30%, transparent 75%);
        z-index: 0;
        pointer-events: none;
    }

    .initial-text > * {
        position: relative;
        z-index: 1;
    }
}

/* Mobile/tablet: image goes full-bleed — no white mat around it */
@media (max-width: 991px) {
    #pinned-container {
        padding: 0;
    }

    .hero-image-frame {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

@media (max-width: 768px) {
    .hero-cta-btn {
        padding: 14px 26px;
        font-size: 0.88rem;
    }

    .image-hero-title {
        font-size: 3rem;
        line-height: 1.15;
        font-weight: 900 !important;
        letter-spacing: -0.5px;
        text-shadow: none;
        -webkit-text-stroke: 0;
    }

    .image-hero-subtitle {
        font-size: 1rem;
        max-width: 92%;
        margin-bottom: 1.5rem !important;
        font-weight: 900;
        text-shadow: none;
    }

    .initial-text {
        top: -2%;
    }

    /* Phone cover-crop shows ~1/3 of the image width — pull focus further right */
    .hero-bg-img-1,
    .hero-bg-img-2 {
        background-position: 72% center;
    }

    /* Phase 2 — country info pinned to bottom-left from the start */
    .final-text {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        padding-bottom: 60px;
        padding-left: 20px;
        pointer-events: none;
    }

    .country-info {
        align-self: flex-start;
        max-width: 85%;
        pointer-events: auto;
        transform: scale(0.72);
        transform-origin: left bottom;
        margin-top: 56px;
    }
}

@media (max-width: 576px) {
    .image-hero-title {
        font-size: 2.5rem;
        font-weight: 900 !important;
        letter-spacing: -0.5px;
        text-shadow: none;
        -webkit-text-stroke: 0;
    }

    .image-hero-subtitle {
        font-size: 0.95rem;
        font-weight: 900;
        text-shadow: none;
    }
}

/* ==================================================
   BENTO GRID SECTION (WHY US)
================================================== */
.bento-section {
    background-color: #020617;
    /* Matches footer/contact */
    position: relative;
    overflow: hidden;
}

.bento-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    grid-auto-flow: dense;
    width: 100%;
}

.glass-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease;
}

.glass-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Ambient Inner Glows */
.bento-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
}

.glass-card:hover .bento-glow {
    opacity: 0.5;
}

.bento-glow-blue {
    top: -50px;
    left: -50px;
    background: #0ea5e9;
}

.bento-glow-purple {
    bottom: -50px;
    right: -50px;
    background: #8C90C7;
}

/* Grid Sizing Variables */
.tall {
    grid-row: span 2;
}

.wide {
    grid-column: span 2;
}

.big {
    grid-column: span 2;
    grid-row: span 2;
}

/* Icon Boxes */
.bento-icon-box {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.3s ease, background 0.3s ease;
}

.glass-card:hover .bento-icon-box {
    transform: scale(1.1) rotate(-5deg);
    background: rgba(255, 255, 255, 0.1);
}

/* Big Image Card Overlay */
.bento-bg-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s ease;
    z-index: 0;
}

.glass-card:hover .bento-bg-img {
    transform: scale(1.05);
}

.bento-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #020617 10%, rgba(2, 6, 23, 0.4) 60%, transparent);
    z-index: 1;
}

/* Image Effects */
.grayscale-hover {
    filter: grayscale(100%) opacity(0.8);
}

.glass-card:hover .grayscale-hover {
    filter: grayscale(0%) opacity(1);
}

/* Mobile Fallbacks */
@media (max-width: 768px) {

    .wide,
    .big {
        grid-column: span 1;
    }

    .bento-gallery {
        grid-auto-rows: minmax(250px, auto);
    }

    .bento-item.big h3 {
        font-size: 2rem;
    }
}

/* ==================================================
   REALITY CHECK SECTION — PINNED WORD REVEAL
================================================== */
.reality-section {
    background: #020617;
    position: relative;
}

/* Masks the hard section cut between pinned-container and reality-section */
.reality-section::before {
    content: '';
    position: absolute;
    top: -180px;
    left: 0;
    right: 0;
    height: 180px;
    background: linear-gradient(to bottom, transparent 0%, #020617 100%);
    pointer-events: none;
    z-index: 20;
}

/* ── Pinned viewport panel ── */
.rc-pin-wrap {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
}

.rc-pin-inner {
    width: 100%;
    padding: 0 clamp(24px, 5vw, 72px);
}

/* Top label — in normal flow, sits above the title */
.rc-top-label {
    display: block;
    font-size: 1rem;
    letter-spacing: 0.2em;
    color: #e74c3c;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 2rem;
}

/* ── Giant word-reveal title ── */
.rc-reveal-title {
    font-size: clamp(2.6rem, 7.5vw, 7rem);
    font-weight: 900;
    line-height: 1.0;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin: 0 0 2rem;
    font-family: 'Outfit', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 0.05em;
}

/* Each line is a block, with staggered left indent like the reference */
.rc-line {
    display: block;
}
.rc-line-1 { margin-left: clamp(60px, 10vw, 180px); }
.rc-line-2 { margin-left: clamp(120px, 16vw, 300px); }
.rc-line-3 { margin-left: clamp(180px, 22vw, 420px); }
.rc-line-4 { margin-left: clamp(60px, 10vw, 180px); }

/* Each word starts near-invisible, JS drives alpha to 1 via scroll */
.rc-word {
    display: inline-block;
    color: rgba(255, 255, 255, 0.02);
    will-change: color;
    margin-right: 0.25em;
}
.rc-word:last-child { margin-right: 0; }

/* Sub-line — hidden until near end of pin */
.rc-reveal-sub {
    font-size: clamp(0.9rem, 1.4vw, 1.05rem);
    color: rgba(255, 255, 255, 0);
    max-width: 480px;
    line-height: 1.7;
    margin: 0;
    font-weight: 400;
    will-change: color;
    margin-left: 2px;
}

/* ── Editorial pinned panel ── */
.rc-editorial-wrap {
    position: relative;
    height: 100vh;          /* JS will pin this */
}

.rc-editorial {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    height: 100vh;
    background: #020617;
    padding: clamp(40px, 6vh, 80px) clamp(24px, 5vw, 72px);
    box-sizing: border-box;
    align-items: stretch;
    column-gap: clamp(24px, 4vw, 60px);
}

/* ── Vertical divider — center column ── */
.rc-divider-line {
    grid-column: 2;
    align-self: stretch;
    width: 1px;
    background: rgba(255,255,255,0.1);
    position: relative;
    overflow: hidden;
}

.rc-divider-line::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: var(--line-progress, 0%);
    background: linear-gradient(to bottom,
        var(--cta-color) 0%,
        rgba(100,255,218,0.3) 100%);
    will-change: height;
}

/* ── Columns ── */
.rc-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}

/* ── Label ── */
.rc-col-label {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cta-color);        /* site teal */
    font-weight: 700;
    margin-bottom: clamp(0.6rem, 1.5vh, 1.2rem);
    display: block;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.rc-label-red   { color: #2563eb; }   /* site accent blue */
.rc-label-amber { color: #8892B0; }   /* site muted */

/* ── Big title ── */
.rc-col-title {
    font-size: clamp(1.8rem, 4.2vw, 4.8rem);
    font-weight: 900;
    line-height: 0.93;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: #E6F1FF;             /* --text-light */
    font-family: 'Outfit', sans-serif;
    margin: 0 0 clamp(0.8rem, 2vh, 1.8rem);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease 0.08s, transform 0.5s ease 0.08s;
}
.rc-title-right { color: #2563eb; }   /* site blue for right col titles */


/* ── Row list ── */
.rc-col-rows {
    display: flex;
    flex-direction: column;
    border-top: 1px solid transparent;   /* hidden until col is visible */
    flex: 1;
    transition: border-color 0.4s ease;
}

.rc-col.rc-visible .rc-col-rows {
    border-top-color: rgba(255,255,255,0.07);
}

.rc-col-left.rc-visible .rc-col-rows {
    border-top-color: rgba(100,255,218,0.2);
}

.rc-row {
    display: flex;
    align-items: baseline;
    gap: clamp(0.8rem, 2vw, 1.5rem);
    padding: clamp(0.45rem, 1vh, 0.75rem) 0;
    border-bottom: 1px solid transparent;  /* hidden until row is visible */
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
}

.rc-row.rc-row-visible {
    border-bottom-color: rgba(255,255,255,0.05);
}

.rc-col-left .rc-row.rc-row-visible {
    border-bottom-color: rgba(100,255,218,0.08);
}

.rc-row.rc-row-visible {
    opacity: 1;
    transform: translateY(0);
}

.rc-row-key {
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cta-color);
    font-weight: 700;
    min-width: clamp(60px, 8vw, 100px);
    flex-shrink: 0;
}
.rc-key-right { color: #2563eb; }

.rc-row-val {
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    color: rgba(230,241,255,0.6);
    font-family: 'Outfit', sans-serif;
}

/* When column becomes visible, label + title animate in */
.rc-col.rc-visible .rc-col-label,
.rc-col.rc-visible .rc-col-title {
    opacity: 1;
    transform: translateY(0);
}

/* Smart Choice + Bottleneck labels always visible from start */
.rc-col-left .rc-col-label,
#rc-right-top .rc-col-label {
    opacity: 1;
    transform: translateY(0);
}

/* Financial Trap label + all right-col rows borders are scrub-driven by JS */
#rc-right-bot .rc-col-label {
    opacity: 0;
    transform: translateY(10px);
    transition: none;
}
#rc-right-bot .rc-col-rows,
#rc-right-top .rc-col-rows {
    border-top-color: transparent !important;
    transition: none;
}

/* Right column internal split */
.rc-right-block { flex: 0 0 auto; }

/* Remove extra space after last row in each block */
.rc-right-block .rc-col-rows .rc-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

/* Horizontal rule between the two right blocks — hidden until JS activates */
.rc-h-rule {
    height: 0;
    background: rgba(255,255,255,0.08);
    margin: 0;
    width: 0%;
    opacity: 0;
    overflow: hidden;
    transition: none;
}

/* Tablet: push country-info (left dec) further down in the "Where Will You Study" section */
@media (min-width: 769px) and (max-width: 1024px) {
    .final-text {
        align-items: flex-end !important;
        justify-content: space-between !important;
    }

    .country-info {
        align-self: flex-end;
        margin-bottom: 80px;
    }
}

/* Tablet: 2-col layout still works but scale everything up */
@media (min-width: 768px) and (max-width: 991px) {
    .rc-editorial {
        padding: clamp(48px, 7vh, 80px) clamp(32px, 5vw, 56px);
        column-gap: clamp(28px, 4vw, 48px);
        align-items: center;
    }

    .rc-col-label {
        font-size: 0.75rem;
        letter-spacing: 0.18em;
        margin-bottom: 1rem;
    }

    .rc-col-title {
        font-size: clamp(2.8rem, 7vw, 4.2rem);
        margin-bottom: 1.6rem;
    }

    .rc-row {
        padding: clamp(0.6rem, 1.4vh, 1rem) 0;
        gap: 1.2rem;
    }

    .rc-row-key {
        font-size: 0.7rem;
        letter-spacing: 0.14em;
        min-width: clamp(70px, 10vw, 110px);
    }

    .rc-row-val {
        font-size: clamp(0.9rem, 1.6vw, 1.1rem);
    }
}

@media (max-width: 767px) {
    .rc-editorial {
        grid-template-columns: 1fr;
        height: auto;
        overflow-y: auto;
        padding: 48px 24px;
        row-gap: 48px;
    }
    .rc-editorial-wrap { height: auto; }
    .rc-divider-line { display: none; }
    .rc-col-title { font-size: clamp(2.4rem, 9vw, 3.2rem); }
    .rc-col-label { font-size: 0.72rem; }
    .rc-row-key { font-size: 0.68rem; }
    .rc-row-val { font-size: clamp(0.88rem, 3.5vw, 1rem); }
}

/* pulse dot — keep for badge use elsewhere */
.pulse-dot-light {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    position: relative;
    flex-shrink: 0;
}
.pulse-dot-light::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #ef4444;
    animation: pulseBadgeLight 2s infinite;
}
@keyframes pulseBadgeLight {
    0%   { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(3.5); opacity: 0; }
}

/* Tablet: scale up the word-reveal title */
@media (min-width: 576px) and (max-width: 1024px) {
    .rc-reveal-title { font-size: clamp(5rem, 10vw, 9rem); }
    .rc-line-1 { margin-left: clamp(40px, 6vw, 100px); }
    .rc-line-2 { margin-left: clamp(80px, 12vw, 200px); }
    .rc-line-3 { margin-left: clamp(120px, 18vw, 300px); }
    .rc-line-4 { margin-left: clamp(40px, 6vw, 100px); }
}

@media (max-width: 768px) {
    .rc-reveal-title { font-size: clamp(4rem, 16vw, 7rem); }
    .rc-line-1 { margin-left: clamp(20px, 4vw, 60px); }
    .rc-line-2 { margin-left: clamp(40px, 8vw, 100px); }
    .rc-line-3 { margin-left: clamp(60px, 12vw, 140px); }
    .rc-line-4 { margin-left: clamp(20px, 4vw, 60px); }
}

@media (max-width: 575px) {
    .rc-small-cards { grid-template-columns: 1fr; }
    .rc-reveal-title { font-size: clamp(3.5rem, 17vw, 5.5rem); }
    .rc-line-1 { margin-left: clamp(10px, 2vw, 30px); }
    .rc-line-2 { margin-left: clamp(20px, 5vw, 60px); }
    .rc-line-3 { margin-left: clamp(30px, 8vw, 80px); }
    .rc-line-4 { margin-left: clamp(10px, 2vw, 30px); }
}

/* ══════════════════════════════════════════════
   GLASS CARDS — stat + quote style (reference)
   ══════════════════════════════════════════════ */

.gc-card {
    position: relative;
    border-radius: 24px;
    padding: 20px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 0;
    cursor: default;
    will-change: auto;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease,
                background 0.35s ease;
    background: rgba(240, 235, 255, 0.52);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow:
        0 8px 40px rgba(80, 60, 180, 0.15),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(80, 60, 180, 0.05);
}

.gc-card:hover {
    transform: translateY(-6px) scale(1.012);
    box-shadow:
        0 16px 56px rgba(80, 60, 180, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Variant tints — liquid glass treatment matching hero-card-br */
.gc-card-solution {
    background: rgba(235, 238, 255, 0.52);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow:
        0 8px 40px rgba(80, 60, 180, 0.18),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(80, 60, 180, 0.06);
}

.gc-card-solution:hover {
    background: rgba(235, 238, 255, 0.65);
    box-shadow:
        0 18px 56px rgba(80, 60, 180, 0.26),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(80, 60, 180, 0.08);
}

.gc-card-red {
    background: rgba(255, 240, 240, 0.52);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow:
        0 8px 40px rgba(200, 60, 60, 0.15),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(200, 60, 60, 0.06);
}

.gc-card-red:hover {
    background: rgba(255, 240, 240, 0.65);
    box-shadow:
        0 16px 52px rgba(200, 60, 60, 0.24),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(200, 60, 60, 0.08);
}

.gc-card-amber {
    background: rgba(255, 249, 235, 0.52);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow:
        0 8px 40px rgba(180, 120, 20, 0.15),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(180, 120, 20, 0.06);
}

.gc-card-amber:hover {
    background: rgba(255, 249, 235, 0.65);
    box-shadow:
        0 16px 52px rgba(180, 120, 20, 0.24),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(180, 120, 20, 0.08);
}

/* Animated specular sweep */
.gc-card-shine {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    clip-path: inset(0 round 24px);
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        118deg,
        transparent 20%,
        rgba(255,255,255,0.0) 30%,
        rgba(255,255,255,0.6) 46%,
        rgba(255,255,255,0.82) 50%,
        rgba(255,255,255,0.6) 54%,
        rgba(255,255,255,0.0) 70%,
        transparent 80%
    );
    background-size: 280% 100%;
    background-position: 200% 0;
    animation: gcShine 7s ease-in-out infinite;
}

@keyframes gcShine {
    0%        { background-position: 210% 0; opacity: 0; }
    6%        { opacity: 1; }
    32%       { background-position: -40% 0; opacity: 1; }
    42%, 100% { background-position: -40% 0; opacity: 0; }
}

/* Circular icon badge — floats top-right */
.gc-icon-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

.gc-card:hover .gc-icon-badge {
    transform: scale(1.1) rotate(-6deg);
}

.gc-icon-navy {
    background: #1a1f6e;
    color: #fff;
    box-shadow: 0 4px 16px rgba(26,31,110,0.4);
}

.gc-icon-red {
    background: rgba(239,68,68,0.12);
    color: #b91c1c;
    border: 1px solid rgba(239,68,68,0.25);
    box-shadow: 0 4px 14px rgba(239,68,68,0.18);
}

.gc-icon-amber {
    background: rgba(245,158,11,0.12);
    color: #92400e;
    border: 1px solid rgba(245,158,11,0.25);
    box-shadow: 0 4px 14px rgba(245,158,11,0.18);
}

/* Stats row — numbers + labels side by side */
.gc-stats-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-right: 54px; /* clear the icon badge */
    position: relative;
    z-index: 2;
    margin-bottom: 16px;
}

.gc-stats-col {
    flex-direction: column;
    gap: 4px;
}

.gc-stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.gc-stat-num {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    color: #0f172a;
    font-family: 'Outfit', sans-serif;
}

.gc-stat-red   { color: #b91c1c !important; }
.gc-stat-amber { color: #92400e !important; }

.gc-stat-label {
    font-size: 0.72rem;
    color: #64748b;
    line-height: 1.35;
    font-weight: 500;
}

/* Vertical divider between stats */
.gc-stat-divider {
    width: 1px;
    height: 36px;
    background: rgba(0,0,0,0.09);
    align-self: center;
    flex-shrink: 0;
}

/* Horizontal rule between stats and quote */
.gc-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(0,0,0,0.08), rgba(0,0,0,0.04) 70%, transparent);
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
}

/* Tag label */
.gc-tag {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    z-index: 2;
    margin-bottom: 2px;
}

.gc-tag-navy  { color: #1a1f6e; }
.gc-tag-red   { color: #b91c1c; }
.gc-tag-amber { color: #92400e; }

/* Card heading */
.gc-heading {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 6px;
    position: relative;
    z-index: 2;
    color: #0f172a;
}

.gc-heading-navy  { color: #1a1f6e; }
.gc-heading-red   { color: #b91c1c; }
.gc-heading-amber { color: #92400e; }

/* Description */
.gc-desc {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.65;
    margin: 0;
    position: relative;
    z-index: 2;
    flex: 1;
}

.gc-desc-sm { font-size: 0.82rem; }

/* Perks pills */
.gc-perks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    position: relative;
    z-index: 2;
    margin-top: 4px;
}

.gc-perk {
    font-size: 0.70rem;
    font-weight: 600;
    color: #1a1f6e;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.8);
    padding: 3px 11px;
    border-radius: 99px;
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 4px rgba(26,31,110,0.08);
}

/* Progress bar */
.gc-bar-wrap {
    height: 4px;
    border-radius: 99px;
    background: rgba(0,0,0,0.07);
    overflow: hidden;
    position: relative;
    z-index: 2;
    margin-top: 6px;
}

.gc-bar {
    height: 100%;
    border-radius: 99px;
    width: 0%;
    transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.gc-bar-red   { background: linear-gradient(90deg, #fca5a5, #b91c1c); }
.gc-bar-amber { background: linear-gradient(90deg, #fcd34d, #b45309); }

/* CTA button */
.lq-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 14px;
    background: #1a1f6e;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    position: relative;
    z-index: 3;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 6px 20px rgba(26,31,110,0.35);
    margin-top: 4px;
}

.lq-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(26,31,110,0.45);
    color: #fff;
}



.solution-col { z-index: 5; }

/* Keep old pulse-dot for any remaining uses */
.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: relative;
}

.pulse-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    animation: pulseBadge 2s infinite;
}

@keyframes pulseBadge {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(3); opacity: 0; }
}

/* ==================================================
   ANATOMY STACK SECTION - SCROLL CARD STACK
================================================== */

/* Section wrapper */
.anatomy-stack-section {
    background: #f8fafc;
    position: relative;
}


/* Section header — normal scroll flow, not sticky */
.anatomy-section-header {
    padding: 80px 0 60px;
}

.anatomy-main-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 16px;
    line-height: 1.15;
}

.anatomy-main-sub {
    font-size: 1.1rem;
    color: #64748b;
    margin: 0;
}

/* Card stack pin wrapper — GSAP will pin this */
.anatomy-pin-wrap {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

/* Cards container — fills the pinned viewport */
.anatomy-cards-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Individual card — absolutely stacked, slides up via GSAP */
.anatomy-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 40px 0;
    will-change: transform;
}

.anatomy-card-inner {
    background: #ffffff;
    border-radius: 0;
    box-shadow: 0 4px 40px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    min-height: 600px;
}

/* Left side: content */
.anatomy-card-left {
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    position: relative;
    background: #041a3b;
    border-left: 4px solid #0a2d5e;
}

.anatomy-card-number {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    margin-bottom: 20px;
}

.anatomy-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 0;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    margin-bottom: 20px;
}

.anatomy-card-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: 16px;
    align-self: flex-start;
}

.anatomy-card-title {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 16px;
}

.anatomy-card-desc {
    font-size: 1rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
    margin-bottom: 28px;
}

/* Stat bar */
.anatomy-stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.anatomy-stat-bar {
    height: 6px;
    background: rgba(255,255,255,0.2);
    border-radius: 100px;
    overflow: hidden;
}

.anatomy-stat-fill {
    height: 100%;
    width: var(--fill, 0%);
    background: rgba(255,255,255,0.9);
    border-radius: 100px;
    transform-origin: left;
    transition: width 1s cubic-bezier(0.4,0,0.2,1);
}

.anatomy-stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
}

/* Right side: image */
.anatomy-card-right {
    position: relative;
    overflow: hidden;
    min-height: 600px;
    height: 100%;
}

.anatomy-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.anatomy-card:hover .anatomy-card-img {
    transform: scale(1.04);
}

.anatomy-card-img-overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay-color, rgba(14,165,233,0.12));
}

.anatomy-card-img-label {
    position: absolute;
    bottom: 28px;
    left: 28px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 10px 20px;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.2);
}

/* Card stacking shadow depth effect */
.anatomy-card[data-card="1"] { z-index: 1; }
.anatomy-card[data-card="2"] { z-index: 2; }
.anatomy-card[data-card="3"] { z-index: 3; }
.anatomy-card[data-card="4"] { z-index: 4; }


/* Reversed card: image left, text right */
.anatomy-card-inner.reversed {
    direction: rtl;
}

.anatomy-card-inner.reversed .anatomy-card-left,
.anatomy-card-inner.reversed .anatomy-card-right {
    direction: ltr;
}

/* Responsive — tablet & mobile: keep the stacked scroll effect, stack card content vertically */
@media (max-width: 991px) {
    .anatomy-section-header {
        padding: 56px 0 40px;
        text-align: center;
    }

    .anatomy-main-title {
        font-size: clamp(2rem, 5.5vw, 2.8rem);
    }

    .anatomy-main-sub {
        font-size: 1rem;
    }

    /* Pin wrap stays full-viewport-height so GSAP can pin it */
    .anatomy-pin-wrap {
        height: 100vh;
        overflow: hidden;
    }

    /* Cards stay absolutely stacked — same as desktop */
    .anatomy-card {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 12px 0;
        align-items: center;
    }

    /* Two-column grid collapses to single column; image on top */
    .anatomy-card-inner {
        grid-template-columns: 1fr;
        grid-template-rows: 45% 55%;
        min-height: auto;
        height: 100%;
        max-height: calc(100vh - 24px);
        overflow: hidden;
    }

    .anatomy-card-inner.reversed {
        direction: ltr;
    }

    .anatomy-card-right {
        order: -1;
        height: 100%;
        min-height: unset;
    }

    .anatomy-card-left {
        padding: 24px 22px;
        overflow-y: auto;
    }
}

@media (max-width: 576px) {
    .anatomy-section-header {
        padding: 44px 0 32px;
    }

    .anatomy-main-title {
        font-size: clamp(1.75rem, 6.5vw, 2.2rem);
    }

    .anatomy-card {
        padding: 8px 0;
    }

    .anatomy-card-inner {
        grid-template-rows: 42% 58%;
        max-height: calc(100vh - 16px);
    }

    .anatomy-card-right {
        height: 100%;
        min-height: unset;
    }

    .anatomy-card-left {
        padding: 20px 16px;
    }

    .anatomy-card-title {
        font-size: 1.25rem;
    }

    .anatomy-card-desc {
        font-size: 0.9rem;
        margin-bottom: 18px;
    }

    .anatomy-header-inner {
        flex-direction: column;
        gap: 6px;
    }
}


/* Light Theme Base Wrapper */
.light-theme-wrapper {
    background: linear-gradient(180deg, #f0f4ff 0%, #f8fafc 20%, #ffffff 50%, #ffffff 100%);
    box-shadow: 0 -20px 60px rgba(13, 27, 140, 0.08);
    position: relative;
    z-index: 2;
}

.usp-premium-stack {
    background: transparent;
    padding-top: 100px;
    padding-bottom: 0;
    position: relative;
    /* NOTE: Do NOT use overflow:hidden here — it breaks position:sticky on children */
}

/* SVG Dot Grid */
.usp-dot-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    z-index: 0;
}

/* Text Highlights */
.highlight-text-blue {
    background: linear-gradient(90deg, var(--primary-deep), var(--accent-blue), #6366f1);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    animation: gradient-shift 4s ease infinite;
}

.text-secondary {
    font-size: 1rem !important;
}

@keyframes gradient-shift {

    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

/* Background Animated Soft Shapes */
.bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
    animation: slow-drift 18s infinite alternate ease-in-out;
}

.shape-mint {
    width: 700px;
    height: 700px;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    top: -150px;
    left: -250px;
}

.shape-blue {
    width: 600px;
    height: 600px;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    bottom: -150px;
    right: -150px;
    animation-delay: -7s;
}

@keyframes slow-drift {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    100% {
        transform: translate(50px, 50px) scale(1.15) rotate(10deg);
    }
}

/* --- Trust Stats Row --- */
.usp-trust-stats {
    align-items: center;
}

.trust-stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trust-stat-top {
    display: flex;
    align-items: baseline;
    gap: 0;
}

.trust-stat-number {
    font-family: 'Outfit', sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--primary-deep);
    line-height: 1;
}

.trust-stat-plus {
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-mid);
    margin-left: 1px;
}

.trust-stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trust-stat-divider {
    width: 1px;
    height: 36px;
    background: linear-gradient(180deg, transparent, #cbd5e1, transparent);
    flex-shrink: 0;
}

/* --- LEFT COLUMN: Sticky Anchor --- */
.sticky-left-col {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    align-self: flex-start;
}

.sticky-content-wrapper {
    width: 100%;
}

/* Zero Donation Enhanced Badge */
.zero-donation-badge-wrap {
    position: relative;
    padding: 2px;
    border-radius: 20px;
    background: linear-gradient(135deg, #ef4444, #dc2626, #f97316, #ef4444);
    background-size: 300% 300%;
    animation: badge-border-flow 4s ease infinite;
}

@keyframes badge-border-flow {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.zero-donation-badge {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    border: none;
    transform: perspective(1000px) rotateX(0deg);
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s ease;
}

.zero-donation-badge:hover {
    transform: perspective(1000px) rotateX(4deg) translateY(-4px);
    box-shadow: 0 24px 48px rgba(239, 68, 68, 0.35) !important;
}

.zero-icon-wrap {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.zero-sub-tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

.zero-donation-badge p {
    font-size: 0.95rem !important;
}

.badge-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.15), transparent);
    transform: skewX(-20deg);
    animation: fast-sweep 5s infinite;
}

@keyframes fast-sweep {
    0% {
        left: -100%;
    }

    15% {
        left: 200%;
    }

    100% {
        left: 200%;
    }
}

.badge-pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    border-radius: 20px;
    border: 2px solid rgba(239, 68, 68, 0.3);
    transform: translate(-50%, -50%);
    animation: badge-pulse-expand 3s ease-out infinite;
    pointer-events: none;
}

@keyframes badge-pulse-expand {
    0% {
        width: 100%;
        height: 100%;
        opacity: 0.6;
    }

    100% {
        width: 130%;
        height: 130%;
        opacity: 0;
    }
}

/* --- RIGHT COLUMN: The Card Stack --- */
.cards-stack-wrapper {
    position: relative;
    padding-bottom: 100px;
}

/* The Magic Stacking CSS */
.stack-card {
    position: sticky;
    top: 120px;
    margin-bottom: 40px;
    transform-origin: top center;
    transition: filter 0.3s ease;
}

/* Create the offset stack effect */
#stack-card-1 {
    top: 120px;
    z-index: 1;
}

#stack-card-2 {
    top: 140px;
    z-index: 2;
}

#stack-card-3 {
    top: 160px;
    z-index: 3;
}

#stack-card-4 {
    top: 180px;
    z-index: 4;
}

/* Premium Glass Dossier Card */
.glass-dossier {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.02),
        0 15px 35px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s ease, border-color 0.3s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.stack-card:hover .glass-dossier {
    border-color: rgba(99, 102, 241, 0.2);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.04),
        0 30px 60px rgba(13, 27, 140, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Card Spotlight (Cursor follower) */
.card-spotlight-usp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.stack-card:hover .card-spotlight-usp {
    opacity: 1;
}

/* Step Number */
.card-step-number {
    font-family: 'Outfit', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    transition: all 0.3s ease;
}

.stack-card:hover .card-step-number {
    background: linear-gradient(135deg, var(--primary-mid) 0%, #6366f1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Premium Icon Box */
.icon-box-premium {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease;
}

.stack-card:hover .icon-box-premium {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

/* Micro Stat Chips */
.card-micro-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.micro-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.08);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.15);
    transition: all 0.3s ease;
}

.micro-chip svg {
    flex-shrink: 0;
}

.micro-chip:hover {
    background: rgba(99, 102, 241, 0.14);
    transform: translateY(-1px);
}

/* Color Variants */
.micro-chip.chip-green {
    background: rgba(16, 185, 129, 0.08);
    color: #059669;
    border-color: rgba(16, 185, 129, 0.15);
}

.micro-chip.chip-green:hover {
    background: rgba(16, 185, 129, 0.14);
}

.micro-chip.chip-blue {
    background: rgba(14, 165, 233, 0.08);
    color: #0284c7;
    border-color: rgba(14, 165, 233, 0.15);
}

.micro-chip.chip-blue:hover {
    background: rgba(14, 165, 233, 0.14);
}

.micro-chip.chip-amber {
    background: rgba(245, 158, 11, 0.08);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.15);
}

.micro-chip.chip-amber:hover {
    background: rgba(245, 158, 11, 0.14);
}

/* --- RIGHT COLUMN: Blog-style Standards List --- */
.standards-list-col {
    display: flex;
    align-items: flex-start;
    padding-top: 160px;
    padding-bottom: 120px;
}

.standards-list-wrapper {
    width: 100%;
    border-top: 2px solid #111;
}

.standards-list-item {
    border-bottom: 1.5px solid #d0d0d0;
    padding: 60px 24px 56px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

/* Dark blue fill on hover */
.standards-list-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #050c3a;
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.standards-list-item:hover::before {
    transform: translateY(0);
}

.standards-list-top,
.standards-list-bottom {
    position: relative;
    z-index: 1;
}

.standards-list-top {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 16px;
}

.standards-list-tag {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #555;
    transition: color 0.3s ease;
}

.standards-list-item:hover .standards-list-tag {
    color: rgba(255, 255, 255, 0.75);
}

.standards-list-date {
    font-size: 0.85rem;
    color: #888;
    transition: color 0.3s ease;
}

.standards-list-item:hover .standards-list-date {
    color: rgba(255, 255, 255, 0.65);
}

.standards-list-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.standards-list-title {
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    font-weight: 700;
    color: #111;
    margin: 0;
    line-height: 1.2;
    transition: color 0.3s ease;
}

.standards-list-item:hover .standards-list-title {
    color: #fff;
}

.standards-list-arrow {
    font-size: 2rem;
    color: #111;
    flex-shrink: 0;
    transition: transform 0.3s ease, color 0.3s ease;
    display: inline-block;
    line-height: 1;
}

.standards-list-item:hover .standards-list-arrow {
    transform: translateX(6px);
    color: #fff;
}

.standards-list-desc {
    font-size: 1rem;
    color: #555;
    line-height: 1.65;
    margin: 20px 0 24px;
    max-width: 90%;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.standards-list-item:hover .standards-list-desc {
    color: rgba(255, 255, 255, 0.8);
}

.standards-list-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.standards-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 30px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(46, 63, 191, 0.07);
    color: #2E3FBF;
    border: 1px solid rgba(46, 63, 191, 0.18);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.standards-chip svg {
    flex-shrink: 0;
}

.standards-list-item:hover .standards-chip {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .usp-premium-stack {
        padding-top: 40px;
    }

    .sticky-left-col {
        position: relative;
        top: 0;
        height: auto;
        margin-bottom: 0;
        padding-bottom: 0 !important;
    }

    .standards-list-col {
        margin-top: 0;
        padding-top: 0 !important;
        padding-bottom: 40px;
    }

    /* Kill Bootstrap row gap between the two cols on mobile */
    .usp-premium-stack .row {
        --bs-gutter-y: 0.5rem;
    }

    .standards-list-title {
        font-size: 1.3rem;
    }

    .standards-list-item {
        padding: 32px 12px 28px;
    }

    .zero-donation-badge-wrap {
        display: none;
    }

    .trust-stat-number {
        font-size: 1.5rem;
    }

    .trust-stat-plus {
        font-size: 1.1rem;
    }
}

/* ==================================================
   DREAM DESTINATION — REFERENCE-EXACT LAYOUT
================================================== */

/* ── Section shell ── */
.dd-section {
    background: #0a1628;
    position: relative;
}

/* ── Header (top of the left column, inside the pinned stage) ── */
.dd-header {
    text-align: left;
    padding: 0 0 24px;
}
.dd-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 16px;
    border: 1px solid rgba(100,200,255,0.25);
    background: rgba(100,200,255,0.06);
    color: #64c8ff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.dd-pulse {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #64c8ff;
    animation: ddPulse 1.8s ease-in-out infinite;
}
@keyframes ddPulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:0.3; transform:scale(1.7); }
}
.dd-title {
    color: #ffffff;
    font-size: clamp(1.7rem, 2vw, 2.2rem);
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 10px;
}
.dd-title-accent {
    color: #64c8ff;
    font-weight: 400;
    font-size: 0.58em;
    display: block;
}
.dd-subtitle {
    color: rgba(255,255,255,0.45);
    font-size: 0.82rem;
    line-height: 1.6;
    margin: 0;
}

/* ── Pin wrapper ── */
.dd-pin-wrap {
    position: relative;
    /* JS sets height = TOTAL × 100vh */
}

/* ── Sticky stage — fills 100vh, dark bg ── */
.dd-sticky-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: #0a1628;
    display: grid;
    /* left-box | center-image | right-counter */
    grid-template-columns: 280px auto 80px;
    grid-template-rows: 1fr;
    align-items: stretch;
    /* Pull side panels in tight against the image */
    justify-content: center;
    column-gap: 28px;
}

/* ══════════════════════════════════════
   LEFT — top-aligned info box
══════════════════════════════════════ */
.dd-left-panel {
    padding: 40px 0 40px 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Header sits at the top, info box drops to the bottom (image's lower edge) */
    justify-content: space-between;
    gap: 24px;
}
.dd-info-box {
    border: 1px solid rgba(100,200,255,0.25);
    background: transparent;
    padding: 32px 28px;
    width: 100%;
    overflow: hidden;
    border-radius: 0;
    /* Fixed height so box never resizes between destinations */
    height: 320px;
    display: flex;
    flex-direction: column;
}
.dd-country-flag-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.dd-flag-img {
    border-radius: 0;
    box-shadow: none;
}
.dd-country-label {
    color: #64c8ff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.dd-univ-name {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 14px;
}
.dd-desc-text {
    color: rgba(255,255,255,0.55);
    font-size: 0.82rem;
    line-height: 1.7;
    margin: 0;
    /* Clamp to 4 lines max so the box never grows */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Desc ticker line takes up all remaining vertical space */
#ddDescLine {
    flex: 1;
    overflow: hidden;
    margin-bottom: 20px;
}
.dd-fees-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(100,200,255,0.18);
    border-radius: 0;
    padding: 9px 13px;
    margin-bottom: 22px;
    background: rgba(100,200,255,0.04);
}
.dd-fees-label {
    color: rgba(255,255,255,0.4);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.dd-fees-value {
    color: #64c8ff;
    font-weight: 700;
    font-size: 0.9rem;
}
.dd-cta-btn {
    display: block;
    width: 100%;
    background: #64c8ff;
    color: #0a1628;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 12px 20px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.22s;
    text-align: center;
    letter-spacing: 0.03em;
}
.dd-cta-btn:hover { background: #93d9ff; }

/* ══════════════════════════════════════
   CENTER — big square image, sharp
══════════════════════════════════════ */
.dd-center-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    height: 100%;
}
.dd-img-frame {
    /* Square, as large as the viewport height allows (capped so side panels fit) */
    width: min(calc(100vh - 80px), calc(100vw - 480px));
    aspect-ratio: 1 / 1;
    border-radius: 0;           /* SHARP corners */
    overflow: hidden;
    position: relative;
    background: #0a1628;
    flex-shrink: 0;
}
/* All images stacked inside the frame — translateY drives the reveal */
.dd-img-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
    transform: translateY(-100%);  /* parked above by default */
    transition: transform 0.55s cubic-bezier(0.77, 0, 0.18, 1);
}
/* Visible: sitting in place (covers whatever is beneath it) */
.dd-img-slide.dd-cur  { transform: translateY(0%); }
/* Instant repositioning helper — no transition while set */
.dd-img-slide.dd-snap { transition: none; }

/* ══════════════════════════════════════
   RIGHT — bottom-aligned counter, sharp
══════════════════════════════════════ */
.dd-right-panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 0 0 40px 0;
    gap: 12px;
}
.dd-counter-box {
    border: 1px solid rgba(100,200,255,0.25);
    border-radius: 0;           /* SHARP corners */
    padding: 16px 14px;
    background: transparent;
    text-align: center;
    min-width: 72px;
}
.dd-counter-current {
    font-size: 2.2rem;
    font-weight: 900;
    color: #64c8ff;
    line-height: 1;
    letter-spacing: -0.02em;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.dd-counter-current.dd-flip {
    opacity: 0;
    transform: translateY(-8px);
}
.dd-counter-divider {
    height: 1px;
    background: rgba(100,200,255,0.2);
    margin: 7px 0;
}
.dd-counter-total {
    font-size: 1rem;
    color: rgba(255,255,255,0.35);
    font-weight: 600;
}
.dd-counter-label {
    font-size: 0.58rem;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 5px;
}

/* Ticker animation for left box inner content */
.dd-ticker-line {
    overflow: hidden;
}
.dd-ticker-line span {
    display: block;
    transition: transform 0.55s cubic-bezier(0.77, 0, 0.18, 1),
                opacity   0.55s cubic-bezier(0.77, 0, 0.18, 1);
}
.dd-ticker-line.dd-tick-out span {
    transform: translateY(-110%);
    opacity: 0;
}
.dd-ticker-line.dd-tick-in span {
    transform: translateY(110%);
    opacity: 0;
    transition: none;
}
.dd-ticker-line.dd-tick-settle span {
    transform: translateY(0%);
    opacity: 1;
    transition: transform 0.55s cubic-bezier(0.77, 0, 0.18, 1),
                opacity   0.55s cubic-bezier(0.77, 0, 0.18, 1);
}
/* Stagger each line slightly for a cascade feel */
.dd-ticker-line:nth-child(1) span { transition-delay: 0s;     }
.dd-ticker-line:nth-child(2) span { transition-delay: 0.06s;  }
.dd-ticker-line:nth-child(3) span { transition-delay: 0.12s;  }
.dd-ticker-line:nth-child(4) span { transition-delay: 0.18s;  }

/* ── Mobile ── */
@media (max-width: 991px) {
    /* header on top, info box + counter side by side, image below */
    .dd-sticky-stage {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "header header"
            "info   counter"
            "image  image";
        justify-content: stretch;
        column-gap: 12px;
        row-gap: 12px;
        height: auto;
        min-height: 100svh;
        align-items: start;
        padding: 20px 16px 28px;
    }
    /* Dissolve the left panel wrapper so header + info box become grid items */
    .dd-left-panel { display: contents; }

    .dd-header { grid-area: header; padding: 0; }

    /* Compact info box */
    .dd-info-box {
        grid-area: info;
        height: auto;
        padding: 12px 12px;
    }
    .dd-univ-name { font-size: 1rem; margin-bottom: 8px; }
    .dd-desc-text { font-size: 0.75rem; -webkit-line-clamp: 3; }
    .dd-country-flag-wrap { margin-bottom: 10px; }
    .dd-fees-row { padding: 7px 10px; margin-bottom: 12px; }
    .dd-cta-btn { padding: 9px 14px; font-size: 0.78rem; }
    #ddDescLine { margin-bottom: 10px; }

    .dd-right-panel {
        grid-area: counter;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
        padding: 0;
    }
    .dd-counter-current { font-size: 1.5rem; }

    .dd-center-stage {
        grid-area: image;
        padding: 0;
        height: auto;
        align-items: flex-start;
    }
    .dd-img-frame {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }
    .dd-dot-nav { flex-direction: row; }
}

/* ── Tablet: image shares the info-box column so both are the
   same width and flush left; header gets more breathing room ── */
@media (min-width: 768px) and (max-width: 991px) {
    .dd-sticky-stage {
        padding-top: 56px;
        grid-template-areas:
            "header header"
            "info   counter"
            "image  .";
    }
    .dd-img-frame {
        max-width: none;
        margin: 0;
    }
}


/* ==================================================
   HORIZONTAL CINEMATIC JOURNEY (THE PROCESS)
   Dark editorial layout: text row top-aligned,
   square color tiles packed closely below.
================================================== */
.journey-section {
    background-color: transparent;
}

/* Base Wrapper for the Pinning effect:
   full viewport height so the track can be pushed flush to the bottom */
.journey-pin-wrapper {
    width: 100%;
    height: 100vh;
    /* Fixed vh (not dvh): the wrapper must NOT resize when the mobile
       URL bar collapses mid-pin, or the pinned layout shifts and the
       section above bleeds into this one. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* The horizontal flex container — margin-top auto drops it to the
   bottom edge of the pinned screen */
.journey-track-container {
    width: 100%;
    margin-top: auto;
    padding-bottom: 0;
}

.journey-track {
    width: max-content;
    /* Critical: allows it to flow off-screen right */
    will-change: transform;
    gap: 0;
    /* Square cards are sealed together edge-to-edge */
    align-items: flex-end;
}

/* The square card — all content lives inside it */
.journey-item {
    width: min(560px, 40vw, 62vh);
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    /* Sealed strip: only the outer corners of the row are rounded */
    background: var(--tile-bg, #0d1b8c);
    color: var(--tile-ink, #fff);
    padding: clamp(1.25rem, 2.2vw, 2.25rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow 0.5s ease;
}

/* Hairline edge so white cards read against the white page */
.journey-item {
    box-shadow: inset 0 0 0 1px rgba(13, 27, 140, 0.3);
}

/* Top row inside the card: step label left, icon right */
.journey-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.journey-item-step {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: currentColor;
    opacity: 0.7;
    padding-top: 0.35rem;
}

.journey-tile-icon {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.journey-tile-icon svg {
    width: clamp(36px, 3.4vw, 56px);
    height: clamp(36px, 3.4vw, 56px);
}

/* Watermark number along the right edge, behind the content */
.journey-tile-num {
    position: absolute;
    top: 24%;
    right: -0.25rem;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(3.75rem, 6vw, 6rem);
    font-weight: 900;
    line-height: 1;
    opacity: 0.14;
    pointer-events: none;
    z-index: 0;
}

/* Bottom block inside the card: title + description, lifted off the bottom edge */
.journey-item-body {
    position: relative;
    z-index: 1;
    margin-bottom: clamp(1rem, 4vh, 2.75rem);
}

.journey-item-title {
    color: currentColor;
    font-weight: 700;
    font-size: clamp(1.25rem, 1.6vw, 1.7rem);
    line-height: 1.2;
    margin-bottom: 0.65rem;
}

.journey-item-desc {
    color: currentColor;
    opacity: 0.78;
    font-size: clamp(0.85rem, 0.95vw, 0.95rem);
    line-height: 1.6;
    margin-bottom: 0;
    max-width: 92%;
}

/* Active state while the card crosses the viewport */
.journey-card.is-active {
    box-shadow: inset 0 0 0 1px rgba(13, 27, 140, 0.3), 0 24px 60px rgba(5, 12, 58, 0.25);
}

.journey-card.is-active .journey-tile-icon {
    transform: scale(1.12);
}

.journey-card.is-active .journey-tile-num {
    opacity: 0.24;
}

/* Empty buffer card so the 6th card can scroll to the middle of the screen */
.buffer-card {
    width: 22vw;
    flex-shrink: 0;
    background: transparent;
    border: none;
}

/* Tablet: pinned scroll continues — bigger header + cards to fill the
   100vh pinned screen (portrait tablets leave a large gap otherwise) */
@media (max-width: 991px) {
    /* Nudge the header block down from the top of the pinned screen */
    .journey-section .journey-pin-wrapper > .container {
        margin-top: clamp(2.5rem, 7vh, 5rem);
    }

    .journey-section h2 {
        font-size: clamp(3.25rem, 6.5vw, 4.25rem);
    }

    .journey-section .journey-pin-wrapper .container p {
        font-size: 1.5rem !important;
        max-width: 620px;
    }

    .journey-section .urgency-badge span {
        font-size: 0.85rem;
    }

    .journey-item {
        width: min(70vw, 600px, 58vh);
        padding: 2rem;
    }

    .journey-item-body {
        margin-bottom: 1rem;
    }

    .journey-item-title {
        font-size: 1.6rem;
    }

    .journey-item-desc {
        font-size: 1.05rem;
        max-width: 100%;
    }

    .journey-tile-icon svg {
        width: 52px;
        height: 52px;
    }

    .journey-tile-num {
        font-size: 5.5rem;
        top: 28%;
    }

    .buffer-card {
        width: 30vw;
        /* Lets the last card travel clear of the screen edge */
    }
}

/* Mobile: pinned scroll with one card filling the screen */
@media (max-width: 767px) {
    .journey-section .journey-pin-wrapper > .container {
        margin-top: 0.75rem;
    }

    .journey-section h2 {
        font-size: 2.4rem;
    }

    .journey-section .journey-pin-wrapper .container p {
        font-size: 1.05rem !important;
    }

    .journey-item {
        width: min(84vw, 46vh);
        padding: 1.5rem;
    }

    .journey-item-title {
        font-size: 1.25rem;
    }

    .journey-item-desc {
        font-size: 0.875rem;
        line-height: 1.55;
    }

    .journey-item-step {
        font-size: 0.68rem;
    }

    .journey-tile-icon svg {
        width: 38px;
        height: 38px;
    }

    .journey-tile-num {
        font-size: 3.5rem;
    }

    .buffer-card {
        width: 40vw;
    }
}

/* Small phones: slightly more width, tighter padding */
@media (max-width: 420px) {
    .journey-item {
        width: min(88vw, 46vh);
        padding: 1.25rem;
    }
}

/* ==================================================
   PARENTS TRUST DOSSIER (CONCIERGE LAYOUT)
================================================== */

.trust-dossier-section {
    overflow: hidden;
    padding: 3rem 0 4rem;
    /* Breathing room so the dossier never touches the next section */
}

.trust-dossier-container {
    min-height: 480px;
}

/* Compact header on desktop so the heading + accordion fit in one viewport */
@media (min-width: 992px) {
    .trust-dossier-section .display-5 {
        font-size: 2.1rem;
    }

    .trust-dossier-section p.fs-5 {
        font-size: 1rem !important;
        max-width: 600px;
    }

    /* 40/60 split: accordion text on the left, image on the right */
    .trust-dossier-container > .col-lg-4 {
        width: 40%;
    }

    .trust-dossier-container > .col-lg-8 {
        width: 60%;
    }
}

/* --- Left Side: Interactive Accordion --- */
.dossier-accordion {
    padding: 1.25rem 1.25rem;
    justify-content: center;
    gap: 2px;
}

@media (min-width: 1200px) {
    .dossier-accordion {
        padding: 1.5rem 1.5rem;
    }
}

/* Divider between items */
.dossier-item + .dossier-item {
    border-top: 1px solid rgba(0, 0, 0, 0.055);
}

.dossier-item.active + .dossier-item,
.dossier-item + .dossier-item.active {
    border-top-color: transparent;
}

.dossier-item {
    padding: 10px 10px 10px 14px;
    border-radius: 2px;
    margin-bottom: 0;
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background-color 0.35s ease, border-left-color 0.35s ease, box-shadow 0.35s ease;
    background-color: transparent;
    position: relative;
}

.dossier-item:hover:not(.active) {
    background-color: rgba(14, 165, 233, 0.04);
    border-left-color: rgba(14, 165, 233, 0.25);
}

.dossier-item.active {
    background-color: #ffffff;
    border-color: rgba(0, 0, 0, 0.06);
    border-left-color: var(--primary-deep);
    border-left-width: 3px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    cursor: default;
}

/* Thin progress bar at bottom of active item */
.dossier-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: var(--primary-deep);
    border-radius: 0 0 0 2px;
    opacity: 0.35;
}

/* Icon */
.dossier-icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.35s ease, transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
}

.dossier-icon svg {
    width: 16px;
    height: 16px;
}

.dossier-item.active .dossier-icon {
    background: rgba(14, 165, 233, 0.08);
}

/* Step number badge */
.dossier-step-num {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.25);
    display: block;
    margin-bottom: 2px;
    transition: color 0.3s ease;
}

.dossier-item.active .dossier-step-num {
    color: var(--primary-deep);
    opacity: 0.6;
}

.dossier-item h4 {
    transition: color 0.3s ease;
    font-size: 0.95rem;
    line-height: 1.3;
    margin-bottom: 0;
}

.dossier-item.active h4 {
    color: var(--primary-deep) !important;
}

.dossier-body .text-secondary {
    font-size: 0.83rem !important;
    line-height: 1.6 !important;
}

/* Accordion Body Reveal */
.dossier-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: max-height 0.55s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.4s ease 0.12s,
                transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}

.dossier-item.active .dossier-body {
    max-height: 150px;
    opacity: 1;
    transform: translateY(0);
}

/* --- Right Side: Cinematic Image Crossfade --- */
.dossier-image-col {
    min-height: 400px;
    /* Crucial for mobile stacking */
}

.dossier-images {
    overflow: hidden;
}

.dossier-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.05);
    /* Opacity only — GSAP owns the scale, a CSS transform transition fights it and stutters */
    transition: opacity 1s ease;
    will-change: opacity, transform;
}

.dossier-img.active {
    opacity: 1;
    z-index: 1;
}

.dossier-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
    pointer-events: none;
}

/* The Floating Promise Plaque */
.promise-plaque {
    bottom: 40px;
    right: 40px;
    /* Straddles the line between columns */
    max-width: 380px;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.promise-plaque h4 {
    color: #ffffff !important;
}

.promise-plaque .text-primary {
    color: #38bdf8 !important;
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .trust-dossier-container {
        flex-direction: column-reverse;
        /* Put image on top for mobile */
    }

    .promise-plaque {
        left: 20px;
        right: 20px;
        bottom: -40px;
        max-width: unset;
        text-align: center;
    }

    .promise-plaque .d-flex {
        flex-direction: column;
        justify-content: center;
    }

    .dossier-image-col {
        height: 350px;
        margin-bottom: 50px;
        /* Room for overlapping plaque */
    }

    .dossier-item {
        padding: 16px 18px;
    }

    .trust-dossier-section {
        padding: 3.5rem 0 4.5rem;
    }

    .dossier-img-overlay {
        background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 20%);
    }
}

/* ==================================================
   COMPARISON MATRIX (THE POWER SECTION)
================================================== */

.comparison-section {
    overflow: hidden;
}

/* --- Left Card (The Trap / Indian Private) --- */
.glass-card-trap {
    background: #ffffff;
    transition: all 0.4s ease;
}

.comp-col-trap:hover .glass-card-trap {
    border-color: rgba(239, 68, 68, 0.3) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

.trap-gradient {
    transition: all 0.4s ease;
}

.comp-col-trap:hover .trap-gradient {
    background: linear-gradient(to right, transparent, rgba(239, 68, 68, 0.05)) !important;
}

/* --- Right Card (The Solution / MBBS Abroad) --- */
.comp-col-solution {
    position: relative;
}

.solution-card-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle at center, rgba(14, 165, 233, 0.3), transparent 70%);
    z-index: -1;
    filter: blur(20px);
    animation: pulse-glow 4s infinite alternate ease-in-out;
}

@keyframes pulse-glow {
    0% {
        opacity: 0.5;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1.05);
    }
}

.glass-card-solution {
    background: linear-gradient(145deg, rgba(13, 27, 140, 0.8) 0%, rgba(46, 63, 191, 0.6) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(14, 165, 233, 0.5);
    transform: scale(1.05);
    /* Physically elevates it */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.comp-col-solution:hover .glass-card-solution {
    transform: scale(1.07);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 30px rgba(14, 165, 233, 0.2);
}

.comp-win-row {
    transition: transform 0.3s ease;
}

.comp-col-solution:hover .comp-win-row {
    transform: translateX(5px);
}

/* CTA Button enhancements */
.btn-conversion {
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.btn-conversion:hover {
    background-color: transparent !important;
    color: #0ea5e9 !important;
    border-color: #0ea5e9;
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.4) !important;
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .glass-card-solution {
        transform: scale(1);
    }

    .comp-col-solution:hover .glass-card-solution {
        transform: scale(1.02);
    }

    /* Push the card row down so it clears the section header */
    .comparison-section .row.position-relative {
        margin-top: 3rem !important;
    }

    .vs-badge {
        /* Pull out of absolute flow — become a row item centred between the two cards */
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        order: 0;
        align-self: center;
        margin: -8px auto;
        z-index: 3;
        flex-shrink: 0;
    }

    /* Flip card order — Smart Pathway (solution) on top, VS in middle, Private India below */
    .comp-col-solution {
        order: -1;
    }

    .comp-col-trap {
        order: 1;
    }
}

/* ==================================================
   SCROLL TO TOP BUTTON
================================================== */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.3);
}

.scroll-to-top svg {
    color: #0ea5e9;
    transition: transform 0.3s ease;
}

.scroll-to-top:hover svg {
    transform: translateY(-3px);
}

/* Floating WhatsApp button — sits at the bottom corner, slides up
   above the scroll-to-top button when that button becomes visible */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    text-decoration: none;
    box-shadow: 0 8px 32px 0 rgba(37, 211, 102, 0.4);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

body:has(.scroll-to-top.visible) .whatsapp-float {
    bottom: 95px;
}

.whatsapp-float:hover {
    background: #1fb855;
    color: #fff;
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 12px 40px 0 rgba(37, 211, 102, 0.5);
}

.whatsapp-float svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}



/* ==================================================
   COUNTRY TEMPLATE SPECIFIC STYLES
================================================== */
.country-hero-bg {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: 0;
}

.country-hero-overlay {
    background: linear-gradient(to right, rgba(2, 6, 23, 0.95) 0%, rgba(2, 6, 23, 0.7) 60%, rgba(2, 6, 23, 0.3) 100%);
    z-index: 1;
}

.glass-badge {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, background 0.3s ease;
}

.glass-badge:hover {
    transform: translateX(-10px);
    background: rgba(255, 255, 255, 0.1);
}

.bento-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bento-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08) !important;
}

/* Custom Accordion for Syllabus */
.cursor-pointer {
    cursor: pointer;
}

.accordion-box {
    transition: all 0.3s ease;
}

.accordion-box.active {
    background: rgba(14, 165, 233, 0.1) !important;
    border-color: rgba(14, 165, 233, 0.4) !important;
}

.accordion-box .acc-icon {
    transition: transform 0.3s ease;
}

.accordion-box.active .acc-icon {
    transform: rotate(180deg);
}

/* Comparison Matrix Specific Tweaks */
.comp-col-solution p {
    line-height: 1.6;
}

@media (max-width: 991px) {
    .comp-col-solution {
        margin-left: 0 !important;
        margin-top: -30px;
    }

    .position-sticky {
        position: relative !important;
        top: 0 !important;
    }
}

/* ==================================================
    CONTACT PAGE SPECIFIC STYLES
================================================== */
.contact {
    background-color: transparent;
}

.contact-hero-section {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* White frame to match home-page hero — the section is a white box with 10px
   padding; an inset rounded dark layer (::before) holds the hero, and a rounded
   white ring (::after) sits on top of the edges so the dark area is clipped to
   clean rounded corners with no hard cuts. */
.contact-hero-section,
.about-hero-section {
    background-color: var(--white-bg, #FFFFFF);
    padding: 10px;
    box-sizing: border-box;
}

/* Inset rounded dark fill — the hero background */
.contact-hero-section::before,
.about-hero-section::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background-color: #020617;
    border-radius: 40px;
    z-index: -1;
    pointer-events: none;
}

/* White ring on top — masks any orb/overlay bleed at the rounded corners so the
   frame stays crisp (inner radius matches the dark fill's 40px) */
.contact-hero-section::after,
.about-hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 10px solid var(--white-bg, #FFFFFF);
    border-radius: 50px;
    pointer-events: none;
    z-index: 3;
}

/* Mobile/tablet: hero goes full-bleed — no white frame, matching the home page */
@media (max-width: 991px) {
    .contact-hero-section,
    .about-hero-section {
        padding: 0;
        background-color: #020617;
    }

    .contact-hero-section::before,
    .about-hero-section::before {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;
    }

    .contact-hero-section::after,
    .about-hero-section::after {
        display: none;
    }
}

/* Ambient Orbs */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    z-index: 0;
    animation: pulse-orb 10s infinite alternate ease-in-out;
    pointer-events: none;
}

.orb-primary {
    width: 600px;
    height: 600px;
    background: rgba(14, 165, 233, 0.15);
    top: -20%;
    left: -10%;
}

.orb-secondary {
    width: 700px;
    height: 700px;
    background: rgba(46, 63, 191, 0.15);
    bottom: -30%;
    right: -20%;
    animation-delay: -5s;
}

@keyframes pulse-orb {
    0% {
        transform: scale(0.9);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Massive Faded Background Typography */
.parallax-bg-text-wrap {
    transform: translate(-50%, -50%) rotate(-5deg);
}

.parallax-bg-text-wrap .faded-bg-text {
    color: #06b5d405 !important;
    -webkit-text-stroke: 2px rgba(255, 0, 0, 0.04) !important;
}

.faded-bg-text {
    font-family: 'Outfit', sans-serif;
    font-size: 15vw;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.04);
    white-space: nowrap;
    line-height: 0.85;
    margin: 0;
    color: #0d1c8c3f !important;
}

.faded-bg-text.solid {
    -webkit-text-stroke: 0;
    color: rgba(255, 255, 255, 0.02);
}

/* Liquid Glass Cards */
.liquid-glass-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.liquid-glass-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(14, 165, 233, 0.3);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.liquid-glass-badge {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Anti-Gravity Floating Animation */
.floating-pill {
    animation: anti-gravity 6s ease-in-out infinite;
    will-change: transform;
}

/* Mobile/tablet: smaller, equal-sized contact pills */
@media (max-width: 991px) {
    .anti-gravity-container {
        gap: 0.75rem !important;
    }

    .anti-gravity-container .floating-pill {
        flex: 1 1 220px;
        max-width: 320px;
        justify-content: center;
        padding: 0.6rem 1rem !important;
        gap: 0.6rem !important;
    }

    .anti-gravity-container .floating-pill .icon-circle {
        width: 36px !important;
        height: 36px !important;
    }

    .anti-gravity-container .floating-pill .icon-circle i {
        font-size: 0.9rem !important;
    }

    .anti-gravity-container .floating-pill span.d-block {
        font-size: 0.85rem;
    }

    .anti-gravity-container .floating-pill .small {
        font-size: 0.72rem !important;
    }
}

@keyframes anti-gravity {

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

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

/* Mouse Scroll Wheel Animation */
@keyframes scroll-wheel {
    0% {
        transform: translate(-50%, 0);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, 15px);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .faded-bg-text {
        font-size: 22vw;
    }

    .contact-hero-section {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

/* Massive Faded Background Typography */
.faded-bg-text-container {
    position: absolute;
    top: 15%;
    left: 0;
    width: 100vw;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    user-select: none;
}

.faded-bg-text {
    font-family: 'Outfit', sans-serif;
    font-size: 18vw;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.03);
    white-space: nowrap;
    line-height: 1;
    margin: 0;
    transform: translateX(5%);
}

.faded-bg-text.solid {
    -webkit-text-stroke: 0;
    color: rgba(255, 255, 255, 0.02);
    transform: translateX(-5%);
    margin-top: -5vw;
}

/* Ambient Orbs */
.contact-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
    animation: pulse-orb 8s infinite alternate ease-in-out;
}

.orb-1 {
    width: 500px;
    height: 500px;
    background: rgba(14, 165, 233, 0.15);
    top: -10%;
    left: -10%;
}

.orb-2 {
    width: 600px;
    height: 600px;
    background: rgba(46, 63, 191, 0.15);
    bottom: -20%;
    right: -10%;
    animation-delay: -4s;
}

@keyframes pulse-orb {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Contact Info Cards */
.contact-info-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 10px !important;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    overflow: hidden;
    opacity: 1 !important;
}

.contact-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #0ea5e9, #3b82f6);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contact-info-card:hover {
    transform: translateX(10px);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(14, 165, 233, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.contact-info-card:hover::before {
    opacity: 1;
}

.contact-icon-wrap {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.contact-info-card:hover .contact-icon-wrap {
    background: #0ea5e9;
    color: #fff;
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.3);
}

/* Glass Form Adjustments */
.dedicated-form {
    background: rgba(10, 15, 30, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dedicated-form .form-control {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px 20px;
}

.dedicated-form .form-control:focus {
    background: rgba(0, 0, 0, 0.4);
    border-color: #0ea5e9;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
}

textarea.form-control {
    min-height: 120px;
    resize: none;
}

/* Social Links */
.social-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-pill:hover {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.2);
}

/* ==================================================
   ABOUT PAGE SPECIFIC EXTENSIONS
================================================== */

.about-hero-section {
    /* background-color handled by the white-frame rule above; keep this dark
       fill on the inset ::before, not the section, so the white frame shows */
    z-index: 1;
}

.hero-ambient-glow {
    position: absolute;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
    opacity: 0.3;
    pointer-events: none;
    animation: slow-drift 20s infinite alternate ease-in-out;
}

.glow-primary {
    background: radial-gradient(circle, rgba(14, 165, 233, 0.4), transparent 70%);
    top: -20%;
    left: -10%;
}

.glow-secondary {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.3), transparent 70%);
    bottom: -10%;
    right: -5%;
    animation-delay: -5s;
}

.liquid-glass-mission-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 40px 80px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
    transform-style: preserve-3d;
}

.liquid-edge-shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 40%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    border-radius: inherit;
}

.anti-gravity-float {
    animation: anti-gravity 6s ease-in-out infinite;
}

.parallax-text-left, .parallax-text-right {
    will-change: transform;
}

/* ==================================================
   ABOUT: DATA CORE & SKEUOMORPHIC GLASS
================================================== */

/* The Skeuomorphic Liquid Glass Card */
.skeuo-liquid-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* Physical glass edge simulation */
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.4),
        inset 0 2px 2px rgba(255, 255, 255, 0.1),
        /* Top highlight edge */
        inset 0 -2px 4px rgba(0, 0, 0, 0.5);
    /* Bottom shadow edge */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}

.skeuo-liquid-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 30px 60px rgba(14, 165, 233, 0.15),
        inset 0 2px 2px rgba(255, 255, 255, 0.15),
        inset 0 -2px 4px rgba(0, 0, 0, 0.5);
    border-color: rgba(14, 165, 233, 0.3);
}

.icon-block {
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1);
}

/* Central Data Core Sphere */
.data-core-sphere {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(14, 165, 233, 0.15), rgba(2, 6, 23, 0.9));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(14, 165, 233, 0.4);
    box-shadow:
        0 0 50px rgba(14, 165, 233, 0.2),
        inset 0 0 30px rgba(14, 165, 233, 0.3);
}

/* Continual glowing pulse behind the sphere */
.core-pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(14, 165, 233, 0.5);
    transform: translate(-50%, -50%);
    animation: core-pulse 3s cubic-bezier(0.25, 1, 0.5, 1) infinite;
    z-index: -1;
    pointer-events: none;
}

@keyframes core-pulse {
    0% {
        width: 100%;
        height: 100%;
        opacity: 0.8;
    }

    100% {
        width: 140%;
        height: 140%;
        opacity: 0;
    }
}

/* SVG Line connecting the nodes (Desktop) */
.data-core-connector {
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 70%);
}

@media (max-width: 991px) {
    .data-core-sphere {
        width: 220px;
        height: 220px;
    }

    .skeuo-liquid-card {
        text-align: center !important;
    }

    .skeuo-liquid-card .d-flex {
        justify-content: center !important;
    }
}

/* ==================================================
   ABOUT: EXPERT TEAM (LIGHT THEME OVERLAP)
================================================== */

/* The Sinking Prep */
.core-philosophy-section {
    transform-origin: top center;
    will-change: transform, opacity;
    margin-bottom: 10rem;
}

/* The Overlapping Light Section */
.expert-team-section {
    background-color: #f8fafc;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    margin-top: -60px; /* Physically pulls it over the dark section */
    padding-top: 60px;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.4);
    z-index: 10;
}

/* Liquid Glass Portrait Cards */
.liquid-portrait-card {
    height: 450px;
    background: #020617;
    cursor: pointer;
}

.portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.1); /* Starts cinematic & desaturated */
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease;
}

.liquid-portrait-card:hover .portrait-img {
    transform: scale(1.08);
    filter: grayscale(0%) contrast(1); /* Blooms into color */
}

/* Frosted Overlay */
.portrait-overlay {
    background: linear-gradient(to top, rgba(2, 6, 23, 0.95) 0%, rgba(2, 6, 23, 0.4) 50%, transparent 100%);
    transition: background 0.4s ease;
}

.liquid-portrait-card:hover .portrait-overlay {
    background: linear-gradient(to top, rgba(2, 6, 23, 0.98) 0%, rgba(2, 6, 23, 0.6) 60%, rgba(2, 6, 23, 0.2) 100%);
}

/* Content Slide Up Animation */
.content-slide-up {
    transform: translateY(60px); /* Hides the bio initially */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.liquid-portrait-card:hover .content-slide-up {
    transform: translateY(0);
}

.expanded-bio {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
    transition-delay: 0s;
}

.liquid-portrait-card:hover .expanded-bio {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.2s; /* Waits for the slide up to finish */
}

/* Mobile Fallback for Cards */
@media (max-width: 991px) {
    .expert-team-section {
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        margin-top: -30px;
    }
    .liquid-portrait-card {
        height: 380px;
    }
    .portrait-img {
        filter: grayscale(0%) contrast(1); /* Always color on mobile */
    }
    .content-slide-up {
        transform: translateY(0);
    }
    .expanded-bio {
        opacity: 1;
        visibility: visible;
        display: none; /* Hide bio entirely on mobile to save space, rely on titles */
    }
}

/* ==================================================
   ABOUT: MISSION & VISION (LIQUID LIGHT THEME)
================================================== */
.mission-vision-light {
    background-color: #ffffff; /* Crisp white base */
    cursor: default;
}

/* The Interactive Pastel Aura */
.light-aura-follower {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    /* Soft blend of Cyan and Lavender */
    background: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, rgba(139, 92, 246, 0.1) 40%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
    opacity: 0; 
    transition: opacity 0.5s ease;
    mix-blend-mode: multiply; /* Helps the color stain the glass beautifully */
}

/* Organic Liquid Glass Cards (Non-Boxy) */
.organic-glass-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 
        0 30px 60px rgba(13, 27, 140, 0.05),
        inset 0 2px 5px rgba(255, 255, 255, 1);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}

.organic-glass-card:hover {
    box-shadow: 
        0 40px 80px rgba(14, 165, 233, 0.08),
        inset 0 2px 5px rgba(255, 255, 255, 1);
}

/* The Asymmetrical Morphing Shapes */
.mission-shape {
    /* Extreme asymmetrical radius to look like a droplet/cloud */
    border-radius: 120px 40px 120px 40px;
    animation: morph-mission 12s ease-in-out infinite alternate;
}

.vision-shape {
    /* Mirrored asymmetrical radius */
    border-radius: 40px 120px 40px 120px;
    animation: morph-vision 14s ease-in-out infinite alternate;
}

/* Keyframes to make the borders slowly shift like liquid */
@keyframes morph-mission {
    0% { border-radius: 120px 40px 120px 40px; }
    33% { border-radius: 80px 80px 40px 120px; }
    66% { border-radius: 40px 120px 80px 80px; }
    100% { border-radius: 120px 40px 120px 40px; }
}

@keyframes morph-vision {
    0% { border-radius: 40px 120px 40px 120px; }
    33% { border-radius: 120px 40px 80px 80px; }
    66% { border-radius: 80px 80px 120px 40px; }
    100% { border-radius: 40px 120px 40px 120px; }
}

/* Overlap Logic */
.vision-wrapper {
    margin-top: -60px; /* Physically pulls the Vision shape over the Mission shape */
}

@media (max-width: 991px) {
    .organic-glass-card {
        border-radius: 40px !important; /* Fallback to standard pill/rounded rect on mobile */
        animation: none !important;
        padding: 30px !important;
    }
    .vision-wrapper {
        margin-top: -20px;
        margin-left: 20px; /* Slight indent to keep the layered feel */
    }
    .organic-glass-card p {
        font-size: 1.1rem !important;
    }
}

/* ==================================================
   ABOUT: WHY US
================================================== */
.why-us-light-lens {
    background-color: #f8fafc; /* Crisp, premium slate */
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* Left Column Triggers */
.light-lens-text-col {
    padding-top: 20vh; /* Pushes content down to allow natural scrolling */
    padding-bottom: 20vh;
}

.light-lens-trigger {
    margin-bottom: 30vh; /* Massive spacing to force user to scroll step-by-step */
    opacity: 0.25;
    transform: translateX(-20px);
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.light-lens-trigger:last-child {
    margin-bottom: 0;
}

.light-lens-trigger.active {
    opacity: 1;
    transform: translateX(0);
}

.light-lens-trigger .trigger-title {
    color: #94a3b8; /* Slate 400 */
    transition: color 0.4s ease;
}

.light-lens-trigger.active .trigger-title {
    color: #0f172a; /* Slate 900 */
}

/* Right Column: The Sticky Lens */
.sticky-light-lens-wrapper {
    position: sticky;
    top: 15vh;
    height: 70vh;
    width: 100%;
}

/* The Animated Blueprint Ring */
.lens-outer-ring {
    position: absolute;
    inset: -20px;
    border: 2px dashed rgba(14, 165, 233, 0.4);
    border-radius: 48px; /* Slightly larger than the glass card */
    animation: rotate-blueprint-ring 25s linear infinite;
    z-index: 0;
}

@keyframes rotate-blueprint-ring {
    100% { transform: rotate(360deg); }
}

/* The Frosted Glass Container */
.liquid-glass-lens-light {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 
        0 30px 60px rgba(13, 27, 140, 0.08),
        inset 0 2px 10px rgba(255, 255, 255, 0.8); /* Skeuomorphic top highlight */
    z-index: 1;
}

/* Internal Cinematic Images */
.lens-img-light {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.8s ease, transform 4s linear;
}

.lens-img-light.active {
    opacity: 1;
    transform: scale(1);
}

.lens-overlay-light {
    background: linear-gradient(to top, rgba(2, 6, 23, 0.7) 0%, transparent 40%);
    pointer-events: none;
}

.light-lens-badge {
    transition: opacity 0.4s ease;
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .light-lens-text-col {
        padding-top: 0;
        padding-bottom: 0;
    }
    .light-lens-trigger {
        margin-bottom: 50px;
        opacity: 1;
        transform: translateX(0);
    }
    .light-lens-trigger .trigger-title {
        color: #0f172a;
        font-size: 2.2rem;
    }
}

/* ==================================================
   ABOUT: WALL OF PROOF (LIQUID GLASS MARQUEE)
================================================== */
.wall-of-proof-section {
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* The Matrix Tracks */
.marquee-matrix {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Pause the entire matrix when the user hovers over any part of it */
.marquee-matrix:hover .marquee-content {
    animation-play-state: running;
}

/* The Internal Content Wrapper */
.marquee-content {
    width: fit-content;
}

/* Opposing Animations */
.marquee-track-left .marquee-content {
    animation: scroll-left 40s linear infinite;
}

.marquee-track-right .marquee-content {
    /* To push the right track so it starts differently, we use a negative margin trick or start the animation offset */
    animation: scroll-right 45s linear infinite;
    transform: translateX(-50%); /* Starts shifted so it has room to scroll right */
}

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Scrolls exactly half its width (the duplicated content length) */
}

@keyframes scroll-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* The Skeuomorphic Liquid Glass Review Cards */
.skeuo-review-card {
    width: 450px; /* Fixed width so tracks calculate correctly */
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    
    /* Heavy inset highlighting for thick glass effect */
    box-shadow: 
        0 20px 40px rgba(13, 27, 140, 0.05),
        inset 0 2px 4px rgba(255, 255, 255, 1),
        inset 0 -2px 10px rgba(0, 0, 0, 0.02);
    
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, opacity 0.4s ease;
    cursor: default;
    padding: .9rem;
}

.skeuo-review-card p{
    font-size:  15px !important ;
}

/* The Matrix Dimming Effect */
/* When the matrix is hovered, dim all cards slightly */
.marquee-matrix:hover .skeuo-review-card {
    opacity: 0.5;
    transform: scale(0.98);
}

/* Elevate and fully light up the specific card being hovered */
.marquee-matrix .skeuo-review-card:hover {
    opacity: 1;
    transform: scale(1.05) translateY(-10px);
    border-color: rgba(14, 165, 233, 0.4);
    box-shadow: 
        0 30px 60px rgba(14, 165, 233, 0.15),
        inset 0 2px 4px rgba(255, 255, 255, 1),
        inset 0 -2px 10px rgba(0, 0, 0, 0.02);
    z-index: 10;
}

.reviewer-avatar {
    width: 40px;
    height: 40px;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.skeuo-review-card .text-secondary{
    font-size: .9rem !important;
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .skeuo-review-card {
        width: 320px;
        padding: 30px !important;
    }
    .marquee-track-left .marquee-content {
        animation: scroll-left 30s linear infinite;
    }
    .marquee-track-right .marquee-content {
        animation: scroll-right 30s linear infinite;
    }
    /* Disable the hover-dim effect on mobile since hover is sticky */
    .marquee-matrix:hover .skeuo-review-card {
        opacity: 1;
        transform: none;
    }
}

.fs-9{
    font-size: 0.9rem;
}

/* ==================================================
   COUNTRIES LIST: CONVERSION OPTIMIZED GRID
================================================== */
.atlas-hero {
    /* Sets the stage cleanly */
    border-bottom: 1px solid rgba(0,0,0,0.03);
}

/* Base Pathway Card Mechanics */
.pathway-card {
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: #ffffff;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.03),
        inset 0 2px 0 rgba(255, 255, 255, 1);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}

.pathway-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 25px 50px rgba(14, 165, 233, 0.1),
        0 0 0 1px rgba(14, 165, 233, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 1);
}

/* Image Parallax & Hover */
.pathway-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.pathway-card:hover .pathway-img {
    transform: scale(1.12);
}

.pathway-img-overlay {
    position: absolute;
    inset: 0;
    /* Soft gradient to make the top badges pop without darkening the whole image */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 40%);
    pointer-events: none;
}

/* The Bento Stats Grid (Crucial for Conversion) */
.bento-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: #f8fafc; /* Very light slate */
    border-radius: 16px;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.bento-stat {
    padding: 10px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01);
}

/* Button Hover State */
.cta-button {
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.pathway-card:hover .cta-button {
    background-color: #0284c7; /* Darker blue on card hover to draw the eye */
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3) !important;
}

.cta-button:hover {
    transform: scale(1.02);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .pathway-card {
        border-radius: 32px;
    }
    .bento-stats-grid {
        gap: 6px;
        padding: 8px;
    }
    .bento-stat {
        padding: 8px;
    }

    /* Blur overlay behind hero content on mobile */
    .atlas-hero .container.position-relative {
        position: relative;
    }
    .atlas-hero .container.position-relative::before {
        content: '';
        position: absolute;
        inset: -24px -20px;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.45);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: -1;
    }
}

/* Blur overlay behind hero content on tablet */
@media (min-width: 769px) and (max-width: 991px) {
    .atlas-hero .container.position-relative {
        position: relative;
    }
    .atlas-hero .container.position-relative::before {
        content: '';
        position: absolute;
        inset: -24px -20px;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.45);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: -1;
    }
}

/* ==================================================
   COUNTRIES LIST: ADVANCED ANIMATIONS & HOVERS
================================================== */
.pathway-item {
    perspective: 1200px; /* Required for the 3D tilt effect */
}

.pathway-card {
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: #ffffff;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.03),
        inset 0 2px 0 rgba(255, 255, 255, 1);
    /* Transition removed from transform to allow GSAP mouse-tracking to be instantaneous, but kept for shadows */
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

.pathway-card:hover {
    border-color: rgba(14, 165, 233, 0.3);
    box-shadow: 
        0 30px 60px rgba(14, 165, 233, 0.12),
        0 0 0 1px rgba(14, 165, 233, 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 1);
    transition: all .4s ease;
}

/* Image Enhancements */
.pathway-img-wrap {
    overflow: hidden;
}

.pathway-img {
    width: 100%;
    height: 120%; /* Taller than container to allow parallax room */
    object-fit: cover;
    transform: scale(1.05); /* Base scale */
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.pathway-card:hover .pathway-img {
    transform: scale(1.12);
}

/* Bento Box Micro-Stagger on Hover */
.bento-stat {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, background-color 0.4s ease;
    transform: translateY(0);
}

.pathway-card:hover .bento-stat:nth-child(1) { transform: translateY(-4px); transition-delay: 0.05s; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.pathway-card:hover .bento-stat:nth-child(2) { transform: translateY(-4px); transition-delay: 0.1s;  box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.pathway-card:hover .bento-stat:nth-child(3) { transform: translateY(-4px); transition-delay: 0.15s; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.pathway-card:hover .bento-stat:nth-child(4) { transform: translateY(-4px); transition-delay: 0.2s;  box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

/* CTA Button Shine Effect */
.cta-button {
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    background-color: #0ea5e9;
    border: none;
}

.pathway-card:hover .cta-button {
    background-color: #0284c7;
    box-shadow: 0 10px 25px rgba(14, 165, 233, 0.35) !important;
    transform: scale(1.02);
}

.btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: skewX(-20deg);
    z-index: 0;
    transition: none;
}

.pathway-card:hover .btn-shine {
    animation: shine-sweep 1.2s ease forwards;
}

@keyframes shine-sweep {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* Continuous Pulse for Badges */
@keyframes soft-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    70% { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.badge.bg-danger {
    animation: soft-pulse 2s infinite;
}

/* ==================================================
   GALLERY: ASYMMETRICAL BENTO GRID
================================================== */
.gallery-float-shape {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 70%);
    filter: blur(20px);
    z-index: 1;
    pointer-events: none;
}
.shape-1 { width: 400px; height: 400px; top: 10%; left: 10%; animation: float 10s infinite ease-in-out alternate; }
.shape-2 { width: 500px; height: 500px; bottom: -10%; right: 5%; animation: float 12s infinite ease-in-out alternate-reverse; }

@keyframes float {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-30px) scale(1.1); }
}

/* Bento Grid System */
.bento-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 280px;
    gap: 24px;
}

/* Responsive Grid Logic */
.bento-standard { grid-column: span 1; grid-row: span 1; }
.bento-wide     { grid-column: span 2; grid-row: span 1; }
.bento-tall     { grid-column: span 1; grid-row: span 2; }
.bento-large    { grid-column: span 2; grid-row: span 2; }

@media (max-width: 991px) {
    .bento-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; gap: 16px; }
    .bento-wide     { grid-column: span 2; }
    .bento-tall     { grid-column: span 1; }
    .bento-large    { grid-column: span 2; grid-row: span 2; }
}

@media (max-width: 768px) {
    .bento-gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 250px; }
    .bento-standard, .bento-wide, .bento-tall, .bento-large {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* Skeuomorphic Glass Frames */
.skeuo-gallery-frame {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.03),
        inset 0 2px 0 rgba(255, 255, 255, 1);
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}

.skeuo-gallery-frame:hover {
    transform: translateY(-6px);
    border-color: rgba(14, 165, 233, 0.3);
    box-shadow: 
        0 20px 40px rgba(14, 165, 233, 0.15),
        inset 0 2px 0 rgba(255, 255, 255, 1);
}

.bento-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.skeuo-gallery-frame:hover .bento-img {
    transform: scale(1.08);
}

/* Interactive Overlay & Caption */
.bento-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(2, 6, 23, 0.85) 0%, rgba(2, 6, 23, 0.2) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
}

.skeuo-gallery-frame:hover .bento-overlay {
    opacity: 1;
}

.bento-caption {
    margin-top: auto;
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.skeuo-gallery-frame:hover .bento-caption {
    transform: translateY(0);
}

.bento-zoom-icon {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transform: scale(0.8) rotate(-45deg);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.skeuo-gallery-frame:hover .bento-zoom-icon {
    transform: scale(1) rotate(0);
    opacity: 1;
}

/* ==================================================
   CUSTOM GSAP LIGHTBOX
================================================== */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    visibility: hidden;
    pointer-events: none;
}

.lightbox-overlay.active {
    visibility: visible;
    pointer-events: auto;
}

.lightbox-bg {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
}

.lightbox-content-wrapper {
    position: relative;
    z-index: 2;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.lightbox-btn-close {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 3;
    transition: all 0.3s ease;
}

.lightbox-btn-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.lightbox-caption {
    font-size: 1.2rem;
    font-weight: 600;
}

/* ==================================================
   ABOUT FULL: AURA GLASS & INTERACTIVE COMPONENTS
================================================== */
.aura-glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.03),
        inset 0 2px 0 rgba(255, 255, 255, 1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.aura-glass-card:hover {
    box-shadow: 
        0 20px 40px rgba(14, 165, 233, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 1);
}

.icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Service Pills */
.service-pill {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 16px 20px;
    border-radius: 12px;
    font-weight: 600;
    color: #334155;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}
.service-pill:hover {
    transform: translateY(-4px);
    border-color: #0ea5e9;
    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.1);
}

/* Custom List Markers */
.custom-list { list-style: none; }
.custom-list li { position: relative; padding-left: 20px; }
.custom-list li::before {
    content: '•';
    color: #0ea5e9;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

/* Split-Console Vertical Tabs */
.country-vertical-tabs {
    scrollbar-width: none; 
}
.country-vertical-tabs::-webkit-scrollbar {
    display: none; 
}

.country-tab-btn {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: #64748b;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: left;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.country-tab-btn:hover {
    color: #0f172a;
    background: #f8fafc;
    border-color: rgba(14, 165, 233, 0.2);
}

.country-tab-btn.active {
    background: #0ea5e9;
    color: #fff;
    border-color: #0ea5e9;
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3);
    transform: translateX(5px);
}

/* Country Content Panes */
.country-content-pane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    padding: inherit;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.country-content-pane.active {
    position: relative;
    opacity: 1;
    visibility: visible;
}

/* Mobile Adjustments for Tabs */
@media (max-width: 991px) {
    .country-vertical-tabs {
        flex-direction: row !important;
    }
    .country-tab-btn {
        white-space: nowrap;
        border-radius: 30px;
    }
    .country-tab-btn.active {
        transform: translateY(-2px);
    }
}

/* ==================================================
   COUNTRIES LIST: COMPACT PREMIUM CARDS
================================================== */
.compact-card {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 14px 30px -14px rgba(15, 23, 42, 0.1);
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s ease;
    will-change: transform;
}

/* Gradient hairline that lights up on hover */
.compact-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.55), rgba(14, 165, 233, 0) 40%, rgba(56, 189, 248, 0) 60%, rgba(56, 189, 248, 0.45));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
    z-index: 3;
}

.compact-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 24px 48px -16px rgba(14, 165, 233, 0.25),
        0 8px 20px -8px rgba(15, 23, 42, 0.1);
}

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

/* Image header */
.compact-card-img {
    height: 150px;
    overflow: hidden;
    flex-shrink: 0;
}

.compact-card-img .pathway-img {
    width: 100%;
    height: 120%;
    object-fit: cover;
    transform: scale(1.05);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.compact-card:hover .pathway-img {
    transform: scale(1.12);
}

.compact-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(2, 6, 23, 0.62), rgba(2, 6, 23, 0.05) 60%);
    pointer-events: none;
    z-index: 1;
}

/* Flag chip + country name over the image */
.compact-identity {
    padding: 0 16px 12px;
}

.compact-flag {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(2, 6, 23, 0.35);
    background: #fff;
}

.compact-flag .fi {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.compact-country-name {
    font-family: 'Outfit', sans-serif;
    color: #fff;
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(2, 6, 23, 0.45);
}

/* Status tag */
.compact-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 50rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.compact-tag-popular {
    background: rgba(225, 29, 72, 0.88);
    color: #fff;
    animation: soft-pulse 2s infinite;
}

.compact-tag-premium {
    background: rgba(2, 6, 23, 0.55);
    color: #fcd34d;
    border: 1px solid rgba(252, 211, 77, 0.35);
}

.compact-tag-english {
    background: rgba(16, 185, 129, 0.88);
    color: #fff;
}

/* Body */
.compact-card-body {
    padding: 14px 16px 16px;
    gap: 12px;
}

.compact-meta {
    display: flex;
    align-items: stretch;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-radius: 14px;
    padding: 10px 14px;
}

.compact-meta-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.compact-meta-item + .compact-meta-item {
    border-left: 1px solid rgba(15, 23, 42, 0.08);
    padding-left: 14px;
    margin-left: 14px;
}

.compact-meta-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
}

.compact-meta-value {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
}

/* Slim CTA row */
.compact-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #0ea5e9;
    font-weight: 700;
    font-size: 0.85rem;
}

.compact-cta-arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(14, 165, 233, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s ease;
}

.compact-card:hover .compact-cta-arrow {
    background: #0ea5e9;
    color: #fff;
    transform: translateX(4px);
}

@media (max-width: 576px) {
    .compact-card-img {
        height: 140px;
    }
}

/* ------------------------------------------------------------------ *
 * Mobile scroll performance
 *
 * On touch / small screens, stacked `backdrop-filter: blur()` glass
 * layers force the GPU to re-rasterize the blurred backdrop every time
 * an element re-enters the viewport. Scrolling DOWN is cheap (layers
 * leaving view get discarded); scrolling UP re-composites them all,
 * which is what caused the upward-scroll lag / stutter on mobile.
 *
 * The cards/panels already use a semi-opaque background, so dropping the
 * backdrop blur keeps them readable while removing the per-frame cost.
 * Large decorative `filter: blur()` glows are also collapsed since they
 * are purely cosmetic.
 *
 * The stutter shows up across EVERY section (not just the hero) because
 * almost every glass card / badge / panel on the page uses backdrop-filter,
 * and each one re-composites as it scrolls back into view. So the fix is a
 * blanket removal of backdrop-filter on touch devices plus capping the big
 * decorative `filter: blur()` glows.
 * ------------------------------------------------------------------ */

/* Width-based fallback for browsers without (pointer: coarse) support. */
@media (max-width: 991px) {
    .globe-detail-badge,
    .urgency-badge,
    .btn-secondary,
    .liquid-glass-btn,
    .hero-bl-card-inner,
    .hero-card-br,
    .glass-card,
    .glass-card-solution,
    .glass-dossier,
    .promise-plaque,
    .glass-badge,
    .zero-icon-wrap,
    .scroll-to-top,
    .anatomy-card-img-label,
    .gc-perk,
    .gc-card,
    .gc-card-solution,
    .gc-card-red,
    .gc-card-amber {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* The card panels lose their frosted look without the blur, so make
       their backgrounds opaque enough to stay legible over content. */
    .gc-card,
    .gc-card-solution,
    .gc-card-red,
    .gc-card-amber {
        background-color: rgba(244, 241, 252, 0.96) !important;
    }
    .glass-dossier,
    .hero-bl-card-inner {
        background-color: rgba(255, 255, 255, 0.96) !important;
    }
    .hero-card-br {
        background-color: rgba(244, 241, 252, 0.96) !important;
    }
}

/* Real touch devices: the same removal, applied regardless of width, plus
   the heavy decorative blur glows. (pointer: coarse) avoids touching
   narrow-window desktops, which can render the glass cheaply.) */
@media (hover: none) and (pointer: coarse) {
    .globe-detail-badge,
    .urgency-badge,
    .btn-secondary,
    .liquid-glass-btn,
    .hero-bl-card-inner,
    .hero-card-br,
    .glass-card,
    .glass-card-solution,
    .glass-dossier,
    .promise-plaque,
    .glass-badge,
    .zero-icon-wrap,
    .scroll-to-top,
    .anatomy-card-img-label,
    .gc-perk,
    .gc-card,
    .gc-card-solution,
    .gc-card-red,
    .gc-card-amber {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Large decorative glow shapes: cap blur radius and stop any continuous
       animation. A 100-140px animated blur is among the costliest things a
       mobile GPU repaints and feeds directly into the scroll stutter. */
    .contact-bg-shapes,
    .bento-glow,
    .solution-card-glow {
        filter: blur(24px) !important;
    }

    .bg-shape,
    .hero-orb {
        filter: blur(40px) !important;
        animation: none !important;
    }
}