/* =========================================================================
   FG Academy — Home Page Stylesheet
   =========================================================================
   Styles specific to resources/views/home.blade.php only.
   ========================================================================= */

:root {
    /* A snappier, more "physical" deceleration curve than the browser
       default `ease` — used for every hover/reveal/entrance transition on
       this page so motion reads as considered rather than default. Kept
       out of the continuous-loop marquee/progress-bar animations, which
       stay linear on purpose (constant speed is correct for those). */
    --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

/* -------------------------------------------------------------------------
   Fixed mobile "Apply" bar
   A persistent bottom CTA bar, mobile/tablet only (hidden via lg:hidden in
   the Blade template — desktop is untouched, it never renders there). The
   matching spacer at the end of the page reserves the same height so the
   bar doesn't permanently sit over the footer once you scroll to the end.
   ------------------------------------------------------------------------- */
.mobile-apply-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgb(226 232 240);
    box-shadow: 0 -14px 30px -18px rgba(2, 15, 33, .3);
}

.mobile-apply-bar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, #0047ff, #7c3aed);
    padding: .875rem 1.5rem;
    font-size: .9375rem;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 14px 28px -12px rgba(0, 71, 255, .55);
    /* Tap/press feedback, not an entrance — a snappy ease-out reads as a
       crisp press; the expo-out premium curve's long settle tail would
       feel slightly floaty at this duration. */
    transition: transform .15s ease-out;
}

.mobile-apply-bar__btn:active {
    transform: scale(.97);
}

.mobile-apply-bar-spacer {
    height: 5rem;
}

/* -------------------------------------------------------------------------
   Hero (Section 1)
   Ambient background glow, a gradient headline highlight, a glowing CTA,
   and a pair of pill "chips" (salary + live-batch urgency) below the
   buttons instead of stacked plain-text lines.
   ------------------------------------------------------------------------- */
.hero-glow {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: 9999px;
    filter: blur(60px);
}

.hero-glow--violet {
    top: -6rem;
    right: -4rem;
    height: 20rem;
    width: 20rem;
    background: radial-gradient(circle, rgba(124, 58, 237, .35), transparent 70%);
}

.hero-highlight {
    background: linear-gradient(90deg, #93c5fd, #67e8f9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-cta {
    box-shadow: 0 18px 40px -12px rgba(0, 71, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.hero-cta:hover {
    box-shadow: 0 22px 46px -12px rgba(0, 71, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* CTA arrow micro-interaction — any arrow icon inside a primary/outline
   button or the mobile apply bar nudges right a couple of px on hover. */
.btn-primary svg,
.btn-outline svg,
.mobile-apply-bar__btn svg {
    transition: transform .2s var(--ease-premium);
}

.btn-primary:hover svg,
.btn-outline:hover svg,
.mobile-apply-bar__btn:hover svg {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary svg,
    .btn-outline svg,
    .mobile-apply-bar__btn svg {
        transition: none;
    }

    .btn-primary:hover svg,
    .btn-outline:hover svg,
    .mobile-apply-bar__btn:hover svg {
        transform: none;
    }
}

.hero-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .625rem;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    padding: .5rem 1rem;
    font-size: .75rem;
    font-weight: 500;
    color: rgb(201 219 255);
    backdrop-filter: blur(4px);
}

.hero-chip strong {
    font-weight: 700;
    color: #fff;
}

.hero-chip__icon {
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    color: #67e8f9;
}

.hero-chip--live {
    border-color: rgba(45, 212, 191, .35);
    background: rgba(45, 212, 191, .1);
}

.hero-chip__divider {
    color: rgba(255, 255, 255, .3);
}

.hero-chip__dot {
    position: relative;
    display: flex;
    height: .5rem;
    width: .5rem;
    flex-shrink: 0;
}

.hero-chip__dot-ping {
    position: absolute;
    display: inline-flex;
    height: 100%;
    width: 100%;
    border-radius: 9999px;
    background: #2dd4bf;
    opacity: .75;
}

.hero-chip__dot-core {
    position: relative;
    display: inline-flex;
    height: .5rem;
    width: .5rem;
    border-radius: 9999px;
    background: #2dd4bf;
}

@media (min-width: 640px) {
    .hero-chip {
        font-size: .8125rem;
        padding: .5625rem 1.125rem;
    }
}

/* -------------------------------------------------------------------------
   Story progress bar + scroll-reveal (whole page)
   A slim fixed bar fills left-to-right as the visitor scrolls through the
   page's narrative (hero -> problem -> transformation -> ... -> final CTA),
   and each top-level section fades/slides into place the first time it
   enters the viewport (see the inline <script> at the end of this file),
   so the page reads as one guided story instead of static stacked blocks.
   ------------------------------------------------------------------------- */
.story-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    height: 3px;
    background: rgba(2, 15, 33, .06);
}

.story-progress__bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0047ff, #7c3aed, #2dd4bf);
    transition: width .1s linear;
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s var(--ease-premium), transform .6s var(--ease-premium);
}

.reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered child reveal — used inside card grids/lists (problem cards, USP
   cards, feature tiles, checklist items, fee cards, process steps,
   curriculum modules, journey nodes, etc). Each item sets --i (its loop
   index) inline; items fade/slide in one after another as their parent
   section becomes .is-revealed. Scoped as a descendant of an unrevealed
   .reveal-on-scroll section only, so it automatically does nothing (items
   simply render visible) when JS never adds that class — same
   reduced-motion / no-IntersectionObserver fallback as the section reveal
   above, with no separate media query needed. */
.stagger-item {
    transition: opacity .5s var(--ease-premium), transform .5s var(--ease-premium);
    transition-delay: min(calc(var(--i, 0) * 70ms), 420ms);
}

.reveal-on-scroll:not(.is-revealed) .stagger-item {
    opacity: 0;
    transform: translateY(16px);
}

/* Hero-only entrance animation. The hero is always in the initial viewport,
   so it can't use .stagger-item: that mechanism only hides content once JS
   (running after the whole page has parsed) adds .reveal-on-scroll — until
   then the hero paints fully visible, then blinks hidden, then fades back
   in. A plain CSS @keyframes animation with fill-mode "both" sidesteps this
   entirely: it holds the from-state from first paint with no JS/observer
   dependency, so there's nothing to blink. */
@keyframes hero-reveal-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-reveal {
    animation: hero-reveal-in .7s var(--ease-premium) both;
    animation-delay: calc(var(--i, 0) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
    .hero-reveal {
        animation: none;
    }
}

/* -------------------------------------------------------------------------
   Partner school logos (Section 2.5)
   Reuses the same infinite-marquee technique as the trust strip: the logo
   list is duplicated and the track animates left by exactly one set's
   width so the loop is seamless. Logo boxes are placeholders — see the
   Blade comment above this section.
   ------------------------------------------------------------------------- */
.partner-logos__track {
    animation: trust-marquee-scroll 30s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .partner-logos__track {
        animation: none;
    }
}

.partner-logo {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 4rem;
    width: 9rem;
    border-radius: .75rem;
    border: 1px dashed rgb(203 213 225);
    background: rgb(249 250 251);
    font-size: .75rem;
    font-weight: 600;
    color: rgb(148 163 184);
}

/* -------------------------------------------------------------------------
   Testimonials carousel (Section 10.5)
   A horizontally-scrolling, snap-aligned track so an unlimited number of
   testimonials (managed from Admin -> Testimonials) can be added without
   growing the section's height. 1 card per view on mobile, 2 on tablet,
   3 on desktop; arrow buttons + dots step by exactly one card.
   ------------------------------------------------------------------------- */
.testimonial-carousel {
    position: relative;
}

.testimonial-carousel__viewport {
    position: relative;
}

.testimonial-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;
    -ms-overflow-style: none;
    margin: -.25rem;
    padding: .25rem .25rem 1rem;
}

.testimonial-carousel__track::-webkit-scrollbar {
    display: none;
}

.testimonial-carousel__slide {
    flex: 0 0 100%;
    max-width: 100%;
    scroll-snap-align: start;
}

.testimonial-carousel__slide .testimonial-card {
    height: 100%;
}

.testimonial-carousel__nav {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: none;
    height: 2.75rem;
    width: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgb(226 232 240);
    background: #fff;
    color: #1c2a4a;
    box-shadow: 0 12px 24px -10px rgba(2, 15, 33, .25);
    transform: translateY(-50%);
    transition: box-shadow .15s var(--ease-premium), color .15s var(--ease-premium), opacity .15s var(--ease-premium);
}

.testimonial-carousel__nav svg {
    height: 1.25rem;
    width: 1.25rem;
}

.testimonial-carousel__nav:hover {
    color: #0047ff;
    box-shadow: 0 16px 30px -10px rgba(2, 15, 33, .3);
}

.testimonial-carousel__nav.is-disabled {
    opacity: .35;
    pointer-events: none;
}

.testimonial-carousel__nav--prev {
    left: -.25rem;
}

.testimonial-carousel__nav--next {
    right: -.25rem;
}

.testimonial-carousel__dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: .5rem;
}

.testimonial-carousel__dot {
    height: .5rem;
    width: .5rem;
    border-radius: 9999px;
    background: rgb(203 213 225);
    transition: background-color .15s var(--ease-premium), width .15s var(--ease-premium);
}

.testimonial-carousel__dot.is-active {
    width: 1.5rem;
    background: #0047ff;
}

@media (min-width: 640px) {
    .testimonial-carousel__slide {
        flex-basis: calc((100% - 1.5rem) / 2);
        max-width: calc((100% - 1.5rem) / 2);
    }

    .testimonial-carousel__nav {
        display: flex;
    }

    .testimonial-carousel__nav--prev {
        left: -1.375rem;
    }

    .testimonial-carousel__nav--next {
        right: -1.375rem;
    }
}

@media (min-width: 1024px) {
    .testimonial-carousel__slide {
        flex-basis: calc((100% - 3rem) / 3);
        max-width: calc((100% - 3rem) / 3);
    }
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    border-radius: 1.25rem;
    background: #fff;
    border: 1px solid rgb(226 232 240);
    border-top: 3px solid var(--testimonial-color);
    padding: 1.75rem;
    box-shadow: 0 20px 45px -25px rgba(2, 15, 33, .18);
}

.testimonial-card__stars {
    display: flex;
    gap: .125rem;
    color: #fbbf24;
}

.testimonial-card__stars svg {
    height: 1.125rem;
    width: 1.125rem;
}

.testimonial-card__quote {
    margin-top: 1rem;
    flex: 1 1 auto;
    font-size: .9375rem;
    line-height: 1.6;
    font-style: italic;
    color: rgb(55 65 81);
}

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgb(226 232 240);
}

