/* =========================================================
   app.css — استایل‌های مشترک بین همه صفحات (navbar, lang switch,
   دکمه‌ها, فوتر, انیمیشن reveal). هیچ استایلی از اینجا حذف/کم نشده،
   فقط از داخل تگ <style> صفحات HTML به یک فایل مستقل منتقل شده است.
   ========================================================= */

:root{
  --navy:#0a2540;
  --navy-2:#0f3560;
  --gold:#f59e0b;
  --gold-2:#fbbf24;
  --sky:#0ea5e9;
  --light:#f8fafc;
  --gray:#64748b;
  --white:#ffffff;
  --shadow:0 20px 50px rgba(10,37,64,.15);
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Vazirmatn',sans-serif}
html{scroll-behavior:smooth}
body{background:var(--light);color:var(--navy);overflow-x:hidden;line-height:1.7}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
ul{list-style:none}
.container{max-width:1280px;margin:0 auto;padding:0 24px}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px}

/* ===== NAVBAR ===== */
.navbar{position:fixed;top:0;right:0;left:0;z-index:1000;padding:18px 0;transition:.4s;background:rgba(10,37,64,.85);backdrop-filter:blur(12px)}
.navbar.scrolled{background:rgba(255,255,255,.97);box-shadow:0 4px 30px rgba(0,0,0,.08)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:900;color:#fff}
.navbar.scrolled .logo{color:var(--navy)}
.logo-icon{width:44px;height:44px;display:grid;place-items:center}
.nav-menu{display:flex;gap:32px;list-style:none}
.nav-menu a{color:#fff;font-weight:500;position:relative;transition:.3s}
.navbar.scrolled .nav-menu a{color:var(--navy)}
.nav-menu a::after{content:'';position:absolute;bottom:-6px;right:0;width:0;height:2px;background:var(--gold);transition:.3s}
.nav-menu a:hover::after,.nav-menu a.active::after{width:100%}
.nav-menu a:hover,.nav-menu a.active{color:var(--gold)}
.nav-cta{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:var(--navy)!important;padding:10px 24px;border-radius:50px;font-weight:700;box-shadow:0 8px 20px rgba(245,158,11,.3);transition:.3s}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(245,158,11,.5)}
.nav-cta::after{display:none}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer}
.burger span{width:26px;height:3px;background:#fff;border-radius:3px;transition:.3s}
.navbar.scrolled .burger span{background:var(--navy)}

/* صفحاتی مثل بلاگ که همیشه پس‌زمینه روشن دارند (بدون هدر تیره)،
   navbar به‌صورت پیش‌فرض حالت scrolled را دارد؛ کلاس زیر همان رفتار
   navbar در blog.html (بدون حالت شفاف روی navy) را روی صفحات
   بدون هیرو تیره تکرار می‌کند. */
body.has-light-header .navbar{background:rgba(255,255,255,.97);box-shadow:0 4px 30px rgba(0,0,0,.08)}
body.has-light-header .navbar .logo{color:var(--navy)}
body.has-light-header .navbar .nav-menu a{color:var(--navy)}
body.has-light-header .navbar .burger span{background:var(--navy)}

/* ===== LANG SWITCHER ===== */
.lang-switch{position:relative}
.lang-btn{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;padding:8px 14px;border-radius:50px;font-size:13px;font-weight:600;cursor:pointer;transition:.3s;font-family:inherit}
.navbar.scrolled .lang-btn,body.has-light-header .lang-btn{background:rgba(10,37,64,.06);border-color:rgba(10,37,64,.15);color:var(--navy)}
.lang-btn:hover{background:rgba(245,158,11,.25);border-color:var(--gold)}
.lang-btn svg{width:15px;height:15px;flex-shrink:0}
.lang-menu{position:absolute;top:calc(100% + 10px);right:0;background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:8px;min-width:160px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s;z-index:1200}
html[dir="ltr"] .lang-menu{right:auto;left:0}
.lang-switch.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-menu button,.lang-menu a{width:100%;text-align:inherit;display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:transparent;border-radius:9px;cursor:pointer;font-size:14px;font-weight:600;color:var(--navy);font-family:inherit;transition:.2s}
.lang-menu button:hover,.lang-menu a:hover{background:rgba(14,165,233,.08)}
.lang-menu button.active,.lang-menu a.active{background:rgba(245,158,11,.12);color:var(--gold)}
.lang-menu .flag-em{font-size:16px}

/* ===== BUTTONS (shared) ===== */
.btn{padding:16px 32px;border-radius:50px;font-weight:700;font-size:16px;cursor:pointer;border:none;transition:.3s;display:inline-flex;align-items:center;gap:10px}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:var(--navy);box-shadow:0 10px 30px rgba(245,158,11,.35)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 40px rgba(245,158,11,.5)}
.btn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.3)}
.btn-outline:hover{background:#fff;color:var(--navy);border-color:#fff}
body.has-light-header .btn-outline{color:var(--navy);border-color:#e2e8f0}
body.has-light-header .btn-outline:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ===== SECTION HEAD (shared) ===== */
.section-tag{display:inline-block;background:rgba(14,165,233,.1);color:var(--sky);padding:6px 18px;border-radius:50px;font-size:13px;font-weight:700;margin-bottom:16px;letter-spacing:1px}

/* ===== FOOTER (shared) ===== */
footer{background:#061a2e;color:rgba(255,255,255,.7);padding:70px 0 30px;margin-top:40px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:50px}
.foot-col h4{color:#fff;font-size:17px;margin-bottom:22px;font-weight:800;position:relative;padding-bottom:10px}
.foot-col h4::after{content:'';position:absolute;bottom:0;right:0;width:40px;height:3px;background:var(--gold);border-radius:3px}
.foot-col p{font-size:14px;line-height:1.9;margin-bottom:16px}
.foot-col ul li{margin-bottom:12px}
.foot-col ul a{font-size:14px;transition:.3s;display:inline-flex;align-items:center;gap:6px}
.foot-col ul a:hover{color:var(--gold);padding-right:6px}
.social{display:flex;gap:10px;margin-top:16px}
.social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:.3s}
.social a:hover{background:var(--gold);transform:translateY(-3px)}
.social svg{width:18px;height:18px;fill:#fff}
.social a:hover svg{fill:var(--navy)}
.contact-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;font-size:14px}
.contact-item svg{width:18px;height:18px;fill:var(--gold);flex-shrink:0;margin-top:3px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:13px}
.foot-bottom a:hover{color:var(--gold)}

/* ===== REVEAL ANIMATION (shared) ===== */
.reveal{opacity:0;transform:translateY(30px);transition:.8s}
.reveal.show{opacity:1;transform:translateY(0)}

/* ===== RESPONSIVE (shared) ===== */
@media(max-width:992px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-menu{position:fixed;top:70px;right:-100%;width:80%;max-width:320px;height:calc(100vh - 70px);background:#fff;flex-direction:column;padding:30px;gap:20px;transition:.4s;box-shadow:-10px 0 40px rgba(0,0,0,.1)}
  .nav-menu.open{right:0}
  .nav-menu a{color:var(--navy)}
  .burger{display:flex}
}
@media(max-width:600px){
  .foot-grid{grid-template-columns:1fr}
  .lang-btn span.lang-label{display:none}
}