@font-face {
  font-family: Dana;
  src: url("../fonts/DanaFaNum-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Dana;
  src: url("../fonts/DanaFaNum-DemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Dana;
  src: url("../fonts/DanaFaNum-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Dana;
  src: url("../fonts/DanaFaNum-Black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}

:root {
  --primary: #6c4099;
  --primary-dark: #543277;
  --accent: #2bb673;
  --accent-dark: #229a5e;
  --text: #101828;
  --muted: #667085;
  --border: #e4e7ec;
  --surface: #f9fafb;
  --dark: #080511;
  --radius: 12px;
  --shadow: 0 18px 50px rgba(17, 12, 34, 0.1);
  --nf-icon-purple-filter: invert(32%) sepia(22%) saturate(1785%) hue-rotate(230deg) brightness(88%) contrast(91%);
  --nf-icon-purple-bright-filter: invert(49%) sepia(65%) saturate(2713%) hue-rotate(235deg) brightness(99%) contrast(95%);
  --nf-icon-purple-soft-filter: invert(77%) sepia(21%) saturate(1125%) hue-rotate(225deg) brightness(98%) contrast(91%);
  --nf-icon-stats-filter: brightness(0) saturate(100%) invert(50%) sepia(22%) saturate(1120%) hue-rotate(230deg) brightness(86%) contrast(88%);
  --nf-icon-green-filter: invert(52%) sepia(66%) saturate(529%) hue-rotate(98deg) brightness(91%) contrast(90%);
  --nf-icon-blue-filter: invert(44%) sepia(99%) saturate(1843%) hue-rotate(202deg) brightness(98%) contrast(94%);
  --nf-icon-purple-solid-filter: brightness(0) saturate(100%) invert(31%) sepia(32%) saturate(1546%) hue-rotate(235deg) brightness(87%) contrast(89%);
  --nf-icon-white-filter: brightness(0) invert(1);
  --nf-footer-contact-filter: brightness(0) saturate(100%) invert(42%) sepia(23%) saturate(1118%) hue-rotate(229deg) brightness(91%) contrast(86%);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: Dana, Tahoma, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  overflow-x: hidden;
}

/* Dana's digit glyphs are drawn in a Persian numeral style; English pages
   need Western digit shapes, so swap to a Latin-native font stack. */
html[dir="ltr"] body {
  font-family: Tahoma, "Segoe UI", Arial, sans-serif;
}

html[dir="ltr"] #advantages .adv-layout {
  grid-template-columns: 1.15fr 0.85fr !important;
}

html[dir="ltr"] #advantages .adv-hub {
  order: 0 !important;
}

html[dir="ltr"] #advantages .adv-panel {
  direction: ltr !important;
  margin-left: 0 !important;
  order: 0 !important;
  text-align: left !important;
}

html[dir="ltr"] #advantages .adv-panel-label {
  justify-content: flex-start !important;
}

html[dir="ltr"] #advantages .adv-panel-benefits {
  direction: ltr !important;
}

html[dir="ltr"] #advantages .adv-panel-benefits li {
  direction: ltr !important;
  text-align: left !important;
}

html[dir="ltr"] #faq,
html[dir="ltr"] #faq .faq-list,
html[dir="ltr"] #faq .faq-item,
html[dir="ltr"] #faq .faq-a,
html[dir="ltr"] #faq .faq-a-inner,
html[dir="ltr"] #faq .faq-bottom-cta,
html[dir="ltr"] #faq .faq-bottom-text {
  direction: ltr !important;
  text-align: left !important;
}

/* The LTR reset above flattens the whole FAQ to text-align:left with
   !important. The answer body is prose, so it opts back into the justified
   treatment used on feature pages, keeping the two languages consistent. */
html[dir="ltr"] .feature-single #faq .faq-a-inner {
  text-align: justify !important;
}

html[dir="ltr"] #faq .faq-q {
  direction: ltr !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  text-align: left !important;
}

html[dir="ltr"] #faq .faq-arrow {
  margin-left: auto !important;
  margin-right: 0 !important;
}

@media (max-width: 960px) {
  html[dir="ltr"] #advantages .adv-layout {
    grid-template-columns: 1fr !important;
  }

  html[dir="ltr"] #advantages .adv-hub {
    order: 1 !important;
  }

  html[dir="ltr"] #advantages .adv-panel {
    margin-left: auto !important;
    margin-right: auto !important;
    order: 2 !important;
  }
}

html[dir="ltr"] iconify-icon[icon*="arrow-left"],
html[dir="ltr"] iconify-icon[icon*="arrow-right"],
html[dir="ltr"] iconify-icon[icon*="caret-left"],
html[dir="ltr"] iconify-icon[icon*="caret-right"],
html[dir="ltr"] iconify-icon[icon*="chevron-left"],
html[dir="ltr"] iconify-icon[icon*="chevron-right"],
html[dir="ltr"] .breadcrumb-sep,
html[dir="ltr"] .atlas-breadcrumb .crumb-sep,
html[dir="ltr"] .arc-card-more svg,
html[dir="ltr"] .pagination .pg-btn svg,
html[dir="ltr"] .img-slider-btn svg {
  display: inline-flex;
  transform: rotate(180deg) !important;
}

html[dir="ltr"] .related-all-arrow {
  transform: rotate(180deg) !important;
}

html[dir="ltr"] .author-card {
  direction: ltr !important;
  text-align: left !important;
}

html[dir="ltr"] .author-card > div:last-child,
html[dir="ltr"] .author-name,
html[dir="ltr"] .author-role,
html[dir="ltr"] .author-bio {
  text-align: left !important;
}

html[dir="ltr"] .img-slider-btn.prev {
  right: auto !important;
  left: 14px !important;
}

html[dir="ltr"] .img-slider-btn.next {
  left: auto !important;
  right: 14px !important;
}

html[dir="ltr"] .province-btn {
  direction: ltr;
  flex-direction: row;
  text-align: left;
}

html[dir="ltr"] .province-btn-body,
html[dir="ltr"] .province-btn-name,
html[dir="ltr"] .province-btn-tag {
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] .province-btn-chevron {
  margin-left: auto;
}

html[dir="ltr"] .nav-links > li > a::after,
html[dir="ltr"] .nav-has-dropdown > a::after {
  left: 12px !important;
  right: auto !important;
  width: calc(100% - 24px) !important;
  transform-origin: left !important;
}

html[dir="ltr"] .about-atlas .atlas-hero-grid,
html[dir="ltr"] .about-atlas .atlas-copy {
  direction: ltr;
}

html[dir="ltr"] .about-atlas .atlas-copy {
  text-align: left;
  justify-self: start;
}

html[dir="ltr"] .about-atlas .atlas-copy::before {
  inset: -34px -120px -36px -46px;
  background: radial-gradient(ellipse at 30% 48%, rgba(8, 5, 14, .78), rgba(8, 5, 14, .48) 52%, transparent 76%);
}

html[dir="ltr"] .about-atlas .atlas-breadcrumb,
html[dir="ltr"] .about-atlas .atlas-proof,
html[dir="ltr"] .about-atlas .atlas-actions {
  direction: ltr;
  justify-content: flex-start;
}

html[dir="ltr"] .about-atlas .atlas-breadcrumb {
  flex-wrap: wrap;
}

html[dir="ltr"] .about-atlas .atlas-breadcrumb .crumb-current,
html[dir="ltr"] .about-atlas .atlas-proof li {
  direction: ltr;
  flex-direction: row;
}

