/* ============================================================
   Chemanca overrides on top of the SaasLyn index-2 template.
   Loaded LAST so it wins the cascade.

   index-2 ("home-two") is a LIGHT design by default (white surface,
   dark text). That light look IS the target style, so LIGHT is the
   default theme and needs no palette remap. This file layers on:
   Farsi/RTL, custom header controls (theme toggle, language switcher,
   mobile drawer), a testimonial marquee, and an optional DARK skin.
   ============================================================ */

/* ---------- Theme tokens (own, framework-agnostic) -------------- */
:root {
  --ch-text: #10192b;
  --ch-text-rgb: 16, 25, 43;
  --ch-muted: rgba(16, 25, 43, 0.62);
  --ch-surface: #ffffff;
  --ch-surface-2: #f3f5fd;
  --ch-border: rgba(16, 25, 43, 0.12);
  --ch-shadow: 0 20px 50px rgba(16, 25, 43, 0.14);

  /* Brand palette — Chemanca brand blue #2E44FC and neutral accent #e5e6e7. */
  --primary-color: #2E44FC;
  --primary-color-rgb: 46, 68, 252;
  --primary-color-2: #2E44FC;
  --primary-color-2-rgb: 46, 68, 252;
  --ch-accent: #e5e6e7;
  --ch-accent-rgb: 229, 230, 231;
  --ch-on-accent: #2E44FC;

  /* Bootstrap template defaults ship yellow warning — remap to brand blue. */
  --bs-yellow: #2E44FC;
  --bs-warning: #2E44FC;
  --bs-warning-rgb: 46, 68, 252;
}

html[data-theme="dark"] {
  --ch-text: #e5e5e5;
  --ch-text-rgb: 229, 229, 229;
  --ch-muted: rgba(229, 229, 229, 0.64);
  --ch-surface: #252527;
  --ch-surface-2: #2c2d2f;
  --ch-border: rgba(255, 255, 255, 0.12);
  --ch-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);

  /* Same brand colors in dark mode — blue #2E44FC, neutral accent #e5e6e7. */
  --primary-color: #2E44FC;
  --primary-color-rgb: 46, 68, 252;
  --primary-color-2: #2E44FC;
  --primary-color-2-rgb: 46, 68, 252;
  --ch-accent: #e5e6e7;
  --ch-accent-rgb: 229, 230, 231;
  --ch-on-accent: #2E44FC;
}

/* ---------- Fonts ------------------------------------------------ */
/* Latin locales keep the template's Urbanist/Inter. Farsi uses two
   self-hosted faces provided by next/font:
     • IranYekan (--font-farsi)          → normal / running text
     • Kalameh   (--font-farsi-heading)  → headings & large display text */
html[lang^="fa"] body,
html[lang^="fa"] p,
html[lang^="fa"] a,
html[lang^="fa"] span,
html[lang^="fa"] li,
html[lang^="fa"] div,
html[lang^="fa"] button,
html[lang^="fa"] input,
html[lang^="fa"] label,
html[lang^="fa"] textarea,
html[lang^="fa"] select {
  font-family: var(--font-farsi), Tahoma, system-ui, sans-serif;
}

/* The template hardcodes `font-family: Inter` on the FAQ answer body at a
   higher specificity than the generic `html[lang^="fa"] div` rule, so it
   needs an explicit Farsi override. */
html[lang^="fa"] .faq-2__accordion .accordion-collapse .accordion-body {
  font-family: var(--font-farsi), Tahoma, system-ui, sans-serif;
}

html[lang^="fa"] h1,
html[lang^="fa"] h2,
html[lang^="fa"] h3,
html[lang^="fa"] h4,
html[lang^="fa"] h5,
html[lang^="fa"] h6,
html[lang^="fa"] h1 span,
html[lang^="fa"] h2 span,
html[lang^="fa"] h3 span,
html[lang^="fa"] .section-title,
html[lang^="fa"] .section-title span,
html[lang^="fa"] .banner-two__content .title,
html[lang^="fa"] .banner-two__content .title span,
html[lang^="fa"] .brand-logo {
  font-family: var(--font-farsi-heading), var(--font-farsi), Tahoma, system-ui, sans-serif;
  font-weight: 900;
}

/* Kalameh is a tight display face; the template's heading line-heights leave
   stacked Farsi title lines cramped. Give multi-line headings more breathing
   room (the brand logo stays single-line, so keep it snug). */
html[lang^="fa"] h1,
html[lang^="fa"] h2,
html[lang^="fa"] h3,
html[lang^="fa"] h4,
html[lang^="fa"] h5,
html[lang^="fa"] h6,
html[lang^="fa"] .section-title,
html[lang^="fa"] .banner-two__content .title {
  line-height: 1.55;
}

/* ---------- Page-wide gradient (one seamless backdrop) ----------- */
/* A single vertical gradient spans the ENTIRE page, top to bottom, so the
   sections read as one continuous surface rather than separate blocks.
   Every section is transparent and lets this show through. */
/* Ported from the mobile app's "crystal" backdrop
   (colors.dart → screenBackgroundGradient + glow layers). Light mode reads
   as a white surface with a faint bluish crystal wash and two soft
   primary/secondary glows (top-right + bottom-left), exactly like mobile. */
