:root{
/* =========================
   HEADER - ELECTRIC INDUSTRIAL THEME
========================= */

/* =========================
   HEADER - GARDENER FIX
========================= */

--header-bg:rgba(10,18,13,0.72);
--header-bg-strong:rgba(10,18,13,0.92);

--header-border:rgba(159,216,176,0.10);
--header-border-strong:rgba(159,216,176,0.22);

--header-text:rgba(235,240,235,0.75);
--header-text-hover:rgba(245,255,245,0.95);

/* ACCENT (gardener green system) */
--accent:#9fd8b0;
--accent-soft:#bfe9cc;

/* GLASS */
--glass-blur:12px;

/* TRANSITION */
--transition:.3s ease;
}

/* =====================================================
   HEADER — ROOFERS INDUSTRIAL PREMIUM
===================================================== */

header{

    width:100%;
    position:fixed;
    top:0;
    left:0;

    z-index:1000;

    background:var(--header-bg);
    backdrop-filter:blur(var(--glass-blur));

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

    transition:var(--transition);

    box-shadow:0 10px 30px rgba(0,0,0,0.25);
}

header.scrolled{
    background:var(--header-bg-strong);
    border-bottom:1px solid var(--header-border-strong);
}

.header-wrapper{

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

    padding:16px 0;

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

/* =====================================================
   LOGO
===================================================== */

.logo{

    font-size:22px;
    font-weight:900;
    letter-spacing:2px;
    color:#f2f2f2;
    text-transform:uppercase;

    position:relative;
}

.logo::after{

    content:"";
    position:absolute;

    left:0;
    bottom:-6px;

    width:45%;
    height:2px;

    background:linear-gradient(90deg,var(--accent),transparent);
    opacity:0.8;
}

/* =====================================================
   NAV
===================================================== */

.nav-area{
    display:flex;
    align-items:center;
    gap:34px;
}

nav ul{
    display:flex;
    list-style:none;
    gap:26px;
    margin:0;
    padding:0;
}

nav ul li a{

    font-size:13px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;

    color:var(--header-text);

    position:relative;
    transition:0.25s ease;
}

nav ul li a::after{

    content:"";
    position:absolute;

    left:0;
    bottom:-6px;

    width:0%;
    height:1px;

    background:var(--accent);
    transition:0.3s ease;
}

nav ul li a:hover{
    color:var(--header-text-hover);
}

nav ul li a:hover::after{
    width:100%;
}

/* =====================================================
   CTA
===================================================== */

.book-btn{

    padding:11px 18px;
    border-radius:10px;

    font-size:13px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;

    color:#111;
    background:linear-gradient(135deg,var(--accent),var(--accent-soft));

    border:1px solid rgba(255,122,0,0.3);

    transition:0.25s ease;

    box-shadow:0 10px 25px rgba(255,122,0,0.15);
}

.book-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 35px rgba(12, 206, 25, 0.25);
}

/* =====================================================
   HAMBURGER (FIXED X POSITION)
===================================================== */

.hamburger{

    display:none;
    flex-direction:column;
    gap:5px;

    cursor:pointer;

    z-index:3001;
    position:relative;
}

.hamburger span{

    width:26px;
    height:2px;

    background:rgba(255,255,255,0.8);

    transition:0.25s ease;
}

.hamburger:hover span{
    background:var(--accent);
}

/* FIXED CROSS — proper corner feel */
.hamburger.active span:nth-child(1){
    transform:rotate(45deg) translate(5px,5px);
}

.hamburger.active span:nth-child(2){
    opacity:0;
}

.hamburger.active span:nth-child(3){
    transform:rotate(-45deg) translate(5px,-5px);
}

/* =====================================================
   MOBILE MENU — WOW UPGRADE
===================================================== */

@media(max-width:768px){

    .nav-area{
        display:none;
    }

    .hamburger{
        display:flex;
    }

    header{
        backdrop-filter:blur(14px);
        background:rgba(8,8,8,0.88);
    }

    .mobile-menu{

        position:fixed;
        top:0;
        right:0;

        width:100%;
        height:100vh;

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

        gap:28px;

        transform:translateX(100%);
        transition:0.5s ease;

        z-index:2000;

        /* WOW UPGRADE */
        background:
        radial-gradient(circle at 20% 20%, rgba(255,122,0,0.12), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(255,122,0,0.06), transparent 50%),
        rgba(5,5,5,0.96);

        backdrop-filter:blur(18px);
    }

    .mobile-menu.open{
        transform:translateX(0);
    }

    /* soft entrance feel */
    .mobile-menu nav ul{
        flex-direction:column;
        gap:18px;
        text-align:center;
    }

    .mobile-menu nav ul li a{

        font-size:22px;
        letter-spacing:2px;

        position:relative;
        opacity:0.9;

        transition:0.3s ease;
    }

    .mobile-menu nav ul li a:hover{
        color:var(--accent);
        transform:translateX(6px);
    }

    body.menu-open{
        overflow:hidden;
    }
}