/* ==========================================
   Hero Section
   Brutalsurfcam v0.9.0
========================================== */

.hero{

    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;

}

/* Background Video */

.hero-video{

    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;

}

/* Dark Overlay */

.hero-overlay{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);

}

/* Hero Content */

.hero-content{

    position:relative;
    z-index:2;
    max-width:900px;
    padding:20px;
    text-align:center;
    color:#fff;

}

.hero-content h1{

    margin-bottom:25px;
    max-width:none;
    width:fit-content;
    max-width:100%;
    font-size:clamp(1.15rem,3.8vw,3.35rem);
    font-weight:700;
    line-height:1;
    letter-spacing:var(--tracking-tight);
    white-space:nowrap;
    color:#fff;
    text-shadow:0 10px 28px rgba(0,0,0,.38);
    animation:fadeUp 1s ease;

}

.hero-content p{

    margin-bottom:40px;
    width:100%;
    max-width:none;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    font-size:clamp(.9rem,1.8vw,1.25rem);
    line-height:var(--line-relaxed);
    opacity:.9;
    white-space:nowrap;
    animation:fadeUp 1.4s ease;

}

/* CTA Button */

.cta-btn{

    min-height:52px;
    padding:14px 24px;
    border:none;
    border-radius:50px;
    background:#fff;
    color:var(--primary);
    font-size:var(--text-base);
    font-weight:700;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:var(--transition);
    width:100%;

}

.hero-actions{

    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    width:min(960px, 100%);
    margin:0 auto;

}

.cta-btn.primary{

    background:#fff;
    color:var(--primary);

}

.cta-btn.secondary{

    background:transparent;
    color:#fff;
    border:1px solid rgba(255,255,255,.7);

}

.cta-btn:hover{

    transform:translateY(-4px);
    box-shadow:0 15px 30px rgba(0,0,0,.25);

}

.cta-btn.secondary:hover{

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

}

/* Scroll Indicator */

.scroll-down{

    position:absolute;
    bottom:32px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
    color:#fff;
    opacity:.8;
    animation:bounce 2s infinite;

}

@media (max-width: 900px){
    .hero-content{
        width:min(96vw, 960px);
        max-width:none;
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .hero-content h1{
        font-size:clamp(.9rem,4vw,1.7rem);
        letter-spacing:-0.05em;
        margin-inline:auto;
    }

    .hero-content p{
        width:100%;
        max-width:none;
        font-size:clamp(.7rem,2.4vw,.95rem);
        margin-inline:auto;
        white-space:nowrap;
    }
}

@media (max-width: 480px){
    .hero-content h1{
        font-size:clamp(.82rem,3.6vw,1rem);
    }

    .hero-content p{
        width:100%;
        max-width:none;
        font-size:clamp(.62rem,2.1vw,.82rem);
        white-space:nowrap;
        text-wrap:normal;
        position:relative;
        left:-27px;
    }
}