.testimonial-card__avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    width: 2.75rem;
    border-radius: 9999px;
    color: #fff;
    font-weight: 700;
    background: var(--testimonial-color);
}

.testimonial-card__name {
    font-size: .875rem;
    font-weight: 700;
    color: rgb(4 30 66);
}

.testimonial-card__role {
    font-size: .75rem;
    color: rgb(107 114 128);
}

.testimonial-card--blue {
    --testimonial-color: #0047ff;
}

.testimonial-card--violet {
    --testimonial-color: #7c3aed;
}

.testimonial-card--teal {
    --testimonial-color: #0d9488;
}

/* -------------------------------------------------------------------------
   Trust strip (Section 2)
   The "live" badge is now a solid gradient pill instead of plain text, and
   every scrolling trust pill gets its own color instead of a uniform blue
   checkmark, so the strip feels colorful in motion rather than flat.
   ------------------------------------------------------------------------- */
.trust-live-badge {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #0047ff, #7c3aed);
    padding: .5rem 1.25rem;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: #fff;
    box-shadow: 0 10px 22px -10px rgba(0, 71, 255, .5);
}

.trust-eyebrow {
    display: inline-flex;
    align-items: center;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: rgb(0 56 204);
}

.trust-heading {
    margin-top: .75rem;
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: rgb(4 30 66);
}

@media (min-width: 640px) {
    .trust-heading {
        font-size: 2.25rem;
    }
}

.trust-subheading {
    margin: .75rem auto 0;
    max-width: 34rem;
    font-size: .9375rem;
    color: rgb(107 114 128);
}

.trust-pill {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: .625rem;
    border-radius: 9999px;
    background: #fff;
    padding: .5rem 1.25rem .5rem .5rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: -.005em;
    color: rgb(30 41 59);
    border: 1px solid rgb(226 232 240);
    box-shadow: 0 10px 24px -18px rgba(2, 15, 33, .2);
    transition: transform .25s var(--ease-premium), box-shadow .25s var(--ease-premium), border-color .25s var(--ease-premium);
}

.trust-pill:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--trust-color) 35%, rgb(226 232 240));
    box-shadow: 0 16px 32px -16px rgba(2, 15, 33, .25);
}

.trust-pill__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 1.75rem;
    width: 1.75rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--trust-color) 14%, white);
    color: var(--trust-color);
}

.trust-pill__icon svg {
    height: .9375rem;
    width: .9375rem;
}

.trust-pill--blue {
    --trust-color: #0047ff;
}

.trust-pill--violet {
    --trust-color: #7c3aed;
}

.trust-pill--teal {
    --trust-color: #0d9488;
}

.trust-pill--amber {
    --trust-color: #d97706;
}

.trust-pill--pink {
    --trust-color: #db2777;
}

.trust-pill--indigo {
    --trust-color: #4f46e5;
}

.trust-pill--emerald {
    --trust-color: #059669;
}

.trust-pill--orange {
    --trust-color: #ea580c;
}

/* -------------------------------------------------------------------------
   Career Problem cards (Section 3)
   Four warm "alert family" colors (red, rose, orange, amber) instead of a
   single flat red, so the problem list feels more varied while staying
   thematically negative/attention-grabbing.
   ------------------------------------------------------------------------- */
.problem-card {
    border-radius: 1rem;
    background: #fff;
    border: 1px solid rgb(226 232 240);
    border-left: 3px solid var(--problem-color);
    padding: 1.125rem;
    box-shadow: 0 12px 28px -16px rgba(2, 15, 33, .15);
    transition: transform .2s var(--ease-premium), box-shadow .2s var(--ease-premium);
}

