/* CSS Design System for Voluble */

/* Custom properties / Design tokens */
:root {
    /* SAM Color Palette from PDF */
    --color-brand-teal: #023B59;
    --color-brand-teal-light: #0d4f72;
    --color-brand-teal-dark: #012437;
    --color-accent-teal: #088a99;
    --color-accent-teal-hover: #06727f;
    --color-accent-teal-light: #e6f6f7;
    
    /* Section Backgrounds */
    --bg-hero: #FBF4EC;        /* Soft warm cream */
    --bg-about: #023B59;       /* Dark teal */
    --bg-services: #FEF6F3;    /* Very soft coral-cream */
    --bg-comic: #F9F2E2;       /* Warm yellow-cream */
    --bg-waitlist: #FDF5F2;    /* Soft pinkish-cream */
    
    /* Neutral colors */
    --color-text-dark: #2D3748;
    --color-text-muted: #5A6270;
    --color-text-light: #FFFFFF;
    --color-border: #E2E8F0;
    --color-card-bg: #FFFFFF;
    --color-success: #10B981;
    
    /* Typography */
    --font-serif: 'Fraunces', Georgia, serif;
    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(2, 59, 89, 0.05);
    --shadow-lg: 0 12px 24px rgba(2, 59, 89, 0.08);
    --shadow-card-hover: 0 20px 32px rgba(2, 59, 89, 0.12);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset & Global styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-sans);
    color: var(--color-text-dark);
    line-height: 1.6;
    overflow-x: hidden;
    background-color: var(--bg-hero);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Common Section Typography */
.section {
    padding: 6rem 1.5rem;
    position: relative;
    overflow: hidden;
}

.serif-title {
    font-family: var(--font-serif);
    font-weight: 800;
}

.section-tag-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.section-badge {
    background-color: #E6EDF1;
    color: var(--color-brand-teal);
    font-weight: 700;
    padding: 0.4rem 1.2rem;
    border-radius: 100px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
}

.section-badge.bg-teal {
    background-color: var(--color-brand-teal);
    color: var(--color-text-light);
}

/* Navigation Header */
.header {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 860px;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.9); /* Semi-translucent white */
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(2, 38, 57, 0.08);
    border-radius: 100px;
    box-shadow: 0 10px 30px rgba(2, 38, 57, 0.06);
    transition: all var(--transition-normal);
}

.header-container {
    width: 100%;
    padding: 0.55rem 1.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    white-space: nowrap;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--color-brand-teal);
    transition: var(--transition-fast);
}

.logo-icon {
    width: 1.8rem;
    height: 1.8rem;
    color: var(--color-accent-teal);
    transform: rotate(0deg);
    transition: transform var(--transition-normal);
}

.logo:hover .logo-icon {
    transform: rotate(15deg) scale(1.1);
}

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

.nav-link {
    font-weight: 600;
    color: var(--color-brand-teal);
    font-size: 0.95rem;
    transition: var(--transition-fast);
    position: relative;
    padding: 0.25rem 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent-teal);
    transition: var(--transition-normal);
}

.nav-link:hover {
    color: var(--color-accent-teal);
}

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

