/* ===========================================
   RESET
=========================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
    background: #fff;
    color: #111;
}

/* ===========================================
   ROADMAP SECTION
=========================================== */

.roadmap-section {
    position: relative;
    overflow: hidden;
    padding: var(--space-section) 0;
    background: radial-gradient(circle at 8% 12%, rgba(255, 102, 0, .17), transparent 27%),
        radial-gradient(circle at 94% 74%, rgba(66, 111, 136, .16), transparent 32%),
        linear-gradient(145deg, #111416, #17191a);
}

.roadmap-section::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .13;
    background-image: linear-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px);
    background-size: 52px 52px;
    pointer-events: none;
}

.container {
    max-width: 1180px;
    width: 92%;
    margin: auto;
    position: relative;
    z-index: 2;
}

/* ===========================================
   HEADING
=========================================== */

.roadmap-heading {
    text-align: center;
    margin-bottom: var(--space-block);
    margin-top: 0;
}

/* This one sits above the shared section size on purpose — it is the
   roadmap's hero line. Was 62px, now a touch smaller but still the
   biggest heading on the page. */

.roadmap-heading h2 {
    font-family: "Inter", sans-serif;
    font-size:var(--fs-section);
    font-weight:800;
    color: #f7f8f7;
    line-height: 1.15;
    position: relative;
    display: inline-block;
}

.roadmap-heading .bao-spark-wrap {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.roadmap-heading .bao-last,
.roadmap-heading span.bao-last {
    color: #FF7A00;
}

.heading-accent {
    position: absolute;
    width: 32px;       /* image ko bada/chhota karne ke liye */
    height: auto;
    top: 4px;
    right: -30px;      /* Here ke paas lane ke liye */
}

/* ===========================================
   ROADMAP ITEM
=========================================== */

.roadmap-item {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    column-gap: 30px;
    margin-bottom: var(--space-block);
}

/* ---------------- Module 1 ---------------- */

.module-1 .roadmap-content {
    grid-column: 1 / 8;
    padding-left: 65px;
}

.module-1 .roadmap-image {
    grid-column: 8 / 13;
    justify-self: end;
    position: relative;
}

/* Module one is a complete app-screen image, so it is intentionally shown
   without the generic illustration card around it. */
.module-1 .roadmap-image > img {
    display: block;
    width: min(100%, 280px);
    height: auto;
    /* The source mockup has an opaque near-white canvas in its four outer
       corners. Clipping it to the phone's own rounded silhouette leaves the
       white app interface intact while removing that canvas. */
    border-radius: 13% / 6%;
    box-shadow: 0 16px 30px rgba(0, 0, 0, .24);
}

/* Replace the sample account name in the first app screen. */
.module1-user-name {
    position: absolute;
    top: 10.7%;
    /* The image is centred in its grid cell. Start from that centred phone
       edge, then use the original name's 56px inset. */
    left: calc(50% - 84px);
    z-index: 1;
    padding: 0 3px;
    color: #172033;
    background: #fff;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

/* ---------------- Module 2 ---------------- */

.module-2 .roadmap-image {
    grid-column: 1 / 6;
    justify-self: start;
    position: relative;
    display: block;
    width: 280px;
    height: 616px;
}

/* Keep every roadmap app screen in the same phone frame. */
.module2-phone {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 13% / 6%;
    background: #fff;
    box-shadow: 0 16px 30px rgba(0, 0, 0, .24);
}

.module2-phone img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Replace the sample learner name in the second app screen. */
.module2-user-name {
    position: absolute;
    top: 10.8%;
    left: 15.5%;
    z-index: 1;
    padding: 0 3px;
    color: #172033;
    background: #fff;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .module-2 .roadmap-image {
        width: min(100%, 280px);
    }
}

.module-2 .roadmap-content {
    grid-column: 6 / 13;
    padding-right: 40px;
}

/* ---------------- Module 3 ---------------- */

.module-3 .roadmap-content {
    grid-column: 1 / 8;
    padding-left: 65px;
}

.module-3 .roadmap-image {
    grid-column: 8 / 13;
    justify-self: end;
    position: relative;
    display: block;
    /* The same single-phone frame used by module one. */
    width: 280px;
    height: 616px;
}

/* The connector paths overlap adjacent roadmap rows with negative margins.
   Keep module three above that path so its two endpoint dots stay outside the
   phone rather than being painted over the course screen. */
.module-3 {
    position: relative;
    z-index: 2;
    margin-top: 48px;
    margin-bottom: calc(var(--space-block) + 48px);
}

/* The course-detail capture is taller than a phone, so its top course view
   is clipped into the same fixed mobile frame as module one. */
.module3-phone {
    position: absolute;
    overflow: hidden;
    aspect-ratio: 435 / 957;
    border-radius: 13% / 6%;
    background: #fff;
    box-shadow: 0 16px 30px rgba(0, 0, 0, .24);
}

.module3-phone img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.module3-phone-main {
    z-index: 2;
    top: 0;
    right: 0;
    width: 100%;
}

.module3-phone-main img {
    object-position: center top;
}

/* Replace the sample instructor name in the course-details screen. */
.module3-mentor-name {
    position: absolute;
    top: 33.8%;
    left: 18%;
    z-index: 3;
    padding: 0 3px;
    color: #172033;
    background: #fff;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .module-3 .roadmap-image {
        width: min(100%, 280px);
    }
}