.problem-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px -16px color-mix(in srgb, var(--problem-color) 35%, transparent);
}

.problem-card p {
    margin-top: .75rem;
    font-size: .8125rem;
    font-weight: 600;
    color: rgb(4 30 66);
}

@media (min-width: 640px) {
    .problem-card {
        padding: 1.5rem;
    }

    .problem-card p {
        margin-top: 1rem;
        font-size: .875rem;
    }
}

.problem-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: .75rem;
    color: var(--problem-color);
    background: color-mix(in srgb, var(--problem-color) 12%, transparent);
}

.problem-card__icon svg {
    height: 1.25rem;
    width: 1.25rem;
}

.problem-card--red {
    --problem-color: #dc2626;
}

.problem-card--rose {
    --problem-color: #e11d48;
}

.problem-card--orange {
    --problem-color: #ea580c;
}

.problem-card--amber {
    --problem-color: #d97706;
}

/* -------------------------------------------------------------------------
   Feature tiles (Sections 8 & 9 — Hands-on Kit, Offline Bootcamp)
   Small text-only labels ("Sensors", "Mentor Feedback"...) upgraded with a
   colored icon and a subtle colored top border, matching the colorful,
   premium language used across the rest of the page.
   ------------------------------------------------------------------------- */
.feature-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    text-align: center;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid rgb(226 232 240);
    border-top: 3px solid var(--tile-color);
    padding: 1.25rem 1rem;
    box-shadow: 0 12px 28px -16px rgba(2, 15, 33, .15);
    transition: transform .2s var(--ease-premium), box-shadow .2s var(--ease-premium);
}

.feature-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px -16px color-mix(in srgb, var(--tile-color) 35%, transparent);
}

.feature-tile p {
    font-size: .8125rem;
    font-weight: 700;
    color: rgb(4 30 66);
}

.feature-tile__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 9999px;
    color: #fff;
    background: var(--tile-color);
    box-shadow: 0 8px 16px -6px var(--tile-color);
}

.feature-tile__icon svg {
    height: 1.25rem;
    width: 1.25rem;
}

.feature-tile--blue {
    --tile-color: #0047ff;
}

.feature-tile--violet {
    --tile-color: #7c3aed;
}

.feature-tile--teal {
    --tile-color: #0d9488;
}

.feature-tile--amber {
    --tile-color: #d97706;
}

.feature-tile--pink {
    --tile-color: #db2777;
}

/* -------------------------------------------------------------------------
   Why Us USP cards (Section 13)
   Each reason gets its own color and a glowing icon tile instead of the
   old alternating blue/cyan pattern, plus a colored top border that lights
   up on hover.
   ------------------------------------------------------------------------- */
.usp-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .75rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid rgb(226 232 240);
    border-top: 3px solid var(--usp-color);
    padding: 1.25rem 1rem;
    box-shadow: 0 15px 35px -20px rgba(2, 15, 33, .15);
    transition: transform .2s var(--ease-premium), box-shadow .2s var(--ease-premium);
}

.usp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--usp-color) 35%, transparent);
}

.usp-card p {
    font-size: .8125rem;
    font-weight: 600;
    color: rgb(4 30 66);
}

@media (min-width: 640px) {
    .usp-card {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 1rem;
        padding: 1.5rem;
    }

    .usp-card p {
        padding-top: .5rem;
        font-size: .9375rem;
    }
}

.usp-card__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    width: 2.75rem;
    border-radius: .75rem;
    color: #fff;
    background: var(--usp-color);
    box-shadow: 0 8px 16px -6px var(--usp-color);
}

.usp-card__icon svg {
    height: 1.375rem;
    width: 1.375rem;
}

.usp-card__icon--blue {
    --usp-color: #0047ff;
}

.usp-card__icon--violet {
    --usp-color: #7c3aed;
}

.usp-card__icon--teal {
    --usp-color: #0d9488;
}

.usp-card__icon--amber {
    --usp-color: #d97706;
}

.usp-card__icon--pink {
    --usp-color: #db2777;
}

.usp-card__icon--indigo {
    --usp-color: #4f46e5;
}

/* -------------------------------------------------------------------------
   Career Outcomes cards (Section 14)
   Same colorful-icon treatment as the USP cards, in a compact centered
   card better suited to short trainer-role labels.
   ------------------------------------------------------------------------- */
.outcome-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    text-align: center;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid rgb(226 232 240);
    padding: 1.5rem 1rem;
    box-shadow: 0 12px 28px -16px rgba(2, 15, 33, .15);
    transition: transform .2s var(--ease-premium), box-shadow .2s var(--ease-premium);
}

.outcome-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 32px -16px color-mix(in srgb, var(--outcome-color) 35%, transparent);
}

.outcome-card p {
    font-size: .8125rem;
    font-weight: 700;
    color: rgb(4 30 66);
}

.outcome-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    width: 3rem;
    border-radius: 9999px;
    color: #fff;
    background: var(--outcome-color);
    box-shadow: 0 8px 16px -6px var(--outcome-color);
}

.outcome-card__icon svg {
    height: 1.375rem;
    width: 1.375rem;
}

.outcome-card__icon--blue {
    --outcome-color: #0047ff;
}

.outcome-card__icon--violet {
    --outcome-color: #7c3aed;
}

.outcome-card__icon--teal {
    --outcome-color: #0d9488;
}

.outcome-card__icon--amber {
    --outcome-color: #d97706;
}

.outcome-card__icon--pink {
    --outcome-color: #db2777;
}

.outcome-card__icon--indigo {
    --outcome-color: #4f46e5;
}

.outcome-card__icon--emerald {
    --outcome-color: #059669;
}

/* -------------------------------------------------------------------------
   Placement pathway (Section 10)
   A colorful "job guaranteed" banner plus a 5-step flow with a distinct
   color and an arrow between each step, so the pathway to placement reads
   as a connected sequence rather than five unrelated feature cards.
   ------------------------------------------------------------------------- */
.placement-banner {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #0047ff, #7c3aed);
    padding: .875rem 1.75rem;
    font-size: .9375rem;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 15px 30px -12px rgba(0, 71, 255, .5);
}

.placement-banner svg {
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
}

.placement-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.placement-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 22rem;
}

.placement-step__card {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 1rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid rgb(226 232 240);
    padding: 1.25rem;
    box-shadow: 0 12px 28px -14px rgba(2, 15, 33, .15);
    transition: transform .2s var(--ease-premium), border-color .2s var(--ease-premium);
}

.placement-step__card:hover {
    transform: translateY(-3px);
    border-color: var(--placement-color);
}

.placement-step__card p {
    font-size: .9375rem;
    font-weight: 700;
    color: rgb(4 30 66);
}

.placement-step__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 3rem;
    width: 3rem;
    border-radius: 9999px;
    color: #fff;
    background: var(--placement-color);
    box-shadow: 0 8px 16px -6px var(--placement-color);
}

.placement-step__icon svg {
    height: 1.375rem;
    width: 1.375rem;
}