.nav-btn {
    background-color: var(--color-brand-teal);
    color: var(--color-text-light) !important;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: 100px;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.nav-btn:hover {
    background-color: var(--color-brand-teal-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Hamburger Menu Button (mobile only) */
.mobile-hamburger {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.3rem;
    color: var(--color-brand-teal);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mobile-hamburger svg {
    width: 1.6rem;
    height: 1.6rem;
}

/* Mobile Nav Menu Dropdown */
@media (max-width: 768px) {
    .header.mobile-open {
        border-radius: 24px;
        background-color: rgba(255, 255, 255, 0.96);
    }

    .header.mobile-open .nav-links-desktop {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        padding: 1rem 0 0.5rem;
        gap: 0.75rem;
        border-top: 1px solid rgba(2, 38, 57, 0.08);
        margin-top: 0.5rem;
    }

    .header.mobile-open .header-container {
        flex-wrap: wrap;
    }

    .header.mobile-open .nav-btn {
        display: flex !important;
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* SECTION 1: HERO SECTION (Ultra Creative Narrative Hero) */
.hero-section.hero-fullwidth {
    background-color: #fdfaf4;
    background-image: url('assets/hero_bg_watercolor.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: auto;
    position: relative;
    display: flex;
    align-items: center;
    padding-top: 7rem;
    padding-bottom: 2.5rem;
    overflow: hidden;
}

/* Ambient Glow Orbs & Floating Plane */
.hero-decor-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

.hero-decor-orb-1 {
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(8, 138, 153, 0.25) 0%, rgba(253, 250, 244, 0) 70%);
    top: 5%;
    left: -5%;
}

.hero-decor-orb-2 {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(226, 241, 248, 0.4) 0%, rgba(253, 250, 244, 0) 70%);
    bottom: 5%;
    right: -5%;
}

.hero-container.fullwidth-container {
    max-width: 1080px;
    margin: 0 auto;
    width: 100%;
    padding: 0 1.5rem;
    display: block;
    z-index: 2;
    position: relative;
}

.hero-content.hero-card-full {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.65rem;
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    border-radius: 32px;
    padding: 3.25rem 2.75rem;
    box-shadow: 0 25px 60px rgba(2, 38, 57, 0.08), 0 2px 10px rgba(255, 255, 255, 0.7);
    position: relative;
    z-index: 5;
}

/* Target Audience Badge Container */
.hero-badge-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background: rgba(255, 255, 255, 0.95);
    padding: 0.45rem 1.1rem;
    border-radius: 100px;
    border: 1.5px solid rgba(8, 138, 153, 0.22);
    box-shadow: 0 4px 14px rgba(2, 38, 57, 0.05);
    position: relative;
}

.live-pulse {
    width: 8px;
    height: 8px;
    background-color: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: livePulse 2s infinite;
}

@keyframes livePulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.badge-flags-group {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.badge-flag {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.country-codes {
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #01263c;
    font-size: 0.85rem;
}

.badge-divider {
    color: rgba(8, 138, 153, 0.4);
    font-weight: 300;
}

.badge-text {
    font-weight: 700;
    color: #334155;
    font-size: 0.88rem;
}

/* Hero Title & Investment Tag */
.hero-title {
    font-size: clamp(2.1rem, 3.8vw, 3.3rem);
    color: #01263c;
    line-height: 1.22;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.02em;
    max-width: 920px;
}

.investment-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, rgba(8, 138, 153, 0.12) 0%, rgba(226, 241, 248, 0.4) 100%);
    border: 1.5px solid rgba(8, 138, 153, 0.3);
    padding: 0.15rem 0.75rem;
    border-radius: 100px;
    margin: 0 0.2rem;
    vertical-align: middle;
}

.hero-title .highlight-text {
    color: var(--color-accent-teal);
    background: linear-gradient(135deg, #088a99 0%, #03525e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
}

.hero-lead {
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    font-weight: 700;
    color: #475569;
    margin: 0;
    line-height: 1.35;
}

/* Question Banner */
.hero-question-banner {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, rgba(1, 38, 60, 0.05) 0%, rgba(8, 138, 153, 0.12) 100%);
    border: 1.5px solid rgba(8, 138, 153, 0.25);
    padding: 0.65rem 1.65rem;
    border-radius: 100px;
    box-shadow: 0 4px 15px rgba(8, 138, 153, 0.06);
}

.question-sparkle {
    font-size: 1.1rem;
}

.hero-question {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 800;
    color: #01263c;
    margin: 0;
    line-height: 1.25;
}

/* Narrative Flow Grid (Steps 01, 02, 03) */
.hero-narrative-flow {
    display: grid;
    grid-template-columns: 1fr 1fr 1.35fr;
    gap: 1.25rem;
    width: 100%;
    margin-top: 0.5rem;
    text-align: left;
}

.flow-card {
    background: #ffffff;
    border: 1.5px solid rgba(226, 232, 240, 0.95);
    border-radius: 24px;
    padding: 1.5rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    transition: var(--transition-normal);
    box-shadow: 0 6px 20px rgba(2, 38, 57, 0.04);
    position: relative;
    overflow: hidden;
}

.flow-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 35px rgba(2, 38, 57, 0.09);
    border-color: rgba(8, 138, 153, 0.35);
}

.flow-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flow-badge {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--color-accent-teal);
    background: rgba(8, 138, 153, 0.1);
    padding: 0.25rem 0.65rem;
    border-radius: 100px;
}

.flow-icon {
    font-size: 1.2rem;
}

.flow-title {
    font-size: 1rem;
    line-height: 1.45;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

/* Master Solution Card (Step 03) */
.flow-step-solution {
    background: linear-gradient(135deg, #01263c 0%, #034568 100%);
    border: 2px solid var(--color-accent-teal);
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(1, 38, 60, 0.28);
}

.flow-step-solution:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(1, 38, 60, 0.38);
    border-color: #38bdf8;
}

.solution-sparkle-tag {
    display: inline-flex;
    align-items: center;
    background: rgba(8, 138, 153, 0.3);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #38bdf8;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    width: fit-content;
}

.flow-step-solution .flow-title {
    color: #ffffff;
    font-size: 1.02rem;
    line-height: 1.45;
    font-weight: 700;
}

/* CTA Actions */
.hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.btn-hero-primary,
.btn-primary {
    background: linear-gradient(135deg, #088a99 0%, #036873 100%);
    color: #ffffff !important;
    font-weight: 800;
    padding: 1.1rem 2.4rem;
    border-radius: 100px;
    font-size: 1.08rem;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    white-space: nowrap;
    transition: var(--transition-normal);
    box-shadow: 0 8px 25px rgba(8, 138, 153, 0.32);
    letter-spacing: -0.01em;
    text-decoration: none;
}

.btn-hero-primary span,
.btn-primary span {
    white-space: nowrap;
}

.btn-arrow {
    width: 1.3rem;
    height: 1.3rem;
    flex-shrink: 0;
    transition: transform var(--transition-normal);
}

.btn-hero-primary:hover,
.btn-primary:hover {
    background: linear-gradient(135deg, #0aa3b5 0%, #047e8c 100%);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 32px rgba(8, 138, 153, 0.42);
}

.btn-hero-primary:hover .btn-arrow,
.btn-primary:hover .btn-arrow {
    transform: translateX(5px);
}

.hero-subtext {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.subtext-star {
    color: #f59e0b;
}

/* Right side graphic */
.hero-graphic {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.passport-img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* SECTION 2: JOB MARKET REALITY */
.job-market-section {
    background-color: #f7fafc;
    background-image: radial-gradient(circle at 50% 0%, rgba(8, 138, 153, 0.06) 0%, rgba(247, 250, 252, 0) 70%);
    padding-top: 2.5rem;
    padding-bottom: 5rem;
    position: relative;
    z-index: 2;
}

.job-market-container {
    max-width: 1080px;
    margin: 0 auto;
    width: 100%;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.job-market-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 850px;
}

.reality-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(8, 138, 153, 0.1);
    border: 1px solid rgba(8, 138, 153, 0.25);
    color: var(--color-accent-teal);
    padding: 0.4rem 1.1rem;
    border-radius: 100px;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.job-market-title {
    font-size: clamp(2.1rem, 3.8vw, 3.2rem);
    color: #01263c;
    line-height: 1.2;
    font-weight: 900;
    margin: 0;
    letter-spacing: -0.02em;
}

.job-market-subtitle {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    color: var(--color-accent-teal);
    line-height: 1.25;
    font-weight: 800;
    margin: 0;
}

.job-market-lead {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    color: #475569;
    line-height: 1.5;
    margin: 0;
    font-weight: 500;
}

/* Statistics Cards Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    width: 100%;
}

.stat-card {
    background: #ffffff;
    border: 1.5px solid rgba(226, 232, 240, 0.95);
    border-radius: 24px;
    padding: 1.85rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-shadow: 0 10px 30px rgba(2, 38, 57, 0.04);
    transition: var(--transition-normal);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(2, 38, 57, 0.09);
    border-color: rgba(8, 138, 153, 0.35);
}

.stat-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.stat-country {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stat-flag {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.stat-country-name {
    font-weight: 800;
    color: #01263c;
    font-size: 0.95rem;
}

.stat-country-code {
    font-weight: 900;
    font-size: 0.8rem;
    color: var(--color-accent-teal);
    background: rgba(8, 138, 153, 0.1);
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
}

.stat-number-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-big-number {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 900;
    color: #01263c;
    line-height: 1;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #01263c 0%, #088a99 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-number-label {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--color-accent-teal);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stat-description {
    font-size: 0.94rem;
    color: #475569;
    line-height: 1.55;
    margin: 0;
}

/* Reality Callout Box */
.reality-box {
    width: 100%;
    background: linear-gradient(135deg, #01263c 0%, #034568 100%);
    border: 2px solid var(--color-accent-teal);
    border-radius: 28px;
    padding: 2.5rem 3rem;
    color: #ffffff;
    box-shadow: 0 15px 40px rgba(1, 38, 60, 0.25);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.reality-box-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.globe-emoji {
    font-size: 1.8rem;
}

.reality-box-header h3 {
    font-size: 1.65rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
}

.reality-points-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.reality-points-list li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 1.1rem;
    color: #e2e8f0;
    font-weight: 500;
}

.reality-check-icon {
    width: 1.8rem;
    height: 1.8rem;
    background: rgba(8, 138, 153, 0.3);
    border: 1px solid var(--color-accent-teal);
    color: #38bdf8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.reality-check-icon.highlight-icon {
    background: #f59e0b;
    border-color: #fbbf24;
    color: #000000;
}

.highlight-reality-text {
    color: #ffffff;
    font-size: 1.18rem;
    font-weight: 800;
}

/* Bottom Statement */
.job-market-bottom {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1.5px solid rgba(8, 138, 153, 0.2);
    padding: 1.75rem 2.5rem;
    border-radius: 20px;
    width: 100%;
}

.bottom-statement-1 {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 800;
    color: #01263c;
    margin: 0;
}

.bottom-statement-2 {
    font-size: clamp(1.25rem, 2.2vw, 1.65rem);
    font-weight: 900;
    color: var(--color-accent-teal);
    margin: 0;
}

/* SECTION 3: PREPARATION GAP COMPARISON */
.prep-gap-section {
    background-color: #ffffff;
    background-image: radial-gradient(circle at 50% 100%, rgba(8, 138, 153, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
    padding-top: 5.5rem;
    padding-bottom: 6.5rem;
    position: relative;
    z-index: 2;
}

.prep-gap-container {
    max-width: 1080px;
    margin: 0 auto;
    width: 100%;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.5rem;
}

.prep-gap-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    max-width: 850px;
}

.prep-gap-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(8, 138, 153, 0.1);
    border: 1px solid rgba(8, 138, 153, 0.25);
    color: var(--color-accent-teal);
    padding: 0.4rem 1.1rem;
    border-radius: 100px;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.prep-gap-lead {
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    font-weight: 700;
    color: #475569;
    margin: 0;
    line-height: 1.35;
}

.prep-gap-title {
    font-size: clamp(2rem, 3.8vw, 3.2rem);
    color: #01263c;
    line-height: 1.2;
    font-weight: 900;
    margin: 0;
    letter-spacing: -0.02em;
}

.prep-gap-title .highlight-text {
    color: var(--color-accent-teal);
    background: linear-gradient(135deg, #088a99 0%, #03525e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Two-Column Comparison Cards */
.prep-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: 2rem;
    width: 100%;
}

.prep-comparison-card {
    border-radius: 28px;
    padding: 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    transition: var(--transition-normal);
}

.prep-card-prepared {
    background: #f8fafc;
    border: 1.5px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 10px 30px rgba(2, 38, 57, 0.03);
}

.prep-card-prepared:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 35px rgba(2, 38, 57, 0.07);
}

.prep-card-unprepared {
    background: linear-gradient(135deg, #01263c 0%, #034568 100%);
    border: 2px solid var(--color-accent-teal);
    color: #ffffff;
    box-shadow: 0 15px 40px rgba(1, 38, 60, 0.22);
}

.prep-card-unprepared:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(1, 38, 60, 0.32);
    border-color: #38bdf8;
}

.prep-card-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.prep-card-unprepared .prep-card-header {
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

.status-icon {
    font-size: 1.5rem;
}

.prep-card-title {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0;
    color: #01263c;
}

.prep-card-unprepared .prep-card-title {
    color: #ffffff;
}

.prep-comparison-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.prep-comparison-list li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 1.02rem;
    font-weight: 600;
    color: #334155;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    transition: background 0.2s ease;
}

.prep-card-prepared .prep-comparison-list li:hover {
    background: rgba(8, 138, 153, 0.06);
}

.prep-card-unprepared .prep-comparison-list li {
    color: #f1f5f9;
}

.prep-card-unprepared .prep-comparison-list li:hover {
    background: rgba(255, 255, 255, 0.08);
}

.list-check {
    width: 1.6rem;
    height: 1.6rem;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.list-target-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Bottom Statement */
.prep-gap-bottom {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(8, 138, 153, 0.08) 0%, rgba(226, 241, 248, 0.3) 100%);
    border: 1.5px solid rgba(8, 138, 153, 0.25);
    padding: 2.25rem 2.75rem;
    border-radius: 24px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(2, 38, 57, 0.04);
}

.bottom-lead {
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    font-weight: 700;
    color: #475569;
    margin: 0;
}

.bottom-highlight {
    font-size: clamp(1.4rem, 2.4vw, 1.95rem);
    font-weight: 900;
    color: #01263c;
    margin: 0;
}

.bottom-solution {
    font-size: clamp(1.02rem, 1.5vw, 1.18rem);
    font-weight: 700;
    color: var(--color-accent-teal);
    margin: 0;
    max-width: 780px;
    line-height: 1.5;
}

/* SECTION 4: MEET VOLUBLE PLATFORM */
.meet-voluble-section {
    background-color: #f7fafc;
    background-image: radial-gradient(circle at 50% 0%, rgba(8, 138, 153, 0.07) 0%, rgba(247, 250, 252, 0) 70%);
    padding-top: 5.5rem;
    padding-bottom: 6.5rem;
    position: relative;
    z-index: 2;
}

.voluble-platform-container {
    max-width: 1080px;
    margin: 0 auto;
    width: 100%;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.5rem;
}

.voluble-platform-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 860px;
}

.voluble-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(8, 138, 153, 0.1);
    border: 1px solid rgba(8, 138, 153, 0.25);
    color: var(--color-accent-teal);
    padding: 0.4rem 1.1rem;
    border-radius: 100px;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.voluble-platform-title {
    font-size: clamp(2.1rem, 3.8vw, 3.2rem);
    color: #01263c;
    line-height: 1.2;
    font-weight: 900;
    margin: 0;
    letter-spacing: -0.02em;
}

.voluble-platform-subheading {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    color: #475569;
    line-height: 1.55;
    margin: 0;
    font-weight: 500;
    max-width: 780px;
}

/* 6 Feature Cards Grid */
.voluble-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    width: 100%;
}

.voluble-feature-card {
    background: #ffffff;
    border: 1.5px solid rgba(226, 232, 240, 0.95);
    border-radius: 24px;
    padding: 2rem 1.65rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: 0 10px 30px rgba(2, 38, 57, 0.03);
    transition: var(--transition-normal);
}

.voluble-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(2, 38, 57, 0.09);
    border-color: rgba(8, 138, 153, 0.35);
}
/* ==========================================
   APPLE-STYLE SLIDING CAROUSEL (Section 4)
   ========================================== */
.voluble-platform-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    gap: 2rem;
    margin-bottom: 0.5rem;
}

.voluble-platform-header-row .voluble-platform-header {
    text-align: left;
    align-items: flex-start;
}

.apple-carousel-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    margin-bottom: 0.75rem;
}

.apple-carousel-btn {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1.5px solid rgba(2, 38, 57, 0.12);
    color: var(--color-brand-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: 0 4px 14px rgba(2, 38, 57, 0.06);
    backdrop-filter: blur(8px);
}

.apple-carousel-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.apple-carousel-btn:hover:not(:disabled) {
    background: var(--color-brand-teal);
    color: #ffffff;
    border-color: var(--color-brand-teal);
    transform: scale(1.08);
    box-shadow: 0 8px 22px rgba(2, 38, 57, 0.15);
}

.apple-carousel-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Sliding Track */
.apple-carousel-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 0.5rem 0 1rem;
}

.apple-carousel-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    padding: 0.75rem 0.25rem 1.25rem;
    cursor: grab;
}

.apple-carousel-track::-webkit-scrollbar {
    display: none; /* Safari/Chrome */
}

.apple-carousel-track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
    user-select: none;
}

.apple-slide-card {
    flex: 0 0 calc(33.333% - 1rem);
    min-width: 320px;
    scroll-snap-align: start;
    background: #ffffff;
    border: 1.5px solid rgba(226, 232, 240, 0.95);
    border-radius: 28px;
    padding: 2.25rem 1.85rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: 0 10px 30px rgba(2, 38, 57, 0.04);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.apple-slide-card:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 22px 48px rgba(2, 38, 57, 0.12);
    border-color: rgba(8, 138, 153, 0.4);
}

.apple-card-tag {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-teal);
    background: rgba(8, 138, 153, 0.08);
    padding: 0.25rem 0.7rem;
    border-radius: 100px;
}

/* Icon colors */
.feature-icon-wrapper.icon-amber   { background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05)); border-color: rgba(245, 158, 11, 0.3); }
.feature-icon-wrapper.icon-teal    { background: linear-gradient(135deg, rgba(8, 138, 153, 0.15), rgba(8, 138, 153, 0.05)); border-color: rgba(8, 138, 153, 0.3); }
.feature-icon-wrapper.icon-indigo  { background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(99, 102, 241, 0.05)); border-color: rgba(99, 102, 241, 0.3); }
.feature-icon-wrapper.icon-rose    { background: linear-gradient(135deg, rgba(244, 63, 94, 0.15), rgba(244, 63, 94, 0.05)); border-color: rgba(244, 63, 94, 0.3); }
.feature-icon-wrapper.icon-emerald { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05)); border-color: rgba(16, 185, 129, 0.3); }
.feature-icon-wrapper.icon-blue    { background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05)); border-color: rgba(59, 130, 246, 0.3); }

/* Pagination Dots */
.apple-carousel-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0 0.5rem;
}

