/* ============================================================
   Bubble Mousse Iran — design system v3 "dark sandwich"
   Deep botanical green + metallic gold, cream content bands.
   Mobile-first, RTL, self-hosted fonts, no external requests.
   ============================================================ */

/* ---------- Fonts ----------
   Primary: IRANSansX (commercial license required — buy the web license at
   fontiran.com and drop the woff2 files into fonts/iransans/; the site works
   immediately). Fallback: Vazirmatn (open license, self-hosted below), then
   system Tahoma. Never ship pirated IRANSans copies. */
@font-face {
  font-family: 'IRANSansX';
  src: local('IRANSansX'), local('IRANSansX Regular'), local('IRANSans'),
       url('../fonts/iransans/IRANSansX-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IRANSansX';
  src: local('IRANSansX Medium'), local('IRANSans Medium'),
       url('../fonts/iransans/IRANSansX-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'IRANSansX';
  src: local('IRANSansX DemiBold'), local('IRANSans DemiBold'),
       url('../fonts/iransans/IRANSansX-DemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'IRANSansX';
  src: local('IRANSansX Bold'), local('IRANSans Bold'),
       url('../fonts/iransans/IRANSansX-Bold.woff2') format('woff2');
  font-weight: 700 800;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* dark greens (packaging mint-leaf photography, deepened) */
  --g-950: #07190f;   /* topbar, header, footer — near-black green */
  --g-900: #0c2e1e;   /* dark section ground, hero */
  --g-800: #14402a;   /* elevated cards on dark */
  --g-700: #1a4d33;   /* hover tier on dark */

  /* metallic gold — ≤15% of any viewport */
  --gold: #c9a24b;
  --gold-deep: #a8842e;
  --gold-hi: #e9ce8f;
  --gold-ink: #8c6d1f;                     /* gold text on light grounds */
  --gold-line: rgba(201, 162, 75, 0.35);   /* hairline borders */

  /* cream content bands */
  --cream: #f6f1e4;
  --cream-2: #fdfaf1;   /* raised cards on cream */

  /* text */
  --ink: #142a1e;        /* on cream */
  --ink-2: #43584a;
  --ink-3: #77897b;
  --cream-text: #f3eddc; /* on dark */
  --sage: #9dbba8;       /* secondary on dark */

  /* accents */
  --apple: #8dc63f;      /* packaging echo — small doses only */
  --emerald: #1f5c40;    /* functional green on light (links, focus) */
  --emerald-deep: #14402a;
  --emerald-soft: #e7eee2;
  --red: #d32f2f;        /* discount badges only */
  --c-success: #12a150;
  --c-error: #d64550;

  /* legacy aliases (older markup) */
  --c-bg: var(--cream);
  --c-surface: var(--cream-2);
  --c-ink: var(--ink);
  --c-ink-2: var(--ink-2);
  --c-ink-3: var(--ink-3);
  --c-primary: var(--emerald);
  --c-primary-dark: var(--emerald-deep);
  --c-primary-soft: var(--emerald-soft);
  --c-green-bright: var(--apple);
  --c-accent: var(--gold-deep);
  --c-accent-soft: #f4ead2;
  --c-gold: var(--gold);
  --c-line: #e2ddc9;
  --c-deep: var(--g-950);

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;
  --radius-pill: 999px;

  --shadow-s: 0 1px 3px rgba(20, 42, 30, 0.08);
  --shadow-m: 0 6px 24px rgba(20, 42, 30, 0.10);

  --wrap: 1080px;
  --gutter: 20px;

  --fs-xs: 0.78rem;
  --fs-s: 0.9rem;
  --fs-base: 1rem;
  --fs-m: 1.15rem;
  --fs-l: 1.45rem;
  --fs-xl: 1.9rem;
  --fs-hero: 2.2rem;

  /* subtle grain to kill banding on dark gradients */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: 'IRANSansX', 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
  background: var(--cream);
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: 1.9;
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--emerald); text-decoration: none; }
a:hover { color: var(--gold-deep); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

h1, h2, h3, h4 { line-height: 1.5; font-weight: 800; }

ul { list-style: none; }

button { font-family: inherit; cursor: pointer; }

input, select, textarea { font-family: inherit; font-size: 1rem; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.ltr { direction: ltr; unicode-bidi: embed; }

/* ---------- Top utility bar ---------- */
.topbar {
  background: var(--g-950);
  color: var(--gold-hi);
  font-size: var(--fs-xs);
  font-weight: 600;
  border-bottom: 1px solid rgba(201, 162, 75, 0.18);
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 34px; gap: 12px;
}
.topbar a { color: var(--gold-hi); }
.topbar a:hover { color: #fff; }
.topbar .tb-note, .topbar .tb-extra { display: none; color: var(--sage); }
.topbar .tb-phone { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar .tb-phone svg { width: 14px; height: 14px; }
@media (min-width: 768px) {
  .topbar .tb-note, .topbar .tb-extra { display: inline; }
}

/* ---------- Header (dark) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(12, 46, 30, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gold-line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 62px; gap: 12px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.05rem; color: var(--cream-text);
}
.brand:hover { color: var(--gold-hi); }
.brand .logo-mark { width: 36px; height: 36px; flex: none; }
.brand small {
  display: block; font-size: var(--fs-xs); font-weight: 500;
  color: var(--sage); line-height: 1.4;
}
.brand small .ltr { color: var(--gold); }

.nav-toggle {
  background: none; border: 0; padding: 10px; margin-inline-start: -10px;
  display: inline-flex; align-items: center; color: var(--cream-text);
}
.nav-toggle svg { width: 26px; height: 26px; }

.site-nav {
  display: none;
  position: absolute; inset-inline: 0; top: 100%;
  background: var(--g-900);
  border-bottom: 1px solid var(--gold-line);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.35);
  padding: 8px var(--gutter) 16px;
}
.site-nav.open { display: block; }
.site-nav a {
  display: block; padding: 12px 6px; font-weight: 600; color: var(--cream-text);
  border-bottom: 1px solid rgba(201, 162, 75, 0.14);
}
.site-nav a:hover { color: var(--gold-hi); }
.site-nav a:last-child { border-bottom: 0; }
.site-nav a.nav-cta {
  margin-top: 10px; text-align: center;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: var(--g-900); border-radius: var(--radius-pill); border-bottom: 0;
}
.site-nav a.nav-cta:hover { color: var(--g-950); filter: brightness(1.05); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 10px 26px;
  border-radius: var(--radius-pill); border: 0;
  font-size: 1.02rem; font-weight: 700; line-height: 1.4;
  transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease,
              color 0.15s ease, border-color 0.15s ease;
}
.btn:active { transform: scale(0.97); }

/* gold CTA — one per viewport */
.btn-primary, .btn-accent {
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 100%);
  color: var(--g-900);
  box-shadow: 0 8px 22px rgba(201, 162, 75, 0.35);
}
.btn-primary:hover, .btn-accent:hover { color: var(--g-950); filter: brightness(1.06); }

/* ghost — gold hairline, adapts to ground */
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--gold-deep);
}
.btn-ghost:hover { background: rgba(201, 162, 75, 0.12); color: var(--ink); }
.on-dark .btn-ghost, .section-dark .btn-ghost, .hero .btn-ghost {
  color: var(--cream-text); border-color: var(--gold-line);
}
.on-dark .btn-ghost:hover, .section-dark .btn-ghost:hover, .hero .btn-ghost:hover {
  border-color: var(--gold); color: var(--gold-hi); background: rgba(201, 162, 75, 0.08);
}

/* emerald button — secondary actions on light */
.btn-em {
  background: var(--emerald); color: #fff;
}
.btn-em:hover { background: var(--emerald-deep); color: #fff; }
.btn-block { width: 100%; }

/* ---------- Eyebrow / section heads ---------- */
.eyebrow {
  display: inline-block; color: var(--gold-deep); font-weight: 700;
  font-size: var(--fs-s); margin-bottom: 6px; letter-spacing: 0.06em;
}
.section { padding-block: 60px; }
.section-alt { background: var(--cream-2); }
.section-head { text-align: center; margin-bottom: 34px; }
.section-head h2 { font-size: var(--fs-xl); margin-bottom: 8px; text-wrap: balance; }
.section-head p { color: var(--ink-2); max-width: 52ch; margin-inline: auto; }

/* dark band */
.section-dark {
  background:
    var(--grain),
    linear-gradient(180deg, var(--g-900) 0%, #0a2719 100%);
  color: var(--cream-text);
}
.section-dark .section-head h2, .section-dark h2, .section-dark h3 { color: var(--cream-text); }
.section-dark .section-head p, .section-dark p { color: var(--sage); }
.section-dark .eyebrow { color: var(--gold); }
.section-dark a { color: var(--gold-hi); }
.section-dark a:hover { color: #fff; }
.gold-rule {
  width: 64px; height: 1px; background: var(--gold);
  margin: 14px auto 0; opacity: 0.7; border: 0;
}

/* ---------- Hero (dark) ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    var(--grain),
    radial-gradient(ellipse 80% 60% at 22% 38%, rgba(201, 162, 75, 0.13), transparent 60%),
    linear-gradient(175deg, var(--g-900) 0%, #0a2418 70%, var(--g-950) 100%);
  color: var(--cream-text);
  padding-block: 44px 84px;
}
.hero .wrap { position: relative; z-index: 2; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(201, 162, 75, 0.10);
  border: 1px solid var(--gold-line);
  color: var(--gold-hi);
  font-size: var(--fs-s); font-weight: 700;
  padding: 6px 16px; border-radius: var(--radius-pill);
  margin-bottom: 18px;
}
.hero h1 { font-size: var(--fs-hero); margin-bottom: 12px; color: #fff; text-wrap: balance; }
.hero h1 .em { color: var(--gold-hi); }
.hero p.lead { color: var(--sage); font-size: var(--fs-m); margin-bottom: 26px; max-width: 36ch; }
.hero-ctas { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.hero-art { margin-top: 36px; display: flex; justify-content: center; position: relative; }
.hero-art::before {
  content: ''; position: absolute; inset: -10% -20%;
  background: radial-gradient(ellipse 55% 55% at 50% 55%, rgba(201, 162, 75, 0.16), transparent 70%);
  pointer-events: none;
}
.hero-art img, .hero-art svg {
  width: min(320px, 80%); height: auto; position: relative;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45));
}

.hero-points { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; }
.hero-points li {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-s); font-weight: 600; color: var(--sage);
}
.hero-points svg { width: 18px; height: 18px; color: var(--gold); flex: none; }

/* numeric stat chips (honest product specs as design element) */
.stat-row {
  display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap;
}
.stat-chip {
  flex: 1; min-width: 96px;
  border: 1px solid var(--gold-line); border-radius: var(--radius-m);
  padding: 10px 12px; text-align: center;
  background: rgba(20, 64, 42, 0.45);
}
.stat-chip .n {
  display: block; font-size: 1.5rem; font-weight: 800; color: var(--gold-hi);
  line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stat-chip .t { font-size: var(--fs-xs); color: var(--sage); font-weight: 600; }

/* decorative bubbles (dark version) */
.bubble { position: absolute; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 32% 30%, rgba(243, 237, 220, 0.14), rgba(201, 162, 75, 0.05) 60%, transparent);
  border: 1px solid rgba(201, 162, 75, 0.15);
}

/* ---------- Guarantee strip (4 gold icons) ---------- */
.guarantee-strip {
  background: var(--g-950);
  border-top: 1px solid rgba(201, 162, 75, 0.15);
  padding-block: 18px;
}
.guarantee-strip .wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px;
}
.g-item {
  display: flex; align-items: center; gap: 10px;
  color: var(--cream-text); font-size: var(--fs-xs); font-weight: 700;
}
.g-item svg { width: 26px; height: 26px; color: var(--gold); flex: none; }
.g-item small { display: block; font-weight: 500; color: var(--sage); }
@media (min-width: 768px) {
  .guarantee-strip .wrap { grid-template-columns: repeat(4, 1fr); }
  .g-item { font-size: var(--fs-s); }
}

/* ---------- Benefit cards (cream) ---------- */
.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.benefit {
  background: var(--cream-2); border: 1px solid var(--c-line);
  border-radius: var(--radius-m); padding: 22px 16px;
  box-shadow: var(--shadow-s); text-align: center;
}
.benefit .icon {
  width: 52px; height: 52px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--g-900); color: var(--gold);
  border-radius: var(--radius-pill);
  border: 1px solid var(--gold-line);
}
.benefit .icon svg { width: 26px; height: 26px; }
.benefit h3 { font-size: 1rem; margin-bottom: 4px; }
.benefit p { font-size: var(--fs-s); color: var(--ink-2); line-height: 1.8; }

/* ---------- Product cards ---------- */
.products { display: grid; gap: 20px; }
.product-card {
  position: relative;
  background: var(--cream-2);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-l); padding: 26px 20px;
  box-shadow: var(--shadow-m);
  display: flex; flex-direction: column; gap: 14px;
}
.product-card.featured { border: 1.5px solid var(--gold); }
.product-flag {
  position: absolute; top: 14px; inset-inline-start: 14px;
  background: var(--red); color: #fff;
  font-size: var(--fs-xs); font-weight: 700;
  padding: 4px 12px; border-radius: var(--radius-pill);
}
.product-flag.alt { background: var(--g-800); color: var(--gold-hi); border: 1px solid var(--gold-line); }
.product-art { display: flex; justify-content: center; padding-block: 8px; }
.product-art svg, .product-art img { height: 190px; width: auto; }
.product-card h3 { font-size: var(--fs-m); text-align: center; }
.product-sub { text-align: center; color: var(--ink-2); font-size: var(--fs-s); margin-top: -8px; }
.product-specs { display: flex; flex-direction: column; gap: 6px; }
.product-specs li {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-s); color: var(--ink-2);
}
.product-specs svg { width: 17px; height: 17px; color: var(--gold-deep); flex: none; }
.price-row { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.price-old { color: var(--ink-3); text-decoration: line-through; font-size: var(--fs-s); }
.price {
  font-size: var(--fs-l); font-weight: 800; color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}
.price small { font-size: var(--fs-s); font-weight: 500; color: var(--ink-2); }

/* shade chips */
.shades { display: flex; align-items: center; justify-content: center; gap: 10px; }
.shade-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2);
}
.section-dark .shade-chip { color: var(--sage); }
.shade-chip i {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  border: 2px solid var(--gold); box-shadow: inset 0 2px 4px rgba(255,255,255,0.25);
}
.shade-black i { background: radial-gradient(circle at 35% 30%, #4a3b32, #16100c 70%); }
.shade-brown i { background: radial-gradient(circle at 35% 30%, #6e4a33, #2b1a12 70%); }

/* ---------- Steps — oversized gold numerals on cream ---------- */
.steps { display: grid; gap: 14px; counter-reset: step; }
.step {
  background: var(--cream-2); border: 1px solid var(--c-line);
  border-radius: var(--radius-m); padding: 20px 18px;
  display: flex; gap: 16px; align-items: flex-start; box-shadow: var(--shadow-s);
}
.step-num {
  counter-increment: step; flex: none;
  min-width: 44px;
  font-size: 2.4rem; font-weight: 800; line-height: 1;
  color: var(--gold); text-align: center;
  background: none; border-radius: 0;
  display: block; height: auto;
}
.step h3 { font-size: 1rem; margin-bottom: 2px; }
.step p { font-size: var(--fs-s); color: var(--ink-2); }

/* ---------- Authority / certificate module (dark) ---------- */
.authority-grid { display: grid; gap: 20px; }
.seal {
  width: 120px; height: 120px; margin-inline: auto;
  border-radius: 50%; position: relative;
  background: radial-gradient(circle at 32% 28%, var(--gold-hi), var(--gold) 55%, var(--gold-deep));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--g-950); font-weight: 800; text-align: center;
  font-size: var(--fs-xs); line-height: 1.6;
  box-shadow: 0 10px 30px rgba(201, 162, 75, 0.3);
}
.seal::before {
  content: ''; position: absolute; inset: 7px;
  border: 1.5px dashed rgba(7, 25, 15, 0.5); border-radius: 50%;
}
.seal b { font-size: 1rem; }
.cert-card {
  background: var(--g-800); border: 1px solid var(--gold-line);
  border-radius: var(--radius-m); padding: 20px;
  text-align: center;
}
.cert-frame {
  border: 1.5px solid var(--gold-line); border-radius: var(--radius-s);
  background: rgba(7, 25, 15, 0.5);
  min-height: 150px; display: flex; align-items: center; justify-content: center;
  color: var(--sage); font-size: var(--fs-xs); padding: 16px; margin-bottom: 12px;
}
.auth-checks { display: grid; gap: 10px; }
.auth-checks li {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--g-800); border: 1px solid var(--gold-line);
  border-radius: var(--radius-m); padding: 14px 16px;
  font-size: var(--fs-s); color: var(--sage);
}
.auth-checks li b { color: var(--cream-text); display: block; }
.auth-checks .n {
  flex: none; font-size: 1.6rem; font-weight: 800; line-height: 1.2;
  color: var(--gold); min-width: 28px; text-align: center;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
  .authority-grid { grid-template-columns: 0.9fr 1.1fr; align-items: start; gap: 32px; }
}

/* ---------- Testimonials (dark) ---------- */
.testimonials { display: grid; gap: 14px; }
.testimonial {
  background: var(--g-800); border: 1px solid var(--gold-line);
  border-radius: var(--radius-m); padding: 22px 20px;
}
.testimonial p { font-size: var(--fs-s); color: var(--sage); margin-bottom: 12px; }
.testimonial footer { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 40px; height: 40px; border-radius: var(--radius-pill); flex: none;
  background: var(--g-950); color: var(--gold);
  border: 1px solid var(--gold-line);
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.testimonial cite { font-style: normal; font-weight: 700; font-size: var(--fs-s); display: block; color: var(--cream-text); }
.testimonial .meta { font-size: var(--fs-xs); color: var(--sage); }
.stars { color: var(--gold); font-size: var(--fs-s); letter-spacing: 2px; }

/* ---------- FAQ (cream) ---------- */
.faq { display: grid; gap: 10px; max-width: 720px; margin-inline: auto; }
.faq details {
  background: var(--cream-2); border: 1px solid var(--c-line);
  border-radius: var(--radius-m); overflow: hidden;
}
.faq details[open] { border-color: var(--gold-line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 16px 18px; font-weight: 700; font-size: var(--fs-s);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 10px; height: 10px;
  border-inline-start: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep);
  transform: rotate(-45deg); transition: transform 0.2s ease; margin-inline-end: 4px;
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details p { padding: 0 18px 16px; font-size: var(--fs-s); color: var(--ink-2); }

/* ---------- Order form (cream card) ---------- */
.order-box {
  background: var(--cream-2); border: 1px solid var(--gold-line);
  border-radius: var(--radius-l); padding: 26px 20px;
  box-shadow: var(--shadow-m); max-width: 560px; margin-inline: auto;
}
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 700; font-size: var(--fs-s); margin-bottom: 6px; }
.field .hint { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 4px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px;
  padding: 12px 14px;
  border: 1.5px solid var(--c-line); border-radius: var(--radius-s);
  background: #fffdf6; color: var(--ink);
  transition: border-color 0.15s ease;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.2);
}
.field.error input, .field.error textarea { border-color: var(--c-error); }
.field .error-msg { display: none; color: var(--c-error); font-size: var(--fs-xs); margin-top: 4px; }
.field.error .error-msg { display: block; }

.radio-cards { display: grid; gap: 10px; }
.radio-card { position: relative; }
.radio-card input { position: absolute; opacity: 0; inset: 0; }
.radio-card label {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--c-line); border-radius: var(--radius-m);
  padding: 14px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.radio-card input:checked + label {
  border-color: var(--gold); background: #f8f2df;
}
.radio-card input:focus-visible + label { box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.35); }
.radio-card .r-title { font-weight: 700; font-size: var(--fs-s); }
.radio-card .r-sub { font-size: var(--fs-xs); color: var(--ink-2); }
.radio-card .r-price {
  margin-inline-start: auto; font-weight: 800; color: var(--gold-ink);
  font-size: var(--fs-s); white-space: nowrap; font-variant-numeric: tabular-nums;
}

.qty-row { display: flex; align-items: center; gap: 12px; }
.qty-btn {
  width: 44px; height: 44px; border-radius: var(--radius-s);
  border: 1.5px solid var(--gold-line); background: var(--cream-2);
  font-size: 1.3rem; font-weight: 700; color: var(--gold-ink);
}
.qty-btn:hover { border-color: var(--gold); }
.qty-val { min-width: 40px; text-align: center; font-weight: 800; font-size: var(--fs-m); }

.order-total {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--g-900); color: var(--cream-text);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-m);
  padding: 14px 16px; margin-block: 18px; font-weight: 700;
}
.order-total small { color: var(--sage); }
.order-total .sum {
  font-size: var(--fs-m); font-weight: 800; color: var(--gold-hi);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.form-note { font-size: var(--fs-xs); color: var(--ink-3); text-align: center; margin-top: 12px; }

.order-success { display: none; text-align: center; padding: 32px 12px; }
.order-success.show { display: block; }
.order-success .icon {
  width: 72px; height: 72px; margin: 0 auto 16px;
  background: var(--g-900); color: var(--gold-hi);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
}
.order-success .icon svg { width: 36px; height: 36px; }
.order-success h3 { margin-bottom: 8px; }
.order-success p { color: var(--ink-2); font-size: var(--fs-s); }

/* ---------- Trust strip (generic, light sections) ---------- */
.trust-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.trust-item {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cream-2); border: 1px solid var(--gold-line);
  border-radius: var(--radius-pill); padding: 8px 16px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2);
}
.trust-item svg { width: 18px; height: 18px; color: var(--gold-deep); }

