/* =============================================================
   داده نگار آروند | Arvand Data Recorder
   Zagros Studio · Strata · Pulse — Brand Website
   Design system: Editorial Premium / Hybrid Light + Dark
   ============================================================= */

/* ---------- Vazirmatn (Persian body) — local bundle, no CDN ----------
   If the woff2 file is missing (i.e. user hasn't run DOWNLOAD-FONTS.bat),
   the browser will fall back to the next family in `--font-fa` automatically. */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/vazirmatn/Vazirmatn-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/vazirmatn/Vazirmatn-ExtraBold.woff2') format('woff2');
}

/* ---------- Kamand display font (Persian display) ---------- */
@font-face {
  font-family: 'Kamand';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/kamand/Woff2/Kamand-Light.woff2') format('woff2'),
       url('../fonts/kamand/Woff/Kamand-Light.woff') format('woff');
}
@font-face {
  font-family: 'Kamand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/kamand/Woff2/Kamand-Regular.woff2') format('woff2'),
       url('../fonts/kamand/Woff/Kamand-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Kamand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/kamand/Woff2/Kamand-Medium.woff2') format('woff2'),
       url('../fonts/kamand/Woff/Kamand-Medium.woff') format('woff');
}
@font-face {
  font-family: 'Kamand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/kamand/Woff2/Kamand-Bold.woff2') format('woff2'),
       url('../fonts/kamand/Woff/Kamand-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Kamand';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/kamand/Woff2/Kamand-ExtraBold.woff2') format('woff2'),
       url('../fonts/kamand/Woff/Kamand-ExtraBold.woff') format('woff');
}
@font-face {
  font-family: 'Kamand';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/kamand/Woff2/Kamand-Black.woff2') format('woff2'),
       url('../fonts/kamand/Woff/Kamand-Black.woff') format('woff');
}