.apple-dots-group {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.apple-dot {
    width: 8px;
    height: 8px;
    border-radius: 100px;
    background: rgba(2, 38, 57, 0.18);
    border: none;
    cursor: pointer;
    transition: all var(--transition-normal);
    padding: 0;
}

.apple-dot.active {
    width: 28px;
    background: var(--color-brand-teal);
    border-radius: 100px;
}

.apple-scroll-hint {
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
}

@media (max-width: 900px) {
    .apple-slide-card {
        flex: 0 0 calc(50% - 0.75rem);
        min-width: 280px;
    }
}

@media (max-width: 640px) {
    .voluble-platform-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .apple-slide-card {
        flex: 0 0 85vw;
        min-width: 260px;
    }
}

.feature-icon-wrapper {
    width: 3.2rem;
    height: 3.2rem;
    background: linear-gradient(135deg, rgba(8, 138, 153, 0.1) 0%, rgba(226, 241, 248, 0.5) 100%);
    border: 1px solid rgba(8, 138, 153, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-emoji {
    font-size: 1.6rem;
}

.feature-card-title {
    font-size: 1.22rem;
    font-weight: 800;
    color: #01263c;
    margin: 0;
    line-height: 1.3;
}

.feature-card-desc {
    font-size: 0.94rem;
    color: #475569;
    line-height: 1.55;
    margin: 0;
}

/* Bottom Statement Confidence Triad */
.voluble-platform-bottom {
    width: 100%;
    background: linear-gradient(135deg, #01263c 0%, #034568 100%);
    border: 2px solid var(--color-accent-teal);
    border-radius: 24px;
    padding: 2rem 2.5rem;
    box-shadow: 0 15px 40px rgba(1, 38, 60, 0.22);
}

.confidence-triad {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 1.5rem;
    width: 100%;
}

.triad-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    font-weight: 700;
    color: #e2e8f0;
}

.triad-check {
    width: 1.7rem;
    height: 1.7rem;
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid #10b981;
    color: #34d399;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.triad-highlight {
    color: #ffffff;
    font-weight: 900;
    background: rgba(8, 138, 153, 0.25);
    border: 1px solid var(--color-accent-teal);
    padding: 0.6rem 1.25rem;
    border-radius: 100px;
}

.triad-sparkle {
    font-size: 1.2rem;
}

.hero-skyline-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 420px;
    max-height: 48vh;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.skyline-bottom-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    display: block;
}

/* SECTION 2: CONTRAST COMPARISON (Move Up) */
.comparison-section {
    background-color: #fcece4;
    background-image: url('assets/page3_bg_sunset.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 6rem 2rem;
    color: var(--color-text-light);
}

.comparison-container {
    max-width: 1000px;
    margin: 0 auto;
}

.comparison-title {
    font-size: clamp(2rem, 4vw, 3rem);
    text-align: center;
    margin-bottom: 4rem;
    font-weight: 800;
}

.comparison-title .serif-title {
    font-style: italic;
    font-weight: 900;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.comparison-card {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition-normal);
}

.comparison-card.elevated-path {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-lg);
    position: relative;
}

.comparison-card.elevated-path::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, var(--color-accent-teal), transparent 60%);
    border-radius: 26px;
    z-index: -1;
}

.comparison-card:hover {
    transform: translateY(-8px);
    background-color: rgba(255, 255, 255, 0.08);
}

.comparison-card.elevated-path:hover {
    background-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.card-header {
    margin-bottom: 2rem;
}

.engineer-type {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.elevated-path .engineer-type {
    color: #E2F1F8;
}

.features-list {
    list-style: none;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    font-size: 1rem;
}

.radio-icon {
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.radio-icon.active {
    border-color: var(--color-accent-teal);
    background-color: var(--color-accent-teal);
}

.radio-icon.active::after {
    content: '';
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    background-color: white;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.image-wrapper {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 2.5rem;
    background-color: rgba(255,255,255,0.05);
}

.engineer-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: var(--transition-normal);
}

.comparison-card:hover .engineer-img {
    transform: scale(1.05);
}

.card-footer {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.comp-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

.comp-value {
    font-size: 2rem;
    font-weight: 800;
    font-family: var(--font-serif);
}

.comp-value.highlighted {
    color: #FFFFFF;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

/* SECTION 3: VALUE PROPOSITION (How Voluble Helps) */
.services-section {
    background-color: var(--bg-services);
    position: relative;
    overflow: hidden;
}

.services-bg-skyline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    z-index: 1;
    pointer-events: none;
}

.services-container {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 10;
}

.services-title {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    color: var(--color-brand-teal);
    margin-bottom: 4rem;
    line-height: 1.25;
}

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

.service-card {
    background-color: var(--color-card-bg);
    border-radius: 20px;
    padding: 3rem 2rem;
    box-shadow: var(--shadow-md);
    transition: var(--transition-normal);
    border: 1px solid rgba(2, 59, 89, 0.04);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(8, 138, 153, 0.15);
}

.service-icon-box {
    width: 4rem;
    height: 4rem;
    background-color: #FFF6F3;
    color: var(--color-brand-teal);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem auto;
    transition: var(--transition-normal);
}

.service-card:hover .service-icon-box {
    background-color: var(--color-brand-teal);
    color: var(--color-text-light);
    transform: scale(1.05) rotate(5deg);
}

.service-icon {
    width: 2rem;
    height: 2rem;
}

.service-name {
    font-size: 1.3rem;
    color: var(--color-brand-teal);
    font-weight: 700;
    margin-bottom: 1rem;
}

.service-desc {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    font-weight: 500;
}

.services-quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--color-brand-teal);
    font-weight: 600;
    max-width: 600px;
    margin: 0 auto;
}

/* Corner illustrations on Page 3 (Removed, now integrated in background) */

/* SECTION 4: COMIC JOURNEY (IMAGINE LANDING) */
.comic-section {
    background-color: var(--bg-comic);
    position: relative;
}

.comic-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    height: 250px;
    background-image: radial-gradient(rgba(2, 59, 89, 0.08) 1.5px, transparent 1.5px);
    background-size: 10px 10px;
    pointer-events: none;
    z-index: 1;
}

.comic-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.comic-header-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 4rem;
    width: 100%;
    min-height: 160px;
}

.comic-decor-left {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(120px, 18vw, 240px);
    display: flex;
    align-items: center;
    z-index: 1;
    pointer-events: none;
}

.comic-decor-right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(120px, 18vw, 240px);
    display: flex;
    align-items: center;
    z-index: 1;
    pointer-events: none;
}

.decor-left-img, .decor-right-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.comic-header-center {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.comic-title {
    font-family: var(--font-sans);
    font-weight: 900;
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    font-style: italic;
    line-height: 1.1;
    letter-spacing: -0.01em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-top: 1rem;
}

.title-line-1 {
    display: block;
    color: #1A202C;
    text-shadow: 
        -1.5px -1.5px 0 #000,  
         1.5px -1.5px 0 #000,
        -1.5px  1.5px 0 #000,
         1.5px  1.5px 0 #000,
         3.5px  3.5px 0px rgba(0, 0, 0, 0.25);
}

.title-line-2 {
    display: block;
    color: #088a99;
    text-shadow: 
        -1.5px -1.5px 0 #000,  
         1.5px -1.5px 0 #000,
        -1.5px  1.5px 0 #000,
         1.5px  1.5px 0 #000,
         3.5px  3.5px 0px rgba(0, 0, 0, 0.25);
}

@media (max-width: 768px) {
    .comic-header-wrapper {
        min-height: auto;
        margin-bottom: 2.5rem;
    }
    .comic-decor-left, .comic-decor-right {
        display: none;
    }
    .comic-title {
        font-size: 2.2rem;
    }
}

.comic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.comic-frame-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
    opacity: 0;
    transform: translateY(20px);
}

/* Scroll-triggered reveal state managed by JS */
.comic-frame-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.comic-frame-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-lg);
}

.comic-frame-img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* CONTINUOUS SCROLLING TICKER */
.ticker-container {
    overflow: hidden;
    white-space: nowrap;
    background-color: var(--bg-comic);
    border-top: 1.5px solid rgba(2, 59, 89, 0.15);
    border-bottom: 1.5px solid rgba(2, 59, 89, 0.15);
    padding: 1.25rem 0;
    width: 100%;
    position: relative;
    z-index: 15;
    display: flex;
    align-items: center;
}

.ticker-track {
    display: flex;
    width: max-content;
    animation: tickerScroll 25s linear infinite;
}

.ticker-group {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding-right: 4rem;
}

.ticker-group span {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--color-brand-teal);
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.ticker-star {
    color: var(--color-accent-teal);
    font-size: 1.2rem;
}

@keyframes tickerScroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0); /* Exactly 50% for seamless loop */
    }
}

@media (max-width: 768px) {
    .ticker-container {
        padding: 0.85rem 0;
    }
    .ticker-group span {
        font-size: 1.1rem;
        gap: 0.75rem;
        letter-spacing: 0.06em;
    }
    .ticker-star {
        font-size: 0.95rem;
    }
}

/* SECTION 5: WAITLIST SIGNUP FORM */
.waitlist-section {
    background: linear-gradient(135deg, #eef9fa 0%, #e1f1f7 50%, #f4f8fb 100%);
    position: relative;
    overflow: hidden;
    padding-top: 6rem;
    padding-bottom: 6rem;
    min-height: calc(100vh - 200px); /* Centered full-screen feel */
    display: flex;
    align-items: center;
}

.waitlist-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

.waitlist-info {
    position: relative;
}

.waitlist-title {
    font-size: clamp(2.2rem, 4vw, 3.25rem);
    color: #01263c;
    line-height: 1.2;
    margin-bottom: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.waitlist-status {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-accent-teal);
    margin-bottom: 0.75rem;
}

.waitlist-subtitle {
    font-size: 1.15rem;
    color: #475569;
    font-weight: 500;
    line-height: 1.5;
}

.whats-included-box {
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1.5px solid rgba(8, 138, 153, 0.2);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.whats-included-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #01263c;
    margin: 0;
}

.whats-included-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.whats-included-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1.02rem;
    color: #334155;
    line-height: 1.5;
}

.included-check {
    font-size: 1.15rem;
    flex-shrink: 0;
}

.form-card-header-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: #01263c;
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1.5px solid #f1f5f9;
}

.waitlist-form-container {
    background-color: #ffffff;
    padding: 3rem;
    border-radius: 28px;
    box-shadow: 0 15px 40px rgba(2, 38, 57, 0.08);
    border: 1.5px solid rgba(8, 138, 153, 0.15);
}

.waitlist-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: relative;
}

.form-group {
    position: relative;
    display: flex;
    flex-direction: column;
}

.input-icon {
    position: absolute;
    left: 1.25rem;
    top: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-text-muted);
    pointer-events: none;
    transition: var(--transition-fast);
}

.form-input {
    width: 100%;
    padding: 1.1rem 1.25rem 1.1rem 3.25rem;
    border: 1px solid #E2E8F0;
    background-color: #F8FAFC;
    border-radius: 12px;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-dark);
    outline: none;
    transition: var(--transition-normal);
}

.form-input::placeholder {
    color: #A0AEC0;
}

.form-input:focus {
    border-color: var(--color-accent-teal);
    background-color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(8, 138, 153, 0.1);
}

.form-input:focus ~ .input-icon {
    color: var(--color-accent-teal);
}

/* Phone input with select dropdown */
.phone-input-wrapper {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.form-select {
    padding: 1.1rem 1rem;
    border: 1px solid #E2E8F0;
    background-color: #F8FAFC;
    border-radius: 12px;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-brand-teal);
    outline: none;
    cursor: pointer;
    transition: var(--transition-normal);
    width: 110px;
}

.form-select:focus {
    border-color: var(--color-accent-teal);
    background-color: #FFFFFF;
}

.phone-field {
    padding-left: 1.25rem; /* No icon for phone text box since it's on wrapper */
}

.form-group .phone-input-wrapper ~ .input-icon {
    display: none; /* Hide primary icon for phone group */
}

/* Validation Errors */
.error-msg {
    color: #E53E3E;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.35rem;
    padding-left: 0.25rem;
    display: none;
}

.form-group.invalid .form-input {
    border-color: #E53E3E;
    background-color: #FFF5F5;
}

.form-group.invalid .error-msg {
    display: block;
}

/* Submit Button */
.btn-submit {
    background-color: var(--color-brand-teal);
    color: var(--color-text-light);
    border: none;
    border-radius: 12px;
    padding: 1.2rem;
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
}