.placement-step__arrow {
    height: 1.5rem;
    width: 1.5rem;
    color: rgb(157 190 255);
    transform: rotate(90deg);
}

.placement-step__card--blue {
    --placement-color: #0047ff;
}

.placement-step__card--violet {
    --placement-color: #7c3aed;
}

.placement-step__card--teal {
    --placement-color: #0d9488;
}

.placement-step__card--amber {
    --placement-color: #d97706;
}

.placement-step__card--pink {
    --placement-color: #db2777;
}

@media (min-width: 1024px) {
    .placement-flow {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .placement-step {
        flex-direction: row;
        width: auto;
        max-width: none;
    }

    .placement-step__card {
        flex-direction: column;
        text-align: center;
        width: 9.5rem;
    }

    .placement-step__arrow {
        transform: rotate(0deg);
    }
}

/* -------------------------------------------------------------------------
   Fee structure (Section 11)
   Three colorful fee cards, with the "pay only after placement" card
   visually featured (elevated, badged, glowing) since it's the strongest
   trust signal in the pricing story.
   ------------------------------------------------------------------------- */
.fee-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.fee-card {
    position: relative;
    border-radius: 1.25rem;
    background: #fff;
    border: 2px solid rgb(226 232 240);
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 15px 35px -20px rgba(2, 15, 33, .15);
    transition: transform .2s var(--ease-premium);
}

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

.fee-card--featured {
    border-color: var(--fee-color);
    box-shadow: 0 25px 50px -20px color-mix(in srgb, var(--fee-color) 45%, transparent);
}

.fee-card__badge {
    position: absolute;
    top: -.875rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 9999px;
    padding: .3125rem 1rem;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    background: var(--fee-color);
    box-shadow: 0 6px 14px -4px var(--fee-color);
}

.fee-card__when {
    display: inline-block;
    border-radius: 9999px;
    padding: .25rem .875rem;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--fee-color);
    background: color-mix(in srgb, var(--fee-color) 12%, transparent);
}

.fee-card__amount {
    margin-top: 1rem;
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--fee-color);
}

.fee-card__label {
    margin-top: .25rem;
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgb(4 30 66);
}

.fee-card__desc {
    margin-top: .625rem;
    font-size: .875rem;
    color: rgb(107 114 128);
}

.fee-card--blue {
    --fee-color: #0047ff;
}

.fee-card--violet {
    --fee-color: #7c3aed;
}

.fee-card--emerald {
    --fee-color: #059669;
}

.fee-card--amber {
    --fee-color: #d97706;
}

.fee-card--rose {
    --fee-color: #e11d48;
}

.fee-total {
    max-width: 34rem;
    text-align: center;
    border-radius: 9999px;
    padding: .875rem 1.75rem;
    font-size: .9375rem;
    font-weight: 600;
    color: rgb(4 30 66);
    background: rgb(233 240 255);
    border: 1px solid rgb(203 219 255);
}

@media (min-width: 640px) {
    .fee-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* -------------------------------------------------------------------------
   Requirements banner (Section 7.5)
   A bold, solid-gradient highlight bar instead of a light card — text on
   the left, requirement chips on the right, flowing in one horizontal
   line at tablet/desktop width so the "all you need is a laptop +
   internet" promise reads as a confident, highlighted statement.
   ------------------------------------------------------------------------- */
.requirements-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    border-radius: 1.75rem;
    background: linear-gradient(135deg, rgb(2 15 33), rgb(10 32 74));
    box-shadow: 0 30px 60px -25px rgba(0, 71, 255, .4);
    padding: 2.5rem 2rem;
    text-align: center;
}

.requirements-banner__heading {
    margin-top: 1rem;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
}

.requirements-banner__message {
    max-width: 28rem;
    margin: .75rem auto 0;
    font-size: .9375rem;
    font-weight: 500;
    color: rgb(224 235 255);
}

.requirements-banner__items {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}

.requirements-banner__plus {
    font-size: 1.25rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .5);
}

.requirements-banner__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .625rem;
}

.requirements-banner__item p {
    font-size: .875rem;
    font-weight: 700;
    color: #fff;
}

.requirements-banner__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.5rem;
    width: 3.5rem;
    border-radius: 9999px;
    color: #fff;
    background: rgba(255, 255, 255, .15);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

.requirements-banner__icon svg {
    height: 1.75rem;
    width: 1.75rem;
}

@media (min-width: 1024px) {
    .requirements-banner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        padding: 3rem 3.5rem;
    }

    .requirements-banner__message {
        margin-left: 0;
    }

    .requirements-banner__items {
        flex-direction: row;
        gap: 2rem;
    }
}

/* -------------------------------------------------------------------------
   Curriculum week-by-week breakdown (Section 7)
   Presented like a fellowship/bootcamp syllabus: one collapsible row per
   week, closed by default (first one open) so the whole 60-day program
   is scannable at a glance, with detail available on demand.
   ------------------------------------------------------------------------- */
.curriculum-weeks {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    border-radius: 1.25rem;
    border: 1px solid rgb(226 232 240);
    background: #fff;
    box-shadow: 0 20px 45px -25px rgba(2, 15, 33, .15);
    overflow: hidden;
}

.curriculum-week {
    border-bottom: 1px solid rgb(226 232 240);
}

.curriculum-week:last-child {
    border-bottom: none;
}

.curriculum-week__header {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    text-align: left;
    cursor: pointer;
}

.curriculum-week__number {
    flex-shrink: 0;
    font-size: .8125rem;
    font-weight: 700;
    color: rgb(90 110 168);
}

.curriculum-week__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    width: 2.75rem;
    border-radius: .75rem;
    color: #fff;
    background: var(--curriculum-color);
    box-shadow: 0 6px 14px -4px var(--curriculum-color);
    transition: transform .2s var(--ease-premium);
}

.curriculum-week:hover .curriculum-week__icon {
    transform: scale(1.06);
}

.curriculum-week__icon svg {
    height: 1.25rem;
    width: 1.25rem;
}

.curriculum-week__heading {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .1875rem;
    min-width: 0;
}

.curriculum-week__title {
    font-size: .9375rem;
    font-weight: 700;
    color: rgb(4 30 66);
}

.curriculum-week__hook {
    font-size: .8125rem;
    color: rgb(107 114 128);
}

.curriculum-week__chevron {
    flex-shrink: 0;
    height: 1.25rem;
    width: 1.25rem;
    color: rgb(90 110 168);
    transition: transform .2s var(--ease-premium);
}

.curriculum-week__chevron--open {
    transform: rotate(180deg);
}

.curriculum-week__body {
    padding: 0 1.25rem 1.5rem 5.25rem;
}

.curriculum-week__label {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgb(90 110 168);
}

.curriculum-week__topics {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .625rem;
}

.curriculum-week__topic {
    border-radius: 9999px;
    padding: .3125rem .75rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--curriculum-color);
    background: color-mix(in srgb, var(--curriculum-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--curriculum-color) 25%, transparent);
}

.curriculum-week__icon--blue,
.curriculum-week__topic--blue {
    --curriculum-color: #1e3a8a;
}