/* ---------- 1. Design Tokens (CSS Variables) ---------- */
:root {
  /* Brand core — `--ink` flips with theme (text/headings);
     `--brand-dark` is ALWAYS dark navy and is used for sections that should
     stay deep navy in both themes (AI showcase, CTA banner, footer, slogan). */
  --brand-dark:    #0F2E5C;
  --brand-dark-2:  #1B3F73;
  --brand-dark-3:  #25508E;
  --on-brand:      #FFFFFF;
  --on-brand-soft: rgba(255, 255, 255, 0.78);
  --on-brand-mute: rgba(255, 255, 255, 0.55);
  --on-brand-hair: rgba(255, 255, 255, 0.10);

  --ink:        #0F2E5C;
  --ink-2:      #1B3F73;
  --ink-3:      #25508E;
  --gold:       #C9A55B;
  --gold-soft:  #E5D2A5;
  --gold-deep:  #A8884A;

  /* Light theme surfaces */
  --bg:         #FFFFFF;
  --bg-alt:     #F8F5F0;
  --bg-alt-2:   #F2EDE4;
  --bg-paper:   #FCFAF6;
  --hair:       #E2DDD3;
  --hair-soft:  #EDE8DD;

  /* Text */
  --text:       #25272B;
  --text-soft:  #4F5258;
  --text-mute:  #6E6E6E;
  --text-mute-2:#9A958C;

  /* Semantic */
  --success:    #2F7D5C;
  --warning:    #B8862C;
  --danger:     #B23A3A;

  /* Layout — narrower side padding on mobile so content uses the full screen */
  --max-w:      1280px;
  --gutter:     clamp(16px, 4vw, 56px);
  --radius-sm:  6px;
  --radius:     12px;
  --radius-lg:  20px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(15, 46, 92, 0.05);
  --shadow:     0 8px 30px rgba(15, 46, 92, 0.08);
  --shadow-lg:  0 24px 60px rgba(15, 46, 92, 0.14);
  --shadow-gold:0 8px 30px rgba(201, 165, 91, 0.18);

  /* Typography — all Persian fonts are bundled LOCALLY (no Google Fonts at runtime).
     Vazirmatn  → body & UI (modern, readable)
     Kamand     → display / headlines (distinctive, structural breaks)
     Inter      → Latin / numeric  (system-fallback for now)
     Playfair   → Latin display italic (system-fallback for now) */
  --font-fa:      'Vazirmatn', 'Kamand', 'Tahoma', 'Segoe UI', sans-serif;
  --font-display: 'Kamand', 'Vazirmatn', 'Tahoma', sans-serif;
  --font-latin:   'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Easings */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark theme overrides */
[data-theme="dark"] {
  --bg:         #0A1426;
  --bg-alt:     #0F1D38;
  --bg-alt-2:   #142647;
  --bg-paper:   #0D1A33;
  --hair:       #1F3357;
  --hair-soft:  #1A2C4D;

  /* `--ink` is text/heading colour only — it flips to a light tone in dark mode. */
  --ink:        #DDE6F5;
  --ink-2:      #B4C5DE;
  --ink-3:      #93A8C9;

  /* `--brand-dark` STAYS dark navy in both themes — slightly deeper in dark mode
     so the "always-dark" sections (AI/CTA/footer) still stand out from the page bg. */
  --brand-dark:    #061026;
  --brand-dark-2:  #0D1E40;
  --brand-dark-3:  #143058;

  --text:       #E5ECF7;
  --text-soft:  #B5C2D6;
  --text-mute:  #8A9AB3;
  --text-mute-2:#65778F;

  --gold:       #DCB872;
  --gold-soft:  #6B5430;
  --gold-deep:  #F0CE89;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:     0 8px 30px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 24px 60px rgba(0, 0, 0, 0.55);
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-fa);
  font-size: 16px;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
[lang="en"] body, [dir="ltr"] body { font-family: var(--font-latin); }

img, svg { display: block; max-width: 100%; }
/* SVGs must use LTR layout regardless of the page direction so that text
   positions inside the mockups (which are designed in LTR coordinates)
   render correctly on RTL pages. */
svg { direction: ltr; }
svg text { direction: ltr; unicode-bidi: bidi-override; }
a { color: inherit; text-decoration: none; transition: color .2s; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.ltr { direction: ltr; display: inline-block; unicode-bidi: isolate; }

/* ---------- 3. Selection / Focus ---------- */
::selection { background: var(--gold); color: #fff; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 4. Typography ---------- */
h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
[lang="en"] h1, [lang="en"] h2, [lang="en"] h3, [lang="en"] h4, [lang="en"] h5,
[dir="ltr"] h1, [dir="ltr"] h2, [dir="ltr"] h3, [dir="ltr"] h4, [dir="ltr"] h5 {
  font-family: var(--font-latin);
}
.display {
  font-family: var(--font-display);
  font-size: clamp(34px, 5.4vw, 70px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
/* Persian-friendly "accent" — SAME family AND SAME weight as the surrounding
   heading, only the colour changes. Kamand at mixed weights looks ugly side-by-side,
   so the gold accent inherits the parent heading's weight to stay visually unified.
   Latin pages get an italic serif treatment via the [lang="en"] override. */
.display .serif,
h1 .serif, h2 .serif, h3 .serif,
.accent-fa {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: inherit;
  color: var(--gold);
}
[lang="en"] .display .serif, [lang="en"] h1 .serif, [lang="en"] h2 .serif, [lang="en"] h3 .serif,
[lang="en"] .accent-fa,
[dir="ltr"] .display .serif, [dir="ltr"] h1 .serif, [dir="ltr"] h2 .serif, [dir="ltr"] h3 .serif,
[dir="ltr"] .accent-fa {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}

.h1 { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.3; font-family: var(--font-display); }
.h2 { font-size: clamp(24px, 3vw, 38px); line-height: 1.3; font-family: var(--font-display); }
.h3 { font-size: clamp(19px, 2.1vw, 26px); line-height: 1.35; font-family: var(--font-display); }
.h4 { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.4; font-family: var(--font-display); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;             /* was 12 — bumped one size up per request */
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: '';
  width: 24px; height: 1.5px;
  background: var(--gold);
  display: inline-block;
}
[dir="rtl"] .eyebrow { letter-spacing: 0.14em; }

.lede {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.8;
  color: var(--text-soft);
  max-width: 64ch;
  font-weight: 400;
}
.muted { color: var(--text-mute); }

/* ---------- 5. Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: clamp(44px, 6vw, 80px); position: relative; }
.section-tight { padding-block: clamp(32px, 4vw, 56px); }

.grid { display: grid; gap: clamp(20px, 2.5vw, 36px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-2.keep-2col-mobile, .grid-3.keep-2col-mobile,
  .grid-4.keep-2col-mobile { grid-template-columns: 1fr 1fr; }
}

.gold-rule {
  width: 56px; height: 2px;
  background: var(--gold);
  margin-block: 18px;
  border-radius: 1px;
}
.divider { height: 1px; background: var(--hair); margin-block: 32px; }

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  font-weight: 600;
  font-size: 15px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  letter-spacing: 0.01em;
  transition: all .25s var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.btn-primary {
  background: var(--brand-dark);
  color: var(--on-brand);
}
.btn-primary:hover {
  background: var(--gold);
  color: var(--on-brand);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}
[data-theme="dark"] .btn-primary { background: var(--gold); color: #061026; }
[data-theme="dark"] .btn-primary:hover { background: var(--gold-deep); color: #061026; }

.btn-ghost {
  border-color: var(--ink);
  color: var(--ink);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--bg);
}
.btn-gold {
  background: var(--gold);
  color: #fff;
}
.btn-gold:hover {
  background: var(--gold-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}
.btn-arrow svg {
  transition: transform .25s var(--ease);
  width: 16px; height: 16px;
}
[dir="rtl"] .btn-arrow svg { transform: scaleX(-1); }
.btn-arrow:hover svg { transform: translateX(4px); }
[dir="rtl"] .btn-arrow:hover svg { transform: scaleX(-1) translateX(4px); }

/* ---------- 7. Top bar (sticky nav) ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: all .3s var(--ease);
}
[data-theme="dark"] .topbar { background: rgba(10, 20, 38, 0.82); }
.topbar.scrolled {
  border-bottom-color: var(--hair);
  box-shadow: 0 1px 0 rgba(15,46,92,.03);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-block: 14px;
}
.brand-mark {
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; color: var(--ink);
}
.brand-mark .mark {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--brand-dark);
  display: grid; place-items: center;
  color: var(--on-brand);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
}
[data-theme="dark"] .brand-mark .mark { background: var(--gold); color: #061026; }

/* Image variant of the brand mark — wider rectangular logo block. */
.brand-mark .mark-logo {
  width: 96px; height: 48px;
  background: transparent;
  border-radius: 0;
  background-image: url('../img/arvand-logo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
[data-theme="dark"] .brand-mark .mark-logo {
  background: transparent;
  background-image: url('../img/arvand-logo-dark.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* When the logo is used, hide the English small line so only Persian shows next to it. */
.brand-mark .mark-logo + .name { font-size: 15px; }
.brand-mark .mark-logo + .name small { display: none; }

/* Footer variant — always use the dark logo (footer background is always dark) and keep the English subtitle visible. */
.footer-brand .brand-mark .mark-logo,
[data-theme="dark"] .footer-brand .brand-mark .mark-logo {
  background-image: url('../img/arvand-logo-dark.png');
}
.footer-brand .brand-mark .mark-logo + .name small { display: block; }
.footer-brand .brand-mark .mark-logo + .name { font-size: 14px; }
.brand-mark .name { font-size: 14px; letter-spacing: 0.02em; }
.brand-mark .name small {
  display: block;
  color: var(--text-mute);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 2px;
}
.nav-links {
  display: flex; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 0;
}
.nav-links a {
  display: inline-block;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-soft);
  font-weight: 500;
  border-radius: 8px;
  position: relative;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--ink);
  background: var(--bg-alt);
}
[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] .nav-links a.active { color: var(--gold); }

.nav-tools { display: flex; align-items: center; gap: 8px; }
.tool-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text-soft);
  transition: all .2s;
  border: 1px solid var(--hair);
}
.tool-btn:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.tool-btn svg { width: 16px; height: 16px; }
.lang-toggle {
  padding: 0 14px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-soft);
  transition: all .2s;
}
.lang-toggle:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.menu-btn { display: none; }
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .menu-btn { display: grid; }
  .nav-links.open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--bg);
    padding: 16px var(--gutter);
    border-bottom: 1px solid var(--hair);
    box-shadow: var(--shadow);
  }
  .nav-links.open a { padding: 14px; border-radius: 8px; }
}

/* ---------- 8. Hero section ----------
   Clean editorial hero with a soft 40px grid on white — minimal and elegant.
   Top padding kept tight so the eyebrow sits close under the navbar. */
.hero {
  position: relative;
  padding-block: clamp(20px, 3vw, 48px) clamp(48px, 8vw, 110px);
  background: var(--bg);
  overflow: hidden;
}
/* Subtle 40px grid overlay — like engineering graph paper */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(15,46,92,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,46,92,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}
/* Warm gold glow + soft navy haze for depth */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(201,165,91,0.10), transparent 50%),
    radial-gradient(circle at 12% 92%, rgba(15,46,92,0.05),  transparent 55%);
  pointer-events: none;
  z-index: 0;
}
[data-theme="dark"] .hero::before {
  background-image:
    linear-gradient(to right,  rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
}
[data-theme="dark"] .hero::after {
  background:
    radial-gradient(circle at 78% 18%, rgba(220,184,114,0.10), transparent 50%),
    radial-gradient(circle at 12% 92%, rgba(36,80,142,0.18),  transparent 55%);
}
.hero > .wrap { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  position: relative;
  z-index: 2;
}
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
}
.hero-text .display { margin-block: 18px 22px; }
.hero-meta {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 36px;
  flex-wrap: wrap;
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 30px);
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--hair);
}
.hero-stats .stat {
  display: flex; flex-direction: column;
}
.hero-stats .num {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.05;
  white-space: nowrap;          /* keep "<300ms" / "+13" together on one line */
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  direction: ltr;               /* numerics flow LTR even on RTL pages */
}
[lang="en"] .hero-stats .num, [dir="ltr"] .hero-stats .num { font-family: var(--font-serif); }
.hero-stats .num .ltr { font-feature-settings: "lnum"; }
.hero-stats .label {
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 0.05em;
  margin-top: 6px;
}

