/*
  Home page layout. No token literals — compose from layout.css
  utilities and components.css classes. Sections built here match the
  confirmed screenshots in reports/01-analysis-report.md (hero,
  comparison table, trust logos, footer) — see prompts/04-page-implementation.md §2.
*/

.home-hero {
  text-align: center;
  padding-block: var(--space-2xl);
}

/*
 * Eyebrow line + divider — CONFIRMED (Home-Sections.md "Frame 1890164761/1890164760"):
 * text 18px/#102E50, a line–dot–line divider below it (dot = --color-primary circle).
 */
.home-hero__eyebrow p {
  color: var(--color-business-primary);
}

.home-hero__eyebrow-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  margin-block-start: var(--space-2xs);
}

.home-hero__eyebrow-divider span {
  width: 4.7rem;
  height: 1px;
  background-color: var(--color-border);
}

.home-hero__eyebrow-divider i {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
}

/*
 * Heading — CONFIRMED font-size 36px/weight 700 (matches --font-size-heading-xl
 * / --font-weight-bold exactly). Two-tone split (navy "آنلاین پیامک" +
 * gold "یک سیستم خودکار فروش است") confirmed visually via ok-simple.png,
 * with two small decorative icon badges between the two halves
 * ("Frame 1890164645": navy bolt badge + gold message badge, simplified
 * from Figma's exact rotation/blur/shadow values to a lighter CSS
 * approximation — still navy/gold, rotated, bordered, shadowed).
 */
.home-hero__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.home-hero__heading-dark {
  color: var(--color-business-primary);
}

.home-hero__heading-badges {
  display: inline-flex;
  align-items: center;
}

.home-hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
}

.home-hero__badge--navy {
  background-color: var(--color-secondary);
  box-shadow: var(--shadow-md);
  transform: rotate(-14deg);
  margin-inline-end: -0.6rem;
}

.home-hero__badge--gold {
  background-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: rotate(14deg);
}

.home-hero__title-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  margin-inline-start: var(--space-3xs);
}

.home-hero__lead {
  color: color-mix(in srgb, var(--color-secondary) 64%, transparent); /* CONFIRMED alpha */
  max-width: 48rem;
  margin-inline: auto;
}

/*
 * List cards ("Frame 1890164806/1890164807") — CONFIRMED: white card,
 * padding 24px 16px (= --space-md --space-sm exactly), border-radius
 * 16px (= --radius-lg exactly), border rgba navy 10%, divider lines
 * rgba navy 10% between rows, gold numbered badges (left card) / gold
 * icons (right card).
 */
.home-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-lg);
  margin-block: var(--space-lg);
  text-align: start;
  align-items: center;
}

.home-hero__grid .card {
  padding: var(--space-md) var(--space-sm);
}

.home-hero__list {
  display: flex;
  flex-direction: column;
}

.home-hero__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
}

.home-hero__list li:not(:last-child) {
  border-bottom: 1px solid color-mix(in srgb, var(--color-secondary) 10%, transparent); /* CONFIRMED alpha */
}

.home-hero__list-number {
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  flex-shrink: 0;
}

.home-hero__list img {
  flex-shrink: 0;
}

/*
 * Decorative dot patterns (task-polish.md #2/#3) — purely visual flourish,
 * aria-hidden/pointer-events:none, no layout impact.
 */
.home-hero {
  position: relative;
}

.home-hero__decoration {
  position: absolute;
  top: -2.5rem;
  right: 0;
  width: 115px;
  height: 92px;
  background-image: url("../../assets/images/dots-grid.svg");
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 1024px) {
  .home-hero__decoration {
    display: none;
  }
}

.home-hero__card--dotted {
  position: relative;
}

.home-hero__card--dotted::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 115px;
  height: 92px;
  background-image: url("../../assets/images/dots-grid.svg");
  background-repeat: no-repeat;
  pointer-events: none;
}

/*
 * Dashed connector arrows between the hero list cards and the phone
 * mockup (task-polish.md #7) — decorative only, hidden below the
 * breakpoint where the grid collapses to a single column.
 */
.home-hero__card--connectors {
  position: relative;
}

.home-hero__list-item--connector {
  position: relative;
}

.home-hero__card--connectors:not(.home-hero__card--connectors-single)
  .home-hero__list-item--connector::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -48px;
  transform: translateY(-50%);
  width: 48px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16' viewBox='0 0 48 16'%3E%3Cpath d='M14 8H46' stroke='%23102E50' stroke-opacity='0.36' stroke-width='1.5' stroke-dasharray='3 4' stroke-linecap='round'/%3E%3Cpath d='M2 8L14 3V13L2 8Z' fill='%23102E50' fill-opacity='0.36'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  pointer-events: none;
}

.home-hero__card--connectors-single .home-hero__list-item--connector::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -48px;
  transform: translateY(-50%);
  width: 48px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16' viewBox='0 0 48 16'%3E%3Cpath d='M2 8H34' stroke='%23102E50' stroke-opacity='0.36' stroke-width='1.5' stroke-dasharray='3 4' stroke-linecap='round'/%3E%3Cpath d='M46 8L34 3V13L46 8Z' fill='%23102E50' fill-opacity='0.36'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .home-hero__grid {
    grid-template-columns: 1fr;
  }

  .phone-mock {
    order: -1;
    max-width: 18rem;
    margin-inline: auto;
  }

  .home-hero__card--connectors .home-hero__list-item--connector::before,
  .home-hero__card--dotted::after {
    display: none;
  }
}

/*
 * Phone mockup illustration ("Frame 1890164811/1890164602") — CONFIRMED
 * content/colors. Rebuilt as real HTML/CSS (not an image) since every
 * piece of text and every color was given directly in the Dev Mode
 * export. Camera-lens decorative details were left out (too fragile for
 * responsive HTML, near-zero visual impact at this size).
 */
.phone-mock {
  display: flex;
  justify-content: center;
}

.phone-mock__frame {
  position: relative;
  width: 100%;
  max-width: 15.5rem;
  background-color: #f6f7f8; /* CONFIRMED hex, distinct one-off from the design system's --color-surface-alt */
  border: 1px solid var(--color-secondary);
  border-radius: 26.6px; /* CONFIRMED exact value, not in the standard scale */
  padding: var(--space-md) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.phone-mock__notch {
  width: 2.75rem;
  height: auto;
  margin-inline: auto;
}

.phone-mock__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-size: var(--font-size-body-sm);
  color: var(--color-business-primary);
}

/*
 * Tag pill — CONFIRMED (Mobile-forosh.md "Frame 1890164599", 2026-08-19):
 * white card, border rgba navy 8%, radius 10px. Was missing this card
 * styling entirely on the first pass (plain text row) — real gap, not
 * a simplification.
 */
.phone-mock__tag {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  background-color: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 8%, transparent); /* CONFIRMED alpha */
  border-radius: 10px; /* CONFIRMED */
  padding: var(--space-3xs) var(--space-2xs);
  font-size: var(--font-size-caption);
  color: color-mix(in srgb, var(--color-secondary) 56%, transparent); /* CONFIRMED alpha */
}

.phone-mock__tag-icon {
  width: 1.5rem;
  height: 1.5rem;
  transform: none;
  margin-inline-end: 0;
}

/* Notification bell badge — CONFIRMED gold circle overlapping the tag's
   corner, rotated ("Frame 1890164615"). Simplified rotation angle
   (-15deg vs the source's -31.23deg) to stay legible at this small size. */
.phone-mock__tag-bell {
  position: absolute;
  top: -0.55rem;
  inset-inline-start: -0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  background-color: var(--color-primary);
  border: 2px solid var(--color-white);
  border-radius: var(--radius-full);
  transform: rotate(-15deg);
}

.phone-mock__tag-bell img {
  width: 0.7rem;
  height: 0.7rem;
}

.phone-mock__bubble {
  background-color: color-mix(in srgb, var(--color-secondary) 5%, transparent); /* CONFIRMED alpha */
  border-radius: var(--radius-md);
  padding: var(--space-2xs);
  font-size: var(--font-size-caption);
  color: color-mix(in srgb, var(--color-secondary) 64%, transparent); /* CONFIRMED alpha */
  line-height: 1.7;
}

.phone-mock__cta {
  background-color: color-mix(in srgb, var(--color-secondary) 7%, transparent); /* CONFIRMED alpha */
  border-radius: var(--radius-sm);
  padding: var(--space-2xs);
  text-align: center;
  font-size: var(--font-size-caption);
  color: var(--color-business-primary);
}

.home-trust {
  padding-block: var(--space-xl);
}

