/* ═══════════════════════════════════════════════════
   Nordic Immigration — Core Stylesheet (Light Theme)
   ═══════════════════════════════════════════════════ */

/* ───── FONT-FACE: Persian "SiteFA" ─────
   Actual @font-face rules are injected at runtime by main.js,
   which scans /fonts/ and registers whatever files are present.
   Vazirmatn (loaded as a web fallback below) is the fallback only. */
/* ─── فونت فارسی — فقط از پوشه local ─── */
@font-face {
  font-family: 'Vazirmatn';
  src: url('/static/fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/static/fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/static/fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/static/fonts/Vazirmatn-Black.woff2') format('woff2');
  font-weight: 900; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/static/fonts/Vazirmatn-Light.woff2') format('woff2');
  font-weight: 300; font-display: swap;
}

/* ───────────────── DESIGN TOKENS ───────────────── */
:root {
  /* Light backgrounds */
  --bg:        #f9f8f6;
  --bg-soft:   #f1f0ee;
  --bg-soft2:  #e9e7e4;
  --panel:     #ffffff;
  --surface:   #f4f3f1;
  --border:    #e2e8f0;
  --border-md: #cbd5e0;

  /* Accent palette (preserved + expanded) */
  --sky:      #5aadd6;
  --sky-dk:   #3a8db8;
  --aurora:   #4ecdc4;
  --aurora2:  #45b7d1;
  --gold:     #e8b86d;
  --gold-dim: rgba(232,184,109,0.14);
  --sky-soft: rgba(90,173,214,0.10);

  /* Text */
  --heading:  #1a2535;
  --text:     #4a5568;
  --text-dim: #718096;
  --white:    #ffffff;

  /* Fonts */
  --f-fa:   'SiteFA', 'Vazirmatn', sans-serif;
  --f-en:   'DM Sans', sans-serif;
  --f-disp: 'Cormorant Garamond', serif;

  /* Shadows */
  --shadow:    0 2px 20px rgba(26,37,53,0.06);
  --shadow-lg: 0 16px 48px rgba(26,37,53,0.12);
  --shadow-sky:0 12px 32px rgba(90,173,214,0.28);

  --ease: cubic-bezier(.4,0,.2,1);
  --t: .35s;
  --radius: 14px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--f-fa);
  background: var(--bg);
  color: var(--text);
  direction: rtl;
  overflow-x: hidden;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
body.en { direction:ltr; font-family: var(--f-en); }

/* When lang is EN, even FA-family elements should read in DM Sans
   (FA spans are hidden anyway). Persian font only applies in FA mode. */
body:not(.en) { font-family: var(--f-fa); }

a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }

/* Helper: force English (Latin) font on purely-Latin elements.
   .f-en uses DM Sans always; display font reserved for headings via JS guard. */
.f-en { font-family: var(--f-en); }

/* ───── DECORATIVE: subtle dot pattern + blobs ───── */
.dot-pattern {
  position:absolute; pointer-events:none; z-index:0; opacity:.5;
  background-image: radial-gradient(var(--border-md) 1px, transparent 1px);
  background-size: 22px 22px;
}
.dp-hero    { width:220px; height:220px; top:120px; right:6%; }
.dp-services{ width:200px; height:200px; bottom:40px; left:3%; }
.dp-success { width:200px; height:200px; top:60px; right:4%; }

.blob {
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  filter: blur(60px); opacity:.5;
}
.blob-1 { width:520px; height:520px; top:-160px; right:-120px;
  background: radial-gradient(circle, rgba(90,173,214,.30), transparent 65%); }
.blob-2 { width:420px; height:420px; bottom:-120px; left:-80px;
  background: radial-gradient(circle, rgba(78,205,196,.26), transparent 65%); }
.blob-3 { width:400px; height:400px; top:10%; left:-100px;
  background: radial-gradient(circle, rgba(69,183,209,.20), transparent 65%); }