/* ---------------- Module 4 ---------------- */

.module-4 .roadmap-image {
    grid-column: 1 / 6;
    justify-self: start;
    position: relative;
    display: block;
    width: 280px;
    height: 616px;
}

/* Module four uses the same portrait phone footprint as modules one and
   three. The tall source is clipped to its profile-and-progress view. */
.module4-phone {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 13% / 6%;
    background: #f8f8f8;
    box-shadow: 0 16px 30px rgba(0, 0, 0, .24);
}

.module4-phone img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Covers the sample name embedded in the image and shows an Indian name at
   the same point in the profile header. */
.module4-user-name {
    position: absolute;
    top: 20.8%;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    padding: 0 5px;
    color: #111827;
    background: #f8f8f8;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .module-4 .roadmap-image {
        width: min(100%, 280px);
    }
}

.module-4 .roadmap-content {
    grid-column: 6 / 13;
    padding-right: 40px;
}

/* ===========================================
   CONTENT
=========================================== */

.roadmap-content {
    width: 100%;
    max-width: none;
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 122, 0, .14), rgba(18, 25, 27, .74));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 16px 32px rgba(0, 0, 0, .18);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.roadmap-item .roadmap-content {
    padding: clamp(22px, 3vw, 34px);
}

.roadmap-content:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 139, 36, .65);
    background: linear-gradient(135deg, rgba(255, 122, 0, .23), rgba(22, 30, 32, .86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 21px 36px rgba(0, 0, 0, .28), 0 0 30px rgba(255, 102, 0, .12);
}

/* A step above --fs-sub: these read as the roadmap's own sub-titles. */
.roadmap-content h3 {
    font-family: "Inter", sans-serif;
    font-size: clamp(20px,2.1vw,30px);
    font-weight: 900;
    color: #FF7A00;
    margin-bottom: 20px;
    line-height: 1.25;
    letter-spacing: -0.3px;
}

/* Keep the module prefix readable against the dark section background. */
.roadmap-content h3 .roadmap-module-label {
    color: #f7f8f7;
}

.roadmap-content h4 {
    margin: 0 0 12px;
    color: #FF7A00;
    font-family: "Inter", sans-serif;
    font-size: clamp(20px, 2.1vw, 30px);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -0.3px;
}

.roadmap-content p {
    font-family: "Inter", sans-serif;
    font-size: var(--fs-lead);
    font-weight: 400;
    line-height: 1.35;
    color: #d0d8da;
    margin: 0;
}

.roadmap-points {
    display: grid;
    gap: 7px;
    margin: 18px 0 0;
    padding: 0;
    color: #f7f8f7;
    font: 600 14px/1.35 "Inter", sans-serif;
    list-style: none;
}

.roadmap-points li {
    display: flex;
    align-items: center;
    gap: 9px;
}

.roadmap-points li::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #FF7A00;
}

@media (prefers-reduced-motion: reduce) {
    .roadmap-content { transition: none; }
}

/* ===========================================
   IMAGE
=========================================== */

.roadmap-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Fills its grid column instead of sitting at a fixed 324px, so the card
   keeps its weight next to the text. Ratio is the original 324x259. */

.roadmap-image-wrapper {
    width: 100%;
    max-width: 460px;
    aspect-ratio: 324 / 259;
    height: auto;
    border-radius: 30px;
    overflow: visible;
    transition: .45s ease;
    position: relative;
}

.roadmap-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .45s ease;
}

.roadmap-image-wrapper:hover img {
    transform: scale(1.08);
}

/* ===========================================
   TIMELINE (Enlarged paths & indicator nodes)
=========================================== */

.roadmap-timeline {
    display: flex;
    justify-content: center;
    align-items: center; 
    /* justify-content: space-between; */
    margin: -35px 0; /* Pulls rows together slightly to connect nodes visually */
    position: relative;
    z-index: 1;
    width: 100%;
    gap: 20px;
    transform: translateY(-25px);
    
}

.roadmap-timeline img {
    max-width: none; /* Expands paths to span the alternating layout column gap */
    width: auto;
    height: 270px;
    display: block;
}
.timeline-1 img{
    width: 937px;
    max-width: none;
}

/* Timeline 2 */
.timeline-2 img{
    width: 850px;
    max-width: none;
}

/* Timeline 3 */
.timeline-3 img{
    width: 850px;
    max-width: none;
}

/* ===========================================
   BACKGROUND DECORATIONS (Sizing & Coverage)
=========================================== */

.roadmap-bg-pattern {
    position: absolute;
    z-index: 1;
    /* opacity: .35; */
    pointer-events: none;
}

.pattern-left-top {
    left: -105px;
    top: 28px;
    width: 380px; /* Enlarged from 170px */
    opacity: 0.9;
    margin-left: 120px;
    margin-top: 150px;
}