/*
 * Logo cards — CONFIRMED size/border/radius ("لوگوی... " card:
 * 118.51x62, padding 16px, border rgba navy 10%, radius 12px = --radius-md
 * exactly). Content is a text placeholder — see file header comment.
 */
/*
 * Real composited logo banner (رفرنس/brands.png, 2026-08-19) — wider
 * than any viewport (2560px natural width) by design, so it scales down
 * to fill the container and gets a horizontal-scroll safety net on
 * narrow screens instead of shrinking the logos into illegibility.
 */
.home-trust__logos-scroll {
  overflow-x: auto;
}

.home-trust__logos-img {
  display: block;
  width: 100%;
  min-width: 40rem;
  height: auto;
  margin-inline: auto;
}

.home-cta {
  text-align: center;
  padding-block: var(--space-xl);
  background-color: var(--color-surface-alt);
}

/* ==========================================================================
   Continue-Home.MD sections (2026-08-19) — CONFIRMED text/colors from
   Figma Dev Mode export + رفرنس/ real icon exports. Highly decorative
   micro-details (concentric rings, exact px shadows, dot-grid textures)
   were simplified per established project policy; structural
   content/copy is exact.
   ========================================================================== */

/* Yellow ticker bar — CONFIRMED items + structure (ticker.md, Frame
   1890164724/1890164723): a slightly rotated gold strip over a navy bar,
   so a thin navy sliver peeks above/below. */
.home-ticker {
  position: relative;
  overflow: hidden;
  background-color: var(--color-secondary);
  padding-block: 3px;
}

.home-ticker__bar {
  transform: rotate(1.2deg); /* simplified from the exact rotation matrix */
  background-color: var(--color-primary);
  padding-block: var(--space-sm);
}

.home-ticker__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
  color: var(--color-white);
  font-size: var(--font-size-body-md);
  font-weight: 600; /* CONFIRMED semi-bold, no matching existing token */
  text-align: center;
}

.home-ticker__dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.44);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* Shared eyebrow title-row pill (26x7 gold pill, CONFIRMED) — used next
   to "پیامک OTP" and "درباره آنلاین پیامک" sub-headings. */
.feature-split__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.feature-split__pill {
  width: 1.6rem;
  height: 0.45rem;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
}

/* ==========================================================================
   Feature carousel — CONFIRMED (آنلاین-پیامک-فراتراز-پنل-پیامک-فعلی.MD,
   2026-08-19): 3 slides (OTP phone / AI hub-diagram / smart-send
   hub-diagram) beside the persistent "پیامک کاربر محور" list.
   ========================================================================== */

/*
 * Bug fix (image copy 2.png, 2026-08-19): in this RTL project, the first
 * DOM child of a grid lands in the RIGHTMOST column by default — the
 * panel was first in DOM with the larger column, so it rendered on the
 * right instead of the left (list on the left instead of the right).
 * Fixed by reordering the DOM (list first, panel second) so the smaller
 * first column (right) holds the list and the larger second column
 * (left) holds the panel, matching the confirmed reference exactly.
 */
.feature-carousel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-lg);
  align-items: start;
}

@media (max-width: 1024px) {
  .feature-carousel {
    grid-template-columns: 1fr;
  }
}

/* CONFIRMED (Frame 1890164941, Section.md Dev Mode export): white card,
   1px navy-10% border, 20px radius (doesn't match an existing radius
   token, kept as its own confirmed value), plus a soft corner glow +
   dot-grid texture shared by all 3 slides. */
.feature-carousel__panel {
  position: relative;
  overflow: hidden;
  background-color: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 10%, transparent);
  border-radius: 20px;
  padding: var(--space-lg);
}

.feature-carousel__panel::before {
  content: "";
  position: absolute;
  top: -4rem;
  inset-inline-end: -3rem;
  width: 13rem;
  height: 13rem;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-secondary) 20%, transparent) 0%, transparent 70%);
  filter: blur(2.5rem);
  pointer-events: none;
}

.feature-carousel__panel::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: 9rem;
  height: 9rem;
  background-image: radial-gradient(color-mix(in srgb, var(--color-secondary) 22%, transparent) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(circle at 100% 0%, black 0%, transparent 75%);
  mask-image: radial-gradient(circle at 100% 0%, black 0%, transparent 75%);
  pointer-events: none;
}

.feature-carousel__list {
  display: flex;
  align-items: stretch;
  gap: var(--space-sm);
}

.feature-carousel__list-body {
  flex: 1;
  min-width: 0;
}

/* Decorative side rail — CONFIRMED track + gold top segment */
.feature-carousel__rail {
  position: relative;
  width: 4px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: color-mix(in srgb, var(--color-secondary) 6%, transparent); /* CONFIRMED alpha */
}

.feature-carousel__rail::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 4px;
  height: 2.9rem; /* CONFIRMED ~46px */
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}

/* CONFIRMED (Section.md, bug-location.png/ok-final.png): text column is
   physically RIGHT, visual (phone-mock/hub-diagram) is physically LEFT —
   the opposite of this project's usual RTL-mirror convention, for this
   component specifically. Achieved by DOM order (text first) rather than
   an explicit grid-column override, matching how this kind of left/right
   flip has been fixed elsewhere in the project. */
.feature-carousel__slide {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-lg);
}

/* Bug fix: the class rule above beats the UA stylesheet's [hidden] rule
   (same specificity, author CSS wins), so inactive slides were rendering
   as visible grids stacked on top of each other instead of being hidden
   by JS. Found while testing this carousel — affects all 3 slides. */
.feature-carousel__slide[hidden] {
  display: none;
}

@media (max-width: 768px) {
  .feature-carousel__slide {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .feature-carousel__slide .feature-split__title-row {
    justify-content: center;
  }

  .feature-carousel__phone,
  .hub-diagram {
    margin-inline: auto;
  }
}

.feature-carousel__phone .phone-mock__frame {
  max-width: 12.5rem;
}

/* OTP slide corner badges — CONFIRMED (Section.md reference screenshot):
   unlock top-left/navy, check-badge top-right/gold, message-tag
   bottom-left/gold, key bottom-right/navy, all overlapping the phone
   frame edge with a white ring. */
.otp-phone {
  position: relative;
}

.otp-badge {
  position: absolute;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 3px solid var(--color-white);
}

.otp-badge--navy {
  background-color: var(--color-secondary);
}

.otp-badge--gold {
  background-color: var(--color-primary);
}

.otp-badge--tl {
  top: 14%;
  inset-inline-start: -1.25rem;
}

.otp-badge--tr {
  top: -0.75rem;
  inset-inline-end: 12%;
}

.otp-badge--bl {
  bottom: 12%;
  inset-inline-start: -1.25rem;
}

.otp-badge--br {
  bottom: -0.75rem;
  inset-inline-end: 10%;
}

/* App-style phone header (icon · title · menu dots), distinct from the
   plain centered header used by the hero phone mockup */
.phone-mock__header--app {
  justify-content: space-between;
}

.phone-mock__menu-dots {
  display: inline-flex;
  gap: 0.15rem;
}

.phone-mock__menu-dots i {
  width: 0.2rem;
  height: 0.2rem;
  border-radius: var(--radius-full);
  background-color: var(--color-business-primary);
}

/* OTP code card inside the phone — CONFIRMED head row (label + "۰۲:۰۰"
   countdown) above the digit boxes */
.otp-code-card {
  background-color: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 8%, transparent); /* CONFIRMED alpha */
  border-radius: 10px;
  padding: var(--space-2xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.otp-code-card__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
}

/* Small navy badge behind the inline shield icon — CONFIRMED: the icon
   itself is white, so it needs a dark chip to sit on, not the card's
   white background. */
.otp-code-card__label img {
  background-color: var(--color-secondary);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.otp-code-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-caption);
  color: var(--color-business-primary);
}

.otp-code-card__timer {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.otp-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
}

.otp-preview span {
  width: 1.8rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-business-primary);
}

/* Hub-diagram (AI / smart-send slides) — simplified from the confirmed
   center-circle + 4-node layout: dashed connector lines and floating
   decorative bubbles were dropped, the 2x2 node grid + center circle
   (the structurally meaningful part) is kept. */
.hub-diagram {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 9rem));
  gap: var(--space-lg) var(--space-xl);
  padding: var(--space-lg) var(--space-xl);
}

