/* ==================================================
   ESPRIQ MILESTONES PAGE
   ================================================== */

.milestones-main{
    min-height:calc(100vh - 95px);
    color:#fff;
    background:
        radial-gradient(circle at 77% 14%,rgba(0,190,218,.10),transparent 27%),
        radial-gradient(circle at 16% 60%,rgba(239,189,66,.045),transparent 23%),
        #001823;
    overflow:hidden;
}

.milestones-hero{
    position:relative;
    min-height:540px;
    display:grid;
    grid-template-columns:1fr .95fr;
    align-items:center;
    gap:72px;
    padding:88px 7% 72px;
    border-bottom:1px solid rgba(39,195,214,.12);
}

.milestones-hero:before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.22;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(40,202,220,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(40,202,220,.045) 1px,transparent 1px);
    background-size:72px 72px;
    mask-image:linear-gradient(to bottom,#000,transparent 92%);
}

.milestones-copy{
    position:relative;
    z-index:2;
    text-align:right;
}

.milestones-kicker{
    color:#efbd42;
    font-size:14px;
    font-weight:900;
    letter-spacing:2px;
    margin-bottom:18px;
}

.milestones-title{
    margin:0 0 24px;
    font-size:clamp(54px,6vw,88px);
    line-height:.95;
    font-weight:900;
}

.milestones-lead{
    margin:0;
    max-width:760px;
    color:#bfd4de;
    font-size:19px;
    line-height:2;
}

.milestones-actions{
    margin-top:33px;
    display:flex;
    gap:14px;
    direction:rtl;
}

.milestones-btn{
    min-height:52px;
    padding:0 27px;
    border-radius:9px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:15px;
    font-weight:850;
    transition:.2s ease;
}

.milestones-btn.primary{
    background:#efbd42;
    color:#06151d;
    border:1px solid #efbd42;
}

.milestones-btn.secondary{
    color:#fff;
    border:1px solid #0aa7bb;
    background:rgba(0,180,205,.035);
}

.milestones-btn:hover{
    transform:translateY(-2px);
}

/* ==================================================
   HERO TIMELINE
   ================================================== */

.milestone-visual{
    position:relative;
    z-index:2;
    min-height:410px;
    display:grid;
    place-items:center;
}

.timeline-map{
    position:relative;
    width:470px;
    height:390px;
    max-width:100%;
}

.timeline-axis{
    position:absolute;
    left:50%;
    top:36px;
    bottom:36px;
    width:2px;
    transform:translateX(-50%);
    background:
        linear-gradient(
            to bottom,
            rgba(53,220,234,.04),
            rgba(53,220,234,.34),
            rgba(239,189,66,.30),
            rgba(53,220,234,.10)
        );
}

.timeline-progress{
    position:absolute;
    left:50%;
    top:36px;
    width:4px;
    height:0;
    transform:translateX(-50%);
    border-radius:4px;
    background:
        linear-gradient(
            to bottom,
            #35dcea,
            #efbd42
        );
    box-shadow:0 0 18px rgba(53,220,234,.42);
    transition:height .65s ease;
}

.timeline-core{
    position:absolute;
    left:50%;
    top:50%;
    width:155px;
    height:155px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at 50% 35%,rgba(25,177,202,.12),transparent 55%),
        linear-gradient(150deg,rgba(4,49,65,.98),rgba(1,27,39,.98));
    border:1px solid rgba(45,207,228,.38);
    box-shadow:
        0 25px 70px rgba(0,0,0,.30),
        0 0 45px rgba(39,208,228,.07);
    z-index:5;
}

.timeline-core .m-mark{
    color:#35dcea;
    font-size:39px;
    line-height:1;
    font-weight:900;
}

.timeline-core strong{
    margin-top:9px;
    font-size:19px;
}

.timeline-core small{
    margin-top:8px;
    color:#7fa5b3;
    font-size:9px;
    letter-spacing:1.1px;
    white-space:nowrap;
}