.curriculum-week__icon--violet,
.curriculum-week__topic--violet {
    --curriculum-color: #4c1d95;
}

.curriculum-week__icon--teal,
.curriculum-week__topic--teal {
    --curriculum-color: #0f766e;
}

.curriculum-week__icon--amber,
.curriculum-week__topic--amber {
    --curriculum-color: #92400e;
}

.curriculum-week__icon--pink,
.curriculum-week__topic--pink {
    --curriculum-color: #9d174d;
}

.curriculum-week__icon--indigo,
.curriculum-week__topic--indigo {
    --curriculum-color: #3730a3;
}

.curriculum-week__icon--emerald,
.curriculum-week__topic--emerald {
    --curriculum-color: #065f46;
}

.curriculum-week__icon--orange,
.curriculum-week__topic--orange {
    --curriculum-color: #9a3412;
}

.curriculum-week__icon--rose,
.curriculum-week__topic--rose {
    --curriculum-color: #9f1239;
}

.curriculum-week__icon--sky,
.curriculum-week__topic--sky {
    --curriculum-color: #0c4a6e;
}

/* -------------------------------------------------------------------------
   Curriculum outcomes + tagline (Section 7)
   A light, elevated panel listing what graduates can do, followed by a
   two-line pull-quote that closes the section on a confident note.
   ------------------------------------------------------------------------- */
.curriculum-outcome {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    border-radius: 1.75rem;
    padding: 2px;
    background: linear-gradient(135deg, #1e3a8a, #4c1d95, #0f766e);
    box-shadow: 0 30px 60px -30px rgba(2, 15, 33, .3);
}

.curriculum-outcome__inner {
    border-radius: calc(1.75rem - 2px);
    background: #fff;
    padding: 2.5rem 2rem;
}

.curriculum-outcome__intro {
    max-width: 34rem;
    margin: .75rem auto 0;
    font-size: .9375rem;
    color: rgb(107 114 128);
}

.curriculum-outcome__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 2rem;
}

.curriculum-outcome__item {
    display: flex;
    align-items: center;
    gap: .875rem;
}

.curriculum-outcome__item p {
    font-size: .875rem;
    font-weight: 600;
    color: rgb(4 30 66);
}

.curriculum-outcome__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    width: 2.75rem;
    border-radius: 9999px;
    color: #fff;
    background: var(--outcome-color);
    box-shadow: 0 8px 16px -6px var(--outcome-color);
}

.curriculum-outcome__icon svg {
    height: 1.25rem;
    width: 1.25rem;
}

.curriculum-outcome__icon--blue {
    --outcome-color: #1e3a8a;
}

.curriculum-outcome__icon--violet {
    --outcome-color: #4c1d95;
}

.curriculum-outcome__icon--teal {
    --outcome-color: #0f766e;
}

.curriculum-outcome__icon--amber {
    --outcome-color: #92400e;
}

.curriculum-outcome__icon--pink {
    --outcome-color: #9d174d;
}

.curriculum-outcome__icon--indigo {
    --outcome-color: #3730a3;
}

@media (min-width: 640px) {
    .curriculum-outcome__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 2rem;
    }
}

/* -------------------------------------------------------------------------
   Curriculum two-column desktop layout (Section 7)
   Below 1024px the week-by-week accordion and the "By the End of This
   Course" outcome panel stack vertically as before. At 1024px and up they
   sit side by side instead — the syllabus on the left, the outcome panel
   pinned alongside it on the right (sticky, so it stays visible while the
   visitor scrolls and expands accordion rows) — a layout pattern common
   to professional course/bootcamp sites rather than one long single column.
   ------------------------------------------------------------------------- */
.curriculum-columns {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .curriculum-columns {
        display: grid;
        grid-template-columns: 1.55fr 1fr;
        align-items: start;
        gap: 2.5rem;
    }

    .curriculum-columns .curriculum-weeks,
    .curriculum-columns .curriculum-outcome {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    .curriculum-columns .curriculum-outcome {
        position: sticky;
        top: 6rem;
    }

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

.curriculum-tagline {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.curriculum-tagline p {
    font-size: 1.125rem;
    font-weight: 600;
    color: rgb(30 58 138);
}

.curriculum-tagline p:last-child {
    margin-top: .25rem;
    font-size: 1.375rem;
    font-weight: 800;
    color: rgb(4 30 66);
}

/* -------------------------------------------------------------------------
   Eligibility list (Section 6)
   A clean two-column checklist of qualifying backgrounds, each rendered as
   a soft bordered card (not a heavy decorative tile) so it stays scannable
   like a straightforward set of points while feeling more premium than
   plain text rows. Collapses to a single column on narrow phones.
   ------------------------------------------------------------------------- */
.eligibility-list__lead {
    font-size: 1rem;
    font-weight: 600;
    color: rgb(4 30 66);
}

.eligibility-list__lead strong {
    color: rgb(0 71 255);
}

.eligibility-list {
    margin-top: 1.25rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: .625rem;
}

@media (min-width: 480px) {
    .eligibility-list {
        grid-template-columns: repeat(2, 1fr);
        gap: .75rem;
    }
}

.eligibility-list__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    border-radius: .875rem;
    border: 1px solid rgb(226 232 240);
    background: rgb(248 250 252);
    padding: .75rem .875rem;
    transition: transform .2s var(--ease-premium), box-shadow .2s var(--ease-premium), border-color .2s var(--ease-premium), background-color .2s var(--ease-premium);
}

.eligibility-list__item:hover {
    transform: translateY(-2px);
    border-color: rgb(167 243 208);
    background: #fff;
    box-shadow: 0 12px 24px -16px rgba(5, 150, 105, .45);
}

.eligibility-list__item p {
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: rgb(4 30 66);
}

.eligibility-list__check {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 1.75rem;
    width: 1.75rem;
    border-radius: 9999px;
    color: #fff;
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 6px 14px -4px rgba(5, 150, 105, .5);
}

.eligibility-list__check svg {
    height: .875rem;
    width: .875rem;
}

.eligibility-list__note {
    margin-top: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    border-radius: .75rem;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    padding: .75rem 1rem;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.5;
    color: rgb(30 64 175);
}

.eligibility-list__note svg {
    height: 1.125rem;
    width: 1.125rem;
    flex-shrink: 0;
    margin-top: .0625rem;
    color: #3b82f6;
}

@media (min-width: 640px) {
    .eligibility-list__item p {
        font-size: .875rem;
    }
}

/* Trust Strip marquee (Section 2): infinite horizontal auto-scroll of the
   trust-point pills. The pill list is duplicated in the Blade template and
   this animation slides the track left by exactly one set's width (-50%),
   creating a seamless loop. */
@keyframes trust-marquee-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.trust-marquee__track {
    animation: trust-marquee-scroll 25s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .trust-marquee__track {
        animation: none;
    }
}

/* -------------------------------------------------------------------------
   Career Transformation before/after (Section 4)
   Dark, tech-styled comparison: the "Before" card is muted/dashed to read
   as the lesser state, the "After" card glows with the brand color to read
   as the upgrade, and an arrow between them (rotated to point down on
   mobile, right on desktop) makes the "this becomes that" narrative literal.
   ------------------------------------------------------------------------- */
.transformation-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
}

.transformation-card {
    border-radius: 1.25rem;
    padding: 1.75rem;
}

.transformation-card--before {
    background: rgba(255, 255, 255, .03);
    border: 1px dashed rgba(255, 255, 255, .18);
}

.transformation-card--after {
    background: linear-gradient(160deg, rgba(61, 120, 255, .22), rgba(124, 58, 237, .08), rgba(255, 255, 255, .03));
    border: 1px solid rgba(61, 120, 255, .45);
    box-shadow: 0 25px 60px -20px rgba(0, 71, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.transformation-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 1.375rem;
    width: 1.375rem;
    margin-top: .0625rem;
    border-radius: 9999px;
}

.transformation-icon svg {
    height: .75rem;
    width: .75rem;
}

.transformation-icon--before {
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .5);
}

.transformation-icon--after {
    background: var(--transformation-color, #0047ff);
    color: #fff;
    box-shadow: 0 0 12px var(--transformation-color, rgba(0, 71, 255, .6));
}

.transformation-icon--blue {
    --transformation-color: #0047ff;
}

.transformation-icon--violet {
    --transformation-color: #7c3aed;
}

.transformation-icon--teal {
    --transformation-color: #0d9488;
}

.transformation-icon--amber {
    --transformation-color: #d97706;
}

.transformation-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem 0;
}

.transformation-arrow svg {
    height: 2rem;
    width: 2rem;
    color: #a78bfa;
    filter: drop-shadow(0 0 10px rgba(124, 58, 237, .6));
    transform: rotate(90deg);
}

.transformation-quote {
    display: inline-block;
    border-radius: 9999px;
    padding: .75rem 1.75rem;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

@media (min-width: 1024px) {
    .transformation-grid {
        grid-template-columns: 1fr auto 1fr;
        gap: 2rem;
    }

    .transformation-arrow svg {
        transform: rotate(0deg);
    }
}

/* -------------------------------------------------------------------------
   Hero stat strip (Section 1)
   Mobile (below 640px): stacked single column, compact card height and
   smaller text.
   Tablet/desktop (640px and up): breaks out of the hero's centered
   max-w-4xl column to span the full viewport width, so the first card
   sits exactly 5vw from the left edge, the third sits 5vw from the right
   edge, and the middle card lands dead-center on the screen. Each card is
   a fixed 25vw wide; the math works out so the two gaps between cards are
   equal automatically: 5vw + 25vw + gap + 25vw + gap + 25vw + 5vw = 100vw.
   ------------------------------------------------------------------------- */

.hero-stat-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: .875rem;
    margin-top: 2.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 2.5rem;
}

/* Mobile: compact horizontal cards — icon on the left, value + label
   stacked on the right (left-aligned text). Padding matches .section's
   base 1rem exactly, so the cards' edges line up with the hero content
   (badge, heading, CTA) above them instead of sitting slightly narrower. */
.hero-stat-cell {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    text-align: left;
    padding: 1rem 1.125rem;
    border-radius: 1rem;
    border: 1px solid rgba(0, 71, 255, .4);
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    box-shadow: 0 12px 30px -16px rgba(0, 71, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(4px);
    transition: transform .2s var(--ease-premium), border-color .2s var(--ease-premium);
}

.hero-stat-cell:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 71, 255, .65);
}