html[dir="ltr"] .about-atlas h1,
html[dir="ltr"] .about-atlas .atlas-copy p {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

html[dir="ltr"] .about-atlas .atlas-proof {
  gap: 12px 0;
}

html[dir="ltr"] .about-atlas .atlas-proof li {
  border-left: 0;
  border-right: 1px solid rgba(255, 255, 255, .2);
  padding: 0 16px;
  white-space: nowrap;
}

html[dir="ltr"] .about-atlas .atlas-proof li:first-child {
  padding-left: 0;
}

html[dir="ltr"] .about-atlas .atlas-proof li:last-child {
  border-right: 0;
  padding-right: 0;
}

html[dir="ltr"] .about-atlas .history-rail,
html[dir="ltr"] .about-atlas .history-readout {
  direction: ltr;
}

html[dir="ltr"] .about-atlas .history-point {
  text-align: left;
  padding: 0 18px 0 0;
}

html[dir="ltr"] .about-atlas .history-point::before {
  margin: -28px auto 18px 0;
}

html[dir="ltr"] .about-atlas .history-readout {
  border-right: 0;
  border-left: 3px solid var(--accent);
  padding: 4px 0 0 24px;
  text-align: left;
}

html[dir="ltr"] .about-atlas .history-readout p {
  margin-left: 0;
  margin-right: 0;
}

html[dir="ltr"] .about-atlas .gallery-nav.prev {
  right: auto;
  left: 16px;
}

html[dir="ltr"] .about-atlas .gallery-nav.next {
  right: 16px;
  left: auto;
}

html[dir="ltr"] .about-atlas .kpi-strip,
html[dir="ltr"] .about-atlas .kpi-item {
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] .about-atlas .kpi-item {
  border-left: 0;
  border-right: 1px solid rgba(23, 19, 29, .12);
}

html[dir="ltr"] .about-atlas .kpi-item:last-child {
  border-right: 0;
}

html[dir="ltr"] .about-atlas .kpi-item::after {
  right: auto;
  left: 26px;
  transform-origin: left;
}

html[dir="ltr"] .contact-card {
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] .contact-cards > .contact-card::before,
html[dir="ltr"] .info-panel .contact-card::before,
html[dir="ltr"] .contact-card::before {
  right: auto !important;
  left: 0 !important;
  border-radius: 0 0 3px 3px !important;
}

html[dir="ltr"] .contact-card-body,
html[dir="ltr"] .contact-card-label,
html[dir="ltr"] .contact-card-value,
html[dir="ltr"] .contact-card-note {
  direction: ltr;
  text-align: left;
}

@media (max-width: 640px) {
  html[dir="ltr"] .about-atlas .atlas-copy::before {
    inset: -24px;
  }

  html[dir="ltr"] .about-atlas .atlas-proof {
    gap: 8px;
  }

  html[dir="ltr"] .about-atlas .atlas-proof li {
    width: auto;
    border-right: 0;
    padding: 0;
  }

  html[dir="ltr"] .about-atlas .kpi-item {
    border-right: 0;
  }
}

@media (max-width: 1024px) {
  html[dir="ltr"] .about-atlas .history-point {
    text-align: center;
    padding: 0 10px 88px;
  }

  html[dir="ltr"] .about-atlas .history-point:nth-child(even) {
    padding: 88px 10px 0;
  }

  html[dir="ltr"] .about-atlas .history-point::before,
  html[dir="ltr"] .about-atlas .history-point.is-active::before {
    right: 50%;
    margin: 0;
    transform: translate(50%, -50%);
  }

  html[dir="ltr"] .about-atlas .history-point.is-active::before {
    transform: translate(50%, -50%) scale(1.12);
  }

  html[dir="ltr"] .about-atlas .kpi-item:nth-child(2n) {
    border-right: 0;
  }
}

a {
  color: inherit;
  text-decoration: none;
}

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

html[dir="ltr"] .agency-sidebar,
html[dir="ltr"] .agency-sidebar .sidebar-info-title,
html[dir="ltr"] .agency-sidebar .sidebar-info-sub,
html[dir="ltr"] .agency-sidebar .step-title,
html[dir="ltr"] .agency-sidebar .step-desc {
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] .agency-sidebar .sidebar-step {
  direction: ltr;
}

html[dir="ltr"] .agency-sidebar .sidebar-step:not(:last-child)::after {
  right: auto !important;
  left: 15px !important;
}

@media (min-width: 1025px) {
  #form-section .agency-layout {
    align-items: start !important;
    overflow: visible !important;
  }

  #form-section .agency-sidebar {
    position: sticky !important;
    top: 120px !important;
    align-self: start !important;
    height: max-content !important;
    overflow: visible !important;
    transform: none !important;
    z-index: 2;
  }

  #form-section .agency-sidebar.reveal,
  #form-section .agency-sidebar.reveal.visible {
    transform: none !important;
  }

  #form-section .agency-sidebar .sidebar-sticky {
    position: static !important;
    top: auto !important;
  }

  body.admin-bar #form-section .agency-sidebar {
    top: 152px !important;
  }
}

:where(.hero-trust-item, .use-ico, .point-ico, .biz-ico, .feature-icon, .benefit-icon, .net-icon, .support-badge-icon, .sidebar-step-num, .sidebar-contact-box-title, .sidebar-contact-item, .branch-detail-row-icon, .province-btn-icon, .faq-bottom-btn, .post-meta-item, .arc-card-date, .arc-readtime, .card-icon) img[src*="/nexfon-icons/"] {
  filter: var(--nf-icon-purple-filter);
}

.hero-trust-item img[src*="/nexfon-icons/"],
#hero .hero-trust-item img[src*="/nexfon-icons/"] {
  filter: var(--nf-icon-purple-bright-filter);
}

:where(#line5 .point-ico, .cperk-ico, .num-trust-item, .consult-success-ico, .benefit-map-head .benefit-icon) img[src*="/nexfon-icons/"] {
  filter: var(--nf-icon-green-filter);
}

.support-badge:nth-child(2) .support-badge-icon img[src*="/nexfon-icons/"] {
  filter: var(--nf-icon-green-filter);
}

.support-badge:nth-child(3) .support-badge-icon img[src*="/nexfon-icons/"] {
  filter: var(--nf-icon-blue-filter);
}

.net-icon img[src*="/nexfon-icons/"] {
  filter: none;
}

.hero-trust-item img[src*="product-line8-"],
.use-ico img[src*="product-line8-"],
.hero-trust-item img[src*="product-country-"],
.use-ico img[src*="product-country-"] {
  filter: none;
}

:where(.pf-ico, .price-factors .pf-ico) img[src*="/nexfon-icons/"] {
  filter: var(--nf-icon-purple-soft-filter);
}

:where(.btn, .fsubmit, .gform_button, .pf-btn, .footer-social a:hover, .province-item.active .province-btn-icon, .step-icon-wrap, .adv-node:hover .adv-node-dot) img[src*="/nexfon-icons/"] {
  filter: var(--nf-icon-white-filter);
}

.feature-info-icon img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(32%) saturate(1546%) hue-rotate(235deg) brightness(87%) contrast(89%) !important;
  opacity: 1;
}

.footer-social img[src*="/nexfon-icons/"] {
  /* Full white: at .55 these read as grey smudges against the dark footer. */
  filter: var(--nf-icon-white-filter);
  opacity: 1;
}

.footer-contact-icon img[src*="/nexfon-icons/"] {
  filter: var(--nf-footer-contact-filter);
  opacity: 1;
}

.adv-node-dot img[src*="/nexfon-icons/"] {
  filter: none;
  opacity: 1;
}

.adv-node:hover .adv-node-dot img[src*="/nexfon-icons/"],
.footer-social a:hover img[src*="/nexfon-icons/"] {
  opacity: 1;
}

.footer-contact-list + .footer-social {
  margin-top: 34px;
}

.call-btn.decline img[src*="/nexfon-icons/"] {
  filter: invert(42%) sepia(89%) saturate(1676%) hue-rotate(330deg) brightness(98%) contrast(93%);
}

