/* =====================================================================
   RAYAN SAFE BOX — "Vault" Theme
   Luxury security aesthetic · obsidian steel + emerald + champagne gold
   RTL / Persian · shared design system
   ===================================================================== */

/* ---------- Fonts (self-hosted) ----------
   Both families are served from this theme instead of fonts.googleapis.com.
   That CDN is slow or unreachable on many Iranian connections, and an @import
   is render-blocking: the page could not paint a single word until a request
   that might never arrive came back.

   These are the same variable builds Google serves — one file per script, with
   every weight inside it — copied into assets/fonts/. Both are under the SIL
   Open Font License 1.1 (the licence text sits beside the files).

   The rules below are Google's own, with the URLs pointed at the local copies.
   Keep the unicode-range on each: it is what stops a Persian page from
   downloading a Latin file it never draws from. */
@font-face {
  font-family: 'Markazi Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/markazi-text-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'Markazi Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/markazi-text-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Markazi Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/markazi-text-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/vazirmatn-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/vazirmatn-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/vazirmatn-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---------- Tokens ---------- */
:root {
  /* surfaces */
  --obsidian: #0b120f;
  --steel:    #101a16;
  --panel:    #16221d;
  --panel-2:  #1c2b25;
  --line:     rgba(212,175,55,.14);
  --line-soft:rgba(255,255,255,.07);

  /* brand */
  --emerald:  #1fa985;
  --emerald-deep: #0f6f58;
  --emerald-glow: rgba(31,169,133,.35);

  /* gold */
  --gold:   #d9b968;
  --gold-2: #f0d68f;
  --gold-deep: #a8863c;

  /* text */
  --cream:  #f3efe4;
  --text:   #d8ded9;
  --muted:  #93a49d;
  --faint:  #62716b;

  /* type */
  --display: 'Markazi Text', serif;
  --body: 'Vazirmatn', sans-serif;

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);

  --maxw: 1200px;
  --radius: 4px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  background: var(--obsidian);
  color: var(--text);
  line-height: 1.85;
  font-weight: 400;
  direction: rtl;
  overflow-x: hidden;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .3s var(--ease); }
h1,h2,h3,h4 { margin: 0; font-weight: 600; line-height: 1.15; color: var(--cream); }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Atmosphere: grain + vignette on body ---------- */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(31,169,133,.10), transparent 60%),
    radial-gradient(90% 60% at 10% 110%, rgba(217,185,104,.06), transparent 60%);
}
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 2; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
.section { position: relative; z-index: 3; padding: 6.5rem 0; }
.section--tight { padding: 4rem 0; }

.eyebrow {
  font-family: var(--body);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: .8rem;
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
[dir=rtl] .eyebrow::before { background: linear-gradient(270deg, var(--gold), transparent); }

.h-display {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--cream);
}
.lead { color: var(--muted); font-size: 1.08rem; max-width: 52ch; }

.gold-text { color: var(--gold-2); }
.emerald-text { color: var(--emerald); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.7rem;
  font-family: var(--body); font-weight: 600; font-size: .95rem;
  border-radius: var(--radius); border: 1px solid transparent;
  transition: all .35s var(--ease);
  position: relative; overflow: hidden;
}
.btn svg { width: 18px; height: 18px; }
.btn--gold {
  background: linear-gradient(135deg, var(--gold-2), var(--gold-deep));
  color: #241c07;
  box-shadow: 0 10px 30px -12px rgba(217,185,104,.5);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(217,185,104,.7); }
.btn--ghost {
  border-color: var(--line); color: var(--cream);
  background: rgba(255,255,255,.02); backdrop-filter: blur(4px);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-2); background: rgba(217,185,104,.06); }

/* ---------- Header ---------- */
.topbar {
  position: relative; z-index: 30;
  background: #070c0a;
  border-bottom: 1px solid var(--line-soft);
  font-size: .82rem; color: var(--muted);
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: .55rem; padding-bottom: .55rem; flex-wrap: wrap; }
.topbar-info { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.topbar-info span { display: inline-flex; align-items: center; gap: .5rem; }
.topbar-info svg { width: 15px; height: 15px; color: var(--gold); }
.topbar a:hover { color: var(--gold-2); }
.social { display: flex; gap: .9rem; }
.social a { color: var(--faint); }
.social a:hover { color: var(--emerald); }
.social svg { width: 16px; height: 16px; }

.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(11,18,15,.82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line-soft);
  transition: background .3s;
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.brand { display: flex; align-items: center; gap: .75rem; }
.brand-mark {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--gold); border-radius: 50%;
  color: var(--gold-2);
  background: radial-gradient(circle at 30% 25%, rgba(217,185,104,.18), transparent 70%);
}
.brand-mark svg { width: 24px; height: 24px; }
.brand-name { font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--cream); line-height: 1; }
.brand-sub { font-size: .66rem; letter-spacing: .28em; color: var(--gold); text-transform: uppercase; }

.menu { display: flex; align-items: center; gap: .3rem; }
.menu a {
  padding: .5rem .95rem; font-size: .92rem; font-weight: 500; color: var(--text);
  border-radius: var(--radius); position: relative;
}
.menu a::after {
  content: ""; position: absolute; bottom: .15rem; right: .95rem; left: .95rem;
  height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--ease);
}
.menu a:hover, .menu a.active { color: var(--gold-2); }
.menu a:hover::after, .menu a.active::after { transform: scaleX(1); }

.nav-cta { display: flex; align-items: center; gap: 1rem; }
.burger { display: none; background: none; border: 0; color: var(--cream); }
.burger svg { width: 28px; height: 28px; }

/* ---------- Mega menu (desktop) ---------- */
/* Panel anchors opt out of the top-level .menu link styling (padding + underline). */
.mega a { padding: 0; }
.mega a::after { content: none; }
.mega .btn { padding: .85rem 1.7rem; }
.menu { position: relative; }
.menu-item { display: flex; align-items: center; }
.mega-trigger { display: inline-flex; align-items: center; gap: .25rem; cursor: pointer; }
.mega-trigger .mega-caret { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.menu-item.open .mega-trigger .mega-caret,
.menu-item:hover .mega-trigger .mega-caret { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 8px);
  width: min(1060px, calc(100vw - 3rem));
  background: linear-gradient(180deg, var(--panel), var(--steel));
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  padding: 1.6rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  z-index: 50;
}
/* Hover bridge so the pointer can cross the gap without the panel closing. */
.mega::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.menu-item:hover .mega,
.menu-item:focus-within .mega,
.menu-item.open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }

.mega-inner { display: grid; grid-template-columns: 1fr 250px; gap: 1.6rem; }
.mega-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem 1.5rem; align-content: start; }
.mega-col-title {
  font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: var(--gold-2);
  margin: 0 0 .6rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line);
}
.mega-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.mega-col a {
  display: block; padding: .38rem .5rem; margin: 0 -.5rem; border-radius: var(--radius);
  font-size: .875rem; line-height: 1.5; color: var(--text);
  transition: color .2s, background .2s, padding .2s;
}
.mega-col a:hover { color: var(--gold-2); background: rgba(217,185,104,.08); padding-inline-start: .85rem; }

/* The long product family spans the whole row and splits its own list, so the
   short columns below it are not left trailing white space.
   Declared after .mega-col ul on purpose: both selectors have the same
   specificity, and a multi-column list must not be a flex container — flex
   silently discards `columns` altogether. */
.mega-col--wide { grid-column: 1 / -1; }
.mega-col--wide ul { display: block; columns: 3; column-gap: 1.6rem; }
.mega-col--wide li { break-inside: avoid; }
.mega-col--wide li + li { margin-top: .12rem; }

.mega-promo {
  background: radial-gradient(circle at 30% 20%, rgba(31,169,133,.18), transparent 70%), var(--panel-2);
  border: 1px solid var(--line); border-radius: 10px; padding: 1.6rem 1.4rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: .7rem;
  /* The card is as tall as the columns beside it, which varies with how many
     products exist. Centring the group keeps it composed at any height —
     pinning the button to the floor left a dead zone through the middle. */
  justify-content: center;
}
.mega-promo-ic {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: .1rem;
  background: rgba(31,169,133,.14); border: 1px solid rgba(31,169,133,.28);
  color: var(--emerald);
}
.mega-promo-ic svg { width: 24px; height: 24px; }
.mega-promo-title { font-family: var(--display); font-size: 1.3rem; line-height: 1.45; color: var(--cream); margin: 0; }
.mega-promo p { font-size: .88rem; line-height: 1.8; color: var(--muted); margin: 0; }
.mega-promo .btn { margin-top: .5rem; align-self: stretch; justify-content: center; }

/* ---------- Hero ---------- */
.hero {
  position: relative; z-index: 3;
  min-height: 88vh; display: flex; align-items: center;
  overflow: hidden;
  padding: 5rem 0;
  background:
    linear-gradient(180deg, rgba(11,18,15,.72), rgba(11,18,15,.92)),
    radial-gradient(80% 120% at 85% 20%, #16302a, #0b120f 70%);
}
.hero-grid-lines {
  position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 70% 40%, #000, transparent 75%);
}
.hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.hero-copy h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.02;
  color: var(--cream); margin: .4rem 0 1.4rem;
}
.hero-copy h1 em { font-style: normal; color: var(--gold-2); }
.hero-actions { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }

/* 3D vault stage.
   The ::before padding-hack forces a fixed 4:3 box independent of
   `aspect-ratio` support (Elementor's global CSS can reset it). Two reasons it
   is 4:3 rather than square: the door swings wide when it opens and needs the
   horizontal room, and a square reserved a tall empty block in the hero while
   three.js was still downloading. BOX_RATIO in vault3d.js mirrors the 75%.
   The canvas is absolutely positioned so it fills that box without feeding its
   own height back into the container — otherwise a WebGL canvas +
   ResizeObserver can grow unbounded. */
.vault3d {
  position: relative; width: 100%; max-width: 520px;
  margin-inline: auto; touch-action: pan-y;
}
.vault3d::before { content: ""; display: block; padding-bottom: 75%; }
/* Soft aura behind the safe. The hero background and the safe's steel are both
   near-black, so without this halo the silhouette has nothing to read against. */
.vault3d::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -18% -14% -10%;
  background:
    radial-gradient(48% 42% at 50% 47%, rgba(217,185,104,.20), transparent 70%),
    radial-gradient(62% 58% at 42% 56%, rgba(31,169,133,.20), transparent 72%),
    radial-gradient(70% 64% at 50% 50%, rgba(9,15,13,.85), transparent 74%);
  filter: blur(6px);
}
.vault3d > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.vault3d canvas { border-radius: 12px; }
/* hide the CSS fallback once the WebGL scene is live */
.vault3d.is-ready .vault-fallback { display: none; }
/* The stage is 4:3 but the placeholder vault is round, so it keeps a square of
   its own, centred, instead of being stretched into an ellipse by the rule
   above. */
.vault3d .vault-fallback {
  width: auto; height: 100%; max-width: none; aspect-ratio: 1;
  inset: 50% auto auto 50%; transform: translate(-50%, -50%);
}
/* While three.js is still on the wire this placeholder is all there is; a slow
   pulse reads as "loading" rather than as a graphic that failed. */
@media (prefers-reduced-motion: no-preference) {
  .vault3d:not(.is-ready) .vault-core { animation: vault-wait 2.6s var(--ease) infinite; }
}
@keyframes vault-wait {
  50% { box-shadow: 0 0 90px -4px var(--emerald-glow), inset 0 2px 20px rgba(0,0,0,.6); }
}

/* vault visual */
.vault {
  position: relative; aspect-ratio: 1; width: 100%; max-width: 420px; margin-inline: auto;
  display: grid; place-items: center;
}
.vault-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--line);
}
.vault-ring.r2 { inset: 34px; border-color: rgba(217,185,104,.22); }
.vault-ring.r3 { inset: 68px; border-style: dashed; border-color: rgba(31,169,133,.3); animation: spin 40s linear infinite; }
.vault-core {
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #22332d, #0c1512 70%);
  border: 1px solid var(--gold);
  display: grid; place-items: center;
  box-shadow: 0 0 60px -10px var(--emerald-glow), inset 0 2px 20px rgba(0,0,0,.6);
}
.vault-core svg { width: 44%; color: var(--gold-2); filter: drop-shadow(0 0 12px rgba(217,185,104,.4)); }
/* Each tick is a strip reaching from the rim to the centre, with the mark
   itself painted near its outer end. Rotating around the strip's own bottom
   edge puts every tick exactly on the ring whatever size the placeholder is —
   a fixed pixel transform-origin only lined up at one width. */
