/* =========================
   ROOT — HEADER VARIABLES
========================= */

:root{

    /* COLORS */
    --header-bg: rgba(20,22,26,0.6);
    --header-border: rgba(255,255,255,0.06);

    --text-main: #eaeaea;
    --text-soft: #b8c0c8;
    --text-hover: #ffffff;

    --accent: #d60000;
    --accent-2: #ff2a2a;

    --mobile-text: #c7cdd4;

    /* TYPOGRAPHY */
    --font-size-logo: 20px;
    --font-size-nav: 14px;
    --font-size-mobile: 18px;
    --font-weight-bold: 900;
    --font-weight-nav: 600;

    /* SPACING */
    --header-padding-y: 14px;
    --header-padding-x: 20px;
    --nav-gap: 26px;

    /* EFFECTS */
    --blur: 16px;
    --radius: 18px;

    --shadow-header: 0 20px 60px rgba(0,0,0,0.4);
    --shadow-cta: 0 12px 30px rgba(214,0,0,0.3);
    --shadow-cta-hover: 0 18px 40px rgba(214,0,0,0.45);

    --transition: 0.3s ease;
}


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

.site-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
}

/* GLASS BAR */
.header-inner{
    margin-top:14px;

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

    padding:var(--header-padding-y) var(--header-padding-x);

    background:var(--header-bg);
    border:1px solid var(--header-border);

    backdrop-filter:blur(var(--blur));

    border-radius:var(--radius);

    box-shadow:var(--shadow-header);
}

/* LOGO */
.logo{
    font-size:var(--font-size-logo);
    font-weight:var(--font-weight-bold);
    letter-spacing:-1px;
    color:var(--text-main);
}

.logo span{
    color:#fff;
}

.logo em{
    color:var(--accent);
    font-style:normal;
}

/* NAV */
.nav-area ul{
    display:flex;
    gap:var(--nav-gap);
    list-style:none;
}

.nav-area a{
    color:var(--text-soft);
    font-weight:var(--font-weight-nav);
    font-size:var(--font-size-nav);
    transition:var(--transition);
    position:relative;
}

.nav-area a:hover{
    color:var(--text-hover);
}

/* underline glow effect */
.nav-area a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0%;
    height:2px;
    background:var(--accent);
    transition:var(--transition);
    border-radius:10px;
}

.nav-area a:hover::after{
    width:100%;
}

/* CTA */
.header-cta{
    padding:10px 18px;
    border-radius:12px;

    background:linear-gradient(
        135deg,
        var(--accent),
        var(--accent-2)
    );

    color:#fff;
    font-weight:var(--font-weight-bold);
    font-size:13px;

    box-shadow:var(--shadow-cta);

    transition:var(--transition);
}

.header-cta:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-cta-hover);
}

/* HAMBURGER */
.hamburger{
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    z-index:2000;
}

.hamburger span{
    width:26px;
    height:2px;
    background:#fff;
    border-radius:10px;
    transition:var(--transition);
}

/* ACTIVE STATE */
.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 */
.mobile-menu{
    position:fixed;
    top:80px;
    left:50%;
    transform:translateX(-50%) translateY(-20px);

    width:92%;

    background:rgba(20,22,26,0.95);
    backdrop-filter:blur(18px);

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

    padding:25px;

    opacity:0;
    pointer-events:none;

    transition:var(--transition);
}

.mobile-menu ul{
    display:flex;
    flex-direction:column;
    gap:16px;
    list-style:none;
    text-align:center;
}

.mobile-menu a{
    color:var(--mobile-text);
    font-size:var(--font-size-mobile);
    font-weight:700;
}

.mobile-menu.active{
    opacity:1;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}

.header-cta.mobile{
    display:block;
    margin-top:20px;
    text-align:center;
}

/* RESPONSIVE */
@media(max-width:768px){

    .nav-area,
    .header-cta{
        display:none;
    }

    .hamburger{
        display:flex;
    }

    .header-inner{
        padding:14px 16px;
    }
}