.call-btn.accept img[src*="/nexfon-icons/"] {
  filter: var(--nf-icon-green-filter);
}

button,
input,
textarea,
select {
  font: inherit;
}

.container {
  width: min(1200px, calc(100% - 40px));
  margin-inline: auto;
}

.section {
  padding: 72px 0;
}

.section-header {
  margin-bottom: 32px;
}

.section-header.centered {
  text-align: center;
}

.section-header.centered .section-sub {
  margin-inline: auto;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 800;
}

.section-label::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.section-title {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.45rem, 2.4vw, 2.35rem);
  font-weight: 900;
  line-height: 1.35;
}

.section-sub {
  max-width: 620px;
  margin: 10px 0 0;
  color: var(--muted);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-lg {
  min-height: 48px;
  padding-inline: 24px;
}

.btn-sm {
  min-height: 36px;
  padding-inline: 14px;
  font-size: 0.82rem;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-dark);
}

.btn-purple {
  background: var(--primary);
  color: #fff;
}

.btn-purple:hover {
  background: var(--primary-dark);
}

.btn-outline,
.btn-outline-white {
  background: transparent;
  border-color: currentColor;
  color: var(--primary);
}

.btn-outline-white {
  color: #fff;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(228, 231, 236, 0.8);
  backdrop-filter: blur(14px);
}

.nexfon-dark-hero .site-header.nav-dark,
.single-nexfon_feature .site-header.nav-dark,
.post-type-archive-nexfon_feature .site-header.nav-dark {
  background:
    radial-gradient(circle at 50% 50%, rgba(196, 160, 255, .2) 0 1.5px, transparent 1.8px) center / 48px 48px,
    linear-gradient(rgba(139, 92, 246, .1) 1px, transparent 1px) center / 48px 48px,
    linear-gradient(90deg, rgba(139, 92, 246, .1) 1px, transparent 1px) center / 48px 48px,
    radial-gradient(circle at 82% -44%, rgba(139, 92, 246, .42) 0%, rgba(111, 68, 168, .17) 42%, transparent 72%),
    linear-gradient(180deg, rgba(14, 8, 24, .98) 0%, rgba(8, 6, 14, .99) 100%);
  border-bottom: 0;
  box-shadow: none;
  color: rgba(255, 255, 255, .74);
  backdrop-filter: blur(14px);
}

.nexfon-dark-hero .site-header:not(.scrolled),
.single-nexfon_feature .site-header:not(.scrolled),
.post-type-archive-nexfon_feature .site-header:not(.scrolled) {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  width: 100%;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
}

body.admin-bar.single-nexfon_feature .site-header:not(.scrolled),
body.admin-bar.post-type-archive-nexfon_feature .site-header:not(.scrolled) {
  inset-block-start: 32px;
}

.nexfon-dark-hero .site-header:not(.scrolled) .nav-links a,
.single-nexfon_feature .site-header:not(.scrolled) .nav-links a,
.nexfon-dark-hero .site-header.nav-dark .nav-links a,
.single-nexfon_feature .site-header.nav-dark .nav-links a,
.post-type-archive-nexfon_feature .site-header:not(.scrolled) .nav-links a,
.post-type-archive-nexfon_feature .site-header.nav-dark .nav-links a {
  color: rgba(255, 255, 255, .72);
}

.nexfon-dark-hero .site-header:not(.scrolled) .nav-links a:hover,
.single-nexfon_feature .site-header:not(.scrolled) .nav-links a:hover,
.nexfon-dark-hero .site-header:not(.scrolled) .nav-links .current-menu-item > a,
.single-nexfon_feature .site-header:not(.scrolled) .nav-links .current-menu-item > a,
.nexfon-dark-hero .site-header.nav-dark .nav-links a:hover,
.single-nexfon_feature .site-header.nav-dark .nav-links a:hover,
.nexfon-dark-hero .site-header.nav-dark .nav-links .current-menu-item > a,
.single-nexfon_feature .site-header.nav-dark .nav-links .current-menu-item > a,
.post-type-archive-nexfon_feature .site-header:not(.scrolled) .nav-links a:hover,
.post-type-archive-nexfon_feature .site-header:not(.scrolled) .nav-links .current-menu-item > a,
.post-type-archive-nexfon_feature .site-header.nav-dark .nav-links a:hover,
.post-type-archive-nexfon_feature .site-header.nav-dark .nav-links .current-menu-item > a {
  color: #fff;
}

.nexfon-dark-hero .site-header.scrolled .nav-links a,
.single-nexfon_feature .site-header.scrolled .nav-links a,
.post-type-archive-nexfon_feature .site-header.scrolled .nav-links a {
  color: var(--muted);
}

.nexfon-dark-hero .site-header.scrolled .nav-links a:hover,
.single-nexfon_feature .site-header.scrolled .nav-links a:hover,
.nexfon-dark-hero .site-header.scrolled .nav-links .current-menu-item > a,
.single-nexfon_feature .site-header.scrolled .nav-links .current-menu-item > a,
.post-type-archive-nexfon_feature .site-header.scrolled .nav-links a:hover,
.post-type-archive-nexfon_feature .site-header.scrolled .nav-links .current-menu-item > a {
  color: var(--primary);
}

.nexfon-dark-hero .site-header .nav-toggle span,
.single-nexfon_feature .site-header .nav-toggle span,
.post-type-archive-nexfon_feature .site-header .nav-toggle span {
  background: #fff;
}

/* header.php renders the burger as an iconify glyph (not bars), so it needs an explicit
   colour while the header is transparent over the dark hero. It reverts to the default
   dark glyph once the header turns solid on scroll. */
.nexfon-dark-hero .site-header:not(.scrolled) .nav-toggle iconify-icon,
.single-nexfon_feature .site-header:not(.scrolled) .nav-toggle iconify-icon,
.post-type-archive-nexfon_feature .site-header:not(.scrolled) .nav-toggle iconify-icon {
  color: #fff;
}

.nexfon-dark-hero .site-header .language-switcher-toggle,
.single-nexfon_feature .site-header .language-switcher-toggle,
.post-type-archive-nexfon_feature .site-header .language-switcher-toggle {
  color: #c99bf0;
}

.nexfon-dark-hero .site-header .btn-outline,
.single-nexfon_feature .site-header .btn-outline,
.post-type-archive-nexfon_feature .site-header .btn-outline {
  background: #fff;
  border-color: rgba(201, 155, 240, .75);
  color: var(--primary);
}

body.admin-bar #navbar,
body.admin-bar .site-header {
  top: 32px;
}