/* Hero artistic SVG illustration */
.hero-art {
  position: relative;
  aspect-ratio: 1 / 1.05;
  width: 100%;
  max-width: 580px;
  margin-inline: auto;
}
.hero-art svg { width: 100%; height: 100%; overflow: visible; }
.hero-badge {
  position: absolute;
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 10px 14px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  z-index: 5;
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(47,125,92,.15); animation: pulse 2s infinite; }
.hero-badge.alarm .dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(178,58,58,.18); }
.hero-badge.gold .dot { background: var(--gold); box-shadow: 0 0 0 4px rgba(201,165,91,.22); }
.hero-badge .label { color: var(--text); font-weight: 600; }
.hero-badge .val { color: var(--text-mute); }
.hb-1 { top: 6%; right: -2%; }
.hb-2 { bottom: 22%; left: -5%; }
.hb-3 { top: 48%; right: -8%; }
[dir="rtl"] .hb-1 { right: auto; left: -2%; }
[dir="rtl"] .hb-2 { left: auto; right: -5%; }
[dir="rtl"] .hb-3 { right: auto; left: -8%; }

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.6; }
}

/* ---------- 9. Slogan banner ----------
   Always-on visible marquee. Track is built with explicit translateX animation
   that runs immediately on load (no IntersectionObserver gate). */
.slogan {
  padding-block: 28px;
  background: var(--brand-dark);
  color: var(--on-brand);
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}
.slogan-track {
  display: inline-flex;
  gap: 60px;
  animation: marquee 32s linear infinite;
  white-space: nowrap;
  will-change: transform;
}
.slogan-track span {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 500;
  white-space: nowrap;
  color: var(--gold);
  letter-spacing: -0.005em;
}
.slogan-track span::after {
  content: '·';
  margin-inline-start: 60px;
  color: var(--brand-dark-3);
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* RTL: travel the opposite way so text reads naturally right-to-left */
[dir="rtl"] @keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

/* ---------- 10. Product Family (3-up) ---------- */
.products {
  background: var(--bg);
}
.product-card {
  background: var(--bg-alt);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 40px);
  position: relative;
  overflow: hidden;
  transition: all .35s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 480px;
}
.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 0%, rgba(201,165,91,0.1), transparent 50%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.product-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: var(--shadow-lg);
}
.product-card:hover::before { opacity: 1; }
.product-card .badge {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.product-card h3 {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 800;
  line-height: 1.2;
}
[lang="en"] .product-card h3, [dir="ltr"] .product-card h3 { font-family: var(--font-serif); }
.product-card h3 .accent { color: var(--gold); }
.product-card .role {
  font-size: 14px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
  margin-top: -8px;
}
.product-card p {
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
}
.product-card ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.product-card ul li {
  font-size: 13.5px;
  color: var(--text-soft);
  padding-inline-start: 18px;
  position: relative;
}
.product-card ul li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0; top: 10px;
  width: 8px; height: 1.5px;
  background: var(--gold);
}
.product-card .pc-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid var(--gold);
  align-self: flex-start;
  padding-bottom: 3px;
  transition: all .25s;
}
.product-card .pc-cta:hover { color: var(--gold); }
[dir="rtl"] .product-card .pc-cta svg { transform: scaleX(-1); }

.product-icon {
  width: 64px; height: 64px;
  border-radius: 14px;
  background: var(--bg);
  display: grid; place-items: center;
  border: 1px solid var(--hair);
  color: var(--ink);
  padding: 8px;
  box-shadow: var(--shadow-sm);
}
.product-icon svg { width: 100%; height: 100%; }
.product-icon img { width: 100%; height: 100%; object-fit: contain; }
[data-theme="dark"] .product-icon { background: var(--bg-alt); border-color: var(--hair); }

