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

.hero{

    position:relative;

    min-height:82vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:7rem 0 6rem;

    background:
    linear-gradient(
        rgba(4,12,22,.72),
        rgba(4,12,22,.68)
    ),
    url("/static/images/hero/hero2.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    background-attachment:fixed;

    color:#ffffff;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at top right,
            rgba(243,156,18,.22),
            transparent 38%
        ),

        radial-gradient(
            circle at bottom left,
            rgba(255,255,255,.08),
            transparent 35%
        );

}

/* ==========================================================
   GRID
========================================================== */

.hero-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:4rem;

    align-items:center;

}

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

.hero-content{

    max-width:700px;

}

.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:.7rem;

    padding:.75rem 1.4rem;

    border-radius:50px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.22);

    backdrop-filter:blur(14px);

    color:#ffffff;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.hero-tag i{

    color:#f39c12;

}

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

.hero h1{

    margin:1.6rem 0 1rem;

    font-size:clamp(2.6rem,4.5vw,4.3rem);

    line-height:1.12;

    font-weight:800;

    color:#ffffff;

    text-shadow:

        0 3px 18px rgba(0,0,0,.55);

}

.hero h1 span{

    display:block;

    color:#f39c12;

}

/* ==========================================================
   SUBTITLE
========================================================== */

.hero h3{

    margin-bottom:1.2rem;

    max-width:620px;

    font-size:1.18rem;

    font-weight:600;

    line-height:1.7;

    color:#ffd27a;

    text-shadow:

        0 2px 12px rgba(0,0,0,.45);

}

/* ==========================================================
   DESCRIPTION
========================================================== */

.hero p{

    max-width:640px;

    margin-bottom:2rem;

    font-size:1rem;

    line-height:1.9;

    color:rgba(255,255,255,.95);

    text-shadow:

        0 2px 8px rgba(0,0,0,.45);

}

/* ==========================================================
   BUTTONS
========================================================== */

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:1rem;

    margin-top:2rem;

}

/* ==========================================================
   CARD
========================================================== */

.hero-card{

    background:#ffffff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:

        0 25px 60px rgba(0,0,0,.25);

    transition:.35s;

}

.hero-card:hover{

    transform:translateY(-8px);

}

.hero-card-image img{

    width:100%;

    height:290px;

    object-fit:cover;

}

.hero-card-content{

    padding:1.8rem;

}

.hero-card-content h4{

    margin-bottom:1rem;

    color:var(--primary);

}

.hero-card-content p{

    color:var(--text);

    line-height:1.8;

    margin:0;

}

/* ==========================================================
   STATS
========================================================== */

.hero-stats{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    background:rgba(7,19,33,.72);

    backdrop-filter:blur(18px);

    border-top:1px solid rgba(255,255,255,.08);

}

.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

}

.stat-card{

    padding:1.3rem;

    text-align:center;

}

.stat-card h2{

    color:#f39c12;

    font-size:1.9rem;

    margin-bottom:.35rem;

}

.stat-card span{

    color:#ffffff;

    font-size:.92rem;

    opacity:.92;

}

/* ==========================================================
   SCROLL
========================================================== */