.home-two {
  background:
    radial-gradient(
      118% 90% at 86% -4%,
      rgba(var(--primary-color-rgb), 0.34) 0%,
      rgba(var(--primary-color-rgb), 0.16) 44%,
      transparent 74%
    ),
    radial-gradient(
      122% 96% at 10% 104%,
      rgba(var(--primary-color-rgb), 0.26) 0%,
      rgba(var(--primary-color-rgb), 0.11) 46%,
      transparent 80%
    ),
    linear-gradient(158deg, #e4e9fb 0%, #f2f5fe 32%, #eaeefb 64%, #dfe6f7 100%);
  background-attachment: fixed;
}

/* ---------- Brand accent (mobile `accent`) --------------------- */
/* The mobile app pairs the navy primary with a neutral accent. Surface it
   on the small decorative marks that read well in both themes: the eyebrow
   dot before each section label and the "+N trusted users" figure. */
.section-header-2 .section-sub-title::before {
  background: var(--ch-accent, #e5e6e7);
}
/* Template hardcodes the old indigo here — retint to the brand navy so it
   stays readable on the white surface. */
.banner-two__content .customers-info .info span {
  color: var(--primary-color, #2E44FC);
}
/* The workflow band sits on a dark brand panel — keep its dot light. */
.workflow.section .section-header-2 .section-sub-title::before {
  background-color: var(--color-white, #fff);
}

/* ---------- Dark skin (overrides the light home-two template) ---- */
/* Dark crystal backdrop: neutral graphite base tinted with the brand
   indigo/violet glows — matches mobile dark screenBackgroundGradient. */
html[data-theme="dark"] .home-two {
  background:
    radial-gradient(
      122% 92% at 86% -2%,
      rgba(var(--primary-color-rgb), 0.68) 0%,
      rgba(var(--primary-color-rgb), 0.42) 40%,
      transparent 76%
    ),
    radial-gradient(
      120% 90% at 10% 102%,
      rgba(var(--primary-color-rgb), 0.5) 0%,
      rgba(var(--primary-color-rgb), 0.24) 44%,
      transparent 82%
    ),
    linear-gradient(158deg, #2c2d42 0%, #2a2b3d 50%, #272839 100%);
  background-attachment: fixed;
  color: #d8dae0;
}

html[data-theme="dark"] .home-two h1,
html[data-theme="dark"] .home-two h2,
html[data-theme="dark"] .home-two h3,
html[data-theme="dark"] .home-two h4,
html[data-theme="dark"] .home-two h5,
html[data-theme="dark"] .home-two h6 {
  color: #f2f4fb;
}

html[data-theme="dark"] .home-two p {
  color: #aab1c5;
}

/* The brand navy (#2E44FC) is used as text color for eyebrow labels, the hero
   title highlight, the trust count and the pricing check marks. On the dark
   graphite backdrop navy is unreadable (and lightening it turns violet, which
   was rejected), so in dark mode all dark-blue TEXT flips to the brand neutral accent
   (#e5e6e7). The navy still appears as a solid panel background where needed
   (e.g. the workflow band), which is unaffected by these text rules. */
html[data-theme="dark"] .section-header-2 .section-sub-title,
html[data-theme="dark"] .banner-two__content .title .line-one__span,
html[data-theme="dark"] .banner-two__content .title .line-two__span,
html[data-theme="dark"] .banner-two__content .customers-info .info span,
html[data-theme="dark"] .pricing-2__item .featcher-list ul li .featcher-check {
  color: var(--ch-accent);
}

/* Header + nav */
html[data-theme="dark"] .header-two,
html[data-theme="dark"] .fix-menu {
  background: transparent;
}

html[data-theme="dark"] .header-one__main-menu nav ul li a {
  color: #d3d8e6;
}

html[data-theme="dark"] .header-one__main-menu nav ul li a:hover {
  color: var(--ch-accent);
}

/* Pinned (sticky) navbar — theme-aware translucent bar with blur.
   The React header adds `.sticky` to `.fix-menu` once scrolled past the hero
   top; these rules override the template's plain white background. */
.header-two.section .fix-menu.sticky {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 6px 30px -12px rgba(46, 68, 252, 0.28);
  border-bottom: 1px solid rgba(46, 68, 252, 0.08);
}
.header-two.section .fix-menu.sticky .header-one__main {
  padding-block: 12px;
}
html[data-theme="dark"] .header-two.section .fix-menu.sticky {
  /* Match the page's dark gradient top tone (navy-graphite) with enough
     transparency + blur to read as the same background — not a black bar. */
  background: rgba(44, 45, 65, 0.6);
  box-shadow: 0 8px 22px -16px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .header-two.section .fix-menu.sticky .header-one__main-menu nav ul li a {
  color: #e6e9f2;
}

/* Cards / surfaces */
html[data-theme="dark"] .features-2__item,
html[data-theme="dark"] .work__item,
html[data-theme="dark"] .work__item .item-inner,
html[data-theme="dark"] .faq-2__accordion .accordion-item,
/* Contact/CTA aside next to the FAQ: drop the card background entirely so it
   blends into the page (no surface fill in dark mode, no blurred glows in
   light mode). */
.faq-2__content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.faq-2__content::before,
.faq-2__content::after {
  display: none !important;
}

/* Testimonial slide sits on the page gradient — keep it transparent in dark
   mode so it doesn't show as a flat black card. */
html[data-theme="dark"] .testimonials-2__item {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .features-2__item p,
html[data-theme="dark"] .work__item p,
html[data-theme="dark"] .testimonials-2__item .testimonials-quote,
html[data-theme="dark"] .accordion-body {
  color: #aab1c5;
}

/* FAQ accordion: template bakes light backgrounds at high specificity. */
html[data-theme="dark"] .faq-2__accordion .accordion-item .accordion-header .accordion-button.collapsed {
  background: var(--ch-surface-2);
  border-color: rgba(255, 255, 255, 0.06);
  color: #eaedf6;
}
html[data-theme="dark"] .faq-2__accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  background: var(--ch-surface);
  border-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .faq-2__accordion .accordion-item .accordion-header .accordion-button {
  color: #eaedf6;
}
html[data-theme="dark"] .faq-2__accordion .accordion-item .accordion-header .accordion-button::after {
  filter: invert(1) brightness(1.8);
}
html[data-theme="dark"] .faq-2__accordion .accordion-collapse .accordion-body {
  color: #aab1c5;
}

/* Card / item titles carry template-specific selectors that out-specify
   `.home-two h6`; force them light in dark mode. */
html[data-theme="dark"] .features-2__item .item-content .item-title,
html[data-theme="dark"] .work__item .item-content .title,
html[data-theme="dark"] .testimonials-2__item .author .author-name,
html[data-theme="dark"] .footer-two .links-group h6,
html[data-theme="dark"] .faq-2__content h6 {
  color: #f2f4fb;
}

html[data-theme="dark"] .testimonials-2__item .author .author-designation,
html[data-theme="dark"] .faq-2__content p {
  color: #aab1c5;
}

/* Template bakes near-black titles (#141414 / var(--color-black)) at high
   specificity on these headings, out-specifying `.home-two h6`; force them
   light in dark mode. Descriptions get the muted light tone. */
html[data-theme="dark"] .benefits__item .item-content .title,
html[data-theme="dark"] .faq-2__content .content-header .title,
html[data-theme="dark"] .pricing-2__item .item-header .item-info .item-title {
  color: #f2f4fb;
}
html[data-theme="dark"] .benefits__item .item-content p {
  color: #aab1c5;
}
html[data-theme="dark"] .benefits__item .item-icon {
  color: var(--ch-accent);
}
/* Benefits cards are hard-coded white (`background: var(--color-white)`) with a
   light border in the template — give them a dark surface in dark mode. */
html[data-theme="dark"] .benefits__item {
  background: var(--ch-surface);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .benefits__item:hover {
  background-color: var(--ch-surface-2);
}
html[data-theme="dark"] .benefits__item:hover .item-icon {
  background-color: var(--ch-accent);
  border-color: var(--ch-accent);
  color: var(--primary-color);
}

/* CTA banner box — template uses a light blue→white gradient plus an inline
   cta-2-bg.png with dark text. In dark mode give it a dark navy-tinted card
   and light text. `!important` is needed to beat the inline background-image. */
html[data-theme="dark"] .cta-2.section {
  background-color: transparent;
}
html[data-theme="dark"] .cta-2__wrapper {
  background: linear-gradient(135deg, #2b2c42 0%, #232430 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--ch-shadow);
}
html[data-theme="dark"] .cta-2__content .section-title {
  color: #f2f4fb;
}
html[data-theme="dark"] .cta-2__content .section-header-2 p {
  color: #aeb4c6;
}

/* Soften the template's baked-in light background images in dark mode. */
html[data-theme="dark"] .features-2__item .item-bg,
html[data-theme="dark"] .features-2 .shape-bg,
html[data-theme="dark"] .testimonial-card-bg {
  opacity: 0.08;
  mix-blend-mode: screen;
}

/* ---------- RTL adjustments (template is LTR) -------------------- */
html[dir="rtl"] .banner-two__content .customers-info .customers img:not(:first-of-type) {
  margin-left: 0;
  margin-right: -14px;
}
html[dir="rtl"] .section-header-2.left,
html[dir="rtl"] .faq-2 .section-header-2 {
  text-align: right;
}
html[dir="rtl"] .testimonials-2__navigation .prev-testimonial i,
html[dir="rtl"] .testimonials-2__navigation .next-testimonial i {
  transform: scaleX(-1);
}
html[dir="rtl"] .work__item .signup-form .input-group .input-group-text {
  border-radius: 0;
}

/* ---------- Header controls (custom) ---------------------------- */
.hdr-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hdr-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ch-border);
  background: transparent;
  color: var(--ch-text);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  padding: 0;
}

.hdr-icon-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.hdr-icon-btn img {
  border-radius: 50%;
}

/* Language dropdown */
.lang {
  position: relative;
}

.lang__menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  min-width: 168px;
  padding: 8px;
  border-radius: 14px;
  background: var(--ch-surface);
  border: 1px solid var(--ch-border);
  box-shadow: var(--ch-shadow);
  z-index: 999;
  list-style: none;
  margin: 0;
}

.lang__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--ch-text);
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  text-align: start;
}

.lang__option:hover {
  background: rgba(var(--primary-color-rgb), 0.14);
}

.lang__option.is-active {
  background: rgba(var(--primary-color-rgb), 0.18);
  color: var(--primary-color);
  font-weight: 600;
}

.lang__option img {
  border-radius: 50%;
}

/* ---------- Mobile drawer --------------------------------------- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.drawer {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  height: 100%;
  width: min(360px, 86vw);
  background: var(--ch-surface);
  border-inline-start: 1px solid var(--ch-border);
  z-index: 1050;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow-y: auto;
}

html[dir="rtl"] .drawer {
  transform: translateX(-100%);
}

.drawer.is-open,
html[dir="rtl"] .drawer.is-open {
  transform: translateX(0);
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.drawer__nav {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drawer__nav a {
  display: block;
  padding: 12px 8px;
  color: var(--ch-text);
  font-size: 17px;
  border-radius: 10px;
}

.drawer__nav a:hover {
  background: rgba(var(--primary-color-rgb), 0.14);
  color: var(--primary-color);
}

.drawer__btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}

.drawer__btns .saaslyn-3-btn {
  width: 100%;
  justify-content: center;
}

/* ---------- Logo (text brand) ----------------------------------- */
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 24px;
  color: var(--ch-text);
  letter-spacing: -0.01em;
}

.brand-logo svg,
.brand-logo__symbol,
.brand-logo__wordmark {
  flex-shrink: 0;
}

.brand-logo__wordmark {
  display: block;
  width: auto;
  height: 34px;
  max-width: min(180px, 42vw);
}

.brand-logo__symbol {
  display: none;
  width: auto;
  height: 40px;
  max-width: min(44px, 12vw);
}

@media only screen and (max-width: 991.98px) {
  .brand-logo__wordmark {
    display: none;
  }

  .brand-logo__symbol {
    display: block;
  }
}

/* Dark UI theme — inverted brand SVGs (blue shapes → white, counters → brand blue). */
.brand-logo-theme__dark {
  display: none !important;
}

html[data-theme="dark"] .brand-logo-theme__light {
  display: none !important;
}

html[data-theme="dark"] .brand-logo__wordmark.brand-logo-theme__dark {
  display: block !important;
}

html[data-theme="dark"] .brand-logo__symbol.brand-logo-theme__dark {
  display: none !important;
}

@media only screen and (max-width: 991.98px) {
  html[data-theme="dark"] .brand-logo__wordmark.brand-logo-theme__dark {
    display: none !important;
  }

  html[data-theme="dark"] .brand-logo__symbol.brand-logo-theme__dark {
    display: block !important;
  }
}

/* Footer now blends into the page gradient → logo follows the theme text. */
.footer-two .brand-logo {
  color: var(--ch-text);
}

/* ---------- Download section ------------------------------------ */
.download-2 {
  text-align: center;
}

.download-2 .store-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 8px;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border-radius: 14px;
  border: 1px solid var(--ch-border);
  background: rgba(var(--ch-text-rgb), 0.04);
  color: var(--ch-text);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.store-btn:hover {
  border-color: var(--primary-color);
  transform: translateY(-2px);
}

.store-btn .store-btn__icon {
  flex-shrink: 0;
}

.store-btn small {
  display: block;
  font-size: 12px;
  opacity: 0.7;
  line-height: 1.2;
}

.store-btn strong {
  display: block;
  font-size: 17px;
  line-height: 1.2;
}

/* ---------- Hero customer avatars (gradient fallback) ----------- */
.banner-two__content .customers-info .customers .avatar-dot {
  display: inline-block;
  width: 38px;
  height: 38px;
  border-radius: 100%;
  border: 2px solid #f9f8ff;
}
.banner-two__content .customers-info .customers .avatar-dot:not(:first-of-type) {
  margin-left: -14px;
}
html[dir="rtl"] .banner-two__content .customers-info .customers .avatar-dot:not(:first-of-type) {
  margin-left: 0;
  margin-right: -14px;
}
html[data-theme="dark"] .banner-two__content .customers-info .customers .avatar-dot {
  border-color: rgba(255, 255, 255, 0.14);
}
html[data-theme="dark"] .banner-two__content .customers-info .info {
  color: rgba(234, 237, 246, 0.72);
}

/* ---------- Dynamic testimonial avatar fallback ----------------- */
.author-thumb .avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-color-2));
}

