/*
Theme Name: Abri
Theme URI: https://example.com/abri
Author: Farsad
Description: قالب فارسی و راست‌چین برای پلتفرم‌های گفتگو با مشتری و کسب‌وکارهای SaaS. طراحی تمیز و روشن، بدون وابستگی به صفحه‌ساز. صفحهٔ اصلی شامل هیرو، مشکلات، سه گام راه‌اندازی، کانال‌ها، قابلیت‌ها، مزایا، مخاطبان، تعرفه‌ها، نظر مشتریان، سوالات متداول و بلاگ — همه از بخش «سفارشی‌سازی» قابل ویرایش.
Version: 2.0.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: abri
Tags: rtl-language-support, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, blog, business
*/

/* ==========================================================================
   1. Fonts
   ========================================================================== */

@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

/* Variable font (single file covers weight 400–800) used on the English
   pages — closest free/open alternative to a twkLausanne-style grotesk. */
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope-Variable.woff2") format("woff2-variations"), url("assets/fonts/Manrope-Variable.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

/* ==========================================================================
   2. Design tokens — white & blue
   ========================================================================== */

:root {
  --p-50:  #e9f5fa;
  --p-75:  #a4d6eb;
  --p-100: #7ec6e3;
  --p-200: #46add7;
  --p-300: #209ccf;
  --p-400: #166d91;
  --p-500: #145f7e;

  --s-50:  #fef6ef;
  --s-75:  #fad9be;
  --s-100: #f9c9a3;
  --s-200: #f6b27c;
  --s-300: #f4a261;
  --s-400: #ab7144;

  --m-50:  #efefef;
  --m-75:  #bdbdbd;
  --m-100: #a2a2a2;
  --m-200: #7a7979;
  --m-300: #5f5e5e;
  --m-400: #434242;
  --m-500: #3a3939;

  /* semantic alias used by the newer (leadochat-style) sections */
  --brand: var(--p-300);
  --brand-dark: var(--p-400);
  --brand-10: rgba(32, 156, 207, .08);
  --brand-16: rgba(32, 156, 207, .14);
  --brand-30: rgba(32, 156, 207, .3);
  --danger: #d65a4a;
  --danger-10: rgba(214, 90, 74, .08);
  --danger-30: rgba(214, 90, 74, .3);

  --bg: #ffffff;
  --bg-soft: #f7fafc;
  --ink: #1b2b33;
  --ink-soft: var(--m-300);
  --label: var(--m-200);
  --line: #e6ecf0;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 42, 55, .06);
  --shadow: 0 6px 24px rgba(16, 42, 55, .07);
  --shadow-lg: 0 18px 50px rgba(16, 42, 55, .10);
  --glow: 0 8px 20px rgba(32, 156, 207, .28);

  --wrap: 1200px;
  --gutter: 24px;
  --section-y: 88px;

  --font: "Vazirmatn", "IRANSansX", "Segoe UI", Tahoma, sans-serif;
  --font-en: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
}

/* English pages (header.php sets lang="en" dir="ltr" when abri_lang() is 'en') */
html[lang="en"] {
  --font: var(--font-en);
}

/* ==========================================================================
   3. Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* overflow-x: hidden here (not just on .skip-link's own box) because the
   skip-link's -9999px offset otherwise expands the document's own
   scrollable width — a real horizontal-scroll bug on every page, not
   just a side effect of that one element. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--p-400); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--p-300); }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .6em;
  line-height: 1.45;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0;
}

h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); line-height: 1.35; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { padding-inline-start: 1.4em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

::selection { background: var(--p-75); color: var(--p-500); }

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

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 999;
  background: var(--p-400);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.skip-link:focus { inset-inline-start: 16px; color: #fff; }

/* Latin runs (numbers, emails, brand names) read left-to-right inside RTL text */
.ltr, code, kbd, samp, pre {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */

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

.section { padding-block: var(--section-y); }
.section--soft { background: var(--bg-soft); }
.section--tint { background: var(--p-50); }

.section__head {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: 56px;
  text-align: center;
}
.section__head p {
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin: 0;
}

/* Messenger animation: keep heading + gif inside one desktop viewport */
#messenger-animation { padding-block: 40px; }
#messenger-animation .section__head { margin-bottom: 20px; }
#messenger-animation .messenger-animation__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 760px;
  margin-inline: auto;
}

.eyebrow {
  display: inline-block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--p-400);
  background: var(--p-50);
  border: 1px solid var(--p-75);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  margin-bottom: 18px;
}