.vault-tick {
  position: absolute; top: 0; left: 50%;
  width: 2px; height: 50%;
  transform-origin: 50% 100%;
  background: linear-gradient(
    180deg,
    transparent 4px,
    var(--gold) 4px,
    var(--gold) calc(4px + var(--tick-len, 12px)),
    transparent calc(4px + var(--tick-len, 12px))
  );
  opacity: .6;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Feature strip ---------- */
.features { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 6px; overflow: hidden; }
.feature {
  background: var(--panel); padding: 2.4rem 2rem;
  transition: background .4s var(--ease); position: relative;
}
.feature:hover { background: var(--panel-2); }
.feature-ic {
  width: 52px; height: 52px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(31,169,133,.16), rgba(217,185,104,.08));
  border: 1px solid var(--line); color: var(--emerald); margin-bottom: 1.3rem;
}
.feature-ic svg { width: 26px; height: 26px; }
.feature h2 { font-size: 1.3rem; margin-bottom: .6rem; font-family: var(--display); font-weight: 600; }
.feature p { color: var(--muted); font-size: .95rem; margin: 0; }

/* ---------- Section heading block ---------- */
.sec-head { text-align: center; max-width: 640px; margin: 0 auto 3.5rem; }
.sec-head .h-display { margin-bottom: 1rem; }
.sec-head p { color: var(--muted); margin: 0; }

/* ---------- Stats ---------- */
.stats-band {
  position: relative; z-index: 3;
  background:
    linear-gradient(rgba(9,15,12,.86), rgba(9,15,12,.92)),
    radial-gradient(60% 120% at 50% 0%, #16302a, transparent 70%);
  border-block: 1px solid var(--line-soft);
}
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; text-align: center; }
.stat-num { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem,5vw,3.6rem); color: var(--gold-2); line-height: 1; }
.stat-num small { font-size: .5em; color: var(--emerald); margin-inline-start: .2rem; }
.stat-lbl { color: var(--muted); font-size: .95rem; margin-top: .5rem; }
.stat + .stat { border-inline-start: 1px solid var(--line-soft); }

/* ---------- Product / card grid ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }
.grid-2 { grid-template-columns: repeat(2,1fr); }

.card {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: 8px; overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
  position: relative;
}
.card:hover { transform: translateY(-6px); border-color: var(--line); box-shadow: 0 24px 50px -24px rgba(0,0,0,.8); }
.card-media {
  aspect-ratio: 4/3; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1a2a24, #0e1713);
  display: grid; place-items: center;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card-media img { transform: scale(1.06); }
.card-media .ph { color: var(--emerald); opacity: .5; }
.card-media .ph svg { width: 56px; height: 56px; }
.card-tag {
  position: absolute; top: .9rem; inset-inline-start: .9rem;
  background: rgba(11,18,15,.8); backdrop-filter: blur(6px);
  color: var(--gold-2); font-size: .72rem; font-weight: 600;
  padding: .3rem .7rem; border-radius: 100px; border: 1px solid var(--line);
}
.card-body { padding: 1.4rem 1.4rem 1.6rem; }
.card-body h2, .card-body h3, .card-body h4 { font-size: 1.15rem; line-height: 1.4; margin-bottom: .6rem; font-weight: 600; }
.card:hover .card-body h2, .card:hover .card-body h3, .card:hover .card-body h4 { color: var(--gold-2); }
.card-meta { font-size: .8rem; color: var(--faint); display: flex; align-items: center; gap: .5rem; }
.card-link { margin-top: 1rem; display: inline-flex; align-items: center; gap: .4rem; color: var(--emerald); font-size: .88rem; font-weight: 600; }
.card-link svg { width: 15px; height: 15px; transition: transform .3s; }
.card:hover .card-link svg { transform: translateX(-4px); }

/* ---------- Honors / achievements ---------- */
.honors { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.honor {
  padding: 2rem 1.6rem; border: 1px solid var(--line-soft); border-radius: 8px;
  background: linear-gradient(160deg, var(--panel), var(--steel));
  position: relative; transition: border-color .4s, transform .4s var(--ease);
}
.honor:hover { border-color: var(--gold); transform: translateY(-4px); }
.honor-ic { color: var(--gold); margin-bottom: 1rem; }
.honor-ic svg { width: 30px; height: 30px; }
.honor p { margin: 0; color: var(--text); font-size: .98rem; line-height: 1.7; }
.honor.wide { grid-column: 1 / -1; background: linear-gradient(120deg, rgba(31,169,133,.1), var(--panel)); }

/* ---------- Timeline (about) ---------- */
.timeline { --tl-dot: 12px; --tl-gap: 2rem; position: relative; max-width: 760px; margin: 0 auto; padding-inline-start: calc(var(--tl-gap) + var(--tl-dot)); }
.timeline::before { content:""; position:absolute; top:.9rem; bottom:.5rem; inset-inline-start: calc((var(--tl-dot) - 2px) / 2); width:2px; background: linear-gradient(var(--gold), rgba(217,185,104,.15)); }
.tl-item { position: relative; padding: 0 0 2.5rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content:""; position:absolute; inset-inline-start: calc(-1 * (var(--tl-gap) + var(--tl-dot))); top:.4rem; width: var(--tl-dot); height: var(--tl-dot); border-radius:50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(217,185,104,.15); }
.tl-date { color: var(--emerald); font-weight: 600; font-size: .85rem; letter-spacing: .05em; }
.tl-item h3 { font-family: var(--display); font-size: 1.5rem; margin: .2rem 0 .4rem; }
.tl-item p { color: var(--muted); margin: 0; }

/* ---------- Feature list (checkmarks) ---------- */
.checklist { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.1rem; }
.checklist li { display: flex; gap: .8rem; align-items: flex-start; color: var(--text); font-size: .96rem; }
.checklist .ck { flex: none; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: rgba(31,169,133,.14); color: var(--emerald); border: 1px solid var(--line); }
.checklist .ck svg { width: 14px; height: 14px; }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; }
/* The hidden attribute must win over any display a component sets, otherwise
   `el.hidden = true` silently does nothing. Declared once, for the whole theme. */
[hidden] { display: none !important; }