.timeline-point{
    position:absolute;
    width:122px;
    min-height:55px;
    padding:10px 12px;
    border:1px solid rgba(42,200,220,.27);
    border-radius:11px;
    background:rgba(1,29,42,.95);
    z-index:4;
    text-align:center;
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.timeline-point .num{
    color:#35dcea;
    font-size:9px;
    font-weight:900;
    letter-spacing:1.4px;
}

.timeline-point strong{
    display:block;
    margin-top:5px;
    font-size:12px;
}

.timeline-point.gold .num{
    color:#efbd42;
}

.timeline-point.active{
    transform:scale(1.06);
    border-color:rgba(53,220,234,.70);
    background:rgba(3,45,59,.98);
    box-shadow:0 0 24px rgba(53,220,234,.13);
}

.timeline-point.gold.active{
    border-color:rgba(239,189,66,.78);
    box-shadow:0 0 24px rgba(239,189,66,.14);
}

.tp1{top:5px;left:42px}
.tp2{top:78px;right:25px}
.tp3{top:167px;left:8px}
.tp4{bottom:76px;right:22px}
.tp5{bottom:3px;left:42px}

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

.milestones-section{
    padding:90px 7%;
}

.milestones-section-head{
    max-width:900px;
    margin-left:auto;
    text-align:right;
    margin-bottom:45px;
}

.milestones-section-head span{
    color:#efbd42;
    font-size:13px;
    font-weight:900;
    letter-spacing:1.5px;
}

.milestones-section-head h2{
    margin:10px 0 15px;
    font-size:42px;
}

.milestones-section-head p{
    margin:0;
    color:#97b2bd;
    font-size:17px;
    line-height:1.9;
}

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

.milestone-card{
    position:relative;
    min-height:270px;
    padding:28px;
    border:1px solid rgba(29,177,197,.19);
    border-radius:15px;
    background:
        linear-gradient(150deg,rgba(2,32,45,.90),rgba(1,21,31,.78));
    overflow:hidden;
    transition:.2s ease;
}

.milestone-card:hover{
    transform:translateY(-5px);
    border-color:rgba(45,211,230,.42);
    box-shadow:0 20px 60px rgba(0,0,0,.22);
}

.milestone-card:before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:3px;
    height:58px;
    background:#efbd42;
}

.milestone-code{
    color:#35d9e9;
    font-size:11px;
    font-weight:900;
    letter-spacing:2px;
}

.milestone-phase{
    margin-top:15px;
    color:#7897a4;
    font-size:9px;
    font-weight:800;
    letter-spacing:1.4px;
}

.milestone-card h3{
    margin:10px 0 12px;
    font-size:19px;
}

.milestone-card p{
    margin:0;
    color:#94aeb9;
    font-size:13px;
    line-height:1.9;
}

.milestone-band{
    margin:0 7% 100px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border:1px solid rgba(35,196,215,.18);
    border-radius:16px;
    background:rgba(1,28,40,.68);
}

.milestone-band-item{
    min-height:125px;
    padding:27px 20px;
    text-align:center;
    border-left:1px solid rgba(255,255,255,.06);
}

.milestone-band-item:last-child{
    border-left:0;
}

.milestone-band-item strong{
    display:block;
    font-size:20px;
    margin-bottom:8px;
}

.milestone-band-item span{
    color:#7695a2;
    font-size:12px;
}

