/* ==========================================================================
   02 - HEADER + منوی موبایل
   ========================================================================== */

header{
  position:sticky; top:0; z-index:100;
  background:rgba(18,20,28,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:20px 24px; max-width:1200px; margin:0 auto; transition:padding .25s ease;}
header.scrolled .nav-wrap{padding:12px 24px;}
.logo{font-size:20px; font-weight:800; color:var(--text-heading); display:flex; align-items:center; gap:8px;}
.logo span{color:var(--green);}

nav.desktop-nav{display:flex; align-items:center; gap:32px;}
nav.desktop-nav a{font-size:15px; color:var(--text-body); position:relative;}
nav.desktop-nav a:hover{color:var(--text-heading);}

.badge-soon{
  font-size:11px; font-weight:700; color:var(--bg-0); background:var(--lavender);
  padding:2px 8px; border-radius:999px; margin-inline-start:6px;
}

.header-actions{display:flex; align-items:center; gap:16px;}
.hamburger{display:none; flex-direction:column; gap:5px; width:28px;}
.hamburger span{height:2px; background:var(--text-heading); border-radius:2px;}

@media(max-width:900px){
  nav.desktop-nav{display:none;}
  .header-actions .btn{display:none;}
  .hamburger{display:flex;}
}

/* منوی کشویی موبایل */
.mobile-menu{position:fixed; inset:0; z-index:200; display:none;}
.mobile-menu.open{display:block;}
.mobile-menu .overlay{position:absolute; inset:0; background:rgba(0,0,0,.5);}
.mobile-panel{
  position:absolute; top:0; right:0; height:100%; width:78%; max-width:320px;
  background:var(--bg-1); padding:24px; display:flex; flex-direction:column; gap:8px;
  transform:translateX(100%); transition:transform .3s ease;
  border-left:1px solid var(--hairline);
}
.mobile-menu.open .mobile-panel{transform:translateX(0);}
.mobile-panel a{padding:14px 8px; font-size:17px; color:var(--text-heading); border-bottom:1px solid var(--hairline);}
.mobile-panel .btn{margin-top:16px;}
.close-btn{align-self:flex-start; font-size:26px; color:var(--text-muted); background:none; margin-bottom:12px;}

/* نوار CTA شناور موبایل */
.sticky-cta{
  position:fixed; bottom:0; left:0; right:0; z-index:90; display:none;
  padding:12px 16px; background:rgba(18,20,28,.95); backdrop-filter:blur(10px);
  border-top:1px solid var(--hairline);
}
@media(max-width:768px){ .sticky-cta{display:block;} body{padding-bottom:72px;} }