/* ---------- Blog ---------- */
.blog-grid { display: grid; gap: 16px; }
.post-card {
  background: var(--cream-2); border: 1px solid var(--c-line);
  border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-s);
  display: flex; flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.post-card:hover { box-shadow: var(--shadow-m); transform: translateY(-2px); border-color: var(--gold-line); }
.post-thumb { aspect-ratio: 16 / 8; display: block; }
.post-thumb img, .post-thumb svg { width: 100%; height: 100%; object-fit: cover; }
.post-card .post-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.post-card h3 { font-size: 1.02rem; line-height: 1.7; }
.post-card h3 a { color: var(--ink); }
.post-card h3 a:hover { color: var(--gold-deep); }
.post-card p { font-size: var(--fs-s); color: var(--ink-2); }
.post-meta { font-size: var(--fs-xs); color: var(--ink-3); display: flex; gap: 10px; }
.post-tag {
  align-self: flex-start; background: var(--g-900); color: var(--gold-hi);
  font-size: var(--fs-xs); font-weight: 700; padding: 2px 12px; border-radius: var(--radius-pill);
}

/* ---------- Article ---------- */
.article { background: var(--cream-2); }
.article-wrap { max-width: 720px; margin-inline: auto; padding: 32px var(--gutter) 56px; }
.article h1 { font-size: var(--fs-xl); margin-bottom: 10px; text-wrap: balance; }
.article .post-meta { margin-bottom: 24px; }
.article h2 { font-size: var(--fs-l); margin: 32px 0 10px; }
.article h3 { font-size: var(--fs-m); margin: 24px 0 8px; }
.article p { margin-bottom: 14px; color: var(--ink-2); }
.article ul, .article ol { margin: 0 0 16px; padding-inline-start: 22px; color: var(--ink-2); }
.article ul { list-style: disc; }
.article ol { list-style: persian; }
.article li { margin-bottom: 6px; }
.article strong { color: var(--ink); }
.article blockquote {
  border-inline-start: 3px solid var(--gold);
  background: var(--cream); border-radius: var(--radius-s);
  padding: 14px 18px; margin-bottom: 16px; color: var(--ink-2);
}
.article-cta {
  background:
    var(--grain),
    linear-gradient(160deg, var(--g-900), var(--g-950));
  border: 1px solid var(--gold-line);
  color: var(--cream-text);
  border-radius: var(--radius-m); padding: 26px 20px; text-align: center; margin-top: 36px;
}
.article-cta h3 { margin-bottom: 6px; color: var(--cream-text); }
.article-cta p { margin-bottom: 16px; color: var(--sage); }