.blob-4 { width:380px; height:380px; bottom:-80px; right:-60px;
  background: radial-gradient(circle, rgba(232,184,109,.18), transparent 65%); }

/* aurora section divider */
.aurora-divider {
  height:3px; border:none; position:relative; z-index:1;
  background: linear-gradient(90deg, transparent, var(--sky) 20%, var(--aurora) 50%, var(--aurora2) 80%, transparent);
  opacity:.55;
  margin: 0 auto; max-width: 1180px; width:92%;
}

/* ───── UTILS ───── */
.wrap { width:92%; max-width:1180px; margin:0 auto; position:relative; z-index:1; }
.sec  { padding:110px 0; position:relative; overflow:hidden; }
.sec-sm { padding:70px 0; }

/* ───── EYEBROW LABEL ───── */
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color: var(--sky-dk); margin-bottom:18px;
}
.eyebrow::before {
  content:''; width:28px; height:2px;
  background: linear-gradient(90deg,var(--sky),var(--aurora)); border-radius:2px;
}

/* ───── SECTION HEADER ───── */
.sh { margin-bottom:64px; }
.sh.center { text-align:center; }
.sh.center .eyebrow { justify-content:center; }
.sh.center .eyebrow::before { display:none; }
.sh h2 {
  font-size: clamp(2rem,3.5vw,3rem);
  font-weight:700; line-height:1.2; color: var(--heading); margin-bottom:16px;
}
.sh p { font-size:1rem; color: var(--text-dim); max-width:520px; }
.sh.center p { margin:0 auto; }
/* Heading display font ONLY when in EN mode (English-only content) */
body.en .sh h2 { font-family: var(--f-disp); }

/* ───────────────────── NAV ───────────────────── */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding:0 4%;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom:1px solid var(--border);
  transition: var(--t) var(--ease);
}
#nav.scrolled { box-shadow: var(--shadow); }
.nav-row { height:68px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo { display:flex; align-items:center; gap:12px; }
.logo-mark {
  width:38px; height:38px; border-radius:11px;
  background:linear-gradient(135deg,var(--sky) 0%,var(--aurora) 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-en); font-size:1.1rem; font-weight:700; color:var(--white); flex-shrink:0;
  box-shadow:0 4px 14px rgba(90,173,214,.4);
}
.logo-text { line-height:1.2; }
.logo-name { font-family:var(--f-en); font-size:1.18rem; font-weight:700; color:var(--heading); letter-spacing:.01em; }
.logo-tag  { font-size:.65rem; color:var(--text-dim); letter-spacing:.04em; }

.nav-links { display:flex; align-items:center; gap:2px; list-style:none; }
.nav-links a {
  padding:7px 14px; border-radius:9px;
  font-size:.9rem; color:var(--text); transition: var(--t) var(--ease);
}
.nav-links a:hover { color:var(--sky-dk); background:var(--sky-soft); }

.nav-right { display:flex; align-items:center; gap:12px; }
.nav-cta {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 22px; border-radius:9px;
  background:linear-gradient(135deg,var(--sky),var(--aurora));
  color:var(--white); font-size:.88rem; font-weight:600;
  transition: var(--t) var(--ease); box-shadow:0 4px 14px rgba(90,173,214,.3);
}
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(90,173,214,.4); }
.nav-cta:active { transform:translateY(0) scale(.97); }

.lang-toggle { display:flex; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:9px; overflow:hidden; }
.lang-btn { padding:7px 13px; min-width:44px; min-height:34px; border:none; background:none; font-size:.78rem; font-weight:600; color:var(--text-dim); cursor:pointer; transition: var(--t) var(--ease); }
.lang-btn.on { background:linear-gradient(135deg,var(--sky),var(--aurora)); color:var(--white); }

.hbg { display:none; flex-direction:column; gap:4px; cursor:pointer; background:none; border:none; padding:10px; min-width:44px; min-height:44px; align-items:center; justify-content:center; }
.hbg span { display:block; width:22px; height:2px; background:var(--heading); border-radius:2px; transition: var(--t) var(--ease); }

