/* =========================================================
   بافیرا | BAFIRA — Single Page Brand Site
   Palette and geometry taken from the brand's own packaging:
   golden yellow, near-black, warm off-white, angular chevrons
   and rotated-square diamonds.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --yellow:       #FCC300;
  --yellow-600:   #E0AE00;
  --yellow-100:   #FFF4CF;
  --yellow-50:    #FFFAEB;

  --ink:          #1B1B1B;
  --ink-2:        #4B4B4B;
  --ink-3:        #8A857D;
  --line:         #E6E2D9;

  --cream:        #F5F2EC;
  --cream-2:      #EDE9E0;
  --surface:      #FFFFFF;
  --surface-2:    #FBF9F5;
  --dark:         #1B1B1B;
  --dark-2:       #2A2A2A;

  --shadow-sm: 0 1px 2px rgba(27, 27, 27, .05), 0 2px 8px rgba(27, 27, 27, .04);
  --shadow-md: 0 4px 12px rgba(27, 27, 27, .06), 0 16px 40px rgba(27, 27, 27, .08);
  --shadow-lg: 0 8px 24px rgba(27, 27, 27, .09), 0 32px 64px rgba(27, 27, 27, .12);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;

  --pad: clamp(16px, 4vw, 28px);
  --section: clamp(64px, 9vw, 116px);
  --maxw: 1200px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: Vazirmatn, "Segoe UI", Tahoma, system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.9;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 { margin: 0; line-height: 1.45; font-weight: 800; letter-spacing: -0.01em; }
p { margin: 0; }

::selection { background: var(--yellow); color: var(--ink); }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

.section { padding-block: var(--section); position: relative; }
.section--tint { background: var(--surface-2); }
.section--dark { background: var(--dark); color: #F2EFE9; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; inset-inline-start: 50%; top: -80px;
  transform: translateX(50%);
  background: var(--ink); color: var(--yellow);
  padding: 10px 20px; border-radius: 0 0 10px 10px;
  z-index: 200; transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* ---------- Brand geometry ---------- */
/* Angular chevrons echoing the corner marks on Bafira packaging */
.chevrons {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.chevrons i {
  position: absolute; display: block;
  width: 0; height: 0;
  border-style: solid;
  opacity: .5;
}
.chevrons i:nth-child(1) {
  inset-block-start: 8%; inset-inline-start: 4%;
  border-width: 0 0 46px 46px; border-color: transparent transparent var(--cream-2) transparent;
}
.chevrons i:nth-child(2) {
  inset-block-start: 22%; inset-inline-start: 9%;
  border-width: 26px 26px 0 0; border-color: var(--yellow-100) transparent transparent transparent;
}
.chevrons i:nth-child(3) {
  inset-block-end: 14%; inset-inline-end: 6%;
  border-width: 38px 0 0 38px; border-color: transparent transparent transparent var(--cream-2);
}

/* Rotated-square badge, straight from the packaging seals */
.diamond {
  width: 88px; height: 88px; flex: none;
  display: grid; place-items: center;
  transform: rotate(45deg);
  background: var(--ink); color: var(--yellow);
  border-radius: 8px;
}
.diamond > span {
  transform: rotate(-45deg);
  text-align: center; line-height: 1.4;
  font-size: .72rem; font-weight: 800;
}
.diamond strong { display: block; font-size: .95rem; }

/* ---------- Section heading ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .82rem; font-weight: 800;
  color: var(--ink);
  background: var(--yellow);
  padding: 6px 16px; border-radius: 4px;
  margin-bottom: 16px;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; background: var(--ink);
  transform: rotate(45deg);
}
.section--dark .eyebrow { background: var(--yellow); color: var(--ink); }

.head { max-width: 700px; margin-bottom: clamp(32px, 5vw, 56px); }
.head--center { margin-inline: auto; text-align: center; }
.head h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); margin-bottom: 14px; text-wrap: balance; }
.head p { color: var(--ink-2); font-size: clamp(.95rem, 1.6vw, 1.05rem); }
.section--dark .head p { color: rgba(242,239,233,.76); }

.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* Latin sub-label, as printed under every Persian product name */
.latin {
  display: block;
  font-family: "Segoe UI", system-ui, sans-serif;
  direction: ltr; text-align: start;
  letter-spacing: .22em; text-transform: uppercase;
  font-size: .68rem; font-weight: 700; color: var(--ink-3);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-weight: 800; font-size: .95rem;
  cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--yellow); color: var(--ink); box-shadow: 0 8px 20px rgba(252,195,0,.35); }
