/*
  styles-optimized-dark-animated.css
  - نسخهٔ تکمیلی: شامل دارک مود واقعی (system + toggle)، بهینه‌سازی will-change، میکروانیمیشن‌های بیشتر، و یک اسنیپت JS کامنت‌شده برای ذخیره‌سازیِ حالت تم
  - نگهداری‌پذیر، اولویتش روی پرفورمنس (transform & opacity) و احترام به prefers-reduced-motion است
*/

:root{
  /* Palette */
  --primary: #0b63a7;
  --primary-700: #05568f;
  --accent: #00b7ff;
  --muted: #6b7280;
  --text-dark: #0f1724;
  --white: #ffffff;

  /* Backgrounds / cards */
  --bg: #f3f7fb; /* or #f6f8fb */
  --card: var(--white);
  --grad-card: linear-gradient(180deg,var(--white),#fbfdff);
  --header-grad: linear-gradient(180deg,var(--primary),var(--primary-700));

  /* Spacing / shapes */
  --radius: 12px;
  --card-radius: 12px;
  --card-padding: 18px;

  /* Shadows */
  --shadow-soft: 0 6px 20px rgba(2,6,23,.06);
  --shadow: 0 10px 30px rgba(2,6,23,.08);
  --header-shadow: 0 6px 20px rgba(2,6,23,.12);

  /* Utility */
  --muted-rgba: rgba(11,99,167,.07);
}

/* ----------------------------
   Base reset + accessibility
   ---------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Vazirmatn', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:var(--bg);
  color:var(--text-dark);
  line-height:1.6;
  direction:rtl;
  text-align:right;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none}

/* Focus visibility */
:focus{outline-offset:3px}
a:focus,button:focus,input:focus,textarea:focus,.mobile-drawer a:focus{
  outline:3px solid rgba(11,99,167,0.12);
}

/* ----------------------------
   Shared components (DRY)
   ---------------------------- */
.card-base{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Buttons */
.btn{
  background:var(--accent);
  color:#003046;
  padding:8px 14px;
  border-radius:10px;
  font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;border:none;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,183,255,.14);
}
.btn.secondary{background:transparent;border:1px solid rgba(255,255,255,.16);color:var(--white)}

/* Utilities */
.container{max-width:1100px;margin:18px auto;padding:0 16px}
.center{display:flex;align-items:center;justify-content:center}
.flex{display:flex;gap:12px;align-items:center}
.hidden{display:none}
.right{margin-right:auto}

/* ----------------------------
   Header / Nav
   ---------------------------- */
header, .navbar-modern{
  position:sticky;top:0;z-index:1100;
  background:var(--header-grad);color:var(--white);
  padding:12px 16px;box-shadow:var(--header-shadow);backdrop-filter:blur(4px);
}
.nav-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.logo-circle{width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:18px;border:2px solid rgba(255,255,255,.06)}
.brand-name .title{font-weight:800;font-size:1rem}
.brand-name .tag{font-size:12px;opacity:.95}

nav.main-nav{display:flex;gap:8px;align-items:center;margin-left:auto}
nav.main-nav a{color:rgba(255,255,255,0.95);text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:600;transition:all .18s}
nav.main-nav a:hover,nav.main-nav a.active{background:rgba(255,255,255,0.08);transform:translateY(-2px)}

/* Mobile toggles (hidden desktop) */
.hamburger,.menu-toggle,.nav-toggle{display:none;background:transparent;border:0;color:#fff;padding:8px;cursor:pointer;border-radius:10px}
.hamburger .bar{display:block;height:2.5px;width:22px;margin:4px auto;background:#fff;border-radius:2px;transition:transform .28s cubic-bezier(.2,.9,.3,1),opacity .18s}
.hamburger.active .bar1{transform:translateY(6px) rotate(45deg)}
.hamburger.active .bar2{opacity:0;transform:scaleX(.2)}
.hamburger.active .bar3{transform:translateY(-6px) rotate(-45deg)}

/* Overlay + drawer */
.nav-overlay{position:fixed;inset:0;background:rgba(2,6,23,.45);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s;z-index:1090}
.nav-overlay.show{opacity:1;pointer-events:auto}
.mobile-drawer{position:fixed;top:0;right:0;height:100vh;width:320px;max-width:88vw;background:linear-gradient(180deg,#fff,#fbfdff);transform:translateX(110%);transition:transform .32s cubic-bezier(.2,.9,.3,1);box-shadow:-18px 30px 80px rgba(2,6,23,.14);padding:20px 18px;z-index:1100;border-radius:12px 0 0 12px;display:flex;flex-direction:column;gap:16px}
.mobile-drawer.open{transform:translateX(0)}
.drawer-nav{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.drawer-nav a{padding:12px;border-radius:10px;text-decoration:none;color:var(--primary);font-weight:700;background:linear-gradient(180deg,#f7fbff,#eef7ff);transition:transform .18s,opacity .18s;opacity:0;transform:translateX(8px)}
.mobile-drawer.open .drawer-nav a{opacity:1;transform:none}

.drawer-nav a:nth-child(1){transition-delay:.02s}
.drawer-nav a:nth-child(2){transition-delay:.06s}
.drawer-nav a:nth-child(3){transition-delay:.10s}
.drawer-nav a:nth-child(4){transition-delay:.14s}

.drawer-footer{margin-top:auto;display:flex;flex-direction:column;gap:10px;align-items:flex-start}

/* ----------------------------
   Hero / Layout / Cards
   ---------------------------- */
.hero{max-width:1100px;margin:28px auto;padding:28px 16px;display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start}
.hero-card{padding:26px;border-radius:var(--radius);background:var(--grad-card);box-shadow:var(--shadow)}
.hero h1,.hero h2{margin:0 0 10px;color:var(--primary);line-height:1.3}
.hero p{margin:0 0 18px;color:var(--muted)}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.stats{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}
.stat{background:linear-gradient(180deg,#f7fbff,#eef7ff);padding:12px 14px;border-radius:10px;min-width:100px;text-align:center}
.stat strong{display:block;font-size:1.1rem;color:var(--primary)}

.aside-card{padding:20px;border-radius:12px;background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:var(--shadow-soft)}
.card{padding:var(--card-padding);border-radius:var(--card-radius);box-shadow:0 6px 20px rgba(2,6,23,.05);background:var(--card)}
.notice{background:linear-gradient(90deg,#fff8eb,#fef9f4);padding:12px;border-radius:10px;border:1px solid #fff0e0}

/* Sections + grids */
.section{margin-bottom:28px}
.section h3{margin:0 0 12px;color:var(--primary)}
.about{display:grid;grid-template-columns:1fr 320px;gap:20px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid img{width:100%;height:180px;object-fit:cover;border-radius:10px;cursor:pointer;aspect-ratio:4/3}
.grid-2{display:grid;grid-template-columns:1fr 340px;gap:18px}

/* Lightbox modal */
.modal{position:fixed;inset:0;background:rgba(2,6,23,.8);display:none;align-items:center;justify-content:center;padding:20px;z-index:1200}
.modal.open{display:flex}
.modal-content{position:relative;max-width:95%;max-height:90%;display:flex;align-items:center;justify-content:center}
.modal-content img{max-width:100%;max-height:85vh;border-radius:10px;box-shadow:0 10px 40px rgba(2,6,23,.6)}
.modal-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.08);border:0;color:#fff;padding:10px;border-radius:8px;cursor:pointer}
.modal-prev{left:10px} .modal-next{right:10px}
.modal-close{position:absolute;top:10px;right:10px;background:transparent;border:1px solid rgba(255,255,255,.18);color:#fff;padding:8px;border-radius:8px}

/* Forms */
.contact-grid{display:grid;grid-template-columns:1fr 360px;gap:20px}
form input, form textarea, form select{width:100%;padding:12px;border-radius:10px;border:1px solid #e6eef8;background:#fbfdff;font-size:16px;margin-top:6px}
form label{font-size:.9rem;color:var(--muted)}
.form-feedback{display:none;padding:12px;border-radius:10px;margin-top:12px;font-size:.95rem}
.form-feedback.success{background:#e6ffed;color:#056a36}
.form-feedback.error{background:#ffe6e6;color:#a30000}

/* Footer */
footer{margin-top:20px;padding:22px 16px;background:#02243a;color:#fff}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.small{font-size:13px;color:rgba(255,255,255,0.9)}

/* Chips, toolbar */
.chip{padding:8px 10px;border-radius:999px;background:#eef7ff;border:1px solid var(--muted-rgba);cursor:pointer;font-weight:700}
.chip.active{background:linear-gradient(90deg,var(--accent),#7ddcff);color:#003046}

/* FAQ */
.faq .q{cursor:pointer;padding:12px;border-radius:10px;background:var(--grad-card);margin-bottom:8px;border:1px solid #eef6fb}
.faq .a{display:none;padding:10px 12px;color:var(--muted)}
.faq .q[aria-expanded="true"]{box-shadow:0 8px 30px rgba(11,99,167,.06)}

/* Modal paper (forms) */
.modal .paper{background:var(--card);padding:18px;border-radius:12px;max-width:720px;width:95%;box-shadow:0 20px 70px rgba(2,6,23,.4)}

/* ----------------------------
   Staff / compact cards (smaller)
   ---------------------------- */
.staff-grid{display:grid;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));gap:12px;align-items:start}
.staff-card{
  background:linear-gradient(180deg,#fff,#fbfdff);
  padding:12px; /* reduced */
  border-radius:10px;box-shadow:0 6px 18px rgba(2,6,23,.05);
  display:flex;gap:12px;align-items:center;min-height:80px;transition:transform .18s, box-shadow .18s;font-size:.94rem
}
.staff-card .avatar{width:56px;height:56px;border-radius:8px;flex:0 0 56px;object-fit:cover;border:1px solid rgba(11,99,167,.06);box-shadow:0 4px 12px rgba(2,6,23,.06)}
.staff-card .meta{flex:1;min-width:0}
.staff-card .name{font-weight:800;font-size:0.98rem;margin-bottom:4px;color:var(--text-dark)}
.staff-card .role{font-size:0.85rem;color:var(--muted);margin:0}
.staff-card .actions{display:flex;gap:8px;align-items:center}
.staff-card .small-btn{padding:6px 8px;font-weight:700;border-radius:8px;min-height:34px;font-size:0.85rem}
.staff-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(2,6,23,.08)}

/* KPI / cards */
.kpis{display:flex;gap:12px;margin-top:12px}
.kpi{flex:1;background:linear-gradient(180deg,#fbfdff,#f5fbff);padding:12px;border-radius:10px;text-align:center;transition:transform .3s;cursor:default}
.kpi strong{display:block;color:var(--primary);font-size:1.2rem}
.kpi:hover{transform:scale(1.05)}

/* Normalized cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{background:var(--card);padding:var(--card-padding);border-radius:10px;box-shadow:0 8px 20px rgba(2,6,23,0.04);transition:transform .3s, box-shadow .3s;cursor:default}

/* Compact modal & forms */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,0.6);z-index:9999;padding:18px}
.modal.open{display:flex}
.modal-box{width:100%;max-width:520px;background:#fff;border-radius:10px;padding:18px}
form{background:var(--card);padding:18px;border-radius:10px;box-shadow:0 8px 20px rgba(2,6,23,0.04)}
label{display:block;margin-top:12px;font-weight:600}
input,textarea,select,button{font-family:inherit}
input[type="text"],input[type="date"],input[type="tel"],textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #e6eef6;margin-top:6px;background:#fbfeff}
textarea{min-height:90px;resize:vertical}
.buttons{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.buttons button{padding:10px 14px;border-radius:8px;border:0;cursor:pointer}
.btn-back{background:transparent;border:1px solid rgba(11,99,167,0.14);color:var(--primary)}
button[type="button"]{background:var(--primary);color:#fff}
.form-step{display:none}
.form-step.active{display:block}
.success-message{display:none;margin-top:12px;padding:12px;background:linear-gradient(180deg,#ecfdf5,#d1fae5);border-radius:8px;color:#065f46}

/* ----------------------------
   Responsive
   ---------------------------- */
@media (max-width:1200px){.hero{grid-template-columns:1fr 360px}}
@media (max-width:1000px){.hero{grid-template-columns:1fr}.about{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}.cards{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.container{padding:0 16px}}
@media (max-width:640px){nav.main-nav,.menu-list{display:none}.actions{display:none}.hamburger,.menu-toggle,.nav-toggle{display:block}.grid img{height:150px}.mobile-drawer{width:88vw}.staff-card{padding:10px;gap:10px;min-height:72px}.staff-card .avatar{width:48px;height:48px;flex:0 0 48px}.staff-grid{gap:10px}}
@media (max-width:480px){.grid{grid-template-columns:1fr}.hero h1{font-size:1.4rem}.hero h2{font-size:1.2rem}.hero p,body{font-size:15px}.btn{width:100%}.cards{grid-template-columns:1fr}}
/* ============================
   Animations & Motion System
   ============================ */

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* KEYFRAMES */
@keyframes floatY {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0% { box-shadow: 0 6px 18px rgba(0,183,255,.14); transform: translateY(0); }
  50% { box-shadow: 0 14px 30px rgba(0,183,255,.12); transform: translateY(-2px); }
  100% { box-shadow: 0 6px 18px rgba(0,183,255,.14); transform: translateY(0); }
}

@keyframes slideInFromRight {
  from { transform: translateX(18px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes lightboxFade {
  from { opacity: 0; transform: scale(.98); }
  to   { opacity: 1; transform: scale(1); }
}

/* New: rotateIn for subtle card entrance */
@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-3deg) scale(.96); }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}

/* ======= Animation utilities ======= */
.anim-fade { animation: fadeIn .42s cubic-bezier(.2,.9,.25,1) both; }
.anim-scale { animation: scaleIn .36s cubic-bezier(.2,.9,.25,1) both; }
.anim-float-slow { animation: floatY 6s ease-in-out infinite; }
.anim-pulse { animation: pulse 2.6s ease-in-out infinite; }
.anim-slide-right { animation: slideInFromRight .42s cubic-bezier(.2,.9,.25,1) both; }

/* New utility: rotate entrance */
.anim-rotate { animation: rotateIn .42s cubic-bezier(.2,.9,.25,1) both; }

/* ===== Integrations into components ===== */

/* Buttons: subtle hover + optional pulse on primary CTA */
.btn{
  transition: transform .18s ease, box-shadow .28s ease, background-color .18s;
  will-change: transform, box-shadow;
}
.btn:hover{ transform: translateY(-3px); }
.btn:active{ transform: translateY(-1px) scale(.995); }

/* If you want a pulsing CTA, add class .cta-pulse */
.btn.cta-pulse { animation: none; } /* disabled by default */
@media (hover: hover) {
  .btn.cta-pulse { animation: pulse 2.8s ease-in-out infinite; }
}

/* Cards: entrance + hover lift */
.card, .card-base, .hero-card, .staff-card {
  transform-origin: center;
  transition: transform .28s cubic-bezier(.2,.9,.25,1), box-shadow .28s;
  will-change: transform, box-shadow;
}
.card.anim-in { animation: scaleIn .4s cubic-bezier(.2,.9,.25,1) both; }
.card:hover, .staff-card:hover { transform: translateY(-6px); box-shadow: 0 18px 50px rgba(2,6,23,.12); }

/* Hero: gentle floating on hero image/card */
.hero-card.anim-float { animation: floatY 8s ease-in-out infinite; }

/* Nav drawer links slide-in */
.mobile-drawer .drawer-nav a {
  will-change: transform, opacity;
  transition: transform .36s cubic-bezier(.2,.9,.25,1), opacity .36s;
}
.mobile-drawer.open .drawer-nav a { animation: slideInFromRight .42s cubic-bezier(.2,.9,.25,1) both; }

/* Grid images: hover zoom + subtle tilt */
.grid img {
  transition: transform .36s cubic-bezier(.2,.9,.25,1), box-shadow .36s;
  will-change: transform;
}
.grid img:hover { transform: scale(1.04) translateY(-4px); box-shadow: 0 10px 30px rgba(2,6,23,.12); }

/* Lightbox/modal open */
.modal-content { animation: lightboxFade .32s cubic-bezier(.2,.9,.25,1) both; }
.modal.open { animation: fadeIn .28s ease both; }

/* Hamburger bars: extra polish */
.hamburger .bar { transition: transform .32s cubic-bezier(.2,.9,.3,1), opacity .18s; }

/* Stat counters: subtle fade-in */
.stats .stat { opacity: 0; transform: translateY(8px); animation: fadeIn .5s ease both; }
.stats .stat:nth-child(1){ animation-delay: .04s }
.stats .stat:nth-child(2){ animation-delay: .08s }
.stats .stat:nth-child(3){ animation-delay: .12s }

/* Staff card entrance stagger (auto) */
.staff-card { opacity: 0; transform: translateY(8px); animation: fadeIn .36s cubic-bezier(.2,.9,.25,1) both; }
.staff-grid .staff-card:nth-child(1){ animation-delay:.04s }
.staff-grid .staff-card:nth-child(2){ animation-delay:.08s }
.staff-grid .staff-card:nth-child(3){ animation-delay:.12s }
.staff-grid .staff-card:nth-child(4){ animation-delay:.16s }

/* KPI hover micro-interaction */
.kpi{ transition: transform .28s cubic-bezier(.2,.9,.25,1), box-shadow .28s; }
.kpi:hover{ transform: translateY(-6px) scale(1.02); box-shadow:0 18px 40px rgba(2,6,23,.08); }

/* small utility to trigger animations via JS */
.is-visible { opacity: 1; transform: none; transition: opacity .3s, transform .3s; }

/* Accessibility: focus-visible with animation hint (no layout shift) */
:focus-visible { box-shadow: 0 0 0 4px rgba(11,99,167,0.12); }

/* Optional: shimmer skeleton for lazy-loading images (add .shimmer to placeholder) */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, rgba(250,250,250,0.8) 0%, rgba(240,240,240,0.85) 50%, rgba(250,250,250,0.8) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
  border-radius: 8px;
}

/* Small perf tip: prefer transform & opacity only for animations that change position */

/* ======================
   Additional polish
   ======================*/

/* 1) Targeted will-change utility (prefer adding this to animated elements only) */
.anim-will-change { will-change: transform, opacity; }

/* 2) Microinteraction transitions for chips and FAQ to feel smoother */
.chip, .faq .q { transition: transform .25s cubic-bezier(.2,.9,.25,1), box-shadow .25s, background-color .25s; }
.chip:hover { transform: translateY(-3px) scale(1.02); }

/* 3) Hero entrance (fade + tiny slide) */
.hero-card { animation: fadeIn .6s cubic-bezier(.2,.9,.25,1) both; }

/* 4) Optional rotate entrance for specific cards */
.card.anim-rotate { animation: rotateIn .42s cubic-bezier(.2,.9,.25,1) both; }







/* small helper (visually-hidden) */
.visually-hidden{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}

/* ======================
   Comments: JS snippet (copy into your main JS, NOT executed here)
   ======================*/
/*
// Theme toggle JS (paste into your site JS)
(function(){
  const root = document.documentElement; // or document.body
  const toggle = document.querySelector('.theme-toggle');
  const saved = localStorage.getItem('site-theme');

  function applyTheme(t){
    if(t === 'dark') root.setAttribute('data-theme','dark');
    else root.removeAttribute('data-theme');
    if(toggle) toggle.setAttribute('aria-pressed', t === 'dark');
  }

  // init
  if(saved) applyTheme(saved);
  else if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches){
    applyTheme('dark');
  }

  if(toggle){
    toggle.addEventListener('click', ()=>{
      const isDark = root.getAttribute('data-theme') === 'dark';
      const next = isDark ? 'light' : 'dark';
      applyTheme(next === 'dark' ? 'dark' : 'light');
      localStorage.setItem('site-theme', next);
    });
  }
})();
*/