/*======================================
Google Font
======================================*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

/*======================================
Global Variables
======================================*/

:root {

    /* Brand */

    --accent: #CC1F1F;
    --accent-hover: #B71B1B;

    /* Text */

    --text: #111111;
    --text-light: #666666;

    /* Backgrounds */

    --background: #FFFFFF;
    --background-alt: #F7F7F7;
    --white: #FFFFFF;

    /* Borders */

    --border: #E5E5E5;

    /* Glass */

    --glass: rgba(255, 255, 255, .82);

    /* Effects */

    --shadow: 0 12px 35px rgba(0, 0, 0, .06);

    --radius: 20px;

    --transition: .30s ease;

}

/*======================================
Reset
======================================*/

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

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

    background: var(--background);

    color: var(--text);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

}

img {

    max-width: 100%;

    display: block;

}

a {

    color: inherit;

    text-decoration: none;

}

button {

    font: inherit;

}

::selection {

    background: var(--accent);

    color: white;

}

/*======================================
Global Container
======================================*/

.container {

    width: min(1280px, 92%);

    margin: auto;

}

/*======================================
Header
======================================*/

.header {

    position: fixed;

    top: 18px;

    left: 0;

    width: 100%;

    z-index: 1000;

    transition: var(--transition);

}

.header.scrolled {

    top: 10px;

}

/*======================================
Navbar
======================================*/

.header .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 14px 28px;

    background: var(--glass);

    backdrop-filter: blur(20px);

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

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

    border-radius: 22px;

    box-shadow: var(--shadow);

}

/*======================================
Logo
======================================*/

.logo {

    display: flex;

    align-items: center;

}

.logo img {

    height: 48px;

    transition: var(--transition);

}

/*======================================
Desktop Navigation
======================================*/

.nav {

    display: flex;

    align-items: center;

    gap: 42px;

}

.nav a {

    position: relative;

    font-size: 15px;

    font-weight: 600;

    color: var(--text);

    transition: var(--transition);

}

.nav a:hover {

    color: var(--accent);

}

.nav a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 2px;

    background: var(--accent);

    transition: var(--transition);

}

.nav a:hover::after {

    width: 100%;

}

/*======================================
Menu Button
======================================*/

.menu-toggle {

    display: none;

    width: 42px;

    height: 42px;

    background: none;

    border: none;

    cursor: pointer;

}

.menu-toggle span {

    display: block;

    width: 24px;

    height: 2px;

    margin: 6px auto;

    background: var(--text);

    transition: var(--transition);

}

/*======================================
Tablet
======================================*/

@media (max-width: 900px) {

    .header {

        top: 10px;

    }

    .header .container {

        padding: 14px 22px;

    }

}

/*======================================
Mobile
======================================*/

@media (max-width: 768px) {

    .menu-toggle {

        display: block;

    }

    .nav {

        position: absolute;

        left: 50%;

        transform: translateX(-50%) translateY(-20px);

        top: 82px;

        width: min(92%, 420px);

        background: var(--white);

        border-radius: var(--radius);

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

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 28px;

        padding: 32px;

        opacity: 0;

        pointer-events: none;

        transition: var(--transition);

    }

    .nav.active {

        opacity: 1;

        pointer-events: auto;

        transform: translateX(-50%) translateY(0);

    }

}

/*======================================
Desktop Only
======================================*/

@media (min-width: 769px) {

    .nav {

        opacity: 1 !important;

        pointer-events: auto !important;

        transform: none !important;

    }

}

/*======================================
Hero
======================================*/

.hero{

    padding-top:120px;

}

.hero-banner{

    width:min(1280px,92%);

    margin:auto;

    border-radius:32px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

.hero-banner img{

    width:100%;

    display:block;

}

/*======================================
Hero Content
======================================*/

.hero-content{

    text-align:center;

    padding:60px 0 90px;

}

.hero-tag{

    color:var(--accent);

    font-size:.8rem;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.hero h1{

    font-size:clamp(2.4rem,5vw,4.4rem);

    font-weight:800;

    line-height:1.05;

    letter-spacing:-2px;

    margin-bottom:24px;

}

.hero p{

    max-width:760px;

    margin:auto;

    font-size:1.15rem;

    color:var(--text-light);

    margin-bottom:42px;

}

.hero-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:var(--accent);

    color:white;

    padding:18px 42px;

    border-radius:999px;

    font-weight:600;

    transition:var(--transition);

    box-shadow:0 10px 30px rgba(204,31,31,.22);

}

.hero-button:hover{

    background:var(--accent-hover);

    transform:translateY(-3px);

    box-shadow:0 16px 38px rgba(204,31,31,.30);

}

/*======================================
Hero Responsive
======================================*/

@media(max-width:768px){

    .hero{

        padding-top:100px;

    }

    .hero-banner{

        border-radius:22px;

    }

    .hero-content{

        padding:40px 0 70px;

    }

    .hero h1{

        line-height:1.15;

    }

    .hero p{

        font-size:1rem;

        width:92%;

    }

    .hero-button{

        width:100%;

        max-width:320px;

    }

}

/*======================================
Features
======================================*/

.features {

    padding: 90px 0;

    background: var(--background-alt);

}

.features-grid {

    display: grid;

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

    gap: 28px;

}

.feature-card {

    background: var(--white);

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

    border-radius: var(--radius);

    padding: 36px 28px;

    text-align: center;

    box-shadow: var(--shadow);

    transition: var(--transition);

}

.feature-card:hover {

    transform: translateY(-8px);

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

}

.feature-icon {

    width: 64px;

    height: 64px;

    margin: 0 auto 24px;

    border-radius: 50%;

    background: rgba(204,31,31,.08);

    color: var(--accent);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.75rem;

    font-weight: 700;

}

.feature-card h3 {

    font-size: 1.15rem;

    font-weight: 700;

    margin-bottom: 14px;

    color: var(--text);

}

.feature-card p {

    color: var(--text-light);

    font-size: .95rem;

    line-height: 1.7;

}

/*======================================
Responsive
======================================*/

@media (max-width: 992px) {

    .features-grid {

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

    }

}

@media (max-width: 640px) {

    .features {

        padding: 70px 0;

    }

    .features-grid {

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

        gap: 18px;

    }

    .feature-card {

        padding: 24px 18px;

        border-radius: 20px;

    }

    .feature-icon {

        width: 52px;
        height: 52px;

        margin-bottom: 18px;

        font-size: 1.4rem;

    }

    .feature-card h3 {

        font-size: 1rem;

        margin-bottom: 8px;

    }

    .feature-card p {

        font-size: .88rem;

        line-height: 1.5;

    }

}