.hub-diagram__center {
  position: absolute;
  top: 50%;
  /* Bug fix: `inset-inline-start` resolves to `right` in this RTL page,
     which combined with `translate(-50%, -50%)` shifted the circle a
     full half-width left of true center (colliding with the left-column
     nodes). `left` is a physical property, direction-agnostic, so it
     pairs correctly with the standard translate(-50%) centering trick
     regardless of RTL/LTR. */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4.5rem;
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  border: 6px solid color-mix(in srgb, var(--color-primary) 15%, white);
  border-radius: var(--radius-full);
  color: var(--color-white);
}

.hub-diagram__center--text {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body-md);
}

.hub-diagram__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
}

.hub-diagram__icon {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-secondary);
  border-radius: var(--radius-md);
}

.hub-diagram__label {
  background-color: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 10%, transparent); /* CONFIRMED-family alpha */
  border-radius: var(--radius-full);
  padding: var(--space-3xs) var(--space-sm);
  font-size: var(--font-size-body-sm);
  color: var(--color-business-primary);
  white-space: nowrap;
}

/* Carousel navigation — CONFIRMED (ok-final.png): outline/prev on the
   physical left, ۰۱—۰۲—۰۳ counter, gold/next on the physical right,
   aligned under the text column (now physical-right, see
   .feature-carousel__slide above). HTML/DOM order is unchanged
   (prev, pages, next) — reordered visually via `order` rather than
   restructuring the markup, since the buttons are also the JS click
   targets and this keeps that binding untouched. */
.carousel-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
}

.carousel-nav [data-carousel-prev] {
  order: 3;
}

.carousel-nav [data-carousel-next] {
  order: 1;
}

/* CONFIRMED (Frame 1890164678): 40px square, 10px radius (not an existing
   radius token), gold-tinted bg/border for the outline button. */
.carousel-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
  cursor: pointer;
}

.carousel-nav__btn--primary {
  background-color: var(--color-primary);
}

.carousel-nav__btn--primary img {
  filter: brightness(0) invert(1);
}

.carousel-nav__icon-flip {
  transform: scaleX(-1);
}

.carousel-nav__pages {
  order: 2;
  display: flex;
  flex-direction: row-reverse; /* CONFIRMED: ۰۱ nearest the left/prev button, ۰۳ nearest the right/next button */
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--font-size-body-sm);
  color: var(--color-text-muted);
}

.carousel-nav__pages [data-page].is-active {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.carousel-nav__dash {
  color: var(--color-border);
}

/*
 * "پیامک کاربر محور" heading — CONFIRMED (flesh.png + full CSS dump,
 * 2026-08-19): gold text (was wrongly navy), with a short accent line
 * to its left (packed tight via flex-end — same proven pattern as
 * .about-card__text .feature-split__title-row, NOT full-width
 * space-between), then a full-width divider below.
 */
.feature-list-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2xs);
  padding-block-end: var(--space-sm);
  margin-block-end: var(--space-sm);
  border-bottom: 1px solid color-mix(in srgb, var(--color-secondary) 12%, transparent); /* CONFIRMED alpha */
}

.feature-list-heading__text {
  font-size: var(--font-size-body-md);
  color: var(--color-primary); /* CONFIRMED gold */
  text-align: end;
  flex-shrink: 0;
}

.feature-list-heading__line {
  width: 2.2rem;
  height: 3px;
  border-radius: var(--radius-full);
  /* Fades out toward its far end (away from the text) — user correction 2026-08-19.
     Thickened + recolored to project gold (--color-primary) — user correction 2026-08-19. */
  background: linear-gradient(to left, var(--color-primary), transparent);
}

/*
 * List rows — CONFIRMED full-width space-between (text touches the
 * right edge, arrow icon touches the left edge — verified directly
 * against the reference screenshot, not just the CSS dump's `order`
 * values, which didn't visually match on their own). DOM order is
 * [text, icon] so text lands on the right (RTL flex-start) per the
 * same rule proven by .header__row throughout this project.
 */
.feature-vertical-list {
  display: flex;
  flex-direction: column;
}

.feature-vertical-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-sm);
  font-size: var(--font-size-body-md);
  color: var(--color-business-primary);
  border-bottom: 1px solid color-mix(in srgb, var(--color-secondary) 12%, transparent); /* CONFIRMED alpha */
}

.feature-vertical-list li:last-child {
  border-bottom: none;
}

.feature-vertical-list li img {
  flex-shrink: 0;
}

/* 5-step process — CONFIRMED (Section-Continue.md, Frame 1890164837):
   dashed track behind the number badges, a small arrow tick down to each
   card, then a real bordered card with icon + title + description. */
.process-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-md);
  text-align: center;
}

@media (max-width: 1024px) {
  .process-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

.process-steps::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  inset-inline: 10%;
  border-block-start: 1.5px dashed color-mix(in srgb, var(--color-secondary) 36%, transparent); /* CONFIRMED alpha */
}

@media (max-width: 1024px) {
  .process-steps::before {
    display: none;
  }
}

.process-steps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
}

.process-steps__badge-row {
  position: relative;
  z-index: 1;
}

.process-steps__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background-color: #eef0f3; /* CONFIRMED */
  color: var(--color-business-primary);
  font-weight: var(--font-weight-bold);
}

.process-steps__arrow {
  position: relative;
  width: 1px;
  height: var(--space-sm);
  border-inline-start: 1.5px dashed color-mix(in srgb, var(--color-secondary) 36%, transparent);
}

/* Bug fix: this chevron is a purely visual "points down" shape, not tied
   to text direction — it used logical border-inline-end/border-block-end,
   which resolve to left+bottom in this RTL page and rotate into a shape
   that does NOT point down. Physical border-right/border-bottom is the
   correct pairing for a down-chevron regardless of direction. */
.process-steps__arrow::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid color-mix(in srgb, var(--color-secondary) 36%, transparent);
  border-bottom: 1.5px solid color-mix(in srgb, var(--color-secondary) 36%, transparent);
  transform: translateX(-50%) rotate(45deg);
}

/* Bug fix: `.process-steps li` is a grid item (default align-items:stretch
   makes every <li> the full row height already), but flex column children
   don't stretch to fill their parent by default — so each card was only
   as tall as its own 1-or-2-line description, making the row uneven.
   flex-grow:1 makes every card fill the (already-equal) <li> height. */
.process-steps__card {
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-sm);
  background-color: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 10%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-sm);
}

.process-steps__divider {
  width: 1.25rem;
  height: 0;
  border-block-start: 1px solid color-mix(in srgb, var(--color-secondary) 20%, transparent);
}

.process-steps__title {
  font-size: var(--font-size-body-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-business-primary);
}

.process-steps__desc {
  font-size: var(--font-size-body-sm);
  line-height: 2;
  color: color-mix(in srgb, var(--color-secondary) 72%, transparent);
}

/* Pricing — CONFIRMED (Section-Coninue-3.md, Frame 1890164747/1890164668):
   2 pricing cards + a separate info/contact card, laid out as one row. */
.pricing-layout {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

@media (max-width: 1024px) {
  .pricing-layout {
    flex-direction: column;
  }
}

.pricing-grid {
  flex: 1.4;
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

@media (max-width: 640px) {
  .pricing-grid {
    flex-direction: column;
  }
}

.pricing-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 12%, transparent);
  border-radius: 14px;
  padding: var(--space-sm);
  padding-block-start: var(--space-md);
}

.pricing-card--popular {
  flex: 1.1;
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-lg);
}

.pricing-card__head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2xs);
  padding-inline: var(--space-2xs);
}

.pricing-card__head-line {
  flex: 1;
  height: 1px;
  background-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);
}

.pricing-card__name {
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-business-primary);
}

.pricing-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2xs);
  padding-inline: var(--space-2xs);
  padding-inline-end: 2.75rem; /* clears the ribbon icon hanging above (bug.md) */
}

.pricing-card__badge {
  background-color: #fcf7ee;
  border: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  font-size: var(--font-size-body-sm);
  padding: var(--space-3xs) var(--space-sm);
  border-radius: 10px;
  margin-inline-end: 15px;
}

/* Corner ribbon icon — CONFIRMED small tab hanging above the card,
   overlapping the top edge */
.pricing-card__ribbon {
  position: absolute;
  top: -0.05rem;
  inset-inline-end: var(--space-md);
  width: 1.75rem;
  height: 2.2rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-block-end: var(--space-3xs);
  background-color: color-mix(in srgb, var(--color-secondary) 6%, transparent);
  border-radius: 0 0 6px 6px;
}

.pricing-card__ribbon--gold {
  inset-inline-end: var(--space-lg);
  width: 2.25rem;
  height: 3.25rem;
}

.pricing-card__panel {
  position: relative;
  overflow: hidden;
  margin-block-start: var(--space-sm);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background-color: #f6f7f8;
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}

