/* =========================================================
   TOKENS — LIGHT PREMIUM THEME
   ========================================================= */
:root {
    --paper-0: #FFFFFF;
    --paper-50: #F7F8FB;
    --paper-100: #EEF1F6;
    --paper-300: #D7DEE9;

    --ink-900: #10182A;
    --ink-700: #33405B;
    --ink-500: #6B7690;

    --navy-700: #0E1F3D;
    --navy-600: #16335F;
    --navy-500: #1E4278;

    --gold-300: #E9B94E;
    --gold-500: #C9952F;
    --gold-700: #A9752A;

    --success: #1F9D6B;

    --font-display: "Oswald", "Arial Narrow", sans-serif;
    --font-body: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;

    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 10px;

    --glass-bg: rgba(255, 255, 255, 0.78);
    --glass-border: rgba(16, 24, 42, 0.09);
    --shadow-lift: 0 20px 50px rgba(16, 24, 42, 0.10);
    --shadow-soft: 0 8px 24px rgba(16, 24, 42, 0.06);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper-50);
    color: var(--ink-900);
    font-family: var(--font-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

h1,
h2,
h3 {
    font-family: var(--font-display);
}

button {
    font-family: inherit;
    cursor: pointer;
}

/* =========================================================
   TOP MARQUEE BAR
   ========================================================= */
.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.15em;
    flex-shrink: 0;
}

.top-bar {
    background: linear-gradient(90deg, var(--navy-700), var(--navy-600));
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: stretch;
    box-shadow: 0 4px 18px rgba(10, 17, 40, 0.18);
}

.top-bar__marquee {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}

.top-bar__track {
    display: flex;
    white-space: nowrap;
    width: max-content;
    animation: marqueeScroll 26s linear infinite;
    padding: 10px 0;
}

.top-bar__track span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--paper-50);
    letter-spacing: 0.01em;
    padding: 0 28px;
    position: relative;
}

.top-bar__track span .icon {
    color: var(--gold-300);
    font-size: 14px;
}

.top-bar__track span::after {
    content: "•";
    position: absolute;
    right: 0;
    color: var(--gold-300);
}

@keyframes marqueeScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.top-bar__timer {
    flex-shrink: 0;
    font-family: var(--font-mono);
    color: var(--navy-700);
    font-weight: 700;
    font-size: 13px;
    background: var(--gold-300);
    display: flex;
    align-items: center;
    padding: 0 16px;
    letter-spacing: 0.04em;
}

/* =========================================================
   HERO — MINIMAL / CINEMATIC
   ========================================================= */
.hero {
    position: relative;
    min-height: 82svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px 60px;
    overflow: hidden;
    isolation: isolate;
    background: var(--paper-0);
    text-align: center;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -3;
}

.hero-bg__photo {
    position: absolute;
    inset: 0;
    background-image: url('https://www.legalwiz.in/wp-content/uploads/How-to-start-import-export-business-in-india-800x430.jpg');
    background-size: cover;
    background-position: center 35%;
    filter: grayscale(30%) contrast(1.05) brightness(1.02);
    opacity: 0.32;
}

.hero-bg__scrim {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 55% at 50% 38%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.7) 45%, rgba(255, 255, 255, 0.35) 72%, rgba(255, 255, 255, 0.12) 100%);
}

.hero-bg__gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(55% 55% at 50% 0%, rgba(233, 185, 78, 0.16), transparent 62%),
        radial-gradient(60% 50% at 50% 100%, rgba(30, 66, 120, 0.10), transparent 65%);
}

.hero-bg__worldmap {
    position: absolute;
    inset: 0;
    opacity: 0.6;
    background-image: radial-gradient(rgba(51, 64, 91, 0.10) 1px, transparent 1.4px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(55% 60% at 50% 40%, black 35%, transparent 78%);
    mask-image: radial-gradient(55% 60% at 50% 40%, black 35%, transparent 78%);
    animation: mapGlow 9s ease-in-out infinite;
}

@keyframes mapGlow {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.7;
    }
}

.trade-route {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0.85;
}

.trade-route__path {
    fill: none;
    stroke: rgba(201, 149, 47, 0.4);
    stroke-width: 1.4;
    stroke-dasharray: 6 8;
    animation: dashMove 6s linear infinite;
}

.trade-route__path--alt {
    stroke: rgba(30, 66, 120, 0.22);
    animation-duration: 8s;
    animation-direction: reverse;
}

@keyframes dashMove {
    to {
        stroke-dashoffset: -140;
    }
}

.trade-route__port {
    fill: var(--gold-500);
    opacity: 0.85;
}

.trade-route__ship {
    offset-path: path('M 120 460 Q 400 260 660 320 T 1080 150');
    animation: shipMove 14s linear infinite;
}

.trade-route__plane {
    offset-path: path('M 180 500 Q 480 560 780 460 T 1100 400');
    animation: planeMove 11s linear infinite;
}

@keyframes shipMove {
    from {
        offset-distance: 0%;
    }

    to {
        offset-distance: 100%;
    }
}

@keyframes planeMove {
    from {
        offset-distance: 0%;
    }

    to {
        offset-distance: 100%;
    }
}

.silhouette {
    position: absolute;
    z-index: -1;
    color: var(--navy-500);
    pointer-events: none;
}

.silhouette--cargoship {
    width: 340px;
    bottom: 2%;
    left: -40px;
    opacity: 0.08;
}

/* =========================================================
   HERO CONTENT
   ========================================================= */
