/*==========================================================
    GLOBAL
==========================================================*/

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;

    background:#050505;

    color:#FFFFFF;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;

}

/*==========================================================
    CONTAINER
==========================================================*/

.container{

    width:min(1400px,92%);

    margin:0 auto;

}

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

section{

    position:relative;

    padding:120px 0;

}

/*==========================================================
    SECTION HEADER
==========================================================*/

.section-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:14px;

    margin-bottom:22px;

    font-size:13px;

    font-weight:700;

    color:#D7261E;

    letter-spacing:.24em;

    text-transform:uppercase;

}

.section-tag::before{

    content:"";

    width:42px;

    height:2px;

    background:#D7261E;

}

.section-title{

    margin:0;

    font-size:clamp(40px,4vw,64px);

    font-weight:800;

    line-height:1.08;

    letter-spacing:-2px;

    color:#FFFFFF;

}

.section-description{

    margin-top:28px;

    font-size:19px;

    line-height:1.8;

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

}

/*==========================================================
    LINKS
==========================================================*/

a{

    color:inherit;

    text-decoration:none;

    transition:.35s ease;

}

a:hover{

    color:#D7261E;

}

/*==========================================================
    LISTS
==========================================================*/

ul{

    list-style:none;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

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

.btn-primary,

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    height:60px;

    padding:0 34px;

    border-radius:999px;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:all .35s ease;

}

.btn-primary{

    background:#D7261E;

    color:#FFFFFF;

    border:none;

    box-shadow:

        0 18px 40px rgba(215,38,30,.28);

}

.btn-primary:hover{

    transform:translateY(-3px);

    background:#EF3126;

    box-shadow:

        0 28px 60px rgba(215,38,30,.42);

}

.btn-secondary{

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

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

    color:#FFFFFF;

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

}

.btn-secondary:hover{

    transform:translateY(-3px);

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

    border-color:rgba(255,255,255,.25);

}

/*==========================================================
    TEXT HELPERS
==========================================================*/

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.hidden{

    display:none;

}

.w-100{

    width:100%;

}

/*==========================================================
    FLEX UTILITIES
==========================================================*/

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.flex-between{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

.align-center{

    align-items:center;

}

.justify-center{

    justify-content:center;

}

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

.grid{

    display:grid;

}

.grid-2{

    display:grid;

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

    gap:32px;

}

.grid-3{

    display:grid;

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

    gap:32px;

}

.grid-4{

    display:grid;

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

    gap:28px;

}

/*==========================================================
    SPACING
==========================================================*/

.mt-20{

    margin-top:20px;

}

.mt-40{

    margin-top:40px;

}

.mt-60{

    margin-top:60px;

}

.mt-80{

    margin-top:80px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-40{

    margin-bottom:40px;

}

.mb-60{

    margin-bottom:60px;

}

.mb-80{

    margin-bottom:80px;

}

/*==========================================================
    GAP
==========================================================*/

.gap-16{

    gap:16px;

}

.gap-24{

    gap:24px;

}

.gap-32{

    gap:32px;

}

.gap-48{

    gap:48px;

}

/*==========================================================
    BORDER RADIUS
==========================================================*/

.radius-sm{

    border-radius:12px;

}

.radius-md{

    border-radius:20px;

}

.radius-lg{

    border-radius:32px;

}

.radius-xl{

    border-radius:42px;

}

/*==========================================================
    SHADOWS
==========================================================*/

.shadow-sm{

    box-shadow:

        0 10px 30px rgba(0,0,0,.12);

}

.shadow-md{

    box-shadow:

        0 20px 60px rgba(0,0,0,.22);

}

.shadow-lg{

    box-shadow:

        0 35px 90px rgba(0,0,0,.32);

}

/*==========================================================
    CUSTOM SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#050505;

}

::-webkit-scrollbar-thumb{

    background:#D7261E;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#ef3126;

}

/*==========================================================
    TEXT SELECTION
==========================================================*/

::selection{

    background:#D7261E;

    color:#FFFFFF;

}

::-moz-selection{

    background:#D7261E;

    color:#FFFFFF;

}

/*==========================================================
    ANIMATIONS
==========================================================*/

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

.fade-in{

    opacity:0;

    transition:opacity .8s ease;

}

.fade-in.show{

    opacity:1;

}

.scale-in{

    opacity:0;

    transform:scale(.94);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.scale-in.show{

    opacity:1;

    transform:scale(1);

}

/*==========================================================
    TRANSITIONS
==========================================================*/

.transition{

    transition:.35s ease;

}

.transition-slow{

    transition:.6s ease;

}

/*==========================================================
    HOVER
==========================================================*/

.hover-lift{

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.hover-lift:hover{

    transform:translateY(-8px);

}

.hover-scale{

    transition:transform .4s ease;

}

.hover-scale:hover{

    transform:scale(1.03);

}

.hover-opacity{

    transition:opacity .35s ease;

}

.hover-opacity:hover{

    opacity:.82;

}

/*==========================================================
    GLASS
==========================================================*/

.glass{

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

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

}

/*==========================================================
    DIVIDER
==========================================================*/

.divider{

    width:100%;

    height:1px;

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

}

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

@media (max-width:1200px){

    section{

        padding:100px 0;

    }

    .container{

        width:min(92%,1200px);

    }

    .section-header{

        margin-bottom:60px;

    }

    .section-title{

        font-size:clamp(36px,5vw,54px);

    }

}

@media (max-width:992px){

    .grid-4{

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

    }

    .grid-3{

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

    }

    .grid-2{

        grid-template-columns:1fr;

    }

    .section-header{

        max-width:100%;

    }

    .section-description{

        font-size:18px;

    }

}

@media (max-width:768px){

    section{

        padding:80px 0;

    }

    .container{

        width:92%;

    }

    .section-tag{

        font-size:11px;

        letter-spacing:.18em;

    }

    .section-title{

        font-size:40px;

        line-height:1.15;

    }

    .section-description{

        font-size:17px;

        line-height:1.7;

    }

    .btn-primary,

    .btn-secondary{

        width:100%;

        justify-content:center;

    }

}

@media (max-width:576px){

    .grid-4,

    .grid-3,

    .grid-2{

        grid-template-columns:1fr;

    }

    .section-title{

        font-size:34px;

    }

    .section-description{

        font-size:16px;

    }

}

/*==========================================================
    ACCESSIBILITY
==========================================================*/

:focus-visible{

    outline:2px solid #D7261E;

    outline-offset:4px;

    border-radius:8px;

}

/*==========================================================
    PERFORMANCE
==========================================================*/

img{

    content-visibility:auto;

}

.hero,

.solution-card,

.footer{

    contain:layout style paint;

}

/*==========================================================
    UTILITIES
==========================================================*/

.desktop-only{

    display:block;

}

.mobile-only{

    display:none;

}

@media (max-width:768px){

    .desktop-only{

        display:none;

    }

    .mobile-only{

        display:block;

    }

}

/*==========================================================
    END
==========================================================*/