/* ---------- 11. Section header common ---------- */
.section-head {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.section-head .gold-rule { margin-inline: auto; }
.section-head .lede { margin-inline: auto; margin-top: 16px; }

/* ---------- 12. Modules grid (with subcategories) ---------- */
.module-block {
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: clamp(20px, 2.5vw, 28px);
  transition: all .3s var(--ease);
}
.module-block:hover {
  border-color: var(--gold-soft);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.module-block h4 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
[lang="en"] .module-block h4, [dir="ltr"] .module-block h4 { font-family: var(--font-serif); }
.module-block .mod-en {
  font-family: var(--font-latin);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: block;
}
.module-block p {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.75;
  margin: 0 0 14px;
}
.module-block .submods {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--hair);
}
.module-block .submods span {
  font-size: 12px;
  padding: 4px 10px;
  background: var(--bg-alt);
  border-radius: 999px;
  color: var(--text-soft);
}

/* ---------- 13. Logs catalog grid (13 logs) ---------- */
.logs-section { background: var(--bg-alt); }
.logs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 32px;
}
.log-card {
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  padding: 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: all .25s var(--ease);
  position: relative;
}
.log-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.log-card .lg-num {
  font-family: var(--font-latin);
  font-weight: 700;
  font-size: 22px;
  color: var(--gold);
  line-height: 1;
  width: 32px;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.log-card .lg-body { flex: 1; }
.log-card .lg-en {
  font-family: var(--font-latin);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.log-card .lg-fa {
  font-size: 13px;
  color: var(--text-mute);
  margin-top: 4px;
  line-height: 1.5;
}

/* ---------- 14. Feature cards ---------- */
.feature {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(20px, 2vw, 28px) 0;
}
.feature .icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--bg-alt);
  display: grid; place-items: center;
  color: var(--gold);
  border: 1px solid var(--hair);
}
.feature .icon svg { width: 22px; height: 22px; }
.feature h4 {
  font-size: 18px;
  color: var(--ink);
}
.feature p {
  font-size: 14.5px;
  color: var(--text-soft);
  margin: 0;
  line-height: 1.8;
}

/* ---------- 15. AI showcase (always-dark feature panel) ---------- */
.ai-showcase {
  background: var(--brand-dark);
  color: var(--on-brand);
  border-radius: var(--radius-lg);
  padding: clamp(36px, 5vw, 64px);
  position: relative;
  overflow: hidden;
}
.ai-showcase::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
  top: -200px;
  inset-inline-end: -200px;
  opacity: 0.18;
  pointer-events: none;
}
/* Inside always-dark sections, headings must stay light regardless of theme. */
.ai-showcase h1, .ai-showcase h2, .ai-showcase h3, .ai-showcase h4 { color: var(--on-brand); }
.ai-showcase p, .ai-showcase .lede { color: var(--on-brand-soft); }
.ai-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 40px;
  position: relative;
  z-index: 2;
}
.ai-feature {
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
}
.ai-feature .ai-ico {
  width: 40px; height: 40px;
  background: var(--gold);
  border-radius: 10px;
  display: grid; place-items: center;
  margin-bottom: 14px;
  color: var(--ink);
}
.ai-feature h4 { color: #fff; font-size: 17px; margin-bottom: 6px; }
.ai-feature p { color: rgba(255,255,255,0.7); font-size: 13.5px; margin: 0; line-height: 1.7; }

/* Chat mockup */
.chat-mock {
  margin-top: 36px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: 20px;
  max-width: 640px;
  margin-inline: auto;
  font-family: var(--font-fa);
  font-size: 14px;
}
.chat-bubble {
  padding: 10px 16px;
  border-radius: 14px;
  margin-bottom: 10px;
  max-width: 80%;
  line-height: 1.7;
}
.chat-bubble.user { background: rgba(255,255,255,0.08); margin-inline-start: auto; color: #fff; }
.chat-bubble.bot { background: var(--gold); color: var(--ink); }
.chat-bubble.bot strong { font-weight: 700; }

/* ---------- 16. Comparison ---------- */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 14px;
}
.compare-table th, .compare-table td {
  padding: 14px 18px;
  text-align: start;
  border-bottom: 1px solid var(--hair);
}
.compare-table th {
  background: var(--brand-dark);
  color: var(--on-brand);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
}
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table tr:nth-child(even) td { background: var(--bg-alt); }
.compare-table .check { color: var(--success); font-weight: 700; }
.compare-table .cross { color: var(--text-mute); font-weight: 700; }
/* Body cells in the Zagros column get the cream tint with dark text */
.compare-table td.zagros-col {
  background: rgba(201,165,91,0.12);
  font-weight: 600;
  color: var(--ink);
}
.compare-table tr:nth-child(even) td.zagros-col {
  background: rgba(201,165,91,0.16);
}
/* The Zagros column HEADER must override the dark-blue th — use a strong gold band
   with dark text so it actually reads (was white-on-cream and invisible). */
.compare-table th.zagros-col {
  background: var(--gold);
  color: var(--brand-dark);
  font-weight: 800;
  letter-spacing: 0.08em;
}

@media (max-width: 720px) {
  .compare-table { font-size: 12px; }
  .compare-table th, .compare-table td { padding: 10px 12px; }
}

/* ---------- 17. CTA banner (always-dark) ---------- */
.cta-banner {
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-dark-2) 60%, var(--brand-dark-3) 100%);
  border-radius: var(--radius-lg);
  padding: clamp(36px, 5vw, 64px);
  color: var(--on-brand);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner h1, .cta-banner h2, .cta-banner h3 { color: var(--on-brand); }
.cta-banner p, .cta-banner .lede { color: var(--on-brand-soft); }

/* The CTA banner is ALWAYS dark, so buttons inside it must use explicit
   colours that don't shift with the page theme. */