/* Empty testimonials state */
.testimonials-empty {
  text-align: center;
  color: var(--ch-text);
  opacity: 0.7;
  padding: 40px 0;
}

.author-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.testimonials-2__navigation .prev-testimonial,
.testimonials-2__navigation .next-testimonial {
  border: none;
  cursor: pointer;
}

.testimonials-2__navigation .arrow-icon {
  font-style: normal;
  font-size: 22px;
  line-height: 1;
}

/* Floating decorative avatars around the testimonial card.
   Real user photos come from the API; empty slots use a gradient dot
   (the template's own test-author PNGs are dimension placeholders). */
.testimonials-2__slider-wrapper .test-author {
  width: 88px;
  height: 88px;
  object-fit: cover;
  background: var(--ch-surface, #fff);
  border: 4px solid #ffffff;
  box-shadow: 0 18px 40px rgba(16, 25, 43, 0.16);
}
.testimonials-2__slider-wrapper .test-author-2,
.testimonials-2__slider-wrapper .test-author-3 {
  width: 64px;
  height: 64px;
}
.testimonials-2__slider-wrapper .test-author--fallback {
  background: linear-gradient(135deg, var(--primary-color-2) 0%, var(--primary-color) 100%);
}
html[data-theme="dark"] .testimonials-2__slider-wrapper .test-author {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* Pagination counter under the slider (mirrors mobile index/total) */
.testimonials-2__counter {
  margin: 28px 0 0;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--ch-text);
  opacity: 0.7;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* Feedback text block (stars + quote + team reply) */
.testimonials-2__content {
  margin-bottom: 3rem;
}

.testimonials-2__item .testimonials-quote {
  margin-bottom: 0;
}

.testimonials-2__content--enter {
  animation: testimonials-slide-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes testimonials-slide-in {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonials-2__content--enter {
    animation: none;
  }
}

/* Star rating above testimonial quote — large, soft curved stars, flat (no shadow) */
.testimonials-rating {
  display: flex;
  justify-content: center;
  margin: 0 auto 1.85rem;
}

.testimonials-rating__stars {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.testimonials-rating__star {
  display: inline-flex;
  line-height: 0;
  color: rgba(var(--primary-color-2-rgb, 46, 68, 252), 0.22);
}

.testimonials-rating__star--filled {
  color: #e8a317;
}

.testimonials-rating__icon {
  width: 2.65rem;
  height: 2.65rem;
}

.testimonials-rating__icon-shape--filled {
  transform-origin: center;
  transform: scale(1.02);
}

html[data-theme="dark"] .testimonials-rating__star {
  color: rgba(255, 255, 255, 0.24);
}

html[data-theme="dark"] .testimonials-rating__star--filled {
  color: #f2c14e;
}

@media (max-width: 767.98px) {
  .testimonials-rating__stars {
    gap: 0.4rem;
  }

  .testimonials-rating__icon {
    width: 2.2rem;
    height: 2.2rem;
  }
}

/* Support-team reply shown under a testimonial quote */
.testimonials-reply {
  margin: 20px auto 0;
  max-width: 640px;
  padding: 16px 20px;
  text-align: start;
  border-radius: 16px;
  background: rgba(var(--primary-color-2-rgb, 70, 66, 252), 0.07);
  border: 1px solid rgba(var(--primary-color-2-rgb, 70, 66, 252), 0.18);
}

.testimonials-reply__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--primary-color-2, #2E44FC);
}

.testimonials-reply__text {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ch-text);
  opacity: 0.92;
}

html[data-theme="dark"] .testimonials-reply {
  background: rgba(var(--primary-color-2-rgb, 70, 66, 252), 0.16);
  border-color: rgba(var(--primary-color-2-rgb, 70, 66, 252), 0.32);
}

/* Brand marquee (replaces swiper autoplay with pure CSS) */
.brand__marquee {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: brand-scroll 40s linear infinite;
}

html[dir="rtl"] .brand__marquee {
  animation-direction: reverse;
}

.brand__marquee img {
  height: 34px;
  width: auto;
  object-fit: contain;
  opacity: 0.75;
  filter: grayscale(1);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.brand__marquee img:hover {
  opacity: 1;
  filter: grayscale(0);
}

@keyframes brand-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand__marquee {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
}

/* Hide horizontal overflow safety for RTL banner decorations */
body {
  overflow-x: hidden;
}

/* ---------- Header layout / responsive -------------------------- */
.header-two .header-one__menu-btns {
  gap: 14px;
}

/* Slimmer, more minimal header CTAs (the template's default 18px/42px pill is
   oversized for a nav bar). Scoped to the header only, so the hero / CTA /
   drawer buttons keep their larger size. */
.header-two .header-one__menu-btns .buttons .saaslyn-3-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.2px;
  line-height: 1.2;
  border-radius: 22px;
}
.header-two .header-one__menu-btns .buttons .saaslyn-3-btn::before {
  width: 40px;
  height: 40px;
  top: -26px;
  left: -14px;
}

.hdr-user-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: min(220px, 42vw);
  margin: 0;
  cursor: pointer;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.hdr-user-btn__icon {
  flex-shrink: 0;
}

.hdr-user-btn__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer__btns .hdr-user-btn {
  width: 100%;
  max-width: none;
}

.ch-auth-handoff {
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ch-auth-handoff__spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(var(--primary-color-rgb), 0.15);
  border-top-color: var(--primary-color);
  animation: ch-handoff-spin 0.8s linear infinite;
}

@keyframes ch-handoff-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Hamburger button — the template paints it as a solid #222 circle with bars
   colored by an undefined `--text-color-main`, so the bars vanish and it reads
   as a black blob. Restyle it to a clean bordered icon button (matching the
   theme/lang icon buttons) with visible brand-colored bars. */
.header-two .header-one__menu-btns .hamburger-menu {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--ch-surface);
  border: 1px solid var(--ch-border);
  border-radius: 12px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--ch-shadow);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.header-two .header-one__menu-btns .hamburger-menu span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0;
  border-radius: 10px;
  background: var(--primary-color);
}
.header-two .header-one__menu-btns .hamburger-menu span:nth-child(2) {
  width: 14px;
}
.header-two .header-one__menu-btns .hamburger-menu:hover {
  border-color: var(--primary-color);
}
html[data-theme="dark"] .header-two .header-one__menu-btns .hamburger-menu span {
  background: var(--ch-accent);
}
html[data-theme="dark"] .header-two .header-one__menu-btns .hamburger-menu:hover {
  border-color: var(--ch-accent);
}

@media (min-width: 1200px) {
  .header-two .header-one__menu-btns .hamburger-menu {
    display: none;
  }
}

@media (max-width: 1199px) {
  .header-two .header-one__main-menu.v2 nav {
    display: none;
  }
  .header-two .header-one__menu-btns .buttons {
    display: none;
  }
}

@media (max-width: 575px) {
  .header-two .hdr-actions {
    gap: 8px;
  }
  .hdr-icon-btn {
    width: 40px;
    height: 40px;
  }
}

/* ---------- Hero: subtle halftone over the shared page gradient --- */
/* The whole page shares ONE gradient (see `.home-two` near the top of this
   file), so the hero itself is transparent and just adds a faint dotted
   halftone for a touch of depth — no section-specific colour block. */
.banner-two__thumb img {
  animation: none !important;
}
.banner-two.section {
  position: relative;
  background: transparent;
}
.banner-two.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("/assets/images/features/features-2-bg.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 55% auto;
  filter: blur(7px);
  opacity: 0.75;
  pointer-events: none;
}
/* In dark mode flip the black dots to white so the texture stays visible. */
html[data-theme="dark"] .banner-two.section::before {
  filter: invert(1) blur(7px);
  opacity: 0.6;
}