.gallery a { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--panel); }
.gallery img { width:100%; height:100%; object-fit: cover; transition: transform .6s var(--ease), filter .4s; filter: saturate(.9) brightness(.92); }
.gallery a:hover img { transform: scale(1.08); filter: saturate(1.05) brightness(1); }
.gallery a::after { content:""; position:absolute; inset:0; border:1px solid transparent; border-radius:6px; transition: border-color .4s; }
.gallery a:hover::after { border-color: var(--gold); }
.gallery a.tall { grid-row: span 2; aspect-ratio: auto; }

/* Mosaic variant — a few cells span two tracks for an editorial rhythm.
   Dense flow backfills the gaps those spans would otherwise leave. */
.gallery--mosaic { grid-auto-flow: dense; gap: .9rem; }
.gallery--mosaic .g-item.is-big  { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gallery--mosaic .g-item.is-tall { grid-row: span 2; aspect-ratio: auto; }

/* Cell chrome: gold hairline that draws itself in, veil + zoom badge on hover. */
.g-item { display: block; cursor: zoom-in; box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.g-item::after { border-radius: 6px; box-shadow: inset 0 0 0 0 rgba(217,185,104,.35); transition: border-color .4s var(--ease), box-shadow .4s var(--ease); }
.g-item:hover::after, .g-item:focus-visible::after { border-color: var(--gold); box-shadow: inset 0 0 26px rgba(217,185,104,.16); }
.g-item:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

.g-veil {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  background: linear-gradient(to top, rgba(7,12,10,.82), rgba(7,12,10,.12) 55%, transparent);
  opacity: 0; transition: opacity .4s var(--ease);
}
.g-item:hover .g-veil, .g-item:focus-visible .g-veil { opacity: 1; }

.g-zoom {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  color: var(--gold-2); background: rgba(11,18,15,.55); border: 1px solid var(--line);
  backdrop-filter: blur(6px);
  transform: scale(.7) translateY(10px); transition: transform .45s var(--ease);
}
.g-zoom svg { width: 20px; height: 20px; }
.g-item:hover .g-zoom, .g-item:focus-visible .g-zoom { transform: none; }

/* Index badge, bottom corner — Persian numerals come from the template. */
.g-num {
  position: absolute; z-index: 3; inset-block-end: .6rem; inset-inline-start: .7rem;
  font-size: .75rem; letter-spacing: .1em; color: var(--gold-2);
  opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.g-item:hover .g-num, .g-item:focus-visible .g-num { opacity: .9; transform: none; }

/* ---------- Lightbox ---------- */
.lb {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(6,10,9,.93); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity .32s var(--ease);

  /* The stage insets, as variables, because the picture has to size itself
     against the viewport rather than against .lb-figure: a percentage
     max-height resolves to none when the parent's height is auto, so the old
     `max-height: 100%` constrained nothing and a tall photo rendered at its
     natural size — hundreds of pixels past the frame and under the filmstrip.
     Keep these in step with .lb-stage's inset below. */
  --lb-inset-y: 12rem;   /* 4.4rem top + 7.6rem bottom */
  --lb-inset-x: 9.6rem;  /* 4.8rem each side          */
}
.lb.is-open { display: block; }
.lb.is-visible { opacity: 1; }
body.lb-lock { overflow: hidden; }

.lb-stage {
  position: absolute; inset: 4.4rem 4.8rem 7.6rem;
  display: grid; place-items: center;
}
.lb-figure { margin: 0; display: flex; max-width: 100%; max-height: 100%; position: relative; }
.lb-img {
  max-width: calc(100vw - var(--lb-inset-x));
  max-height: calc(100vh - var(--lb-inset-y));
  /* Dynamic viewport units account for mobile browser chrome that comes and
     goes; the vh pair above stays as the fallback. */
  max-height: calc(100dvh - var(--lb-inset-y));
  width: auto; height: auto; object-fit: contain;
  border-radius: 6px; border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  opacity: 0; transform: scale(.97);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.lb-img.is-ready { opacity: 1; transform: none; }

/* Spinner shown while the full-size file streams in. */
.lb-spin {
  position: absolute; inset: 0; margin: auto; width: 34px; height: 34px;
  border: 2px solid rgba(217,185,104,.2); border-top-color: var(--gold);
  border-radius: 50%; animation: lb-spin .8s linear infinite; opacity: 0;
  transition: opacity .2s;
}
.lb.is-loading .lb-spin { opacity: 1; }
@keyframes lb-spin { to { transform: rotate(360deg); } }

.lb-bar {
  position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.6rem; gap: 1rem;
  background: linear-gradient(to bottom, rgba(7,12,10,.75), transparent);
}
.lb-count { font-size: .9rem; letter-spacing: .12em; color: var(--gold-2); }
.lb-count i { font-style: normal; color: var(--faint); margin: 0 .3rem; }
.lb-title { color: var(--muted); font-size: .9rem; }

.lb-btn {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none;
  border-radius: 50%; border: 1px solid var(--line-soft); background: rgba(22,34,29,.7);
  color: var(--cream); backdrop-filter: blur(6px);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.lb-btn svg { width: 22px; height: 22px; }
.lb-btn:hover { color: var(--gold-2); border-color: var(--gold); background: rgba(22,34,29,.95); }
.lb-btn:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.lb-btn[disabled] { opacity: .28; pointer-events: none; }

.lb-nav { position: absolute; inset-block-start: 50%; z-index: 2; transform: translateY(-50%); width: 54px; height: 54px; }
/* RTL: inline-start is the right edge. "Previous" sits there — the direction the
   eye came from — and "next" on the left, each glyph pointing outward. */
.lb-prev { inset-inline-start: 1.1rem; }
.lb-next { inset-inline-end: 1.1rem; }
.lb-nav:hover { transform: translateY(-50%) scale(1.06); }

/* Filmstrip */
.lb-strip {
  position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 2;
  display: flex; gap: .5rem; padding: 1rem 1.6rem 1.3rem;
  overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(to top, rgba(7,12,10,.8), transparent);
}
.lb-strip::-webkit-scrollbar { display: none; }
.lb-thumb {
  flex: none; width: 62px; height: 46px; padding: 0; border: 1px solid transparent;
  border-radius: 4px; overflow: hidden; background: var(--panel); cursor: pointer;
  opacity: .45; transition: opacity .3s var(--ease), border-color .3s var(--ease);
}
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb-thumb:hover { opacity: .85; }
.lb-thumb.is-active { opacity: 1; border-color: var(--gold); }
.lb-thumb:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .lb, .lb-img, .g-zoom, .g-num, .g-veil { transition: none; }
  .lb-img { transform: none; }
  .lb-spin { animation-duration: 2s; }
}

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.office { padding: 1.8rem; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel); transition: border-color .3s; }
.office:hover { border-color: var(--line); }
.office h2 { font-family: var(--display); font-size: 1.6rem; color: var(--gold-2); margin-bottom: .9rem; display:flex; align-items:center; gap:.6rem; }
.office h2 svg { width: 22px; height: 22px; color: var(--emerald); }
.office-row { display:flex; gap:.6rem; padding:.4rem 0; color: var(--text); font-size:.95rem; border-top: 1px solid var(--line-soft); }
.office-row:first-of-type { border-top: 0; }
.office-row b { color: var(--muted); min-width: 52px; font-weight: 500; }
.office-row span { direction: ltr; }

/* Phone numbers are dialable wherever they are printed — the footer, the office
   cards. They keep the colour of the line they sit in so the text reads exactly
   as before, and only announce themselves on hover and keyboard focus. */
.tel-link:hover { color: var(--gold-2); }
.tel-link:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; border-radius: 2px; }

.field { margin-bottom: 1.1rem; }
.field label { display:block; font-size:.85rem; color: var(--muted); margin-bottom:.4rem; }
.field input, .field textarea, .field select {
  width:100%; padding:.85rem 1rem; background: var(--steel); border:1px solid var(--line-soft);
  border-radius: var(--radius); color: var(--cream); font-family: var(--body); font-size:.95rem;
  transition: border-color .3s, box-shadow .3s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(31,169,133,.14); }
.field textarea { resize: vertical; min-height: 130px; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; z-index:3; overflow: hidden;
  background: radial-gradient(80% 140% at 50% 0%, #16352d, #0b120f 70%);
  border-block: 1px solid var(--line);
  text-align: center;
}
.cta-band .h-display { margin-bottom: 1rem; }
.cta-band p { color: var(--muted); max-width: 46ch; margin: 0 auto 2rem; }

/* ---------- Footer ---------- */
.footer { position: relative; z-index:3; background: #070c0a; border-top: 1px solid var(--line-soft); padding-top: 4.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.3fr; gap: 2.5rem; padding-bottom: 3rem; }
.footer h2 { font-family: var(--display); font-size: 1.4rem; color: var(--cream); margin-bottom: 1.2rem; }
.footer p, .footer li { color: var(--muted); font-size: .92rem; }
.footer-links li { margin-bottom: .6rem; }
.footer-links a:hover { color: var(--gold-2); }
.footer .brand { margin-bottom: 1.2rem; }
.newsletter { display: flex; gap: .5rem; margin-top: 1rem; }
.newsletter input { flex:1; padding:.8rem 1rem; background: var(--steel); border:1px solid var(--line-soft); border-radius: var(--radius); color: var(--cream); font-family: var(--body); }
.newsletter input:focus { outline:none; border-color: var(--gold); }
.footer-bottom { border-top: 1px solid var(--line-soft); padding: 1.5rem 0; text-align: center; color: var(--faint); font-size: .85rem; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative; z-index:3; padding: 5.5rem 0 4rem; text-align: center;
  background:
    linear-gradient(rgba(11,18,15,.8), var(--obsidian)),
    radial-gradient(70% 120% at 50% 0%, #16302a, transparent 70%);
  border-bottom: 1px solid var(--line-soft);
}
.page-hero .h-display { margin-bottom: 1rem; }
/* The trail is an <ol> so the order it states to a screen reader and to a
   crawler is the order it shows; the arrows are decoration and stay in CSS. */
.crumbs { color: var(--faint); font-size: .85rem; }
.crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: .45rem;
}
.crumbs li { display: flex; align-items: center; gap: .45rem; }
.crumbs li + li::before { content: "←"; color: var(--line); }
.crumbs a:hover { color: var(--gold-2); }
.crumbs [aria-current="page"] { color: var(--emerald); }

/* ---------- Skip link ---------- */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
.skip-link:focus {
  position: fixed; z-index: 999; inset-inline-start: 1rem; top: 1rem;
  width: auto; height: auto; clip-path: none; margin: 0;
  padding: .7rem 1.2rem; border-radius: var(--radius);
  background: var(--gold); color: var(--obsidian); font-weight: 700;
}

/* ---------- Reveal on scroll (only hides when JS is active) ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Prose (articles) ---------- */
.prose { max-width: 720px; margin: 0 auto; }
.prose p { color: var(--text); }
.prose h2 { font-family: var(--display); font-size: 2rem; margin: 2.2rem 0 1rem; color: var(--gold-2); }
.prose h3 { font-family: var(--display); font-size: 1.5rem; margin: 1.8rem 0 .8rem; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr; }
  /* The placeholder is sized by the stage height once the hero stacks. */
  .vault3d .vault-fallback { max-height: 320px; }
  .features, .grid-3, .grid-4, .honors, .contact-grid, .footer-grid, .checklist { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(3,1fr); }
  .lb-stage { inset: 4rem 1rem 6.6rem; }
  .lb-nav { width: 44px; height: 44px; }
  .stats { grid-template-columns: repeat(2,1fr); gap: 2.5rem 1rem; }
  .stat + .stat { border: 0; }
  .menu { display: none; }
  .burger { display: block; }
}
@media (max-width: 560px) {
  .section { padding: 4.5rem 0; }
  .gallery { grid-template-columns: repeat(2,1fr); }
  .gallery--mosaic { gap: .6rem; }
  /* Two columns leave no room for a 2×2 cell without swallowing the row. */
  .gallery--mosaic .g-item.is-big { grid-column: span 2; }
  /* Arrows would sit on top of the photo at this width — swipe/filmstrip instead. */
  .lb-nav { display: none; }
  .lb-stage { inset: 3.6rem .7rem 6rem; }
  .lb { --lb-inset-y: 9.6rem; --lb-inset-x: 1.4rem; }
  .lb-bar { padding: .8rem 1rem; }
  .lb-strip { padding: .8rem 1rem 1rem; }
  .lb-thumb { width: 52px; height: 40px; }
  .topbar-info { gap: .9rem; }
  .hero-actions .btn { flex: 1; justify-content: center; }
}

/* ---------- Mobile menu ---------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 60; background: rgba(7,12,10,.98);
  backdrop-filter: blur(8px); display: none; flex-direction: column;
  padding: 6rem 2rem 2rem; gap: .5rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu a { font-family: var(--display); font-size: 1.8rem; color: var(--cream); padding: .6rem 0; border-bottom: 1px solid var(--line-soft); }
.mobile-menu a:hover { color: var(--gold-2); }
.mobile-close { position: absolute; top: 1.6rem; inset-inline-start: 1.6rem; background: none; border: 0; color: var(--cream); }
.mobile-close svg { width: 30px; height: 30px; }

/* Mobile mega accordion */
.mobile-item { border-bottom: 1px solid var(--line-soft); }
.mobile-item-row { display: flex; align-items: center; justify-content: space-between; }
.mobile-item-row a { flex: 1; border-bottom: 0; }
.mobile-sub-toggle { background: none; border: 0; color: var(--gold); padding: .6rem .4rem; cursor: pointer; }
.mobile-sub-toggle svg { width: 26px; height: 26px; transition: transform .3s var(--ease); }
.mobile-item.open .mobile-sub-toggle svg { transform: rotate(180deg); }
.mobile-sub {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
}
.mobile-item.open .mobile-sub { grid-template-rows: 1fr; }
.mobile-sub-inner { overflow: hidden; display: flex; flex-direction: column; }
.mobile-sub-title {
  display: block; font-family: var(--body); font-size: .8rem; letter-spacing: .12em;
  color: var(--gold); text-transform: uppercase; padding: .8rem 0 .2rem; opacity: .85;
}
.mobile-sub a {
  font-family: var(--body); font-size: 1.05rem; color: var(--text);
  padding: .35rem 0 .35rem 1rem; border-bottom: 0;
}

/* ============================================================
   CUSTOMERS PAGE — interactive Iran map, city panel, directory
   ============================================================ */
  /* ---- Customer map (Iran / three.js) ---- */
  .mapsec { position: relative; z-index: 3; padding: 5rem 0 6rem; }
  .mapstage {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 1.5rem;
    margin-top: 2.5rem;
  }
  .mapcanvas-wrap {
    position: relative;
    height: 580px;
    border: 1px solid rgba(217,185,104,.30);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 0 80px rgba(31,169,133,.10), 0 24px 60px rgba(0,0,0,.45);
    background:
      radial-gradient(80% 70% at 50% 40%, rgba(31,169,133,.16), transparent 62%),
      radial-gradient(70% 60% at 70% 90%, rgba(217,185,104,.10), transparent 60%),
      linear-gradient(var(--steel), var(--obsidian));
    cursor: default;
  }
  .mapcanvas-wrap canvas { display: block; }
  .map-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
  .map-label {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: var(--body);
    font-size: .74rem;
    font-weight: 600;
    color: var(--cream);
    white-space: nowrap;
    padding: .1rem .5rem;
    border-radius: 20px;
    background: rgba(11,18,15,.72);
    border: 1px solid var(--line);
    backdrop-filter: blur(4px);
    transition: opacity .3s var(--ease);
    text-shadow: 0 1px 4px #000;
  }
  .map-tooltip {
    position: absolute;
    pointer-events: none;
    z-index: 6;
    transform: translate(-50%, calc(-100% - 14px));
    background: linear-gradient(var(--panel), var(--steel));
    border: 1px solid var(--gold-deep);
    border-radius: 8px;
    padding: .5rem .8rem;
    font-size: .82rem;
    color: var(--cream);
    white-space: nowrap;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    opacity: 0; transition: opacity .16s var(--ease);
  }
  .map-tooltip b { color: var(--gold-2); }
  .map-tooltip .tt-count { color: var(--emerald); font-weight: 700; }
  .map-hint {
    position: absolute; inset-inline-start: 1rem; bottom: 1rem;
    font-size: .78rem; color: var(--muted);
    display: flex; align-items: center; gap: .5rem;
    background: rgba(11,18,15,.55); border: 1px solid var(--line-soft);
    padding: .4rem .8rem; border-radius: 20px; backdrop-filter: blur(4px);
  }
  .map-hint svg { width: 16px; height: 16px; color: var(--gold); }
  .map-legend {
    position: absolute; inset-inline-end: 1rem; top: 1rem;
    display: flex; flex-direction: column; gap: .45rem;
    background: rgba(11,18,15,.55); border: 1px solid var(--line-soft);
    padding: .7rem .9rem; border-radius: 10px; backdrop-filter: blur(4px);
    font-size: .76rem; color: var(--muted);
  }
  .map-legend .lg { display: flex; align-items: center; gap: .5rem; }
  .map-legend .dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
  .lg-gold  { color: var(--gold); background: var(--gold); }
  .lg-amber { color: var(--gold-2); background: var(--gold-2); }
  .lg-em    { color: var(--emerald); background: var(--emerald); }
  .map-loading {
    position: absolute; inset: 0; display: grid; place-items: center;
    color: var(--muted); font-size: .95rem; text-align: center; padding: 2rem;
    background: var(--steel);
  }
  .map-loading small { display:block; color: var(--faint); margin-top:.5rem; font-size:.8rem; }

  /* Info panel */
  .city-panel {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: linear-gradient(var(--panel), var(--steel));
    padding: 1.5rem;
    display: flex; flex-direction: column;
    height: 580px;
    /* Long city lists (Yazd has 50+) must scroll inside the panel, never spill
       over the directory below it. */
    overflow: hidden;
  }
  .cp-empty { margin: auto; text-align: center; color: var(--muted); }
  .cp-empty .cp-mark {
    width: 64px; height: 64px; margin: 0 auto 1rem;
    border-radius: 50%; display: grid; place-items: center;
    background: radial-gradient(circle, var(--emerald-glow), transparent 70%);
    color: var(--gold-2);
  }
  .cp-empty .cp-mark svg { width: 34px; height: 34px; }
  /* Flex column + min-height:0 so .cp-body below can actually shrink and scroll
     instead of stretching the panel to the full customer list. */
  .cp-head { display: none; flex-direction: column; flex: 1; min-height: 0; }
  .city-panel.has-city .cp-empty { display: none; }
  .city-panel.has-city .cp-head { display: flex; }
  .cp-eyebrow { font-size: .72rem; letter-spacing: .2em; color: var(--gold); font-weight: 600; }
  .cp-title { font-family: var(--display); font-size: 2rem; color: var(--cream); line-height: 1.1; margin: .2rem 0 .1rem; }
  .cp-count { color: var(--emerald); font-weight: 700; font-size: .9rem; }
  .cp-body { margin-top: 1rem; overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; padding-inline-end: .3rem; }
  .cp-body::-webkit-scrollbar { width: 6px; }
  .cp-body::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 3px; }
  .cp-group-lbl {
    font-size: .8rem; font-weight: 700; color: var(--gold-2);
    margin: 1rem 0 .5rem; display: flex; align-items: center; gap: .5rem;
  }
  .cp-group-lbl::before { content:""; width: 14px; height: 1px; background: var(--gold-deep); }
  .cust-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: .8rem; padding: .5rem .2rem; border-bottom: 1px solid var(--line-soft);
  }
  .cust-row .nm { color: var(--text); font-size: .92rem; }
  .cust-row a.ph {
    color: var(--muted); font-size: .84rem; direction: ltr; unicode-bidi: plaintext;
    display: inline-flex; align-items: center; gap: .35rem; transition: color .3s var(--ease);
  }
  .cust-row a.ph:hover { color: var(--gold-2); }
  .cust-row a.ph svg { width: 14px; height: 14px; }
  .cp-note { color: var(--muted); font-size: .9rem; line-height: 1.9; }

  /* Directory accordion */
  .dir { margin-top: 3.5rem; display: grid; gap: .8rem; }
  .dir-region {
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--panel); overflow: hidden;
  }
  .dir-region > summary {
    list-style: none; cursor: pointer; padding: 1.1rem 1.4rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    font-family: var(--display); font-size: 1.5rem; color: var(--cream);
    transition: background .3s var(--ease);
  }
  .dir-region > summary::-webkit-details-marker { display: none; }
  .dir-region > summary:hover { background: var(--panel-2); }
  .dir-region[open] > summary { border-bottom: 1px solid var(--line); }
  .dir-region .reg-meta { display: flex; align-items: center; gap: .8rem; }
  .reg-badge { font-family: var(--body); font-size: .8rem; color: var(--emerald); font-weight: 700; }
  .reg-chev { width: 20px; height: 20px; color: var(--gold); transition: transform .3s var(--ease); }
  .dir-region[open] .reg-chev { transform: rotate(180deg); }
  .dir-cities { padding: .6rem 1.4rem 1.4rem; display: grid; gap: .5rem; }
  .dir-city { border: 1px solid var(--line-soft); border-radius: 8px; background: var(--steel); }
  .dir-city > summary {
    list-style: none; cursor: pointer; padding: .8rem 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    color: var(--gold-2); font-weight: 600;
  }
  .dir-city > summary::-webkit-details-marker { display: none; }
  .dir-city .cty-cnt { color: var(--faint); font-size: .8rem; font-weight: 400; }
  .dir-city[open] > summary { color: var(--gold); }
  .dir-city-body { padding: 0 1rem 1rem; }

  @media (max-width: 860px) {
    .mapstage { grid-template-columns: 1fr; }
    .city-panel { height: auto; max-height: 460px; }
    .mapcanvas-wrap { height: 460px; }
    .map-legend { top: auto; bottom: 1rem; inset-inline-end: 1rem; }
    .map-hint { display: none; }
    .dir-region > summary { font-size: 1.25rem; }
  }