/* ---------- Footer (near-black green, dense) ---------- */
.site-footer {
  background:
    var(--grain),
    linear-gradient(180deg, var(--g-950), #051208);
  color: var(--sage);
  border-top: 1px solid var(--gold-line);
  padding: 44px 0 96px;
  font-size: var(--fs-s);
}
.site-footer h4 {
  color: var(--gold); font-size: 1rem; margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.footer-grid { display: grid; gap: 28px; }
.site-footer a { color: var(--sage); }
.site-footer a:hover { color: var(--gold-hi); }
.site-footer li { margin-bottom: 8px; }
.footer-contact li { display: flex; align-items: center; gap: 8px; }
.footer-contact svg { width: 18px; height: 18px; flex: none; color: var(--gold); }
.badge-row {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid rgba(201, 162, 75, 0.15);
}
.badge-box {
  width: 88px; height: 88px; background: #fdfaf1; border-radius: var(--radius-s);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 0.68rem; text-align: center; padding: 8px;
  line-height: 1.5;
}
.footer-bottom {
  border-top: 1px solid rgba(201, 162, 75, 0.15);
  margin-top: 24px; padding-top: 18px;
  font-size: var(--fs-xs); color: #6f8577; text-align: center;
}
.enamad-box {
  width: 96px; height: 96px; background: #fdfaf1; border-radius: var(--radius-s);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: var(--fs-xs); text-align: center; padding: 8px;
}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed; bottom: 0; inset-inline: 0; z-index: 60;
  background: rgba(7, 25, 15, 0.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--gold-line);
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  display: flex; gap: 10px; align-items: center;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.4);
}
.sticky-cta .btn { flex: 1; min-height: 48px; }
.sticky-cta .call-btn {
  flex: none; width: 48px; height: 48px; border-radius: var(--radius-pill);
  background: transparent; color: var(--gold-hi);
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--gold-line);
}
.sticky-cta .call-btn:hover { border-color: var(--gold); }
.sticky-cta .call-btn svg { width: 22px; height: 22px; }