.pricing-card__price {
  position: relative;
  z-index: 1;
  font-size: var(--font-size-heading-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-business-primary);
}

.pricing-card__price span {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.pricing-card__chip {
  background-color: color-mix(in srgb, var(--color-secondary) 5%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  text-align: center;
  font-size: var(--font-size-body-sm);
  color: var(--color-business-primary);
}

.pricing-card__divider {
  position: relative;
  height: 1px;
  background-color: color-mix(in srgb, var(--color-secondary) 16%, transparent);
}

.pricing-card__divider span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f6f7f8;
  padding-inline: var(--space-2xs);
  color: var(--color-business-primary);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.pricing-card__features li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-business-primary);
}

.pricing-card__cta {
  margin-block-start: auto;
}

/* Info/contact card — CONFIRMED (Frame 1890164668) */
.pricing-info {
  position: relative;
  overflow: hidden;
  flex: 1;
  background-color: #f6f7f8;
  border: 1px solid color-mix(in srgb, var(--color-secondary) 7%, transparent);
  border-radius: 20px;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);
}

.pricing-info::before {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
  width: 7rem;
  height: 7rem;
  background-image: radial-gradient(color-mix(in srgb, var(--color-secondary) 22%, transparent) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(circle at 100% 100%, black 0%, transparent 75%);
  mask-image: radial-gradient(circle at 100% 100%, black 0%, transparent 75%);
  pointer-events: none;
}

.pricing-info__title {
  justify-content: flex-start;
}

/* Bug fix: this bar must sit flush against the card's own right edge
   (no gap, confirmed via image-1.png) — it was pulled with a negative
   margin on the wrong side (`margin-inline-end`, which is the LEFT edge
   in this RTL page), so the visible gap was on the right, the side that
   actually needed to close. `margin-inline-start` is the right side here. */
.pricing-info__contact {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  background-color: color-mix(in srgb, var(--color-secondary) 5%, transparent);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  margin-inline-start: calc(var(--space-lg) * -1);
}

.pricing-info__team {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pricing-info__label {
  font-weight: var(--font-weight-bold);
  color: var(--color-business-primary);
  white-space: nowrap;
}

/* Bug fix: `flex-direction: row-reverse` flipped which end of the RTL
   row the DOM-first item (the call badge) lands on, sending it to the
   physical LEFT instead of the RIGHT — removed, plain `row` already
   puts the DOM-first item on the right in RTL, which is what's needed
   here (call badge front-right, 2 photos stacked behind it to the left,
   confirmed via image.png). */
.pricing-info__avatars {
  display: flex;
}

.pricing-info__avatar {
  position: relative; /* z-index is a no-op without this */
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-white);
  margin-inline-start: -0.7rem;
}

.pricing-info__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pricing-info__avatar--call {
  z-index: 2;
  background-color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: 0;
}

.pricing-info__avatar--call img {
  width: 20px;
  height: 20px;
}

.pricing-info__avatar--a {
  z-index: 1;
}

.pricing-info__avatar--b {
  z-index: 0;
}

.pricing-info__phone {
  background-color: var(--color-white);
  border-radius: var(--radius-full);
  padding: var(--space-2xs) var(--space-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  white-space: nowrap;
}

/* Mini ticker-bars — CONFIRMED navy/gold, same family as .home-ticker */
.mini-ticker {
  padding-block: var(--space-2xs);
  margin-block-start: var(--space-md);
  border-radius: var(--radius-sm);
}

.mini-ticker--navy {
  background-color: var(--color-secondary);
}

.mini-ticker--gold {
  background-color: var(--color-primary);
}

.mini-ticker__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  color: var(--color-white);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   About card — CONFIRMED (درباره-آنلاین-پیامک.MD "Frame 1890165081").
   Grid columns approximate the confirmed 403 / 520 / 195 widths. DOM
   order (text, video, stats) already renders correctly right→left in
   this RTL project without needing any `order` overrides.
   ========================================================================== */

.about-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2.6fr) minmax(0, 1fr);
  gap: 40px; /* CONFIRMED exact value */
  align-items: center;
  background-color: #f6f7f8; /* CONFIRMED, same one-off hex as the phone mockup */
  border: 1px solid color-mix(in srgb, var(--color-secondary) 7%, transparent); /* CONFIRMED alpha */
  border-radius: 20px; /* CONFIRMED */
  padding: 40px; /* CONFIRMED */
}

@media (max-width: 1024px) {
  .about-card {
    grid-template-columns: 1fr;
    padding: var(--space-md);
    gap: var(--space-md);
  }
}

/* Decorative dot pattern, top-right corner (polish2.md #1) */
.about-card--dotted::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 115px;
  height: 92px;
  background-image: url("../../assets/images/dots-grid.svg");
  background-repeat: no-repeat;
  pointer-events: none;
}

/*
 * Fixed 2026-08-19: text-align alone wasn't reliably right-aligning the
 * button (a flex item's own box position isn't controlled by an
 * ancestor's text-align). Explicit flex column + align-items:flex-end
 * matches the confirmed structure exactly ("Frame 1890164646": column,
 * align-items:flex-end, gap 32px between the text-block and the button).
 */
.about-card__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px; /* CONFIRMED */
  text-align: start;
}

.about-card__text-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm); /* CONFIRMED: 16px */
}

.about-card__text .feature-split__title-row {
  justify-content: flex-start;
}

.about-card__text .feature-split__title-row .feature-split__pill {
  display: inline-block;
  vertical-align: middle;
  margin-inline-end: var(--space-2xs);
}

.about-card__title-plain {
  margin-inline-end: var(--space-2xs);
}

/* CTA button — CONFIRMED exact size ("Frame 20": 158x48, padding 0 24px) */
.about-card__cta {
  width: 158px;
  height: 48px;
  padding-inline: 24px;
  flex-shrink: 0;
}

.about-card__video {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  line-height: 0;
}

.about-card__video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-card__play {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  border: 1.5px solid var(--color-white);
  border-radius: var(--radius-full);
  cursor: pointer;
}

.about-card__play-icon {
  width: 0;
  height: 0;
  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent;
  border-inline-end: 0.75rem solid var(--color-white);
  margin-inline-end: 0.15rem;
}

.about-card__stats {
  display: flex;
  flex-direction: column;
  gap: 20px; /* CONFIRMED: Figma "Frame 1261156655" gap:20px */
  height: 100%;
}

.about-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 20px; /* CONFIRMED: Figma "Frame 1261156609" padding:20px */
  text-align: center;
}

.about-stat__number {
  font-size: 18px; /* CONFIRMED */
  font-weight: var(--font-weight-bold);
  color: var(--color-business-primary);
}

.about-stat__divider {
  width: 2rem;
  height: 1px;
  background-color: color-mix(in srgb, var(--color-business-primary) 16%, transparent); /* CONFIRMED alpha */
}

.about-stat__label {
  font-size: var(--font-size-body-sm);
  color: color-mix(in srgb, var(--color-business-primary) 64%, transparent); /* CONFIRMED alpha, "Business/Text gray" */
}

/* ==========================================================================
   Standard section title — CONFIRMED reusable pattern (image copy 3.png +
   "Frame 1890164703"/"Frame 1890164650", 2026-08-19): every major section
   heading uses this — flanking gold tick+line decorations, two-tone text
   (navy + gold), soft gold highlight behind the gold portion. Modular on
   purpose: used by Trust, Process-steps, Pricing, and the comparison
   table headings — retrofitted onto all of them, replacing their earlier
   ad-hoc/one-off styling.
   ========================================================================== */

.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-block-end: var(--space-md);
}