.btn-submit:hover {
    background-color: var(--color-brand-teal-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.submit-icon {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform var(--transition-normal);
}

.btn-submit:hover .submit-icon {
    transform: translate(2px, -2px);
}

/* Success Indicator */
.form-success-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-card-bg);
    z-index: 10;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.form-success-container.active {
    display: flex;
    animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.success-icon-box {
    width: 4.5rem;
    height: 4.5rem;
    background-color: #ECFDF5;
    color: var(--color-success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.success-icon {
    width: 2.25rem;
    height: 2.25rem;
}

.form-success-container h3 {
    font-size: 1.6rem;
    color: var(--color-brand-teal);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.form-success-container p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    max-width: 320px;
}

.form-privacy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.lock-icon {
    width: 1rem;
    height: 1rem;
}

/* FOOTER */
.footer {
    background-color: var(--color-brand-teal-dark);
    padding: 4rem 1.5rem 2.5rem 1.5rem;
    color: #94A3B8;
    font-size: 0.95rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
    margin-bottom: 2.5rem;
}

.footer-brand-box {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 400px;
    text-align: left;
}

.footer .logo {
    color: #FFFFFF;
}

.footer-brand-subtext {
    font-size: 0.9rem;
    color: #94A3B8;
    line-height: 1.6;
}

.footer-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.footer-link {
    color: #94A3B8;
    font-weight: 600;
    transition: var(--transition-fast);
}

.footer-link:hover {
    color: var(--color-accent-teal);
}

.footer-divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 2rem;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #64748B;
}

.footer-copy {
    margin: 0;
}

.footer-tagline {
    margin: 0;
}

/* SECTION 2: COUNTRY SPOTLIGHT */
.spotlight-section {
    background-color: #FCF8F5; /* Matches the map image background color exactly */
    padding: 8rem 0;
    position: relative;
    overflow: hidden;
}

.spotlight-outer-container {
    max-width: 1300px; /* Make it wider to let the map grow */
    margin: 0 auto;
    width: 100%;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.spotlight-split-container {
    display: grid;
    grid-template-columns: 0.65fr 1.35fr; /* 67.5% width for the map, 32.5% for text */
    gap: 4.5rem;
    align-items: center;
}

.spotlight-content {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.spotlight-main-title {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    color: var(--color-brand-teal);
    line-height: 1.15;
    font-weight: 800;
    margin: 0;
}

.spotlight-main-title .highlight-text {
    color: var(--color-accent-teal);
}

.spotlight-subtitle {
    font-size: 1.15rem;
    color: var(--color-text-muted);
    font-weight: 500;
    line-height: 1.6;
    margin: 0;
}

/* Map Graphics and Container */
.spotlight-map-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1024 / 563; /* Match the exact image aspect ratio */
    overflow: visible;
}

.spotlight-map-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.95;
    mix-blend-mode: multiply;
}

.map-pins-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.map-pin-btn {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    pointer-events: all;
    transform: translate(-50%, -22px);
    transition: transform var(--transition-normal);
}

.pin-badge {
    width: 2.8rem;
    height: 2.8rem;
    background-color: #FFFFFF;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    box-shadow: 0 6px 18px rgba(2, 38, 57, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all var(--transition-normal);
}

.pin-flag {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pin-label {
    background-color: #FFFFFF;
    color: var(--color-brand-teal);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    margin-top: 0.4rem;
    box-shadow: 0 4px 10px rgba(2, 38, 57, 0.06);
    white-space: nowrap;
    transition: all var(--transition-normal);
}

/* Active Pin and Hover Styling */
.map-pin-btn:hover,
.map-pin-btn.active {
    transform: translate(-50%, -24px) scale(1.08) !important;
    z-index: 10;
}

.map-pin-btn:hover .pin-badge,
.map-pin-btn.active .pin-badge {
    border-color: var(--color-accent-teal);
    box-shadow: 0 8px 24px rgba(8, 138, 153, 0.22);
}

.map-pin-btn:hover .pin-label,
.map-pin-btn.active .pin-label {
    background-color: var(--color-accent-teal);
    color: #FFFFFF;
}

/* Interactive Popover Tooltip Card styling */
.map-tooltip-card {
    position: absolute;
    width: 290px;
    background-color: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(2, 38, 57, 0.1);
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(2, 38, 57, 0.08);
    border-top: 4px solid var(--color-accent-teal); /* Beautiful top accent banner line */
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.94) translateY(8px);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
    text-align: left;
}

.map-tooltip-card.active {
    pointer-events: all;
    opacity: 1;
    transform: scale(1) translateY(0);
}

.tooltip-close-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem;
    transition: var(--transition-fast);
}

.tooltip-close-btn:hover {
    color: var(--color-accent-teal);
    transform: rotate(90deg);
}

.tooltip-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
    padding-right: 1.5rem;
}

.tooltip-flag {
    width: 26px;
    height: 18px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.tooltip-country-name {
    font-family: 'Fraunces', serif; /* Premium editorial styling */
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-brand-teal);
    letter-spacing: -0.01em;
    margin: 0;
}

.tooltip-section-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent-teal);
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    border-bottom: 1px solid rgba(2, 38, 57, 0.08);
    padding-bottom: 0.35rem;
}

.tooltip-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Tighter gap to keep it compact */
}

.tooltip-item {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    transition: transform var(--transition-fast);
}

.tooltip-item:hover {
    transform: translateX(3px); /* Subtle interactive movement on item hover */
}

.tooltip-item-icon {
    font-size: 1.2rem;
    line-height: 1.25;
    background-color: rgba(254, 246, 243, 0.8);
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(254, 246, 243, 1);
}

.tooltip-item-text {
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 2.1rem;
}

.tooltip-item-text h5 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-brand-teal);
    margin: 0 0 0.1rem 0;
    line-height: 1.2;
}

.tooltip-item-text p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 500;
    margin: 0;
    line-height: 1.35;
}

/* Bottom Selector Pill Menu Styling */
.spotlight-selector-wrapper {
    margin-top: 3.5rem;
    display: flex;
    justify-content: center;
}

.spotlight-selector-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background-color: #FFFFFF;
    padding: 0.45rem;
    border-radius: 100px;
    border: 1px solid rgba(2, 38, 57, 0.08);
    box-shadow: 0 4px 15px rgba(2, 38, 57, 0.04);
}

.selector-item-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text-muted);
    transition: all var(--transition-normal);
}

.selector-item-btn:hover {
    color: var(--color-brand-teal);
    background-color: rgba(2, 38, 57, 0.03);
}

.selector-item-btn.active {
    color: var(--color-brand-teal);
    background-color: #F8F1E4; /* Sand tone matching active pill */
    box-shadow: inset 0 1px 2px rgba(2, 38, 57, 0.06);
}

.selector-flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Decorative Passport Stamps in Corners */
.stamp-decor {
    position: absolute;
    color: rgba(0, 0, 0, 0.35); /* Visible black-slate faded ink color */
    pointer-events: none;
    user-select: none;
}

.stamp-left-bottom {
    bottom: 2rem;
    left: 2rem;
    border: 2.5px solid currentColor;
    border-radius: 10px;
    padding: 0.8rem 1.2rem;
    transform: rotate(-12deg);
}

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

.stamp-type {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.25em;
    border-bottom: 1.5px solid currentColor;
    padding-bottom: 0.2rem;
    margin-bottom: 0.2rem;
}

.stamp-route {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.stamp-tag {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin-top: 0.15rem;
}

.stamp-right-bottom {
    bottom: 2rem;
    right: 2rem;
    transform: rotate(8deg);
}

/* Top left paper plane flight details */
.spotlight-decor-plane {
    position: absolute;
    top: 2rem;
    left: 4rem;
    width: 250px;
    height: 100px;
    pointer-events: none;
    opacity: 0.55;
}

.dotted-trail-spotlight {
    width: 100%;
    height: 100%;
}

.spotlight-plane-img {
    position: absolute;
    width: 2.5rem;
    height: auto;
    top: 50px;
    right: 10px;
    transform: rotate(15deg);
}

/* RESPONSIVENESS MEDIA QUERIES */

/* Large Tablets & Small Desktops (1024px) */
@media (max-width: 1024px) {
    .hero-container {
        grid-template-columns: 1.1fr 0.9fr;
        gap: 2rem;
    }
    
    .waitlist-container {
        gap: 2.5rem;
    }

    .spotlight-split-container {
        gap: 2rem;
    }
}

/* Medium Tablets & iPads (768px) */
@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2rem;
    }

    .footer-brand-box {
        text-align: center;
        align-items: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .header-container {
        padding: 0.65rem 1.25rem;
    }

    .header {
        max-width: 94vw;
        width: 94%;
    }

    /* Mobile: show hamburger, hide waitlist button */
    .nav-btn {
        display: none;
    }

    .mobile-hamburger {
        display: flex;
    }
    
    .hero-section {
        padding-top: 5rem;
        padding-bottom: 2.5rem;
        min-height: auto;
    }

    .hero-container.fullwidth-container {
        padding: 0 0.85rem;
    }

    .hero-content.hero-card-full {
        padding: 1.85rem 1.15rem;
        gap: 1.15rem;
        border-radius: 24px;
        text-align: center;
    }

    .hero-badge-container {
        width: 100%;
    }

    .hero-badge {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0.4rem 0.85rem;
        gap: 0.35rem;
    }

    .badge-flags-group {
        gap: 0.2rem;
    }

    .badge-flag {
        width: 1.1rem;
        height: 1.1rem;
    }

    .country-codes {
        font-size: 0.78rem;
    }

    .badge-divider {
        display: none;
    }

    .badge-text {
        font-size: 0.78rem;
    }

    .hero-title {
        font-size: clamp(1.4rem, 5.2vw, 1.95rem);
        line-height: 1.25;
    }

    .investment-tag {
        padding: 0.1rem 0.55rem;
        margin: 0.1rem 0;
    }

    .hero-lead {
        font-size: 0.96rem;
        line-height: 1.4;
    }

    .hero-question-banner {
        padding: 0.55rem 1.15rem;
        border-radius: 18px;
        width: 100%;
        justify-content: center;
    }

    .hero-question {
        font-size: 1.05rem;
    }

    .hero-narrative-flow {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .flow-card {
        padding: 1.25rem 1.1rem;
        border-radius: 20px;
    }

    .btn-hero-primary,
    .btn-primary {
        width: auto;
        min-width: 220px;
        max-width: 100%;
        justify-content: center;
        padding: 0.95rem 1.75rem;
        font-size: 0.98rem;
        border-radius: 100px;
        white-space: nowrap;
    }

    .hero-subtext {
        font-size: 0.82rem;
    }

    /* Mobile Job Market Section */
    .job-market-section {
        padding-top: 3.5rem;
        padding-bottom: 4rem;
    }

    .job-market-container {
        gap: 2rem;
        padding: 0 1rem;
    }

    .job-market-header {
        gap: 0.75rem;
    }

    .job-market-title {
        font-size: clamp(1.5rem, 5.5vw, 2rem);
    }

    .job-market-subtitle {
        font-size: clamp(1.15rem, 4vw, 1.45rem);
    }

    .job-market-lead {
        font-size: 0.95rem;
    }

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

    .stat-card {
        padding: 1.35rem 1.15rem;
        border-radius: 20px;
        gap: 1rem;
    }

    .stat-big-number {
        font-size: 2.3rem;
    }

    .reality-box {
        padding: 1.65rem 1.25rem;
        border-radius: 22px;
        gap: 1.15rem;
    }

    .reality-box-header h3 {
        font-size: 1.35rem;
    }

    .reality-points-list {
        gap: 0.85rem;
    }

    .reality-points-list li {
        font-size: 0.95rem;
        align-items: flex-start;
    }

    .highlight-reality-text {
        font-size: 1rem;
    }

    .job-market-bottom {
        padding: 1.35rem 1rem;
        border-radius: 18px;
    }

    .bottom-statement-1 {
        font-size: 1.05rem;
    }

    .bottom-statement-2 {
        font-size: 1.15rem;
    }

    /* Mobile Prep Gap Section */
    .prep-gap-section {
        padding-top: 3.5rem;
        padding-bottom: 4rem;
    }

    .prep-gap-container {
        gap: 2rem;
        padding: 0 1rem;
    }

    .prep-gap-lead {
        font-size: 0.98rem;
    }

    .prep-gap-title {
        font-size: clamp(1.45rem, 5.2vw, 1.95rem);
    }

    .prep-comparison-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .prep-comparison-card {
        padding: 1.5rem 1.15rem;
        border-radius: 22px;
        gap: 1.25rem;
    }

    .prep-card-title {
        font-size: 1.15rem;
    }

    .prep-comparison-list li {
        font-size: 0.92rem;
        padding: 0.35rem 0.5rem;
    }

    .prep-gap-bottom {
        padding: 1.5rem 1.15rem;
        border-radius: 18px;
        gap: 0.6rem;
    }

    .bottom-lead {
        font-size: 0.98rem;
    }

    .bottom-highlight {
        font-size: 1.25rem;
    }

    .bottom-solution {
        font-size: 0.94rem;
    }

    /* Mobile Meet Voluble Section */
    .meet-voluble-section {
        padding-top: 3.5rem;
        padding-bottom: 4rem;
    }

    .voluble-platform-container {
        gap: 2rem;
        padding: 0 1rem;
    }

    .voluble-platform-title {
        font-size: clamp(1.5rem, 5.5vw, 2rem);
    }

    .voluble-platform-subheading {
        font-size: 0.95rem;
    }

    .voluble-features-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .voluble-feature-card {
        padding: 1.4rem 1.25rem;
        border-radius: 20px;
    }

    .feature-card-title {
        font-size: 1.12rem;
    }

    .feature-card-desc {
        font-size: 0.92rem;
    }

    .voluble-platform-bottom {
        padding: 1.5rem 1.15rem;
        border-radius: 20px;
    }

    .confidence-triad {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .triad-item {
        font-size: 1rem;
    }

    .triad-highlight {
        width: 100%;
        justify-content: flex-start;
        padding: 0.55rem 0.85rem;
    }

    .hero-skyline-left-container {
        display: none; /* Hide skyline on mobile to save space */
    }
    
    .waitlist-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 3.5rem;
    }
    
    .waitlist-form-container {
        max-width: 500px;
        margin: 0 auto;
        width: 100%;
        padding: 2.5rem;
    }
    
    .form-plane-container {
        top: -90px;
        left: 50%;
        transform: translateX(-50%);
    }

    .spotlight-section {
        padding: 5rem 0;
    }

    .spotlight-split-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 3rem;
    }

    .spotlight-content {
        align-items: center;
        text-align: center;
    }

    .spotlight-map-container {
        max-width: 600px;
        margin: 0 auto;
    }

    .map-tooltip-card {
        position: relative;
        width: 100%;
        max-width: 480px;
        margin: 1.5rem auto 0 auto;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        transform: none;
        opacity: 0;
        pointer-events: none;
        box-shadow: 0 5px 20px rgba(2, 38, 57, 0.08);
    }

    .map-tooltip-card.active {
        opacity: 1;
        pointer-events: all;
    }

    .spotlight-selector-pill {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 20px;
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .selector-item-btn {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }

    .stamp-decor,
    .spotlight-decor-plane {
        display: none;
    }

    /* Map Pins Responsive Scaling & User Red Dot Location Calibration */
    .map-pin-btn {
        transform: translate(-50%, -50%) !important;
    }

    .map-pin-btn:hover,
    .map-pin-btn.active {
        transform: translate(-50%, -50%) scale(1.15) !important;
    }

    .pin-badge {
        width: 1.4rem;
        height: 1.4rem;
        border-width: 1.5px;
    }

    .pin-label {
        font-size: 0.52rem;
        padding: 0.12rem 0.35rem;
        margin-top: 0.15rem;
        border-radius: 4px;
    }

    /* Exact Red Dot Positions Marked by User */
    #pin-canada {
        left: 28.5% !important;
        top: 14.5% !important;
    }

    #pin-usa {
        left: 28.5% !important;
        top: 20.8% !important;
    }

    #pin-uk {
        left: 52.0% !important;
        top: 20.0% !important;
    }

    #pin-australia {
        left: 70.0% !important;
        top: 31.0% !important;
    }

    #pin-nz {
        left: 78.5% !important;
        top: 34.3% !important;
    }
}