.grid { display: grid; gap: 24px; }
.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)); }

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  padding: 15px 30px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--p-300);
  color: #fff;
  box-shadow: var(--glow);
}
.btn--primary:hover { background: var(--p-400); color: #fff; }

.btn--secondary {
  background: var(--s-300);
  color: #4a2f16;
  box-shadow: 0 8px 20px rgba(244, 162, 97, .3);
}
.btn--secondary:hover { background: var(--s-200); color: #4a2f16; }

.btn--ghost {
  background: #fff;
  color: var(--p-400);
  border-color: var(--p-75);
}
.btn--ghost:hover { background: var(--p-50); color: var(--p-500); }

.btn--on-dark {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
}
.btn--on-dark:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* ==========================================================================
   6. Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

/* stretched (not centered): every top-level nav <li> needs to be exactly as
   tall as the header itself, because a compact mega panel is anchored to its
   own <li> and uses top:100% to sit right under it. A shorter, vertically
   centred <li> made that percentage land inside the header instead of below
   it — see the .nav-main > ul > li rule further down. */
.site-header__inner {
  display: flex;
  align-items: stretch;
  gap: 28px;
  min-height: 74px;
}

/* Mark and wordmark are one lockup: a tight gap and a shared optical centre so
   they read as a single logo rather than two stacked items. */
.site-brand { display: flex; align-items: center; flex-shrink: 0; }
.site-brand__lockup { display: inline-flex; align-items: center; gap: 7px; }
.site-brand img { max-height: 40px; width: auto; }
.site-brand__mark { display: block; flex-shrink: 0; }
.site-brand__mark svg { width: 34px; height: 34px; display: block; }
.site-brand__name {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--p-500);
  line-height: 1;
  /* Vazirmatn sits slightly high next to the round mark */
  transform: translateY(1px);
}

.nav-main { margin-inline-end: auto; display: flex; align-items: stretch; }
.nav-main a.nav-main__cta {
  display: none;
  color: #fff;
  padding: 15px 30px;
}
.nav-main ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.nav-main li { position: relative; }
/* the trigger/link inside still centres its own label+icon; this just makes
   the <li> itself full header height so top:100% is accurate for its panel */
.nav-main > ul > li { display: flex; align-items: center; }
.nav-main a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--m-400);
  font-weight: 500;
  font-size: .97rem;
}
.nav-main a:hover,
.nav-main .current-menu-item > a {
  color: var(--p-400);
  background: var(--p-50);
}

/* plain dropdowns (depth-2 menus outside a mega panel) */
.nav-main .sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  min-width: 220px;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-main li:hover > .sub-menu,
.nav-main li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* --- mega menu ---------------------------------------------------------- */

.mega__trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: .97rem;
  font-weight: 500;
  color: var(--m-400);
  background: none;
  border: 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.mega__trigger:hover,
.has-mega.is-open > .mega__trigger {
  color: var(--p-400);
  background: var(--p-50);
}

.mega__caret {
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.has-mega.is-open .mega__caret { transform: rotate(-135deg) translate(-2px, -2px); }

/* Every panel is anchored under its own trigger and sized to its content —
   none of them stretch full-bleed across the header, regardless of how many
   columns it has. `.mega` is always `.mega--compact` in the markup now; the
   split class stays only so a data-cols count can size the grid below. */
.nav-main .has-mega { position: relative; }

/* The panel itself is only a positioning shell; .mega__inner carries the paint
   so it can shrink to its content instead of a full-bleed backdrop. */
.mega {
  position: absolute;
  inset-inline: auto;
  top: 100%;
  padding-top: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s cubic-bezier(.2, .8, .3, 1), visibility .22s;
  pointer-events: none;
}
.has-mega:hover > .mega,
.has-mega:focus-within > .mega,
.has-mega.is-open > .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.mega__inner {
  width: max-content;
  max-width: 92vw;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -12px rgba(16, 42, 55, .18), 0 0 0 1px rgba(16, 42, 55, .02);
  overflow: hidden;
}
.mega .wrap { padding-inline: 0; max-width: none; }

/* column width per data-cols — a plain link list (1) reads narrower than a
   grid of icon tiles (2–3), so each gets its own comfortable measure */
.mega[data-cols="1"] .mega__grid { grid-template-columns: minmax(220px, 280px); }
.mega[data-cols="2"] .mega__grid { grid-template-columns: repeat(2, minmax(210px, 260px)); }
.mega[data-cols="3"] .mega__grid { grid-template-columns: repeat(3, minmax(220px, 260px)); }

.mega__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 34px;
  padding: 30px 30px 26px;
}

/* hairline rules between columns, drawn on the gap rather than the card edge.
   Each non-first column gets a rule on its START side (the gap it shares with
   the PREVIOUS column) — inline-end was wrong: it drew col2's rule off the
   end of the grid entirely (nothing to its right) and left the col0/col1 gap
   bare, which read as "the line moved to the end". */