body.admin-bar #mobile-menu,
body.admin-bar .mobile-menu {
  top: 32px;
  height: calc(100% - 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar #navbar,
  body.admin-bar .site-header {
    top: 46px;
  }

  body.admin-bar #mobile-menu,
  body.admin-bar .mobile-menu {
    top: 46px;
    height: calc(100% - 46px);
  }

  body.admin-bar.single-nexfon_feature .site-header:not(.scrolled),
  body.admin-bar.post-type-archive-nexfon_feature .site-header:not(.scrolled) {
    inset-block-start: 46px;
  }
}

.nav-inner {
  width: min(1200px, calc(100% - 40px));
  min-height: 64px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-logo,
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* A logo picked in the footer-logo setting is shown exactly as uploaded:
   sized to fit the slot, never recoloured. */
.footer-logo-custom {
  /* Explicit height, like the other two logo branches. An SVG <img> sized with
     height:auto + max-height inside this inline-flex parent collapses to zero
     width in Firefox, which left the footer with no logo at all. flex:0 0 auto
     stops the parent shrinking it for the same reason. */
  height: 72px;
  width: auto;
  max-width: 220px;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
}

.nav-logo-img {
  width: 36px;
  height: 36px;
}

.nav-logo-text-img {
  width: 92px;
}

.nexfon-dark-hero .nav-logo-text-img,
.single-nexfon_feature .nav-logo-text-img,
.post-type-archive-nexfon_feature .nav-logo-text-img {
  display: none;
}

.nexfon-dark-hero .nav-logo,
.single-nexfon_feature .nav-logo,
.post-type-archive-nexfon_feature .nav-logo {
  gap: 0;
}

/* The mark is dark purple, so it needs inverting while the header is transparent over
   the hero — it reverts once the header turns solid on scroll. */
.nexfon-dark-hero .site-header:not(.scrolled) .nav-logo-img {
  filter: brightness(0) invert(1);
}

.mobile-menu .nav-logo-text-img,
.mobile-close .nav-logo-text-img {
  display: none !important;
}

.mobile-menu .nav-logo,
.mobile-close .nav-logo {
  gap: 0;
  order: 0;
}

.mobile-panel {
  font-size: 14px;
}

.mobile-panel .mobile-nav-links a,
.mobile-panel .mobile-submenu-toggle {
  -webkit-tap-highlight-color: transparent;
}

.mobile-panel .btn {
  padding: 9px 20px;
  font-size: 0.875rem;
  font-weight: 600;
}

.mobile-panel .btn-outline {
  border: 1.5px solid var(--primary);
}

.mobile-panel .btn-outline:hover {
  background: var(--primary);
  color: #fff;
}

.nav-links,
.footer-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav-links {
  display: flex;
  list-style: none;
  padding: 0;
}

.nav-links {
  align-items: center;
  gap: 4px;
}

.nav-links > li > a {
  position: relative;
  display: block;
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

.nav-links > .menu-item-has-children > a::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.82;
  transform: translateY(-65%) rotate(45deg);
  transition: opacity 0.24s ease;
}

html[dir="rtl"] .nav-links > .menu-item-has-children > a {
  padding-left: 26px;
}

html[dir="rtl"] .nav-links > .menu-item-has-children > a::before {
  left: 12px;
  right: auto;
}

html[dir="ltr"] .nav-links > .menu-item-has-children > a {
  padding-right: 26px;
}

html[dir="ltr"] .nav-links > .menu-item-has-children > a::before {
  right: 12px;
  left: auto;
}

.nav-links > .menu-item-has-children:hover > a::before,
.nav-links > .menu-item-has-children:focus-within > a::before {
  opacity: 1;
}

.nav-links > li > a::after,
.nav-has-dropdown > a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-links > li > a:hover {
  color: var(--primary);
}

.nav-links > li > a:hover::after,
.nav-has-dropdown:hover > a::after,
.nav-has-dropdown:focus-within > a::after {
  transform: scaleX(1);
}

.nav-links .sub-menu {
  position: absolute;
  min-width: 190px;
  display: none;
  flex-direction: column;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}

.nav-links li {
  position: relative;
}

.nav-links li:hover > .sub-menu,
.nav-links li:focus-within > .sub-menu {
  display: flex;
}

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

.language-switcher {
  position: relative;
  display: inline-block;
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.language-switcher::after {
  content: "";
  position: absolute;
  z-index: 79;
  top: 100%;
  inset-inline: -10px;
  height: 12px;
}

.language-switcher-trigger {
  min-width: 50px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  text-decoration: none;
  transition: color 180ms ease, transform 180ms ease;
}

.language-switcher-trigger:hover,
.language-switcher:focus-within .language-switcher-trigger,
.language-switcher:hover .language-switcher-trigger {
  color: var(--primary-dark);
  transform: translateY(-1px);
}

.language-switcher iconify-icon {
  color: currentColor;
  display: block;
}

.language-switcher span {
  display: block;
  letter-spacing: 0;
}

.language-switcher-caret {
  transition: transform 180ms ease;
}

.language-switcher:hover .language-switcher-caret,
.language-switcher:focus-within .language-switcher-caret {
  transform: rotate(180deg);
}

.language-switcher-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 4px);
  inset-inline-end: 0;
  min-width: 112px;
  display: grid;
  gap: 4px;
  opacity: 0;
  padding: 8px;
  pointer-events: none;
  transform: translateY(6px);
  border: 1px solid rgba(108, 64, 153, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 45px rgba(16, 24, 40, 0.12);
  transition: opacity 180ms ease, transform 180ms ease;
}

.language-switcher:hover .language-switcher-menu,
.language-switcher:focus-within .language-switcher-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.language-switcher-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--text);
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}

.language-switcher-option small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.language-switcher-option:hover,
.language-switcher-option.is-active {
  background: rgba(108, 64, 153, 0.08);
  color: var(--primary);
}

html[dir="ltr"] .language-switcher-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}

.nav-toggle {
  display: none;
  border: 0;
  padding: 8px;
  background: none;
}

.nav-toggle iconify-icon {
  display: block;
  color: var(--text);
}

.nexfon-hero {
  position: relative;
  min-height: 680px;
  display: grid;
  align-items: center;
  padding: 92px 0 72px;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 25%, rgba(149, 74, 181, 0.32), transparent 28%),
    radial-gradient(circle at 80% 15%, rgba(43, 182, 115, 0.18), transparent 22%),
    linear-gradient(145deg, #0a0613 0%, #13091f 56%, #07040f 100%);
  color: #fff;
}

.hero-grid,
.rich-grid,
.consult-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
  align-items: center;
  gap: 54px;
}

.hero-copy h1,
.page-hero h1 {
  margin: 0;
  max-width: 720px;
  font-size: clamp(2.35rem, 5vw, 4.8rem);
  font-weight: 900;
  line-height: 1.18;
}

.hero-subtitle {
  max-width: 660px;
  color: rgba(255, 255, 255, 0.74);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
}

.hero-actions,
.cta-actions,
.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 32px;
}

.hero-metrics div,
.stat-card {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
}

.hero-metrics strong,
.stat-card strong {
  display: block;
  font-size: 1.45rem;
  font-weight: 900;
}

.hero-metrics span,
.stat-card span {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.84rem;
}

.hero-media {
  position: relative;
}

.hero-media::before {
  content: "";
  position: absolute;
  inset: 12% 8%;
  border-radius: 999px;
  background: rgba(43, 182, 115, 0.2);
  filter: blur(50px);
}

.hero-phone {
  position: relative;
  margin-inline: auto;
  max-height: 560px;
  object-fit: contain;
}

.page-hero {
  padding: 96px 0 70px;
  background:
    radial-gradient(circle at 20% 5%, rgba(108, 64, 153, 0.2), transparent 28%),
    linear-gradient(180deg, #fbf9ff 0%, #fff 100%);
}

.breadcrumb {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.82rem;
}

.cards-grid,
.stats-grid,
.customer-grid,
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.nex-card,
.archive-card {
  min-height: 100%;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.nex-card h3,
.archive-card h2 {
  margin: 12px 0 8px;
  font-size: 1.05rem;
}

.nex-card p,
.archive-card p {
  margin: 0;
  color: var(--muted);
}

.card-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  object-fit: cover;
}

.card-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(108, 64, 153, 0.08);
  color: var(--primary);
}

.text-link {
  display: inline-flex;
  margin-top: 14px;
  color: var(--primary);
  font-weight: 800;
}

.stats-section {
  padding: 52px 0;
  background: var(--dark);
  color: #fff;
}

.stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.faq-section {
  background: var(--surface);
}

.faq-section .faq-list {
  max-width: 880px;
  margin-inline: auto;
  display: grid;
  gap: 10px;
}

.faq-section .faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}

.faq-section .faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: right;
  font-weight: 800;
  cursor: pointer;
}

.faq-section .faq-a {
  padding: 0 20px 18px;
  color: var(--muted);
}