/* ---------- Page hero (inner pages, dark) ---------- */
.page-hero {
  background:
    var(--grain),
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(201, 162, 75, 0.10), transparent 60%),
    linear-gradient(180deg, var(--g-900), #0a2418);
  color: var(--cream-text);
  padding-block: 36px; text-align: center;
}
.page-hero h1 { font-size: var(--fs-xl); color: #fff; text-wrap: balance; }
.page-hero p { color: var(--sage); max-width: 56ch; margin: 6px auto 0; }
.breadcrumb { font-size: var(--fs-xs); color: var(--sage); margin-bottom: 8px; }
.breadcrumb a { color: var(--gold-hi); }
.page-hero .ltr { color: var(--gold-hi); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Desktop ---------- */
@media (min-width: 768px) {
  :root { --fs-hero: 2.9rem; --fs-xl: 2.2rem; }

  .nav-toggle { display: none; }
  .site-nav {
    display: flex; position: static; background: none; border: 0; box-shadow: none;
    padding: 0; align-items: center; gap: 2px;
  }
  .site-nav a {
    border: 0; padding: 8px 14px; border-radius: var(--radius-pill);
    font-size: var(--fs-s); white-space: nowrap;
  }
  .site-nav a:hover { background: rgba(201, 162, 75, 0.10); color: var(--gold-hi); }
  .site-nav a.nav-cta { margin: 0; padding-inline: 22px; }

  .hero { padding-block: 72px; }
  .hero .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 32px; }
  .hero-art { margin-top: 0; }
  .hero-art img, .hero-art svg { width: min(400px, 100%); }
  .hero-ctas { flex-direction: row; }

  .benefits { grid-template-columns: repeat(4, 1fr); }
  .products { grid-template-columns: 1fr 1fr; max-width: 880px; margin-inline: auto; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step { flex-direction: column; }
  .step-num { text-align: right; }
  .testimonials { grid-template-columns: repeat(3, 1fr); }
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr auto; gap: 40px; }
  .site-footer { padding-bottom: 44px; }

  .sticky-cta { display: none; }
}

@media (min-width: 1024px) {
  .section { padding-block: 76px; }
}