.hero-stat-cell__text {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.hero-stat-cell__value {
    font-size: 1.375rem;
    line-height: 1.1;
    font-weight: 800;
    color: #fff;
}

.hero-stat-cell__label {
    font-size: .75rem;
    line-height: 1.3;
    font-weight: 500;
    color: #fff;
}

/* A soft radial glow tinted per stat, on top of a frosted circle, echoing
   the varied avatar/logo colors a photo-based stat strip would have —
   without needing real photos or partner logos. */
.hero-stat-cell__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    width: 2.75rem;
    border-radius: 9999px;
    color: #fff;
    background: radial-gradient(circle at 30% 30%, var(--glow-color), rgba(255, 255, 255, .06));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 24px -8px var(--glow-color);
    transition: transform .2s var(--ease-premium);
}

.hero-stat-cell:hover .hero-stat-cell__icon {
    transform: translateY(-3px) scale(1.05);
}

.hero-stat-cell__icon svg {
    height: 1.125rem;
    width: 1.125rem;
}

.hero-stat-cell__icon--blue {
    --glow-color: rgba(61, 120, 255, .55);
}

.hero-stat-cell__icon--violet {
    --glow-color: rgba(167, 139, 250, .55);
}

.hero-stat-cell__icon--teal {
    --glow-color: rgba(45, 212, 191, .55);
}

/* Tablet/desktop (640px and up): breaks out of the hero's centered
   max-w-4xl column to span the full viewport width, so the first card
   sits exactly 5vw from the left edge, the third sits 5vw from the right
   edge, and the middle card lands dead-center on the screen. Each card is
   a fixed 25vw wide; the math works out so the two gaps between cards are
   equal automatically: 5vw + 25vw + gap + 25vw + gap + 25vw + 5vw = 100vw.
   Cards switch back to a vertical layout (icon under the text) and use
   align-items: stretch so all three match the height of the tallest one,
   regardless of how many lines each label wraps to. */
@media (min-width: 640px) {
    .hero-stat-strip {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        gap: 0;
        width: 100vw;
        max-width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        box-sizing: border-box;
        padding-left: 5vw;
        padding-right: 5vw;
        padding-bottom: 3.5rem;
        margin-top: 3.5rem;
    }

    .hero-stat-cell {
        width: 25vw;
        flex: 0 0 25vw;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: .75rem;
        padding: 1.5rem 1.25rem;
    }

    .hero-stat-cell__text {
        gap: .375rem;
    }

    .hero-stat-cell__value {
        font-size: 2.5rem;
    }

    .hero-stat-cell__label {
        font-size: .9375rem;
    }

    .hero-stat-cell__icon {
        height: 3rem;
        width: 3rem;
    }

    .hero-stat-cell__icon svg {
        height: 1.375rem;
        width: 1.375rem;
    }
}

/* -------------------------------------------------------------------------
   Section image cards (Career Problem, Hands-on Kit, Offline Bootcamp)
   A "floating" photo card: fixed aspect ratio matching the source photos
   (roughly 8:5) so object-fit: cover shows the image edge-to-edge with no
   letterboxing, plus a slight always-on 3D tilt (perspective + rotate) and
   a soft shadow so it reads as a card floating above the page rather than
   a flat, cropped screenshot. The tilt eases back on hover for a subtle
   "settle toward the viewer" effect.
   ------------------------------------------------------------------------- */
.section-photo-card {
    aspect-ratio: 8 / 5;
    perspective: 1200px;
}

.section-photo-card--wide {
    aspect-ratio: 16 / 9;
}

.section-photo-card__inner {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    overflow: hidden;
    transform: rotateY(-6deg) rotateX(3deg);
    box-shadow: 0 30px 60px -20px rgba(4, 30, 66, .35), 0 10px 20px -10px rgba(4, 30, 66, .2);
    transition: transform .4s var(--ease-premium), box-shadow .4s var(--ease-premium);
}