.hero__container {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 14.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-700);
    background: rgba(201, 149, 47, 0.08);
    border: 1px solid rgba(201, 149, 47, 0.3);
    padding: 7px 14px;
    border-radius: 999px;
    margin-bottom: 26px;
}

.eyebrow__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 0 rgba(31, 157, 107, 0.5);
    animation: pulseDot 1.8s infinite;
}

@keyframes pulseDot {
    0% {
        box-shadow: 0 0 0 0 rgba(31, 157, 107, 0.5);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(31, 157, 107, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(31, 157, 107, 0);
    }
}

.headline {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.9rem, 4.6vw, 3.4rem);
    line-height: 1.18;
    letter-spacing: -0.005em;
    margin: 0 0 18px;
    color: var(--ink-900);
    max-width: 16ch;
}

.headline--gold {
    background: linear-gradient(95deg, var(--gold-500), var(--gold-700));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.subheadline {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #000;
    max-width: 460px;
    margin: 0 0 24px;
}

.hero-illustration {
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: 0 auto 28px;
    display: block;
}

.btn {
    font-family: var(--font-body);
    border-radius: 999px;
    font-weight: 600;
    font-size: 15.5px;
    padding: 17px 32px;
    border: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn--primary {
    background: linear-gradient(100deg, var(--gold-300), var(--gold-700));
    color: #2B1B03;
    box-shadow: 0 12px 26px rgba(201, 149, 47, 0.35);
}

.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(201, 149, 47, 0.45);
}

.btn--block {
    width: 100%;
}

.btn__arrow {
    transition: transform 0.25s ease;
}

.btn--primary:hover .btn__arrow {
    transform: translateX(4px);
}

.scroll-cue {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
    animation: bobCue 2s ease-in-out infinite;
}

.scroll-cue svg {
    color: var(--gold-700);
}

@keyframes bobCue {

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

    50% {
        transform: translateY(5px);
    }
}

/* =========================================================
   MANIFEST SECTION — signature element
   ========================================================= */
.manifest {
    padding: 50px 24px 80px;
    background: linear-gradient(#f9f6ef 0, #f5e9d3 100%);
}

.manifest__container {
    max-width: 980px;
    margin: 0 auto;
}

.manifest__card {
    display: grid;
    grid-template-columns: 1.4fr auto 1fr;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lift);
    overflow: visible;
    position: relative;
}

.manifest__label {
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-700);
    margin-bottom: 20px;
}

.manifest__main {
    padding: 34px 32px;
    position: relative;
}

.manifest__trainer {
    align-items: center;
    gap: 20px;
    margin-bottom: 8px;
}

.manifest__photo {
    flex-shrink: 0;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(var(--gold-300), var(--navy-500), var(--gold-300));
}

.manifest__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--paper-0);
    display: block;
}

.manifest__photo-fallback {
    display: none;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid var(--paper-0);
    background: linear-gradient(150deg, var(--navy-600), var(--navy-700));
    align-items: center;
    justify-content: center;
}

.manifest__photo-fallback span {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 26px;
    color: var(--gold-300);
}

.manifest__trainer-info {
    margin-top: 10px;
}

.manifest__trainer-info h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--ink-900);
}

.manifest__trainer-info p {
    font-size: 13px;
    color: var(--ink-700);
    margin: 0 0 10px;
}

.manifest__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.manifest__tags span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-900);
    background: var(--paper-100);
    border: 1px solid var(--paper-300);
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
}

.manifest__tags .icon {
    color: var(--gold-700);
    font-size: 12px;
}

.manifest__seal {
    position: absolute;
    right: 28px;
    bottom: 20px;
    width: 96px;
    height: 96px;
    color: var(--gold-700);
    opacity: 0.85;
    animation: sealSpin 24s linear infinite;
}

@keyframes sealSpin {
    to {
        transform: rotate(360deg);
    }
}

.manifest__seal text {
    font-family: var(--font-mono);
}

/* perforation divider */
.manifest__perforation {
    position: relative;
    width: 1px;
    background-image: repeating-linear-gradient(to bottom, var(--paper-300) 0 8px, transparent 8px 16px);
    margin: 20px 0;
}

.manifest__notch {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--paper-50);
    border: 1px solid var(--glass-border);
}

.manifest__notch--top {
    top: -11px;
}

.manifest__notch--bottom {
    bottom: -11px;
}

.manifest__stub {
    padding: 34px 32px;
    display: flex;
    flex-direction: column;
    background: var(--paper-50);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.manifest__label--stub {
    margin-bottom: 16px;
}

.manifest__row {
    display: flex;
    justify-content: space-between;
    font-size: 13.5px;
    color: var(--ink-700);
    padding: 9px 0;
    border-bottom: 1px dashed var(--paper-300);
}

.manifest__row strong {
    color: var(--ink-900);
    font-weight: 600;
}

.manifest__row--fee {
    border-bottom: none;
}

.manifest__row--fee strong {
    color: var(--gold-700);
    font-size: 16px;
}

.manifest__seats {
    margin: 16px 0 18px;
}

.manifest__seats-top {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--ink-500);
    margin-bottom: 6px;
}

.manifest__seats-pct {
    color: var(--gold-700);
    font-weight: 600;
}

.manifest__seats-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--paper-300);
    overflow: hidden;
}

.manifest__seats-fill {
    height: 100%;
    width: 87%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold-500), var(--gold-700));
    animation: seatsFill 1.6s ease-out;
}