.cta-banner .btn-primary {
  background: var(--gold);
  color: #0F2E5C !important;   /* dark navy text on gold — high contrast in both modes */
  border-color: var(--gold);
}
.cta-banner .btn-primary:hover {
  background: #FFFFFF;
  color: #0F2E5C !important;
  border-color: #FFFFFF;
}
.cta-banner .btn-ghost {
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.5);
  background: transparent;
}
.cta-banner .btn-ghost:hover {
  background: #FFFFFF;
  color: #0F2E5C !important;
  border-color: #FFFFFF;
}
.cta-banner h2 .accent { color: var(--gold); font-family: var(--font-display); font-weight: 500; }
[lang="en"] .cta-banner h2 .accent, [dir="ltr"] .cta-banner h2 .accent { font-family: var(--font-serif); font-style: italic; }
.cta-banner p { color: rgba(255,255,255,0.78); margin-block: 16px 32px; }
/* Note: explicit CTA button styling lives a few lines above (always-dark rule).
   Do NOT re-define the buttons here — those overrides were causing the dark-mode
   contrast issue where the text turned invisible. */
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- 18. Footer (always-dark) ---------- */
.footer {
  background: var(--brand-dark);
  color: var(--on-brand-soft);
  padding-block: clamp(48px, 6vw, 80px) 24px;
}
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5 { color: var(--on-brand); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer h5 {
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-family: var(--font-latin);
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer a { color: rgba(255,255,255,0.7); font-size: 14px; transition: color .2s; }
.footer a:hover { color: var(--gold); }
.footer .footer-brand p {
  font-size: 14px;
  line-height: 1.85;
  color: rgba(255,255,255,0.62);
  margin-top: 14px;
  max-width: 38ch;
}
.footer-slogan {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--gold);
  font-size: 17px;
  margin-top: 12px;
}
.footer-bottom {
  display: flex; justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  color: rgba(255,255,255,0.45);
  font-size: 12.5px;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-bottom a { color: var(--gold); }

/* ---------- 19. Animations on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: .08s; }
.reveal.delay-2 { transition-delay: .16s; }
.reveal.delay-3 { transition-delay: .24s; }
.reveal.delay-4 { transition-delay: .32s; }
.reveal.delay-5 { transition-delay: .40s; }

/* ---------- 20. Page hero (inner pages) ----------
   Tight top padding (matches .hero on the home page). Bottom padding stays a
   touch larger to breathe before the first content section.
   Product pages add a faded brand-icon watermark behind the content via
   `data-product` attribute. */
.page-hero {
  padding-block: clamp(20px, 3vw, 48px) clamp(32px, 5vw, 64px);
  background:
    radial-gradient(circle at 80% 30%, rgba(201,165,91,0.07), transparent 60%),
    var(--bg-paper);
  position: relative;
  overflow: hidden;
}
/* Brand watermark — big, very faded icon sitting in the back corner of the
   page-hero on product pages. Triggered by data-product="studio|strata|pulse". */
.page-hero[data-product]::before {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-end: -4%;
  transform: translateY(-50%);
  width: clamp(280px, 36vw, 520px);
  height: clamp(280px, 36vw, 520px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.07;
  pointer-events: none;
  filter: grayscale(20%);
  z-index: 0;
}
[data-theme="dark"] .page-hero[data-product]::before { opacity: 0.10; }
.page-hero[data-product="studio"]::before { background-image: url('../img/icon-studio.svg'); }
.page-hero[data-product="strata"]::before { background-image: url('../img/icon-strata.svg'); }
.page-hero[data-product="pulse"]::before  { background-image: url('../img/icon-pulse.svg'); }
[data-theme="dark"] .page-hero[data-product="studio"]::before { background-image: url('../img/icon-studio-dark.svg'); }
[data-theme="dark"] .page-hero[data-product="strata"]::before { background-image: url('../img/icon-strata-dark.svg'); }
[data-theme="dark"] .page-hero[data-product="pulse"]::before  { background-image: url('../img/icon-pulse-dark.svg'); }

/* Same watermark mechanism for non-product pages (about, contact, etc.) using the company logo. */
.page-hero[data-page]::before {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-end: -3%;
  transform: translateY(-50%);
  width: clamp(300px, 42vw, 600px);
  height: clamp(300px, 42vw, 600px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
[data-theme="dark"] .page-hero[data-page]::before { opacity: 0.12; }
.page-hero[data-page="about"]::before { background-image: url('../img/arvand-logo.png'); }
[data-theme="dark"] .page-hero[data-page="about"]::before { background-image: url('../img/arvand-logo-dark.png'); }

/* Keep the actual page-hero content above the watermark */
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero .breadcrumb {
  font-size: 13px;
  color: var(--text-mute);
  letter-spacing: 0.05em;
  margin-bottom: 18px;
}
.page-hero .breadcrumb a { color: var(--gold); }
.page-hero .breadcrumb .sep { margin-inline: 8px; color: var(--hair); }
.page-hero h1 { font-size: clamp(32px, 4.6vw, 58px); line-height: 1.25; font-family: var(--font-display); font-weight: 800; }
.page-hero h1 .serif { font-family: var(--font-display); font-style: normal; font-weight: 500; color: var(--gold); }
[lang="en"] .page-hero h1 .serif, [dir="ltr"] .page-hero h1 .serif { font-family: var(--font-serif); font-style: italic; }
.page-hero .lede { margin-top: 18px; }
.page-hero-meta {
  display: flex; gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.page-hero-meta .chip {
  padding: 8px 14px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: 12.5px;
  background: var(--bg);
  color: var(--text-soft);
  display: inline-flex; align-items: center; gap: 6px;
}
.page-hero-meta .chip strong { color: var(--ink); }

/* Logo lockup — bigger so the product brand reads as the page focus */
.logo-lockup {
  display: flex; align-items: center; gap: 26px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.logo-lockup img { height: clamp(90px, 12vw, 140px); width: auto; }
.logo-lockup .by-line {
  color: var(--text-mute);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-inline-start: 22px;
  border-inline-start: 1px solid var(--hair);
  font-family: var(--font-latin);
}

/* Theme-aware logo swap: show .logo-light by default, .logo-dark in dark mode */
.logo-light { display: inline-block; }
.logo-dark  { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark  { display: inline-block; }

/* ---------- 21. Specialty boxes ---------- */
.callout {
  background: var(--bg-alt);
  border-inline-start: 3px solid var(--gold);
  padding: 20px 24px;
  border-radius: var(--radius-sm);
  margin-block: 28px;
}
.callout p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--text); }
.callout strong { color: var(--ink); }

.kpi-card {
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
}
.kpi-card .kpi-num {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.5vw, 44px);
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
[lang="en"] .kpi-card .kpi-num, [dir="ltr"] .kpi-card .kpi-num { font-family: var(--font-serif); }
.kpi-card .kpi-label {
  font-size: 13px;
  color: var(--text-mute);
  margin-top: 8px;
}

/* ---------- 22. Form ---------- */
.form-grid { display: grid; gap: 16px; }
.form-grid .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form-grid .row-2 { grid-template-columns: 1fr; } }
.field label {
  display: block;
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: 6px;
  font-weight: 500;
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  font: inherit;
  font-size: 14.5px;
  background: var(--bg);
  color: var(--text);
  transition: all .2s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,165,91,0.18);
}
.field textarea { min-height: 130px; resize: vertical; }

/* ---------- 22b. Mobile responsive fixes ---------- */
@media (max-width: 720px) {
  body { font-size: 15.5px; }
  .section { padding-block: clamp(40px, 7vw, 80px); }
  .hero { padding-block: 16px 40px; }

  /* Hero grid stacks; art shrinks; badges stay readable */
  .hero-grid { gap: 24px; }
  .hero-art { max-width: 100%; aspect-ratio: 1/1; }
  .hero-badge { font-size: 11px; padding: 8px 10px; }
  .hero-badge .label { font-weight: 700; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 16px; }
  .hero-stats .stat:last-child { grid-column: 1 / -1; }

  /* Page hero shrinks vertically */
  .page-hero { padding-block: 24px 40px; }
  .page-hero h1 { font-size: clamp(28px, 7vw, 40px); }
  .lede { font-size: 15.5px; line-height: 1.85; }

  /* Cards — single column with full-width on mobile */
  .product-card { min-height: auto; padding: 24px; }
  .product-card h3 { font-size: 26px; }

  /* CTA banners stack their buttons */
  .cta-banner { padding: 28px 20px; }
  .cta-banner .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-banner .cta-actions .btn { justify-content: center; }

  /* Page hero metadata chips wrap nicely */
  .page-hero-meta .chip { font-size: 11.5px; padding: 6px 10px; }

  /* Footer to single column */
  .footer-bottom { flex-direction: column; text-align: center; }

  /* Eyebrow keeps readable size on mobile */
  .eyebrow { font-size: 12.5px; letter-spacing: 0.14em; }

  /* The slogan text shrinks slightly */
  .slogan-track span { font-size: 22px; }

  /* Logs grid — wider cards on mobile */
  .logs-grid { grid-template-columns: 1fr; }

  /* Compare table — horizontal scroll already enabled */
  .compare-table { min-width: 600px; }
}

/* Extra-small phones */
@media (max-width: 420px) {
  :root { --gutter: 14px; }
  .topbar .nav { gap: 12px; }
  .brand-mark .name { font-size: 13px; }
  .brand-mark .name small { font-size: 9.5px; letter-spacing: 0.14em; }
  .tool-btn { width: 34px; height: 34px; }
  .lang-toggle { height: 34px; padding: 0 10px; font-size: 11px; }
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stats .stat:last-child { grid-column: auto; }
}

/* ---------- 23. Utility ---------- */
.text-center { text-align: center; }
.text-gold { color: var(--gold); }
.text-ink { color: var(--ink); }
.bg-alt { background: var(--bg-alt); }
.flex-center { display: flex; align-items: center; justify-content: center; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mt-5 { margin-top: 40px; }
.mb-0 { margin-bottom: 0 !important; }

/* Disable RTL number flipping for English */
[dir="rtl"] .keep-ltr { direction: ltr; display: inline-block; unicode-bidi: isolate; }

/* ---------- BLOG — featured + cards + filters ---------- */
.blog-feature {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  background: var(--bg-alt);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.blog-feature .feat-cover {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-dark-2));
  min-height: 320px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.blog-feature .feat-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
.blog-feature .feat-cover svg { width: 60%; max-width: 360px; height: auto; position: relative; z-index: 1; }
.blog-feature .feat-body { padding: clamp(24px, 3vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.blog-feature .feat-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.blog-feature h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.3;
  margin: 0;
}
.blog-feature .feat-meta { font-size: 13px; color: var(--text-mute); margin-top: 4px; display: flex; gap: 14px; flex-wrap: wrap; }
.blog-feature .feat-meta .dot { color: var(--gold); }
.blog-feature p { color: var(--text-soft); margin: 0; line-height: 1.85; }
@media (max-width: 900px) {
  .blog-feature { grid-template-columns: 1fr; }
  .blog-feature .feat-cover { min-height: 220px; }
}

/* Category filter chips */
.blog-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-block: 32px 24px;
}
.blog-filter {
  padding: 8px 14px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  background: var(--bg);
  cursor: pointer;
  transition: all .2s;
}
.blog-filter:hover { border-color: var(--gold); color: var(--ink); }
.blog-filter.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Article card grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(18px, 2.2vw, 32px);
}
.article-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all .3s var(--ease);
  position: relative;
}
.article-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: var(--shadow);
}
.article-card .ac-cover {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-dark-2));
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.article-card .ac-cover.gold {
  background: linear-gradient(135deg, var(--gold-deep), var(--gold));
}
.article-card .ac-cover.light {
  background: linear-gradient(135deg, var(--bg-alt), var(--bg-alt-2));
}
.article-card .ac-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}
.article-card .ac-cover svg { width: 50%; max-width: 200px; position: relative; z-index: 1; }
.article-card .ac-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.article-card .ac-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.article-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}
.article-card .ac-excerpt {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.8;
  margin: 0;
  flex: 1;
}
.article-card .ac-meta {
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 4px;
  display: flex;
  gap: 14px;
}
.article-card .ac-meta .author { color: var(--ink); font-weight: 600; }