.scroll-indicator{

    display:none;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:992px){

    .hero{

        min-height:auto;

        padding:6rem 0;

        background-attachment:scroll;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .hero-card{

        max-width:550px;

        margin:auto;

    }

    .stats-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .hero{

        text-align:center;

        padding:5.5rem 0;

    }

    .hero h1{

        font-size:2.5rem;

    }

    .hero h3{

        font-size:1.05rem;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .stats-grid{

        grid-template-columns:1fr;

    }

}




















/* ==========================================================
   WHY RISING SONS
========================================================== */

.why-section{

    position:relative;

    background:#ffffff;

}

.section-tag{

    display:inline-block;

    padding:.65rem 1.4rem;

    margin-bottom:1.3rem;

    border-radius:50px;

    background:rgba(209,157,14,.12);

    color:var(--primary);

    font-size:.85rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}

.why-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:5rem;

    align-items:center;

    margin-top:4rem;

}

.why-image{

    position:relative;

}

.why-image img{

    width:100%;

    height:650px;

    object-fit:cover;

    border-radius:30px;

    box-shadow:

        0 30px 60px rgba(0,0,0,.15);

}

.experience-card{

    position:absolute;

    bottom:35px;

    right:-35px;

    width:320px;

    background:#ffffff;

    border-radius:24px;

    padding:2rem;

    box-shadow:

        0 20px 50px rgba(0,0,0,.18);

    border-top:5px solid var(--primary);

}

.experience-card h3{

    margin-bottom:1rem;

    color:var(--heading);

}

.experience-card p{

    margin:0;

    color:var(--text);

    line-height:1.8;

}

.why-content{

    display:flex;

    flex-direction:column;

    gap:2rem;

}

.why-card{

    display:flex;

    gap:1.6rem;

    align-items:flex-start;

    padding:2rem;

    background:#ffffff;

    border-radius:22px;

    border:1px solid var(--border);

    transition:.35s;

}

.why-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 20px 45px rgba(0,0,0,.08);

}

.why-icon{

    width:72px;

    height:72px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    background:

        linear-gradient(
            135deg,
            var(--primary),
            #e7b546
        );

    color:#ffffff;

    font-size:1.6rem;

}

.why-card h3{

    margin-bottom:.8rem;

}

.why-card p{

    margin:0;

    line-height:1.9;

    color:var(--text);

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:992px){

    .why-grid{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .experience-card{

        right:20px;

        bottom:20px;

    }

}

@media(max-width:768px){

    .why-image img{

        height:420px;

    }

    .experience-card{

        position:relative;

        right:auto;

        bottom:auto;

        width:100%;

        margin-top:1.5rem;

    }

    .why-card{

        flex-direction:column;

        text-align:center;

        align-items:center;

    }

}












/* ==========================================================
   WHAT WE DO
========================================================== */

.what-we-do{

    background:#f8fafc;

    position:relative;

}

.what-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:2rem;

    margin-top:4rem;

}

.what-card{

    position:relative;

    padding:3rem;

    background:#ffffff;

    border-radius:30px;

    overflow:hidden;

    border:1px solid var(--border);

    transition:.4s;

}

.what-card:hover{

    transform:translateY(-12px);

    box-shadow:
        0 30px 60px rgba(0,0,0,.08);

}

.what-number{

    position:absolute;

    top:25px;

    right:30px;

    font-size:4rem;

    font-weight:800;

    color:rgba(209,157,14,.08);

    line-height:1;

}

.what-icon{

    width:80px;

    height:80px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:22px;

    background:

    linear-gradient(
        135deg,
        var(--primary),
        #e6b240
    );

    color:#ffffff;

    font-size:2rem;

    margin-bottom:2rem;

}

.what-card h3{

    margin-bottom:1rem;

    font-size:1.7rem;

}

.what-card p{

    line-height:1.9;

    margin-bottom:2rem;

}

.what-card ul{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:.8rem;

    list-style:none;

    padding:0;

    margin:0;

}

.what-card li{

    position:relative;

    padding-left:1.3rem;

    font-weight:500;

}

.what-card li::before{

    content:"";

    position:absolute;

    left:0;

    top:11px;

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--primary);

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:992px){

    .what-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:576px){

    .what-card{

        padding:2rem;

    }

    .what-card ul{

        grid-template-columns:1fr;

    }

    .what-number{

        font-size:3rem;

    }

}














/* ==========================================================
   JOURNEY
========================================================== */

.journey-section{

    position:relative;

    background:#ffffff;

}

.journey-timeline{

    position:relative;

    max-width:1100px;

    margin:5rem auto 0;

    padding:2rem 0;

}