/* Mobile Devices (480px) */
@media (max-width: 480px) {
    .pin-badge {
        width: 1.15rem;
        height: 1.15rem;
        border-width: 1.5px;
    }

    .pin-label {
        font-size: 0.46rem;
        font-weight: 700;
        padding: 0.1rem 0.28rem;
        margin-top: 0.1rem;
        border-radius: 3px;
    }

    .header {
        top: 0.65rem;
        width: 94%;
        max-width: none; /* Full pill width on mobile */
    }

    .section {
        padding: 4rem 1.25rem;
    }
    
    .hero-section {
        padding-top: 4.75rem;
        padding-bottom: 2rem;
        min-height: auto;
    }
    
    .hero-container.fullwidth-container {
        padding: 0 0.4rem;
    }

    .hero-content.hero-card-full {
        padding: 1.5rem 0.95rem;
        gap: 1rem;
        border-radius: 20px;
    }

    .hero-title {
        font-size: clamp(1.35rem, 5.8vw, 1.75rem);
        line-height: 1.25;
    }

    .hero-lead {
        font-size: 0.95rem;
    }

    .hero-question-box {
        padding: 0.5rem 1rem;
    }

    .hero-question {
        font-size: 1rem;
    }

    .point-card {
        padding: 1.1rem 0.95rem;
    }

    .point-text {
        font-size: 0.88rem;
    }
    
    .btn-hero-primary,
    .btn-primary {
        width: auto;
        min-width: 210px;
        max-width: 100%;
        justify-content: center;
        padding: 0.85rem 1.6rem;
        font-size: 0.94rem;
        border-radius: 100px;
        white-space: nowrap;
    }
    
    .waitlist-title {
        font-size: 2rem;
    }
    
    .waitlist-form-container {
        padding: 1.75rem;
    }
    
    .phone-input-wrapper {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .form-select {
        width: 100%;
    }

    .spotlight-main-title {
        font-size: 2.2rem;
    }

    .selector-item-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .spotlight-selector-pill {
        width: 100%;
        border-radius: 16px;
        justify-content: center;
    }
}

/* ==========================================
   SECTION 3: COMPARISON SECTION (Page 3)
   ========================================== */
.comparison-section {
    background-color: #ffffff;
    padding: 8rem 2rem;
    position: relative;
    overflow: hidden;
}

.comparison-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.comparison-header {
    text-align: center;
    margin-bottom: 4.5rem;
}

.comparison-title {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.25;
    color: #01263c;
    margin-bottom: 0.75rem;
}

.comparison-subtitle {
    font-family: var(--font-sans);
    font-size: 1.15rem;
    font-weight: 700;
    color: #023b59;
}

/* Comparison Grid & Cards */
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 4.5rem;
}

.comparison-card {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    border-radius: 28px;
    padding: 2.5rem 2rem 0 2rem;
    box-shadow: 0 16px 48px rgba(2, 38, 57, 0.1);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-engineer-a {
    background: linear-gradient(170deg, #ffffff 60%, #fef6f1 100%);
}

.card-engineer-b {
    background: linear-gradient(170deg, #ffffff 60%, #eef8f5 100%);
}

.comparison-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 24px 64px rgba(2, 38, 57, 0.12), 0 4px 12px rgba(2, 38, 57, 0.06);
    border-color: rgba(8, 138, 153, 0.12);
}

.card-badge {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.35rem 0.9rem;
    border-radius: 100px;
}

.badge-a {
    background-color: #fceeea;
    color: #c15c4e;
}

.badge-b {
    background-color: #eaf5ee;
    color: #3d8f58;
}

.card-body {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1.75rem;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-top: 2.5rem;
}

.card-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
}

.engineer-img {
    width: 100%;
    max-width: 280px;
    height: auto;
    border-radius: 0;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 8px 20px rgba(2, 38, 57, 0.12));
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.comparison-card:hover .engineer-img {
    transform: scale(1.06) translateY(-4px);
}

.card-stats {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.stat-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.stat-label {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-brand-teal);
    letter-spacing: 0.01em;
}

.stat-stars {
    display: flex;
    gap: 0.25rem;
}

.star-icon {
    width: 1.35rem;
    height: 1.35rem;
    transition: transform 0.2s ease;
}

.star-icon:hover {
    transform: scale(1.2);
}

.star-icon.filled {
    color: #088a99;
    fill: #088a99;
    filter: drop-shadow(0 1px 2px rgba(8, 138, 153, 0.3));
}

.star-icon.empty {
    color: #d4dbe4;
    fill: #d4dbe4;
    opacity: 0.5;
}

/* Card Footer Box */
.card-footer-box {
    margin: 0 -2rem;
    padding: 1.5rem 2rem 1.75rem;
    text-align: center;
    border-top: none;
    position: relative;
}

.card-footer-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2rem;
    right: 2rem;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(2, 38, 57, 0.08), transparent);
}

.footer-a {
    background: linear-gradient(180deg, #fef9f6 0%, #fdf2ec 100%);
    border-radius: 0 0 28px 28px;
}

.footer-b {
    background: linear-gradient(180deg, #f0f9f5 0%, #e6f5ee 100%);
    border-radius: 0 0 28px 28px;
}

.footer-label {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent-teal);
    display: block;
    margin-bottom: 0.35rem;
}

.footer-role {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-brand-teal);
    margin-bottom: 0.25rem;
}

.footer-tag {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    color: #64748b;
    font-style: italic;
}

/* VS Badge */
.comparison-vs {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--color-brand-teal) 0%, var(--color-accent-teal) 100%);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    box-shadow: 0 6px 24px rgba(2, 38, 57, 0.2), 0 0 0 4px rgba(8, 138, 153, 0.1);
    margin: 0 auto;
    z-index: 5;
    position: relative;
    border: 3px solid #ffffff;
    animation: vsPulse 2.5s ease-in-out infinite;
}

@keyframes vsPulse {
    0%, 100% { box-shadow: 0 6px 24px rgba(2, 38, 57, 0.2), 0 0 0 4px rgba(8, 138, 153, 0.1); }
    50% { box-shadow: 0 6px 24px rgba(2, 38, 57, 0.2), 0 0 0 8px rgba(8, 138, 153, 0.06); }
}

/* Career Growth Salary Bar */
.career-growth-bar {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    border-radius: 22px;
    padding: 1.5rem 2rem;
    box-shadow: 0 16px 44px rgba(2, 38, 57, 0.1);
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.75rem;
    align-items: center;
}

.growth-info {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.growth-title {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-brand-teal);
}

.growth-source {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Timelines styling */
.growth-paths {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.path-group {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    gap: 0.75rem;
}

.path-badge-label {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    text-align: center;
    width: fit-content;
}

.badge-a-sm {
    background-color: #fceeea;
    color: #c15c4e;
}

.badge-b-sm {
    background-color: #eaf5ee;
    color: #3d8f58;
}

.timeline-track {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding-top: 0.4rem;
}

.timeline-line {
    flex-grow: 1;
    height: 3px;
    margin-top: 7px;
    align-self: flex-start;
}

.track-a .solid-line {
    background-color: #e29388;
}

.track-a .dashed-line {
    border-top: 3px dashed #cbd5e1;
    height: 0;
    background-color: transparent;
}

.track-b .solid-line {
    background-color: #87bab6;
}

.timeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 72px;
    position: relative;
}

.timeline-node::before {
    content: '';
    width: 11px;
    height: 11px;
    border-radius: 50%;
    box-sizing: border-box;
    z-index: 2;
    margin-bottom: 0.4rem;
    transition: all var(--transition-normal);
}

.path-a-group .node-filled::before {
    border: 3px solid #c15c4e;
    background-color: #ffffff;
}

.path-a-group .node-faded::before {
    border: 3px solid #94a3b8;
    background-color: #ffffff;
}

.path-a-group .node-faded .node-val,
.path-a-group .node-faded .node-title {
    color: #94a3b8;
    font-weight: 500;
}

.path-b-group .node-filled::before {
    border: 3px solid #088a99;
    background-color: #ffffff;
}

.path-b-group .node-highlight::before {
    border: 3px solid #088a99;
    background-color: #088a99;
}

.path-b-group .node-highlight .node-val {
    color: #088a99;
}

.node-val {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-brand-teal);
    margin-bottom: 0.15rem;
}