.section-title__deco {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.section-title__tick {
  width: 3px;
  height: 1.9rem;
  flex-shrink: 0;
  background-color: var(--color-primary);
  border-radius: 2px;
}

.section-title__line {
  width: 5rem;
  height: 1px;
  background-color: var(--color-border);
}

@media (max-width: 768px) {
  .section-title__deco {
    display: none;
  }
}

.section-title__text {
  font-size: var(--font-size-heading-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-business-primary);
}

.section-title__gold {
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  padding-inline: var(--space-2xs);
}

/* "قابلیت های پنل سیستم خودکار فروش" — CONFIRMED (section-jadid 2.md,
   Frame 1890164860): 4 cards in a 2x2 grid + 1 tall card, each with a
   mini phone-mockup and a gold circular badge overlapping its corner. */
.feature-panels {
  display: flex;
  align-items: stretch;
  gap: var(--space-md);
}

@media (max-width: 1024px) {
  .feature-panels {
    flex-direction: column;
  }
}

.feature-panels__grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

@media (max-width: 640px) {
  .feature-panels__grid {
    grid-template-columns: 1fr;
  }
}

.feature-panel-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background-color: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 10%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.feature-panel-card--tall {
  flex: 0 0 19rem;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: var(--space-xl);
  padding-block: var(--space-xl);
}

@media (max-width: 1024px) {
  .feature-panel-card--tall {
    flex-basis: auto;
  }
}

.feature-panel-card__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.feature-panel-card__title {
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.feature-panel-card__desc {
  font-size: var(--font-size-body-sm);
  line-height: 1.9;
  color: color-mix(in srgb, var(--color-secondary) 72%, transparent);
}

.feature-panel-card__phone {
  position: relative;
  flex-shrink: 0;
}

.feature-panel-card__frame {
  position: relative;
  width: 10.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  background-color: #f6f7f8;
  border: 1px solid var(--color-secondary);
  border-radius: 20px;
  padding: var(--space-md) var(--space-sm) var(--space-sm);
}

.feature-panel-card__notch {
  width: 2rem;
  height: auto;
}

.feature-panel-card__icon {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--color-secondary) 16%, transparent);
  border-radius: var(--radius-md);
}

.feature-panel-card__icon--muted {
  background-color: color-mix(in srgb, var(--color-secondary) 7%, transparent);
  border: none;
}

.feature-panel-card__icon-row {
  display: flex;
  gap: var(--space-2xs);
}

.feature-panel-card__skeleton {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: var(--radius-full);
  background-color: color-mix(in srgb, var(--color-secondary) 7%, transparent);
}

.feature-panel-card__skeleton--sm {
  width: 72%;
}

.feature-panel-card__skeleton--xs {
  width: 45%;
}

.feature-panel-card__screen,
.feature-panel-card__chart-box {
  width: 100%;
  background-color: color-mix(in srgb, var(--color-secondary) 5%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.feature-panel-card__screen-title {
  font-size: 0.7rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-business-primary);
}

.feature-panel-card__screen-code {
  font-size: 0.6rem;
  color: var(--color-text-muted);
}

.feature-panel-card__screen-btn {
  margin-block-start: var(--space-3xs);
  background-color: color-mix(in srgb, var(--color-secondary) 8%, transparent);
  border-radius: var(--radius-sm);
  padding-block: var(--space-3xs);
  font-size: 0.7rem;
  color: var(--color-business-primary);
}

.feature-panel-card__thumbs {
  display: flex;
  gap: var(--space-2xs);
  width: 100%;
}

.feature-panel-card__thumbs img {
  flex: 1;
  width: 0; /* let flex:1 drive the width, aspect-ratio drives the height */
  aspect-ratio: 1;
  object-fit: contain;
  background-color: color-mix(in srgb, var(--color-secondary) 5%, transparent);
  border-radius: var(--space-2xs);
}

.feature-panel-card__caption {
  font-size: 0.7rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-business-primary);
}

.feature-panel-card__chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 2.5rem;
  margin-block-start: var(--space-2xs);
}

.feature-panel-card__chart span {
  flex: 1;
  background-color: color-mix(in srgb, var(--color-secondary) 8%, transparent);
  border-radius: 3px;
}

.feature-panel-card__chart span.is-active {
  background-color: var(--color-primary);
}

.feature-panel-card__badge {
  position: absolute;
  z-index: 2;
  bottom: -0.6rem;
  inset-inline-start: -0.6rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  border: 3px solid var(--color-white);
  border-radius: var(--radius-full);
  transform: rotate(22deg);
}

/* ==========================================================================
   Success stories — CONFIRMED (Continue-Home.md, "Frame 1890164668"): 3
   white result cards beside a text block + carousel-nav (reused as-is,
   its 40x40/10px-radius buttons already match the Figma spec exactly).
   ========================================================================== */

.success-stories {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-md);
  background-color: #f6f7f8;
  border: 1px solid color-mix(in srgb, var(--color-secondary) 7%, transparent);
  border-radius: 20px;
  padding: var(--space-lg) 48px var(--space-lg) var(--space-lg); /* CONFIRMED: 32px 48px 32px 32px */
}

@media (max-width: 1024px) {
  .success-stories {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-md);
  }
}

.success-stories__decoration {
  position: absolute;
  top: 0;
  right: 0;
  width: 130px;
  height: 105px;
  background-image: url("../../assets/images/dots-fade.svg");
  background-repeat: no-repeat;
  background-position: top right;
  pointer-events: none;
}

.success-stories__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  width: 305px;
  flex-shrink: 0;
  text-align: start;
}

.success-stories__title-row {
  justify-content: flex-start;
}

.success-stories__nav {
  justify-content: flex-start;
}

.success-stories__cards {
  display: flex;
  align-items: stretch;
  gap: var(--space-md);
  flex: 1;
}

@media (max-width: 768px) {
  .success-stories__cards {
    flex-direction: column;
  }
}

.story-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  text-align: start;
}

.story-card__header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
}

.story-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
}

.story-card__brand {
  font-size: var(--font-size-body-md);
  color: var(--color-business-primary);
}

.story-card__brand-desc {
  font-size: var(--font-size-body-sm);
  color: color-mix(in srgb, var(--color-business-primary) 48%, transparent);
}

.story-card__logo {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 10px;
}

.story-card__divider {
  width: 100%;
  height: 1px;
  background-color: color-mix(in srgb, var(--color-business-primary) 12%, transparent);
}

.story-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  text-align: center;
}

.story-card__percent {
  font-size: 28px; /* CONFIRMED */
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.story-card__title {
  font-size: var(--font-size-body-lg);
  font-weight: 600; /* CONFIRMED */
  color: var(--color-business-primary);
}

.story-card__desc {
  font-size: var(--font-size-body-md);
  line-height: 1.7;
  color: color-mix(in srgb, var(--color-business-primary) 72%, transparent);
}

/* ==========================================================================
   Comparison table — CONFIRMED (Continue-Home2.md, "Frame 1890164846"):
   white card wrapper, gold-bordered highlight box around the "آنلاین
   پیامک" column (built with collapsed cell borders rather than an
   absolutely-positioned overlay — same visual result, no column-width
   math needed), gold star badge floating on the header's top edge.
   ========================================================================== */

.compare-table {
  background-color: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 10%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  padding-block-start: calc(var(--space-md) + 1rem);
}

.compare-table .table-scroll {
  /* CONFIRMED bug fix: overflow-x:auto paired with overflow-y:visible
     still computes overflow-y to "auto" (clipping) per spec — the pair
     must both be visible or the star badge poking above the table gets
     clipped. Horizontal scroll is restored below 640px, where a clipped
     badge is the lesser problem versus an unscrollable wide table. */
  overflow: visible;
}

@media (max-width: 640px) {
  .compare-table .table-scroll {
    overflow-x: auto;
    overflow-y: auto;
  }
}

.compare-table__badge {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  border: 3px solid var(--color-white);
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%) rotate(20deg);
}

.table--highlight-col {
  border-collapse: separate;
  border-spacing: 0;
}

.table--highlight-col th,
.table--highlight-col td {
  border-bottom: 1px solid color-mix(in srgb, var(--color-secondary) 10%, transparent);
}

.table--highlight-col thead th {
  background-color: color-mix(in srgb, var(--color-secondary) 4%, transparent);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.table--highlight-col thead th:first-child,
.table--highlight-col tbody td:first-child {
  text-align: start;
}

.table--highlight-col thead th:first-child {
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}

.table--highlight-col td:not(:first-child) {
  text-align: center;
}

.table--highlight-col td img {
  margin-inline: auto;
}

.table--highlight-col td:nth-child(2),
.table--highlight-col th:nth-child(2) {
  background-color: transparent;
  color: var(--color-primary);
  border-inline: 1.5px solid var(--color-primary);
}

.table--highlight-col th:nth-child(2) {
  position: relative;
}

.table--highlight-col thead th:nth-child(2) {
  border-block-start: 1.5px solid var(--color-primary);
}

.table--highlight-col tbody tr:last-child td:nth-child(2) {
  border-block-end: 1.5px solid var(--color-primary);
}

/* ==========================================================================
   Automation campaigns — CONFIRMED (Continue-Home3.md, "Frame 1890164894"):
   3x2 card grid beside a pill-list sidebar. The grid's leftmost column is
   a deliberate slider-preview cut (reduced opacity + white fade mask +
   a "more" arrow button) — not a bug, see the task note.
   ========================================================================== */

.automation {
  display: flex;
  align-items: stretch;
  gap: var(--space-md);
}

@media (max-width: 1024px) {
  .automation {
    flex-direction: column;
  }
}

.automation__grid {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

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

.automation-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background-color: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 10%, transparent);
  border-radius: var(--radius-lg);
  text-align: start;
}