.section-photo-card:hover .section-photo-card__inner {
    transform: rotateY(0deg) rotateX(0deg);
    box-shadow: 0 20px 40px -15px rgba(4, 30, 66, .3), 0 8px 16px -8px rgba(4, 30, 66, .18);
}

.section-photo-card__inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
    .section-photo-card__inner {
        transition: none;
    }
}

/* -------------------------------------------------------------------------
   Program Journey (Section 6)
   A compact stepper instead of a tall scrolling timeline, sized so all 9
   steps plus the heading fit within roughly one screen on any device.
   Mobile/tablet (below 1024px): a single vertical column with a connecting
   line threading through every circle — still reads clearly as a path.
   Desktop (1024px+): switches to one horizontal row of all 9 nodes with
   the line running left-to-right through them instead.
   ------------------------------------------------------------------------- */
.journey-compact {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .875rem;
}

.journey-compact::before {
    content: '';
    position: absolute;
    top: .25rem;
    bottom: .25rem;
    left: 1.125rem;
    width: 2px;
    background: linear-gradient(180deg, rgba(97, 161, 255, .85), rgba(97, 161, 255, .15));
}

.journey-node {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .875rem;
    text-align: left;
}

.journey-node__circle {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    width: 2.25rem;
    border-radius: 9999px;
    background: var(--journey-color);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    box-shadow: 0 0 0 4px rgb(2 15 33), 0 0 12px var(--journey-color);
}

.journey-node__title {
    font-size: .8125rem;
    line-height: 1.25;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
}

.journey-node__circle--blue {
    --journey-color: #3d78ff;
}

.journey-node__circle--violet {
    --journey-color: #a78bfa;
}

.journey-node__circle--teal {
    --journey-color: #2dd4bf;
}

.journey-node__circle--amber {
    --journey-color: #fbbf24;
}

@media (min-width: 1024px) {
    .journey-compact {
        flex-direction: row;
        align-items: flex-start;
        gap: 0;
        padding-top: 2.75rem;
    }

    .journey-compact::before {
        top: 4.125rem;
        bottom: auto;
        left: calc(100% / 18);
        right: calc(100% / 18);
        width: auto;
        height: 2px;
    }

    .journey-node {
        flex: 1 1 0;
        flex-direction: column;
        gap: .5rem;
        text-align: center;
        padding: 0 .25rem;
    }

    /* Zigzag: every other node lifts up above the line instead of sitting
       on it, connected back down by a short stem — turns the flat row
       into a winding path rather than a straight line of dots. */
    .journey-node:nth-child(even) {
        margin-top: -2.75rem;
        flex-direction: column-reverse;
    }

    .journey-node:nth-child(even)::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        width: 2px;
        height: 1.375rem;
        background: rgba(255, 255, 255, .2);
        transform: translateX(-50%);
        z-index: 0;
    }

}

/* Light variant of the journey stepper, for use on light section
   backgrounds (Section 5 — Your Journey After Joining) instead of the
   default dark-hero styling above. */
.journey-compact--light .journey-node__circle {
    box-shadow: 0 0 0 4px rgb(249 250 251), 0 8px 16px -6px var(--journey-color);
}

.journey-compact--light .journey-node__title {
    color: rgb(4 30 66);
}

.journey-compact--light::before {
    background: linear-gradient(180deg, rgba(0, 71, 255, .5), rgba(0, 71, 255, .1));
}

@media (min-width: 1024px) {
    .journey-compact--light::before {
        background: linear-gradient(90deg, rgba(0, 71, 255, .5), rgba(0, 71, 255, .1));
    }
}

/* -------------------------------------------------------------------------
   Hero stat strip — 4-item variant (Section 1)
   Same breakout technique as the 3-item strip, recalculated for a 4th
   card: 5vw padding on each side leaves 90vw for content; four 18vw cards
   total 72vw, and space-between distributes the remaining 18vw across the
   three gaps automatically (6vw each), keeping the same proportions as
   the original 3-card layout.
   ------------------------------------------------------------------------- */
@media (min-width: 640px) {
    .hero-stat-strip--four .hero-stat-cell {
        width: 18vw;
        flex: 0 0 18vw;
    }
}

/* -------------------------------------------------------------------------
   Formula strip (Section 4 — The Career Promise)
   "Technical Skills + Teaching Skills + ... = School-Ready AI Trainer"
   rendered as a single wrapping row of pill terms flowing straight into
   the "=" and result pill, so the equation stays compact on every screen
   instead of stacking into separate full-width rows.
   ------------------------------------------------------------------------- */
.formula-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .625rem .75rem;
    max-width: 48rem;
    margin: 0 auto;
}

.formula-strip__item {
    border-radius: 9999px;
    padding: .5rem 1.125rem;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    white-space: nowrap;
}

.formula-strip__op {
    font-size: 1.125rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .4);
}

.formula-strip__op--eq {
    font-size: 1.25rem;
    color: #2dd4bf;
}

.formula-strip__result {
    border-radius: 9999px;
    padding: .625rem 1.375rem;
    font-size: .8125rem;
    font-weight: 800;
    color: #021f42;
    background: linear-gradient(135deg, #fff, #cfe0ff);
    box-shadow: 0 14px 28px -12px rgba(255, 255, 255, .45);
    white-space: nowrap;
}

@media (min-width: 640px) {
    .formula-strip__item {
        padding: .625rem 1.375rem;
        font-size: .8125rem;
    }

    .formula-strip__result {
        padding: .75rem 1.75rem;
        font-size: .9375rem;
    }
}

/* -------------------------------------------------------------------------
   Transformation path visual (Section 4.5)
   The full illustrated roadmap graphic, framed as a clean card. Shown at
   its natural aspect ratio (never cropped) so every step panel inside the
   image stays intact; the accessible pill-chain below still carries the
   same 8 steps as real text for mobile/screen-reader users.
   ------------------------------------------------------------------------- */
.transformation-visual {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    border: 1px solid rgb(226 232 240);
    box-shadow: 0 30px 70px -35px rgba(2, 15, 33, .35);
    transition: transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium);
}

.transformation-visual:hover {
    transform: translateY(-4px);
    box-shadow: 0 36px 80px -32px rgba(2, 15, 33, .4);
}

.transformation-visual img {
    display: block;
    width: 100%;
    height: auto;
}

/* -------------------------------------------------------------------------
   Transformation path (Section 4.5 — Degree to Trainer Transformation)
   A single-row strip of step pills joined by arrows. On narrow screens it
   scrolls horizontally instead of wrapping into several tall rows; from
   lg upward there's enough room for it to wrap into a centered block.
   ------------------------------------------------------------------------- */