/* ============================================================
   SERVICE PAGES — one landing page per catalogue entry
   ============================================================ */

/* Group heading on the services index. */
.svc-group-title {
  font-family: var(--display); font-size: 2rem; color: var(--gold-2);
  margin: 0 0 1.4rem; padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: .8rem;
}
.svc-group-title::before {
  content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--emerald); box-shadow: 0 0 12px var(--emerald-glow);
}

/* Intro block: copy on one side, product shot on the other. */
.svc-intro { align-items: center; gap: 3rem; }
/* No product photograph yet: one readable measure, centred, rather than a
   two-column grid with an empty half. */
.svc-intro--solo { max-width: 760px; margin-inline: auto; text-align: center; }
.svc-intro--solo .eyebrow,
.svc-intro--solo .svc-chips { justify-content: center; }
.svc-intro--solo .hero-actions { justify-content: center; }
.svc-lead { color: var(--text); font-size: 1.05rem; line-height: 2; margin-bottom: 1.6rem; }

/* Framed photo — the gold hairline offset gives it a "mounted print" feel. */
.svc-shot { margin: 0; position: relative; }
.svc-shot img {
  width: 100%; border-radius: 10px; border: 1px solid var(--line);
  box-shadow: 0 26px 60px -30px rgba(0,0,0,.9);
}
.svc-shot::after {
  content: ""; position: absolute; inset: 12px -12px -12px 12px;
  border: 1px solid var(--line); border-radius: 10px; z-index: -1;
}
[dir=rtl] .svc-shot::after { inset: 12px 12px -12px -12px; }
.svc-shot--soft img { filter: saturate(.92) brightness(.92); }