/* Newsletter signup band */
.newsletter {
  background: var(--brand-dark);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 48px);
  color: var(--on-brand);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.newsletter::before {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--gold), transparent 70%);
  top: -150px; right: -150px;
  opacity: 0.12;
  pointer-events: none;
}
.newsletter h3 { color: var(--on-brand); margin: 0 0 8px; }
.newsletter p { color: var(--on-brand-soft); margin: 0; }
.newsletter-form {
  display: flex;
  gap: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 6px;
}
.newsletter-form input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--on-brand);
  font: inherit;
  padding: 10px 16px;
  outline: none;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-form button {
  background: var(--gold);
  color: var(--brand-dark);
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all .2s;
}
.newsletter-form button:hover { background: #fff; }
@media (max-width: 900px) { .newsletter { grid-template-columns: 1fr; } }

/* ---------- SINGLE ARTICLE LAYOUT ---------- */
.article-hero {
  padding-block: clamp(20px, 3vw, 48px) clamp(24px, 3.5vw, 48px);
  background: var(--bg-paper);
  position: relative;
}
.article-hero h1 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.3;
  margin-top: 16px;
  max-width: 22ch;
}
.article-hero .article-meta {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--text-mute);
  margin-top: 20px;
}
.article-hero .article-meta .author {
  color: var(--ink);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.article-hero .article-meta .author .avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--gold);
  display: grid; place-items: center;
  color: var(--brand-dark);
  font-weight: 700;
  font-family: var(--font-display);
}