.cta-section {
  background: var(--dark);
  color: #fff;
}

.cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cta-box h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.8rem);
}

.cta-box p {
  max-width: 620px;
  color: rgba(255, 255, 255, 0.7);
}

.customer-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.customer-logo {
  display: grid;
  place-items: center;
  min-height: 108px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}

.customer-logo img {
  max-height: 54px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
}

.consult-section {
  background: linear-gradient(180deg, #fff 0%, #fbf9ff 100%);
}

.consult-perks {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.perk {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.perk strong {
  display: block;
}

.perk p {
  margin: 2px 0 0;
  color: var(--muted);
}

.form-card {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}

.nexfon-form {
  display: grid;
  gap: 14px;
}

.nexfon-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.nexfon-form input,
.nexfon-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 12px;
  color: var(--text);
}

.rich-media img,
.post-cover {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.rich-content {
  margin-top: 18px;
  color: var(--muted);
}

.map-canvas {
  min-height: 420px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.site-footer {
  padding: 56px 0 22px;
  background: #090510;
  color: rgba(255, 255, 255, 0.72);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1.1fr;
  gap: 34px;
}

.footer-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
  margin-top: 34px;
}

.footer-brand p {
  max-width: 320px;
}

.footer-col h2 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 0.92rem;
}

.footer-links {
  flex-direction: column;
  gap: 8px;
}

.footer-contact {
  display: grid;
  gap: 8px;
  font-style: normal;
}

/* ─── Mobile menu panel ───
   header.php ships this markup on every page, but the panel styling used to live only in
   home-original.css. Pages that enqueue main.css alone (plain WP pages) rendered the menu
   unstyled in the middle of the document, so the rules are mirrored here. */
#mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(16, 24, 40, 0);
  backdrop-filter: blur(0px);
  transition: background 0.28s ease, backdrop-filter 0.28s ease;
}

#mobile-menu.open {
  display: block;
}

#mobile-menu.open-active {
  background: rgba(16, 24, 40, 0.5);
  backdrop-filter: blur(4px);
}

.mobile-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  max-width: 85vw;
  height: 100%;
  padding: 24px;
  background: #fff;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

html[dir="ltr"] .mobile-panel {
  right: auto;
  left: 0;
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.12);
  transform: translateX(-100%);
}

#mobile-menu.open-active .mobile-panel {
  transform: translateX(0);
}

.mobile-close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.mobile-close .nav-logo {
  gap: 0;
}

.mobile-close .nav-logo-text-img {
  display: none !important;
}

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

.mobile-nav-links a {
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  color: var(--text);
  font-weight: 600;
}

.mobile-nav-links a:hover {
  background: var(--surface);
}

.mobile-submenu-toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mobile-submenu-caret {
  flex: 0 0 auto;
  color: var(--primary);
  transition: transform 0.22s ease;
}

.mobile-has-submenu.is-open > .mobile-submenu-toggle .mobile-submenu-caret {
  transform: rotate(180deg);
}

.mobile-subnav {
  display: flex;
  flex-direction: column;
  margin: 6px 14px 4px;
  padding-right: 12px;
  border-right: 2px solid var(--border);
  list-style: none;
}

html[dir="ltr"] .mobile-subnav {
  padding-right: 0;
  padding-left: 12px;
  border-right: 0;
  border-left: 2px solid var(--border);
}

.mobile-nav-links .mobile-has-submenu > .mobile-subnav {
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 0.26s ease, opacity 0.2s ease, margin 0.2s ease, visibility 0.2s ease;
}

.mobile-nav-links .mobile-has-submenu.is-open > .mobile-subnav {
  max-height: 360px;
  margin-top: 6px;
  margin-bottom: 4px;
  opacity: 1;
  visibility: visible;
}

.mobile-subnav a {
  color: var(--muted);
  font-size: 0.92rem;
}

/* Agents hero is centred in both languages. The breadcrumb is a flex row, so it needs
   justify-content rather than text-align; the kicker is inline-flex and follows the
   parent's text-align on its own. */
.agents-hero .feature-hero-simple-inner {
  text-align: center;
}

.agents-hero .feature-breadcrumb {
  justify-content: center;
}

.agents-hero .feature-hero-text {
  margin-inline: auto;
}

/* ─── Sales agents directory ───
   Uses the site's purple identity; the two-level accordion (province → agent) is what
   distinguishes it from the branches directory. */
.agents-section {
  --agents-accent: var(--primary);
  --agents-accent-dark: var(--primary-dark);
  --agents-tint: #f5effb;
  background: var(--surface);
}

.agents-label {
  color: var(--agents-accent);
}

.agents-layout {
  margin-top: 42px;
}

.agents-layout.has-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.agents-map-col {
  position: sticky;
  top: 96px;
}

/* In RTL the map leads (right column). English reads the other way, so the agent panel
   comes first and the map moves to the right. */
html[dir="ltr"] .agents-layout.has-map .agents-map-col {
  order: 2;
}

html[dir="ltr"] .agents-layout.has-map .agents-wrap {
  order: 1;
}

/* Matches the branches page map card: surface fill, 20px radius, soft shadow. */
.iran-map-wrap {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
}

.iran-map-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}

.iran-map-wrap svg .land {
  fill: #ede9f6;
  stroke: #fff;
  stroke-width: 1.5;
  cursor: default;
  transition: fill 0.25s ease;
}

/* Only provinces that actually have an agent are interactive. */
.iran-map-wrap svg .land.has-center {
  fill: #c4b0e0;
  cursor: pointer;
}

.iran-map-wrap svg .land.has-center:hover {
  fill: #a98ed2;
}

.iran-map-wrap svg .land.active {
  fill: var(--primary);
}

.agents-wrap {
  display: grid;
  gap: 14px;
}

.agents-layout:not(.has-map) .agents-wrap {
  max-width: 880px;
  margin-inline: auto;
}

@media (max-width: 900px) {
  .agents-layout.has-map {
    grid-template-columns: 1fr;
  }

  .agents-map-col {
    position: static;
    max-width: 460px;
    margin-inline: auto;
  }
}

/* Province selector chips (also the fallback when the map is hidden).
   Kept on a single scrollable line so the row stays tidy whether there are 3 provinces
   or all 31 — wrapping would otherwise push the panel far down the page. */
.agents-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(108, 64, 153, 0.35) transparent;
  overscroll-behavior-x: contain;
}

.agents-chips::-webkit-scrollbar {
  height: 6px;
}

.agents-chips::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(108, 64, 153, 0.28);
}

.agents-chip {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.agents-chip:hover {
  border-color: rgba(108, 64, 153, 0.34);
  color: var(--agents-accent);
}

.agents-chip.is-active {
  border-color: var(--agents-accent);
  background: var(--agents-accent);
  color: #fff;
}

/* Only the selected province's panel is rendered visible. */
.agents-panel-item {
  display: none;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(108, 64, 153, 0.06);
}

.agents-panel-item.is-active {
  display: block;
}

.agents-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.agents-panel-name {
  color: var(--agents-accent);
  font-size: 1rem;
  font-weight: 800;
}

.agents-panel-count {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--agents-tint);
  color: var(--agents-accent-dark);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.agent-caret {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
  transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.agents-province.is-open .agents-province-caret,
.agent-card.is-open .agent-caret {
  transform: rotate(180deg);
  border-color: var(--agents-accent);
  background: var(--agents-accent);
  color: #fff;
}

/* Collapse via max-height (the pattern the FAQ accordion already uses). The open height
   is measured in JS and then released to `none`, so nested agent cards can expand their
   parent province without clipping. */
.agents-province-body,
.agent-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.agents-province-list {
  display: grid;
  gap: 10px;
  padding: 0 16px 16px;
}

.agent-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}

.agent-card.is-open {
  border-color: rgba(108, 64, 153, 0.28);
  background: #fff;
}

.agent-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: start;
  cursor: pointer;
}

