/* ======================================================
   Layout
====================================================== */

.container{

    width:min(1200px,92%);
    margin:auto;

}

section{

    padding:100px 0;

}

.grid{

    display:grid;

}

.flex{

    display:flex;

}

.flex-center{

    display:flex;
    align-items:center;
    justify-content:center;

}

.hidden{

    display:none;

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

.navbar{

    position:fixed;

    inset:0 auto auto 0;

    width:100%;

    height:72px;

    backdrop-filter:blur(18px);

    background:rgba(17,19,25,.75);

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

    z-index:999;

}

.navbar.scrolled{

    background:rgba(17,19,25,.94);

    box-shadow:0 10px 30px rgba(0,0,0,.2);

}

.navbar .container{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo{

    font-size:1.15rem;

    font-weight:700;

    color:var(--primary);

}

.menu{

    display:flex;

    align-items:center;

    gap:2rem;

    flex-wrap:nowrap;

}

.menu a{

    color:var(--text-light);

    transition:.25s;

}

.menu a:hover{

    color:var(--primary);

}

.menu a.active{

    color:var(--primary);

}

.nav-toggle{

    display:none;

    align-items:center;

    justify-content:center;

    width:2.75rem;

    height:2.75rem;

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

    border-radius:var(--radius-small);

    color:var(--text);

    font-size:1.15rem;

}

@media (max-width:1024px){

    .navbar{

        height:64px;

    }

    .logo{

        font-size:1rem;

    }

    .menu{

        gap:1.25rem;

    }

    .menu a{

        font-size:.95rem;

    }

}
@media (max-width:768px){

    .menu{

        display:none;

        position:absolute;

        top:calc(100% + .75rem);

        right:4%;

        left:4%;

        flex-direction:column;

        align-items:stretch;

        gap:0;

        padding:.75rem;

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

        border-radius:var(--radius-small);

        background:var(--bg-secondary);

        box-shadow:var(--shadow);

    }

    .menu.open{

        display:flex;

    }

    .menu a{

        display:block;

        padding:.85rem 1rem;

        border-radius:var(--radius-small);

    }

    .menu a:hover,
    .menu a.active{

        background:rgba(252,66,123,.1);

    }

    .nav-toggle{

        display:flex;

    }

}

/* ==============================
   Scroll controls
============================== */

.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:3px;

    background:linear-gradient(90deg,var(--primary),var(--secondary));

    transition:width .1s linear;

    z-index:1000;

}

.back-to-top{

    position:fixed;

    right:1.5rem;

    bottom:1.5rem;

    display:grid;

    width:3rem;

    height:3rem;

    place-items:center;

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

    border-radius:50%;

    background:var(--bg-secondary);

    color:var(--text);

    font-size:1.35rem;

    opacity:0;

    pointer-events:none;

    transform:translateY(10px);

    transition:var(--transition);

    z-index:998;

}

body > #back-to-top.back-to-top{

    position:fixed;

    top:auto;

    right:1.5rem;

    bottom:1.5rem;

    left:auto;

    z-index:998;

}

.back-to-top.visible{

    opacity:1;

    pointer-events:auto;

    transform:translateY(0);

}

.back-to-top:hover{

    border-color:var(--primary);

    color:var(--primary);

}

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

.hero{

    min-height:100svh;

    display:flex;

    align-items:center;

}

.hero-grid{

    display:grid;

    grid-template-columns:minmax(0,1fr) 420px;

    gap:5rem;

    align-items:center;

}

.hero-tag{

    display:inline-block;

    padding:10px 18px;

    background:rgba(252,66,123,.12);

    color:var(--primary);

    border-radius:999px;

    margin-bottom:20px;

    font-weight:600;

}

.hero h1{

    font-size:4rem;

    line-height:1.1;

    margin-bottom:30px;

}

.hero p{

    font-size:1.15rem;

    color:var(--text-light);

    max-width:700px;

}

.hero-buttons{

    margin-top:40px;

    display:flex;

    gap:20px;

}

.button{

    background:var(--primary);

    color:white;

    padding:15px 28px;

    border-radius:999px;

    font-weight:700;

    transition:.25s;

}

.button:hover{

    transform:translateY(-3px);

}

.button.secondary{

    background:transparent;

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

}

.hero-photo{
    display: flex;
    justify-content: center;
}

.hero-photo img{
    width: 100%;
    max-width: 420px;
    display: block;

    border-radius: 24px;

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

    box-shadow:
        0 20px 60px rgba(0,0,0,.35),
        0 0 0 1px rgba(255,255,255,.04);

    transition: transform .35s ease,
                box-shadow .35s ease;
}

.hero-photo img:hover{
    transform: translateY(-4px);
    box-shadow:
        0 30px 80px rgba(0,0,0,.45),
        0 0 0 1px rgba(255,255,255,.06);
}
@media (max-width:992px){

    .hero{

        min-height:auto;

        padding:6rem 0;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:3rem;

        text-align:center;

    }

    .hero-content{

        order:2;

    }

    .hero-photo{

        order:1;

    }

    .hero p{

        margin-inline:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

}
@media (max-width:768px){

    .hero h1{

        font-size:2.8rem;

    }

    .hero p{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .hero-photo img{

        max-width:260px;

        width:80%;

    }

}
@media (max-width:480px){

    .hero{

        padding:5rem 0;

    }

    .hero-grid{

        gap:2rem;

    }

    .hero h1{

        font-size:2.2rem;

    }

    .hero-photo img{

        max-width:210px;

        border-radius:20px;

    }

}