/* mobile menu */
.mob-menu {
  display:none; position:fixed; top:68px; left:0; right:0; bottom:0;
  background:var(--bg); z-index:800; flex-direction:column;
  padding:28px 5%; overflow-y:auto; border-top:1px solid var(--border);
}
.mob-menu.open { display:flex; }
.mob-menu a { padding:15px 0; min-height:44px; border-bottom:1px solid var(--border); font-size:1.05rem; color:var(--text); display:flex; align-items:center; }
.mob-menu a:last-child { border-bottom:none; }
.mob-cta {
  margin-top:24px; padding:15px; border-radius:11px;
  background:linear-gradient(135deg,var(--sky),var(--aurora));
  color:var(--white) !important; text-align:center; font-weight:700; justify-content:center;
}

/* ───────────────────── HERO ───────────────────── */
#hero {
  min-height:100vh; padding-top:68px;
  display:grid; grid-template-columns:1fr 1fr;
  position:relative; overflow:hidden;
  background: linear-gradient(160deg, #ffffff 0%, var(--bg-soft2) 100%);
}
.hero-left { display:flex; align-items:center; padding:80px 5% 80px 5%; position:relative; z-index:2; }
.hero-content { max-width:520px; }

.hero-announce {
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 16px; border-radius:40px;
  background:var(--white); border:1px solid var(--border);
  font-size:.78rem; color:var(--text); margin-bottom:32px; box-shadow:var(--shadow);
}
.hero-dot { width:7px; height:7px; border-radius:50%; background:var(--aurora); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} }

