: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}