.node-title {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}

/* Background Skyline Graphic */
.comparison-skyline-bg {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 220px;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
}

.comparison-skyline-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom center;
}

/* RESPONSIVE LAYOUTS FOR COMPARISON PAGE */
@media (max-width: 992px) {
    .comparison-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .comparison-vs {
        transform: none !important;
        margin: 0.75rem auto;
    }

    .career-growth-bar {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem;
    }
}

@media (max-width: 768px) {
    .comparison-section {
        padding: 5rem 1.5rem;
    }

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

    .comparison-card {
        padding: 2rem 1.5rem 0 1.5rem;
    }

    .card-body {
        gap: 1rem;
    }

    .card-footer-box {
        margin: 0 -1.5rem;
        padding: 1.25rem 1.5rem;
    }
}

@media (max-width: 600px) {
    .card-body {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .card-stats {
        align-items: center;
        margin-top: 1rem;
    }

    .stat-stars {
        justify-content: center;
    }

    .growth-paths {
        gap: 2rem;
    }

    .path-group {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .timeline-track {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        padding-left: 2rem;
    }

    .timeline-line {
        display: none;
    }

    /* Vertical line drawing */
    .timeline-track::after {
        content: '';
        position: absolute;
        left: 6px;
        top: 0.6rem;
        bottom: 0.6rem;
        width: 3px;
        z-index: 1;
    }

    .track-a::after {
        background: linear-gradient(to bottom, #e29388 66%, #cbd5e1 66%);
    }

    .track-b::after {
        background: #87bab6;
    }

    .timeline-node {
        flex-direction: row;
        text-align: left;
        gap: 1rem;
        min-width: auto;
        z-index: 2;
    }

    .timeline-node::before {
        margin-bottom: 0;
        margin-right: 0;
    }

    .node-title {
        white-space: normal;
    }
}


/* ===================================================
   SECTION 4: YOUR 12-WEEK JOURNEY
   =================================================== */

.journey-section {
    background: linear-gradient(180deg, #f2faf9 0%, #ffffff 40%, #f7fcfa 100%);
    padding: 6rem 2rem 5rem;
    position: relative;
    overflow: hidden;
}

/* Background Glow Orbs */
.journey-bg-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.journey-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
}

.orb-1 {
    width: 450px;
    height: 450px;
    background: #088a99;
    top: -100px;
    left: -100px;
}

.orb-2 {
    width: 400px;
    height: 400px;
    background: #f7d5ab;
    bottom: -100px;
    right: -100px;
}

.journey-container {
    max-width: 1140px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Pill Badge */
.journey-pill {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--color-accent-teal);
    background: #ffffff;
    border: 1.5px solid rgba(8, 138, 153, 0.2);
    padding: 0.5rem 1.4rem;
    border-radius: 100px;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 14px rgba(8, 138, 153, 0.08);
}

/* Heading */
.journey-heading {
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 800;
    color: var(--color-brand-teal);
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.journey-heading .accent-word {
    color: var(--color-accent-teal);
    font-style: italic;
    position: relative;
}

.journey-subtitle {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-bottom: 3rem;
}

/* === Interactive Transformation Spotlight Card === */
.journey-spotlight-card {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(8, 138, 153, 0.15);
    border-radius: 24px;
    padding: 1.75rem 2.25rem;
    margin-bottom: 3.5rem;
    box-shadow: 0 16px 44px rgba(2, 38, 57, 0.06);
    text-align: left;
    transition: all 0.3s ease;
}

.journey-spotlight-card:hover {
    box-shadow: 0 20px 50px rgba(8, 138, 153, 0.12);
    border-color: rgba(8, 138, 153, 0.25);
}

.spotlight-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.25rem;
    border-bottom: 1.5px dashed rgba(2, 38, 57, 0.08);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.spotlight-tag {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--color-brand-teal);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.spotlight-toggle-group {
    display: flex;
    background: #f0faf9;
    padding: 0.3rem;
    border-radius: 100px;
    border: 1px solid rgba(8, 138, 153, 0.12);
}

.spotlight-btn {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.45rem 1.1rem;
    border-radius: 100px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.spotlight-btn.active {
    background: var(--color-accent-teal);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(8, 138, 153, 0.3);
}

.spotlight-content-body {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2rem;
    align-items: center;
}

.spotlight-quote-box {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: rgba(8, 138, 153, 0.04);
    padding: 1.25rem 1.5rem;
    border-radius: 18px;
    border-left: 4px solid var(--color-accent-teal);
}

.quote-avatar {
    font-size: 2.2rem;
    line-height: 1;
    flex-shrink: 0;
}

.quote-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.quote-label {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent-teal);
}

.quote-bubble {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-brand-teal);
    line-height: 1.45;
    font-style: italic;
}

.spotlight-metrics-box {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #ffffff;
    padding: 1.25rem 1.5rem;
    border-radius: 18px;
    border: 1px solid rgba(2, 38, 57, 0.06);
}

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.metric-title {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-brand-teal);
}

.metric-pct {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--color-accent-teal);
}

.metric-bar-bg {
    width: 100%;
    height: 10px;
    background: #eef4f6;
    border-radius: 100px;
    overflow: hidden;
}

.metric-bar-fill {
    height: 100%;
    border-radius: 100px;
    transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.6s ease;
}

.metric-status {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
}

/* === Icon Timeline Row === */
.journey-timeline-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

.timeline-icon-node {
    flex-shrink: 0;
    cursor: pointer;
}

.timeline-icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid rgba(8, 138, 153, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-teal);
    transition: all 0.3s ease;
    box-shadow: 0 6px 18px rgba(8, 138, 153, 0.08);
}

.timeline-icon-circle svg {
    width: 24px;
    height: 24px;
}

.timeline-icon-node:hover .timeline-icon-circle {
    background: var(--color-accent-teal);
    color: #ffffff;
    transform: scale(1.15);
    box-shadow: 0 8px 24px rgba(8, 138, 153, 0.3);
}

.timeline-connector {
    width: 110px;
    height: 32px;
    flex-shrink: 1;
    min-width: 40px;
}

.timeline-connector-end {
    width: 70px;
    min-width: 30px;
}

/* === 4 Phase Cards Grid === */
.journey-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 3.5rem;
}

.journey-card {
    background: #ffffff;
    border: 1.5px solid rgba(2, 38, 57, 0.07);
    border-radius: 24px;
    padding: 1.85rem 1.35rem 1.5rem;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Top accent border bar */
.journey-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent-teal), #2ecc71);
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.journey-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 48px rgba(2, 38, 57, 0.1), 0 4px 16px rgba(8, 138, 153, 0.12);
    border-color: rgba(8, 138, 153, 0.25);
}

.journey-card:hover::before {
    opacity: 1;
}

/* Step watermark number */
.journey-step-num {
    position: absolute;
    top: 0.85rem;
    right: 1.15rem;
    font-family: var(--font-sans);
    font-size: 2.2rem;
    font-weight: 900;
    color: rgba(8, 138, 153, 0.09);
    line-height: 1;
    pointer-events: none;
    transition: color 0.3s ease;
}

.journey-card:hover .journey-step-num {
    color: rgba(8, 138, 153, 0.18);
}

/* Week badge */
.journey-week-badge {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--color-accent-teal);
    background: rgba(8, 138, 153, 0.08);
    border: 1px solid rgba(8, 138, 153, 0.15);
    padding: 0.35rem 0.9rem;
    border-radius: 100px;
    margin-bottom: 1rem;
}

/* Card title */
.journey-card-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-brand-teal);
    line-height: 1.25;
    margin-bottom: 0.65rem;
    text-align: left;
}

/* Card illustration */
.journey-card-img-wrap {
    width: 100%;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.85rem;
    overflow: hidden;
    border-radius: 16px;
    background: #fafcfc;
}

.journey-card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.journey-card:hover .journey-card-img {
    transform: scale(1.08);
}

/* Card description */
.journey-card-desc {
    font-family: var(--font-sans);
    font-size: 0.83rem;
    line-height: 1.55;
    color: var(--color-text-muted);
    text-align: left;
    margin-bottom: 1rem;
    flex-grow: 1;
}

/* Skill Tags Pill Container */
.card-skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: auto;
}

.skill-pill {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 100px;
    background: rgba(8, 138, 153, 0.06);
    color: #088a99;
    border: 1px solid rgba(8, 138, 153, 0.1);
}

/* === Bottom Features Bar === */
.journey-features-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(8, 138, 153, 0.12);
    border-radius: 22px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 12px 36px rgba(2, 38, 57, 0.05);
}

.journey-feature {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-align: left;
    padding: 0.4rem;
    border-radius: 14px;
    transition: transform 0.3s ease;
}

.journey-feature:hover {
    transform: translateY(-2px);
}

.journey-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.journey-feature-icon svg {
    width: 22px;
    height: 22px;
}

/* Individual icon color variations */
.feat-icon-coach {
    background: #e6f6f7;
    color: #088a99;
}

.feat-icon-scenarios {
    background: #e8f0fe;
    color: #3b68b8;
}

.feat-icon-progress {
    background: #eaf5ee;
    color: #3d8f58;
}

.feat-icon-practical {
    background: #fef3e5;
    color: #c97a2b;
}

.journey-feature-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.journey-feature-text strong {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-brand-teal);
    line-height: 1.3;
}

.journey-feature-text span {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    color: var(--color-text-muted);
    line-height: 1.3;
}

/* === Journey Responsive === */
@media (max-width: 992px) {
    .journey-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .journey-features-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    font-family: var(--font-sans);
    font-size: 0.74rem;
    color: var(--color-text-muted);
    line-height: 1.3;
}

/* === Journey Responsive === */
@media (max-width: 992px) {
    .journey-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .journey-features-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .spotlight-content-body {
        grid-template-columns: 1fr;
    }

    .journey-timeline-row {
        display: none;
    }
}

@media (max-width: 600px) {
    .journey-section {
        padding: 4rem 1.25rem 3.5rem;
    }

    .journey-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .journey-features-bar {
        grid-template-columns: 1fr;
        padding: 1.25rem;
    }

    .journey-card {
        padding: 1.5rem 1.25rem 1.35rem;
    }
}

/* ==========================================================================
   GERMANY FOR NURSES PAGE STYLES (Soft, Pure CSS, Image-Free Modern Design)
   ========================================================================== */

/* Header Desktop Navigation Links */
.nav-links-desktop {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-link-item {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-brand-teal);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    position: relative;
    border-radius: 8px;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.nav-link-item:hover {
    color: var(--color-accent-teal);
    background-color: rgba(2, 59, 89, 0.04);
}

.nav-link-item.active-nav-link {
    background-color: transparent;
    color: var(--color-brand-teal);
    font-weight: 700;
    box-shadow: none;
}

.nav-link-item.active-nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 8px;
    right: 8px;
    height: 2.5px;
    background-color: var(--color-brand-teal);
    border-radius: 10px;
}

.nav-flag-icon {
    width: 18px;
    height: 12px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* Germany Hero Section with Watercolor Skyline Background */
.germany-hero {
    position: relative;
    background: url('assets/germany_hero_bg.jpg') no-repeat center top / cover;
    padding-top: 8.5rem;
    padding-bottom: 5.5rem;
    overflow: hidden;
}

.germany-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(253, 248, 242, 0.88) 0%, rgba(255, 253, 249, 0.94) 70%, #F8FAFC 100%);
    backdrop-filter: blur(2px);
    z-index: 1;
}