.automation-card--active {
  border: 1px solid var(--color-secondary);
}

.automation-card--faded {
  opacity: 0.45;
}

.automation-card__decoration {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 90px;
  background-image: url("../../assets/images/dots-fade.svg");
  background-repeat: no-repeat;
  pointer-events: none;
}

.automation-card__icon {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  border: 1px solid color-mix(in srgb, var(--color-secondary) 12%, transparent);
  border-radius: var(--radius-md);
}

.automation-card__body {
  width: 100%;
  text-align: center;
}

.automation-card__title {
  font-size: var(--font-size-body-md);
  font-weight: 600; /* CONFIRMED */
  color: var(--color-business-primary);
}

.automation-card__desc {
  margin-block-start: var(--space-2xs);
  font-size: var(--font-size-body-sm);
  color: color-mix(in srgb, var(--color-business-primary) 72%, transparent);
}

.automation-card__divider {
  width: 100%;
  height: 1px;
  background-color: color-mix(in srgb, var(--color-business-primary) 12%, transparent);
}

.automation-card__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  width: 100%;
  font-size: var(--font-size-body-md);
  font-weight: 600; /* CONFIRMED */
  color: var(--color-primary);
}

.automation__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(to left, transparent, var(--color-white) 85%);
  pointer-events: none;
}

.automation__more {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 10%, transparent);
  border-radius: var(--radius-full);
  cursor: pointer;
}

.automation__side {
  flex-shrink: 0;
  width: 18.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@media (max-width: 1024px) {
  .automation__side {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.automation-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-md);
  min-height: 3.5rem;
  background-color: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 10%, transparent);
  border-radius: var(--radius-full);
  font-size: var(--font-size-body-md);
  color: var(--color-business-primary);
  text-align: center;
}

.automation-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding: var(--space-md);
  background-color: var(--color-secondary);
  border-radius: var(--radius-lg);
  text-align: start;
}

.automation-stat__value {
  font-size: 28px; /* CONFIRMED */
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.automation-stat__label {
  font-size: var(--font-size-body-sm);
  color: color-mix(in srgb, var(--color-white) 72%, transparent);
}

/* ==========================================================================
   WordPress plugin promo banner — CONFIRMED (Continue-Home4.md,
   "Frame 1890164898"): gold CTA bar + floating white button + a clipped
   phone-mockup peek on the right.
   ========================================================================== */

.wp-promo {
  position: relative;
  height: 231px; /* CONFIRMED */
  overflow: hidden;
}

.wp-promo__bar {
  position: absolute;
  inset-inline: 0;
  top: 84px; /* CONFIRMED */
  height: 147px; /* CONFIRMED */
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-inline: var(--space-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 85%, white), var(--color-primary));
  border-radius: var(--radius-lg);
}

.wp-promo__decoration {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  bottom: 0;
  width: 12rem;
  background-image: radial-gradient(rgba(255, 255, 255, 0.4) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(circle at 100% 30%, black 0%, transparent 70%);
  mask-image: radial-gradient(circle at 100% 30%, black 0%, transparent 70%);
  pointer-events: none;
}

.wp-promo__text {
  position: relative;
  z-index: 1;
  margin-inline-start: auto;
  font-size: 26px; /* CONFIRMED */
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
}

.wp-promo__ring {
  position: absolute;
  inset-inline-start: 3rem;
  bottom: -4rem;
  width: 12rem;
  height: 12rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-full);
  pointer-events: none;
}

.wp-promo__ring::before {
  content: "";
  position: absolute;
  inset: 1.5rem;
  border: 1px dashed rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-full);
}

.wp-promo__ring-dot {
  position: absolute;
  top: 4.5rem;
  inset-inline-start: 0;
  width: 12px;
  height: 12px;
  background-color: var(--color-white);
  border-radius: var(--radius-full);
}

.wp-promo__cta {
  position: absolute;
  z-index: 2;
  top: 45.5px; /* CONFIRMED */
  inset-inline-end: 52px; /* CONFIRMED */
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  height: 56px; /* CONFIRMED */
  padding-inline: var(--space-md);
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-regular);
  color: var(--color-business-primary);
  box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
  .wp-promo__cta {
    position: static;
    display: inline-flex;
    margin-block-end: var(--space-sm);
  }

  .wp-promo__bar {
    position: static;
    height: auto;
    padding-block: var(--space-md);
  }
}

.wp-promo__phone {
  position: absolute;
  z-index: 1;
  inset-inline-start: 60px;
  top: 36px;
  width: 256px;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .wp-promo__phone {
    display: none;
  }
}

.wp-promo__phone-frame {
  position: relative;
  width: 100%;
  background-color: #f6f7f8;
  border: 1.3px solid var(--color-secondary);
  border-block-end: none;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-md) var(--space-sm) 0;
}

.wp-promo__notice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-start: var(--space-md);
  padding: var(--space-2xs);
  background-color: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 8%, transparent);
  border-radius: var(--radius-lg);
}

.wp-promo__notice-icon {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-radius: 10px;
}

.wp-promo__notice-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.wp-promo__notice-text p {
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  color: var(--color-business-primary);
}

.wp-promo__notice-line {
  width: 100%;
  height: 5px;
  background-color: color-mix(in srgb, var(--color-secondary) 7%, transparent);
  border-radius: var(--radius-full);
}

.wp-promo__notice-line--short {
  width: 56%;
}

.wp-promo__notice-badge {
  position: absolute;
  top: -16px;
  inset-inline-start: -11px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-secondary);
  border: 2px solid var(--color-white);
  border-radius: var(--radius-full);
  transform: rotate(-31deg);
}

.wp-promo__stat {
  position: relative;
  margin-block-start: var(--space-md);
  padding: 1.75rem var(--space-sm) var(--space-sm);
  background-color: color-mix(in srgb, var(--color-secondary) 5%, transparent);
  border-radius: 19px 19px 0 0;
  text-align: center;
}

.wp-promo__stat-badge {
  position: absolute;
  top: -15px;
  inset-inline-start: -11px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  border: 2px solid var(--color-white);
  border-radius: var(--radius-full);
  transform: rotate(-31deg);
}

.wp-promo__wp-badge {
  position: absolute;
  top: 3px;
  inset-inline-end: 21px;
  width: 23px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-secondary);
  border: 1.5px solid var(--color-white);
  border-radius: var(--radius-full);
}

.wp-promo__stat-label {
  font-size: 13px;
  color: color-mix(in srgb, var(--color-business-primary) 64%, transparent);
}

.wp-promo__stat-value {
  margin-block-start: 2px;
  font-size: 14px;
  font-weight: 600; /* CONFIRMED */
  color: var(--color-business-primary);
}

.wp-promo__stat-btn {
  margin-block-start: var(--space-sm);
  width: 100%;
  height: 41px;
  background-color: color-mix(in srgb, var(--color-secondary) 7%, transparent);
  border-radius: 11px;
  font-size: var(--font-size-body-sm);
  color: var(--color-business-primary);
}

/* ==========================================================================
   Customer-success videos — CONFIRMED (Continue-Home5.md, "Frame 1890164921")
   ========================================================================== */

.testimonials {
  display: flex;
  align-items: stretch;
  gap: var(--space-md);
}

@media (max-width: 1024px) {
  .testimonials {
    flex-direction: column;
  }
}

.testimonials__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 26.125rem;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .testimonials__side {
    width: 100%;
  }
}

.testimonial-stats {
  position: relative;
  overflow: hidden;
  flex: 1;
  padding: var(--space-lg);
  background-color: #f6f7f8;
  border: 1px solid color-mix(in srgb, var(--color-secondary) 7%, transparent);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
}

.testimonial-stats__decoration {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: 8rem;
  height: 6rem;
  background-image: url("../../assets/images/dots-fade.svg");
  background-repeat: no-repeat;
  pointer-events: none;
}

.testimonial-stats__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.testimonial-stats__ring {
  flex-shrink: 0;
  width: 6rem;
  height: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
}

.testimonial-stats__ring-value {
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-business-primary);
}

.testimonial-stats__ring-label {
  font-size: var(--font-size-body-sm);
  color: color-mix(in srgb, var(--color-business-primary) 72%, transparent);
}

.testimonial-stats__head-text {
  flex: 1;
}

.testimonial-stats__eyebrow {
  font-size: var(--font-size-body-md);
  color: color-mix(in srgb, var(--color-business-primary) 72%, transparent);
}