.btn--primary:hover { background: var(--yellow-600); box-shadow: 0 12px 26px rgba(252,195,0,.42); }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--dark-2); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--yellow); }

.btn--light { background: var(--yellow); color: var(--ink); }
.btn--light:hover { background: #fff; }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.btn--sm { padding: 9px 18px; font-size: .85rem; }

/* ---------- Header ---------- */
.progress {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  height: 3px; z-index: 120;
  background: var(--yellow);
  transform-origin: right center;
  transform: scaleX(0);
}

.site-header {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: 110;
  padding-block: 14px;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease),
              padding .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(245,242,236,.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
  padding-block: 8px;
}

.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo--image { gap: 0; }
.logo__mark { width: 46px; height: 46px; flex: none; }

/* An uploaded lockup can be any aspect ratio, so height drives the size and the
   width simply follows. Without this the file is squeezed into a square. */
.logo__img {
  display: block; flex: none;
  height: 40px; width: auto;
  max-width: min(210px, 42vw);
  object-fit: contain;
}
.site-footer .logo__img { height: 44px; }
/* No light version supplied: a dark lockup would vanish on the dark footer, so
   render it as a solid white silhouette. */
.logo__img--flatten { filter: brightness(0) invert(1); }
.logo__text { display: flex; flex-direction: column; line-height: 1.2; }
.logo__fa { font-weight: 800; font-size: 1.24rem; }
.logo__en {
  font-size: .6rem; letter-spacing: .34em; color: var(--ink-3);
  font-family: "Segoe UI", system-ui, sans-serif; direction: ltr;
}

.nav__menu { display: flex; align-items: center; gap: 2px; }
.nav__menu .btn { display: none; }   /* drawer-only CTA; header keeps its own */
.nav__link {
  position: relative; white-space: nowrap;
  padding: 9px 11px; border-radius: 6px;
  font-size: .89rem; font-weight: 700; color: var(--ink-2);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav__link:hover { color: var(--ink); background: rgba(27,27,27,.06); }
.nav__link.is-active { color: var(--ink); background: var(--yellow); }

.nav__actions { display: flex; align-items: center; gap: 10px; }

.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 10px; cursor: pointer;
  align-items: center; justify-content: center;
}
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); position: relative;
  transition: transform .25s var(--ease), background-color .25s var(--ease); }
.burger span::before, .burger span::after {
  content: ""; position: absolute; inset-inline: 0; height: 2px; background: var(--ink);
  transition: transform .25s var(--ease), top .25s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(120px, 17vw, 176px) clamp(56px, 8vw, 92px);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__bg::before, .hero__bg::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); }
.hero__bg::before {
  width: 520px; height: 520px; opacity: .55;
  background: radial-gradient(circle, rgba(252,195,0,.45), transparent 68%);
  inset-block-start: -150px; inset-inline-end: -110px;
}
.hero__bg::after {
  width: 440px; height: 440px; opacity: .35;
  background: radial-gradient(circle, rgba(27,27,27,.18), transparent 70%);
  inset-block-end: -190px; inset-inline-start: -150px;
}

.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
}

.hero__title { font-size: clamp(2rem, 5.2vw, 3.5rem); line-height: 1.3; margin-bottom: 20px; text-wrap: balance; }
.hero__title em { font-style: normal; position: relative; white-space: nowrap; }
.hero__title em::after {
  content: ""; position: absolute; inset-inline: -6px; inset-block-end: -.06em;
  height: .3em; background: var(--yellow); z-index: -1;
}
.hero__lead { font-size: clamp(1rem, 1.9vw, 1.12rem); color: var(--ink-2); max-width: 560px; margin-bottom: 30px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

.hero__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 6px; padding: 8px 16px;
  font-size: .84rem; font-weight: 700; color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}
.chip::before { content: ""; width: 8px; height: 8px; background: var(--yellow); transform: rotate(45deg); flex: none; }