/* "مناسب برای" chips under the intro. */
.svc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.svc-chips-lbl { color: var(--faint); font-size: .85rem; margin-inline-end: .2rem; }
.svc-chip {
  font-size: .82rem; color: var(--text);
  padding: .3rem .8rem; border-radius: 100px;
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.03);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.svc-chip:hover { border-color: var(--gold); color: var(--gold-2); }

/* Key features — numbered cards, two per row. */
.svc-feature {
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--line-soft); border-radius: 8px;
  background: linear-gradient(160deg, var(--panel), var(--steel));
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.svc-feature:hover { border-color: var(--gold); transform: translateY(-4px); }
.svc-feature-num {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 1.35rem; font-weight: 700;
  color: var(--gold-2);
  background: linear-gradient(135deg, rgba(31,169,133,.16), rgba(217,185,104,.08));
  border: 1px solid var(--line);
}
.svc-feature h3 { font-size: 1.15rem; margin-bottom: .4rem; color: var(--cream); }
.svc-feature p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.85; }

/* Spec sheet — a definition list styled as a hairline table. */
.svc-specs { margin: 0; display: grid; gap: 0; }
.svc-spec {
  display: grid; grid-template-columns: 40% 1fr; gap: 1rem;
  padding: .85rem .2rem; border-top: 1px solid var(--line-soft);
}
.svc-spec:first-child { border-top: 0; }
.svc-specs dt { color: var(--muted); font-size: .9rem; }
.svc-specs dd { margin: 0; color: var(--cream); font-size: .95rem; font-weight: 500; }