.article-body {
  max-width: 720px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 2;
  color: var(--text);
}
.article-body h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  margin-block: 40px 14px;
  color: var(--ink);
}
.article-body h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  margin-block: 28px 10px;
  color: var(--ink);
}
.article-body p { margin: 0 0 18px; }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-inline-start: 28px; }
.article-body li { margin-bottom: 8px; }
.article-body blockquote {
  margin: 28px 0;
  padding: 18px 24px;
  border-inline-start: 3px solid var(--gold);
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  font-size: 18px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
}
.article-body code {
  background: var(--bg-alt);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 14.5px;
  color: var(--brand-dark);
}
[data-theme="dark"] .article-body code { color: var(--gold); }
.article-body pre {
  background: var(--brand-dark);
  color: var(--on-brand);
  padding: 18px 22px;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 18px 0;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
}
.article-body img,
.article-body .figure {
  max-width: 100%;
  border-radius: var(--radius);
  margin: 24px 0;
  display: block;
}
.article-body .figure { background: var(--bg-alt); padding: 18px; border: 1px solid var(--hair); }
.article-body .figcaption {
  text-align: center;
  font-size: 13px;
  color: var(--text-mute);
  margin-top: 8px;
}

.article-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
}
.article-tag {
  font-size: 12px;
  padding: 5px 12px;
  background: var(--bg-alt);
  color: var(--text-soft);
  border-radius: 999px;
  font-weight: 500;
}

/* ---------- 24. Term tooltip — for English technical jargon used in body copy.
   Markup: <span class="term" data-meaning="معنی فارسی">on-premise</span>
   The dotted underline signals an interactive term; hovering or tapping
   shows the Persian meaning. Works on touch via :focus-within. ---------- */
.term {
  position: relative;
  display: inline-block;
  cursor: help;
  border-bottom: 1px dotted var(--gold);
  color: inherit;
  padding-bottom: 1px;
  unicode-bidi: isolate;
}
.term::after {
  content: attr(data-meaning);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--brand-dark);
  color: var(--on-brand);
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--font-fa);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  box-shadow: var(--shadow);
  z-index: 50;
  direction: rtl;
}
.term::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--brand-dark);
  opacity: 0;
  transition: opacity .18s var(--ease);
  pointer-events: none;
}
.term:hover::after, .term:focus::after, .term:active::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.term:hover::before, .term:focus::before, .term:active::before { opacity: 1; }

/* ---------- 25. Print ---------- */
@media print {
  .topbar, .footer, .cta-banner { display: none; }
  body { background: #fff; color: #000; }
}
-mute);
  letter-spacing: 0.05em;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.page-hero .breadcrumb a { color: var(--text-mute); transition: color .2s; }
.page-hero .breadcrumb a:hover { color: var(--gold); }
.page-hero .breadcrumb .sep { opacity: 0.4; }
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.25;
  margin: 14px 0 22px;
  max-width: 780px;
}
.page-hero .lede {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.85;
  color: var(--text-mute);
  max-width: 680px;
  margin: 0;
}
.page-hero .lede strong { color: var(--ink); font-weight: 700; }

/* ====================== Term tooltip ====================== */
.term {
  position: relative;
  border-bottom: 1px dotted var(--gold);
  cursor: help;
  font-weight: 600;
  color: inherit;
}
.term::after {
  content: attr(data-meaning);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ink);
  color: var(--bg);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: normal;
  width: max-content;
  max-width: 280px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
}
.term::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--ink);
  opacity: 0;
  transition: opacity .2s;
  z-index: 50;
}
.term:hover::after,
.term:focus::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.term:hover::before,
.term:focus::before { opacity: 1; }
[data-theme="dark"] .term::after { background: var(--gold); color: #061026; }
[data-theme="dark"] .term::before { border-top-color: var(--gold); }

/* ====================== Mobile nav ====================== */
@media (max-width: 1024px) {
  .menu-btn { display: inline-flex; }
  .nav-links {
    position: fixed;
    top: 64px;
    inset-inline: 0;
    background: var(--bg);
    border-top: 1px solid var(--hair);
    flex-direction: column;
    padding: 16px 20px 24px;
    gap: 4px;
    transform: translateY(-110%);
    transition: transform .25s ease;
    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
    z-index: 40;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: 12px 4px; border-bottom: 1px dashed var(--hair); }
  .nav-links li:last-child a { border-bottom: 0; }
}

/* ====================== Blog ====================== */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(18px, 2vw, 28px);
}
.blog-card {
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.blog-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(15, 46, 92, 0.08);
}
.blog-card .thumb {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--brand-dark), #1B3F73);
  display: grid; place-items: center;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 32px;
  position: relative;
}
.blog-card .body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card .meta { display: flex; gap: 12px; font-size: 12px; color: var(--text-mute); letter-spacing: 0.04em; }
.blog-card .meta .cat { color: var(--gold); font-weight: 700; }
.blog-card h3 { font-size: 18px; line-height: 1.5; margin: 0; }
.blog-card p { font-size: 14px; color: var(--text-mute); margin: 0; }
.blog-card .read-more { margin-top: auto; color: var(--gold); font-weight: 700; font-size: 14px; }

.blog-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 24px 0 32px;
}
.blog-filters button {
  border: 1px solid var(--hair);
  background: transparent;
  padding: 8px 16px;
  border-radius: 999px;
  font: inherit;
  color: var(--text-mute);
  cursor: pointer;
  transition: all .2s;
}
.blog-filters button:hover,
.blog-filters button.active {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--bg-alt);
}
[data-theme="dark"] .blog-filters button.active { color: var(--gold); border-color: var(--gold); }

.article {
  max-width: 760px;
  margin-inline: auto;
  font-size: 16px;
  line-height: 1.9;
}
.article h2 { margin-top: 40px; margin-bottom: 14px; }
.article h3 { margin-top: 28px; margin-bottom: 10px; }
.article p { margin: 0 0 16px; }
.article ul, .article ol { padding-inline-start: 22px; margin: 0 0 18px; }
.article ul li, .article ol li { margin-bottom: 8px; }
.article blockquote {
  margin: 24px 0;
  padding: 18px 22px;
  border-inline-start: 3px solid var(--gold);
  background: var(--bg-alt);
  font-style: italic;
  color: var(--text);
}
.article code {
  background: var(--bg-alt);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13.5px;
}

/* ====================== Contact ====================== */
.contact-form {
  display: grid; gap: 16px;
  max-width: 640px;
}
.contact-form label { font-weight: 600; font-size: 14px; }
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,165,91,0.18);
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-info {
  display: grid; gap: 18px;
}
.contact-info .item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  background: var(--bg);
}
.contact-info .item svg {
  width: 22px; height: 22px;
  color: var(--gold); flex-shrink: 0; margin-top: 2px;
}
.contact-info .item h5 { margin: 0 0 4px; font-size: 14px; }
.contact-info .item p { margin: 0; color: var(--text-mute); font-size: 13.5px; }