/* Hero visual: stacked product photos */
.hero__visual { position: relative; }
.stack {
  /* an explicit width is required: every child is absolutely positioned, so the
     intrinsic width is 0 and auto margins would shrink-wrap it to nothing */
  position: relative; aspect-ratio: 1 / 1;
  width: 100%; max-width: 520px; margin-inline: auto;
}
.stack__card {
  position: absolute; border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
  border: 1px solid rgba(255,255,255,.6);
  background: var(--cream-2);
}
.stack__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the circular card reads better cropped a little tighter */
.stack__card--c img { object-position: 50% 45%; }
.stack__card--a { inset-block: 4% 18%; inset-inline: 22% 4%; }
.stack__card--b { inset-block: 24% 4%; inset-inline: 4% 34%; }
.stack__card--c { inset-block-start: 6%; inset-inline-start: 0; width: 38%; aspect-ratio: 1/1; border-radius: 50%; }

.badge-float {
  position: absolute; z-index: 3;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px 18px;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 12px;
}
.badge-float strong { display: block; font-size: 1.02rem; line-height: 1.3; }
.badge-float span { font-size: .76rem; color: var(--ink-3); }
.badge-float__seal {
  width: 54px; height: 54px; flex: none;
  display: grid; place-items: center;
  transform: rotate(45deg);
  background: var(--ink); color: var(--yellow);
  border-radius: 5px;
  font-size: .5rem; font-weight: 800; line-height: 1.35;
}
.badge-float__seal > span { transform: rotate(-45deg); color: var(--yellow); }
.badge-float--1 { inset-block-end: 5%; inset-inline-end: -3%; }
.badge-float--2 { inset-block-start: -2%; inset-inline-start: 4%; }

/* ---------- Marquee ---------- */
.marquee { border-block: 1px solid var(--line); background: var(--surface); overflow: hidden; padding-block: 16px; }
.marquee__track { display: flex; gap: 44px; width: max-content; animation: marquee 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: .95rem; color: var(--ink-2); white-space: nowrap;
}
.marquee__item::before { content: ""; width: 9px; height: 9px; background: var(--yellow); transform: rotate(45deg); flex: none; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* ---------- Product cards ---------- */
/* The number of product cards is editable, so the grid is built on six columns
   with each card spanning two. That lets the final row widen itself to fill
   whatever remainder is left over, instead of trailing an empty slot. */
.cards { display: grid; gap: 20px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pcard {
  grid-column: span 2;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  display: flex; flex-direction: column;
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--yellow); }
.pcard__art { aspect-ratio: 4 / 3; position: relative; overflow: hidden; background: var(--cream-2); }
.pcard__art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
.pcard:hover .pcard__art img { transform: scale(1.06); }
.pcard__tag {
  position: absolute; inset-block-start: 12px; inset-inline-start: 12px;
  background: var(--yellow); border-radius: 4px; padding: 4px 12px;
  font-size: .7rem; font-weight: 800; color: var(--ink); z-index: 2;
}
.pcard__body { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.pcard__body h3 { font-size: 1.08rem; margin-bottom: 2px; }
.pcard__body .latin { margin-bottom: 10px; }
.pcard__body p { font-size: .88rem; color: var(--ink-3); }

.sizes {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line);
}
.size {
  font-size: .74rem; font-weight: 800; color: var(--ink);
  background: var(--yellow-100); border: 1px solid var(--yellow);
  border-radius: 4px; padding: 3px 9px;
  font-variant-numeric: tabular-nums; direction: ltr;
}
.size--label { background: var(--cream-2); border-color: var(--line); color: var(--ink-2); direction: rtl; }

.pcard__meta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.tagline { font-size: .74rem; font-weight: 600; color: var(--ink-2); background: var(--cream-2); border-radius: 4px; padding: 4px 10px; }

/* ---------- Feature grid ---------- */
.features { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 26px 24px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  position: relative; overflow: hidden;
}
.feature::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-end: 0;
  width: 0; height: 0; border-style: solid;
  border-width: 0 44px 44px 0; border-color: transparent var(--yellow-100) transparent transparent;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature__icon {
  width: 50px; height: 50px; border-radius: 10px;
  display: grid; place-items: center; margin-bottom: 16px;
  background: var(--yellow); color: var(--ink);
}
.feature:nth-child(3n+2) .feature__icon { background: var(--ink); color: var(--yellow); }
.feature:nth-child(3n) .feature__icon { background: var(--cream-2); color: var(--ink); }
.feature__icon svg { width: 24px; height: 24px; }
.feature h3 { font-size: 1.02rem; margin-bottom: 8px; }
.feature p { font-size: .89rem; color: var(--ink-3); }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.about__art { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); background: var(--cream-2); }
.about__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about__quote {
  position: absolute; inset-block-end: 18px; inset-inline: 18px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border-radius: var(--r-md); padding: 16px 20px;
  font-size: .9rem; font-weight: 700; color: var(--ink);
}
.about ul { display: grid; gap: 12px; margin-block: 22px 28px; }
.about li { display: flex; gap: 12px; align-items: flex-start; font-size: .94rem; color: var(--ink-2); }
.about li::before {
  content: ""; width: 10px; height: 10px; flex: none; margin-top: 12px;
  background: var(--yellow); transform: rotate(45deg);
}