.agent-card.is-open .agent-btn {
  background: var(--agents-tint);
  color: var(--agents-accent-dark);
}

.agent-rows {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.agent-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 0.84rem;
  line-height: 1.9;
}

.agent-row-label {
  color: var(--muted);
  font-weight: 600;
}

.agent-row-value {
  color: var(--text);
  font-weight: 700;
  text-align: justify;
}

.agent-row-value a {
  color: var(--agents-accent);
  text-decoration: none;
}

.agents-empty {
  margin: 0;
  padding: 14px 16px;
  color: var(--muted);
  font-size: 0.84rem;
}

@media (max-width: 640px) {
  .agent-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.footer-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-trust a {
  display: inline-flex;
}

/* max-width:none keeps the seals from collapsing against their inline <a> wrapper
   under the theme's global img{max-width:100%} before the image loads. */
.footer-trust img {
  width: 40px;
  height: 40px;
  max-width: none;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  padding: 4px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 0;
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.82rem;
}

.page-shell {
  padding-top: 64px;
  padding-bottom: 72px;
}

.post-single,
.content-entry {
  max-width: 860px;
  margin-inline: auto;
}

.post-header h1,
.content-entry h1,
.archive-header h1 {
  margin: 0 0 24px;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.25;
}

.post-content {
  color: #344054;
  font-size: 1rem;
}

html[dir="ltr"] .prose ul,
html[dir="ltr"] .prose ol,
html[dir="ltr"] .post-content ul,
html[dir="ltr"] .post-content ol,
html[dir="ltr"] .entry-content ul,
html[dir="ltr"] .entry-content ol {
  direction: ltr;
  text-align: left;
  padding-right: 0 !important;
  padding-left: 22px !important;
}

html[dir="ltr"] .prose ul li,
html[dir="ltr"] .post-content ul li,
html[dir="ltr"] .entry-content ul li {
  text-align: left;
  padding-right: 0 !important;
  padding-left: 18px !important;
}

html[dir="ltr"] .prose ul li::before,
html[dir="ltr"] .post-content ul li::before,
html[dir="ltr"] .entry-content ul li::before {
  right: auto !important;
  left: 0 !important;
}

html[dir="ltr"] .prose ol li,
html[dir="ltr"] .post-content ol li,
html[dir="ltr"] .entry-content ol li {
  text-align: left;
  padding-right: 0 !important;
  padding-left: 4px !important;
}

html[dir="ltr"] .prose blockquote,
html[dir="ltr"] .post-content blockquote,
html[dir="ltr"] .entry-content blockquote {
  border-right: 0 !important;
  border-left: 4px solid var(--primary) !important;
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
  text-align: left;
}

html[dir="ltr"] .prose blockquote::before,
html[dir="ltr"] .post-content blockquote::before,
html[dir="ltr"] .entry-content blockquote::before {
  right: auto !important;
  left: 18px !important;
}

.archive-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  object-fit: cover;
}

.archive-card span {
  display: block;
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.8rem;
}

html[dir="ltr"] :where(
  .gform_wrapper .gfield_description,
  .gform_wrapper .gfield_instruction,
  .gform_wrapper .gfield_consent_description,
  .gform_wrapper .instruction,
  .gform_wrapper .gfield .description,
  .gform_wrapper .gfield_validation_message,
  .gform_wrapper .validation_message,
  .nexfon-gf-form .gfield_description,
  .nexfon-gf-form .gfield_instruction,
  .nexfon-gf-form .gfield_consent_description,
  .nexfon-gf-form .instruction,
  .nexfon-gf-form .gfield .description,
  .fgroup .field-help,
  .fgroup .field-note,
  .form-help,
  .form-note,
  .fnote,
  .helper-text,
  .help-text
) {
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] :where(
  .gform_wrapper input[type="text"],
  .gform_wrapper input[type="tel"],
  .gform_wrapper input[type="email"],
  .gform_wrapper input[type="url"],
  .gform_wrapper input[type="number"],
  .gform_wrapper input[type="password"],
  .gform_wrapper select,
  .gform_wrapper textarea,
  .nexfon-gf-form input[type="text"],
  .nexfon-gf-form input[type="tel"],
  .nexfon-gf-form input[type="email"],
  .nexfon-gf-form input[type="url"],
  .nexfon-gf-form input[type="number"],
  .nexfon-gf-form input[type="password"],
  .nexfon-gf-form select,
  .nexfon-gf-form textarea
) {
  direction: ltr !important;
  text-align: left !important;
}

html[dir="ltr"] :where(.gform_wrapper select, .nexfon-gf-form select),
html[dir="ltr"] body :where(
  .form-panel .nexfon-gf-contact select,
  .consult-card .nexfon-gf-line select,
  .nexfon-gf-agency select,
  #consult .nexfon-gf-consult #gform_fields_1 select
) {
  text-align-last: left !important;
  padding-right: 40px !important;
  padding-left: 14px !important;
  background-position: right 16px center !important;
}

html[dir="ltr"] body :where(
  .gform_wrapper select:hover,
  .gform_wrapper select:focus,
  .gform_wrapper select:active,
  .nexfon-gf-form select:hover,
  .nexfon-gf-form select:focus,
  .nexfon-gf-form select:active,
  .form-panel .nexfon-gf-contact select:hover,
  .form-panel .nexfon-gf-contact select:focus,
  .form-panel .nexfon-gf-contact select:active,
  .consult-card .nexfon-gf-line select:hover,
  .consult-card .nexfon-gf-line select:focus,
  .consult-card .nexfon-gf-line select:active,
  .nexfon-gf-agency select:hover,
  .nexfon-gf-agency select:focus,
  .nexfon-gf-agency select:active,
  #consult .nexfon-gf-consult #gform_fields_1 select:hover,
  #consult .nexfon-gf-consult #gform_fields_1 select:focus,
  #consult .nexfon-gf-consult #gform_fields_1 select:active
) {
  background-position: right 16px center !important;
}

html[dir="ltr"] :where(
  .gform_wrapper input::placeholder,
  .gform_wrapper textarea::placeholder,
  .nexfon-gf-form input::placeholder,
  .nexfon-gf-form textarea::placeholder
) {
  direction: ltr !important;
  text-align: left !important;
}

.feature-main {
  background: #fff;
}

.feature-hero-simple {
  position: relative;
  overflow: hidden;
  padding: 72px 0 84px;
  min-height: 360px;
  color: #fff;
  background: linear-gradient(160deg, #09090b 0%, #0f0f12 55%, #0a0810 100%);
  isolation: isolate;
}

.nexfon-dark-hero .feature-hero-simple,
.single-nexfon_feature .feature-hero-simple,
.post-type-archive-nexfon_feature .feature-hero-simple {
  background: linear-gradient(160deg, #09090b 0%, #0f0f12 55%, #0a0810 100%) !important;
}

.feature-hero-simple::before,
.feature-hero-simple::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: none;
}

.feature-hero-simple .ph-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.feature-hero-simple .ph-g1 {
  width: 800px;
  height: 800px;
  top: -260px;
  right: -140px;
  background: radial-gradient(circle, rgba(139, 92, 246, .38) 0%, rgba(111, 68, 168, .14) 45%, transparent 70%);
  filter: blur(80px);
  animation: phG1 30s ease-in-out infinite;
}

.feature-hero-simple .ph-g2 {
  width: 600px;
  height: 600px;
  bottom: -200px;
  left: -100px;
  background: radial-gradient(circle, rgba(109, 40, 217, .28) 0%, rgba(90, 40, 160, .08) 55%, transparent 72%);
  filter: blur(90px);
  animation: phG2 38s ease-in-out infinite;
}

.feature-hero-simple .ph-g3 {
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(167, 139, 250, .12) 0%, transparent 65%);
  filter: blur(60px);
  animation: phG1 22s ease-in-out infinite reverse;
}