/* ---------- Hero artwork styling (static, no autoplay motion) ------
   The hero image is a transparent PNG composite. Give it depth with a soft
   ambient brand glow behind it and a drop-shadow that hugs the transparent
   silhouette, plus a gentle lift on hover. No looping animation (kept per the
   earlier "no hero image animation" request). */
.banner-two__thumb {
  position: relative;
  isolation: isolate;
}
.banner-two__thumb::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 54%;
  width: 82%;
  height: 70%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(var(--primary-color-rgb), 0.32) 0%,
    rgba(var(--primary-color-rgb), 0.12) 52%,
    transparent 78%
  );
  filter: blur(58px);
  pointer-events: none;
}
html[data-theme="dark"] .banner-two__thumb::before {
  background: radial-gradient(
    closest-side,
    rgba(var(--primary-color-rgb), 0.6) 0%,
    rgba(var(--ch-accent-rgb), 0.14) 48%,
    transparent 80%
  );
  filter: blur(70px);
}
.banner-two__thumb .hero-thumb-img {
  filter: drop-shadow(0 14px 30px rgba(var(--primary-color-rgb), 0.14));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
}
.banner-two__thumb:hover .hero-thumb-img {
  transform: translateY(-6px) scale(1.008);
  filter: drop-shadow(0 18px 34px rgba(var(--primary-color-rgb), 0.16));
}
html[data-theme="dark"] .banner-two__thumb .hero-thumb-img {
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.34));
}
html[data-theme="dark"] .banner-two__thumb:hover .hero-thumb-img {
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.4));
}
@media (prefers-reduced-motion: reduce) {
  .banner-two__thumb .hero-thumb-img {
    transition: none;
  }
  .banner-two__thumb:hover .hero-thumb-img {
    transform: none;
  }
}

/* Kill the template's per-section background blobs/bands so nothing breaks
   the single page gradient. */
.testimonials-2.section::before {
  display: none;
}
.cta-2.section {
  background-color: transparent;
}

/* CTA artwork: drop the framed "thumb-wrapper" box (white panel + rounded
   border + black image backing) and show just the phone image. */
.cta-2__thumb {
  padding: 0;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  background: transparent;
  /* Drop the template's 60px side offset so the artwork sits centred in its
     own column instead of being pushed to one edge. */
  margin-right: 0;
  margin-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  /* The wrapper has a top padding but none at the bottom, which glued the
     artwork to the bottom edge. Mirror the wrapper's top padding here so the
     image floats with equal space above and below (vertically centred). */
  padding-block-end: 70px;
}
@media only screen and (max-width: 1199.98px) {
  .cta-2__thumb {
    padding-block-end: 40px;
  }
}
@media only screen and (max-width: 991.98px) {
  .cta-2__thumb {
    padding-block-end: 30px;
  }
}
.cta-2__thumb img {
  background-color: transparent;
  border-radius: 0;
}
.cta-2__thumb .cta-thumb-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}
/* Theme-aware CTA artwork: show the variant matching the active theme, matching
   the hero's light/dark swap. */
.cta-2__thumb .cta-thumb-img--dark {
  display: none;
}
html[data-theme="dark"] .cta-2__thumb .cta-thumb-img--light {
  display: none;
}
html[data-theme="dark"] .cta-2__thumb .cta-thumb-img--dark {
  display: block;
}

/* ---------- Footer: blend into the shared page gradient ---------- */
/* The template painted the footer solid primary blue with white text; make
   it transparent (so the page gradient shows) and retint text to the theme
   so it stays readable in both light and dark. */
.footer-two.section {
  background-color: transparent;
}
.footer-two__main .footer-info p,
.footer-two .links-group.v2 .link-title,
.footer-two__bottom .copy-right {
  color: var(--ch-text);
}
.footer-two .links-group.v2 .link-list ul li a,
.footer-two__bottom .links ul li a {
  color: var(--ch-muted);
}
.footer-two .links-group.v2 .link-list ul li a:hover,
.footer-two__bottom .links ul li a:hover {
  color: var(--primary-color);
}
.footer-two .social-icons-2 ul li a {
  color: var(--ch-text);
  border-color: var(--ch-border);
}
.footer-two .social-icons-2 ul li a:hover {
  background-color: var(--ch-text);
  border-color: var(--ch-text);
  color: var(--ch-surface);
}
.footer-two__bottom {
  border-top-color: var(--ch-border);
}

/* ---------- Features leaderboard mockup (theme-aware, minimal) ---- */
/* Keep the mockup compact and vertically centered within its column so it
   sits in the middle of the taller cards column beside it. */
.features-2__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-inline: 0;
}
.features-2__thumb .features-thumb-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}
/* Show the variant that matches the active theme. */
.features-2__thumb .features-thumb-img--dark {
  display: none;
}
html[data-theme="dark"] .features-2__thumb .features-thumb-img--light {
  display: none;
}
html[data-theme="dark"] .features-2__thumb .features-thumb-img--dark {
  display: block;
}

/* ---------- Hero stacked layout (title on top, big image below) --- */
/* Trust + one-line title + download button are centered at the top, then the
   16:9 app composite sits large underneath, full-width. */
.banner-two__grid {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
  text-align: center;
}

/* The template forces the hero wrapper to a full 100vh, which leaves a large
   empty band under the artwork before "how it works". Let it size to its
   content and trim the padding so the image sits close to the next section. */
.banner-two__wrapper {
  min-height: auto;
}
.banner-two.section {
  padding-bottom: 8px;
}
@media only screen and (max-width: 991.98px) {
  .banner-two.section {
    padding-bottom: 4px;
  }
}

/* Centered content block spanning the full width. */
.banner-two.section .banner-two__content {
  text-align: center;
  max-width: none;
  margin-inline: auto;
  width: 100%;
}
.banner-two.section .banner-two__content .customers-info,
.banner-two.section .banner-two__content .banner-buttons {
  justify-content: center;
}

/* Keep the headline on a single line and scale it to fit the container. */
.banner-two.section .banner-two__content .title {
  white-space: nowrap;
  font-size: clamp(1.5rem, 3.1vw, 2.6rem);
  line-height: 1.18;
}

/* Big image below the copy. */
.banner-two.section .banner-two__thumb {
  width: 100%;
  max-width: min(1320px, 100%);
  margin: 0 auto;
  text-align: center;
}
.banner-two.section .banner-two__thumb img {
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* Theme-aware hero artwork: two variants are rendered, CSS shows the one that
   matches the active theme so it swaps instantly when the toggle flips
   data-theme (no reload, no flash). */
.banner-two__thumb .hero-thumb-img--dark {
  display: none;
}
html[data-theme="dark"] .banner-two__thumb .hero-thumb-img--light {
  display: none;
}
html[data-theme="dark"] .banner-two__thumb .hero-thumb-img--dark {
  display: block;
}

/* On desktop widen the hero's own container so the artwork reads as the
   centerpiece. The image then fills this wider container (never wider than its
   flex parent), so it stays reliably centered in its row — including RTL. */
@media only screen and (min-width: 992px) {
  .banner-two.section .container {
    max-width: min(1520px, 96vw);
  }
  .banner-two.section .banner-two__thumb {
    width: 100%;
    max-width: none;
    margin-inline: auto;
  }
}

/* On tablet / mobile the one-line title would overflow, so let it wrap. */
@media only screen and (max-width: 991.98px) {
  .banner-two.section .banner-two__content .title {
    white-space: normal;
    font-size: clamp(1.4rem, 6vw, 2.1rem);
  }
  .banner-two.section .banner-two__thumb {
    max-width: 96%;
  }
}

/* ---------- Hero download button with store icons --------------- */
.hero-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
}
.hero-download-btn__icons {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-inline-end: 14px;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.28);
}
.hero-download-btn__icons svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ============================================================
   Button shine sweep (ported from the panel's `.hivad-btn--animated`):
   a soft, skewed light streak crosses each primary button left→right
   about every ~2.4s, then rests — the same "storm glint" used in the
   panel and mobile app. Mirrored for RTL. Uses ::after because the
   template already owns ::before (the hover glow orb).
   ============================================================ */
.saaslyn-3-btn::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  z-index: 1;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 60%
  );
  transform: translateX(-120%) skewX(-16deg);
  animation: ch-btn-shine 5.6s ease-in-out infinite;
  pointer-events: none;
}
html[dir="rtl"] .saaslyn-3-btn::after {
  animation-name: ch-btn-shine-rtl;
}
/* Pause the sweep on hover/focus so the interaction feels deliberate. */
.saaslyn-3-btn:hover::after,
.saaslyn-3-btn:focus-visible::after {
  animation: none;
  opacity: 0;
}