@keyframes seatsFill {
    from {
        width: 0%;
    }
}

.manifest__timer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #142d55;
    border: 1px solid var(--paper-300);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: 18px;
}

.manifest__timer-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
}

.manifest__timer-nums {
    display: flex;
    gap: 10px;
}

.manifest__timer-nums div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.manifest__timer-nums span {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    color: #ff9700;
    line-height: 1;
}

.manifest__timer-nums small {
    font-size: 10.5px;
    font-weight: 300;
    color: #ffffff;
    text-transform: uppercase;
    margin-top: 2px;
}

/* =========================================================
   STATS TICKER
   ========================================================= */
.ticker {
    background: var(--navy-700);
    overflow: hidden;
    padding: 22px 0;
}

.ticker__track {
    display: flex;
    width: max-content;
    animation: tickerScroll 22s linear infinite;
}

.ticker__item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 0 40px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    white-space: nowrap;
}

.ticker__item strong {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    color: var(--gold-300);
}

.ticker__item span {
    font-size: 12.5px;
    color: var(--paper-100);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@keyframes tickerScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* =========================================================
   PROOF STRIP — trust + social + payments
   ========================================================= */
.proof-strip {
    background: var(--paper-0);
    padding: 44px 24px;
    border-bottom: 1px solid var(--paper-100);
}

.proof-strip__container {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
}

.proof-strip__divider {
    width: 60px;
    height: 1px;
    background: var(--paper-300);
}

.trust-bar {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
    padding: 0;
    margin: 0;
    font-size: 14.5px;
    color: var(--ink-700);
}

.trust-bar li {
    display: flex;
    align-items: center;
    gap: 7px;
}

.trust-bar__icon {
    color: var(--success);
    font-size: 16px;
}

.social-proof {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.social-proof__stars {
    display: flex;
    gap: 3px;
    color: var(--gold-500);
    font-size: 16px;
}

.social-proof__text {
    font-size: 13px;
    color: var(--ink-700);
}

.social-proof__text strong {
    color: var(--ink-900);
}

.pay-logos {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pay-logos__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-500);
    margin-bottom: 10px;
}

.pay-logos__label .icon {
    color: var(--success);
    font-size: 13px;
}

.pay-logos__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.pay-chip {
    font-family: var(--font-mono);
    font-size: 12px;
    color: #000000;
    border: 1px solid var(--paper-300);
    padding: 7px 13px;
    border-radius: 8px;
    background: #e9b94e;
}

.microcopy {
    font-size: 13px;
    color: var(--gold-700);
    margin: 4px 0 0;
    font-weight: 600;
}

/* =========================================================
   SECTION — WHAT YOU'LL LEARN
   ========================================================= */
.learn {
    background: var(--paper-50);
    padding: 90px 24px;
}

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

.learn__head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 56px;
}

.learn__eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-700);
    background: rgba(201, 149, 47, 0.08);
    border: 1px solid rgba(201, 149, 47, 0.3);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.learn__title {
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink-900);
    margin: 0 0 16px;
}

.learn__subtitle {
    font-size: 14.5px;
    color: #000000;
    line-height: 1.7;
    margin: 0;
}

.learn__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.learn__card {
    background: var(--paper-0);
    border: 1px solid var(--paper-100);
    border-radius: var(--radius-md);
    padding: 30px 26px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.learn__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
    border-color: rgba(201, 149, 47, 0.35);
}

.learn__icon {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--gold-700);
    border: 1.5px solid var(--gold-300);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.learn__card h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink-900);
    margin: 0 0 10px;
    line-height: 1.35;
}

.learn__card p {
    font-size: 14px;
    color: var(--ink-700);
    line-height: 1.65;
    margin: 0;
}

.learn__cta {
    text-align: center;
}

.learn__cta .microcopy {
    margin-top: 12px;
}

/* =========================================================
   STICKY MOBILE CTA
   ========================================================= */
.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--paper-300);
    box-shadow: 0 -8px 24px rgba(16, 24, 42, 0.08);
}

.sticky-cta__info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.sticky-cta__price {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--gold-700);
    font-weight: 600;
}

.sticky-cta__label {
    font-size: 11px;
    color: var(--ink-700);
}

.btn--sticky {
    padding: 13px 20px;
    font-size: 14px;
    white-space: nowrap;
}

/* =========================================================
   WHATSAPP FLOAT
   ========================================================= */
.whatsapp-float {
    position: fixed;
    right: 20px;
    bottom: 90px;
    z-index: 50;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(37, 211, 102, 0.4);
    animation: waFloat 3s ease-in-out infinite;
}

@keyframes waFloat {

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

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

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 860px) {
    .manifest__card {
        grid-template-columns: 1fr;
    }

    .manifest__perforation {
        width: auto;
        height: 1px;
        background-image: repeating-linear-gradient(to right, var(--paper-300) 0 8px, transparent 8px 16px);
        margin: 0 20px;
    }

    .manifest__notch {
        top: 50%;
        left: auto;
        transform: translateY(-50%);
    }

    .manifest__notch--top {
        left: -11px;
    }

    .manifest__notch--bottom {
        right: -11px;
        left: auto;
    }

    .manifest__stub {
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }

    .manifest__seal {
        position: static;
        margin: 18px auto 0;
    }

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

@media (max-width: 640px) {
    .hero {
        padding: 56px 18px 44px;
    }

    .top-bar__track span {
        font-size: 12px;
        padding: 0 20px;
    }

    .top-bar__timer {
        font-size: 12px;
        padding: 0 12px;
    }

    .headline {
        font-size: 1.75rem;
        max-width: 100%;
    }

    .subheadline {
        font-size: 15px;
    }

    .manifest {
        padding: 30px 16px 50px;
    }

    .manifest__main,
    .manifest__stub {
        padding: 26px 22px;
    }

    .sticky-cta {
        display: flex;
    }

    .silhouette--cargoship {
        width: 220px;
    }

    .trust-bar {
        font-size: 12.5px;
    }

    .learn {
        padding: 60px 18px;
    }

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

    .ticker__item {
        padding: 0 26px;
    }

    .ticker__item strong {
        font-size: 22px;
    }
}


.learn__image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 18px;
}