.testimonial-stats__title {
  margin-block-start: var(--space-2xs);
  font-size: var(--font-size-body-lg);
  font-weight: 600; /* CONFIRMED */
  color: var(--color-business-primary);
}

.testimonial-stats__icon {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
}

.testimonial-stats__divider {
  height: 1px;
  background-color: color-mix(in srgb, var(--color-secondary) 10%, transparent);
}

.testimonial-stats__row {
  display: flex;
  justify-content: space-between;
}

.testimonial-stats__item {
  text-align: center;
}

.testimonial-stats__value {
  font-size: var(--font-size-body-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-business-primary);
}

.testimonial-stats__label {
  margin-block-start: var(--space-2xs);
  font-size: var(--font-size-body-sm);
  color: color-mix(in srgb, var(--color-business-primary) 72%, transparent);
}

.testimonial-cta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  padding-inline-start: var(--space-2xs);
  background-color: var(--color-secondary);
  border-radius: 20px;
}

.testimonial-cta__text {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: 600; /* CONFIRMED */
  color: var(--color-white);
}

.testimonials__videos {
  flex: 1;
  display: flex;
  gap: var(--space-md);
}

@media (max-width: 640px) {
  .testimonials__videos {
    flex-direction: column;
  }
}

.testimonial-video {
  position: relative;
  flex: 1;
  min-height: 24.7rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.testimonial-video img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  border: 1.5px solid var(--color-white);
  border-radius: var(--radius-full);
  cursor: pointer;
}

.testimonial-video__play span {
  width: 0;
  height: 0;
  border-top: 0.55rem solid transparent;
  border-bottom: 0.55rem solid transparent;
  border-inline-end: 0.85rem solid var(--color-white);
  margin-inline-end: 0.15rem;
}

.testimonial-video__caption {
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  bottom: 18px;
  width: 271px;
  margin-inline: auto;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  text-align: center;
}

.testimonial-video__name {
  font-weight: 600; /* CONFIRMED */
  color: var(--color-business-primary);
}

.testimonial-video__desc {
  margin-block-start: var(--space-2xs);
  font-size: var(--font-size-body-sm);
  color: color-mix(in srgb, var(--color-business-primary) 72%, transparent);
}

.testimonials__strip {
  position: relative;
  flex-shrink: 0;
  width: 5.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@media (max-width: 1024px) {
  .testimonials__strip {
    display: none;
  }
}

.testimonials__strip-avatar {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.testimonials__strip-fade {
  position: absolute;
  inset-inline: 0;
  height: 4rem;
  pointer-events: none;
  z-index: 1;
}

.testimonials__strip-fade--top {
  top: 0;
  background: linear-gradient(to bottom, var(--color-white), transparent);
}

.testimonials__strip-fade--bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--color-white), transparent);
}

.testimonials__strip-arrow {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  margin-inline: auto;
  width: 2.4375rem;
  height: 2.4375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.testimonials__strip-arrow--up {
  top: -1.2rem;
}

.testimonials__strip-arrow--down {
  bottom: -1.2rem;
}

.testimonials__strip-arrow--up img {
  transform: rotate(180deg);
}

/* ==========================================================================
   Closing CTA cards — CONFIRMED (Continue-Home6.md, "Frame 1890164925")
   ========================================================================== */

.cta-cards {
  display: flex;
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .cta-cards {
    flex-direction: column;
  }
}

.cta-card {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-xl);
  background-color: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 10%, transparent);
  border-radius: var(--radius-lg);
  text-align: start;
}

.cta-card__decoration {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: 9rem;
  height: 7rem;
  background-image: url("../../assets/images/dots-fade.svg");
  background-repeat: no-repeat;
  pointer-events: none;
}

.cta-card__illustration {
  position: absolute;
  z-index: 1;
  bottom: 2.4rem;
  inset-inline-end: 1.65rem;
  width: 6.3rem;
  height: auto;
  pointer-events: none;
}

@media (max-width: 640px) {
  .cta-card__illustration {
    display: none;
  }
}

.cta-card__dot {
  position: absolute;
  z-index: 1;
  border-radius: var(--radius-full);
  pointer-events: none;
}

.cta-card__dot--navy {
  width: 8px;
  height: 8px;
  bottom: 6.3rem;
  inset-inline-end: 8.6rem;
  background-color: var(--color-secondary);
}

.cta-card__dot--gold {
  width: 5.62px;
  height: 5.62px;
  bottom: 2.5rem;
  inset-inline-end: 2.8rem;
  background-color: color-mix(in srgb, var(--color-primary) 36%, transparent);
}

.cta-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.cta-card__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
}

.cta-card__divider span {
  width: 4.7rem;
  height: 1px;
  background-color: var(--color-border);
}

.cta-card__divider i {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
}

.cta-card__title {
  font-size: var(--font-size-heading-md); /* CONFIRMED: 22px */
  font-weight: 600; /* CONFIRMED */
  color: var(--color-business-primary);
}

.cta-card__desc {
  color: color-mix(in srgb, var(--color-business-primary) 72%, transparent);
}

/* ==========================================================================
   AI campaign builder — CONFIRMED (Continue-Home8.md, "Frame 1890165074")
   ========================================================================== */

.ai-campaign {
  display: flex;
  align-items: stretch;
  gap: var(--space-md);
}

@media (max-width: 1024px) {
  .ai-campaign {
    flex-direction: column;
  }
}

.ai-campaign__arrow {
  flex-shrink: 0;
  align-self: center;
  width: 20px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='16' viewBox='0 0 20 16'%3E%3Cpath d='M8 8H18' stroke='%23102E50' stroke-opacity='0.36' stroke-width='1.5' stroke-dasharray='3 4' stroke-linecap='round'/%3E%3Cpath d='M2 8L8 4V12L2 8Z' fill='%23102E50' fill-opacity='0.36'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

@media (max-width: 1024px) {
  .ai-campaign__arrow {
    display: none;
  }
}

.ai-card {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-sm);
  background-color: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 10%, transparent);
  border-radius: var(--radius-lg);
  text-align: start;
}

.ai-card__decoration {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 7rem;
  height: 6rem;
  background-image: url("../../assets/images/dots-fade.svg");
  background-repeat: no-repeat;
  transform: scaleX(-1);
  pointer-events: none;
}

.ai-card__head {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.ai-card__icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--color-secondary) 12%, transparent);
  border-radius: 10px;
}

.ai-card__title {
  font-size: var(--font-size-body-md);
  font-weight: 600; /* CONFIRMED */
  color: var(--color-business-primary);
}

.ai-campaign__field {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
}

.ai-campaign__field label {
  font-size: var(--font-size-body-sm);
  color: color-mix(in srgb, var(--color-business-primary) 56%, transparent);
}

.ai-campaign__input {
  width: 100%;
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 10%, transparent);
  border-radius: 8px;
  color: var(--color-business-primary);
}

.ai-campaign__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.ai-campaign__tag {
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-body-sm);
  color: var(--color-business-primary);
  background-color: color-mix(in srgb, var(--color-secondary) 5%, transparent);
}

.ai-campaign__tag--outline {
  background-color: transparent;
  border: 1px solid color-mix(in srgb, var(--color-secondary) 10%, transparent);
}

.ai-campaign__preview {
  width: 100%;
  padding: var(--space-sm);
  background-color: color-mix(in srgb, var(--color-secondary) 4%, transparent);
  border-radius: 10px;
  font-size: var(--font-size-body-sm);
  line-height: 2;
  color: var(--color-business-primary);
}

.ai-users {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--color-secondary) 10%, transparent);
  border-radius: 10px;
  overflow: hidden;
}

.ai-users__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-body-sm);
  color: var(--color-business-primary);
}

.ai-users__row:not(:last-child):not(.ai-users__row--head) {
  border-block-end: 1px solid color-mix(in srgb, var(--color-secondary) 10%, transparent);
}

.ai-users__row--head {
  background-color: color-mix(in srgb, var(--color-secondary) 7%, transparent);
  font-weight: 600; /* CONFIRMED */
}

.ai-users__more {
  padding: var(--space-2xs) var(--space-sm);
  text-align: center;
  font-size: var(--font-size-body-sm);
  color: color-mix(in srgb, var(--color-business-primary) 56%, transparent);
}

.ai-prompt {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background-color: color-mix(in srgb, var(--color-secondary) 4%, transparent);
  border-radius: 10px;
}

.ai-prompt__placeholder {
  font-size: var(--font-size-body-sm);
  color: color-mix(in srgb, var(--color-business-primary) 56%, transparent);
}