@keyframes ch-btn-shine {
  0% {
    transform: translateX(-120%) skewX(-16deg);
    opacity: 0;
  }
  12% {
    opacity: 0.6;
  }
  50%,
  100% {
    transform: translateX(120%) skewX(-16deg);
    opacity: 0;
  }
}
@keyframes ch-btn-shine-rtl {
  0% {
    transform: translateX(120%) skewX(16deg);
    opacity: 0;
  }
  12% {
    opacity: 0.6;
  }
  50%,
  100% {
    transform: translateX(-120%) skewX(16deg);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .saaslyn-3-btn::after {
    animation: none;
    opacity: 0;
  }
}

/* ---------- Dark mode: flip dark-blue buttons to neutral accent ---------- */
/* In dark mode the solid navy button reads poorly, so it becomes a solid
   brand-neutral accent button with dark-blue text inside (the panel/mobile pairing). */
html[data-theme="dark"] .saaslyn-3-btn:not(.v2) {
  background-color: var(--ch-accent);
  color: var(--primary-color);
}
html[data-theme="dark"] .saaslyn-3-btn:not(.v2) .hero-download-btn__icons {
  border-inline-end-color: rgba(46, 68, 252, 0.35);
}

/* Secondary (.v2) becomes the neutral-outline companion in dark mode
   (template hardcodes color:var(--color-black), invisible on dark). */
html[data-theme="dark"] .saaslyn-3-btn.v2 {
  color: var(--ch-accent);
  border-color: rgba(229, 230, 231, 0.5);
}
html[data-theme="dark"] .saaslyn-3-btn.v2::before {
  background-color: rgba(229, 230, 231, 0.32);
}

/* ---------- Dark-mode hover states (navy → neutral accent) --------------
   The template/base hover styles push borders, text and link colors toward
   the brand navy, which is invisible on dark surfaces (the reported bug:
   button + label both go dark blue on hover). In dark mode every such hover
   uses the brand neutral accent so labels and icons stay legible. */
html[data-theme="dark"] .saaslyn-3-btn:not(.v2):hover,
html[data-theme="dark"] .saaslyn-3-btn:not(.v2):focus-visible {
  background-color: var(--ch-accent);
  color: var(--primary-color);
}
html[data-theme="dark"] .saaslyn-3-btn.v2:hover,
html[data-theme="dark"] .saaslyn-3-btn.v2:focus-visible {
  color: var(--ch-accent);
  border-color: var(--ch-accent);
  background-color: rgba(var(--ch-accent-rgb), 0.12);
}
html[data-theme="dark"] .hdr-icon-btn:hover {
  border-color: var(--ch-accent);
  color: var(--ch-accent);
}
html[data-theme="dark"] .lang__option:hover,
html[data-theme="dark"] .drawer__nav a:hover {
  background: rgba(var(--ch-accent-rgb), 0.14);
  color: var(--ch-accent);
}
html[data-theme="dark"] .footer-two .links-group.v2 .link-list ul li a:hover,
html[data-theme="dark"] .footer-two__bottom .links ul li a:hover {
  color: var(--ch-accent);
}
html[data-theme="dark"] .store-btn:hover {
  border-color: var(--ch-accent);
}
html[data-theme="dark"] .pricing-2__item .item-body .button-wrapper a:hover,
html[data-theme="dark"] .pricing-2__item .item-body .button-wrapper a:focus-visible {
  color: var(--primary-color);
}

/* ---------- Pricing plans ---------------------------------------- */
/* Equal-height cards: fill the stretched Bootstrap column, then let the card
   and its body flex vertically so the feature list absorbs any slack and the
   CTA buttons line up along the bottom regardless of copy length. */
.pricing-2 .row-padding-top > [class*="col-"] {
  display: flex;
}
.pricing-2__item {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.pricing-2__item .item-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.pricing-2__item .item-body .featcher-list {
  flex: 1 1 auto;
}
.pricing-2__item .item-body .button-wrapper {
  margin-top: auto;
}

/* Feature list check marks (inline SVG instead of Font Awesome). */
.pricing-2__item .featcher-list ul li {
  display: inline-flex;
  align-items: center;
}
.pricing-2__item .featcher-list ul li .featcher-check {
  flex-shrink: 0;
  color: var(--primary-color-2, #2E44FC);
}
html[dir="rtl"] .pricing-2__item .featcher-list ul li {
  text-align: right;
}

/* "Most popular" badge — amber fill with navy label, mirroring the mobile
   app's accent usage (accent bg + onAccent text). */
.pricing-2__badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--ch-on-accent, #2E44FC);
  background: var(--ch-accent, #e5e6e7);
}

/* Dark-mode skin: the template's pricing cards are pure white. */
html[data-theme="dark"] .pricing-2__item {
  background: var(--ch-surface);
}
html[data-theme="dark"] .pricing-2__item .item-body,
html[data-theme="dark"] .pricing-2__item .item-body::before {
  background: var(--ch-surface-2);
}
html[data-theme="dark"] .pricing-2__item .item-title,
html[data-theme="dark"] .pricing-2__item .item-header .item-price .plan-price .price {
  color: var(--ch-text);
}
html[data-theme="dark"] .pricing-2__item .item-info p,
html[data-theme="dark"] .pricing-2__item .featcher-list ul li {
  color: var(--ch-muted);
}
html[data-theme="dark"] .pricing-2__item .item-bg {
  opacity: 0.08;
  mix-blend-mode: screen;
}
/* Plan CTA is a filled .saaslyn-3-btn, so it inherits the dark-mode neutral accent
   flip — keep its label the dark-blue on-accent tone. */
html[data-theme="dark"] .pricing-2__item .item-body .button-wrapper a {
  color: var(--primary-color);
  border-color: transparent;
}
/* On card hover/active the template repaints this CTA navy (`--primary-color-2`)
   with white text — keep the dark-mode neutral accent fill + navy text instead. */
html[data-theme="dark"] .pricing-2__item:hover .item-body .button-wrapper a,
html[data-theme="dark"] .pricing-2__item.active .item-body .button-wrapper a {
  background-color: var(--ch-accent);
  color: var(--primary-color);
  border-color: var(--ch-accent);
}

/* ---------- Modern card frame -----------------------------------
   The template dresses each card in TWO indigo→white gradient rings
   (`.pricing-2__item::before` outer + `.item-body::after` inner) and, in
   dark mode, an opaque white fill under the header (`.pricing-2__item::after`).
   That reads as chunky white borders. Replace it with a single soft brand
   hairline, drop the inner ring, keep a solid surface fill, and add a layered
   shadow that deepens on hover / for the popular plan. */
.pricing-2__item {
  box-shadow: 0 22px 50px -28px rgba(var(--primary-color-rgb), 0.28);
}
.pricing-2__item::before {
  background: linear-gradient(
    180deg,
    rgba(var(--primary-color-rgb), 0.3) 0%,
    rgba(var(--primary-color-rgb), 0.07) 55%,
    rgba(var(--primary-color-rgb), 0.02) 100%
  );
}
/* Kill the inner white ring around the body entirely. */
.pricing-2__item .item-body::after {
  background: transparent;
}
/* Keep the surface fill solid (template makes it transparent on hover/active,
   which caused a translucent flash). */
.pricing-2__item::after,
.pricing-2__item:hover::after,
.pricing-2__item.active::after {
  background: #ffffff;
}
.pricing-2__item:hover,
.pricing-2__item.active {
  box-shadow: 0 30px 62px -24px rgba(var(--primary-color-rgb), 0.42);
}
.pricing-2__item:hover::before,
.pricing-2__item.active::before {
  background: linear-gradient(
    180deg,
    rgba(var(--primary-color-rgb), 0.55) 0%,
    rgba(var(--primary-color-rgb), 0.16) 55%,
    rgba(var(--primary-color-rgb), 0.04) 100%
  );
}

/* Dark mode: fix the white fill, use a soft light hairline, and warm the
   border to the amber accent on hover / for the popular plan. */
html[data-theme="dark"] .pricing-2__item {
  box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .pricing-2__item::after,
html[data-theme="dark"] .pricing-2__item:hover::after,
html[data-theme="dark"] .pricing-2__item.active::after {
  background: var(--ch-surface);
}
html[data-theme="dark"] .pricing-2__item::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.05) 55%,
    transparent 100%
  );
}
html[data-theme="dark"] .pricing-2__item:hover,
html[data-theme="dark"] .pricing-2__item.active {
  box-shadow: 0 30px 62px -24px rgba(0, 0, 0, 0.72);
}
html[data-theme="dark"] .pricing-2__item:hover::before,
html[data-theme="dark"] .pricing-2__item.active::before {
  background: linear-gradient(
    180deg,
    rgba(var(--ch-accent-rgb), 0.5) 0%,
    rgba(var(--ch-accent-rgb), 0.14) 55%,
    transparent 100%
  );
}

/* Softer, more rounded corners for the pricing cards (template uses 32px on
   the card/fill and 34px on the outer hairline). */
.pricing-2__item,
.pricing-2__item::after,
.pricing-2__item .item-body {
  border-radius: 60px;
}
.pricing-2__item::before {
  border-radius: 62px;
}

/* ---------- Pricing plan cards (v2) ------------------------------ */
#pricing,
#download {
  scroll-margin-top: 92px;
}

.pricing-plan-grid > [class*="col-"] {
  display: flex;
  align-items: stretch;
}