.germany-hero-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.germany-hero-split-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
}

.germany-hero-left {
    text-align: left;
}

.left-badge {
    justify-content: flex-start;
}

.germany-badge {
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(221, 0, 0, 0.18);
    box-shadow: 0 4px 14px rgba(221, 0, 0, 0.06);
    padding: 0.5rem 1.25rem;
    border-radius: 100px;
}

.red-pulse {
    background-color: #DE2010;
    box-shadow: 0 0 0 0 rgba(222, 32, 16, 0.4);
}

.germany-hero-title {
    font-size: clamp(2rem, 3.8vw, 3.2rem);
    line-height: 1.25;
    margin-bottom: 1.4rem;
    color: var(--color-brand-teal);
    letter-spacing: -0.01em;
}

.stat-highlight-block {
    display: block;
    font-weight: 800;
    margin-bottom: 0.3rem;
}

.germany-hero-lead {
    font-size: 1.08rem;
    color: #334155;
    line-height: 1.65;
    margin-bottom: 1.8rem;
}

.germany-hero-cta-box {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 2rem 0;
}

.left-cta {
    align-items: flex-start;
}

.hero-offer-tag {
    font-size: 0.92rem;
    font-weight: 700;
    color: #92400E;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border: 1px solid #F59E0B;
    padding: 0.4rem 1.15rem;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

/* Glassmorphic Nursing Snapshot Card */
.germany-hero-right {
    display: flex;
    justify-content: center;
}

.nursing-snapshot-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(2, 59, 89, 0.1);
    border-radius: 28px;
    padding: 2.2rem 2rem;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 20px 48px rgba(2, 59, 89, 0.08);
    transition: all var(--transition-normal);
}

.nursing-snapshot-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 60px rgba(2, 59, 89, 0.12);
    border-color: rgba(8, 138, 153, 0.25);
}

.snapshot-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(2, 59, 89, 0.08);
}

.snapshot-icon {
    font-size: 2.2rem;
    background: #FEF3C7;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.snapshot-title {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-brand-teal);
    line-height: 1.25;
}

.snapshot-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.snapshot-stats-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.snapshot-stat-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: #FFFFFF;
    border: 1px solid rgba(2, 59, 89, 0.06);
    padding: 0.85rem 1rem;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.stat-emoji {
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.stat-number {
    display: block;
    font-weight: 800;
    font-size: 0.98rem;
    color: var(--color-brand-teal);
}

.stat-label {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.snapshot-footer-badge {
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-accent-teal);
    background: var(--color-accent-teal-light);
    padding: 0.5rem 1rem;
    border-radius: 100px;
}

.germany-landmark-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2.2rem;
}

.landmark-pill {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-brand-teal);
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(2, 59, 89, 0.08);
    padding: 0.5rem 1.15rem;
    border-radius: 100px;
    box-shadow: 0 4px 12px rgba(2, 59, 89, 0.03);
    transition: all var(--transition-normal);
}

.landmark-pill:hover {
    transform: translateY(-2px);
    background-color: #FFFFFF;
    border-color: rgba(8, 138, 153, 0.25);
    box-shadow: 0 6px 16px rgba(2, 59, 89, 0.06);
}

/* Global Alignment Utility */
.text-center {
    text-align: center !important;
}

/* FOLD 2: The Reality / Premium Stat Cards */
.reality-section {
    background: linear-gradient(180deg, #F8FAFC 0%, #FAF6F0 100%);
    padding: 6rem 1.5rem;
}

.reality-container {
    max-width: 1160px;
    margin: 0 auto;
}

.reality-header-box {
    max-width: 760px;
    margin: 0 auto 3rem;
}

.reality-badge {
    background-color: var(--color-accent-teal-light);
    color: var(--color-accent-teal);
}

.reality-title {
    font-size: clamp(2rem, 3.8vw, 2.6rem);
    color: var(--color-brand-teal);
    margin: 0.85rem 0 0.6rem;
    line-height: 1.25;
}

.reality-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-muted);
}

.stat-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.85rem;
    margin: 2.8rem 0 3rem;
}

.stat-card {
    background: #FFFFFF;
    border: 1.5px solid rgba(2, 59, 89, 0.07);
    border-radius: 24px;
    padding: 2.2rem 1.85rem;
    box-shadow: 0 10px 32px rgba(2, 59, 89, 0.04);
    transition: all var(--transition-normal);
    position: relative;
    display: flex;
    flex-direction: column;
}

.stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(2, 59, 89, 0.1);
}

.stat-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.stat-card-icon-box {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.8);
}

.green-icon-box {
    background-color: #ECFDF5;
}

.amber-icon-box {
    background-color: #FFFBEB;
}

.blue-icon-box {
    background-color: #EEF2FF;
}

.stat-card-badge {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.85rem;
    border-radius: 100px;
}

.green-badge {
    color: #047857;
    background-color: #D1FAE5;
}

.amber-badge {
    color: #B45309;
    background-color: #FEF3C7;
}

.blue-badge {
    color: #4338CA;
    background-color: #E0E7FF;
}

/* Card Specific Accent Borders */
.demand-card:hover {
    border-color: #34D399;
}

.investment-card:hover {
    border-color: #FBBF24;
}

.standards-card:hover {
    border-color: #818CF8;
}

.stat-card-title {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-brand-teal);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.stat-card-desc {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.65;
}

.germany-bottom-banner {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border: 1.5px solid #F59E0B;
    color: var(--color-brand-teal);
    border-radius: 20px;
    padding: 1.6rem 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    box-shadow: 0 10px 28px rgba(245, 158, 11, 0.12);
    margin-top: 2rem;
}

.banner-lightning {
    font-size: 1.8rem;
}

.banner-text {
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 2.6vw, 1.65rem);
    font-weight: 800;
    color: var(--color-brand-teal);
    letter-spacing: 0.01em;
}

/* FOLD 3: The Roadmap - Horizontal Phase Matrix */
.roadmap-section {
    background: linear-gradient(180deg, #FAF6F0 0%, #FFFFFF 100%);
    padding: 6rem 1.5rem;
}

.roadmap-container {
    max-width: 1200px;
    margin: 0 auto;
}

.roadmap-header-box {
    max-width: 800px;
    margin: 0 auto 3.5rem;
}

.roadmap-phase-block {
    margin-bottom: 3.2rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(2, 59, 89, 0.06);
    border-radius: 24px;
    padding: 2rem 2.25rem;
    box-shadow: 0 8px 24px rgba(2, 59, 89, 0.03);
}

.phase-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(2, 59, 89, 0.08);
}

.phase-badge {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.85rem;
    border-radius: 100px;
}

.phase-1-badge {
    background-color: var(--color-accent-teal-light);
    color: var(--color-accent-teal);
}

.phase-2-badge {
    background-color: #FEF3C7;
    color: #B45309;
}

.phase-3-badge {
    background-color: #DCFCE7;
    color: #15803D;
}

.phase-title {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-brand-teal);
}

.roadmap-horizontal-grid {
    display: grid;
    gap: 1.25rem;
}

.cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

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

.roadmap-horizontal-card {
    background: #FFFFFF;
    border: 1.5px solid rgba(2, 59, 89, 0.08);
    border-radius: 18px;
    padding: 1.35rem 1.15rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 14px rgba(2, 59, 89, 0.03);
    transition: all var(--transition-normal);
}

.roadmap-horizontal-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent-teal);
    box-shadow: 0 12px 28px rgba(8, 138, 153, 0.1);
}

.highlight-step-card {
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    border-color: #86EFAC;
}

.success-step-card {
    background: linear-gradient(135deg, #15803D 0%, #166534 100%);
    color: #FFFFFF;
    border-color: #15803D;
    box-shadow: 0 8px 24px rgba(21, 128, 61, 0.2);
}

.success-step-card .step-card-title {
    color: #FFFFFF;
}

.success-step-card .step-card-desc {
    color: rgba(255, 255, 255, 0.9);
}

.card-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.step-badge {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--color-brand-teal);
    background-color: #F1F5F9;
    padding: 0.25rem 0.6rem;
    border-radius: 8px;
}

.green-step-badge {
    background-color: #10B981;
    color: #FFFFFF;
}

.gold-step-badge {
    background-color: #F59E0B;
    color: #FFFFFF;
}

.step-icon-emoji {
    font-size: 1.5rem;
}

.step-card-title {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-brand-teal);
    margin-bottom: 0.4rem;
    line-height: 1.3;
}

.step-card-desc {
    font-size: 0.84rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.roadmap-conclusion-box {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border: 2px dashed #F59E0B;
    border-radius: 24px;
    padding: 2.4rem 2rem;
    text-align: center;
    max-width: 680px;
    margin: 3.2rem auto 0;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.08);
}

.conclusion-lead {
    font-size: 1.1rem;
    color: #92400E;
    margin-bottom: 0.4rem;
    font-weight: 600;
}

.conclusion-highlight {
    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 3.2vw, 1.85rem);
    font-weight: 800;
    color: var(--color-brand-teal);
}

/* FOLD 4: The Gap (Where Nurses Struggle) */
.gap-section {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    padding: 6rem 1.5rem;
}

.gap-container {
    max-width: 1160px;
    margin: 0 auto;
}

.gap-header-box {
    max-width: 760px;
    margin: 0 auto 3.5rem;
}

.gap-badge {
    background-color: #FEE2E2;
    color: #991B1B;
}

.gap-title {
    font-size: clamp(2rem, 3.8vw, 2.6rem);
    color: var(--color-brand-teal);
    margin: 0.85rem 0 0.6rem;
    line-height: 1.25;
}

.gap-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-muted);
}

.struggle-tag {
    font-weight: 800;
    color: #DC2626;
    background-color: #FEE2E2;
    padding: 0.2rem 0.65rem;
    border-radius: 8px;
}

.struggle-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.85rem;
    margin-bottom: 3.2rem;
}

.struggle-card {
    background: #FFFFFF;
    border: 1.5px solid rgba(220, 38, 38, 0.1);
    border-top: 3.5px solid #EF4444;
    border-radius: 20px;
    padding: 2.2rem 1.85rem;
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.03);
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
}

.struggle-card.apple-slide-card {
    flex: 0 0 calc(33.333% - 1rem);
    min-width: 310px;
    scroll-snap-align: start;
}

.struggle-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(220, 38, 38, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
}

.struggle-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.struggle-icon-box {
    width: 46px;
    height: 46px;
    background-color: #FEE2E2;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.struggle-num {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #DC2626;
    background-color: #FEF2F2;
    padding: 0.3rem 0.75rem;
    border-radius: 100px;
    border: 1px solid #FECACA;
}

.struggle-card-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-brand-teal);
    margin-bottom: 0.65rem;
    line-height: 1.3;
}

.struggle-card-desc {
    font-size: 0.93rem;
    color: #475569;
    line-height: 1.6;
}

.gap-warning-banner {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    border: 1.5px solid #FCA5A5;
    border-radius: 20px;
    padding: 1.5rem 2.25rem;
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.06);
}

.warning-icon {
    font-size: 1.6rem;
}

.warning-text {
    font-weight: 700;
    color: #991B1B;
    font-size: 1.05rem;
}

/* FOLD 5: The Solution (Meet Voluble) */
.solution-section {
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
    padding: 6rem 1.5rem;
}

.solution-container {
    max-width: 1180px;
    margin: 0 auto;
}

.solution-header-box {
    max-width: 800px;
    margin: 0 auto 2rem;
    text-align: center;
}

.solution-badge {
    background-color: var(--color-accent-teal-light);
    color: var(--color-accent-teal);
}

.solution-title {
    font-size: clamp(2.2rem, 4vw, 2.8rem);
    color: var(--color-brand-teal);
    margin: 0.85rem 0 0.75rem;
}