@media(max-width:1200px){
    .milestones-hero{
        grid-template-columns:1fr;
    }

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

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

@media(max-width:720px){
    .milestones-hero,
    .milestones-section{
        padding-left:5%;
        padding-right:5%;
    }

    .milestones-title{
        font-size:50px;
    }

    .timeline-map{
        width:340px;
        height:350px;
    }

    .timeline-core{
        width:135px;
        height:135px;
    }

    .timeline-point{
        width:94px;
        font-size:9px;
    }

    .tp1,
    .tp5{
        left:20px;
    }

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

    .milestone-band{
        margin-left:5%;
        margin-right:5%;
        grid-template-columns:1fr;
    }
}


/* ==================================================
   ESPRIQ MILESTONES CORE TEXT FIX
   ================================================== */

.timeline-core{
    padding:0 14px !important;
    box-sizing:border-box !important;
}

.timeline-core .m-mark{
    margin-bottom:1px !important;
}

.timeline-core strong{
    margin-top:7px !important;
    line-height:1 !important;
}

.timeline-core small{
    display:block !important;
    width:100% !important;
    margin-top:8px !important;
    white-space:nowrap !important;
    text-align:center !important;
    font-size:8px !important;
    line-height:1 !important;
    letter-spacing:.75px !important;
    transform:translateY(-2px) !important;
    color:#82a8b5 !important;
}


/* ==================================================
   ESPRIQ MILESTONES OUTER CONTOUR V2
   ================================================== */

.timeline-axis,
.timeline-progress{
    display:none !important;
}

.timeline-map{
    isolation:isolate;
    overflow:visible !important;
}

.milestone-contour-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
    z-index:2;
    pointer-events:none;
}

.milestone-contour-path{
    fill:none;
    stroke:rgba(53,220,234,.22);
    stroke-width:1.15;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
}

.milestone-contour-glow{
    fill:none;
    stroke:rgba(239,189,66,.13);
    stroke-width:1;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:46 118;
    vector-effect:non-scaling-stroke;
}

.milestone-contour-runner{
    fill:#35dcea;
    stroke:rgba(255,255,255,.72);
    stroke-width:.7;
    filter:
        drop-shadow(0 0 5px rgba(53,220,234,.95))
        drop-shadow(0 0 12px rgba(53,220,234,.55));
}

.timeline-point{
    z-index:4 !important;
}

.timeline-core{
    z-index:5 !important;
}

.timeline-point.contour-active{
    transform:scale(1.055);
    border-color:rgba(53,220,234,.72);
    background:rgba(3,45,59,.98);
    box-shadow:
        0 10px 30px rgba(0,0,0,.22),
        0 0 20px rgba(53,220,234,.13);
}

.timeline-point.gold.contour-active{
    border-color:rgba(239,189,66,.78);
    box-shadow:
        0 10px 30px rgba(0,0,0,.22),
        0 0 20px rgba(239,189,66,.14);
}


/* ==================================================
   ESPRIQ MILESTONES SPOKES + GLOW V3
   ================================================== */

.milestone-spokes-glow,
.milestone-spokes{
    pointer-events:none;
}

.milestone-spokes-glow path{
    fill:none;
    stroke:rgba(43,218,235,.20);
    stroke-width:7px;
    stroke-linecap:round;
    vector-effect:non-scaling-stroke;
    filter:
        drop-shadow(0 0 7px rgba(43,218,235,.55))
        drop-shadow(0 0 15px rgba(43,218,235,.22));
}

.milestone-spokes path{
    fill:none;
    stroke:rgba(52,223,238,.82);
    stroke-width:1.45px;
    stroke-linecap:round;
    vector-effect:non-scaling-stroke;
    filter:
        drop-shadow(0 0 4px rgba(52,223,238,.70))
        drop-shadow(0 0 10px rgba(52,223,238,.25));
}

.milestone-contour-path{
    stroke:rgba(52,223,238,.68) !important;
    filter:
        drop-shadow(0 0 5px rgba(52,223,238,.42))
        drop-shadow(0 0 12px rgba(52,223,238,.15));
}

.milestone-contour-glow{
    stroke:rgba(52,223,238,.16) !important;
    filter:
        drop-shadow(0 0 8px rgba(52,223,238,.38))
        drop-shadow(0 0 18px rgba(52,223,238,.12));
}

.timeline-core{
    z-index:6 !important;
}

.timeline-point{
    z-index:5 !important;
}

.timeline-point.contour-active{
    transform:scale(1.04);
}