.feature-hero-simple .ph-neon {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.feature-hero-simple .ph-neon::before,
.feature-hero-simple .ph-neon::after {
  content: "";
  position: absolute;
  inset: 0;
}

.feature-hero-simple .ph-neon::before {
  background-image:
    linear-gradient(rgba(139, 92, 246, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, .13) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 0%, transparent 75%);
}

.feature-hero-simple .ph-neon::after {
  background-image: radial-gradient(circle at center, rgba(196, 160, 255, .55) 0 1.5px, transparent 1.8px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, #000 10%, transparent 68%);
  mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, #000 10%, transparent 68%);
}

.feature-hero-simple-inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  text-align: center;
}

.feature-breadcrumb {
  display: flex;
  width: max-content;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 18px;
  color: rgba(255, 255, 255, .58);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
}

.feature-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.feature-breadcrumb a:hover {
  color: #c99bf0;
}

.feature-kicker {
  position: relative;
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 8px;
  margin: 0 auto 22px;
  padding: 5px 14px 5px 10px;
  border: 1px solid rgba(139, 92, 246, .22);
  border-radius: 100px;
  color: rgba(196, 160, 255, .8);
  background: rgba(111, 68, 168, .14);
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.8;
  overflow: hidden;
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 38px rgba(125, 75, 180, .16);
}

.feature-kicker::before {
  content: "";
  position: relative;
  z-index: 1;
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 999px;
  background: #8b5cf6;
  box-shadow: 0 0 8px rgba(139, 92, 246, .9);
  animation: featureKickerDotPulse 2.8s ease-in-out infinite;
}

.feature-kicker::after {
  content: "";
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(139, 92, 246, .35);
  transform: translateY(-50%) scale(1);
  animation: featureKickerHaloPulse 2.8s ease-out infinite;
  pointer-events: none;
}

@keyframes featureKickerDotPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .5;
    transform: scale(.8);
  }
}

@keyframes featureKickerHaloPulse {
  0% {
    opacity: .45;
    transform: translateY(-50%) scale(1);
  }

  70%,
  100% {
    opacity: 0;
    transform: translateY(-50%) scale(3.2);
  }
}

.feature-hero-simple h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2.5vw, 34px);
  line-height: 1.25;
  font-weight: 900;
}

.feature-hero-text {
  max-width: 760px;
  margin: 14px auto 0;
  color: rgba(255, 255, 255, .72);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.8;
  font-weight: 600;
}

.feature-cover {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  margin: 56px 0 0;
  border-radius: 28px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .14);
}

.feature-content > :where(.section, section) {
  margin: 0;
}

.feature-content > :not(.section):not(section) {
  width: min(100% - 40px, 920px);
  margin-right: auto;
  margin-left: auto;
}

.feature-content > :first-child {
  margin-top: 72px;
}

.feature-content > :last-child {
  margin-bottom: 72px;
}

.feature-content :where(p, li) {
  font-size: 14px;
  line-height: 1.9;
}

.feature-content :where(h2, h3, h4) {
  color: #101828;
}

.feature-content :where(h2) {
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.35;
}

.feature-content :where(h3) {
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.45;
}

.feature-content :where(h4) {
  font-size: 16px;
  line-height: 1.5;
}

.feature-content .section-label {
  font-size: 10px;
}

.feature-content .section-title {
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.35;
}

.feature-content .section-sub {
  font-size: 14px;
  line-height: 1.85;
}

.feature-content :where(ul, ol) {
  padding-inline-start: 1.4em;
}

.feature-archive-section {
  padding: 72px 0 96px;
}

.feature-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.feature-archive-card {
  display: flex;
  min-height: 280px;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid #e5e7ef;
  border-radius: 24px;
  color: #101828;
  text-decoration: none;
  background: #fff;
  box-shadow: 0 18px 52px rgba(16, 24, 40, .08);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.feature-archive-card:hover {
  transform: translateY(-4px);
  border-color: rgba(116, 68, 166, .35);
  box-shadow: 0 24px 70px rgba(116, 68, 166, .14);
}

.feature-archive-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  background: #f4f1fa;
}

.feature-archive-label {
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  color: #7444a6;
  background: #f3edf9;
  font-size: 10px;
  font-weight: 800;
}

.feature-archive-card h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}

.feature-archive-card p {
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.8;
}

.feature-empty {
  margin: 0;
  color: #667085;
  font-size: 14px;
  text-align: center;
}

.feature-component {
  padding: 72px 0;
}

.feature-component + .feature-component {
  padding-top: 24px;
}

/* In-content CTA card that replaces a mid-page consult form and points
   the visitor down to the real form at the end of the page instead. */
.feature-inline-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin: 0 auto;
  max-width: 1120px;
  padding: 36px 40px;
  border-radius: 20px;
  background: linear-gradient(120deg, #2a1a42 0%, #1c1030 60%, #120a20 100%);
  box-shadow: 0 24px 60px rgba(108, 64, 153, 0.35);
}

.feature-inline-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at 15% 30%, rgba(139, 92, 246, 0.35), transparent 70%);
  pointer-events: none;
}

.feature-inline-cta-body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 20px;
}

.feature-inline-cta-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  animation: featureCtaPulse 2.6s ease-in-out infinite;
}

.feature-inline-cta-text strong {
  display: block;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.feature-inline-cta-text span {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.88rem;
  line-height: 1.8;
}

.feature-inline-cta-btn {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 12px;
  background: linear-gradient(135deg, #8b5cf6, #6c4099);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(139, 92, 246, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease, gap 0.2s ease;
}

.feature-inline-cta-btn:hover {
  transform: translateY(-2px);
  gap: 12px;
  box-shadow: 0 14px 36px rgba(139, 92, 246, 0.6);
}

@keyframes featureCtaPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.25);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
}

@media (max-width: 640px) {
  .feature-inline-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 28px 24px;
  }

  .feature-inline-cta-body {
    flex-direction: column;
  }

  .feature-inline-cta-btn {
    justify-content: center;
  }
}

.feature-tabs-section {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.feature-tabs-section .section-label {
  color: rgba(255, 255, 255, .72);
}

.feature-tabs-section .section-title {
  color: #fff;
}

.feature-tabs-section .section-sub {
  color: rgba(255, 255, 255, .72);
}

.feature-tabs {
  margin-top: 42px;
}

.feature-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 36px;
}

.feature-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}

.feature-tab-btn iconify-icon {
  color: currentColor;
}

.feature-tab-btn.active {
  border-color: #fff;
  background: #fff;
  color: var(--primary-dark);
}

/* An <iconify-icon> follows currentColor, but an uploaded image does not: a white
   icon file vanished on the active tab's white pill. Force each state's colour so
   either kind of icon stays visible. */
.feature-tab-btn img {
  filter: var(--nf-icon-white-filter);
}

.feature-tab-btn.active img {
  filter: var(--nf-icon-purple-solid-filter);
}

/* The panel tile stays dark-on-purple in both states. */
.feature-tab-panel-icon img {
  filter: var(--nf-icon-white-filter);
}