@media (max-width: 980px) {
  .svc-intro, .svc-specs-row { gap: 2.2rem; }
  .svc-shot::after { display: none; }
  .svc-group-title { font-size: 1.6rem; }
}
@media (max-width: 560px) {
  .svc-spec { grid-template-columns: 1fr; gap: .2rem; }
  .svc-feature { padding: 1.3rem 1.1rem; }
}

/* ============================================================
   VIDEOS — the shared Aparat list (gallery + about pages)
   ============================================================ */

/* Two up on desktop: an embedded player needs width to stay watchable, and a
   three-column grid would shrink the 16:9 frame below a usable size. */
.videos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
}

.video { margin: 0; }

/* 16:9 box the iframe fills — Aparat's player has no intrinsic size. */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--steel);
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video figcaption {
  margin-top: .8rem;
  color: var(--muted);
  font-size: .94rem;
  text-align: center;
}

@media (max-width: 780px) {
  .videos { grid-template-columns: 1fr; gap: 1.4rem; }
}

/* ============================================================
   INSTAGRAM — the hand-curated post strip above the closing CTA
   ============================================================ */

/* Four square tiles, the same rhythm as .gallery, but each one leaves the site
   for a post, so the tile carries its own affordance (glyph + caption) instead
   of the gallery's zoom veil. */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
}