.hero-h1 { font-size: clamp(2.6rem,5vw,4.2rem); font-weight:700; line-height:1.12; color:var(--heading); margin-bottom:24px; }
body.en .hero-h1 { font-family: var(--f-disp); font-weight:600; }
.hero-h1 em { font-style:normal; background:linear-gradient(135deg,var(--sky),var(--aurora)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

.hero-sub { font-size:1.05rem; color:var(--text); line-height:1.85; margin-bottom:44px; max-width:420px; }

.hero-btns { display:flex; gap:14px; flex-wrap:wrap; }
.btn-sky {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 30px; min-height:44px; border-radius:11px;
  background:linear-gradient(135deg,var(--sky),var(--aurora));
  color:var(--white); font-weight:700; font-size:.95rem;
  transition: var(--t) var(--ease); border:none; cursor:pointer; font-family:inherit;
  box-shadow:0 4px 16px rgba(90,173,214,.3);
}
.btn-sky:hover { transform:translateY(-2px); box-shadow:var(--shadow-sky); }
.btn-sky:active { transform:translateY(0) scale(.98); }
.btn-ghost {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; min-height:44px; border-radius:11px;
  background:var(--white); color:var(--text);
  font-size:.95rem; font-weight:600; border:1px solid var(--border);
  transition: var(--t) var(--ease); cursor:pointer; font-family:inherit;
}
.btn-ghost:hover { border-color:var(--sky); color:var(--sky-dk); box-shadow:var(--shadow); }
.btn-ghost:active { transform:scale(.98); }

.hero-kpis { display:flex; gap:36px; margin-top:52px; padding-top:40px; border-top:1px solid var(--border); }
.kpi-num { font-family:var(--f-en); font-size:2.1rem; font-weight:700; color:var(--heading); line-height:1;
  background:linear-gradient(135deg,var(--sky-dk),var(--aurora)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.kpi-label { font-size:.78rem; color:var(--text-dim); margin-top:5px; }

.hero-right { position:relative; display:flex; align-items:center; padding:60px 5% 60px 30px; z-index:2; }
.hero-mosaic { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:12px; width:100%; max-height:580px; }
.mosaic-big { grid-row:span 2; border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-lg); }
.mosaic-sm { border-radius:14px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); }
.mosaic-big img, .mosaic-sm img { width:100%; height:100%; object-fit:cover; transition:.6s ease; }
.mosaic-big:hover img, .mosaic-sm:hover img { transform:scale(1.05); }

.f-badge {
  position:absolute; left:-20px; bottom:120px;
  background:var(--white); border:1px solid var(--border);
  border-radius:14px; padding:16px 20px; min-width:200px; box-shadow:var(--shadow-lg); z-index:3;
}
.f-badge-title { font-weight:700; font-size:.92rem; color:var(--heading); }
.f-badge-sub   { font-size:.75rem; color:var(--text-dim); margin-top:3px; }
.f-badge-bar   { margin-top:12px; height:5px; background:var(--surface); border-radius:3px; overflow:hidden; }
.f-badge-bar-fill { height:100%; width:100%; background:linear-gradient(to right,var(--sky),var(--aurora)); border-radius:3px; }

/* ───────────────────── PARTNERS ───────────────────── */
#partners { background:var(--bg-soft); padding:34px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.partners-row { display:flex; align-items:center; justify-content:center; gap:40px; flex-wrap:wrap; }
.partner-chip { display:flex; align-items:center; gap:12px; padding:10px 22px; border-radius:11px; background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow); }
.partner-icon { width:32px; height:32px; border-radius:7px; background:linear-gradient(135deg,var(--sky),var(--aurora)); display:flex; align-items:center; justify-content:center; font-size:.82rem; font-weight:700; color:var(--white); }
.partner-name { font-size:.9rem; font-weight:700; color:var(--heading); }
.partner-type { font-size:.68rem; color:var(--text-dim); }
.partners-sep { width:1px; height:24px; background:var(--border-md); }
.partners-label { font-size:.75rem; color:var(--text-dim); letter-spacing:.1em; text-transform:uppercase; font-weight:600; }

/* ───────────────────── SERVICES ───────────────────── */
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.svc-card {
  background:var(--white); padding:36px 30px; border-radius:var(--radius);
  position:relative; overflow:hidden; transition: var(--t) var(--ease);
  border:1px solid var(--border); box-shadow:var(--shadow);
}
.svc-card::after {
  content:''; position:absolute; top:0; inset-inline:0; height:3px;
  background:linear-gradient(to right,var(--sky),var(--aurora));
  transform:scaleX(0); transform-origin:inline-start; transition: var(--t) var(--ease);
}
.svc-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(90,173,214,.3); }
.svc-card:hover::after { transform:scaleX(1); }
.svc-icon {
  width:54px; height:54px; border-radius:13px; background:var(--sky-soft); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; margin-bottom:22px; transition: var(--t) var(--ease);
}
.svc-card:hover .svc-icon { background:linear-gradient(135deg,var(--sky),var(--aurora)); border-color:transparent; }
.svc-icon svg { width:24px; height:24px; }
.svc-card:hover .svc-icon svg { stroke:var(--white) !important; }
.svc-title { font-size:1.1rem; font-weight:700; color:var(--heading); margin-bottom:10px; }
.svc-desc  { font-size:.88rem; color:var(--text); line-height:1.8; margin-bottom:20px; }
.svc-list  { list-style:none; display:flex; flex-direction:column; gap:7px; }
.svc-list li { font-size:.8rem; color:var(--text-dim); display:flex; align-items:center; gap:8px; }
.svc-list li::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--aurora); flex-shrink:0; }

/* ───────────────────── STEPS ───────────────────── */
#steps { background:var(--bg-soft); }
.steps-line { display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; }
.steps-line::before {
  content:''; position:absolute; top:34px;
  inset-inline:calc(10% + 34px); height:2px; z-index:0;
  background:linear-gradient(to left, var(--aurora), var(--sky)); /* RTL default; flipped in rtl.css */
}
.step { display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 12px; position:relative; z-index:1; }
.step-circle {
  width:70px; height:70px; border-radius:50%;
  background:var(--white); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-en); font-size:1.3rem; font-weight:700; color:var(--text-dim);
  margin-bottom:20px; transition: var(--t) var(--ease); box-shadow:0 0 0 8px var(--bg-soft);
}
.step:hover .step-circle { background:linear-gradient(135deg,var(--sky),var(--aurora)); color:var(--white); border-color:transparent; transform:scale(1.08); box-shadow:0 0 0 8px var(--bg-soft), var(--shadow-sky); }
.step-title { font-size:.9rem; font-weight:700; color:var(--heading); margin-bottom:6px; }
.step-desc  { font-size:.78rem; color:var(--text-dim); line-height:1.6; }