/* English copy as printed on the packaging */
.en-copy {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
  direction: ltr; text-align: left;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: .84rem; line-height: 1.75; color: var(--ink-3);
}

/* ---------- Stats ---------- */
.stats { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: clamp(40px, 6vw, 64px); }
.stat {
  text-align: center; padding: 26px 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md);
}
.stat__num {
  font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800;
  color: var(--yellow); line-height: 1.2; display: block;
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: .85rem; color: rgba(242,239,233,.72); }

/* ---------- Process ---------- */
.process { position: relative; display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 24px 22px; position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step__n {
  width: 38px; height: 38px; margin-bottom: 14px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--yellow);
  font-weight: 800; font-size: .95rem;
  transform: rotate(45deg); border-radius: 5px;
}
.step__n > span { transform: rotate(-45deg); }
.step h3 { font-size: 1rem; margin-bottom: 6px; }
.step p { font-size: .86rem; color: var(--ink-3); }

/* ---------- Coverage / partnership ---------- */
.coverage { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.perks { display: grid; gap: 14px; }

.map-wrap {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 24px; box-shadow: var(--shadow-sm);
}
.map-wrap svg { width: 100%; height: auto; display: block; }

/* Destination cities: an ink dot ringed in the card colour so it stays legible
   where a shipping route passes underneath it. */
.map-dot { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }

/* Dashes travel outward from Yazd. Each route carries its own delay, which on an
   infinite loop just offsets the phase, so the eight lines shimmer rather than
   pulsing in lockstep. The card's own .reveal handles the entrance. */
.map-routes path {
  stroke-dasharray: 5 7;
  opacity: .85;
  animation: route-travel 1.6s linear infinite;
}
@keyframes route-travel {
  to { stroke-dashoffset: -12; }
}

.map-pulse { fill: var(--yellow); opacity: .5; transform-origin: 215.1px 186px; animation: pulse 2.6s ease-out infinite; }
@keyframes pulse {
  0%   { transform: scale(.6); opacity: .6; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

.map-labels text {
  font-family: inherit; font-size: 11px; font-weight: 700;
  fill: var(--ink-2); paint-order: stroke;
  stroke: var(--surface); stroke-width: 3.5; stroke-linejoin: round;
}
.map-labels text.map-labels__origin { fill: var(--ink); font-size: 12px; }
.map-legend text { font-family: inherit; font-size: 10.5px; font-weight: 600; fill: var(--ink-3); }
.map-caption { font-family: inherit; font-size: 12px; fill: var(--ink-3); }

/* The SVG scales with the card, so on a phone the 11px labels would land at
   roughly 7px on screen. Scale the type back up against the fixed viewBox. */
@media (max-width: 620px) {
  .map-wrap { padding: 14px; }
  .map-labels text { font-size: 14px; stroke-width: 4.5; }
  .map-labels text.map-labels__origin { font-size: 15px; }
  .map-legend text { font-size: 13px; }
  .map-caption { font-size: 15px; }
}

/* ---------- Testimonials ---------- */
.quotes { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.quote {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.quote__stars { color: var(--yellow-600); letter-spacing: 2px; font-size: .95rem; }
.quote p { font-size: .92rem; color: var(--ink-2); flex: 1; }
.quote__who { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.avatar {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center; font-weight: 800;
  background: var(--yellow); color: var(--ink);
  transform: rotate(45deg); border-radius: 6px;
}
.avatar > span { transform: rotate(-45deg); }
.quote:nth-child(2) .avatar { background: var(--ink); color: var(--yellow); }
.quote:nth-child(3) .avatar { background: var(--cream-2); color: var(--ink); }
.quote__who strong { display: block; font-size: .92rem; }
.quote__who > span:last-child { display: block; }
.quote__who .role { font-size: .78rem; color: var(--ink-3); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 860px; margin-inline: auto; }
.faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq details[open] { border-color: var(--yellow); box-shadow: var(--shadow-sm); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 18px 22px; font-weight: 700; font-size: .98rem;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.4rem; color: var(--ink); flex: none;
  transition: transform .25s var(--ease); line-height: 1;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__a { padding: 0 22px 20px; color: var(--ink-3); font-size: .9rem; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); }
.info-list { display: grid; gap: 14px; margin-top: 26px; }
.info {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px 18px;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.info:hover { transform: translateX(-4px); border-color: var(--yellow); }
.info__icon { width: 42px; height: 42px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--yellow); color: var(--ink); }
.info__icon svg { width: 20px; height: 20px; }
.info strong { display: block; font-size: .88rem; margin-bottom: 2px; }
.info a, .info p { font-size: .88rem; color: var(--ink-3); direction: ltr; text-align: right; }
.info .rtl { direction: rtl; }

.form {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: clamp(22px, 4vw, 34px);
  box-shadow: var(--shadow-sm);
  display: grid; gap: 14px;
}
.field { display: grid; gap: 7px; }
.field label { font-size: .85rem; font-weight: 700; }
.field input, .field textarea, .field select {
  font: inherit; font-size: .92rem;
  padding: 12px 15px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink); width: 100%;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink); background: var(--surface); }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form__note { font-size: .78rem; color: var(--ink-3); }
.form__status { display: none; font-size: .88rem; font-weight: 700; padding: 12px 16px; border-radius: var(--r-sm); }
.form__status.is-visible { display: block; }

/* ---------- CTA banner ---------- */
.cta-banner {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(32px, 6vw, 60px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.cta-banner::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 0; height: 0; border-style: solid;
  border-width: 90px 90px 0 0; border-color: rgba(252,195,0,.16) transparent transparent transparent;
}
.cta-banner > * { position: relative; }
.cta-banner h2 { font-size: clamp(1.4rem, 3.2vw, 2.1rem); margin-bottom: 10px; }
.cta-banner p { color: rgba(255,255,255,.76); max-width: 520px; font-size: .96rem; }
.cta-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #D8D4CC; padding-block: clamp(48px, 7vw, 76px) 0; margin-top: var(--section); }
.footer__grid { display: grid; gap: 36px; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
.site-footer .logo__fa { color: #fff; }
.site-footer .logo__en { color: #8B857A; }
.footer__about { font-size: .88rem; color: #A39C91; margin-top: 16px; max-width: 320px; }
.footer h4 { font-size: .98rem; color: #fff; margin-bottom: 16px; }
.footer__links { display: grid; gap: 10px; }
.footer__links a { font-size: .88rem; color: #A39C91; transition: color .2s var(--ease); }
.footer__links a:hover { color: var(--yellow); }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a {
  width: 42px; height: 42px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.07); color: #D8D4CC;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.socials a:hover { background: var(--yellow); color: var(--ink); transform: translateY(-3px); }
.socials svg { width: 20px; height: 20px; }
.footer__bottom {
  margin-top: 40px; padding-block: 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; font-size: .8rem; color: #8B857A;
}
.footer__strip {
  background: var(--yellow); color: var(--ink);
  text-align: center; padding-block: 12px;
  font-weight: 800; font-size: .9rem; letter-spacing: .04em;
}

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; inset-block-end: 24px; inset-inline-start: 24px;
  width: 48px; height: 48px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--yellow); border: none; cursor: pointer;
  box-shadow: var(--shadow-md); z-index: 90;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--yellow); color: var(--ink); }
.to-top svg { width: 20px; height: 20px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Product grid: filling the last row ----------
   `:nth-child(3n+1)` picks the card that starts a row; pairing it with
   `:nth-last-child()` tells us how many cards that final row actually holds. */
@media (min-width: 1025px) {
  /* Two left over: each takes half the row. */
  .cards > .pcard:nth-child(3n+1):nth-last-child(2),
  .cards > .pcard:nth-child(3n+1):nth-last-child(2) ~ .pcard { grid-column: span 3; }

  /* A widened card would otherwise stand much taller than the row above it, so
     it gets a wider crop rather than a taller one. */
  .cards > .pcard:nth-child(3n+1):nth-last-child(2) .pcard__art,
  .cards > .pcard:nth-child(3n+1):nth-last-child(2) ~ .pcard .pcard__art { aspect-ratio: 16 / 9; }

  /* One left over: centred, at the same width as the cards above it. */
  .cards > .pcard:nth-child(3n+1):nth-last-child(1) { grid-column: 3 / span 2; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero__grid, .about, .coverage, .contact { grid-template-columns: 1fr; }
  .features, .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two-up: four columns, two per card, and a lone last card sits centred. */
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cards > .pcard:nth-child(odd):nth-last-child(1) { grid-column: 2 / span 2; }
  .hero__visual { order: -1; width: 100%; max-width: 460px; margin-inline: auto; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1100px) {
  .burger { display: inline-flex; }
  .nav__actions .btn { display: none; }
  .nav__menu {
    /* RTL: inline-start is the right edge, so the panel slides off to the right
       with translateX(100%) and leaves the burger on the left uncovered */
    position: fixed; inset-block-start: 0; inset-inline-start: 0;
    width: min(320px, 84vw); height: 100dvh;
    background: var(--surface);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 6px; padding: 96px 22px 32px;
    box-shadow: -20px 0 60px rgba(0,0,0,.18);
    transform: translateX(100%);
    transition: transform .35s var(--ease);
    z-index: 105; overflow-y: auto;
  }
  .nav__menu.is-open { transform: translateX(0); }
  .nav__link { padding: 14px 16px; font-size: 1rem; }
  .nav__menu .btn { display: inline-flex; margin-top: 12px; }
  .scrim {
    position: fixed; inset: 0; background: rgba(27,27,27,.5);
    backdrop-filter: blur(2px); z-index: 100;
    opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
  }
  .scrim.is-open { opacity: 1; visibility: visible; }
  .badge-float--1 { inset-inline-end: 0; }
  .badge-float--2 { inset-inline-start: 0; }
}

@media (max-width: 640px) {
  .logo__img { height: 32px; }
  .features, .process { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .pcard__body { padding: 14px 15px 18px; }
  .pcard__body h3 { font-size: .95rem; }
  .pcard__body p { font-size: .82rem; }
  .sizes { gap: 5px; }
  .size { font-size: .68rem; padding: 2px 7px; }
  .tagline { font-size: .68rem; padding: 3px 8px; }
}

@media (max-width: 560px) {
  .field--row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .cta-banner { flex-direction: column; align-items: flex-start; }
  .badge-float { padding: 10px 14px; }
  .badge-float strong { font-size: .9rem; }
  .to-top { inset-block-end: 16px; inset-inline-start: 16px; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .to-top, .progress, .marquee, .scrim { display: none !important; }
  body { background: #fff; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Fluent Forms inside the contact card ----------
   The plugin ships its own layout; these rules only make its fields match the
   surrounding design rather than restyling the plugin wholesale.

   Colour comes first from the plugin's own custom properties, which it defines
   on :root and reads back in rules more specific than anything reasonable to
   write here. Re-declaring them on the form wins by inheritance instead of by
   a specificity fight. */
.form--ff .fluentform {
  --fluentform-primary: var(--yellow);
  --fluentform-secondary: var(--ink-2);
  --fluentform-border-color: var(--line);
  --fluentform-border-radius: var(--r-md);
}
.form--ff .fluentform .ff-el-group { margin-bottom: 16px; }
.form--ff .fluentform .ff-el-input--label label {
  font-size: .85rem; font-weight: 700; color: var(--ink-2); margin-bottom: 6px;
}
.form--ff .fluentform input[type="text"],
.form--ff .fluentform input[type="email"],
.form--ff .fluentform input[type="tel"],
.form--ff .fluentform input[type="number"],
.form--ff .fluentform select,
.form--ff .fluentform textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form--ff .fluentform input:focus,
.form--ff .fluentform select:focus,
.form--ff .fluentform textarea:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px var(--yellow-100);
}
.form--ff .fluentform textarea { min-height: 120px; resize: vertical; }
.form--ff .fluentform .ff-btn-submit {
  font: inherit; font-weight: 700; cursor: pointer;
  border: 1px solid var(--yellow); border-radius: var(--r-md);
  padding: 13px 26px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
/* The plugin hard-codes white label text next to the themed background, which
   is unreadable on gold. This selector is one class heavier than its. */
.form--ff form.fluentform .ff-btn-submit:not(.ff_btn_no_style) {
  background-color: var(--yellow);
  color: var(--ink);
}
.form--ff .fluentform .ff-btn-submit:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.form--ff .fluentform .error-text,
.form--ff .fluentform .text-danger { color: #b32d2e; font-size: .82rem; }
.form--ff .ff-message-success {
  background: var(--yellow-50); border: 1px solid var(--yellow);
  border-radius: var(--r-md); padding: 14px 16px; color: var(--ink);
}