@media (min-width: 1200px) {
  .pricing-plan-grid {
    align-items: center;
  }

  .pricing-plan-grid .pricing-plan-col.col-xl-4 {
    flex: 0 0 auto;
    width: 30%;
    max-width: 30%;
  }

  .pricing-plan-grid .pricing-plan-col--featured.col-xl-4 {
    width: 40%;
    max-width: 40%;
    z-index: 2;
  }
}

.pricing-plan-card {
  --plan-accent: var(--primary-color-2, #2E44FC);
  --plan-accent-soft: rgba(var(--primary-color-rgb), 0.1);
  --plan-accent-mid: rgba(var(--primary-color-rgb), 0.18);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 640px;
  max-height: 760px;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(var(--primary-color-rgb), 0.12);
  background: #ffffff;
  box-shadow: 0 22px 50px -28px rgba(var(--primary-color-rgb), 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pricing-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 62px -24px rgba(var(--primary-color-rgb), 0.36);
}

@media (min-width: 1200px) {
  .pricing-plan-card.is-featured {
    min-height: 680px;
    max-height: 800px;
    border-radius: 30px;
  }

  .pricing-plan-card.is-featured:hover {
    transform: translateY(-6px);
  }
}

.pricing-plan-card--free {
  --plan-accent: #0d9488;
  --plan-accent-soft: rgba(13, 148, 136, 0.1);
  --plan-accent-mid: rgba(13, 148, 136, 0.18);
  --plan-accent-rgb: 13, 148, 136;
}

.pricing-plan-card--offline {
  --plan-accent: var(--primary-color-2, #2E44FC);
  --plan-accent-soft: rgba(var(--primary-color-rgb), 0.1);
  --plan-accent-mid: rgba(var(--primary-color-rgb), 0.2);
  --plan-accent-rgb: 46, 68, 252;
}

.pricing-plan-card--online {
  --plan-accent: var(--primary-color-2, #2E44FC);
  --plan-accent-soft: rgba(var(--primary-color-rgb), 0.1);
  --plan-accent-mid: rgba(var(--primary-color-rgb), 0.2);
  --plan-accent-rgb: 46, 68, 252;
}

.pricing-plan-card.is-featured {
  border-color: rgba(var(--ch-accent-rgb), 0.55);
  box-shadow:
    0 28px 60px -22px rgba(var(--primary-color-rgb), 0.38),
    0 0 0 1px rgba(var(--ch-accent-rgb), 0.35);
}

.pricing-plan-card.is-featured:hover {
  box-shadow:
    0 34px 68px -20px rgba(var(--primary-color-rgb), 0.45),
    0 0 0 1px rgba(var(--ch-accent-rgb), 0.5);
}

.pricing-plan-card__header {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  padding: 24px 26px 22px;
  background: linear-gradient(
    165deg,
    var(--plan-accent-soft) 0%,
    rgba(255, 255, 255, 0) 72%
  );
}

.pricing-plan-card__header::after {
  content: "";
  display: block;
  margin-top: 18px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--plan-accent-rgb, var(--primary-color-rgb)), 0.12) 18%,
    rgba(var(--plan-accent-rgb, var(--primary-color-rgb)), 0.34) 50%,
    rgba(var(--plan-accent-rgb, var(--primary-color-rgb)), 0.12) 82%,
    transparent 100%
  );
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.pricing-plan-card.is-featured .pricing-plan-card__header {
  padding: 28px 30px 24px;
}

.pricing-plan-card__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.pricing-plan-card__header-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.pricing-plan-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  color: var(--plan-accent);
  background: var(--plan-accent-mid);
}

.pricing-plan-card.is-featured .pricing-plan-card__icon {
  width: 44px;
  height: 44px;
}

.pricing-plan-card__badge {
  display: inline-block;
  margin-bottom: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15px;
  color: var(--ch-on-accent, #2E44FC);
  background: var(--ch-accent, #e5e6e7);
}

.pricing-plan-card__name {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--primary-color-2, #2E44FC);
  line-height: 1.25;
}

.pricing-plan-card__intro {
  margin-bottom: 16px;
  padding-bottom: 14px;
}

.pricing-plan-card__intro::after {
  content: "";
  display: block;
  margin-top: 14px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--plan-accent-rgb, var(--primary-color-rgb)), 0.1) 18%,
    rgba(var(--plan-accent-rgb, var(--primary-color-rgb)), 0.28) 50%,
    rgba(var(--plan-accent-rgb, var(--primary-color-rgb)), 0.1) 82%,
    transparent 100%
  );
}

.pricing-plan-card__tagline {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ch-muted, #5b6478);
}

.pricing-plan-card__community {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.pricing-plan-card__community-label {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ch-muted, #5b6478);
}

.pricing-plan-card__community-flags {
  display: inline-flex;
  align-items: center;
}

.pricing-plan-card__community-flag {
  position: relative;
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(var(--primary-color-rgb), 0.08);
  background: #ffffff;
}

.pricing-plan-card__community-flag:not(:first-child) {
  margin-inline-start: -10px;
}

.pricing-plan-card__community-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pricing-plan-card__community-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  margin-inline-start: -10px;
  border-radius: 999px;
  border: 2px solid #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  color: var(--plan-accent);
  background: var(--plan-accent-soft);
  box-shadow: 0 0 0 1px rgba(var(--primary-color-rgb), 0.08);
}

.pricing-plan-card__price-panel {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
  min-width: 0;
  padding: 9px 14px 8px;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.55) 100%),
    linear-gradient(135deg, var(--plan-accent-soft) 0%, transparent 72%);
  border: 1px solid rgba(var(--plan-accent-rgb, var(--primary-color-rgb)), 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 10px 24px -18px rgba(var(--plan-accent-rgb, var(--primary-color-rgb)), 0.55);
}

.pricing-plan-card__price-panel.is-featured {
  padding: 10px 16px 9px;
  border-radius: 18px;
  border-color: rgba(var(--ch-accent-rgb), 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(var(--plan-accent-rgb, var(--primary-color-rgb)), 0.14),
    0 14px 30px -16px rgba(var(--plan-accent-rgb, var(--primary-color-rgb)), 0.62);
}

.pricing-plan-card__price-panel.is-free {
  border-style: dashed;
  border-color: rgba(var(--plan-accent-rgb), 0.34);
}

.pricing-plan-card__price-currency {
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: var(--plan-accent);
  opacity: 0.65;
}

.pricing-plan-card__price-panel.is-featured .pricing-plan-card__price-currency {
  font-size: 0.78rem;
}

.pricing-plan-card__price-amount {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--plan-accent);
}

.pricing-plan-card__price-panel.is-featured .pricing-plan-card__price-amount {
  font-size: 2rem;
  font-weight: 900;
}

html[lang^="fa"] .pricing-plan-card__price-amount {
  font-family: var(--font-farsi-heading), var(--font-farsi), Tahoma, system-ui, sans-serif;
}

.pricing-plan-card__price-period {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ch-muted, #5b6478);
}

.pricing-plan-card.is-featured .pricing-plan-card__price-period {
  font-size: 0.9rem;
}

.pricing-plan-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 20px 26px 24px;
}

.pricing-plan-card.is-featured .pricing-plan-card__body {
  padding: 22px 30px 26px;
}

.pricing-plan-card__details-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 420px;
  border-radius: 16px;
  isolation: isolate;
}

.pricing-plan-card.is-featured .pricing-plan-card__details-viewport {
  max-height: 460px;
}

.pricing-plan-card__details-scroll {
  height: 100%;
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline-end: 4px;
  padding-bottom: 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pricing-plan-card__details-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Bottom fade only while more content is below the fold. */
.pricing-plan-card__details-viewport::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  height: 56px;
  pointer-events: none;
  border-radius: 0 0 16px 16px;
  opacity: 0;
  transition: opacity 0.2s ease;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 55%,
    rgba(255, 255, 255, 0.88) 100%
  );
}

.pricing-plan-card__details-viewport.has-scroll-fade::before {
  opacity: 1;
}

.pricing-plan-card__scroll-hint {
  position: absolute;
  inset-inline: 0;
  bottom: 10px;
  z-index: 3;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.pricing-plan-card__scroll-hint-track {
  display: block;
  width: 34px;
  height: 5px;
  border-radius: 999px;
  background: rgba(var(--primary-color-rgb), 0.1);
  overflow: hidden;
}

.pricing-plan-card__scroll-hint-thumb {
  display: block;
  width: 14px;
  height: 100%;
  border-radius: inherit;
  background: var(--plan-accent);
  opacity: 0.5;
  animation: pricing-plan-scroll-hint 2.2s ease-in-out infinite;
}

@keyframes pricing-plan-scroll-hint {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.55;
  }
  50% {
    transform: translateX(20px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-plan-card__scroll-hint-thumb {
    animation: none;
    opacity: 0.45;
  }
}

.pricing-plan-card__limit {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.45;
  color: #0f766e;
  background: rgba(13, 148, 136, 0.1);
  border: 1px solid rgba(13, 148, 136, 0.2);
}

.pricing-plan-card__app-block {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--plan-accent-soft);
  border: 1px solid rgba(var(--primary-color-rgb), 0.08);
}

.pricing-plan-card__app-intro {
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ch-muted, #5b6478);
}

.pricing-plan-card__app-desc {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ch-muted, #5b6478);
}

.pricing-plan-card__sections {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pricing-plan-section__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-bottom: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--primary-color-2, #2E44FC);
}

.pricing-plan-section__title::after {
  content: "";
  flex-basis: 100%;
  margin: 12px 0 10px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--plan-accent-rgb, var(--primary-color-rgb)), 0.1) 16%,
    rgba(var(--plan-accent-rgb, var(--primary-color-rgb)), 0.3) 50%,
    rgba(var(--plan-accent-rgb, var(--primary-color-rgb)), 0.1) 84%,
    transparent 100%
  );
}