/* ───────────────────── UNIVERSITIES ───────────────────── */
.uni-split { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.uni-card { background:var(--white); border:1px solid var(--border); border-radius:20px; overflow:hidden; transition: var(--t) var(--ease); box-shadow:var(--shadow); }
.uni-card:hover { border-color:rgba(90,173,214,.35); transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.uni-card-head {
  padding:32px 32px 24px; background:linear-gradient(160deg, var(--sky-soft) 0%, transparent 70%);
  border-bottom:1px solid var(--border); display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
}
.uni-abbr { font-family:var(--f-en); font-size:2.4rem; font-weight:700; color:var(--sky-dk); line-height:1; letter-spacing:-.02em; }
.uni-fullname { font-size:.82rem; color:var(--text-dim); margin-top:4px; }
.uni-badge-chip {
  display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:20px;
  background:var(--gold-dim); border:1px solid rgba(232,184,109,.3);
  font-size:.7rem; font-weight:700; color:#b8860b; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
}
.uni-card-body { padding:24px 32px 32px; }
.uni-card-body p { font-size:.9rem; color:var(--text); line-height:1.8; margin-bottom:20px; }
.uni-tags { display:flex; flex-wrap:wrap; gap:8px; }
.uni-tag { font-size:.75rem; padding:5px 13px; border-radius:7px; background:var(--surface); border:1px solid var(--border); color:var(--text); }

/* ───────────────────── GALLERY (masonry) ───────────────────── */
.gallery-masonry {
  columns: 3; column-gap: 14px;
}
.gallery-masonry .gp {
  break-inside: avoid; margin-bottom:14px;
  border-radius:14px; overflow:hidden; border:1px solid var(--border);
  position:relative; cursor:pointer; box-shadow:var(--shadow); display:block;
}
.gp img { width:100%; height:auto; display:block; transition:.5s ease; }
.gp:hover img { transform:scale(1.05); }
.gp-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(26,37,53,.78) 0%, transparent 55%);
  opacity:0; transition: var(--t) var(--ease); display:flex; align-items:flex-end; padding:16px;
}
.gp:hover .gp-overlay { opacity:1; }
.gp-label { font-size:.84rem; font-weight:600; color:var(--white); }

