/*
============================================================
SENTINEL CONTROL CENTER
Home Page Style
RC1.1-F1
============================================================
*/



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


.s-hero {

    min-height:
        100vh;


    display:
        flex;


    align-items:
        center;


    position:
        relative;


    overflow:
        hidden;


    padding:
        120px 0 80px;

}



.s-hero::before {


    content:
        "";


    position:
        absolute;


    inset:
        0;


    background:

        radial-gradient(

            circle at top right,

            rgba(216,176,0,.18),

            transparent 45%

        );


    pointer-events:
        none;

}



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


.s-hero-content {

    position:
        relative;


    z-index:
        1;


    max-width:
        900px;

}



.s-hero-title {


    font-size:
        clamp(2.5rem,5vw,4.5rem);


    line-height:
        1.1;


    font-weight:
        800;


    margin-bottom:
        24px;

}



.s-hero-title span {


    color:
        var(--s-gold);

}



.s-hero-text {


    max-width:
        700px;


    color:
        var(--s-text-secondary);


    font-size:
        1.25rem;


    line-height:
        1.6;

}



/* ==========================================================
   BRAND AREA
   ========================================================== */


.s-brand {


    display:
        flex;


    align-items:
        center;


    gap:
        16px;

}



.s-brand-logo {


    width:
        54px;

}



.s-brand-name {


    font-size:
        1.3rem;


    font-weight:
        700;


}



/* ==========================================================
   FEATURE BLOCKS
   ========================================================== */


.s-feature {


    text-align:
        center;

}



.s-feature-icon {


    width:
        64px;


    height:
        64px;


    margin:
        0 auto 20px;


    display:
        flex;


    align-items:
        center;


    justify-content:
        center;


    border-radius:
        50%;


    background:
        rgba(216,176,0,.12);


    color:
        var(--s-gold);

}



/* ==========================================================
   CONTROL CENTER PREVIEW
   ========================================================== */


.s-dashboard-preview {


    position:
        relative;


    min-height:
        420px;


    overflow:
        hidden;

}



.s-dashboard-preview::after {


    content:
        "";


    position:
        absolute;


    inset:
        0;


    background:

        linear-gradient(

            135deg,

            transparent,

            rgba(216,176,0,.08)

        );

}



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


.s-roadmap {


    display:
        flex;


    gap:
        20px;


    flex-wrap:
        wrap;

}



.s-roadmap-item {


    flex:
        1;


    min-width:
        220px;

}



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


@media(max-width:768px){


    .s-hero {

        padding-top:
            100px;

    }



    .s-hero-text {

        font-size:
            1rem;

    }


}