.ig-item {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.ig-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.9) brightness(.9);
  transition: transform .6s var(--ease), filter .4s;
}

a.ig-item:hover img,
a.ig-item:focus-visible img {
  transform: scale(1.06);
  filter: saturate(1.05) brightness(1);
}

a.ig-item:hover { border-color: var(--gold); }
a.ig-item:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

/* The veil is always faintly there — it is what marks the tile as a post
   rather than a photo — and lifts to full strength on hover. */
.ig-veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: .8rem;
  background: linear-gradient(to top, rgba(11,18,15,.82) 0%, rgba(11,18,15,.12) 55%, rgba(11,18,15,.3) 100%);
  opacity: .8;
  transition: opacity .4s var(--ease);
}

a.ig-item:hover .ig-veil,
a.ig-item:focus-visible .ig-veil { opacity: 1; }

.ig-veil svg {
  width: 22px;
  height: 22px;
  color: var(--gold-2);
  align-self: flex-start;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}

.ig-cap {
  font-size: .82rem;
  line-height: 1.7;
  color: var(--cream);
  /* Two lines at most: a caption is a hint here, not the content. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 980px) {
  .ig-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  .ig-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .ig-veil { padding: .6rem; }
  .ig-veil svg { width: 18px; height: 18px; }
}

/* ---------- Fluent Forms ----------
 * The contact form is rendered by the plugin; these rules dress its markup in
 * the same skin as the theme's own .field controls, so the panel keeps its look
 * whichever form is on the page.
 *
 * Fluent Forms enqueues its public stylesheet while rendering the shortcode, so
 * it always lands *after* this file. Its own rules are written as
 * `.fluentform .ff-el-form-control`, which means matching that specificity
 * would lose on source order — hence the `.fluentform .frm-fluent-form` prefix
 * on every rule below. The !important flags are for the inline <style> block
 * Fluent Forms prints for the submit button.
 */
.fluentform .frm-fluent-form .ff-el-group { margin-bottom: 1.1rem; }
.fluentform .frm-fluent-form .ff-el-input--label { margin-bottom: 0; }
.fluentform .frm-fluent-form .ff-el-input--label label {
  display: block; font-size: .85rem; font-weight: 400;
  color: var(--muted); margin-bottom: .4rem; line-height: 1.6;
}
.fluentform .frm-fluent-form .ff-el-input--label.ff-el-is-required label::after { color: var(--gold); }

.fluentform .frm-fluent-form .ff-el-form-control {
  width: 100%; height: auto; padding: .85rem 1rem;
  background: var(--steel); border: 1px solid var(--line-soft);
  border-radius: var(--radius); color: var(--cream);
  font-family: var(--body); font-size: .95rem; line-height: 1.7;
  box-shadow: none;
  transition: border-color .3s, box-shadow .3s;
}
.fluentform .frm-fluent-form .ff-el-form-control::placeholder { color: rgba(255,255,255,.32); }
.fluentform .frm-fluent-form .ff-el-form-control:focus {
  outline: none; background: var(--steel); color: var(--cream);
  border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(31,169,133,.14);
}
.fluentform .frm-fluent-form textarea.ff-el-form-control { resize: vertical; min-height: 130px; }
/* Native dropdown popups ignore the control's colours on most desktop browsers. */
.fluentform .frm-fluent-form select.ff-el-form-control option { background: var(--steel); color: var(--cream); }

.fluentform .frm-fluent-form .ff_submit_btn_wrapper { margin-bottom: 0; }
.fluentform .frm-fluent-form .ff-btn-submit {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.7rem; height: auto; width: auto;
  font-family: var(--body); font-weight: 600; font-size: .95rem;
  border-radius: var(--radius); border: 1px solid transparent;
  background: linear-gradient(135deg, var(--gold-2), var(--gold-deep)) !important;
  color: #241c07 !important;
  box-shadow: 0 10px 30px -12px rgba(217,185,104,.5);
  transition: all .35s var(--ease);
}
.fluentform .frm-fluent-form .ff-btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -12px rgba(217,185,104,.7);
}

.fluentform .frm-fluent-form .ff-el-is-error .ff-el-form-control { border-color: #c0533f; }
.fluentform .frm-fluent-form .error.text-danger,
.fluentform .frm-fluent-form .ff-el-is-error .text-danger {
  color: #e08a76; font-size: .82rem; margin-top: .35rem;
}
/* The success message replaces the form, so it sits outside .frm-fluent-form. */
.fluentform .ff-message-success {
  border: 1px solid rgba(31,169,133,.35); border-radius: var(--radius);
  background: rgba(31,169,133,.08); color: var(--cream);
  padding: 1.1rem 1.2rem;
}