.mega__col + .mega__col { position: relative; }
.mega__col + .mega__col::before {
  content: "";
  position: absolute;
  inset-block: 4px;
  inset-inline-start: -17px;
  width: 1px;
  background: var(--line);
}

.mega__col-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--m-200);
  padding: 0 12px;
  margin-bottom: 10px;
}
.mega__col-title::before {
  content: "";
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--p-300);
  flex-shrink: 0;
}
a.mega__col-title:hover { color: var(--p-400); }

/* ".nav-main ul" above (0,1,1) outranks a bare ".mega__links" (0,1,0) and forces
   flex on every <ul> under .nav-main, including this one — scoping under .mega
   (0,2,0) is what actually wins the cascade and keeps items stacked. */
.mega .mega__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.mega__links a {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: background .16s ease;
}
.mega__links a:hover { background: var(--p-50); color: var(--p-400); }

/* icon tile — tinted at rest, solid brand on hover */
.mega__ico {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--p-50);
  color: var(--p-300);
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.mega__ico svg { width: 17px; height: 17px; }
.mega__links a:hover .mega__ico {
  background: var(--p-300);
  color: #fff;
  transform: translateY(-1px);
}

.mega__body { min-width: 0; flex: 1; }

/* chevron that slides in on hover; pointing is direction-aware */
.mega__go {
  flex-shrink: 0;
  align-self: center;
  width: 7px;
  height: 7px;
  margin-inline-start: 2px;
  border-inline-start: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translateX(-3px);
  opacity: 0;
  transition: opacity .16s ease, transform .16s ease;
}
.mega__links a:hover .mega__go { opacity: .55; transform: rotate(45deg) translateX(0); }

/* colour is inherited so top-level plain links keep their own hover state */
.mega__item-title {
  display: block;
  font-weight: 600;
  font-size: .93rem;
  color: inherit;
  line-height: 1.55;
}

.mega__item-desc {
  display: block;
  font-size: .79rem;
  color: var(--m-200);
  line-height: 1.6;
  margin-top: 1px;
}

.mega__foot {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-soft), #fff);
}
.mega__foot-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 30px;
}
.mega__foot-note { font-size: .84rem; color: var(--m-200); }
.mega__foot-note::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--p-300);
  margin-inline-end: 8px;
  vertical-align: middle;
}

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-actions .btn { padding: 11px 22px; font-size: .93rem; }
.header-actions__link {
  color: var(--m-400);
  font-weight: 500;
  font-size: .93rem;
  padding: 10px 6px;
  white-space: nowrap;
}
.header-actions__link:hover { color: var(--p-400); }

.lang-switch { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.lang-switch__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border-radius: var(--radius-full);
  color: var(--m-300);
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.lang-switch__item svg { border-radius: 50%; flex-shrink: 0; }
.lang-switch__item:hover { color: var(--ink); background: var(--bg-soft); }
.lang-switch__item.is-active { color: var(--p-400); background: var(--p-50); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: var(--m-400);
  border-radius: 2px;
  position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  width: 20px; height: 2px;
  background: var(--m-400);
  border-radius: 2px;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

/* ==========================================================================
   7. Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 460px at 85% -12%, var(--p-50), transparent 62%),
    radial-gradient(760px 380px at 8% 8%, var(--s-50), transparent 58%);
  padding-block: 84px 96px;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 56px;
  align-items: center;
}

.hero h1 { margin-bottom: .5em; }
.hero h1 .accent { color: var(--p-300); }

.hero__lead {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 56ch;
  margin-bottom: 32px;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }

.hero__notes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .93rem;
  color: var(--m-300);
}
.hero__notes li { display: flex; align-items: center; gap: 7px; }
.hero__notes svg { flex-shrink: 0; color: var(--p-300); }

.hero__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #fff;
}
.hero__media img { width: 100%; }
.hero__media--empty {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--p-50), #fff 55%, var(--s-50));
  border: 1px solid var(--line);
  color: var(--m-100);
  font-size: .9rem;
  text-align: center;
  padding: 24px;
}

/* ==========================================================================
   8. Logo strip
   ========================================================================== */

.logos { padding-block: 48px; border-block: 1px solid var(--line); background: #fff; }
.logos__title {
  text-align: center;
  font-size: .93rem;
  color: var(--m-200);
  margin-bottom: 28px;
}
.logos__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 52px;
}
.logos__row img {
  max-height: 40px;
  width: auto;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .2s ease, opacity .2s ease;
}
.logos__row img:hover { filter: grayscale(0); opacity: 1; }

/* ==========================================================================
   9. Cards (features)
   ========================================================================== */

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  height: 100%;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--p-75);
}
.card h3 { margin-bottom: .4em; }
.card p { color: var(--ink-soft); font-size: .96rem; margin: 0; }