.transformation-path {
    overflow-x: auto;
    padding-bottom: .375rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.transformation-path__track {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: max-content;
    margin: 0 auto;
}

.transformation-path__arrow {
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    color: #d1d5db;
}

@media (min-width: 1024px) {
    .transformation-path {
        overflow: visible;
        padding-bottom: 0;
    }

    .transformation-path__track {
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
        row-gap: .75rem;
    }
}

/* -------------------------------------------------------------------------
   ROI panel (Section 12 — Return on Investment)
   Two side-by-side columns (investment vs typical salary) joined by an
   arrow, so the payoff of the fee reads as a direct before/after rather
   than two unrelated numbers.
   ------------------------------------------------------------------------- */
.roi-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    max-width: 52rem;
    margin: 0 auto;
}

.roi-panel__col {
    flex: 1 1 0;
    border-radius: 1.25rem;
    background: #fff;
    border: 1px solid rgb(226 232 240);
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 15px 35px -20px rgba(2, 15, 33, .15);
}

.roi-panel__col--highlight {
    border: 2px solid #059669;
    box-shadow: 0 25px 50px -20px rgba(5, 150, 105, .35);
}

.roi-panel__label {
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgb(107 114 128);
}

.roi-panel__amount {
    margin-top: .75rem;
    font-size: 2rem;
    font-weight: 800;
    color: rgb(4 30 66);
}

.roi-panel__col--highlight .roi-panel__amount {
    color: #059669;
}

.roi-panel__unit {
    font-size: 1rem;
    font-weight: 600;
    color: rgb(107 114 128);
}

.roi-panel__breakdown {
    margin-top: .75rem;
    font-size: .8125rem;
    color: rgb(107 114 128);
}

.roi-panel__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

.roi-panel__arrow svg {
    height: 1.75rem;
    width: 1.75rem;
    color: #7c3aed;
    transform: rotate(90deg);
}

@media (min-width: 640px) {
    .roi-panel {
        flex-direction: row;
    }

    .roi-panel__arrow svg {
        transform: rotate(0deg);
    }
}

/* -------------------------------------------------------------------------
   Founder card (Section 16 — Our Story)
   The real founder photo shown as a full, uncropped portrait card (same
   floating-photo treatment used elsewhere on the page) instead of a tiny
   circular face-crop, so the office/branding context stays sharp and
   legible rather than looking like a cluttered, low-quality thumbnail.
   ------------------------------------------------------------------------- */
.founder-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    max-width: 56rem;
    margin: 0 auto;
    text-align: center;
}

.founder-card__photo {
    flex-shrink: 0;
    width: 15rem;
}

.section-photo-card--portrait {
    aspect-ratio: 3 / 4;
}

.founder-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.founder-card__message {
    font-size: 1rem;
    line-height: 1.7;
    color: rgb(55 65 81);
}

.founder-card__name {
    margin-top: 1.25rem;
    font-size: 1rem;
    font-weight: 700;
    color: rgb(4 30 66);
}

.founder-card__role {
    margin-top: .125rem;
    font-size: .8125rem;
    font-weight: 600;
    color: rgb(0 71 255);
}

@media (min-width: 640px) {
    .founder-card {
        flex-direction: row;
        text-align: left;
    }

    .founder-card__photo {
        width: 17rem;
    }

    .founder-card__body {
        align-items: flex-start;
    }
}

/* -------------------------------------------------------------------------
   Job Guarantee checklist (Section 11)
   A left-to-right flowing grid of checkbox-style cards instead of a
   vertical list — every condition reads as one already-ticked checklist
   item (colored checkmark + title + short explanation), so the 9
   conditions scan quickly across rows rather than down one long column.
   ------------------------------------------------------------------------- */
.checklist-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-width: 64rem;
    margin: 0 auto;
}

.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid rgb(226 232 240);
    border-top: 3px solid var(--checklist-color);
    padding: 1.25rem 1.375rem;
    box-shadow: 0 12px 28px -18px rgba(2, 15, 33, .15);
    transition: transform .2s var(--ease-premium), box-shadow .2s var(--ease-premium);
}

.checklist-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px -16px color-mix(in srgb, var(--checklist-color) 35%, transparent);
}

.checklist-item__check {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    width: 2.25rem;
    border-radius: 9999px;
    color: #fff;
    background: var(--checklist-color);
    box-shadow: 0 6px 14px -4px var(--checklist-color);
}

.checklist-item__check svg {
    height: 1.125rem;
    width: 1.125rem;
}

.checklist-item--blue {
    --checklist-color: #0047ff;
}

.checklist-item--violet {
    --checklist-color: #7c3aed;
}

.checklist-item--teal {
    --checklist-color: #0d9488;
}

.checklist-item__title {
    font-size: .9375rem;
    font-weight: 700;
    color: rgb(4 30 66);
}

.checklist-item__desc {
    margin-top: .25rem;
    font-size: .8125rem;
    color: rgb(107 114 128);
}

@media (min-width: 640px) {
    .checklist-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .checklist-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* -------------------------------------------------------------------------
   Selection process (Section 15)
   A vertical timeline of horizontal step-cards: a numbered circle on the
   left connected by a line running down to the next step, each paired
   with a wide card (icon + title + one-line description) — reads as a
   clear, ordered process rather than a grid of disconnected stages.
   ------------------------------------------------------------------------- */
.process-flow {
    max-width: 44rem;
    margin: 0 auto;
}

.process-step {
    position: relative;
    display: flex;
    gap: 1.25rem;
    padding-bottom: 1.5rem;
}

.process-step:last-child {
    padding-bottom: 0;
}

.process-step__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.process-step__number {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 9999px;
    background: var(--process-color);
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    box-shadow: 0 8px 16px -6px var(--process-color);
}

.process-step__line {
    flex: 1 1 auto;
    width: 2px;
    min-height: 1.5rem;
    margin-top: .375rem;
    background: linear-gradient(180deg, var(--process-color), rgb(226 232 240));
}

.process-step:last-child .process-step__line {
    display: none;
}

.process-step__card {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 1rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid rgb(226 232 240);
    padding: 1.125rem 1.375rem;
    box-shadow: 0 12px 28px -18px rgba(2, 15, 33, .15);
    transition: transform .2s var(--ease-premium), border-color .2s var(--ease-premium), box-shadow .2s var(--ease-premium);
}

.process-step:hover .process-step__card {
    transform: translateX(4px);
    border-color: var(--process-color);
    box-shadow: 0 16px 32px -16px color-mix(in srgb, var(--process-color) 35%, transparent);
}

.process-step__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    width: 2.75rem;
    border-radius: .75rem;
    color: var(--process-color);
    background: color-mix(in srgb, var(--process-color) 12%, transparent);
}

.process-step__icon svg {
    height: 1.375rem;
    width: 1.375rem;
}

.process-step__title {
    font-size: .9375rem;
    font-weight: 700;
    color: rgb(4 30 66);
}

.process-step__desc {
    margin-top: .1875rem;
    font-size: .8125rem;
    color: rgb(107 114 128);
}

.process-step--blue {
    --process-color: #0047ff;
}

.process-step--violet {
    --process-color: #7c3aed;
}

.process-step--teal {
    --process-color: #0d9488;
}

@media (min-width: 640px) {
    .process-step__card {
        padding: 1.25rem 1.75rem;
    }

    .process-step__title {
        font-size: 1rem;
    }

    .process-step__desc {
        font-size: .875rem;
    }
}