/* Lightbox */
.lightbox {
  position:fixed; inset:0; z-index:1000; background:rgba(10,14,20,.94);
  display:none; align-items:center; justify-content:center;
}
.lightbox.open { display:flex; }
.lb-stage { max-width:90vw; max-height:88vh; display:flex; flex-direction:column; align-items:center; gap:16px; }
.lb-stage img { max-width:90vw; max-height:78vh; object-fit:contain; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.lb-caption { color:var(--white); font-size:.95rem; text-align:center; }
.lb-close, .lb-nav {
  position:absolute; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:#fff; cursor:pointer; border-radius:50%; width:48px; height:48px;
  display:flex; align-items:center; justify-content:center; transition: var(--t) var(--ease);
}
.lb-close:hover, .lb-nav:hover { background:rgba(255,255,255,.22); }
.lb-close { top:24px; right:24px; font-size:2rem; line-height:1; }
.lb-nav { top:50%; transform:translateY(-50%); font-size:2.4rem; line-height:1; }
.lb-prev { left:24px; }
.lb-next { right:24px; }

/* ───────────────────── SUCCESS ───────────────────── */
.success-row { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.suc-card { background:var(--white); border:1px solid var(--border); border-radius:18px; padding:32px; text-align:center; position:relative; overflow:hidden; transition: var(--t) var(--ease); box-shadow:var(--shadow); }
.suc-card:hover { border-color:rgba(90,173,214,.3); transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.suc-card::before { content:''; position:absolute; top:0; inset-inline:25%; height:3px; background:linear-gradient(to right,transparent,var(--sky),transparent); }
.suc-avatar { width:78px; height:78px; border-radius:50%; margin:0 auto 16px; overflow:hidden; border:3px solid var(--sky-soft); background:var(--surface); }
.suc-avatar img { width:100%; height:100%; object-fit:cover; }
.suc-avatar-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:var(--sky); font-weight:700; }
.suc-name { font-size:1.05rem; font-weight:700; color:var(--heading); }
.suc-prog { font-size:.82rem; color:var(--sky-dk); margin-top:5px; font-weight:600; }
.suc-uni  { font-size:.78rem; color:var(--text-dim); margin-top:3px; }
.suc-admit { margin-top:18px; padding-top:16px; border-top:1px solid var(--border); font-size:.78rem; color:#2bae9f; font-weight:600; }

.admit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:50px; }
.admit-card { border-radius:14px; overflow:hidden; border:1px solid var(--border); transition: var(--t) var(--ease); position:relative; box-shadow:var(--shadow); }
.admit-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:rgba(90,173,214,.3); }
.admit-card img { width:100%; aspect-ratio:3/4; object-fit:cover; }
.admit-caption { position:absolute; bottom:0; inset-inline:0; padding:14px; background:linear-gradient(to top,rgba(26,37,53,.88),transparent); font-size:.78rem; color:var(--white); }

/* ───────────────────── BLOG ───────────────────── */
.sh-blog { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-bottom:48px; }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.blog-card { background:var(--white); border:1px solid var(--border); border-radius:16px; overflow:hidden; transition: var(--t) var(--ease); display:flex; flex-direction:column; box-shadow:var(--shadow); }
.blog-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(90,173,214,.3); }
.blog-thumb { aspect-ratio:16/9; overflow:hidden; }
.blog-thumb img { width:100%; height:100%; object-fit:cover; transition:.5s ease; }
.blog-card:hover .blog-thumb img { transform:scale(1.06); }
.blog-body { padding:22px; flex:1; display:flex; flex-direction:column; }
.blog-cat { font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--sky-dk); margin-bottom:10px; }
.blog-title { font-size:1rem; font-weight:700; color:var(--heading); line-height:1.5; margin-bottom:10px; }
.blog-excerpt { font-size:.85rem; color:var(--text); line-height:1.75; flex:1; }
.blog-footer { display:flex; align-items:center; justify-content:space-between; margin-top:18px; padding-top:14px; border-top:1px solid var(--border); }
.blog-date { font-size:.75rem; color:var(--text-dim); }
.blog-arrow { width:30px; height:30px; border-radius:50%; background:var(--sky-soft); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.8rem; color:var(--sky-dk); transition: var(--t) var(--ease); }
.blog-card:hover .blog-arrow { background:linear-gradient(135deg,var(--sky),var(--aurora)); color:var(--white); border-color:transparent; }