.journey-timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    bottom:0;

    width:4px;

    background:linear-gradient(
        to bottom,
        var(--primary),
        #e7c46d
    );

    transform:translateX(-50%);

    border-radius:20px;

}

.journey-item{

    position:relative;

    width:50%;

    padding:2rem 3rem;

}

.journey-item.left{

    left:0;

    text-align:right;

}

.journey-item.right{

    left:50%;

}

.journey-dot{

    position:absolute;

    top:45px;

    width:60px;

    height:60px;

    background:var(--primary);

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:1.2rem;

    box-shadow:0 0 0 8px #fff;

}

.journey-item.left .journey-dot{

    right:-30px;

}

.journey-item.right .journey-dot{

    left:-30px;

}

.journey-content{

    background:#fff;

    padding:2rem;

    border-radius:24px;

    border:1px solid var(--border);

    box-shadow:0 18px 40px rgba(0,0,0,.08);

    transition:.35s;

}

.journey-content:hover{

    transform:translateY(-8px);

}

.journey-stage{

    display:inline-block;

    margin-bottom:.8rem;

    color:var(--primary);

    font-size:.85rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}

.journey-content h3{

    margin-bottom:1rem;

}

.journey-content p{

    line-height:1.9;

    margin:0;

}

@media(max-width:992px){

    .journey-timeline::before{

        left:30px;

    }

    .journey-item{

        width:100%;

        left:0 !important;

        padding-left:90px;

        padding-right:0;

        text-align:left;

        margin-bottom:2rem;

    }

    .journey-dot{

        left:0 !important;

    }

}


















/* ==========================================================
   SAFE BY DESIGN
========================================================== */

.safe-section{

    position:relative;

    overflow:hidden;

    padding:7rem 0;

    background:
        linear-gradient(
            135deg,
            #071321,
            #10263d
        );

}

.safe-pattern{

    position:absolute;

    inset:0;

    opacity:.06;

    background-image:
        radial-gradient(circle,#ffffff 1px,transparent 1px);

    background-size:32px 32px;

}

.safe-header{

    position:relative;

    text-align:center;

    max-width:760px;

    margin:auto;

    z-index:2;

}

.section-tag-light{

    background:rgba(255,255,255,.10);

    color:#ffffff;

}

.safe-header h2{

    color:#ffffff;

    margin:1.5rem 0;

}

.safe-header p{

    color:rgba(255,255,255,.85);

    line-height:2;

}

.safe-grid{

    position:relative;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:2rem;

    margin-top:5rem;

    z-index:2;

}

.safe-card{

    padding:3rem 2rem;

    border-radius:28px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.12);

    text-align:center;

    transition:.35s;

}

.safe-card:hover{

    transform:translateY(-10px);

    background:rgba(255,255,255,.12);

}

.safe-icon{

    width:90px;

    height:90px;

    margin:0 auto 2rem;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        #e9bb52
    );

    color:#ffffff;

    font-size:2rem;

}

.safe-card h3{

    color:#ffffff;

    margin-bottom:1rem;

}

.safe-card p{

    color:rgba(255,255,255,.82);

    line-height:1.9;

    margin:0;

}

.safe-footer{

    position:relative;

    margin-top:4rem;

    text-align:center;

    z-index:2;

}

@media(max-width:992px){

    .safe-grid{

        grid-template-columns:1fr;

    }

}

























/* ==========================================================
   PATHWAYS
========================================================== */

.pathways-section{

    background:#f8fafc;

}

.pathway-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:1.5rem;

    margin-top:4rem;

}

.pathway-card{

    position:relative;

    overflow:hidden;

    min-height:480px;

    border-radius:28px;

    text-decoration:none;

    color:#ffffff;

    transition:.45s;

    box-shadow:0 20px 40px rgba(0,0,0,.10);

}

.pathway-card img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.pathway-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            to top,

            rgba(6,18,31,.95),

            rgba(6,18,31,.15)

        );

}

.pathway-content{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:2rem;

    z-index:2;

}