.card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--p-50);
  color: var(--p-300);
  margin-bottom: 18px;
}
.card__icon svg { width: 26px; height: 26px; }
.card:nth-child(3n + 2) .card__icon { background: var(--s-50); color: var(--s-400); }

/* ==========================================================================
   9b. Feature showcase (dark product-preview cards)
   ========================================================================== */

.section--dark { background: #10262f; color: #b9c8ce; }
.section--dark .section__head h2, .section--dark .section__head p { color: #fff; }
.section--dark .section__head p { color: #b9c8ce; }
.section__head-btn { margin-top: 26px; }

.feature-card {
  background: #16303b;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: background .3s ease;
}
.feature-card:hover { background: #1c3944; }

.feature-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.feature-card__head h3 { color: #fff; font-size: 1.1rem; margin: 0; }
.feature-card__head svg { width: 16px; height: 16px; color: var(--p-200); flex-shrink: 0; }

.feature-card__text { margin: 8px 0 20px; font-size: .82rem; color: #b9c8ce; }

.feature-card__preview {
  background: #1c3944;
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.feature-card__preview--fixed { height: 180px; overflow: hidden; }
.feature-card__preview--center { align-items: center; justify-content: center; text-align: center; }

.mockup-row { display: flex; align-items: center; gap: 10px; background: #22434f; border-radius: var(--radius-sm); padding: 8px 10px; width: 100%; }
.mockup-row--dim { background: #1c3944; }
.mockup-row--plain { background: none; padding: 0; }
.mockup-row--plain svg { width: 16px; height: 16px; color: var(--p-200); flex-shrink: 0; }
.mockup-row__text { font-size: .68rem; color: #fff; flex: 1; }
.mockup-row--dim .mockup-row__text { color: #b9c8ce; }

.mockup-avatar {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: var(--radius-full);
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .1);
  color: #b9c8ce;
}
.mockup-avatar--accent { background: var(--p-300); color: #fff; }
.mockup-avatar--muted { background: rgba(255, 255, 255, .16); }
.mockup-avatar svg { width: 14px; height: 14px; }

.tag { display: inline-flex; align-items: center; font-size: .62rem; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-full); }
.tag--accent { background: rgba(32, 156, 207, .18); color: var(--p-100); }
.tag--neutral { background: rgba(255, 255, 255, .1); color: #b9c8ce; }
.tag--outline { border: 1px solid rgba(255, 255, 255, .25); color: #b9c8ce; }

.mockup-divider { display: flex; align-items: center; justify-content: center; width: 100%; }
.mockup-divider svg { width: 14px; height: 14px; color: #7a9099; transform: rotate(-90deg); }

.mockup-dots { display: flex; justify-content: center; gap: 8px; width: 100%; }
.mockup-dot { width: 26px; height: 26px; border-radius: var(--radius-full); background: rgba(255, 255, 255, .16); }
.mockup-dot--more { display: grid; place-items: center; font-size: .6rem; color: #b9c8ce; }

.agent-row { display: flex; align-items: center; gap: 8px; }
.agent-dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex-shrink: 0; background: rgba(255, 255, 255, .3); }
.agent-dot--on { background: var(--p-300); }
.agent-dot--busy { background: #7a9099; }
.agent-row__meta { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.agent-row__status { font-size: .68rem; color: #fff; }
.agent-bar { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.agent-bar__fill { display: block; height: 100%; background: var(--p-200); }
.agent-row__count { font-size: .68rem; color: #b9c8ce; }

.code-block { background: #1c3944; border-radius: var(--radius-sm); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.code-block__bar { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .16); }
.code-block__bar--accent { background: var(--p-200); }

.bot-bubble { font-size: .68rem; color: #fff; background: #22434f; border-radius: var(--radius-sm); padding: 6px 10px; }

.kv-list { background: #1c3944; border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; font-size: .75rem; color: #b9c8ce; }
.kv-row { display: flex; align-items: center; justify-content: space-between; }
.kv-row__value { color: #fff; }

/* ==========================================================================
   10. Problems ("مدیریت سنتی … فلج می‌کند")
   ========================================================================== */

.problem {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  height: 100%;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.problem:hover { transform: translateY(-4px); border-color: var(--danger-30); box-shadow: var(--shadow); }
.problem__icon {
  width: 46px; height: 46px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  background: var(--danger-10);
  color: var(--danger);
  margin-bottom: 16px;
}
.problem__icon svg { width: 22px; height: 22px; }
.problem h3 { font-size: 1.08rem; margin-bottom: .35em; }
.problem p { color: var(--ink-soft); font-size: .94rem; margin: 0; }

/* ==========================================================================
   11. Steps ("در ۳ مرحلهٔ ساده")
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  position: relative;
}
/* connecting rail behind the numbers */
.steps::before {
  content: "";
  position: absolute;
  top: 30px;
  inset-inline: 12%;
  height: 2px;
  background: linear-gradient(to left, transparent, var(--line) 12%, var(--line) 88%, transparent);
  z-index: 0;
}
.step { position: relative; z-index: 1; text-align: center; }
.step__num {
  width: 60px; height: 60px;
  margin: 0 auto 20px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  background: var(--p-300);
  box-shadow: var(--glow);
  border: 4px solid #fff;
}
.step h3 { margin-bottom: .4em; }
.step p { color: var(--ink-soft); font-size: .96rem; max-width: 34ch; margin-inline: auto; }

/* ==========================================================================
   13. Benefits (big stat highlight + stat grid)
   ========================================================================== */

.stat-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.stat-hero__item {
  background: linear-gradient(140deg, var(--p-50), #fff 60%, var(--s-50));
  border: 1px solid var(--p-75);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.stat-hero__num {
  font-size: 3rem;
  font-weight: 800;
  color: var(--p-300);
  line-height: 1.2;
  display: block;
}
.stat-hero__label { color: var(--ink-soft); font-size: 1rem; margin-top: 6px; display: block; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.stat__num {
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--p-300);
  line-height: 1.2;
  display: block;
}
.stat__label { color: var(--ink-soft); font-size: .93rem; }

/* ==========================================================================
   14. Audiences ("برای چه کسانی ایده‌آل است؟")
   ========================================================================== */

.audience {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  height: 100%;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.audience:hover { border-color: var(--p-75); box-shadow: var(--shadow); transform: translateY(-4px); }
.audience__icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--p-50);
  color: var(--p-300);
}
.audience__icon svg { width: 24px; height: 24px; }
.audience__icon--emoji { font-size: 22px; line-height: 1; background: none; }
.audience h3 { font-size: 1.05rem; margin-bottom: .3em; }
.audience p { color: var(--ink-soft); font-size: .93rem; margin: 0; }

/* ==========================================================================
   15. Pricing
   ========================================================================== */

.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }

.plan {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 26px 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: var(--shadow-sm);
}
.plan--featured {
  border-color: var(--p-300);
  background: linear-gradient(180deg, var(--p-50), #fff 42%);
  box-shadow: var(--glow);
}
.plan__badge {
  position: absolute;
  top: -13px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  background: var(--p-300);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  padding: 5px 18px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.plan__name { font-size: 1.12rem; font-weight: 700; margin-bottom: 14px; }
.plan__price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--p-400);
  line-height: 1.3;
  display: block;
}
.plan__period { color: var(--m-200); font-size: .86rem; display: block; margin-bottom: 22px; }
.plan__features {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 11px;
  font-size: .91rem;
  color: var(--ink-soft);
  flex-grow: 1;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.plan__features li { display: flex; gap: 9px; align-items: flex-start; }
.plan__features li::before {
  content: "";
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-top: 7px;
  border-radius: var(--radius-full);
  background: var(--p-50);
  box-shadow: inset 0 0 0 3px var(--p-300);
}
.plan .btn { width: 100%; }

/* ==========================================================================
   15b. Pricing calculator
   ========================================================================== */

.calc-wrap { max-width: 640px; margin: 0 auto; }

.calc-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}
.calc-field label { display: block; font-weight: 600; margin-bottom: 12px; font-size: 1.02rem; }
.calc-field input {
  width: 100%;
  padding: 16px 20px;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  color: var(--ink);
}
.calc-field input:focus { outline: none; border-color: var(--p-300); }

.calc-result { display: none; margin-top: 26px; }
.calc-result.is-visible { display: block; }

.calc-total {
  background: linear-gradient(135deg, var(--p-300), var(--p-400));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 26px;
  text-align: center;
  margin-bottom: 16px;
}
.calc-total__label { opacity: .85; font-size: .92rem; }
.calc-total__value { font-size: 2.3rem; font-weight: 800; margin: 6px 0 0; }

.calc-avg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--p-50);
  border: 1px solid var(--brand-16);
  border-radius: var(--radius);
  padding: 14px 20px;
  font-weight: 600;
  margin-bottom: 22px;
}
.calc-avg span:last-child { color: var(--p-400); font-size: 1.1rem; font-weight: 800; }

.calc-breakdown h3 { font-size: 1.02rem; margin-bottom: 14px; }
.calc-breakdown-rows { display: grid; gap: 10px; }
.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: .92rem;
  color: var(--ink-soft);
}
.calc-row span:last-child { font-weight: 700; color: var(--ink); }

.calc-tiers { display: grid; gap: 12px; }
.calc-tier {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  font-weight: 600;
}
.calc-tier strong { color: var(--p-400); }

/* ==========================================================================
   16. Testimonials
   ========================================================================== */

.quote {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.quote__mark { color: var(--p-100); font-size: 2.6rem; line-height: 1; margin-bottom: 8px; }
.quote__text { color: var(--m-400); margin-bottom: 22px; flex-grow: 1; }
.quote__who { display: flex; align-items: center; gap: 12px; }
.quote__avatar {
  width: 46px; height: 46px;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--p-50);
  flex-shrink: 0;
}
.quote__name { font-weight: 700; font-size: .96rem; }
.quote__role { color: var(--m-200); font-size: .86rem; }

/* ==========================================================================
   17. FAQ
   ========================================================================== */

.faq { max-width: 860px; margin-inline: auto; display: grid; gap: 14px; }
.faq__item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq__item[open] { border-color: var(--p-75); box-shadow: var(--shadow-sm); }
.faq__q {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq__q::-webkit-details-marker { display: none; }
/* physical borders on purpose: the chevron must point down in both directions */
.faq__q::after {
  content: "";
  flex-shrink: 0;
  width: 11px; height: 11px;
  border-right: 2px solid var(--p-300);
  border-bottom: 2px solid var(--p-300);
  transform: rotate(45deg);
  transition: transform .22s ease;
  margin-block-start: -5px;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); margin-block-start: 3px; }
.faq__a { padding: 0 24px 22px; color: var(--ink-soft); }

/* ==========================================================================
   18. CTA band
   ========================================================================== */

.cta-band {
  background: linear-gradient(135deg, var(--p-500), var(--p-300));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .88); max-width: 60ch; margin-inline: auto; }
.cta-band__buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }
.cta-band .btn--primary { background: #fff; color: var(--p-500); box-shadow: none; }
.cta-band .btn--primary:hover { background: var(--p-50); color: var(--p-500); }

/* ==========================================================================
   19. Posts
   ========================================================================== */

.post-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-card__thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--p-50); }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex-grow: 1; }
.post-card__meta { font-size: .84rem; color: var(--m-200); margin-bottom: 10px; }
.post-card__meta a { color: var(--m-200); }
.post-card__meta a:hover { color: var(--p-400); }
.post-card__title { font-size: 1.08rem; margin-bottom: .5em; }
.post-card__title a { color: var(--ink); }
.post-card__title a:hover { color: var(--p-400); }
.post-card__excerpt { color: var(--ink-soft); font-size: .94rem; flex-grow: 1; margin-bottom: 16px; }
.post-card__more { font-weight: 700; font-size: .92rem; }

/* single / page */
.entry { max-width: 800px; margin-inline: auto; }
.entry__header { margin-bottom: 32px; text-align: center; }
.entry__meta { color: var(--m-200); font-size: .9rem; }
.entry__thumb { border-radius: var(--radius); overflow: hidden; margin-bottom: 34px; }
.entry__content > * + * { margin-top: 1.15em; }
.entry__content h2 { margin-top: 1.8em; }
.entry__content h3 { margin-top: 1.5em; }
.entry__content img { border-radius: var(--radius); }
.entry__content blockquote {
  margin: 1.6em 0;
  padding: 18px 24px;
  border-inline-start: 4px solid var(--p-300);
  background: var(--p-50);
  border-radius: var(--radius-sm);
  color: var(--m-400);
}
.entry__content table { width: 100%; border-collapse: collapse; }
.entry__content th, .entry__content td { border: 1px solid var(--line); padding: 10px 14px; text-align: start; }
.entry__content th { background: var(--bg-soft); }
.entry__content code { background: var(--bg-soft); padding: 2px 7px; border-radius: 6px; font-size: .9em; }

/* product landing pages (template-product.php): stat row under the hero,
   and Media & Text / Columns / Quote get the same card language as the
   homepage's .feature-card / .benefit so admins can build alternating
   feature rows and bento-style grids straight from the block editor. */
.stats--product { margin-top: 0; }

.entry--product { max-width: none; }
.entry--product .entry__content { max-width: 800px; margin-inline: auto; }
.entry--product .entry__content > .alignwide { max-width: 1100px; }
.entry--product .entry__content > .alignfull { max-width: none; }

.entry--product .entry__content .wp-block-media-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.entry--product .entry__content .wp-block-media-text.has-media-on-the-right {
  grid-template-areas: "content media";
}
.entry--product .entry__content .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media { grid-area: media; }
.entry--product .entry__content .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content { grid-area: content; }
.entry--product .entry__content .wp-block-media-text__media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  display: block;
}
.entry--product .entry__content .wp-block-media-text__content { padding: 0; }
.entry--product .entry__content .wp-block-media-text__content > * + * { margin-top: 1em; }

.entry--product .entry__content .wp-block-columns {
  gap: 24px;
  margin-top: 1.6em;
}
.entry--product .entry__content .wp-block-column {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 26px 24px;
}
.entry--product .entry__content .wp-block-column > * + * { margin-top: .7em; }
.entry--product .entry__content .wp-block-column h2,
.entry--product .entry__content .wp-block-column h3,
.entry--product .entry__content .wp-block-column h4 { margin-top: 0; }

@media (max-width: 720px) {
  .entry--product .entry__content .wp-block-media-text,
  .entry--product .entry__content .wp-block-media-text.has-media-on-the-right {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "content";
    gap: 20px;
  }
}

.page-hero {
  background: var(--p-50);
  padding-block: 56px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { margin: 0; }
.page-hero h1 .accent { color: var(--p-300); }
.page-hero p { color: var(--ink-soft); margin-top: 10px; }

/* pagination */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; flex-wrap: wrap; }
.pagination .page-numbers {
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--m-400);
  font-weight: 500;
}
.pagination .page-numbers:hover { border-color: var(--p-200); color: var(--p-400); }
.pagination .current { background: var(--p-300); border-color: var(--p-300); color: #fff; }

/* comments */
.comments { max-width: 800px; margin: 64px auto 0; }
.comments ol { list-style: none; padding: 0; margin: 0; }
.comments .comment-body {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 16px;
  background: #fff;
}
.comments .children { padding-inline-start: 32px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.search-field,
input[type="search"] {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
}
.comment-form label { display: block; margin-bottom: 6px; font-weight: 500; font-size: .93rem; }
.comment-form p { margin-bottom: 16px; }
.comment-form .submit {
  font-family: inherit;
  font-weight: 700;
  padding: 14px 32px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--p-300);
  color: #fff;
  cursor: pointer;
}

/* ==========================================================================
   20. Footer
   ========================================================================== */

.site-footer {
  background: #10262f;
  color: #b9c8ce;
  padding-block: 64px 0;
  margin-top: 0;
}
.site-footer a { color: #b9c8ce; }
.site-footer a:hover { color: #fff; }
.site-footer h3 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 18px;
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr minmax(140px, max-content) minmax(140px, max-content);
  gap: 40px;
  padding-bottom: 22px;
}
.footer__top:has(.footer__badges) {
  grid-template-columns: 1fr minmax(140px, max-content) minmax(140px, max-content) minmax(160px, max-content);
}

.footer__brand-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.footer__brand-head .site-brand__mark svg { width: 32px; height: 32px; display: block; }
.footer__wordmark {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .01em;
}
.footer__about { font-size: .94rem; margin: 0; max-width: 44ch; }

.footer__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }

.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: .94rem; }

.footer__badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
  text-align: center;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .03);
}
.footer__badges img {
  height: 68px;
  width: auto;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 6px;
}

.footer__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: .85rem;
  line-height: 1.4;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
a.footer__pill:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .32); }
.footer__pill svg { width: 16px; height: 16px; flex-shrink: 0; }

.footer__bottom-links { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 22px; }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 22px;
}
.footer__copy { font-size: .88rem; color: #b9c8ce; }

/* ==========================================================================
   21. Widgets
   ========================================================================== */

.widget { margin-bottom: 32px; }
.widget-title { font-size: 1.05rem; margin-bottom: 14px; }
.widget ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: .95rem; }

/* ==========================================================================
   22. "Request a demo" modal
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: rgba(16, 42, 55, .5);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .2s ease;
}
.modal-backdrop[hidden] { display: none; }
.modal-backdrop.is-open { opacity: 1; }

.modal {
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - var(--gutter) * 2);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 36px 32px 32px;
  position: relative;
  transform: translateY(12px) scale(.98);
  opacity: 0;
  transition: transform .22s cubic-bezier(.2, .8, .3, 1), opacity .2s ease;
}
.modal-backdrop.is-open .modal { transform: translateY(0) scale(1); opacity: 1; }

.modal__close {
  position: absolute;
  inset-inline-end: 16px;
  inset-block-start: 16px;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.modal__close:hover { background: var(--bg-soft); color: var(--ink); }
.modal__close svg { width: 16px; height: 16px; }

.modal__lead { color: var(--ink-soft); font-size: .95rem; margin-bottom: 22px; }

.modal__error {
  color: var(--danger);
  background: var(--danger-10);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: .88rem;
  margin-bottom: 16px;
}
.modal__error[hidden] { display: none; }

.modal__body--success { text-align: center; }
.modal__success-icon {
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--p-50);
  color: var(--p-300);
}
.modal__success-icon svg { width: 26px; height: 26px; }
.modal__body--success .modal__lead { margin-bottom: 26px; }

.field { margin-bottom: 16px; }
.field > label {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 7px;
}
.field--trap {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.input {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-soft);
  transition: border-color .15s ease, background .15s ease;
}
.input:hover { border-color: var(--p-75); }
.input:focus-visible { border-color: var(--p-300); background: #fff; outline: none; }
textarea.input { resize: vertical; min-height: 80px; }

.btn-block { width: 100%; margin-top: 6px; }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

@media (max-width: 480px) {
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    max-width: none;
    width: 100%;
    max-height: 88vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 28px 22px 26px;
    transform: translateY(100%);
  }
  .modal-backdrop.is-open .modal { transform: translateY(0); }
}

/* ==========================================================================
   23. Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  :root { --section-y: 68px; }
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .grid--4, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__top,
  .footer__top:has(.footer__badges) { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 860px) {
  .header-actions { margin-inline-start: auto; }
  .nav-toggle { display: inline-flex; }
  .header-actions .btn--ghost,
  .header-actions .btn--primary,
  .header-actions__link { display: none; }
  .lang-switch { display: flex; }
  .site-brand__name { display: none; }

  .nav-main a.nav-main__cta { display: block; margin-top: 16px; }

  .nav-main {
    position: fixed;
    inset: 74px 0 auto 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 12px var(--gutter) 22px;
    display: none;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
  }
  .nav-main.is-open { display: block; }
  .nav-main > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-main a { padding: 13px 12px; }
  .nav-main .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-inline-start: 2px solid var(--line);
    border-radius: 0;
    padding: 0;
    margin-inline-start: 12px;
  }

  /* the mega panel becomes a plain accordion on small screens */
  .mega__trigger { width: 100%; justify-content: space-between; padding: 13px 12px; }
  .nav-main .has-mega,
  .nav-main .has-mega:has(> .mega--compact) { position: relative; }
  .mega, .mega--compact {
    position: static;
    inset-inline: auto;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding-top: 0;
    pointer-events: auto;
    border-inline-start: 2px solid var(--line);
    margin-inline-start: 12px;
  }
  .has-mega:hover > .mega,
  .has-mega:focus-within > .mega { display: none; }
  .has-mega.is-open > .mega { display: block; }
  .mega__inner,
  .mega--compact .mega__inner {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    width: auto;
    max-width: none;
  }
  .mega .wrap { padding-inline: 0; }
  /* must out-specify the desktop .mega[data-cols="N"] .mega__grid rules
     (0,3,0) above, otherwise a 3-column panel stays 3 columns wide in the
     single-column mobile accordion */
  .nav-main .mega[data-cols] .mega__grid {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 6px 0 12px;
  }
  /* the column rules only make sense side by side */
  .mega__col + .mega__col::before { display: none; }
  .mega__links a { padding: 8px 10px; }
  .mega__ico { width: 28px; height: 28px; border-radius: 7px; }
  .mega__ico svg { width: 15px; height: 15px; }
  .mega__item-desc, .mega__go, .mega__foot { display: none; }

  /* the rail only reads correctly on a horizontal row */
  .steps { grid-template-columns: 1fr; gap: 34px; }
  .steps::before { display: none; }
}

@media (max-width: 700px) {
  :root { --section-y: 56px; --gutter: 18px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat-hero { grid-template-columns: 1fr; }
  .stat-hero__num { font-size: 2.4rem; }
  .cta-band { padding: 40px 24px; }
  .footer__top,
  .footer__top:has(.footer__badges) { grid-template-columns: 1fr; }
  .section__head { margin-bottom: 36px; }
  .hero { padding-block: 56px 64px; }
  .hero__copy { text-align: center; }
  .hero h1 { font-size: 2.35rem; }
  .hero__lead { margin-inline: auto; font-size: 1rem; max-width: 42ch; }
  .hero__cta { justify-content: center; }
  .hero__notes { justify-content: center; }

  /* The bundled animation's own content is a fixed pixel size (it doesn't
     resize with its container), so at phone widths it renders small with
     empty space on the sides. Scale the iframe up and clip the overflow to
     make the icons themselves bigger instead of just the empty frame. */
  #messenger-animation .messenger-animation__frame {
    max-width: none;
    overflow: hidden;
  }
  #messenger-animation .messenger-animation__iframe {
    transform: scale(1.5);
    transform-origin: center;
  }
}

/* ==========================================================================
   24. Motion & print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Per-device section visibility, set from Customize → each front-page
   section's "hide on …" checkboxes. Breakpoints match section 22 above:
   mobile ≤700px, tablet 701–1024px, desktop ≥1025px. */
@media (min-width: 1025px) {
  .hide-desktop { display: none !important; }
}
@media (min-width: 701px) and (max-width: 1024px) {
  .hide-tablet { display: none !important; }
}
@media (max-width: 700px) {
  .hide-mobile { display: none !important; }
}

@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle { display: none !important; }
  body { color: #000; }
}