/* ===== توکن‌های طراحی (باید همیشه لود بشه چون همه‌جا استفاده می‌شن) ===== */
:root{
  --paper:#F1F3EE;
  --paper-2:#E6EAE1;
  --ink:#0B1F3A;
  --ink-soft:#48526A;
  --mist:#7C879E;
  --line:rgba(11,31,58,.14);
  --line-strong:rgba(11,31,58,.24);
  --accent:#54D6AC;
  --accent-2:#1F9E7C;
  --accent-soft:#8BE9CB;
  --accent-warm:#FFB020;
  --accent-violet:#7C3AED;
  --glow-warm: rgba(255,176,32,.45);
  --shadow: 0 20px 60px -25px rgba(11,31,58,0.35);
  --ease: cubic-bezier(.16,.84,.44,1);
}
*,*::before,*::after{ box-sizing:border-box; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
.mono{ font-family:'JetBrains Mono', monospace; letter-spacing:.02em; }
.wrap{ max-width:1440px; margin:0 auto; padding:0 1.5rem; }
@media (min-width:900px){ .wrap{ padding:0 3rem; } }
@media (min-width:1600px){ .wrap{ max-width:1600px; padding:0 4rem; } }

.skip-link{
  position:absolute; right:1rem; top:-4rem; background:var(--ink); color:var(--paper);
  padding:.75rem 1.25rem; border-radius:.5rem; z-index:200; transition:top .3s var(--ease);
}
.skip-link:focus{ top:1rem; }

/* ===== نوار بالای هدر ===== */
.topbar{ background:var(--ink); color:#fff; font-size:.78rem; position:relative; z-index:101; }
.topbar-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:38px; }
.topbar a{ opacity:.92; }
.topbar .tb-cta{
  background:var(--accent); color:var(--ink); padding:.3rem .95rem; border-radius:999px; font-weight:800; display:inline-block;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.topbar .tb-cta:hover{ color:#fff; transform:translateY(-1px) scale(1.05); }
.topbar .tb-links{ display:flex; align-items:center; gap:1rem; }
.topbar .tb-links span{ opacity:.4; }
.topbar .tb-links a:hover{ color:var(--accent-soft); }

/* ===== ناوبری اصلی ===== */
.nav{
  position:sticky; top:0; z-index:100; width:100%;
  padding:1.15rem 0; transition: padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  padding:.7rem 0;
  background: rgba(246,245,241,.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-color: var(--line);
  box-shadow: 0 10px 30px -20px rgba(20,19,16,.25);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand{ display:flex; align-items:center; gap:.55rem; font-weight:800; font-size:1.25rem; }
.brand .brand-logo{ height:30px; width:auto; display:block; flex:none; }
.brand .brand-text{ display:flex; align-items:baseline; gap:.5rem; }
.brand .sp{ color:var(--mist); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; }
.nav-links{ display:none; align-items:center; gap:2.1rem; font-size:.95rem; color:var(--ink-soft); }
.nav-links > li{ position:relative; }
.nav-links > li > a{ position:relative; padding:.25rem 0; display:flex; align-items:center; gap:.35rem; }
.nav-links > li > a::after{
  content:''; position:absolute; right:0; bottom:-2px; width:0; height:1px; background:var(--ink);
  transition:width .3s var(--ease);
}
.nav-links > li > a:hover::after{ width:100%; }
.nav-caret{ width:9px; height:9px; flex:none; transition:transform .3s var(--ease); }
.nav-caret path{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.has-dropdown:hover .nav-caret{ transform:rotate(180deg); }
.nav-dropdown{
  position:absolute; top:calc(100% + 14px); right:-14px; min-width:230px;
  background:rgba(246,245,241,.92); border:1px solid var(--line); border-radius:16px;
  padding:.6rem; box-shadow:var(--shadow);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.has-dropdown:hover .nav-dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-dropdown a{
  display:flex; align-items:center; gap:.6rem; padding:.65rem .8rem; border-radius:10px; font-size:.88rem; color:var(--ink-soft);
  transition:background .25s var(--ease), color .25s var(--ease), padding-right .25s var(--ease);
}
.nav-dropdown a:hover{ background:var(--paper-2); color:var(--ink); padding-right:1.05rem; }
.nav-dropdown a .dd-dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; opacity:.7; }
@media (min-width:900px){ .nav-links{ display:flex; } }
.nav-cta-wrap{ display:flex; align-items:center; gap:.8rem; }
.nav-burger{ display:inline-flex; background:none; border:1px solid var(--line-strong); border-radius:8px; padding:.5rem; }
@media (min-width:900px){ .nav-burger{ display:none; } }
.nav-burger span{ display:block; width:18px; height:1.5px; background:var(--ink); margin:4px 0; }

/* ===== منوی موبایل ===== */
.mobile-menu{
  position:fixed; inset:0; z-index:150; background:var(--paper);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1.1rem;
  transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  overflow-y:auto; padding:5rem 1.5rem 3rem;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.mobile-menu a{ font-size:1.25rem; font-weight:700; }
.mobile-close{ position:absolute; top:1.3rem; left:1.3rem; background:none; border:none; font-size:1.6rem; }
.mm-group{ text-align:center; }
.mm-group-title{ font-size:.78rem; letter-spacing:.1em; color:var(--mist); margin-bottom:.7rem; font-family:'JetBrains Mono',monospace; }
.mm-group-links{ display:flex; flex-direction:column; gap:.9rem; }
.mm-group-links a{ font-size:1.02rem; font-weight:600; color:var(--ink-soft); }
.mm-divider{ width:60px; height:1px; background:var(--line-strong); margin:.4rem 0; }

/* ===== دکمه‌ها (لازم برای هدر) ===== */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.5rem; border-radius:999px; padding:.9rem 1.6rem;
  font-size:.92rem; font-weight:600; border:1px solid transparent; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ box-shadow: 0 20px 55px -20px var(--glow-warm); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent-2); }
.btn-sm{ padding:.65rem 1.15rem; font-size:.85rem; }
@media (min-width:900px){
  .nav-burger{
    display:none !important;
  }
  .nav-links{
    display:flex !important;
    flex-wrap:nowrap !important;
  }
}

.mobile-menu{
  display:flex !important;
}
.mobile-menu:not(.is-open){
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}