/* ====================== Misc small bits ====================== */
.mt-3 { margin-top: 14px; }
.hidden { display: none !important; }
img { max-width: 100%; height: auto; }
table { width: 100%; }
abbr[title] { text-decoration: none; border-bottom: 1px dotted var(--text-mute); cursor: help; }

/* Smooth theme transitions on common surfaces */
body, .topbar, .footer, .product-card, .feature, .compare-table th, .compare-table td, .module-block, .log-card, .blog-card, .contact-info .item, .contact-form input, .contact-form textarea, .contact-form select {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* End */


/* v2.1: Keep Contact Form 7 visually identical to the original designed contact section */
.wpcf7 .az-cf7-form .wpcf7-form-control-wrap { display:block; width:100%; }
.wpcf7 .az-cf7-form input,
.wpcf7 .az-cf7-form textarea,
.wpcf7 .az-cf7-form select,
.wpcf7 .az-cf7-newsletter input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  padding: 14px 16px;
  font: inherit;
  outline: none;
}
.wpcf7 .az-cf7-form textarea { min-height: 132px; resize: vertical; }
.wpcf7 .az-cf7-form input:focus,
.wpcf7 .az-cf7-form textarea:focus,
.wpcf7 .az-cf7-form select:focus,
.wpcf7 .az-cf7-newsletter input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(198,161,91,.12); }
.wpcf7 .az-cf7-form label { display:block; margin-bottom: 8px; font-weight: 700; color: var(--ink); }
.wpcf7 .az-cf7-form .form-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.wpcf7 .az-cf7-form .wpcf7-submit { width:auto; border:0; cursor:pointer; }
.wpcf7 .az-cf7-newsletter { display:flex; gap: 12px; align-items:center; flex-wrap:wrap; }
.wpcf7 .az-cf7-newsletter .field { flex: 1 1 260px; }
.wpcf7 .az-cf7-newsletter .wpcf7-submit { width:auto; border:0; cursor:pointer; }
.wpcf7 form .wpcf7-response-output { border-radius: var(--radius-sm); margin: 16px 0 0; padding: 12px 16px; }

/* v2.2: CF7 must preserve the original HTML contact form layout */
.wpcf7 .az-cf7-form,
.wpcf7 .az-cf7-form * { box-sizing: border-box; }
.wpcf7 .az-cf7-form p { margin: 0; }
.wpcf7 .az-cf7-form .field { width: 100%; }
.wpcf7 .az-cf7-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .wpcf7 .az-cf7-form .row-2 { grid-template-columns: 1fr; } }
.wpcf7 .az-cf7-form label {
  display: block !important;
  font-size: 13px;
  color: var(--text-soft);
  margin: 0 0 6px;
  font-weight: 500;
  line-height: 1.6;
}
.wpcf7 .az-cf7-form .wpcf7-form-control-wrap { display: block; width: 100%; }
.wpcf7 .az-cf7-form input,
.wpcf7 .az-cf7-form textarea,
.wpcf7 .az-cf7-form select {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  font: inherit;
  font-size: 14.5px;
  background: var(--bg);
  color: var(--text);
  transition: all .2s;
}
.wpcf7 .az-cf7-form textarea { min-height: 130px; resize: vertical; }
.wpcf7 .az-cf7-form input:focus,
.wpcf7 .az-cf7-form textarea:focus,
.wpcf7 .az-cf7-form select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,165,91,0.18);
}
.wpcf7 .az-cf7-form .form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wpcf7 .az-cf7-form .wpcf7-submit.btn { width: auto; border: 0; cursor: pointer; }
.wpcf7 .az-cf7-form .wpcf7-spinner { margin: 0 10px; }

/* v2.3 — restore original contact/demo form layout */
.az-original-contact-form,
.wpcf7 .az-original-contact-form { display: grid !important; gap: 16px !important; width: 100% !important; }
.az-original-contact-form .row-2,
.wpcf7 .az-original-contact-form .row-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
.az-original-contact-form .field,
.wpcf7 .az-original-contact-form .field { display: block !important; width: 100% !important; margin: 0 !important; }
.az-original-contact-form label,
.wpcf7 .az-original-contact-form label { display: block !important; margin: 0 0 8px !important; font-weight: 700 !important; color: var(--ink) !important; line-height: 1.7 !important; }
.az-original-contact-form .wpcf7-form-control-wrap,
.wpcf7 .az-original-contact-form .wpcf7-form-control-wrap { display: block !important; width: 100% !important; }
.az-original-contact-form input,
.az-original-contact-form textarea,
.az-original-contact-form select,
.wpcf7 .az-original-contact-form input,
.wpcf7 .az-original-contact-form textarea,
.wpcf7 .az-original-contact-form select { width: 100% !important; min-height: 52px !important; padding: 12px 14px !important; border: 1px solid var(--hair) !important; border-radius: var(--radius-sm) !important; background: var(--bg) !important; color: var(--ink) !important; font: inherit !important; line-height: 1.6 !important; box-sizing: border-box !important; }
.az-original-contact-form textarea,
.wpcf7 .az-original-contact-form textarea { min-height: 140px !important; resize: vertical !important; }
.az-original-contact-form input:focus,
.az-original-contact-form textarea:focus,
.az-original-contact-form select:focus,
.wpcf7 .az-original-contact-form input:focus,
.wpcf7 .az-original-contact-form textarea:focus,
.wpcf7 .az-original-contact-form select:focus { outline: none !important; border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(198,161,91,.12) !important; }
.az-original-contact-form .form-actions,
.wpcf7 .az-original-contact-form .form-actions { display: flex !important; align-items: center !important; gap: 16px !important; flex-wrap: wrap !important; }
.az-original-contact-form .wpcf7-submit,
.wpcf7 .az-original-contact-form .wpcf7-submit,
.az-original-contact-form button[type="submit"] { width: auto !important; min-height: 54px !important; border: 0 !important; cursor: pointer !important; border-radius: 999px !important; padding: 13px 24px !important; }
@media (max-width: 640px) { .az-original-contact-form .row-2, .wpcf7 .az-original-contact-form .row-2 { grid-template-columns: 1fr !important; } }