.pattern-right-middle {
    right: -95px;
    top: 28%;
    opacity: 0.9;
    width: 380px; /* Enlarged from 170px */
    margin-right: 120px;
    margin-bottom: 110px;
}

.pattern-left-middle {
    left: -100px;
    top: 52%;
    width: 380px; /* Enlarged from 170px */
    opacity: 0.9;
    margin-left: 120px;
    margin-bottom: 150px;
}

.pattern-right-bottom {
    right: -100px;
    bottom: -20px;
    width: 380px; /* Enlarged from 170px */
    opacity: 0.9;
    margin-right: 120px;
    margin-bottom: 50px;
}

/* ===========================================
   SIMULTANEOUS SHIFT REVEAL ANIMATIONS
=========================================== */

/* Base container setup */
.reveal {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.module-wrapper, .roadmap-timeline > .content-container {
    flex: 1;
    margin-left: auto; 
    margin-right: 0; }
/* Set up initial offset states for content & image children */
.reveal .roadmap-content,
.reveal .roadmap-image {
    opacity: 0;
    transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.9s ease;
}

/* Module 1 & 3: Content slides from Left (-50px), Image from Right (50px) */
.module-1 .roadmap-content,
.module-3 .roadmap-content {
    transform: translateX(-50px);
}
.module-1 .roadmap-image,
.module-3 .roadmap-image {
    transform: translateX(50px);
}

/* Module 2 & 4: Image slides from Left (-50px), Content from Right (50px) */
.module-2 .roadmap-image,
.module-4 .roadmap-image {
    transform: translateX(-50px);
}
.module-2 .roadmap-content,
.module-4 .roadmap-content {
    transform: translateX(50px);
}

/* Active State: Triggers simultaneous transition to 0 offset */
.reveal.active {
    opacity: 1;
}

.reveal.active .roadmap-content,
.reveal.active .roadmap-image {
    opacity: 1;
    transform: translateX(0);
}

/* The reveal transform is more specific than the base hover selector. Keep
   the card lift active after a module has entered the viewport. */
.reveal.active .roadmap-content:hover {
    transform: translateY(-6px);
}

/* ===========================================
   TABLET
=========================================== */

@media (max-width:1024px) {
    .roadmap-item {
        gap: 50px;
    }
    /* Stay fluid here too, or the card overflows its column on a narrow
       tablet. The base rule already caps it at 390px. */
    .roadmap-image-wrapper {
        width: 100%;
    }
}

/* ===========================================
   MOBILE
=========================================== */

@media (max-width:768px) {
    .roadmap-heading {
        margin-bottom: var(--space-gap);
    }

    .roadmap-heading h2 {
        font-size: clamp(26px, 6.5vw, 36px);
    }
    
    /* Fixed grid to block layout collapse */
    .roadmap-item,
    .roadmap-item.reverse,
    .module-1,
    .module-2,
    .module-3,
    .module-4 {
        display: flex; 
        flex-direction: column;
        gap: 16px;
        text-align: left;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Keep every step in the same reading order on mobile. */
    .roadmap-item .roadmap-content,
    .module-1 .roadmap-content,
    .module-2 .roadmap-content,
    .module-3 .roadmap-content,
    .module-4 .roadmap-content {
        order: 1;
        width: 100% !important;
        max-width: 100% !important;
        grid-column: auto !important;
        padding: 22px 18px !important;
        box-sizing: border-box !important;
    }

    .roadmap-item .roadmap-image,
    .module-1 .roadmap-image,
    .module-2 .roadmap-image,
    .module-3 .roadmap-image,
    .module-4 .roadmap-image {
        order: 2;
        align-self: center;
        width: min(100%, 250px) !important;
        max-width: 250px !important;
        height: auto !important;
        aspect-ratio: 435 / 957 !important;
        position: relative !important;
        margin: 0 auto !important;
    }

    .module-1 .roadmap-image > img,
    .module-2 .module2-phone,
    .module-3 .module3-phone,
    .module-3 .module3-phone-main,
    .module-4 .module4-phone {
        position: absolute !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 13% / 6% !important;
        overflow: hidden !important;
        box-shadow: 0 16px 30px rgba(0, 0, 0, .24) !important;
    }

    .module-1 .roadmap-image > img,
    .module-2 .module2-phone img,
    .module-3 .module3-phone img,
    .module-4 .module4-phone img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;
    }

    .roadmap-content p {
        line-height: 1.55;
    }
    
    /* Reset horizontal animations to vertical slide on mobile */
    .module-1 .roadmap-content,
    .module-3 .roadmap-content,
    .module-1 .roadmap-image,
    .module-3 .roadmap-image,
    .module-2 .roadmap-image,
    .module-4 .roadmap-image,
    .module-2 .roadmap-content,
    .module-4 .roadmap-content {
        transform: translateY(30px);
    }
    
    .reveal.active .roadmap-content,
    .reveal.active .roadmap-image {
        transform: translateY(0);
    }

    .roadmap-timeline {
        display: none;
    }
    .roadmap-bg-pattern {
        display: none;
    }
}