.timeline-point.gold.contour-active{
    border-color:rgba(239,189,66,.88) !important;
    box-shadow:
        0 0 0 1px rgba(239,189,66,.14),
        0 0 19px rgba(239,189,66,.13);
}


/* ==================================================
   ESPRIQ REMOVE OUTER MILESTONE CONTOUR
   ================================================== */

.milestone-contour-path,
.milestone-contour-glow,
.milestone-contour-runner{
    display:none !important;
}


/* ==================================================
   ESPRIQ MILESTONES MANUAL SPACING V6
   Desktop positioning only
   ================================================== */

@media (min-width: 1000px){

    /* 01 Foundation ? closer to center */
    .timeline-map .tp1{
        top:32px !important;
        left:66px !important;
        right:auto !important;
        bottom:auto !important;
    }

    /* 02 Knowledge ? slightly farther outward */
    .timeline-map .tp2{
        top:68px !important;
        right:8px !important;
        left:auto !important;
        bottom:auto !important;
    }

    /* 03 Academy ? farther outward */
    .timeline-map .tp3{
        top:167px !important;
        left:-16px !important;
        right:auto !important;
        bottom:auto !important;
    }

    /* 04 Projects ? slightly farther outward */
    .timeline-map .tp4{
        bottom:69px !important;
        right:14px !important;
        left:auto !important;
        top:auto !important;
    }

    /* 05 Intelligence ? closer to center */
    .timeline-map .tp5{
        bottom:30px !important;
        left:66px !important;
        right:auto !important;
        top:auto !important;
    }
}


/* ==================================================
   ESPRIQ MILESTONES FINE TUNE V7
   Positions only - no JS / no geometry changes
   ================================================== */

@media (min-width: 1000px){

    /* 01 Foundation */
    .timeline-map .tp1{
        top:22px !important;
        left:58px !important;
        right:auto !important;
        bottom:auto !important;
    }

    /* 02 Knowledge */
    .timeline-map .tp2{
        top:72px !important;
        right:14px !important;
        left:auto !important;
        bottom:auto !important;
    }

    /* 03 Academy - unchanged */
    .timeline-map .tp3{
        top:167px !important;
        left:-16px !important;
        right:auto !important;
        bottom:auto !important;
    }

    /* 04 Projects - unchanged */
    .timeline-map .tp4{
        bottom:69px !important;
        right:14px !important;
        left:auto !important;
        top:auto !important;
    }

    /* 05 Intelligence */
    .timeline-map .tp5{
        bottom:20px !important;
        left:58px !important;
        right:auto !important;
        top:auto !important;
    }
}


/* ==================================================
   ESPRIQ LOWER TYPOGRAPHY V1
   ================================================== */

.milestones-section-head span{
    font-size:15px !important;
}

.milestones-section-head h2{
    font-size:44px !important;
}

.milestones-section-head p{
    font-size:18px !important;
    line-height:1.75 !important;
}

.milestone-code{
    font-size:13px !important;
}

.milestone-phase{
    font-size:12px !important;
    letter-spacing:1.4px !important;
}

.milestone-card h3{
    font-size:22px !important;
}

.milestone-card p{
    font-size:16px !important;
    line-height:1.8 !important;
}

.milestone-band-item strong{
    font-size:22px !important;
}

.milestone-band-item span{
    font-size:15px !important;
    line-height:1.6 !important;
}


/* ==================================================
   ESPRIQ MILESTONES LOWER SCALE V2
   Wider + slightly larger lower section
   ================================================== */