/* =========================================================
   SECTION 2 — SHARED HEAD + REVEAL UTILITY + HELPERS
   ========================================================= */
.text-gold {
    background: linear-gradient(95deg, var(--gold-500), var(--gold-700));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 52px;
}

.section-head__eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-700);
    background: rgba(201, 149, 47, 0.08);
    border: 1px solid rgba(201, 149, 47, 0.3);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.section-head__title {
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 600;
    line-height: 1.28;
    color: var(--ink-900);
    margin: 0 0 16px;
}

.section-head__subtitle {
    font-size: 15px;
    color: var(--ink-700);
    line-height: 1.7;
    margin: 0;
}

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   SECTION 2.1 — THE BIG PROBLEM
   ========================================================= */
.problem {
    background: var(--paper-0);
    padding: 90px 24px;
}

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

.problem__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin-bottom: 48px;
}

.problem__card {
    background: var(--paper-50);
    border: 1px solid var(--paper-100);
    border-radius: var(--radius-md);
    padding: 26px 20px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.problem__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft);
    border-color: rgba(201, 149, 47, 0.3);
}

.problem__icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(201, 149, 47, 0.1);
    color: var(--gold-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-bottom: 16px;
}

.problem__card h3 {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-900);
    margin: 0 0 8px;
    line-height: 1.35;
}

.problem__card p {
    font-size: 12.5px;
    color: var(--ink-700);
    line-height: 1.6;
    margin: 0;
}

.problem__closer {
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    font-weight: 500;
    color: var(--ink-900);
    line-height: 1.5;
    max-width: 640px;
    margin: 0 auto;
}

/* =========================================================
   SECTION 2.2 — IMAGINE YOUR FUTURE
   ========================================================= */
.dream {
    background: linear-gradient(#f9f6ef 0, #f5e9d3 100%);
    padding: 90px 24px;
}

.dream__container {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 60px;
    align-items: center;
}

.dream__copy .section-head__eyebrow,
.dream__copy .section-head__title {
    text-align: left;
}

.dream__copy .section-head__title {
    max-width: 20ch;
    margin-bottom: 26px;
}

.dream__list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dream__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--ink-700);
    background: var(--paper-0);
    border: 1px solid var(--paper-100);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
}

.dream__list .icon {
    color: var(--gold-700);
    font-size: 18px;
    flex-shrink: 0;
}

.dream__closer {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 500;
    color: var(--ink-900);
    line-height: 1.5;
    margin: 0;
}

.dream__illustration {
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* =========================================================
   SECTION 2.3 — GLOBAL OPPORTUNITY
   ========================================================= */
.opportunity {
    background: var(--paper-0);
    padding: 90px 24px;
}

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

.opportunity__map {
    position: relative;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    aspect-ratio: 1000 / 460;
    border-radius: var(--radius-lg);
    background: var(--paper-50);
    border: 1px solid var(--paper-100);
    overflow: hidden;
}

.opportunity__dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(51, 64, 91, 0.14) 1.4px, transparent 1.8px);
    background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, black 45%, transparent 85%);
    mask-image: radial-gradient(60% 70% at 50% 50%, black 45%, transparent 85%);
}

.opportunity__routes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.opportunity__line {
    fill: none;
    stroke: rgba(201, 149, 47, 0.45);
    stroke-width: 1.4;
    stroke-dasharray: 5 7;
    animation: dashMove 5s linear infinite;
}

.opportunity__origin {
    fill: var(--gold-700);
}

.opportunity__origin-label {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--navy-700);
    background: var(--paper-0);
    border: 1px solid var(--gold-300);
    padding: 3px 9px;
    border-radius: 999px;
}

.opportunity__pin {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.opportunity__pin-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold-500);
    box-shadow: 0 0 0 0 rgba(201, 149, 47, 0.6);
    animation: pinPulse 2.2s infinite;
}

@keyframes pinPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(201, 149, 47, 0.55);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(201, 149, 47, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(201, 149, 47, 0);
    }
}

.opportunity__pin-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-900);
    background: var(--paper-0);
    border: 1px solid var(--paper-300);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

/* =========================================================
   SECTION 2.4 — WHY THIS MASTERCLASS
   ========================================================= */
.why-us {
    background: linear-gradient(#f9f6ef 0, #f5e9d3 100%);
    padding: 90px 24px;
}

.why-us__container {
    max-width: 1180px;
    margin: 0 auto;
}

.why-us__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.why-us__card {
    background: var(--paper-0);
    border: 1px solid var(--paper-100);
    border-radius: var(--radius-md);
    padding: 28px 22px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.why-us__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
    border-color: rgba(201, 149, 47, 0.35);
}

.why-us__card .icon {
    width: 34px;
    height: 34px;
    color: var(--gold-700);
    margin-bottom: 14px;
}

.why-us__card h3 {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-900);
    margin: 0 0 8px;
    line-height: 1.35;
}