.ai-prompt__text {
  font-size: var(--font-size-body-sm);
  line-height: 2;
  color: var(--color-business-primary);
}

.ai-prompt__cta {
  margin-block-start: auto;
  width: 100%;
  padding: var(--space-2xs);
  background-color: color-mix(in srgb, var(--color-secondary) 7%, transparent);
  border-radius: 8px;
  font-size: var(--font-size-body-sm);
  color: var(--color-business-primary);
}

/* ============================================================
   جدیدترین اخبار سایت — Home1.MD ("Frame 1890164955")
   ============================================================ */

.blog-news__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  margin-block-end: 2.75rem; /* CONFIRMED — Figma gap:44px */
}

.blog-news__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.125rem; /* CONFIRMED — Figma gap:18px */
}

.blog-news__title {
  font-size: var(--font-size-heading-md);
  font-weight: 600; /* CONFIRMED */
  color: var(--color-secondary);
}

.blog-news__gold {
  color: var(--color-primary);
}

.blog-news__subtitle {
  font-size: var(--font-size-body-md);
  color: color-mix(in srgb, var(--color-secondary) 72%, transparent);
}

.blog-news__controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.blog-news__nav {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.blog-news__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.blog-news__arrow--prev {
  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.blog-news__arrow--next {
  background-color: var(--color-primary);
}

.blog-news__arrow--next img {
  transform: scaleX(-1);
}

.blog-news__divider {
  width: 1px;
  height: 1.75rem;
  background-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);
}

.blog-news__all {
  font-size: var(--font-size-body-md);
  color: var(--color-secondary);
}

.blog-news__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem; /* CONFIRMED — Figma gap:20px */
}

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

@media (max-width: 640px) {
  .blog-news__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .blog-news__grid {
    grid-template-columns: 1fr;
  }
}

.blog-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 1.25rem; /* CONFIRMED — Figma padding:20px */
  background-color: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 10%, transparent);
  border-radius: var(--radius-lg);
  text-align: start;
}

.blog-card--dark {
  position: relative;
  color: var(--color-white);
  background-image: linear-gradient(0deg, rgba(16, 46, 80, 0.94), rgba(16, 46, 80, 0.94)), url("../../assets/images/blog-card-team.jpg");
  background-size: cover;
  background-position: center;
  border-color: transparent;
}

.blog-card__pill {
  padding: 0.5rem 1rem;
  font-size: var(--font-size-body-sm);
  color: var(--color-secondary);
  background-color: color-mix(in srgb, var(--color-secondary) 5%, transparent);
  border-radius: var(--radius-full);
}

.blog-card--dark .blog-card__pill {
  color: var(--color-secondary);
  background-color: var(--color-white);
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
}

.blog-card__title {
  font-size: var(--font-size-body-md);
  font-weight: 600; /* CONFIRMED */
  color: var(--color-secondary);
}

.blog-card--dark .blog-card__title {
  color: var(--color-white);
}

.blog-card__desc {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body);
  color: color-mix(in srgb, var(--color-secondary) 72%, transparent);
}

.blog-card--dark .blog-card__desc {
  color: rgba(255, 255, 255, 0.72);
}

.blog-card__divider {
  width: 100%;
  height: 1px;
  background-color: color-mix(in srgb, var(--color-secondary) 12%, transparent);
}

.blog-card--dark .blog-card__divider {
  background-color: rgba(255, 255, 255, 0.2);
}

.blog-card__link {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* CONFIRMED — physical left in RTL, matches reference */
  width: 100%;
  gap: var(--space-2xs);
  font-size: var(--font-size-body-md);
  font-weight: 600; /* CONFIRMED */
  color: var(--color-primary);
}

/* ============================================================
   پاسخگوی شما هستیم — Home2.MD ("Frame 1890165080")
   ============================================================ */

.support-banner {
  display: flex;
  align-items: stretch;
  gap: 1.25rem; /* CONFIRMED — Figma gap:20px */
}

@media (max-width: 1024px) {
  .support-banner {
    flex-direction: column;
  }
}

.support-banner__aside {
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* CONFIRMED — Figma gap:20px */
  width: 19.125rem; /* CONFIRMED — Figma width:306px */
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .support-banner__aside {
    width: 100%;
    flex-direction: row;
  }
}

@media (max-width: 640px) {
  .support-banner__aside {
    flex-direction: column;
  }
}

.support-banner__map {
  flex: 1;
  min-height: 12rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-secondary) 12%, transparent);
  border-radius: var(--radius-lg);
  filter: grayscale(1);
}

.support-banner__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.support-banner__hours {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding: var(--space-md);
  background-color: var(--color-secondary);
  border-radius: var(--radius-xl);
  text-align: start;
}

.support-banner__hours-title {
  font-size: var(--font-size-body-lg);
  font-weight: 600; /* CONFIRMED */
  color: var(--color-white);
}

.support-banner__hours-desc {
  font-size: var(--font-size-body-sm);
  font-weight: 700; /* CONFIRMED */
  color: var(--color-primary);
}

.support-banner__panel {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: color-mix(in srgb, var(--color-secondary) 3%, var(--color-white));
  border: 1px solid color-mix(in srgb, var(--color-secondary) 7%, transparent);
  border-radius: var(--radius-xl);
}

.support-banner__row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-lg) 0;
}

@media (max-width: 1024px) {
  .support-banner__row {
    flex-direction: column;
    align-items: center;
  }
}

.support-banner__photo-wrap {
  position: relative;
  flex-shrink: 0;
  width: 17.8125rem; /* CONFIRMED — Figma width:285px */
}

.support-banner__photo {
  position: relative;
  z-index: 1;
  width: 100%;
}

.support-banner__ring {
  position: absolute;
  z-index: 0;
  inset-inline-start: -6rem;
  bottom: 3rem;
  width: 17.5625rem; /* CONFIRMED — Figma width:281px */
  pointer-events: none;
}

.support-banner__dot {
  position: absolute;
  z-index: 0;
  top: 8.5rem;
  inset-inline-end: -2.5rem;
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--color-secondary) 24%, transparent);
  border-radius: var(--radius-full);
}

@media (max-width: 1024px) {
  .support-banner__photo-wrap {
    width: 100%;
    max-width: 20rem;
  }

  .support-banner__ring {
    inset-inline-start: 1rem;
  }
}

.support-banner__content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-lg);
  padding-block-end: var(--space-lg);
  text-align: end;
}

.support-banner__title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.support-banner__title h3 {
  font-size: var(--font-size-heading-md);
  font-weight: 600; /* CONFIRMED */
  color: var(--color-secondary);
}

.support-banner__gold {
  color: var(--color-primary);
}

.support-banner__tick {
  flex-shrink: 0;
  width: 1.625rem; /* CONFIRMED — Figma width:26px */
  height: 7px;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}

.support-banner__desc {
  max-width: 27rem;
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body);
  color: color-mix(in srgb, var(--color-secondary) 72%, transparent);
}

.support-banner__stats {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.support-banner__stat {
  text-align: end;
}

.support-banner__stat-title {
  font-size: var(--font-size-body-md);
  font-weight: 600; /* CONFIRMED */
  color: var(--color-secondary);
}

.support-banner__stat-desc {
  margin-block-start: var(--space-3xs);
  font-size: var(--font-size-body-sm);
  color: color-mix(in srgb, var(--color-secondary) 72%, transparent);
}

.support-banner__stat-divider {
  width: 1px;
  height: 2rem;
  background-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);
}

.support-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-size-body-lg);
}

.support-banner__card {
  position: relative;
  z-index: 1;
  margin: var(--space-lg);
  margin-block-start: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  background-color: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 10%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 640px) {
  .support-banner__card {
    flex-direction: column;
    align-items: stretch;
  }
}

.support-banner__card-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 0 0 auto;
}

.support-banner__card-text {
  text-align: start;
}

.support-banner__card-label {
  font-size: var(--font-size-body-md);
  font-weight: 600; /* CONFIRMED */
  color: var(--color-secondary);
}

.support-banner__card-value {
  margin-block-start: var(--space-3xs);
  font-size: var(--font-size-body-lg);
  font-weight: 600; /* CONFIRMED */
  color: var(--color-primary);
}

.support-banner__card-item:last-child .support-banner__card-value {
  color: var(--color-secondary);
}

.support-banner__card-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid color-mix(in srgb, var(--color-secondary) 12%, transparent);
  border-radius: var(--radius-md);
}

.support-banner__card-divider {
  align-self: stretch;
  width: 1px;
  background-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);
}