html[lang^="fa"] .pricing-plan-section__title {
  font-family: var(--font-farsi-heading), var(--font-farsi), Tahoma, system-ui, sans-serif;
  font-weight: 900;
  line-height: 1.55;
}

.pricing-plan-section__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--primary-color-2, #2E44FC);
}

.pricing-plan-section__icon svg {
  width: 100%;
  height: 100%;
}

.pricing-plan-section__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pricing-plan-section__list li {
  position: relative;
  padding-inline-start: 16px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ch-muted, #5b6478);
}

.pricing-plan-section__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--plan-accent);
  opacity: 0.75;
}

.pricing-plan-card__cta {
  flex-shrink: 0;
  margin-top: 16px;
  padding-top: 18px;
}

.pricing-plan-card__cta::before {
  content: "";
  display: block;
  margin-bottom: 18px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--plan-accent-rgb, var(--primary-color-rgb)), 0.12) 18%,
    rgba(var(--plan-accent-rgb, var(--primary-color-rgb)), 0.34) 50%,
    rgba(var(--plan-accent-rgb, var(--primary-color-rgb)), 0.12) 82%,
    transparent 100%
  );
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.pricing-plan-card__cta .saaslyn-3-btn {
  width: 100%;
  min-height: 46px;
}

html[dir="rtl"] .pricing-plan-section__list li {
  text-align: right;
}

html[data-theme="dark"] .pricing-plan-card {
  background: var(--ch-surface);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .pricing-plan-card:hover {
  box-shadow: 0 30px 62px -24px rgba(0, 0, 0, 0.72);
}

html[data-theme="dark"] .pricing-plan-card__header {
  background: linear-gradient(
    165deg,
    var(--plan-accent-soft) 0%,
    rgba(255, 255, 255, 0) 72%
  );
}

html[data-theme="dark"] .pricing-plan-card__header::after,
html[data-theme="dark"] .pricing-plan-card__intro::after,
html[data-theme="dark"] .pricing-plan-section__title::after,
html[data-theme="dark"] .pricing-plan-card__cta::before {
  box-shadow: none;
}

html[data-theme="dark"] .pricing-plan-card__price-panel {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%),
    linear-gradient(135deg, var(--plan-accent-soft) 0%, transparent 72%);
  border-color: rgba(var(--plan-accent-rgb, var(--primary-color-rgb)), 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 24px -18px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .pricing-plan-card__price-panel.is-featured {
  border-color: rgba(var(--ch-accent-rgb), 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(var(--plan-accent-rgb, var(--primary-color-rgb)), 0.22),
    0 14px 30px -16px rgba(0, 0, 0, 0.62);
}

html[data-theme="dark"] .pricing-plan-card__name {
  color: var(--ch-text);
}

html[data-theme="dark"] .pricing-plan-card__app-intro,
html[data-theme="dark"] .pricing-plan-section__title {
  color: var(--ch-text);
}

html[data-theme="dark"] .pricing-plan-card__details-viewport::before {
  background: linear-gradient(
    180deg,
    rgba(37, 37, 39, 0) 0%,
    rgba(37, 37, 39, 0.55) 55%,
    rgba(37, 37, 39, 0.9) 100%
  );
}

html[data-theme="dark"] .pricing-plan-card__scroll-hint-track {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .pricing-plan-card__community-flag,
html[data-theme="dark"] .pricing-plan-card__community-more {
  border-color: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .pricing-plan-card__community-flag {
  background: var(--ch-surface);
}

html[data-theme="dark"] .pricing-plan-card__tagline,
html[data-theme="dark"] .pricing-plan-card__community-label,
html[data-theme="dark"] .pricing-plan-card__app-desc,
html[data-theme="dark"] .pricing-plan-card__price-period,
html[data-theme="dark"] .pricing-plan-section__list li {
  color: var(--ch-muted);
}

html[data-theme="dark"] .pricing-plan-card__limit {
  color: #5eead4;
  background: rgba(13, 148, 136, 0.16);
  border-color: rgba(13, 148, 136, 0.28);
}

html[data-theme="dark"] .pricing-plan-card__app-block {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .pricing-plan-card.is-featured {
  border-color: rgba(var(--ch-accent-rgb), 0.45);
}

html[data-theme="dark"] .pricing-plan-card__cta .saaslyn-3-btn {
  color: var(--primary-color);
}

html[data-theme="dark"] .pricing-plan-card:hover .pricing-plan-card__cta .saaslyn-3-btn,
html[data-theme="dark"] .pricing-plan-card.is-featured .pricing-plan-card__cta .saaslyn-3-btn {
  background-color: var(--ch-accent);
  color: var(--primary-color);
  border-color: var(--ch-accent);
}

@media (max-width: 767.98px) {
  .pricing-plan-card {
    min-height: 580px;
    max-height: none;
  }

  .pricing-plan-card__details-viewport {
    max-height: 360px;
  }

  .pricing-plan-card.is-featured .pricing-plan-card__details-viewport {
    max-height: 380px;
  }

  .pricing-plan-card__header,
  .pricing-plan-card__body {
    padding-inline: 20px;
  }

  .pricing-plan-card__price-amount {
    font-size: 1.6rem;
  }

  .pricing-plan-card__price-panel.is-featured .pricing-plan-card__price-amount {
    font-size: 1.8rem;
  }
}

/* ============================================================
   Localization skeleton — comprehensive placeholder shown while
   the locale is switching (overlay) and on hard navigation
   (app/[locale]/loading.tsx). Mirrors the real section layout.
   ============================================================ */
.locale-skeleton-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  overflow-x: hidden;
  overflow-y: auto;
  /* Instantly opaque — no fade/slide, so the underlying content swap and
     RTL↔LTR flip are never visible during a language change. */
  background: #ffffff;
}
html[data-theme="dark"] .locale-skeleton-overlay {
  background: #0b0f17;
}
body.locale-switching {
  overflow: hidden;
}

.sk-page {
  padding-bottom: 48px;
}

/* Base shimmer block */
.sk {
  display: block;
  background: rgba(var(--ch-text-rgb), 0.09);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
html[data-theme="dark"] .sk {
  background: rgba(255, 255, 255, 0.07);
}
.sk::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--ch-text-rgb), 0.06),
    transparent
  );
  animation: sk-shimmer 1.5s infinite;
}
html[data-theme="dark"] .sk::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}
@keyframes sk-shimmer {
  100% {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sk::after,
  .locale-skeleton-overlay {
    animation: none;
  }
}

/* Block variants */
.sk--pill {
  border-radius: 999px;
}
.sk--circle {
  border-radius: 50%;
}
.sk-line {
  height: 14px;
  border-radius: 7px;
  margin-bottom: 12px;
}
.sk-line:last-child {
  margin-bottom: 0;
}
.sk-title {
  height: 32px;
  border-radius: 10px;
}
.sk-title-lg {
  height: 46px;
  border-radius: 14px;
  margin: 0 auto 14px;
}
.sk-btn {
  height: 52px;
  border-radius: 999px;
}
.sk-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
}
.sk-thumb {
  width: 100%;
  border-radius: 24px;
}

/* Layout scaffolding */
.sk-section {
  padding: 58px 0;
}
.sk-row-top {
  margin-top: 44px;
}
.sk-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

/* Header (chrome) */
.sk-chrome {
  padding: 22px 0;
}
.sk-chrome__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.sk-chrome__nav {
  display: flex;
  gap: 22px;
}
.sk-chrome__nav .sk-line {
  margin-bottom: 0;
}
.sk-chrome__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media only screen and (max-width: 991.98px) {
  .sk-chrome__nav {
    display: none;
  }
  .sk-chrome__actions .sk--pill {
    display: none;
  }
}

/* Hero */
.sk-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 30px;
  text-align: center;
}
.sk-hero__thumb {
  height: 460px;
  max-width: 900px;
  margin-top: 30px;
}
@media only screen and (max-width: 767.98px) {
  .sk-hero__thumb {
    height: 280px;
  }
}

/* Generic card */
.sk-card {
  background: rgba(var(--ch-text-rgb), 0.03);
  border: 1px solid var(--ch-border);
  border-radius: 24px;
  padding: 30px;
}
html[data-theme="dark"] .sk-card {
  background: rgba(255, 255, 255, 0.02);
}
.sk-card--step,
.sk-card--benefit {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.sk-card--plan {
  text-align: center;
}
.sk-card--plan.is-active {
  border-color: rgba(var(--primary-color-2-rgb, 70, 66, 252), 0.4);
}
.sk-plan-body {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--ch-border);
}
.sk-plan-body .sk-line {
  margin-left: auto;
  margin-right: auto;
}