.why-us__card p {
    font-size: 12.5px;
    color: var(--ink-700);
    line-height: 1.6;
    margin: 0;
}

/* =========================================================
   SECTION 2.5 — SUCCESS ROADMAP
   ========================================================= */
.roadmap {
    background: var(--paper-0);
    padding: 90px 24px;
}

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

.roadmap__track {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 1080px;
    margin: 0 auto;
}

.roadmap__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 108px;
    text-align: center;
}

.roadmap__num {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-300), var(--gold-700));
    color: #2B1B03;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(201, 149, 47, 0.3);
}

.roadmap__step p {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-700);
    line-height: 1.4;
    margin: 0;
}

.roadmap__arrow {
    color: var(--paper-300);
    font-size: 20px;
    flex-shrink: 0;
}

/* =========================================================
   SECTION 2.6 — LEARNING OUTCOME
   ========================================================= */
.outcome {
    background: linear-gradient(#f9f6ef 0, #f5e9d3 100%);
    padding: 90px 24px;
}

.outcome__container {
    max-width: 980px;
    margin: 0 auto;
}

.outcome__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.outcome__card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--paper-50);
    border: 1px solid var(--paper-100);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink-900);
}

.outcome__card .icon {
    color: var(--success);
    font-size: 18px;
    flex-shrink: 0;
}

/* =========================================================
   SECTION 2.7 — CTA BANNER
   ========================================================= */
.cta-banner {
    background: linear-gradient(135deg, var(--navy-700), var(--navy-600) 60%, #0A1830);
    padding: 100px 24px;
    text-align: center;
}

.cta-banner__container {
    max-width: 720px;
    margin: 0 auto;
}

.cta-banner__title {
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    font-weight: 600;
    line-height: 1.3;
    color: #F3F6FB;
    margin: 0 0 18px;
}

.cta-banner__subtitle {
    font-size: 15.5px;
    color: #fff;
    line-height: 1.7;
    max-width: 520px;
    margin: 0 auto 36px;
}

.cta-banner__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

.btn--whatsapp {
    background: #25D366;
    color: #fff;
    box-shadow: 0 12px 26px rgba(37, 211, 102, 0.35);
    text-decoration: none;
}

.btn--whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(37, 211, 102, 0.45);
}

/* =========================================================
   SECTION 2 — RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
    .problem__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .why-us__grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .dream__illustration {
        max-width: 320px;
        order: -1;
    }

    .dream__copy .section-head__title,
    .dream__copy .section-head__eyebrow {
        text-align: center;
    }

    .dream__copy .section-head__title {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 640px) {

    .problem,
    .dream,
    .opportunity,
    .why-us,
    .roadmap,
    .outcome {
        padding: 56px 18px;
    }

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

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

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

    .roadmap__step {
        width: 84px;
    }

    .roadmap__arrow {
        display: none;
    }

    .roadmap__track {
        gap: 20px 12px;
    }

    .opportunity__map {
        aspect-ratio: 1 / 1.1;
    }

    .cta-banner {
        padding: 70px 20px;
    }
}

/* =========================================================
   STEP 3 — MEET YOUR MENTOR
   ========================================================= */
.mentor {
    background: var(--paper-0);
    padding: 90px 24px;
}

.mentor__container {
    max-width: 1100px;
    margin: 0 auto;
}

.mentor__grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 56px;
    align-items: start;
}

.mentor__photo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.mentor__photo {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    padding: 4px;
    background: conic-gradient(var(--gold-300), var(--navy-500), var(--gold-300));
}

.mentor__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--paper-0);
    display: block;
}

.mentor__photo-fallback {
    display: none;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid var(--paper-0);
    background: linear-gradient(150deg, var(--navy-600), var(--navy-700));
    align-items: center;
    justify-content: center;
}

.mentor__photo-fallback span {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 44px;
    color: var(--gold-300);
}

.mentor__badges {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.mentor__badges span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-900);
    background: var(--paper-50);
    border: 1px solid var(--paper-100);
    padding: 8px 14px;
    border-radius: 999px;
}

.mentor__badges .icon {
    color: var(--gold-700);
}

.mentor__content h3 {
    font-size: 26px;
    font-weight: 600;
    color: var(--ink-900);
    margin: 0 0 6px;
}

.mentor__role {
    font-size: 14px;
    color: var(--gold-700);
    font-weight: 600;
    margin: 0 0 18px;
}

.mentor__bio {
    font-size: 14.5px;
    color: var(--ink-700);
    line-height: 1.75;
    margin: 0 0 30px;
}

.mentor__timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: 2px solid var(--paper-100);
    padding-left: 24px;
}

.mentor__timeline-item {
    position: relative;
    padding-bottom: 24px;
}

.mentor__timeline-item:last-child {
    padding-bottom: 0;
}

.mentor__timeline-dot {
    position: absolute;
    left: -30px;
    top: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gold-500);
    border: 2px solid var(--paper-0);
    box-shadow: 0 0 0 2px var(--gold-300);
}

.mentor__timeline-item strong {
    display: block;
    font-size: 15px;
    color: var(--ink-900);
    margin-bottom: 3px;
}

.mentor__timeline-item p {
    font-size: 13px;
    color: var(--ink-700);
    margin: 0;
    line-height: 1.5;
}