/* ───────────────────── FAQ ───────────────────── */
.faq-wrap { max-width:740px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item { border-radius:12px; overflow:hidden; border:1px solid var(--border); background:var(--white); box-shadow:var(--shadow); }
.faq-q {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 24px; min-height:44px; background:var(--white); border:none; font-family:inherit;
  font-size:.95rem; font-weight:600; color:var(--heading); cursor:pointer; text-align:start; transition: var(--t) var(--ease);
}
.faq-q:hover { background:var(--surface); }
.faq-item.open .faq-q { background:var(--sky-soft); }
.faq-plus { width:28px; height:28px; border-radius:50%; flex-shrink:0; background:var(--sky-soft); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.95rem; color:var(--sky-dk); transition: var(--t) var(--ease); }
.faq-item.open .faq-plus { background:linear-gradient(135deg,var(--sky),var(--aurora)); color:var(--white); transform:rotate(45deg); border-color:transparent; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a-inner { padding:0 24px 20px; font-size:.9rem; color:var(--text); line-height:1.85; }
.faq-item.open .faq-a { max-height:320px; }

/* ───────────────────── CTA ───────────────────── */
.cta-card {
  background:linear-gradient(135deg, #ffffff 0%, var(--bg-soft2) 100%);
  border:1px solid var(--border); border-radius:28px; padding:56px; box-shadow:var(--shadow-lg);
  position:relative; overflow:hidden;
}
.cta-card::before { content:''; position:absolute; top:-100px; inset-inline-end:-100px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(90,173,214,.2),transparent 70%); pointer-events:none; }
.cta-inner { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; z-index:1; }
.cta-left h2 { font-size: clamp(1.9rem,3vw,2.7rem); font-weight:700; color:var(--heading); line-height:1.25; margin-bottom:16px; }
body.en .cta-left h2 { font-family:var(--f-disp); font-weight:600; }
.cta-left p { font-size:.95rem; color:var(--text); line-height:1.8; }
.cta-form { display:flex; flex-direction:column; gap:14px; }
.cta-input {
  padding:14px 18px; min-height:44px; border-radius:11px; background:var(--white);
  border:1.5px solid var(--border); color:var(--heading); font-family:inherit; font-size:.95rem; outline:none; transition: var(--t) var(--ease);
}
.cta-input:focus { border-color:var(--sky); box-shadow:0 0 0 4px var(--sky-soft); }
.cta-input::placeholder { color:var(--text-dim); }
.cta-submit { padding:14px; min-height:44px; border-radius:11px; background:linear-gradient(135deg,var(--sky),var(--aurora)); color:var(--white); border:none; font-family:inherit; font-size:.95rem; font-weight:700; cursor:pointer; transition: var(--t) var(--ease); box-shadow:0 4px 16px rgba(90,173,214,.3); }
.cta-submit:hover { transform:translateY(-2px); box-shadow:var(--shadow-sky); }
.cta-submit:active { transform:scale(.98); }
.cta-note { font-size:.78rem; color:var(--text-dim); text-align:center; }

/* ───────────────────── CONTACT ───────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:60px; align-items:start; }
.contact-cards { display:flex; flex-direction:column; gap:16px; }
.cc { display:flex; align-items:center; gap:18px; padding:20px 22px; border-radius:14px; background:var(--white); border:1px solid var(--border); transition: var(--t) var(--ease); box-shadow:var(--shadow); }
.cc:hover { border-color:rgba(90,173,214,.3); transform:translateY(-2px); }
.cc-social { flex-direction:column; align-items:flex-start; }
.cc-social-label { font-size:.8rem; color:var(--text-dim); margin-bottom:12px; }
.cc-icon { width:46px; height:46px; border-radius:11px; background:var(--sky-soft); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cc-icon svg { width:19px; height:19px; }
.cc-label { font-size:.75rem; color:var(--text-dim); }
.cc-val { font-size:.95rem; font-weight:600; color:var(--heading); margin-top:2px; }
.social-row { display:flex; gap:10px; }
.soc-btn { width:44px; height:44px; border-radius:11px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-dim); transition: var(--t) var(--ease); }
.soc-btn:hover { background:linear-gradient(135deg,var(--sky),var(--aurora)); border-color:transparent; color:var(--white); transform:translateY(-2px); }

.contact-form { background:var(--white); border:1px solid var(--border); border-radius:20px; padding:36px; box-shadow:var(--shadow); }
.cf-title { font-size:1.15rem; font-weight:700; color:var(--heading); margin-bottom:24px; }
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cf-group { margin-bottom:16px; }
.cf-label { display:block; font-size:.8rem; font-weight:600; color:var(--text); margin-bottom:7px; }
.cf-input, .cf-select, .cf-ta {
  width:100%; padding:12px 16px; min-height:44px; border-radius:9px; background:var(--surface);
  border:1.5px solid var(--border); color:var(--heading); font-family:inherit; font-size:.9rem; outline:none; transition: var(--t) var(--ease);
}
.cf-input:focus, .cf-select:focus, .cf-ta:focus { border-color:var(--sky); box-shadow:0 0 0 4px var(--sky-soft); background:var(--white); }
.cf-ta { resize:vertical; min-height:110px; }
.cf-select { appearance:none; }
.cf-btn { width:100%; padding:14px; min-height:44px; border-radius:9px; background:linear-gradient(135deg,var(--sky),var(--aurora)); color:var(--white); border:none; font-family:inherit; font-size:.95rem; font-weight:700; cursor:pointer; transition: var(--t) var(--ease); box-shadow:0 4px 16px rgba(90,173,214,.3); }
.cf-btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-sky); }
.cf-btn:active { transform:scale(.98); }

/* ───────────────────── FOOTER ───────────────────── */
footer { background:var(--bg-soft); border-top:1px solid var(--border); padding:70px 0 36px; }
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:50px; margin-bottom:60px; }
.foot-brand .logo-name { font-size:1.3rem; }
.foot-desc { font-size:.87rem; color:var(--text-dim); line-height:1.85; margin-top:14px; max-width:280px; }
.foot-h { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--heading); margin-bottom:20px; }
.foot-links { list-style:none; display:flex; flex-direction:column; gap:10px; }
.foot-links a { font-size:.87rem; color:var(--text-dim); transition: var(--t) var(--ease); }
.foot-links a:hover { color:var(--sky-dk); }
.foot-bottom { padding-top:28px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; font-size:.8rem; color:var(--text-dim); flex-wrap:wrap; gap:12px; }
.foot-sky { color:var(--sky-dk); font-weight:700; }