/* Features (image beside list) */
.sk-feature-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.sk-feature {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sk-feature__text {
  flex: 1;
}
.sk-feature__text .sk-line {
  margin-bottom: 10px;
}

/* Testimonials */
.sk-testi {
  position: relative;
  max-width: 760px;
  margin: 44px auto 0;
  padding: 24px 0;
  text-align: center;
}
.sk-testi__float {
  position: absolute;
  width: 84px;
  height: 84px;
}
.sk-testi__float--2,
.sk-testi__float--3 {
  width: 60px;
  height: 60px;
}
.sk-testi__float--1 {
  inset-inline-start: -30px;
  bottom: 40%;
}
.sk-testi__float--2 {
  inset-inline-start: 20px;
  top: -6px;
}
.sk-testi__float--3 {
  inset-inline-end: 20px;
  top: -6px;
}
.sk-testi__float--4 {
  inset-inline-end: -30px;
  bottom: 40%;
}
@media only screen and (max-width: 991.98px) {
  .sk-testi__float {
    display: none;
  }
}

/* FAQ */
.sk-faq-row {
  height: 66px;
  border-radius: 16px;
  margin-bottom: 16px;
}

/* CTA banner */
.sk-cta {
  height: 280px;
  border-radius: 32px;
}

/* Footer */
.sk-footer {
  margin-top: 40px;
  padding: 44px 0;
  border-top: 1px solid var(--ch-border);
}
.sk-footer__social {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

/* ---------- Tighten the hero -> "how it works" gap --------------- */
/* The template ships 120px of top padding on the first section after the
   hero, which left a large void under the banner. Pull it in. */
.work.section.section-padding-top {
  padding-top: 64px;
}
@media only screen and (max-width: 991.98px) {
  .work.section.section-padding-top {
    padding-top: 40px;
  }
}

/* ---------- Video showcase (product demo) ------------------------ */
/* A bare, rounded, soft-shadowed autoplay/loop clip that blends into the
   shared page gradient. Sits right after "how it works". */
.video-showcase.section {
  background: transparent;
  padding-top: 72px;
}
@media only screen and (max-width: 991.98px) {
  .video-showcase.section {
    padding-top: 44px;
  }
}
.video-showcase__desc {
  margin-top: 14px;
  color: var(--ch-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}
/* ---------- Modern video player chrome --------------------------- */
.video-player {
  position: relative;
  max-width: 1040px;
  margin-inline: auto;
  margin-top: 44px;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 1280 / 760;
  background: #0b0e1a;
  box-shadow:
    0 40px 80px -30px rgba(var(--primary-color-2-rgb, 65, 59, 220), 0.42),
    0 14px 32px -18px rgba(15, 20, 40, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.5);
  isolation: isolate;
}
html[data-theme="dark"] .video-player {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 44px 90px -30px rgba(0, 0, 0, 0.72),
    0 14px 34px -18px rgba(0, 0, 0, 0.62);
}
.video-player__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.video-player:fullscreen {
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: #000;
}
.video-player:fullscreen .video-player__media {
  object-fit: contain;
}

/* Center play/pause affordance — big, soft, glassy. */
.video-player__center {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.video-player:hover .video-player__center,
.video-player[data-playing="false"] .video-player__center {
  opacity: 1;
}
.video-player__center-btn {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  color: #fff;
  background: rgba(var(--primary-color-2-rgb, 65, 59, 220), 0.82);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.5);
  transform: scale(1);
  transition: transform 0.2s ease, background 0.2s ease;
}
.video-player__center:hover .video-player__center-btn {
  transform: scale(1.06);
  background: rgba(var(--primary-color-2-rgb, 65, 59, 220), 0.95);
}

/* Bottom control bar over a gradient scrim. */
.video-player__controls {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 26px 16px 12px;
  background: linear-gradient(to top, rgba(6, 9, 18, 0.82) 0%, rgba(6, 9, 18, 0.36) 55%, transparent 100%);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.video-player:hover .video-player__controls,
.video-player[data-playing="false"] .video-player__controls,
.video-player:focus-within .video-player__controls {
  opacity: 1;
  transform: translateY(0);
}
.video-player__btn {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: transparent;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.video-player__btn:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}
.video-player__track {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  cursor: pointer;
}
.video-player__track:hover {
  height: 8px;
}
.video-player__fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--primary-color, #2E44FC),
    var(--ch-accent, #e5e6e7)
  );
}
.video-player__thumb {
  position: absolute;
  right: 0;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transform: translate(50%, -50%) scale(0);
  transition: transform 0.15s ease;
}
.video-player__track:hover .video-player__thumb {
  transform: translate(50%, -50%) scale(1);
}
.video-player__time {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.92);
  min-width: 82px;
  text-align: center;
}
@media only screen and (max-width: 767.98px) {
  .video-player {
    border-radius: 16px;
    margin-top: 30px;
  }
  .video-player__center-btn {
    width: 60px;
    height: 60px;
  }
  .video-player__time {
    display: none;
  }
  .video-player__controls {
    gap: 8px;
    padding: 22px 10px 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .video-player__center,
  .video-player__controls,
  .video-player__center-btn,
  .video-player__btn,
  .video-player__thumb {
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* Pause the work-flow dots for users who prefer reduced motion. */
  .work-flow svg #dotLeft,
  .work-flow svg #dotRight {
    display: none;
  }
}

/* Scroll-to-top button with a scroll-progress ring. Uses logical properties so
   it sits in the trailing bottom corner for both LTR and RTL. */
.ch-scroll-top {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-end: 24px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 10px 30px -8px rgba(46, 68, 252, 0.4);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease,
    box-shadow 0.25s ease;
  z-index: 120;
}
.ch-scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ch-scroll-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -8px rgba(46, 68, 252, 0.5);
}
.ch-scroll-top__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ch-scroll-top__track {
  fill: none;
  stroke: rgba(46, 68, 252, 0.12);
  stroke-width: 3;
}
.ch-scroll-top__bar {
  fill: none;
  stroke: var(--primary-color);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s linear;
}
.ch-scroll-top__arrow {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  fill: var(--primary-color);
}

html[data-theme="dark"] .ch-scroll-top {
  background: var(--ch-surface-2);
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .ch-scroll-top:hover {
  box-shadow: 0 14px 34px -8px rgba(0, 0, 0, 0.75);
}
html[data-theme="dark"] .ch-scroll-top__track {
  stroke: rgba(229, 230, 231, 0.18);
}
html[data-theme="dark"] .ch-scroll-top__bar {
  stroke: var(--ch-accent);
}
html[data-theme="dark"] .ch-scroll-top__arrow {
  fill: var(--ch-accent);
}

/* Legal pages (privacy policy, terms) */
.legal-page {
  padding-block-end: clamp(3rem, 6vw, 5rem);
}
.legal-page__header {
  margin-block-end: clamp(2rem, 4vw, 3rem);
  padding-block-end: clamp(1.5rem, 3vw, 2rem);
  border-block-end: 1px solid rgba(46, 68, 252, 0.1);
}
.legal-page__eyebrow {
  margin-block-end: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary-color);
}
.legal-page__title {
  margin-block-end: 0.75rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.25;
  color: var(--heading-color);
}
.legal-page__meta {
  margin-block-end: 1.25rem;
  font-size: 0.9375rem;
  color: rgba(46, 68, 252, 0.65);
}
.legal-page__lead {
  margin-block-end: 0;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--paragraph-color);
}
.legal-page__body {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}
.legal-page__section {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(46, 68, 252, 0.08);
}
.legal-page__section-title {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-block-end: 1rem;
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  line-height: 1.4;
  color: var(--heading-color);
}
.legal-page__section-index {
  flex-shrink: 0;
  min-width: 2rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--primary-color);
  opacity: 0.75;
}
.legal-page__paragraph {
  margin-block-end: 0.875rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--paragraph-color);
}
.legal-page__paragraph:last-child {
  margin-block-end: 0;
}
.legal-page__list {
  margin-block: 0.75rem 0;
  padding-inline-start: 1.25rem;
}
.legal-page__list li {
  margin-block-end: 0.5rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--paragraph-color);
}
.legal-page__list li:last-child {
  margin-block-end: 0;
}
.legal-page__footer {
  margin-block-start: clamp(2rem, 4vw, 3rem);
  padding-block-start: 1.5rem;
  border-block-start: 1px solid rgba(46, 68, 252, 0.1);
}
html[data-theme="dark"] .legal-page__header {
  border-block-end-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .legal-page__meta {
  color: rgba(255, 255, 255, 0.55);
}
html[data-theme="dark"] .legal-page__section {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .legal-page__footer {
  border-block-start-color: rgba(255, 255, 255, 0.08);
}

/* Template testimonial stars default to Bootstrap yellow — use brand blue. */
.testimonial-3__item .item-content .item-header .rating-stars ul li {
  color: var(--primary-color, #2E44FC);
}