.feature-tab-panel {
  display: none;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.feature-tab-panel.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.feature-tab-panel-icon {
  display: inline-grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

.feature-tab-panel h3 {
  margin: 0;
  color: #fff;
  font-size: 20px;
}

.feature-tab-panel p {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
  line-height: 1.9;
}

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

  .feature-tab-btn {
    justify-content: center;
  }
}

.feature-section-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(460px, clamp(520px, 34vw, 700px)) minmax(0, 1fr);
  grid-template-areas: "media copy";
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
  direction: ltr;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.feature-section-card.feature-section-image-right {
  grid-template-columns: minmax(0, 1fr) minmax(460px, clamp(520px, 34vw, 700px));
  grid-template-areas: "copy media";
}

.feature-section-card::before {
  display: none;
}

.feature-section-copy {
  position: relative;
  grid-area: copy;
  padding-inline-start: clamp(18px, 2.5vw, 34px);
}

html[dir="rtl"] .feature-section-copy,
body.rtl .feature-section-copy {
  direction: rtl;
  text-align: right;
}

html[dir="ltr"] .feature-section-copy,
body.ltr .feature-section-copy {
  direction: ltr;
  text-align: left;
}

.feature-section-copy::before {
  content: "";
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 0;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #7444a6, #a66bff);
  box-shadow: 0 14px 34px rgba(116, 68, 166, .24);
}

.feature-text-section-highlight .feature-section-copy::after {
  content: "";
  position: absolute;
  inset-block-start: -54px;
  inset-inline-start: -84px;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(201, 155, 240, .18), transparent 68%);
  pointer-events: none;
  z-index: -1;
}

.feature-section-card .section-title {
  max-width: 920px;
  margin-bottom: 18px;
}

.feature-section-card .section-sub {
  max-width: 820px;
}

.feature-rich-text {
  max-width: 920px;
  margin-top: 22px;
  color: #667085;
  font-size: 14px;
  line-height: 1.9;
}

.feature-rich-text p {
  margin: 0 0 16px;
}

/* ─── Justified prose on feature pages ───
   Running body text is justified at every width. Blocks that are deliberately
   centred — the hero lede, centred section intros, the purple tab panels —
   are left out so their centring survives. */
.feature-rich-text p,
.feature-info-card p,
.feature-section-card .section-sub,
.feature-list-copy .section-sub,
.feature-single .feature-inline-cta-body,
.feature-single .faq-a-inner {
  text-align: justify;
  text-justify: inter-word;
}

.feature-rich-text p:last-child {
  margin-bottom: 0;
}

.feature-section-media {
  position: relative;
  grid-area: media;
  width: min(100%, clamp(520px, 34vw, 700px));
  aspect-ratio: 1.36;
  min-height: 0;
  margin: 0;
  border-radius: 34px;
  overflow: hidden;
  isolation: isolate;
  justify-self: center;
  box-shadow: 0 28px 74px rgba(15, 23, 42, .16);
}

.feature-section-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(116, 68, 166, .62), rgba(255, 255, 255, .06) 52%, rgba(15, 23, 42, .18)),
    radial-gradient(circle at 20% 24%, rgba(201, 155, 240, .32), transparent 34%);
  mix-blend-mode: screen;
  z-index: 1;
  pointer-events: none;
}

.feature-section-media::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 255, 255, .44);
  border-radius: 24px;
  z-index: 2;
  pointer-events: none;
}

.feature-section-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  transform: scale(1.02);
}

.feature-cards-section {
  background:
    radial-gradient(circle at 84% 24%, rgba(116, 68, 166, .08), transparent 26%),
    #fff;
}

.feature-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 42px;
}

.feature-info-card {
  display: flex;
  min-height: 300px;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  border: 1px solid #e7e1f2;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(16, 24, 40, .08);
}

.feature-info-icon {
  display: inline-grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 1px solid rgba(116, 68, 166, .18);
  border-radius: 20px;
  background: #f5effb;
}

.feature-info-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.feature-info-icon iconify-icon,
.feature-info-icon svg {
  color: #6c4099 !important;
}

.feature-info-icon svg :where(path, circle, rect, line, polyline, polygon) {
  stroke: currentColor;
}

.feature-info-card h3 {
  margin: 0;
  color: #101828;
  font-size: 16px;
  line-height: 1.5;
}

.feature-info-card p {
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.85;
}

.feature-list-wrap {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: center;
  padding: clamp(28px, 4vw, 52px);
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 18%, rgba(201, 155, 240, .28), transparent 32%),
    linear-gradient(135deg, #10091b, #1f1234);
}

.feature-list-wrap .section-label {
  color: #c99bf0;
}

.feature-list-wrap .section-title {
  color: #fff;
}

.feature-list-wrap .section-sub {
  color: rgba(255, 255, 255, .68);
}

.feature-use-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-use-list li {
  position: relative;
  padding: 16px 22px;
  padding-inline-start: 46px;
  border: 1px solid rgba(201, 155, 240, .18);
  border-radius: 18px;
  color: rgba(255, 255, 255, .86);
  background: rgba(255, 255, 255, .05);
  font-size: 14px;
  font-weight: 800;
}

.feature-use-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 20px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #c99bf0;
  transform: translateY(-50%);
}

@media (max-width: 1024px) {
  /* The media column has a 460px minimum, so below this width the copy column gets
     crushed to a few characters. Stack instead of squeezing. */
  .feature-section-card,
  .feature-section-card.feature-section-image-right {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "copy";
    gap: 30px;
  }

  .feature-section-media {
    width: 100%;
  }

  .primary-nav,
  .nav-actions .btn {
    display: none;
  }

  .nav-inner {
    flex-direction: row;
    gap: 14px;
  }

  .nav-actions {
    gap: 8px;
  }

  .nav-toggle {
    order: 1;
    display: block;
  }

  /* No direction-specific reordering: .nav-inner is space-between, so the logo sits on
     the start edge and the actions (language + hamburger) on the end edge, which mirrors
     correctly for both RTL and LTR on its own. */

  .nav-actions > .language-switcher {
    order: 2;
    display: inline-block;
  }

  .hero-grid,
  .rich-grid,
  .consult-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-copy .section-label,
  .hero-actions {
    justify-content: center;
  }

  .hero-metrics,
  .cards-grid,
  .stats-grid,
  .customer-grid,
  .archive-grid,
  .feature-archive-grid,
  .feature-card-grid,
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-list-wrap {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 640px) {
  /* ─── Justified body copy on phones ───
     Narrow columns leave very ragged right edges in Persian, so running text is
     justified. Centred section intros are excluded so they stay centred. */
  .section-header:not(.centered) .section-sub,
  .post-content p,
  .entry-content p,
  .history-readout p,
  .agent-row-value,
  .agents-empty,
  .arc-card-excerpt,
  .info-intro-body,
  .story-text p,
  .close-copy p {
    text-align: justify;
    text-justify: inter-word;
  }

  .container,
  .nav-inner {
    width: min(100% - 28px, 1200px);
  }

  .nav-logo-text-img {
    display: none;
  }

  .nav-logo {
    gap: 0;
  }

  .section {
    padding: 52px 0;
  }

  .nexfon-hero {
    min-height: auto;
    padding-top: 62px;
  }

  .hero-metrics,
  .cards-grid,
  .stats-grid,
  .customer-grid,
  .archive-grid,
  .feature-archive-grid,
  .feature-card-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .cta-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .feature-hero-simple {
    padding: 60px 0 58px;
  }

  .feature-hero-simple-inner {
    text-align: start;
  }

  .feature-breadcrumb {
    justify-content: flex-start;
  }

  .feature-cover {
    margin-top: 36px;
    border-radius: 20px;
  }

  .feature-component {
    padding: 48px 0;
  }

  .feature-list-wrap {
    border-radius: 22px;
  }

  /* On phones the image keeps the column width but grows to its own height, so nothing
     is cropped. The desktop fixed-ratio crop stays untouched. */
  .feature-section-media {
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    border-radius: 24px;
  }

  .feature-section-media img {
    height: auto;
    min-height: 0;
    object-fit: contain;
    /* the 1.02 zoom exists to hide edges of a cropped image; uncropped it would clip */
    transform: none;
  }
}