/* ───────────────────── FLOATING BUTTONS ───────────────────── */
#stbtn, #waBtn {
  position:fixed; z-index:500; width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: var(--t) var(--ease); box-shadow:var(--shadow-lg);
}
#stbtn { bottom:28px; inset-inline-start:28px; background:var(--white); border:1px solid var(--border); color:var(--sky-dk); opacity:0; pointer-events:none; }
#stbtn.vis { opacity:1; pointer-events:all; }
#stbtn:hover { background:linear-gradient(135deg,var(--sky),var(--aurora)); color:var(--white); border-color:transparent; transform:translateY(-3px); }
#waBtn { bottom:28px; inset-inline-end:28px; background:#25D366; color:#fff; border:none; }
#waBtn:hover { transform:translateY(-3px) scale(1.05); box-shadow:0 12px 28px rgba(37,211,102,.5); }
#waBtn svg { width:28px; height:28px; }

/* ───────────────────── ANIMATIONS ───────────────────── */
.fade { opacity:0; transform:translateY(28px); transition:opacity .65s var(--ease), transform .65s var(--ease); }
.fade.in { opacity:1; transform:none; }

/* page-load fade for hero */
.load-fade { opacity:0; transform:translateY(20px); animation:loadFade .8s var(--ease) forwards; }
@keyframes loadFade { to { opacity:1; transform:none; } }

/* ───────────────────── LANG VISIBILITY ───────────────────── */
body.en [data-fa]       { display:none !important; }
body:not(.en) [data-en] { display:none !important; }
/* inline elements that switch */
span[data-fa], span[data-en], li[data-fa], li[data-en], option[data-fa], option[data-en], a[data-fa], a[data-en] { display:inline !important; }
body.en span[data-fa], body.en li[data-fa], body.en option[data-fa], body.en a[data-fa] { display:none !important; }
body:not(.en) span[data-en], body:not(.en) li[data-en], body:not(.en) option[data-en], body:not(.en) a[data-en] { display:none !important; }