@media (min-width: 1200px){

    .milestones-section{
        padding:96px 4% !important;
    }

    .milestones-section-head{
        width:1020px !important;
        max-width:1020px !important;
    }

    .milestones-section-head span{
        font-size:16px !important;
    }

    .milestones-section-head h2{
        font-size:47px !important;
        margin:11px 0 17px !important;
    }

    .milestones-section-head p{
        font-size:19px !important;
        line-height:1.8 !important;
        max-width:980px !important;
    }

    .milestones-grid{
        gap:18px !important;
    }

    .milestone-card{
        min-height:292px !important;
        height:292px !important;
        padding:31px !important;
        box-sizing:border-box !important;
    }

    .milestone-code{
        font-size:14px !important;
    }

    .milestone-phase{
        font-size:13px !important;
        letter-spacing:1.5px !important;
    }

    .milestone-card h3{
        font-size:24px !important;
        margin:12px 0 14px !important;
    }

    .milestone-card p{
        font-size:17px !important;
        line-height:1.85 !important;
    }

    .milestone-band{
        margin:0 4% 110px !important;
    }

    .milestone-band-item{
        min-height:142px !important;
        height:142px !important;
        padding:30px 22px !important;
        box-sizing:border-box !important;
    }

    .milestone-band-item strong{
        font-size:24px !important;
    }

    .milestone-band-item span{
        font-size:17px !important;
        line-height:1.7 !important;
        margin-top:8px !important;
    }
}


/* ==================================================
   ESPRIQ MILESTONES LOWER TEXT BOOST V3
   Make lower texts larger, bolder, and easier to read
   ================================================== */

@media (min-width: 1200px){

    .milestones-section{
        padding: 96px 4% !important;
    }

    .milestones-section-head{
        width: 1080px !important;
        max-width: 1080px !important;
    }

    .milestones-section-head span{
        font-size: 16px !important;
        font-weight: 700 !important;
        letter-spacing: 1.6px !important;
    }

    .milestones-section-head h2{
        font-size: 50px !important;
        font-weight: 800 !important;
        margin: 12px 0 18px !important;
    }

    .milestones-section-head p{
        font-size: 21px !important;
        line-height: 1.95 !important;
        font-weight: 500 !important;
        max-width: 1040px !important;
    }

    .milestones-grid{
        gap: 20px !important;
        grid-template-columns: repeat(5, 1fr) !important;
    }

    .milestone-card{
        min-height: 320px !important;
        height: 320px !important;
        padding: 34px 28px !important;
        box-sizing: border-box !important;
    }

    .milestone-code{
        font-size: 16px !important;
        font-weight: 800 !important;
    }

    .milestone-phase{
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: 1.6px !important;
    }

    .milestone-card h3{
        font-size: 30px !important;
        font-weight: 800 !important;
        margin: 14px 0 16px !important;
        line-height: 1.45 !important;
    }

    .milestone-card p{
        font-size: 20px !important;
        line-height: 2 !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
    }

    .milestone-band{
        margin: 0 4% 115px !important;
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .milestone-band-item{
        min-height: 165px !important;
        height: 165px !important;
        padding: 32px 24px !important;
        box-sizing: border-box !important;
    }

    .milestone-band-item strong{
        font-size: 30px !important;
        font-weight: 800 !important;
        line-height: 1.3 !important;
    }

    .milestone-band-item span{
        font-size: 19px !important;
        line-height: 1.9 !important;
        font-weight: 600 !important;
        margin-top: 10px !important;
        display: block !important;
    }
}


/* ==================================================
   ESPRIQ MILESTONE BAND TEXT FINAL
   ================================================== */

.milestone-band-item strong{
    font-size:32px !important;
    font-weight:800 !important;
    line-height:1.25 !important;
}

.milestone-band-item span{
    font-size:19px !important;
    line-height:1.9 !important;
    font-weight:700 !important;
    display:block !important;
    margin-top:12px !important;
}


/* ==================================================
   ESPRIQ MILESTONE BAND READABILITY FINAL
   ================================================== */

.milestone-band-item strong{
    font-size:34px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
}

.milestone-band-item span{
    font-size:22px !important;
    font-weight:700 !important;
    line-height:1.8 !important;
    letter-spacing:0 !important;
    margin-top:14px !important;
    display:block !important;
    color:rgba(210,235,242,.92) !important;
}