.solution-tagline-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    border: 1px solid #C7D2FE;
    color: #3730A3;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 0.5rem 1.35rem;
    border-radius: 100px;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08);
}

.solution-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.85rem;
    margin-bottom: 3.8rem;
}

.solution-card {
    background-color: #FFFFFF;
    border: 1.5px solid rgba(2, 59, 89, 0.08);
    border-radius: 22px;
    padding: 2.2rem 1.85rem;
    transition: all var(--transition-normal);
    box-shadow: 0 6px 20px rgba(2, 59, 89, 0.03);
    display: flex;
    flex-direction: column;
}

.solution-card.apple-slide-card {
    flex: 0 0 calc(33.333% - 1rem);
    min-width: 310px;
    scroll-snap-align: start;
}

.solution-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(8, 138, 153, 0.12);
    border-color: var(--color-accent-teal);
}

.solution-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.35rem;
}

.solution-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Color Accent Icon Boxes */
.icon-teal {
    background-color: #E0F2FE;
}

.icon-amber {
    background-color: #FEF3C7;
}

.icon-indigo {
    background-color: #EEF2FF;
}

.icon-rose {
    background-color: #FFE4E6;
}

.icon-purple {
    background-color: #F3E8FF;
}

.icon-emerald {
    background-color: #D1FAE5;
}

.solution-module-tag {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--color-brand-teal);
    background-color: #F1F5F9;
    padding: 0.35rem 0.75rem;
    border-radius: 100px;
    border: 1px solid #E2E8F0;
}

.solution-card-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-brand-teal);
    margin-bottom: 0.65rem;
    line-height: 1.3;
}

.solution-card-desc {
    font-size: 0.93rem;
    color: #475569;
    line-height: 1.6;
}

.solution-summary-pills {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.1rem;
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1.5px solid rgba(8, 138, 153, 0.25);
    border-radius: 100px;
    padding: 1.15rem 2.5rem;
    max-width: 680px;
    margin: 0 auto;
    box-shadow: 0 10px 28px rgba(8, 138, 153, 0.08);
}

.pill-item {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-brand-teal);
}

.pill-item.highlight-pill {
    color: var(--color-accent-teal);
}

.pill-dot {
    color: var(--color-accent-teal);
    font-size: 1.25rem;
}



/* Germany Page — Waitlist background override to match other fold tones */
body.germany-page .waitlist-section {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAF6F0 100%);
}

/* =========================================
   GERMANY PAGE — ILLUSTRATION ELEMENTS
   ========================================= */

/* Journey Path Divider Strip (between Fold 2 and Fold 3) */
.illus-divider-strip {
    position: relative;
    width: 100%;
    max-height: 340px;
    overflow: hidden;
    line-height: 0;
}

.illus-strip-img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    filter: brightness(0.97);
}

.illus-strip-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.1) 60%, transparent 100%);
    display: flex;
    align-items: center;
    padding: 2rem 5%;
}

.illus-strip-text {
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    font-weight: 500;
    font-style: italic;
    color: #3D3025;
    max-width: 480px;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

/* Gap Fold — Side-by-side header + illustration */
.gap-header-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
}

.gap-header-split .gap-header-box {
    margin-bottom: 0;
}

.gap-header-illus {
    display: flex;
    justify-content: center;
}

.gap-illus-img {
    width: 100%;
    max-width: 460px;
    border-radius: 20px;
    object-fit: cover;
    aspect-ratio: 4/3;
    box-shadow: 0 12px 40px rgba(0,0,0,0.10);
    transition: transform 0.4s ease;
}

.gap-illus-img:hover {
    transform: scale(1.02);
}

/* Solution Fold — Success illustration + caption */
.solution-success-illus {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    margin-top: 3rem;
    padding: 2rem 2.5rem;
    background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%);
    border-radius: 20px;
    border: 1.5px solid #D1FAE5;
}

.solution-illus-img {
    width: 200px;
    height: 200px;
    border-radius: 16px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}

.solution-illus-caption {
    flex: 1;
}

.illus-caption-text {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    font-style: italic;
    color: #1E3A2F;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.illus-caption-tag {
    display: inline-block;
    background: #D1FAE5;
    color: #065F46;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.35rem 0.9rem;
    border-radius: 20px;
    letter-spacing: 0.02em;
}



/* RESPONSIVE DESIGN FOR GERMANY PAGE */
@media (max-width: 992px) {
    .germany-hero-split-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .germany-hero-left {
        text-align: center;
    }

    .left-badge {
        justify-content: center;
    }

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

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

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

    .checklist-item.full-width-check {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .nav-links-desktop {
        display: none;
    }

    .germany-hero {
        padding-top: 6.5rem;
        padding-bottom: 3.5rem;
    }

    .germany-hero-container {
        padding: 0 1rem;
    }

    .germany-hero-split-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .germany-hero-left {
        text-align: center;
    }

    .left-badge {
        justify-content: center;
        width: 100%;
    }

    .germany-badge {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0.4rem 0.85rem;
        max-width: 100%;
        gap: 0.35rem;
    }

    .badge-text {
        font-size: 0.78rem;
    }

    .germany-hero-title {
        font-size: clamp(1.6rem, 5.8vw, 2.1rem);
        line-height: 1.3;
        margin-bottom: 1.2rem;
    }

    .stat-highlight-block {
        margin-bottom: 0.2rem;
    }

    .germany-hero-lead {
        font-size: 0.95rem;
        line-height: 1.55;
        margin-bottom: 1.5rem;
    }

    .left-cta {
        align-items: center;
        width: 100%;
    }

    .hero-cta-btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }

    .hero-offer-tag {
        font-size: 0.85rem;
        padding: 0.35rem 0.85rem;
    }

    .nursing-snapshot-card {
        padding: 1.5rem 1.25rem;
        border-radius: 20px;
        max-width: 100%;
    }

    .snapshot-header {
        gap: 0.75rem;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    .snapshot-icon {
        width: 44px;
        height: 44px;
        font-size: 1.8rem;
        border-radius: 12px;
    }

    .snapshot-title {
        font-size: 1.1rem;
    }

    .snapshot-stat-item {
        padding: 0.75rem 0.85rem;
    }

    .stat-number {
        font-size: 0.92rem;
    }

    .stat-label {
        font-size: 0.78rem;
    }

    .germany-landmark-bar {
        gap: 0.5rem;
        margin-top: 1.5rem;
    }

    .landmark-pill {
        font-size: 0.78rem;
        padding: 0.4rem 0.85rem;
    }

    .stat-cards-grid,
    .solution-cards-grid,
    .struggle-cards-grid {
        grid-template-columns: 1fr;
    }

    .cols-5,
    .cols-4,
    .cols-2 {
        grid-template-columns: 1fr;
    }

    .roadmap-phase-block {
        padding: 1.5rem 1.15rem;
        border-radius: 20px;
    }

    .phase-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .checklist-card-container {
        padding: 1.5rem 1.15rem;
    }

    .solution-summary-pills {
        border-radius: 24px;
        padding: 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .pill-dot {
        display: none;
    }
}

/* Illustration responsive rules */
@media (max-width: 900px) {
    .gap-header-split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .gap-header-illus {
        order: -1;
    }

    .gap-illus-img {
        max-width: 100%;
        aspect-ratio: 16/9;
    }

    .solution-success-illus {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .solution-illus-img {
        width: 140px;
        height: 140px;
    }
}

@media (max-width: 600px) {
    .illus-divider-strip {
        max-height: 220px;
    }

    .illus-strip-img {
        height: 220px;
    }

    .illus-strip-overlay {
@media (max-width: 768px) {
    .nav-links-desktop {
        display: none;
    }

    .germany-hero {
        padding-top: 6.5rem;
        padding-bottom: 3.5rem;
    }

    .germany-hero-container {
        padding: 0 1rem;
    }

    .germany-hero-split-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .germany-hero-left {
        text-align: center;
    }

    .left-badge {
        justify-content: center;
        width: 100%;
    }

    .germany-badge {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0.4rem 0.85rem;
        max-width: 100%;
        gap: 0.35rem;
    }

    .badge-text {
        font-size: 0.78rem;
    }

    .germany-hero-title {
        font-size: clamp(1.6rem, 5.8vw, 2.1rem);
        line-height: 1.3;
        margin-bottom: 1.2rem;
    }

    .stat-highlight-block {
        margin-bottom: 0.2rem;
    }

    .germany-hero-lead {
        font-size: 0.95rem;
        line-height: 1.55;
        margin-bottom: 1.5rem;
    }

    .left-cta {
        align-items: center;
        width: 100%;
    }

    .hero-cta-btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }

    .hero-offer-tag {
        font-size: 0.85rem;
        padding: 0.35rem 0.85rem;
    }

    .nursing-snapshot-card {
        padding: 1.5rem 1.25rem;
        border-radius: 20px;
        max-width: 100%;
    }

    .snapshot-header {
        gap: 0.75rem;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    .snapshot-icon {
        width: 44px;
        height: 44px;
        font-size: 1.8rem;
        border-radius: 12px;
    }

    .snapshot-title {
        font-size: 1.1rem;
    }

    .snapshot-stat-item {
        padding: 0.75rem 0.85rem;
    }

    .stat-number {
        font-size: 0.92rem;
    }

    .stat-label {
        font-size: 0.78rem;
    }

    .germany-landmark-bar {
        gap: 0.5rem;
        margin-top: 1.5rem;
    }

    .landmark-pill {
        font-size: 0.78rem;
        padding: 0.4rem 0.85rem;
    }

    .stat-cards-grid,
    .solution-cards-grid,
    .struggle-cards-grid {
        grid-template-columns: 1fr;
    }

    .cols-5,
    .cols-4,
    .cols-2 {
        grid-template-columns: 1fr;
    }

    .roadmap-phase-block {
        padding: 1.5rem 1.15rem;
        border-radius: 20px;
    }

    .phase-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .checklist-card-container {
        padding: 1.5rem 1.15rem;
    }

    .solution-summary-pills {
        border-radius: 24px;
        padding: 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .pill-dot {
        display: none;
    }
}

/* Illustration responsive rules */
@media (max-width: 900px) {
    .gap-header-split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .gap-header-illus {
        order: -1;
    }

    .gap-illus-img {
        max-width: 100%;
        aspect-ratio: 16/9;
    }

    .solution-success-illus {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .solution-illus-img {
        width: 140px;
        height: 140px;
    }
}

@media (max-width: 600px) {
    .illus-divider-strip {
        max-height: 220px;
    }

    .illus-strip-img {
        height: 220px;
    }

    .illus-strip-overlay {
        background: linear-gradient(to bottom, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.3) 80%, transparent 100%);
        align-items: flex-start;
        padding: 1.25rem 1rem;
    }

    .illus-strip-text {
        font-size: 1rem;
        max-width: 90%;
    }
}

/* ============================================================
   UNIFIED FONT SYSTEM FOR GERMANY NURSES & STUDENTS PAGES
   Enforces Plus Jakarta Sans across the entire Nurse & Student pages
   ============================================================ */
body.germany-page,
body.germany-page *,
body.germany-page .serif-title,
body.germany-page h1,
body.germany-page h2,
body.germany-page h3,
body.germany-page h4,
body.germany-page h5,
body.germany-page h6,
body.germany-page .conclusion-highlight,
body.germany-page .banner-text,
body.germany-page .waitlist-title,
body.germany-students-page,
body.germany-students-page *,
body.germany-students-page .serif-title,
body.germany-students-page h1,
body.germany-students-page h2,
body.germany-students-page h3,
body.germany-students-page h4,
body.germany-students-page h5,
body.germany-students-page h6,
body.germany-students-page .std-hero-headline,
body.germany-students-page .std-fomo-title,
body.germany-students-page .std-banner-title,
body.germany-students-page .conclusion-highlight,
body.germany-students-page .std-after-title,
body.germany-students-page .std-waitlist-title {
    font-family: var(--font-sans), 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}