/* =========================================================
   STEP 3 — COMPANY INTRODUCTION
   ========================================================= */
.company {
    background: linear-gradient(#f9f6ef 0, #f5e9d3 100%);
    padding: 90px 24px;
}

.company__container {
    max-width: 1100px;
    margin: 0 auto;
}

.company__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.company__card {
    background: var(--paper-0);
    border: 1px solid var(--paper-100);
    border-radius: var(--radius-md);
    padding: 32px 28px;
}

.company__icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(201, 149, 47, 0.1);
    color: var(--gold-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    margin-bottom: 18px;
}

.company__card h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink-900);
    margin: 0 0 10px;
}

.company__card p {
    font-size: 14px;
    color: var(--ink-700);
    line-height: 1.7;
    margin: 0;
}

.company__why {
    background: var(--paper-0);
    border: 1px solid var(--paper-100);
    border-radius: var(--radius-md);
    padding: 32px 28px;
}

.company__why h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink-900);
    margin: 0 0 18px;
}

.company__why ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
}

.company__why li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--ink-700);
}

.company__why .icon {
    color: var(--success);
    flex-shrink: 0;
}

/* =========================================================
   STEP 3 — ANIMATED STATISTICS (CARDS)
   ========================================================= */
.stats2 {
    background: var(--paper-0);
    padding: 60px 24px;
}

.stats2__container {
    max-width: 1100px;
    margin: 0 auto;
}

.stats2__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.stats2__card {
    text-align: center;
    background: var(--paper-50);
    border: 1px solid var(--paper-100);
    border-radius: var(--radius-md);
    padding: 26px 14px;
}

.stats2__card strong {
    display: block;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 600;
    color: var(--gold-700);
    margin-bottom: 6px;
}

.stats2__card span {
    font-size: 12px;
    color: var(--ink-700);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* =========================================================
   STEP 3 — STUDENT SUCCESS DASHBOARD
   ========================================================= */
.dashboard {
    background: var(--paper-50);
    padding: 90px 24px;
}

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

.dashboard__panel {
    background: var(--paper-0);
    border: 1px solid var(--paper-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lift);
    padding: 40px;
}

.dashboard__row {
    display: grid;
    grid-template-columns: 0.6fr 1.4fr;
    gap: 40px;
    align-items: center;
}

.dashboard__stat {
    text-align: center;
}

.dashboard__ring {
    --pct: 92;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin: 0 auto 14px;
    background: conic-gradient(var(--gold-500) calc(var(--pct) * 1%), var(--paper-100) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.dashboard__ring::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: var(--paper-0);
}

.dashboard__ring span {
    position: relative;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    color: var(--gold-700);
}

.dashboard__stat p {
    font-size: 13px;
    color: var(--ink-700);
    margin: 0;
    font-weight: 500;
}

.dashboard__bars {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dashboard__bar-item span {
    display: block;
    font-size: 13px;
    color: var(--ink-700);
    margin-bottom: 6px;
}

.dashboard__bar {
    height: 8px;
    border-radius: 999px;
    background: var(--paper-100);
    overflow: hidden;
}

.dashboard__bar div {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold-500), var(--gold-700));
}

/* =========================================================
   STEP 3 — SUCCESS STORIES
   ========================================================= */
.stories {
    background: var(--paper-0);
    padding: 90px 24px;
}

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

.stories__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 36px;
}

.stories__card {
    background: var(--paper-50);
    border: 1px solid var(--paper-100);
    border-radius: var(--radius-md);
    padding: 28px 24px;
    position: relative;
}

.stories__quote {
    width: 26px;
    height: 26px;
    color: rgba(201, 149, 47, 0.35);
    margin-bottom: 12px;
}

.stories__card p {
    font-size: 14px;
    color: var(--ink-700);
    line-height: 1.65;
    margin: 0 0 18px;
    font-style: italic;
}

.stories__author strong {
    display: block;
    font-size: 14px;
    color: var(--ink-900);
}

.stories__author span {
    font-size: 12px;
    color: var(--ink-500);
}

.stories__stars {
    margin-top: 10px;
    display: flex;
    gap: 2px;
    color: var(--gold-500);
    font-size: 13px;
}

.stories__video-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-bottom: 30px;
}

.stories__video {
    position: relative;
    height: 160px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--navy-700), var(--navy-500));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    overflow: hidden;
}

.stories__play {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
}

.stories__video p {
    color: #F3F6FB;
    font-size: 13px;
    font-weight: 500;
    margin: 0;
}

.stories__google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    color: var(--ink-700);
}

.stories__google .icon {
    color: var(--gold-500);
    font-size: 20px;
}

/* =========================================================
   STEP 3 — WORKSHOP GALLERY
   ========================================================= */
.gallery {
    background: var(--paper-50);
    padding: 90px 24px;
}

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

.gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.gallery__tile {
    aspect-ratio: 4/3;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.gallery__tile .icon {
    width: 34px;
    height: 34px;
}

.gallery__tile--1 {
    background: linear-gradient(135deg, #16335F, #1E4278);
}

.gallery__tile--2 {
    background: linear-gradient(135deg, #A9752A, #E9B94E);
}

.gallery__tile--3 {
    background: linear-gradient(135deg, #0E1F3D, #16335F);
}

.gallery__tile--4 {
    background: linear-gradient(135deg, #1F9D6B, #16335F);
}

.gallery__tile--5 {
    background: linear-gradient(135deg, #C9952F, #A9752A);
}

.gallery__tile--6 {
    background: linear-gradient(135deg, #33405B, #0E1F3D);
}

/* =========================================================
   STEP 3 — ACHIEVEMENT TIMELINE (COMPANY MILESTONES)
   ========================================================= */
.milestones {
    background: var(--paper-0);
    padding: 90px 24px;
}

.milestones__container {
    max-width: 1100px;
    margin: 0 auto;
}

.milestones__track {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    position: relative;
}

.milestones__track::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--paper-100);
}

.milestones__item {
    flex: 1;
    text-align: center;
    position: relative;
    padding-top: 28px;
}

.milestones__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gold-500);
    border: 3px solid var(--paper-0);
    box-shadow: 0 0 0 2px var(--gold-300);
}

.milestones__year {
    display: block;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--gold-700);
    margin-bottom: 8px;
}

.milestones__item p {
    font-size: 12.5px;
    color: var(--ink-700);
    line-height: 1.5;
    margin: 0;
}

/* =========================================================
   STEP 3 — TRUST BADGES
   ========================================================= */
.trust-badges {
    background: var(--paper-50);
    padding: 60px 24px;
}

.trust-badges__container {
    max-width: 1100px;
    margin: 0 auto;
}

.trust-badges__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.trust-badges__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: var(--paper-0);
    border: 1px solid var(--paper-100);
    border-radius: var(--radius-md);
    padding: 24px 14px;
    text-align: center;
}

.trust-badges__card .icon {
    width: 30px;
    height: 30px;
    color: var(--gold-700);
}

.trust-badges__card span {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-900);
}

/* =========================================================
   STEP 4 — EXCLUSIVE BONUSES
   ========================================================= */
.bonuses {
    background: var(--paper-0);
    padding: 90px 24px;
}

.bonuses__container {
    max-width: 1100px;
    margin: 0 auto;
}

.bonuses__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 36px;
}

.bonuses__card {
    background: var(--paper-50);
    border: 1px solid var(--paper-100);
    border-radius: var(--radius-md);
    padding: 24px 18px;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bonuses__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft);
}

.bonuses__card .icon {
    width: 30px;
    height: 30px;
    color: var(--gold-700);
    margin-bottom: 12px;
}

.bonuses__card h3 {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-900);
    margin: 0;
    line-height: 1.4;
}

.bonuses__value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    text-align: center;
}

.bonuses__value-old {
    font-size: 16px;
    color: var(--ink-500);
    text-decoration: line-through;
}

.bonuses__value-new {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    color: var(--gold-700);
    background: rgba(201, 149, 47, 0.1);
    padding: 8px 20px;
    border-radius: 999px;
}

/* =========================================================
   STEP 4 — COURSE VALUE STACK
   ========================================================= */
.value-stack {
    background: var(--paper-50);
    padding: 90px 24px;
}

.value-stack__container {
    max-width: 560px;
    margin: 0 auto;
}

.value-stack__card {
    background: var(--paper-0);
    border: 1px solid var(--paper-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lift);
    padding: 36px 32px;
}

.value-stack__row {
    display: flex;
    justify-content: space-between;
    font-size: 14.5px;
    color: var(--ink-700);
    padding: 12px 0;
    border-bottom: 1px dashed var(--paper-300);
}

.value-stack__row strong {
    color: var(--ink-900);
    font-weight: 600;
}

.value-stack__row--total {
    border-bottom: none;
    font-weight: 600;
}

.value-stack__row--total span,
.value-stack__row--total strong {
    color: var(--ink-900);
    text-decoration: line-through;
    opacity: 0.6;
}

.value-stack__today {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(201, 149, 47, 0.1);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    margin: 20px 0;
}

.value-stack__today span {
    font-size: 14px;
    color: var(--ink-700);
    font-weight: 500;
}

.value-stack__today strong {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--gold-700);
}

/* =========================================================
   STEP 4 — EVENT DETAILS
   ========================================================= */
.event-details {
    background: var(--paper-0);
    padding: 70px 24px;
}

.event-details__container {
    max-width: 1100px;
    margin: 0 auto;
}

.event-details__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.event-details__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    background: var(--paper-50);
    border: 1px solid var(--paper-100);
    border-radius: var(--radius-md);
    padding: 22px 16px;
}

.event-details__item .icon {
    width: 26px;
    height: 26px;
    color: var(--gold-700);
}

.event-details__item span {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-500);
}

.event-details__item strong {
    font-size: 14.5px;
    color: var(--ink-900);
    font-weight: 600;
}

/* =========================================================
   STEP 4 — URGENCY (COUNTDOWN + LIVE + SEATS + PAYMENTS)
   ========================================================= */
.urgency {
    background: var(--paper-50);
    padding: 70px 24px;
}

.urgency__container {
    max-width: 1100px;
    margin: 0 auto;
}

.urgency__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 44px;
}

.urgency__block {
    background: var(--paper-0);
    border: 1px solid var(--paper-100);
    border-radius: var(--radius-md);
    padding: 26px 20px;
    text-align: center;
}

.urgency__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-500);
    margin-bottom: 12px;
}

.urgency__label .icon {
    color: var(--gold-700);
}

.urgency__timer {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.urgency__timer span {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 700;
    color: var(--gold-700);
}

.urgency__timer small {
    display: block;
    font-size: 9px;
    color: var(--ink-500);
    text-transform: uppercase;
}

.urgency__live {
    display: block;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    color: var(--gold-700);
    margin-bottom: 4px;
}

.urgency__sub {
    font-size: 12px;
    color: var(--ink-700);
}

.urgency__pay {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}

.urgency__razorpay {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-700);
    margin: 0;
}