.pathway-content span{

    display:inline-block;

    margin-bottom:.8rem;

    color:#e9c76b;

    font-size:.85rem;

    text-transform:uppercase;

    letter-spacing:1px;

    font-weight:700;

}

.pathway-content h3{

    color:#ffffff;

    margin-bottom:1rem;

}

.pathway-content p{

    color:rgba(255,255,255,.86);

    line-height:1.8;

    margin-bottom:2rem;

}

.pathway-content strong{

    color:#ffffff;

    transition:.3s;

}

.pathway-card:hover{

    transform:translateY(-12px);

}

.pathway-card:hover img{

    transform:scale(1.08);

}

.pathway-card:hover strong{

    color:#e9c76b;

}

@media(max-width:1200px){

    .pathway-grid{

        grid-template-columns:repeat(3,1fr);

    }

}

@media(max-width:768px){

    .pathway-grid{

        grid-template-columns:1fr;

    }

}
















/* ==========================================================
   VISION
========================================================== */

.vision-section{

    padding:7rem 0;

    background:#ffffff;

}

.vision-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:2rem;

    margin-top:4rem;

}

.vision-card{

    text-align:center;

    padding:3rem;

    border-radius:30px;

    background:#ffffff;

    border:1px solid var(--border);

    transition:.4s;

}

.vision-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 50px rgba(0,0,0,.08);

}

.vision-card.featured{

    transform:scale(1.05);

    border:2px solid var(--primary);

}

.vision-icon{

    width:90px;

    height:90px;

    margin:0 auto 2rem;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        #efc76d
    );

    color:#ffffff;

    font-size:2rem;

}

.vision-card h3{

    margin-bottom:1rem;

}

.vision-card p{

    line-height:1.9;

}

@media(max-width:992px){

    .vision-grid{

        grid-template-columns:1fr;

    }

    .vision-card.featured{

        transform:none;

    }

}


















/* ==========================================================
   IMPACT PILLARS
========================================================== */

.impact-pillars{

    background:#ffffff;

}

.impact-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:2rem;

    margin-top:4rem;

}

.impact-box{

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:24px;

    padding:3rem;

    text-align:center;

    transition:.35s;

}

.impact-box:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.impact-icon{

    width:90px;

    height:90px;

    margin:0 auto 2rem;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        #e6b347
    );

    color:#ffffff;

    font-size:2rem;

}

.impact-box h3{

    margin-bottom:1rem;

}

.impact-box p{

    line-height:1.9;

}

@media(max-width:992px){

    .impact-grid{

        grid-template-columns:1fr;

    }

}





















/* ==========================================================
   LAUNCH
========================================================== */

.launch-section{

    padding:7rem 0;

    background:#f8fafc;

}

.launch-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:5rem;

    align-items:center;

}

.launch-image img{

    width:100%;

    border-radius:28px;

    box-shadow:0 25px 50px rgba(0,0,0,.12);

}

.launch-list{

    list-style:none;

    padding:0;

    margin:2rem 0;

}

.launch-list li{

    display:flex;

    align-items:center;

    gap:1rem;

    margin-bottom:1.2rem;

    font-weight:500;

}

.launch-list i{

    color:var(--primary);

}

@media(max-width:992px){

    .launch-grid{

        grid-template-columns:1fr;

    }

}





















/* ==========================================================
   FINAL CTA
========================================================== */

.final-cta{

    padding:7rem 0;

    background:
    linear-gradient(
        135deg,
        #071321,
        #10263d
    );

    text-align:center;

}

.final-cta h2{

    color:#ffffff;

    margin:1.5rem 0;

}

.final-cta p{

    max-width:760px;

    margin:0 auto 2.5rem;

    color:rgba(255,255,255,.85);

    line-height:2;

}

.cta-content{

    max-width:900px;

    margin:auto;

}

@media(max-width:768px){

    .final-cta .hero-buttons{

        flex-direction:column;

    }

}