.urgency__razorpay .icon {
    color: var(--success);
}

/* =========================================================
   STEP 4 — FAQ ACCORDION
   ========================================================= */
.faq {
    background: var(--paper-0);
    padding: 90px 24px;
}

.faq__container {
    max-width: 780px;
    margin: 0 auto;
}

.faq__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq__item {
    background: var(--paper-50);
    border: 1px solid var(--paper-100);
    border-radius: var(--radius-sm);
    padding: 4px 20px;
}

.faq__item summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-900);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faq__item summary::-webkit-details-marker {
    display: none;
}

.faq__item summary::after {
    content: "+";
    font-size: 20px;
    color: var(--gold-700);
    flex-shrink: 0;
    margin-left: 12px;
    transition: transform 0.25s ease;
}

.faq__item[open] summary::after {
    transform: rotate(45deg);
}

.faq__item p {
    font-size: 14px;
    color: var(--ink-700);
    line-height: 1.7;
    margin: 0 0 18px;
}

/* =========================================================
   STEP 5 — CLOSING BANNER
   ========================================================= */
.closing {
    background: linear-gradient(135deg, var(--navy-700), var(--navy-600) 60%, #0A1830);
    padding: 110px 24px;
    text-align: center;
}

.closing__container {
    max-width: 760px;
    margin: 0 auto;
}

.closing__title {
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 600;
    line-height: 1.25;
    color: #F3F6FB;
    margin: 0 0 12px;
}

.closing__subtitle {
    font-size: 17px;
    color: var(--gold-300);
    font-weight: 500;
    margin: 0 0 36px;
}

.closing__list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 18px;
}

.closing__list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #DCE3EF;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 10px 16px;
    border-radius: 999px;
}

.closing__list .icon {
    color: var(--gold-300);
}

.closing__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

.btn--large {
    padding: 20px 40px;
    font-size: 17px;
}

/* =========================================================
   STEP 5 — CONTACT SECTION
   ========================================================= */
.contact {
    background: var(--paper-0);
    padding: 90px 24px;
}

.contact__container {
    max-width: 900px;
    margin: 0 auto;
}

.contact__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 28px;
}

.contact__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    background: var(--paper-50);
    border: 1px solid var(--paper-100);
    border-radius: var(--radius-md);
    padding: 24px 16px;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.contact__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-soft);
}

.contact__card .icon {
    width: 26px;
    height: 26px;
    color: var(--gold-700);
}

.contact__card span {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-500);
}

.contact__card strong {
    font-size: 13.5px;
    color: var(--ink-900);
    font-weight: 600;
}

.contact__address {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--ink-700);
    text-align: center;
}

.contact__address .icon {
    color: var(--gold-700);
    flex-shrink: 0;
}

/* =========================================================
   STEP 5 — FOOTER
   ========================================================= */
.site-footer {
    background: linear-gradient(180deg, #0A1830, #060D1C);
    padding: 70px 24px 30px;
}

.site-footer__container {
    max-width: 1180px;
    margin: 0 auto;
}

.site-footer__top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__brand h3 {
    font-size: 18px;
    font-weight: 600;
    color: #F3F6FB;
    margin: 0 0 12px;
}

.site-footer__brand p {
    font-size: 13.5px;
    color: #8592AC;
    line-height: 1.7;
    margin: 0 0 18px;
    max-width: 320px;
}

.site-footer__social {
    display: flex;
    gap: 12px;
}

.site-footer__social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #AEB9CF;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.site-footer__social .icon {
    width: 16px;
    height: 16px;
}

.site-footer__links h4 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #F3F6FB;
    margin: 0 0 16px;
}

.site-footer__links a {
    display: block;
    font-size: 13.5px;
    color: #8592AC;
    text-decoration: none;
    margin-bottom: 10px;
}

.site-footer__links a:hover {
    color: var(--gold-300);
}

.site-footer__bottom {
    padding-top: 24px;
    text-align: center;
}

.site-footer__bottom p {
    font-size: 12.5px;
    color: #6B7690;
    margin: 0;
}

/* =========================================================
   STEPS 3–5 — RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
    .mentor__grid {
        grid-template-columns: 1fr;
    }

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

    .company__why ul {
        grid-template-columns: 1fr;
    }

    .stats2__grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

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

    .stories__video-row {
        grid-template-columns: 1fr;
    }

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

    .milestones__track {
        flex-direction: column;
        gap: 28px;
        text-align: left;
    }

    .milestones__track::before {
        display: none;
    }

    .milestones__item {
        padding-top: 0;
        padding-left: 28px;
        text-align: left;
    }

    .milestones__item::before {
        top: 4px;
        left: 0;
        transform: none;
    }

    .trust-badges__grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

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

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

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

    .site-footer__top {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (max-width: 640px) {

    .mentor,
    .company,
    .dashboard,
    .stories,
    .gallery,
    .milestones,
    .bonuses,
    .value-stack,
    .event-details,
    .urgency,
    .faq,
    .closing,
    .contact {
        padding: 56px 18px;
    }

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

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

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

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

    .event-details__grid {
        grid-template-columns: 1fr;
    }

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

    .closing__title {
        font-size: 1.7rem;
    }
}

.learn__image-2 {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 18px;
}

.stories__video video {
    width: 100%;
    height: auto;
    border-radius: 20px;
    display: block;
}