/* ─── Dana font (local) ─── */
      @font-face {
        font-family: "Dana";
        src: url("../fonts/DanaFaNum-Thin.ttf") format("truetype");
        font-weight: 100;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "Dana";
        src: url("../fonts/DanaFaNum-UltraLight.ttf") format("truetype");
        font-weight: 200;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "Dana";
        src: url("../fonts/DanaFaNum-Light.ttf") format("truetype");
        font-weight: 300;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "Dana";
        src: url("../fonts/DanaFaNum-Regular.ttf") format("truetype");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "Dana";
        src: url("../fonts/DanaFaNum-Medium.ttf") format("truetype");
        font-weight: 500;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "Dana";
        src: url("../fonts/DanaFaNum-DemiBold.ttf") format("truetype");
        font-weight: 600;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "Dana";
        src: url("../fonts/DanaFaNum-Bold.ttf") format("truetype");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "Dana";
        src: url("../fonts/DanaFaNum-ExtraBold.ttf") format("truetype");
        font-weight: 800;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "Dana";
        src: url("../fonts/DanaFaNum-Black.ttf") format("truetype");
        font-weight: 900;
        font-style: normal;
        font-display: swap;
      }

      /* ─── Iconify base ─── */
      iconify-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        flex-shrink: 0;
      }

      /* ─── Reset & Base ─── */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      :root {
        --primary: #6c4099;
        --primary-dk: #543277;
        --primary-lt: #875faf;
        --bg: #ffffff;
        --text: #101828;
        --text-muted: #667085;
        --accent: #2bb673;
        --accent-dk: #229a5e;
        --border: #e4e7ec;
        --card-bg: #f9fafb;
        --shadow-sm:
          0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
        --shadow-md:
          0 4px 16px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.04);
        --shadow-lg:
          0 12px 40px rgba(16, 24, 40, 0.1), 0 4px 12px rgba(16, 24, 40, 0.06);
        --shadow-xl: 0 24px 60px rgba(108, 64, 153, 0.18);
        --radius-sm: 8px;
        --radius-md: 12px;
        --radius-lg: 20px;
        --radius-xl: 28px;
        --transition: 200ms cubic-bezier(0.4, 0, 0.2, 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-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%);

        /* ── Unified dark "premium environment" palette ── */
        --env-base: #07040f;
        --env-secondary: #0f081a;
        --env-brand: #954ab5;
        --env-accent: #b96dff;
      }
      html {
        scroll-behavior: smooth;
        overflow-x: hidden;
      }
      body {
        font-family: "Dana", sans-serif;
        background: var(--bg);
        color: var(--text);
        line-height: 1.65;
        font-size: 14px;
        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;
      }
      a {
        text-decoration: none;
        color: inherit;
      }
      img {
        max-width: 100%;
        display: block;
      }

      :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);
      }

      .footer-social img[src*="/nexfon-icons/"] {
        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;
      }

      .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 {
        font-family: inherit;
        cursor: pointer;
        border: none;
        outline: none;
      }

      /* ─── Typography Scale ─── */
      .text-xs {
        font-size: 0.75rem;
      }
      .text-sm {
        font-size: 0.875rem;
      }
      .text-base {
        font-size: 1rem;
      }
      .text-lg {
        font-size: 1.125rem;
      }
      .text-xl {
        font-size: 1.25rem;
      }
      .text-2xl {
        font-size: 1.5rem;
      }
      .text-3xl {
        font-size: 1.875rem;
      }
      .text-4xl {
        font-size: 2.25rem;
      }
      .text-5xl {
        font-size: 3rem;
      }
      .text-6xl {
        font-size: 3.75rem;
      }
      .text-7xl {
        font-size: 4.5rem;
      }

      /* ─── Layout ─── */
      .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
      }
      .section {
        padding: 56px 0;
      }
      .section-sm {
        padding: 36px 0;
      }
      .section-title {
        font-size: clamp(1.2rem, 2vw, 1.625rem);
        font-weight: 800;
        color: var(--text);
        letter-spacing: -0.02em;
        margin-bottom: 8px;
      }
      .section-sub {
        font-size: 0.875rem;
        color: var(--text-muted);
        max-width: 480px;
        line-height: 1.75;
      }
      .section-header {
        margin-bottom: 32px;
      }
      .section-header.centered {
        text-align: center;
      }
      .section-header.centered .section-sub {
        margin: 0 auto;
      }

      /* section label accent */
      .section-label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--primary);
        margin-bottom: 10px;
      }
      .section-label::before {
        content: "";
        width: 18px;
        height: 2px;
        background: var(--primary);
        border-radius: 1px;
        display: inline-block;
      }

      /* Hero badge — readable glowing pill on the dark hero */
      #hero .section-label {
        align-self: flex-start; /* hug content, don't stretch in the flex column */
        gap: 8px;
        padding: 6px 16px;
        border-radius: 100px;
        background: rgba(149, 74, 181, 0.16);
        border: 1px solid rgba(185, 109, 255, 0.32);
        box-shadow: 0 0 24px rgba(149, 74, 181, 0.18);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        text-transform: none;
        color: rgba(223, 200, 255, 0.97);
      }
      #hero .section-label::before {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #c99bf0;
        box-shadow: 0 0 8px 1px rgba(199, 141, 255, 0.9);
      }

      /* ─── Buttons ─── */
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 20px;
        border-radius: var(--radius-sm);
        font-size: 0.875rem;
        font-weight: 600;
        transition: all var(--transition);
        cursor: pointer;
        white-space: nowrap;
      }
      .btn-primary {
        background: var(--accent);
        color: #fff;
        box-shadow: 0 0 0 0 rgba(43, 182, 115, 0.4);
      }
      .btn-primary:hover {
        background: var(--accent-dk);
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(43, 182, 115, 0.35);
      }
      .btn-purple {
        background: var(--primary);
        color: #fff;
        box-shadow: 0 0 0 0 rgba(108, 64, 153, 0.4);
      }
      .btn-purple:hover {
        background: #5a3490;
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(108, 64, 153, 0.35);
      }
      .btn-outline {
        background: transparent;
        color: var(--primary);
        border: 1.5px solid var(--primary);
      }
      .btn-outline:hover {
        background: var(--primary);
        color: #fff;
        transform: translateY(-1px);
      }
      .btn-outline-white {
        background: transparent;
        color: #fff;
        border: 1.5px solid rgba(255, 255, 255, 0.5);
      }
      .btn-outline-white:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: #fff;
      }
      .btn-lg {
        padding: 11px 26px;
        font-size: 0.9375rem;
        border-radius: var(--radius-md);
      }
      .btn-sm {
        padding: 8px 16px;
        font-size: 0.8125rem;
      }
      .btn-ghost {
        background: transparent;
        color: var(--primary);
        padding: 8px 12px;
      }
      .btn-ghost:hover {
        background: rgba(108, 64, 153, 0.07);
        border-radius: var(--radius-sm);
      }

      /* ─── Badge ─── */
      .badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 12px;
        border-radius: 100px;
        font-size: 0.8125rem;
        font-weight: 600;
      }
      .badge-primary {
        background: rgba(108, 64, 153, 0.1);
        color: var(--primary);
      }
      .badge-accent {
        background: rgba(43, 182, 115, 0.12);
        color: var(--accent-dk);
      }
      .badge-gray {
        background: var(--border);
        color: var(--text-muted);
      }

      /* ─── Navbar ─── */
      #navbar {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 50;
        padding: 0 24px;
        transition:
          background var(--transition),
          box-shadow var(--transition);
      }
      body.admin-bar #navbar {
        top: 32px;
      }
      body.admin-bar #mobile-menu {
        top: 32px;
        height: calc(100% - 32px);
      }
      @media screen and (max-width: 782px) {
        body.admin-bar #navbar {
          top: 46px;
        }
        body.admin-bar #mobile-menu {
          top: 46px;
          height: calc(100% - 46px);
        }
      }
      #navbar.scrolled {
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(16px);
        box-shadow: 0 1px 0 rgba(16, 24, 40, 0.07);
      }
      .nav-inner {
        max-width: 1200px;
        margin: 0 auto;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
      }
      .nav-logo {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
      }
      .nav-logo-text {
        font-size: 1.0625rem;
        font-weight: 800;
        color: var(--primary);
        letter-spacing: -0.02em;
      }
      .nav-logo-text-img {
        height: 20px;
        width: auto;
        display: block;
      }
      .nav-links {
        display: flex;
        align-items: center;
        gap: 4px;
        list-style: none;
      }
      .nav-links a {
        position: relative;
        padding: 6px 12px;
        border-radius: var(--radius-sm);
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--text-muted);
        transition: color var(--transition);
      }
      .nav-links > li > 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);
      }
      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;
      }
      /* dropdown */
      /* .menu-item-has-children/.sub-menu are the classes WordPress's own
         wp_nav_menu() output uses (e.g. on 404.php, which doesn't go through
         the static-page markup); alias them so that menu gets the same look. */
      .nav-has-dropdown,
      .menu-item-has-children {
        position: relative;
      }
      .nav-dropdown-trigger {
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }
      .nav-caret {
        transition: transform var(--transition);
      }
      .nav-has-dropdown:hover .nav-caret,
      .nav-has-dropdown:focus-within .nav-caret {
        transform: rotate(180deg);
      }
      .nav-dropdown,
      .menu-item-has-children .sub-menu {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 0 !important;
        left: auto !important;
        min-width: 190px !important;
        background: #fff !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-md) !important;
        box-shadow: 0 18px 50px rgba(17, 12, 34, 0.14) !important;
        margin: 0 !important;
        padding: 8px !important;
        list-style: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px) scale(0.98);
        transform-origin: top right;
        transition:
          opacity 0.2s ease,
          transform 0.2s ease,
          visibility 0.2s ease,
          background 0.2s ease,
          border-color 0.2s ease,
          box-shadow 0.2s ease;
        z-index: 50;
      }
      .nav-dropdown::before,
      .menu-item-has-children .sub-menu::before {
        content: "";
        position: absolute;
        bottom: 100%;
        right: 0;
        left: 0;
        height: 12px;
      }
      .nav-has-dropdown:hover .nav-dropdown,
      .nav-has-dropdown:focus-within .nav-dropdown,
      .menu-item-has-children:hover .sub-menu,
      .menu-item-has-children:focus-within .sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) scale(1) !important;
      }
      .nav-dropdown a,
      .menu-item-has-children .sub-menu a {
        display: block !important;
        padding: 9px 12px !important;
        margin: 0 !important;
        border-radius: var(--radius-sm) !important;
        font-size: 0.82rem !important;
        font-weight: 500 !important;
        color: var(--text-muted) !important;
        white-space: nowrap !important;
      }
      .nav-dropdown a:hover,
      .menu-item-has-children .sub-menu a:hover {
        color: var(--primary) !important;
        background: var(--card-bg) !important;
      }
      /* mobile submenu */
      .mobile-subnav {
        list-style: none;
        margin: 6px 14px 4px;
        padding-right: 12px;
        border-right: 2px solid var(--border);
        display: flex;
        flex-direction: column;
      }
      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-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 a {
        font-size: 0.92rem;
        color: var(--text-muted);
      }
      .nav-actions {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .nav-toggle {
        display: none;
        background: none;
        padding: 8px;
      }
      .nav-toggle iconify-icon {
        display: block;
        color: var(--text);
      }

      /* ══════════════════════════════════════════
       HERO V2 — Premium SaaS
    ══════════════════════════════════════════ */

      /* Navbar dark (over hero) */
      #navbar.hero-dark {
        background: transparent !important;
        box-shadow: none !important;
      }
      #navbar.hero-dark .nav-links a {
        color: rgba(255, 255, 255, 0.7);
      }
      #navbar.hero-dark .nav-links a:hover {
        color: #fff;
      }
      #navbar.hero-dark .nav-logo-text {
        color: #fff;
      }
      #navbar.hero-dark .btn-outline {
        border-color: rgba(255, 255, 255, 0.22);
        color: rgba(255, 255, 255, 0.85);
      }
      #navbar.hero-dark .btn-outline:hover {
        background: rgba(255, 255, 255, 0.08);
      }
      #navbar.hero-dark .nav-toggle iconify-icon {
        color: #fff;
      }
      #navbar.hero-dark .nav-logo img {
        filter: brightness(0) invert(1);
      }
      #navbar.hero-dark .nav-dropdown {
        background: rgba(14, 9, 28, 0.88);
        backdrop-filter: blur(24px);
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow:
          0 20px 50px rgba(0, 0, 0, 0.5),
          inset 0 1px 0 rgba(255, 255, 255, 0.07);
      }
      #navbar.hero-dark .nav-dropdown a {
        color: rgba(255, 255, 255, 0.6);
      }
      #navbar.hero-dark .nav-dropdown a:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.07);
      }

      /* Navbar dark sticky (scrolled, but still over the dark zone) */
      #navbar.nav-dark {
        background: rgba(11, 6, 20, 0.72);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
      }
      #navbar.nav-dark .nav-links a {
        color: rgba(255, 255, 255, 0.7);
      }
      #navbar.nav-dark .nav-links a:hover {
        color: #fff;
      }
      #navbar.nav-dark .nav-logo-text {
        color: #fff;
      }
      #navbar.nav-dark .btn-outline {
        border-color: rgba(255, 255, 255, 0.22);
        color: rgba(255, 255, 255, 0.85);
      }
      #navbar.nav-dark .btn-outline:hover {
        background: rgba(255, 255, 255, 0.08);
      }
      #navbar.nav-dark .nav-toggle iconify-icon {
        color: #fff;
      }
      #navbar.nav-dark .nav-logo img {
        filter: brightness(0) invert(1);
      }
      #navbar.nav-dark .nav-dropdown {
        background: rgba(14, 9, 28, 0.88);
        backdrop-filter: blur(24px);
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow:
          0 20px 50px rgba(0, 0, 0, 0.5),
          inset 0 1px 0 rgba(255, 255, 255, 0.07);
      }
      #navbar.nav-dark .nav-dropdown a {
        color: rgba(255, 255, 255, 0.6);
      }
      #navbar.nav-dark .nav-dropdown a:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.07);
      }

      /* ════════════════════════════════════════════════════════════════
       UNIFIED PREMIUM ENVIRONMENT
       One continuous background layer spanning Hero + Available Numbers.
       Sections sit transparent on top; separation comes from glass cards.
       ════════════════════════════════════════════════════════════════ */
      /* ════ Unified dark zone: ONE background color + ONE continuous light layer ════ */
      .dark-zone {
        position: relative;
        background: var(--env-base);
        isolation: isolate;
      }
      .dark-zone-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
      }
      /* continuous, overlapping purple glows spanning the WHOLE zone height (no per-section clipping) */
      .dark-zone-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse 48% 18% at 74% 5%,
            rgba(149, 74, 181, 0.18),
            transparent 60%
          ),
          radial-gradient(
            ellipse 52% 16% at 26% 20%,
            rgba(185, 109, 255, 0.11),
            transparent 60%
          ),
          radial-gradient(
            ellipse 48% 16% at 72% 37%,
            rgba(149, 74, 181, 0.14),
            transparent 60%
          ),
          radial-gradient(
            ellipse 52% 16% at 28% 54%,
            rgba(185, 109, 255, 0.11),
            transparent 60%
          ),
          radial-gradient(
            ellipse 48% 16% at 70% 71%,
            rgba(149, 74, 181, 0.13),
            transparent 60%
          ),
          radial-gradient(
            ellipse 52% 16% at 30% 88%,
            rgba(185, 109, 255, 0.1),
            transparent 60%
          );
      }
      /* faint continuous telecom dot-grid across the whole zone — removed per request */
      .dark-zone-bg::after {
        display: none;
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(
          rgba(185, 109, 255, 0.1) 1px,
          transparent 1.6px
        );
        background-size: 46px 46px;
        opacity: 0.4;
        -webkit-mask-image: linear-gradient(
          180deg,
          transparent 0,
          #000 6%,
          #000 94%,
          transparent 100%
        );
        mask-image: linear-gradient(
          180deg,
          transparent 0,
          #000 6%,
          #000 94%,
          transparent 100%
        );
      }

      .premium-env {
        position: relative;
        isolation: isolate;
        background: transparent;
      }
      /* Shared ambient background — spans the FULL height of both sections */
      .premium-env-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
      }

      /* 1 — Soft purple radial gradients (brighter near content anchors) */
      .premium-env-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse 58% 42% at 76% 6%,
            rgba(149, 74, 181, 0.22),
            transparent 62%
          ),
          radial-gradient(
            ellipse 46% 38% at 22% 30%,
            rgba(149, 74, 181, 0.14),
            transparent 60%
          ),
          radial-gradient(
            ellipse 60% 34% at 50% 56%,
            rgba(185, 109, 255, 0.12),
            transparent 64%
          ),
          radial-gradient(
            ellipse 64% 40% at 50% 92%,
            rgba(149, 74, 181, 0.1),
            transparent 66%
          );
      }
      /* 2 — Network node pattern (telecom dot grid) — removed per request */
      .env-nodes {
        display: none;
        position: absolute;
        inset: 0;
        background-image: radial-gradient(
          rgba(185, 109, 255, 0.16) 1px,
          transparent 1.6px
        );
        background-size: 48px 48px;
        background-position: 0 0;
        -webkit-mask-image: radial-gradient(
          ellipse 95% 70% at 50% 38%,
          #000 0%,
          rgba(0, 0, 0, 0.35) 55%,
          transparent 80%
        );
        mask-image: radial-gradient(
          ellipse 95% 70% at 50% 38%,
          #000 0%,
          rgba(0, 0, 0, 0.35) 55%,
          transparent 80%
        );
        opacity: 0.55;
      }
      /* 3 — Low-opacity telecom signal waves (concentric rings near top-right) */
      .env-waves {
        position: absolute;
        inset: 0;
        background:
          repeating-radial-gradient(
            circle at 80% 4%,
            transparent 0 58px,
            rgba(185, 109, 255, 0.05) 58px 59px,
            transparent 59px 118px
          ),
          repeating-radial-gradient(
            circle at 12% 64%,
            transparent 0 70px,
            rgba(149, 74, 181, 0.045) 70px 71px,
            transparent 71px 142px
          );
        -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
        mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
        opacity: 0.8;
      }
      /* 4 — Blurred light orbs (gentle drift) */
      .env-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        will-change: transform, opacity;
      }
      .env-orb-1 {
        width: 520px;
        height: 520px;
        top: 4%;
        right: -90px;
        background: radial-gradient(
          circle,
          rgba(149, 74, 181, 0.3),
          transparent 70%
        );
        animation: envOrb1 34s ease-in-out infinite;
      }
      .env-orb-2 {
        width: 460px;
        height: 460px;
        top: 42%;
        left: -120px;
        background: radial-gradient(
          circle,
          rgba(185, 109, 255, 0.18),
          transparent 70%
        );
        animation: envOrb2 40s ease-in-out infinite;
      }
      .env-orb-3 {
        width: 600px;
        height: 460px;
        bottom: -120px;
        left: 50%;
        transform: translateX(-50%);
        background: radial-gradient(
          ellipse,
          rgba(149, 74, 181, 0.16),
          transparent 70%
        );
        animation: envOrb3 30s ease-in-out infinite alternate;
      }
      @keyframes envOrb1 {
        0%,
        100% {
          transform: translate(0, 0) scale(1);
          opacity: 0.7;
        }
        50% {
          transform: translate(-50px, 46px) scale(1.08);
          opacity: 1;
        }
      }
      @keyframes envOrb2 {
        0%,
        100% {
          transform: translate(0, 0) scale(1);
          opacity: 0.55;
        }
        50% {
          transform: translate(56px, -40px) scale(1.1);
          opacity: 0.85;
        }
      }
      @keyframes envOrb3 {
        0% {
          transform: translateX(-50%) scale(1);
          opacity: 0.6;
        }
        100% {
          transform: translateX(-46%) scale(1.08);
          opacity: 0.9;
        }
      }
      /* 5 — Gentle vertical noise / grain texture */
      .env-noise {
        position: absolute;
        inset: 0;
        opacity: 0.035;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        mix-blend-mode: overlay;
      }
      /* Faint vertical light streaks for subtle directional texture */
      .env-noise::after {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
          90deg,
          transparent 0 119px,
          rgba(255, 255, 255, 0.012) 119px 120px
        );
      }
      /* Bottom fade — eases the dark environment into the next (dark) section */
      .premium-env-fade {
        display: none;
      }
      @media (prefers-reduced-motion: reduce) {
        .env-orb {
          animation: none !important;
        }
      }

      /* ─── Hero base ─── */
      #hero {
        position: relative;
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        align-items: center;
        padding-top: 80px;
        padding-bottom: 80px;
        overflow: hidden;
        background: transparent;
      }
      #hero::before,
      #hero::after {
        display: none;
      }
      /* Soft purple spotlight behind the headline */
      .hero-left {
        position: relative;
      }
      .hero-left::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 4%;
        right: -8%;
        width: 560px;
        height: 360px;
        max-width: 130%;
        background: radial-gradient(
          ellipse at 60% 40%,
          rgba(149, 74, 181, 0.28) 0%,
          rgba(149, 74, 181, 0.1) 38%,
          transparent 68%
        );
        filter: blur(36px);
        pointer-events: none;
      }

      /* ── Ambient light canvas (particles only) ── */
      #heroNet {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        pointer-events: none;
      }

      /* ── Ambient CSS glow layer ── */
      .ha-layer {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
      }

      /* Shared glow base */
      .ha-glow {
        position: absolute;
        border-radius: 50%;
        will-change: transform, opacity;
      }

      /* Glow 1 — Large purple, top-right */
      .ha-g1 {
        width: 820px;
        height: 820px;
        top: -220px;
        right: -180px;
        background: radial-gradient(
          circle,
          rgba(108, 64, 153, 0.22) 0%,
          rgba(108, 64, 153, 0.08) 45%,
          transparent 72%
        );
        filter: blur(110px);
        animation: haG1 32s ease-in-out infinite;
      }
      @keyframes haG1 {
        0%,
        100% {
          transform: translate(0, 0) scale(1);
          opacity: 0.7;
        }
        25% {
          transform: translate(-55px, 35px) scale(1.08);
          opacity: 1;
        }
        55% {
          transform: translate(-30px, 65px) scale(0.95);
          opacity: 0.8;
        }
        78% {
          transform: translate(30px, 45px) scale(1.1);
          opacity: 0.95;
        }
      }

      /* Glow 2 — Medium, bottom-left */
      .ha-g2 {
        width: 680px;
        height: 680px;
        bottom: -160px;
        left: -140px;
        background: radial-gradient(
          circle,
          rgba(90, 40, 160, 0.18) 0%,
          rgba(90, 40, 160, 0.06) 50%,
          transparent 75%
        );
        filter: blur(130px);
        animation: haG2 40s ease-in-out infinite;
      }
      @keyframes haG2 {
        0%,
        100% {
          transform: translate(0, 0) scale(1);
          opacity: 0.65;
        }
        35% {
          transform: translate(60px, -45px) scale(1.1);
          opacity: 0.95;
        }
        68% {
          transform: translate(35px, -70px) scale(0.93);
          opacity: 0.72;
        }
      }

      /* Glow 3 — Subtle centre */
      .ha-g3 {
        width: 900px;
        height: 700px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: radial-gradient(
          ellipse,
          rgba(139, 92, 246, 0.1) 0%,
          rgba(108, 64, 153, 0.04) 50%,
          transparent 75%
        );
        filter: blur(140px);
        animation: haG3 26s ease-in-out infinite alternate;
      }
      @keyframes haG3 {
        0% {
          opacity: 0.5;
          transform: translate(-50%, -50%) scale(1) translateY(0);
        }
        50% {
          opacity: 0.85;
          transform: translate(-52%, -48%) scale(1.1);
        }
        100% {
          opacity: 0.6;
          transform: translate(-48%, -52%) scale(1.04);
        }
      }

      /* Glow 4 — Accent, top-left */
      .ha-g4 {
        width: 440px;
        height: 440px;
        top: -60px;
        left: -80px;
        background: radial-gradient(
          circle,
          rgba(167, 139, 250, 0.08) 0%,
          transparent 70%
        );
        filter: blur(100px);
        animation: haG4 22s ease-in-out infinite alternate;
      }
      @keyframes haG4 {
        0% {
          opacity: 0.45;
          transform: translate(0, 0) scale(1);
        }
        50% {
          opacity: 0.8;
          transform: translate(40px, 30px) scale(1.12);
        }
        100% {
          opacity: 0.55;
          transform: translate(20px, 50px) scale(0.95);
        }
      }

      /* Light streaks — Nexfon logo diagonal ~55° */
      .ha-streak {
        position: absolute;
        pointer-events: none;
        filter: blur(28px);
        opacity: 0;
        animation: haStreak 0s linear infinite;
      }
      .ha-s1 {
        width: 180px;
        height: 800px;
        top: -100px;
        right: 32%;
        background: linear-gradient(
          to bottom,
          transparent 0%,
          rgba(167, 139, 250, 0.045) 30%,
          rgba(139, 92, 246, 0.03) 55%,
          transparent 100%
        );
        transform: rotate(-56deg);
        animation: haStreak1 28s ease-in-out infinite;
      }
      .ha-s2 {
        width: 120px;
        height: 600px;
        bottom: -60px;
        left: 28%;
        background: linear-gradient(
          to bottom,
          transparent 0%,
          rgba(167, 139, 250, 0.03) 35%,
          rgba(108, 64, 153, 0.018) 60%,
          transparent 100%
        );
        transform: rotate(-56deg);
        animation: haStreak2 36s ease-in-out infinite;
      }
      @keyframes haStreak1 {
        0%,
        100% {
          opacity: 0;
          transform: rotate(-56deg) translateY(0);
        }
        20%,
        80% {
          opacity: 1;
        }
        50% {
          opacity: 0.75;
          transform: rotate(-56deg) translateY(-30px);
        }
      }
      @keyframes haStreak2 {
        0%,
        100% {
          opacity: 0;
          transform: rotate(-56deg) translateY(0);
        }
        25%,
        75% {
          opacity: 1;
        }
        50% {
          opacity: 0.65;
          transform: rotate(-56deg) translateY(20px);
        }
      }

      /* ── Diagonal logo-pattern ── */
      .ha-neon {
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
      }
      /* Repeating diagonal slash lines — same angle as logo slash (top-left → bottom-right) */
      .ha-neon::before {
        content: "";
        position: absolute;
        inset: -100px;
        background-image: repeating-linear-gradient(
          45deg,
          transparent,
          transparent 38px,
          rgba(139, 92, 246, 0.05) 38px,
          rgba(139, 92, 246, 0.05) 39px
        );
        mask-image: radial-gradient(
          ellipse 85% 85% at 60% 40%,
          black 0%,
          transparent 72%
        );
        -webkit-mask-image: radial-gradient(
          ellipse 85% 85% at 60% 40%,
          black 0%,
          transparent 72%
        );
        animation: diagDrift 20s linear infinite;
      }
      /* Bold accent slashes every 3rd line */
      .ha-neon::after {
        content: "";
        position: absolute;
        inset: -100px;
        background-image: repeating-linear-gradient(
          45deg,
          transparent,
          transparent 114px,
          rgba(167, 139, 250, 0.08) 114px,
          rgba(167, 139, 250, 0.08) 116px
        );
        mask-image: radial-gradient(
          ellipse 70% 70% at 55% 45%,
          black 0%,
          transparent 68%
        );
        -webkit-mask-image: radial-gradient(
          ellipse 70% 70% at 55% 45%,
          black 0%,
          transparent 68%
        );
        animation: diagDrift 32s linear infinite reverse;
      }
      @keyframes diagDrift {
        0% {
          transform: translate(0, 0);
        }
        100% {
          transform: translate(39px, 39px);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .ha-neon::before,
        .ha-neon::after {
          animation: none;
        }
      }
      /* ── Hero mouse-follow spotlight ── */
      #hero {
        --hx: 50%;
        --hy: 50%;
      }
      .ha-mouse-glow {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.5s ease;
        background: radial-gradient(
          700px circle at var(--hx, 50%) var(--hy, 50%),
          rgba(139, 92, 246, 0.13) 0%,
          rgba(108, 64, 153, 0.06) 40%,
          transparent 70%
        );
      }
      #hero:hover .ha-mouse-glow {
        opacity: 1;
      }

      @media (prefers-reduced-motion: reduce) {
        .ha-glow,
        .ha-streak,
        .ha-neon {
          animation: none !important;
        }
      }

      /* ─── Hero layout ─── */
      .hero-grid {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 1fr 460px;
        gap: 60px;
        align-items: center;
        width: 100%;
      }
      .hero-left {
        display: flex;
        flex-direction: column;
      }

      /* Badge */
      .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(108, 64, 153, 0.14);
        border: 1px solid rgba(139, 92, 246, 0.22);
        border-radius: 100px;
        padding: 5px 14px 5px 10px;
        font-size: 0.74rem;
        font-weight: 600;
        color: rgba(196, 160, 255, 0.8);
        margin-bottom: 26px;
        width: fit-content;
        backdrop-filter: blur(8px);
      }
      .hero-badge-dot {
        width: 7px;
        height: 7px;
        background: #8b5cf6;
        border-radius: 50%;
        box-shadow: 0 0 8px rgba(139, 92, 246, 0.9);
        animation: pulse 2.8s ease-in-out infinite;
        flex-shrink: 0;
      }
      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
          transform: scale(1);
        }
        50% {
          opacity: 0.5;
          transform: scale(0.8);
        }
      }

      /* Headline */
      .hero-title {
        font-size: clamp(2rem, 3.8vw, 3.5rem);
        font-weight: 900;
        letter-spacing: -0.035em;
        line-height: 1.1;
        color: #fff;
        margin-bottom: 18px;
      }
      .hero-title .ht-grad {
        display: block;
        background: linear-gradient(
          115deg,
          #d4b4ff 0%,
          #a78bfa 45%,
          #7c5cf6 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      /* Subtitle */
      .hero-sub {
        font-size: clamp(0.88rem, 1.35vw, 1.02rem);
        color: rgba(255, 255, 255, 0.5);
        line-height: 1.85;
        margin-bottom: 26px;
        max-width: 400px;
      }

      /* Micro trust badges */
      .hero-checks {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 20px;
        margin-bottom: 30px;
      }
      .hero-check {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 0.78rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.48);
      }
      .hero-check-dot {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        background: rgba(43, 182, 115, 0.12);
        border: 1px solid rgba(43, 182, 115, 0.28);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* CTAs */
      .hero-ctas {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 44px;
      }
      .hero-cta-primary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 13px 28px;
        background: linear-gradient(135deg, #6c4099 0%, #8b5cf6 100%);
        color: #fff;
        border-radius: 12px;
        font-size: 0.95rem;
        font-weight: 700;
        font-family: inherit;
        box-shadow: 0 8px 28px rgba(108, 64, 153, 0.45);
        transition: all 0.2s;
        cursor: pointer;
        text-decoration: none;
      }
      .hero-cta-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 36px rgba(108, 64, 153, 0.6);
      }
      .hero-cta-sec {
        display: inline-flex;
        align-items: center;
        padding: 12px 22px;
        border: 1.5px solid rgba(255, 255, 255, 0.18);
        border-radius: 12px;
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.88rem;
        font-weight: 600;
        font-family: inherit;
        transition: all 0.2s;
        cursor: pointer;
        text-decoration: none;
        background: transparent;
      }
      .hero-cta-sec:hover {
        border-color: rgba(255, 255, 255, 0.35);
        color: #fff;
        background: rgba(255, 255, 255, 0.05);
      }

      /* Trust metrics */
      .hero-metrics {
        display: flex;
        gap: 32px;
        flex-wrap: wrap;
        padding-top: 28px;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
      }
      .hero-metric {
        display: flex;
        flex-direction: column;
        gap: 3px;
      }
      .hero-metric-num {
        font-size: 1.3rem;
        font-weight: 900;
        color: #fff;
        letter-spacing: -0.02em;
        direction: ltr;
      }
      .hero-metric-lbl {
        font-size: 0.68rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.3);
        letter-spacing: 0.01em;
      }

      /* ─── Search Card (right col) ─── */
      .hero-right {
        position: relative;
      }
      /* Very faint glow halo behind the search widget */
      .hero-right::before {
        content: "";
        position: absolute;
        z-index: 0;
        inset: -12% -8% -16% -8%;
        background: radial-gradient(
          ellipse at 50% 45%,
          rgba(149, 74, 181, 0.2) 0%,
          rgba(185, 109, 255, 0.06) 42%,
          transparent 70%
        );
        filter: blur(40px);
        pointer-events: none;
      }
      .hero-search-card {
        background: rgba(255, 255, 255, 0.04);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 24px;
        padding: 28px 26px 24px;
        box-shadow:
          0 24px 64px rgba(8, 4, 18, 0.5),
          0 0 0 1px rgba(149, 74, 181, 0.1),
          0 1px 0 rgba(255, 255, 255, 0.07) inset;
        position: relative;
        z-index: 1;
        overflow: hidden;
      }

      .hsc-label {
        font-size: 0.83rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.65);
        margin-bottom: 14px;
        display: block;
      }

      /* Type tabs */
      .hsc-types {
        display: grid;
        /* Four number types; drops to 2x2 on narrow screens so the labels stay readable. */
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-bottom: 18px;
      }
      @media (max-width: 560px) {
        .hsc-types {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      .hsc-type {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 11px 8px;
        background: rgba(255, 255, 255, 0.06);
        border: 1.5px solid rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        cursor: pointer;
        font-family: inherit;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
        transition: all 0.2s;
      }
      .hsc-type:hover {
        background: rgba(139, 92, 246, 0.12);
        border-color: rgba(139, 92, 246, 0.55);
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(108, 64, 153, 0.28);
      }
      .hsc-type:active {
        transform: translateY(0);
      }
      .hsc-type.active {
        background: rgba(108, 64, 153, 0.3);
        border-color: rgba(167, 120, 255, 0.85);
        box-shadow:
          0 0 0 1px rgba(167, 120, 255, 0.4),
          0 0 20px rgba(108, 64, 153, 0.4);
      }
      .hsc-type-num {
        font-size: 0.88rem;
        font-weight: 800;
        color: rgba(255, 255, 255, 0.92);
      }
      .hsc-type-sub {
        font-size: 0.6rem;
        color: rgba(255, 255, 255, 0.5);
      }
      .hsc-type.active .hsc-type-num {
        color: #fff;
      }
      .hsc-type.active .hsc-type-sub {
        color: rgba(208, 180, 250, 0.85);
      }

      /* Input row */
      .hsc-row {
        display: flex;
        gap: 8px;
        align-items: stretch;
        margin-bottom: 10px;
      }
      .hsc-input {
        flex: 1;
        height: 54px;
        padding: 0 16px;
        background: rgba(255, 255, 255, 0.07);
        border: 1.5px solid rgba(255, 255, 255, 0.18);
        border-radius: 12px;
        font-family: inherit;
        font-size: 1.3rem;
        font-weight: 700;
        color: #fff;
        direction: ltr;
        text-align: center;
        letter-spacing: 0.1em;
        cursor: text;
        transition:
          border-color 0.2s,
          box-shadow 0.2s,
          background 0.2s;
      }
      .hsc-input::placeholder {
        color: rgba(255, 255, 255, 0.4);
        letter-spacing: 0.08em;
        font-size: 1rem;
      }
      .hsc-input:hover {
        border-color: rgba(139, 92, 246, 0.45);
        background: rgba(255, 255, 255, 0.09);
      }
      .hsc-input:focus {
        outline: none;
        border-color: rgba(139, 92, 246, 0.75);
        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22);
        background: rgba(255, 255, 255, 0.1);
      }
      .hsc-btn {
        height: 54px;
        padding: 0 22px;
        background: linear-gradient(135deg, #6c4099 0%, #8b5cf6 100%);
        color: #fff;
        border-radius: 12px;
        font-size: 0.9rem;
        font-weight: 700;
        font-family: inherit;
        transition: all 0.2s;
        flex-shrink: 0;
        cursor: pointer;
        box-shadow: 0 6px 22px rgba(108, 64, 153, 0.38);
        white-space: nowrap;
      }
      .hsc-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(108, 64, 153, 0.55);
      }

      /* Preview */
      .hsc-preview {
        font-size: 0.73rem;
        color: rgba(255, 255, 255, 0.28);
        margin-bottom: 16px;
        direction: ltr;
        text-align: center;
      }
      .hsc-preview strong {
        color: rgba(196, 160, 255, 0.65);
        font-weight: 700;
      }
      .hsc-preview.error {
        color: #f87171;
        font-weight: 600;
      }

      /* Divider */
      .hsc-sep {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
      }
      .hsc-sep::before,
      .hsc-sep::after {
        content: "";
        flex: 1;
        height: 1px;
        background: rgba(255, 255, 255, 0.07);
      }
      .hsc-sep-txt {
        font-size: 0.68rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.22);
        white-space: nowrap;
      }

      /* Suggestion chips */
      .hsc-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
      }
      .hsc-chip {
        padding: 6px 13px;
        background: rgba(255, 255, 255, 0.045);
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 8px;
        font-size: 0.8rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        font-family: inherit;
        direction: ltr;
        transition: all 0.18s;
      }
      .hsc-chip:hover {
        background: rgba(108, 64, 153, 0.22);
        border-color: rgba(139, 92, 246, 0.48);
        color: #fff;
        transform: translateY(-1px);
      }

      /* Scroll indicator */
      .hero-scroll {
        position: absolute;
        left: 50%;
        bottom: 28px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.3);
        z-index: 5;
        animation: heroScrollFloat 2.6s ease-in-out infinite;
      }
      .hero-scroll-text {
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.04em;
      }
      .hero-scroll-mouse {
        width: 22px;
        height: 34px;
        border: 2px solid rgba(255, 255, 255, 0.18);
        border-radius: 12px;
        display: flex;
        justify-content: center;
        padding-top: 5px;
      }
      .hero-scroll-wheel {
        width: 3px;
        height: 7px;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.35);
        animation: heroScrollWheel 1.7s ease-in-out infinite;
      }
      @keyframes heroScrollFloat {
        0%,
        100% {
          transform: translateX(-50%) translateY(0);
        }
        50% {
          transform: translateX(-50%) translateY(6px);
        }
      }
      @keyframes heroScrollWheel {
        0% {
          transform: translateY(0);
          opacity: 1;
        }
        70% {
          transform: translateY(9px);
          opacity: 0;
        }
        100% {
          transform: translateY(0);
          opacity: 0;
        }
      }

      /* ─── Responsive ─── */
      @media (max-width: 1024px) {
        .hero-grid {
          grid-template-columns: 1fr 400px;
          gap: 40px;
        }
      }
      @media (max-width: 860px) {
        .hero-grid {
          grid-template-columns: 1fr;
          gap: 44px;
        }
        .hero-left {
          align-items: center;
          text-align: center;
        }
        .hero-title .ht-grad {
          display: inline;
        }
        .hero-sub {
          max-width: 100%;
        }
        .hero-badge,
        .hero-checks,
        .hero-ctas {
          justify-content: center;
        }
        .hero-metrics {
          justify-content: center;
        }
      }
      @media (max-width: 480px) {
        .hero-search-card {
          padding: 20px 16px 18px;
        }
        .hsc-input {
          height: 50px;
          font-size: 1.1rem;
        }
        .hsc-btn {
          height: 50px;
          font-size: 0.85rem;
          padding: 0 16px;
        }
        .hero-metrics {
          gap: 20px;
        }
        .hero-metric-num {
          font-size: 1.1rem;
        }
      }

      /* ═══════════ Hero — Light Mode override ═══════════
       Keep the original structure & purple palette, but flip the surface
       to white so it matches the rest of the site. Stack the two columns
       vertically and center them. */
      #hero {
        background: #ffffff;
        z-index: 1;
        isolation: isolate;
      }
      /* Light pattern overlay — diagonal slash lines (dot-grid removed per request) */
      #hero::before {
        content: "" !important;
        display: block !important;
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: none;
        -webkit-mask-image: radial-gradient(
          ellipse 95% 75% at 50% 45%,
          #000 0%,
          rgba(0, 0, 0, 0.55) 60%,
          transparent 90%
        );
        mask-image: radial-gradient(
          ellipse 95% 75% at 50% 45%,
          #000 0%,
          rgba(0, 0, 0, 0.55) 60%,
          transparent 90%
        );
      }
      .hero-line-field {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
        -webkit-mask-image: radial-gradient(
          ellipse 95% 75% at 50% 45%,
          #000 0%,
          rgba(0, 0, 0, 0.6) 62%,
          transparent 90%
        );
        mask-image: radial-gradient(
          ellipse 95% 75% at 50% 45%,
          #000 0%,
          rgba(0, 0, 0, 0.6) 62%,
          transparent 90%
        );
      }
      .hero-bg-line,
      .hero-route-line {
        fill: none;
        vector-effect: non-scaling-stroke;
      }
      .hero-bg-line {
        stroke: rgba(108, 64, 153, 0.08);
        stroke-width: 2;
      }
      .hero-route-line {
        stroke: rgba(108, 64, 153, 0.28);
        stroke-width: 7;
        stroke-linecap: round;
        stroke-dasharray: 0.26 1;
        stroke-dashoffset: 0.26;
        opacity: 0;
        filter: drop-shadow(0 0 8px rgba(108, 64, 153, 0.18));
        will-change: opacity, stroke-dashoffset;
      }
      .hero-route-line.route-mid {
        stroke: rgba(108, 64, 153, 0.5);
        stroke-width: 4;
        stroke-dasharray: 0.2 1;
        stroke-dashoffset: 0.2;
        filter: drop-shadow(0 0 8px rgba(108, 64, 153, 0.24));
      }
      .hero-route-line.route-core {
        stroke: rgba(139, 92, 246, 0.9);
        stroke-width: 2;
        stroke-dasharray: 0.12 1;
        stroke-dashoffset: 0.12;
        filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.38));
      }
      .hero-route-line.is-active {
        animation: activeHeroRoute 5.6s cubic-bezier(0.45, 0, 0.2, 1) both;
      }
      @keyframes activeHeroRoute {
        0% {
          opacity: 0;
        }
        10%,
        86% {
          opacity: 0.35;
        }
        92% {
          opacity: 0;
        }
        100% {
          opacity: 0;
          stroke-dashoffset: -1;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .hero-route-line {
          animation: none;
          display: none;
        }
      }
      /* Soft purple ambient halos to add depth (light, low opacity) */
      #hero::after {
        content: "" !important;
        display: block !important;
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
          radial-gradient(
            ellipse 58% 42% at 78% 8%,
            rgba(149, 74, 181, 0.16),
            transparent 65%
          ),
          radial-gradient(
            ellipse 46% 38% at 18% 28%,
            rgba(185, 109, 255, 0.1),
            transparent 65%
          ),
          radial-gradient(
            ellipse 60% 34% at 50% 95%,
            rgba(149, 74, 181, 0.1),
            transparent 70%
          );
      }
      /* Lift content above the pattern */
      #hero .container {
        position: relative;
        z-index: 2;
      }
      /* Kill dark ambient layers */
      #hero .ha-layer,
      #hero #heroNet {
        display: none !important;
      }
      /* Soft purple halo behind the headline → tone down for white bg */
      .hero-left::before {
        background: radial-gradient(
          ellipse at 50% 40%,
          rgba(108, 64, 153, 0.16) 0%,
          rgba(108, 64, 153, 0.05) 45%,
          transparent 75%
        );
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        top: -10%;
        width: 720px;
        max-width: 110%;
      }

      /* Stack the two parts vertically, centered */
      .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 44px !important;
        justify-items: center;
        max-width: 720px;
        margin: 0 auto;
      }
      .hero-left {
        align-items: center;
        text-align: center;
        width: 100%;
      }
      .hero-right {
        width: 100%;
        max-width: 480px;
      }

      /* Hero badge — light pill */
      #hero .section-label {
        align-self: center;
        background: rgba(108, 64, 153, 0.08);
        border: 1px solid rgba(108, 64, 153, 0.18);
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
        color: var(--primary);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }
      #hero .section-label::before {
        background: var(--primary);
        box-shadow: 0 0 6px rgba(108, 64, 153, 0.55);
      }

      /* Headline + sub on white */
      .hero-title {
        color: var(--text);
      }
      .hero-title .ht-grad {
        background: linear-gradient(
          115deg,
          #8b5cf6 0%,
          #6c4099 55%,
          #543277 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .hero-sub {
        color: var(--text-muted);
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
      }

      /* Search card — light glass */
      .hero-right::before {
        background: radial-gradient(
          ellipse at 50% 45%,
          rgba(108, 64, 153, 0.12) 0%,
          rgba(185, 109, 255, 0.04) 45%,
          transparent 72%
        );
      }
      .hero-search-card {
        background: #ffffff;
        border: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }
      .hsc-label {
        color: var(--text);
      }
      .hsc-type {
        background: var(--card-bg);
        border: 1.5px solid var(--border);
        box-shadow: none;
      }
      .hsc-type:hover {
        background: rgba(108, 64, 153, 0.06);
        border-color: rgba(108, 64, 153, 0.35);
        box-shadow: 0 6px 18px rgba(108, 64, 153, 0.12);
      }
      .hsc-type.active {
        background: rgba(108, 64, 153, 0.1);
        border-color: var(--primary);
        box-shadow:
          0 0 0 1px rgba(108, 64, 153, 0.25),
          0 6px 18px rgba(108, 64, 153, 0.18);
      }
      .hsc-type-num {
        color: var(--text);
      }
      .hsc-type-sub {
        color: var(--text-muted);
      }
      .hsc-type.active .hsc-type-num {
        color: var(--primary-dk);
      }
      .hsc-type.active .hsc-type-sub {
        color: var(--primary);
      }

      .hsc-input {
        background: var(--card-bg);
        border: 1.5px solid var(--border);
        color: var(--text);
        caret-color: transparent;
      }
      .hsc-input::placeholder {
        color: var(--text-muted);
      }
      /* When the blinking caret is shown (empty + unfocused), hide the placeholder
       so the caret reads as the cursor instead of overlapping the hint text. */
      .hsc-input:placeholder-shown:not(:focus)::placeholder {
        color: transparent;
      }
      .hsc-input:hover {
        border-color: rgba(108, 64, 153, 0.35);
        background: #fff;
      }
      .hsc-input:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(108, 64, 153, 0.15);
        background: #fff;
      }

      /* Blinking fake caret — shown when input is empty & unfocused */
      .hsc-input-wrap {
        position: relative;
        flex: 1;
        display: flex;
        align-items: stretch;
      }
      .hsc-input-wrap .hsc-input {
        flex: 1;
        width: 100%;
      }
      .hsc-caret {
        position: absolute;
        top: 50%;
        left: calc(50% + var(--caret-offset, 0px));
        transform: translate(-50%, -50%);
        width: 2px;
        height: 34px;
        background: var(--primary);
        border-radius: 2px;
        box-shadow: 0 0 10px rgba(108, 64, 153, 0.7);
        pointer-events: none;
        z-index: 3;
        animation: hscCaretBlink 1.1s steps(2, start) infinite;
      }
      @keyframes hscCaretBlink {
        0%,
        49% {
          opacity: 1;
        }
        50%,
        100% {
          opacity: 0;
        }
      }

      /* Scroll indicator → dark text on white */
      .hero-scroll {
        color: var(--text-muted);
      }
      .hero-scroll-mouse {
        border-color: rgba(16, 24, 40, 0.18);
      }
      .hero-scroll-wheel {
        background: rgba(16, 24, 40, 0.35);
      }

      @media (max-width: 860px) {
        .hero-grid {
          gap: 36px !important;
        }
      }

      /* ─── Section 2: Categories ─── */
      @keyframes catCardIn {
        from {
          opacity: 0;
          transform: translateY(28px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes catCardInFeatured {
        from {
          opacity: 0;
          transform: translateY(14px);
        }
        to {
          opacity: 1;
          transform: translateY(-14px);
        }
      }
      @keyframes catBgFloat {
        0%,
        100% {
          transform: translateX(-50%) translateY(0px);
        }
        50% {
          transform: translateX(-50%) translateY(-28px);
        }
      }
      @keyframes catNodePulse {
        0%,
        100% {
          opacity: 0.4;
          transform: scale(1);
        }
        50% {
          opacity: 1;
          transform: scale(1.5);
        }
      }
      @keyframes catRipple {
        0% {
          transform: scale(0.8);
          opacity: 0.7;
        }
        100% {
          transform: scale(2.4);
          opacity: 0;
        }
      }
      @keyframes catFloatNum {
        0%,
        100% {
          opacity: 0.05;
          transform: translateY(0) rotate(var(--r, 0deg));
        }
        50% {
          opacity: 0.11;
          transform: translateY(-7px) rotate(var(--r, 0deg));
        }
      }
      @keyframes catRingRotate {
        to {
          transform: rotate(360deg);
        }
      }
      @keyframes catGlowPulse {
        0%,
        100% {
          opacity: 0.5;
        }
        50% {
          opacity: 1;
        }
      }
      @keyframes catNodeTwinkle {
        0%,
        100% {
          opacity: 0.15;
          transform: scale(0.8);
        }
        50% {
          opacity: 1;
          transform: scale(1.15);
        }
      }
      @property --neon-angle {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
      }
      @keyframes catNeonSpin {
        to {
          --neon-angle: 360deg;
        }
      }
      @keyframes catWaveBar {
        0% {
          transform: scaleY(0.45);
        }
        100% {
          transform: scaleY(1.35);
        }
      }
      @keyframes catWaveTrace {
        0% {
          stroke-dashoffset: 596;
          opacity: 0;
        }
        18%,
        76% {
          opacity: 1;
        }
        100% {
          stroke-dashoffset: 0;
          opacity: 0;
        }
      }
      @keyframes catVoicePulse {
        0% {
          transform: scaleY(0.82);
          opacity: 0.42;
        }
        100% {
          transform: scaleY(1.18);
          opacity: 0.95;
        }
      }
      @keyframes catVoiceSweep {
        0% {
          transform: translateX(0);
          opacity: 0;
        }
        14%,
        72% {
          opacity: 1;
        }
        100% {
          transform: translateX(500px);
          opacity: 0;
        }
      }

      #categories {
        position: relative;
        background: transparent;
        overflow: hidden;
      }
      #categories .section-label {
        color: rgba(149, 74, 181, 0.9);
        border-color: rgba(149, 74, 181, 0.25);
        background: rgba(149, 74, 181, 0.08);
      }
      #categories .section-title {
        color: #fff;
      }
      #categories .section-sub {
        color: rgba(255, 255, 255, 0.5);
      }

      .cat-bg-glow {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
      }
      .cat-bg-glow::before {
        content: "";
        position: absolute;
        width: 760px;
        height: 520px;
        background: radial-gradient(
          ellipse,
          rgba(149, 74, 181, 0.14) 0%,
          transparent 62%
        );
        top: -60px;
        left: 50%;
        transform: translateX(-50%);
        animation: catBgFloat 9s ease-in-out infinite;
      }
      .cat-bg-glow::after {
        content: "";
        position: absolute;
        width: 380px;
        height: 380px;
        background: radial-gradient(
          circle,
          rgba(43, 182, 115, 0.06) 0%,
          transparent 65%
        );
        bottom: -60px;
        right: 6%;
      }
      #categories .container {
        position: relative;
        z-index: 1;
      }

      .cat-grid-v2 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-top: 48px;
        align-items: center;
      }

      .cat-card-v2 {
        position: relative;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 24px;
        padding: 36px 28px 32px;
        min-height: 400px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        opacity: 0;
        transform: translateY(28px);
        box-shadow:
          0 4px 32px rgba(0, 0, 0, 0.28),
          0 1px 0 rgba(255, 255, 255, 0.06) inset;
        transition:
          border-color 280ms cubic-bezier(0.23, 1, 0.32, 1),
          background 280ms ease,
          transform 280ms cubic-bezier(0.23, 1, 0.32, 1),
          box-shadow 280ms ease;
      }
      .cat-card-v2::before {
        content: "";
        position: absolute;
        top: 0;
        left: 24px;
        right: 24px;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.18),
          transparent
        );
        border-radius: 1px;
        z-index: 2;
      }
      /* Rotating neon border on hover (per-card accent via --neon) */
      .cat-card-v2 {
        --neon: 149, 74, 181;
      }
      .cat-card-country {
        --neon: 56, 189, 148;
      }
      .cat-card-featured {
        --neon: 149, 74, 181;
      }
      .cat-card-phone {
        --neon: 99, 102, 241;
      }
      .cat-card-v2::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 24px;
        padding: 1.5px;
        z-index: 3;
        pointer-events: none;
        opacity: 0;
        background: conic-gradient(
          from var(--neon-angle),
          rgba(var(--neon), 0) 0deg,
          rgba(var(--neon), 0) 200deg,
          rgba(var(--neon), 0.55) 310deg,
          rgba(var(--neon), 1) 346deg,
          #fff 354deg,
          rgba(var(--neon), 0) 360deg
        );
        -webkit-mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        filter: drop-shadow(0 0 4px rgba(var(--neon), 0.85));
        transition: opacity 0.3s ease;
      }

      .cat-card-country.cat-visible {
        animation: catCardIn 540ms cubic-bezier(0.23, 1, 0.32, 1) 0ms forwards;
      }
      .cat-card-featured.cat-visible {
        animation: catCardInFeatured 540ms cubic-bezier(0.23, 1, 0.32, 1) 80ms
          forwards;
      }
      .cat-card-phone.cat-visible {
        animation: catCardIn 540ms cubic-bezier(0.23, 1, 0.32, 1) 160ms forwards;
      }

      .cat-pattern {
        position: absolute;
        inset: 0;
        overflow: hidden;
        border-radius: 24px;
        pointer-events: none;
        z-index: 0;
        transition: opacity 280ms ease;
      }
      .cat-content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        flex: 1;
      }

      /* ── Card 1: Country ── */
      .cat-card-country {
        border-color: rgba(56, 189, 148, 0.22);
        box-shadow:
          0 4px 32px rgba(0, 0, 0, 0.28),
          0 0 0 1px rgba(56, 189, 148, 0.08),
          0 1px 0 rgba(255, 255, 255, 0.06) inset;
      }
      .cat-card-country::before {
        background: linear-gradient(
          90deg,
          transparent,
          rgba(56, 189, 148, 0.5),
          transparent
        );
      }
      /* Full Iran map watermark + node overlay share the same box so nodes land on provinces */
      .cat-map-wrap {
        position: absolute;
        left: -10%;
        top: 50%;
        transform: translateY(-50%);
        width: 60%;
        aspect-ratio: 1200 / 1070.6;
        max-height: 62%;
      }
      .cat-iran-map {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0.22;
      }
      .cat-node-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
      }
      .cat-node-svg circle {
        fill: rgba(56, 189, 148, 0.95);
        animation-name: catNodeTwinkle;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        transform-box: fill-box;
        transform-origin: center;
      }

      /* ── Card 2: Featured ── */
      .cat-card-featured {
        background: rgba(149, 74, 181, 0.1);
        border-color: rgba(149, 74, 181, 0.35);
        box-shadow:
          0 24px 64px rgba(149, 74, 181, 0.22),
          0 0 0 1px rgba(149, 74, 181, 0.18),
          0 1px 0 rgba(255, 255, 255, 0.1) inset;
        min-height: 440px;
        padding: 40px 32px 36px;
        transform: translateY(28px);
      }
      .cat-card-featured::before {
        background: linear-gradient(
          90deg,
          transparent,
          rgba(149, 74, 181, 0.9),
          transparent
        );
      }
      .cat-feat-glow {
        position: absolute;
        inset: 0;
        background: radial-gradient(
          ellipse at 50% 28%,
          rgba(149, 74, 181, 0.16) 0%,
          transparent 65%
        );
        animation: catGlowPulse 4s ease-in-out infinite;
      }
      .cat-waveform {
        position: absolute;
        left: -12%;
        top: 50%;
        transform: translateY(-50%);
        width: 72%;
        height: 52%;
        opacity: 0.82;
        overflow: visible;
      }
      .cat-voice-bar {
        stroke: rgba(56, 189, 148, 0.38);
        stroke-width: 6;
        stroke-linecap: round;
        transform-box: fill-box;
        transform-origin: center;
        animation-name: catVoicePulse;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        filter: drop-shadow(0 0 10px rgba(56, 189, 148, 0.16));
      }
      .cat-voice-bar.purple {
        stroke: rgba(149, 74, 181, 0.5);
        filter: drop-shadow(0 0 10px rgba(149, 74, 181, 0.2));
      }
      .cat-voice-bar.hot {
        stroke: rgba(149, 74, 181, 0.82);
        stroke-width: 7;
        filter: drop-shadow(0 0 14px rgba(149, 74, 181, 0.34));
      }
      .cat-voice-playhead {
        fill: rgba(149, 74, 181, 0.22);
        animation: catVoiceSweep 4.4s ease-in-out infinite;
        filter: drop-shadow(0 0 16px rgba(149, 74, 181, 0.36));
        transform-box: fill-box;
        transform-origin: center;
      }

      /* ── Card 3: Phone/Dialpad ── */
      .cat-card-phone {
        border-color: rgba(99, 102, 241, 0.25);
        box-shadow:
          0 4px 32px rgba(0, 0, 0, 0.28),
          0 0 0 1px rgba(99, 102, 241, 0.07),
          0 1px 0 rgba(255, 255, 255, 0.06) inset;
      }
      .cat-card-phone::before {
        background: linear-gradient(
          90deg,
          transparent,
          rgba(99, 102, 241, 0.5),
          transparent
        );
      }
      .cat-dialpad {
        position: absolute;
        top: 50%;
        left: -4%;
        transform: translateY(-50%) rotate(-6deg);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        width: 184px;
        padding: 0;
        opacity: 0.58;
        filter: blur(0.18px);
      }
      .cat-dialpad-key {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 1.5px solid rgba(149, 74, 181, 0.2);
        background: rgba(149, 74, 181, 0.045);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.78rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.44);
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.035) inset,
          0 0 10px rgba(149, 74, 181, 0.08);
        font-variant-numeric: tabular-nums;
        transform-box: fill-box;
        transform-origin: center;
        transition:
          transform 220ms ease,
          color 220ms ease,
          border-color 220ms ease,
          background 220ms ease,
          box-shadow 220ms ease,
          opacity 220ms ease;
      }
      .cat-dialpad-key.is-lit {
        opacity: 0.95;
        transform: scale(1.06);
        color: rgba(255, 255, 255, 0.92);
        border-color: rgba(149, 74, 181, 0.62);
        background: rgba(149, 74, 181, 0.18);
        box-shadow:
          0 0 0 5px rgba(149, 74, 181, 0.1),
          0 0 20px rgba(149, 74, 181, 0.32),
          0 0 34px rgba(56, 189, 148, 0.1);
      }

      /* ── Shared content ── */
      .cat-badge {
        display: inline-flex;
        align-items: center;
        font-size: 0.68rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 100px;
        background: rgba(149, 74, 181, 0.2);
        color: #d8a8f0;
        border: 1px solid rgba(149, 74, 181, 0.35);
        letter-spacing: 0.03em;
        margin-bottom: 14px;
        width: fit-content;
      }
      .cat-numvis {
        font-weight: 900;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        direction: ltr;
        letter-spacing: 0.06em;
        margin-bottom: 20px;
      }
      .cat-numvis-lg {
        font-size: 1.65rem;
        color: rgba(255, 255, 255, 0.85);
      }
      .cat-numvis-xl {
        font-size: 3rem;
        color: #fff;
        text-shadow:
          0 0 40px rgba(149, 74, 181, 0.7),
          0 0 80px rgba(149, 74, 181, 0.3);
      }
      .cat-numvis-country {
        font-size: 1.4rem;
        color: #fff;
        letter-spacing: 0.05em;
      }
      .cat-v2-title {
        font-size: 1.5rem;
        font-weight: 800;
        color: #fff;
        margin-bottom: 6px;
        letter-spacing: -0.02em;
        text-align: center;
      }
      .cat-v2-sub {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.42);
        line-height: 1.6;
        margin-bottom: 16px;
      }
      .cat-card-featured .cat-v2-sub {
        color: rgba(255, 255, 255, 0.62);
      }

      .cat-v2-benefits {
        list-style: none;
        padding: 0;
        margin: 0 0 20px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1;
      }
      .cat-v2-benefits li {
        font-size: 0.79rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.45);
        display: flex;
        align-items: center;
        gap: 9px;
        line-height: 1.4;
      }
      .cat-v2-benefits li::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(149, 74, 181, 0.5);
        flex-shrink: 0;
      }
      .cat-card-featured .cat-v2-benefits li {
        color: rgba(255, 255, 255, 0.72);
      }
      .cat-card-featured .cat-v2-benefits li::before {
        background: #954ab5;
      }
      .cat-card-country .cat-v2-benefits li::before {
        background: rgba(56, 189, 148, 0.6);
      }

      .cat-v2-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        font-size: 0.84rem;
        font-weight: 700;
        padding: 12px 20px;
        border-radius: 12px;
        font-family: inherit;
        text-decoration: none;
        background: rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
        margin-top: auto;
        transition:
          background 220ms ease,
          color 220ms ease,
          border-color 220ms ease,
          gap 200ms cubic-bezier(0.23, 1, 0.32, 1),
          transform 160ms ease-out,
          box-shadow 220ms ease;
      }
      html[dir="ltr"] .cat-v2-cta svg {
        transform: rotate(180deg);
      }
      .cat-v2-cta:active {
        transform: scale(0.97);
      }
      .cat-v2-cta-featured {
        background: #954ab5;
        color: #fff;
        border: none;
        box-shadow: 0 4px 24px rgba(149, 74, 181, 0.5);
      }

      @media (hover: hover) and (pointer: fine) {
        .cat-v2-cta:hover {
          background: rgba(255, 255, 255, 0.1);
          color: #fff;
          border-color: rgba(255, 255, 255, 0.2);
          gap: 11px;
        }
        .cat-v2-cta-featured:hover {
          background: #7c3a99;
          gap: 11px;
          box-shadow: 0 12px 32px rgba(149, 74, 181, 0.6);
        }
        .cat-card-v2:hover::after {
          opacity: 1;
          animation: catNeonSpin 7s linear infinite;
        }
        .cat-card-v2:hover {
          transform: translateY(-6px);
          box-shadow:
            0 28px 64px rgba(0, 0, 0, 0.5),
            0 1px 0 rgba(255, 255, 255, 0.08) inset;
        }
        .cat-card-country:hover {
          border-color: rgba(56, 189, 148, 0.42);
          box-shadow:
            0 28px 64px rgba(0, 0, 0, 0.5),
            0 0 0 1px rgba(56, 189, 148, 0.18),
            0 1px 0 rgba(255, 255, 255, 0.08) inset;
        }
        .cat-card-featured:hover {
          border-color: rgba(149, 74, 181, 0.6);
          transform: translateY(-20px);
          box-shadow:
            0 40px 80px rgba(149, 74, 181, 0.32),
            0 0 0 1px rgba(149, 74, 181, 0.3),
            0 1px 0 rgba(255, 255, 255, 0.12) inset;
        }
        .cat-card-phone:hover {
          border-color: rgba(99, 102, 241, 0.45);
          box-shadow:
            0 28px 64px rgba(0, 0, 0, 0.5),
            0 0 0 1px rgba(99, 102, 241, 0.16),
            0 1px 0 rgba(255, 255, 255, 0.08) inset;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .cat-card-v2 {
          animation: none !important;
          opacity: 1 !important;
          transform: none !important;
        }
        .cat-card-featured {
          transform: translateY(-14px) !important;
        }
        .cat-bg-glow::before,
        .cat-node-svg circle,
        .cat-dialpad-key,
        .cat-feat-glow,
        .cat-waveform,
        .cat-waveform rect,
        .cat-voice-bar,
        .cat-voice-playhead {
          animation: none !important;
          transform: none !important;
        }
        .cat-node-svg circle {
          opacity: 0.7 !important;
          transform: none !important;
        }
        .cat-card-v2:hover::after {
          animation: none !important;
        }
      }

      @media (max-width: 960px) {
        .cat-grid-v2 {
          grid-template-columns: 1fr;
          max-width: 460px;
          margin-inline: auto;
          margin-top: 32px;
        }
        /* Stacked order: 4 & 5 digit, then 8 digit, then national. The DOM keeps the
           desktop arrangement (national first) so the wide layout is unaffected. */
        .cat-card-featured {
          order: 1;
        }
        .cat-card-phone {
          order: 2;
        }
        .cat-card-country {
          order: 3;
        }
        .cat-card-featured {
          transform: none;
          min-height: 400px;
          padding: 36px 28px 32px;
        }
        .cat-card-featured.cat-visible {
          animation: catCardIn 540ms cubic-bezier(0.23, 1, 0.32, 1) 80ms
            forwards;
        }
      }
      @media (max-width: 520px) {
        .cat-grid-v2 {
          max-width: 100%;
        }
        .cat-card-v2 {
          padding: 28px 20px;
          min-height: 360px;
        }
        .cat-waveform {
          left: -22%;
          width: 86%;
          height: 48%;
          opacity: 0.68;
        }
        .cat-dialpad {
          left: -10%;
          width: 162px;
          gap: 8px;
        }
        .cat-dialpad-key {
          width: 36px;
          height: 36px;
          font-size: 0.7rem;
        }
      }

      /* ════════════════════════════════════════════════════════════════
       SECTION: مزیت‌های نکسفون  (Interactive Feature Hub)
       Self-contained dark section — portable to a WordPress HTML block.
       ════════════════════════════════════════════════════════════════ */
      #advantages {
        position: relative;
        overflow: hidden;
        background: transparent;
        padding: 84px 0 0;
      }
      /* zone provides the continuous background light → drop per-section ambient layers */
      .adv-bg::before,
      .adv-grid,
      .adv-spot {
        display: none;
      }
      #advantages .adv-inner {
        position: relative;
        z-index: 2;
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 24px;
      }

      /* ── Ambient background (radials + network grid + orbs + particles) ── */
      .adv-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
      }
      .adv-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse 50% 42% at 28% 30%,
            rgba(149, 74, 181, 0.2),
            transparent 60%
          ),
          radial-gradient(
            ellipse 48% 40% at 80% 68%,
            rgba(185, 109, 255, 0.12),
            transparent 62%
          ),
          radial-gradient(
            ellipse 60% 36% at 50% 100%,
            rgba(149, 74, 181, 0.1),
            transparent 66%
          );
      }
      .adv-grid {
        position: absolute;
        inset: 0;
        background-image: radial-gradient(
          rgba(185, 109, 255, 0.14) 1px,
          transparent 1.6px
        );
        background-size: 46px 46px;
        -webkit-mask-image: radial-gradient(
          ellipse 90% 75% at 35% 45%,
          #000 0%,
          transparent 80%
        );
        mask-image: radial-gradient(
          ellipse 90% 75% at 35% 45%,
          #000 0%,
          transparent 80%
        );
        opacity: 0.5;
      }
      .adv-spot {
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        will-change: transform, opacity;
      }
      .adv-spot-1 {
        width: 460px;
        height: 460px;
        top: 8%;
        left: 6%;
        background: radial-gradient(
          circle,
          rgba(149, 74, 181, 0.26),
          transparent 70%
        );
        animation: advSpot1 32s ease-in-out infinite;
      }
      .adv-spot-2 {
        width: 520px;
        height: 520px;
        bottom: -120px;
        right: -60px;
        background: radial-gradient(
          circle,
          rgba(185, 109, 255, 0.16),
          transparent 70%
        );
        animation: advSpot2 38s ease-in-out infinite;
      }
      @keyframes advSpot1 {
        0%,
        100% {
          transform: translate(0, 0) scale(1);
          opacity: 0.7;
        }
        50% {
          transform: translate(40px, 38px) scale(1.08);
          opacity: 1;
        }
      }
      @keyframes advSpot2 {
        0%,
        100% {
          transform: translate(0, 0) scale(1);
          opacity: 0.55;
        }
        50% {
          transform: translate(-46px, -34px) scale(1.1);
          opacity: 0.85;
        }
      }
      .adv-particle {
        position: absolute;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: rgba(185, 109, 255, 0.6);
        box-shadow: 0 0 6px rgba(185, 109, 255, 0.7);
        animation: advParticle 7s ease-in-out infinite;
      }
      @keyframes advParticle {
        0%,
        100% {
          opacity: 0.15;
          transform: translateY(0) scale(0.8);
        }
        50% {
          opacity: 0.9;
          transform: translateY(-10px) scale(1.15);
        }
      }

      /* ── Header ── */
      .adv-header {
        text-align: center;
        margin-bottom: 8px;
      }
      #advantages .section-label {
        color: rgba(196, 166, 240, 0.9);
        justify-content: center;
      }
      .adv-title {
        font-size: clamp(1.5rem, 3vw, 2.25rem);
        font-weight: 900;
        letter-spacing: -0.02em;
        color: #fff;
        margin-bottom: 10px;
      }
      .adv-title .adv-title-grad {
        background: linear-gradient(
          115deg,
          #d4b4ff 0%,
          #a78bfa 50%,
          #954ab5 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .adv-sub {
        font-size: clamp(0.88rem, 1.3vw, 1rem);
        color: rgba(255, 255, 255, 0.5);
        line-height: 1.8;
        max-width: 540px;
        margin: 0 auto;
      }

      /* ── Layout: hub (left) + panel (right) ── */
      .adv-layout {
        direction: ltr; /* force columns L→R; children reset to rtl */
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 40px;
        align-items: center;
        margin-top: 48px;
        padding-bottom: 96px;
      }
      .adv-hub,
      .adv-panel {
        direction: rtl;
      }

      /* ── Feature hub ── */
      .adv-hub {
        position: relative;
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        aspect-ratio: 1 / 1;
      }
      /* Faint rotating telecom ring */
      .adv-ring {
        position: absolute;
        inset: 9%;
        border-radius: 50%;
        border: 1px dashed rgba(185, 109, 255, 0.18);
        animation: advRingSpin 60s linear infinite;
      }
      .adv-ring::before {
        content: "";
        position: absolute;
        inset: 9%;
        border-radius: 50%;
        border: 1px solid rgba(149, 74, 181, 0.12);
      }
      @keyframes advRingSpin {
        to {
          transform: rotate(360deg);
        }
      }
      /* Circular pulse behind the phone */
      .adv-pulse {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 38%;
        aspect-ratio: 1;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        background: radial-gradient(
          circle,
          rgba(149, 74, 181, 0.3) 0%,
          transparent 65%
        );
      }
      .adv-pulse::before,
      .adv-pulse::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1px solid rgba(149, 74, 181, 0.35);
        animation: advPulse 4.5s ease-out infinite;
      }
      .adv-pulse::after {
        animation-delay: 2.25s;
      }
      @keyframes advPulse {
        0% {
          transform: scale(0.7);
          opacity: 0.7;
        }
        100% {
          transform: scale(2.1);
          opacity: 0;
        }
      }

      /* Central phone */
      .adv-phone {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 40%;
        max-width: 230px;
        z-index: 3;
        transform: translate(-50%, -50%);
        filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 36px rgba(149, 74, 181, 0.45));
        animation: advFloat 6s ease-in-out infinite;
      }
      .adv-phone svg,
      .adv-phone img {
        width: 100%;
        height: auto;
        display: block;
      }
      @keyframes advFloat {
        0%,
        100% {
          transform: translate(-50%, -50%) translateY(0);
        }
        50% {
          transform: translate(-50%, -50%) translateY(-10px);
        }
      }

      /* Nodes */
      .adv-nodes {
        position: absolute;
        inset: 0;
        z-index: 4;
      }
      .adv-node {
        position: absolute;
        left: var(--x);
        top: var(--y);
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
      }
      .adv-node-dot {
        width: 68px;
        height: 68px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow:
          0 8px 24px rgba(0, 0, 0, 0.32),
          0 1px 0 rgba(255, 255, 255, 0.06) inset;
        color: rgba(255, 255, 255, 0.7);
        transition:
          background 0.3s ease,
          border-color 0.3s ease,
          box-shadow 0.3s ease,
          color 0.3s ease;
      }
      .adv-node-dot iconify-icon {
        font-size: 26px;
      }
      .adv-node-dot img {
        width: 26px;
        height: 26px;
        object-fit: contain;
      }
      .adv-node-label {
        font-size: 0.68rem;
        font-weight: 700;
        line-height: 1.2;
        color: rgba(255, 255, 255, 0.42);
        white-space: nowrap;
        transition: color 0.3s ease;
        text-shadow: 0 1px 6px rgba(7, 4, 15, 0.8);
      }
      @media (hover: hover) and (pointer: fine) {
        .adv-node:hover .adv-node-dot {
          background: rgba(149, 74, 181, 0.18);
          border-color: rgba(149, 74, 181, 0.5);
          color: #fff;
          box-shadow:
            0 12px 30px rgba(149, 74, 181, 0.3),
            0 1px 0 rgba(255, 255, 255, 0.1) inset;
        }
        .adv-node:hover .adv-node-label {
          color: rgba(255, 255, 255, 0.85);
        }
        .adv-node:hover {
          transform: translate(-50%, -50%) scale(1.06);
        }
      }
      .adv-node:focus-visible {
        outline: none;
      }
      .adv-node:focus-visible .adv-node-dot {
        border-color: var(--env-accent);
        box-shadow:
          0 0 0 3px rgba(185, 109, 255, 0.45),
          0 8px 24px rgba(0, 0, 0, 0.32);
      }
      /* Active node */
      .adv-node.is-active {
        transform: translate(-50%, -50%) scale(1.12);
      }
      .adv-node.is-active .adv-node-dot {
        background: linear-gradient(
          160deg,
          rgba(149, 74, 181, 0.55),
          rgba(124, 58, 153, 0.4)
        );
        border-color: rgba(196, 166, 240, 0.8);
        color: #fff;
        box-shadow:
          0 0 0 1px rgba(196, 166, 240, 0.4),
          0 14px 36px rgba(149, 74, 181, 0.5),
          0 0 28px rgba(149, 74, 181, 0.55),
          0 1px 0 rgba(255, 255, 255, 0.14) inset;
      }
      .adv-node.is-active .adv-node-label {
        color: #fff;
      }

      /* ── Content panel ── */
      .adv-panel {
        /* background: rgba(255,255,255,.035);
      border: 1px solid rgba(255,255,255,.1); */
        border-radius: 20px;
        /* padding: 28px 26px; */
        max-width: 420px;
        align-self: center;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        /* box-shadow: 0 24px 64px rgba(8,4,18,.5), 0 1px 0 rgba(255,255,255,.06) inset; */
      }
      .adv-panel-label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        color: rgba(196, 166, 240, 0.9);
        margin-bottom: 12px;
      }
      .adv-panel-label::before {
        content: "";
        width: 18px;
        height: 2px;
        border-radius: 1px;
        background: var(--env-brand);
      }
      .adv-panel-swap {
        transition:
          opacity 0.3s ease,
          transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
      }
      .adv-panel-swap.is-swapping {
        opacity: 0;
        transform: translateY(8px);
      }
      .adv-panel-title {
        font-size: clamp(1.25rem, 2vw, 1.6rem);
        font-weight: 900;
        letter-spacing: -0.02em;
        color: #fff;
        margin-bottom: 12px;
      }
      .adv-panel-desc {
        font-size: 0.88rem;
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.6);
        margin-bottom: 20px;
      }
      .adv-panel-benefits {
        list-style: none;
        padding: 0;
        margin: 0 0 24px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 14px;
      }
      .adv-panel-benefits li {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.82rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.72);
        align-items: flex-start;
        gap: 6px;
      }
      .adv-panel-benefits li iconify-icon {
        color: var(--env-accent);
        font-size: 16px;
        flex-shrink: 0;
      }
      .adv-panel-cta {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 11px 24px;
        border-radius: 12px;
        font-size: 0.88rem;
        font-weight: 700;
        font-family: inherit;
        color: #fff;
        text-decoration: none;
        background: linear-gradient(135deg, #954ab5 0%, #7c3a99 100%);
        box-shadow: 0 10px 30px rgba(149, 74, 181, 0.45);
        transition:
          transform 0.16s ease-out,
          box-shadow 0.25s ease,
          gap 0.2s cubic-bezier(0.23, 1, 0.32, 1);
      }
      @media (hover: hover) and (pointer: fine) {
        .adv-panel-cta:hover {
          gap: 13px;
          box-shadow: 0 14px 38px rgba(149, 74, 181, 0.6);
          transform: translateY(-2px);
        }
      }
      .adv-panel-cta:active {
        transform: scale(0.97);
      }
      .adv-panel-cta:focus-visible {
        outline: none;
        box-shadow:
          0 0 0 3px rgba(185, 109, 255, 0.5),
          0 10px 30px rgba(149, 74, 181, 0.45);
      }

      /* ── Bottom fade into next (light) section ── */
      .adv-fade {
        display: none;
      }

      @media (prefers-reduced-motion: reduce) {
        .adv-spot,
        .adv-particle,
        .adv-phone,
        .adv-ring,
        .adv-pulse::before,
        .adv-pulse::after {
          animation: none !important;
        }
      }

      /* ── Responsive ── */
      @media (max-width: 960px) {
        .adv-layout {
          grid-template-columns: 1fr;
          gap: 24px;
          padding-bottom: 80px;
        }
        .adv-hub {
          max-width: 440px;
          order: 1;
        }
        .adv-panel {
          order: 2;
        }
        .adv-panel-benefits {
          grid-template-columns: 1fr;
        }
      }
      @media (max-width: 560px) {
        .adv-hub {
          max-width: 360px;
        }
        .adv-node-dot {
          width: 56px;
          height: 56px;
        }
        .adv-node-dot iconify-icon {
          font-size: 21px;
        }
        .adv-node-label {
          display: none;
        }
        .adv-panel {
          padding: 30px 22px;
        }
      }

      /* ─── Section 3: Why Memorable ─── */
      #why {
        background: var(--card-bg);
      }
      .features-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }
      .feature-card {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 20px 18px;
        transition: all var(--transition);
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: hidden;
      }
      .feature-card::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 3px;
        height: 40%;
        border-radius: 0 0 3px 3px;
        background: var(--primary);
        opacity: 0;
        transition:
          opacity var(--transition),
          height var(--transition);
      }
      .feature-card:hover::before {
        opacity: 1;
        height: 60%;
      }
      .feature-card:hover {
        border-color: rgba(108, 64, 153, 0.2);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
      }
      .feature-icon {
        width: 36px;
        height: 36px;
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
      }
      .feature-icon svg,
      .feature-icon [data-ph] {
        width: 18px;
        height: 18px;
      }
      .feature-title {
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 5px;
      }
      .feature-desc {
        font-size: 0.8125rem;
        color: var(--text-muted);
        line-height: 1.65;
      }

      /* ─── Section 4: Featured Numbers ─── */
      /* ─── Section 4: Featured Numbers ─── */
      /* ══ Featured Numbers ══ */
      .numbers-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        align-items: stretch; /* equal height rows */
      }

      /* ── base card ── */
      .num-card {
        border-radius: 16px;
        padding: 0;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        transition:
          box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1),
          border-color 0.24s,
          transform 0.24s;
        position: relative;
        overflow: hidden;
      }

      /* ── 3px top accent bar — integrated tier identity ── */
      .num-card::before {
        content: "";
        display: block;
        height: 3px;
        flex-shrink: 0;
        border-radius: 16px 16px 0 0;
      }
      .nc-silver::before {
        background: #c0c7d2;
      }
      .nc-gold::before {
        background: linear-gradient(
          90deg,
          #c9960c 0%,
          #e5ba3a 50%,
          #c9960c 100%
        );
      }
      .nc-platinum::before {
        background: linear-gradient(
          90deg,
          #5a2d9a 0%,
          #8b5cf6 50%,
          #5a2d9a 100%
        );
      }

      /* ── Silver ── */
      .nc-silver {
        background: #fafafa;
        border: 1px solid #e4e7ec;
        box-shadow: 0 1px 4px rgba(16, 24, 40, 0.04);
      }
      .nc-silver:hover {
        transform: translateY(-3px);
        border-color: #98a2b3;
        box-shadow: 0 6px 20px rgba(16, 24, 40, 0.07);
      }

      /* ── Gold ── */
      .nc-gold {
        background: #fffcf5;
        border: 1px solid #edcf6e;
        box-shadow: 0 2px 8px rgba(184, 137, 23, 0.07);
      }
      .nc-gold:hover {
        transform: translateY(-3px);
        border-color: #c9960c;
        box-shadow: 0 8px 24px rgba(184, 137, 23, 0.12);
      }

      /* ── Platinum — dominant ── */
      .nc-platinum {
        background: #fdfcff;
        border: 1.5px solid #c4a6f0;
        box-shadow: 0 4px 20px rgba(108, 64, 153, 0.12);
      }
      .nc-platinum:hover {
        transform: translateY(-4px);
        border-color: #8b5cf6;
        box-shadow: 0 10px 32px rgba(108, 64, 153, 0.2);
      }

      /* ── num-body: inner padding, flex column, fills full card height ── */
      .num-body {
        padding: 18px 18px 20px;
        display: flex;
        flex-direction: column;
        flex: 1; /* stretch to match row height */
      }

      /* Zone 1 — Metadata */
      .num-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
      }
      .num-tier {
        font-size: 0.58rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .nc-silver .num-tier {
        color: #667085;
      }
      .nc-gold .num-tier {
        color: #92610a;
      }
      .nc-platinum .num-tier {
        color: #5a2d9a;
      }

      /* two separate small pills */
      .num-tags {
        display: flex;
        gap: 4px;
      }
      .num-tag {
        font-size: 0.6rem;
        font-weight: 600;
        padding: 2px 7px;
        border-radius: 100px;
        background: #f2f4f7;
        color: #667085;
        border: 1px solid #e4e7ec;
      }
      .nc-platinum .num-tag {
        background: #f3eeff;
        color: #7c4fbf;
        border-color: #d6bbfb;
      }
      .nc-gold .num-tag {
        background: #fffbeb;
        color: #92610a;
        border-color: #edcf6e;
      }

      /* Zone 2 — Number (hero) */
      .num-all-btn-mobile {
        display: none;
      }
      .num-all-btn-desktop {
        display: inline-flex;
      }
      .num-number {
        font-size: clamp(1.6rem, 2.4vw, 2rem);
        font-weight: 900;
        letter-spacing: 0.05em;
        line-height: 1;
        direction: ltr;
        text-align: center;
        padding: 10px 0 8px;
        font-variant-numeric: tabular-nums;
        color: #1d2939;
      }
      .num-number.sm {
        font-size: clamp(1.6rem, 2.4vw, 2rem);
        letter-spacing: 0.05em;
      }
      .nc-platinum .num-number {
        color: #3b1f6e;
      }
      .nc-gold .num-number {
        color: #5c3500;
      }

      /* Zone 3 — Value proposition */
      .num-desc {
        font-size: 0.71rem;
        line-height: 1.5;
        text-align: center;
        color: #98a2b3;
        margin-top: 6px;
        margin-bottom: 0;
        flex: 1; /* pushes footer to bottom */
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding-bottom: 16px;
      }
      .nc-gold .num-desc {
        color: #a07720;
      }
      .nc-platinum .num-desc {
        color: #7b55b0;
      }

      /* Zone 4 — Footer: price + CTA, always at bottom */
      .num-card-footer {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      /* price */
      .num-price-block {
        display: flex;
        flex-direction: column;
        gap: 3px;
      }
      .num-price-old-row {
        display: flex;
        align-items: center;
        gap: 6px;
        direction: ltr;
        min-height: 18px; /* reserve height even when absent */
      }
      .num-price-original {
        font-size: 0.7rem;
        color: #c4c9d4;
        text-decoration: line-through;
        font-weight: 500;
      }
      .num-discount {
        font-size: 0.58rem;
        font-weight: 700;
        color: #d92d20;
        background: #fef3f2;
        border: 1px solid #fecdca;
        padding: 1px 6px;
        border-radius: 100px;
      }
      .num-price-row {
        display: flex;
        align-items: center;
        gap: 5px;
        direction: ltr;
        min-height: 28px;
      }
      .num-price-val {
        font-size: 1.2rem;
        font-weight: 800;
        letter-spacing: -0.01em;
      }
      .nc-silver .num-price-val {
        color: #1d2939;
      }
      .nc-gold .num-price-val {
        color: #5c3500;
      }
      .nc-platinum .num-price-val {
        color: #3b1f6e;
      }
      .num-price-toman-label {
        font-size: 0.64rem;
        font-weight: 500;
        color: #98a2b3;
      }

      /* CTA: Silver → outline | Gold → soft warm | Platinum → solid purple */
      .num-buy-btn {
        width: 100%;
        height: 42px;
        border-radius: 10px;
        font-size: 0.82rem;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
        transition:
          background 0.2s,
          border-color 0.2s,
          box-shadow 0.2s,
          color 0.2s,
          transform 0.15s;
        letter-spacing: 0.01em;
        flex-shrink: 0;
      }
      .num-buy-btn:hover {
        transform: translateY(-1px);
      }

      .nc-silver .num-buy-btn {
        background: transparent;
        color: #344054;
        border: 1.5px solid #d0d5dd;
      }
      .nc-silver .num-buy-btn:hover {
        border-color: #475467;
        background: #f9fafb;
        box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
      }
      .nc-gold .num-buy-btn {
        background: #fffaeb;
        color: #7a4f0d;
        border: 1.5px solid #e9d58f;
      }
      .nc-gold .num-buy-btn:hover {
        background: #fef0c7;
        border-color: #c9960c;
        box-shadow: 0 3px 10px rgba(184, 137, 23, 0.18);
      }
      .nc-platinum .num-buy-btn {
        background: #6c4099;
        color: #fff;
        border: none;
        box-shadow: 0 3px 12px rgba(108, 64, 153, 0.3);
      }
      .nc-platinum .num-buy-btn:hover {
        background: #5a3490;
        box-shadow: 0 6px 20px rgba(108, 64, 153, 0.42);
      }

      /* consult override */
      .num-consult-btn {
        background: transparent !important;
        color: #6c4099 !important;
        border: 1.5px solid #c4a6f0 !important;
        box-shadow: none !important;
      }
      .num-consult-btn:hover {
        background: #f3eeff !important;
        border-color: #8b5cf6 !important;
      }

      /* trust strip */
      .num-trust-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 6px 28px;
        margin-top: 28px;
        padding-top: 20px;
        border-top: 1px solid #f2f4f7;
      }
      .num-trust-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        color: #667085;
      }
      .num-trust-item svg,
      .num-trust-item iconify-icon {
        color: #2bb673;
        flex-shrink: 0;
      }

      /* ─── Section 5: How It Works ─── */
      #how {
        background: #fff;
      }
      .steps-container {
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
      }
      .steps-line {
        position: absolute;
        top: 40px;
        right: calc(100% / 6);
        left: calc(100% / 6);
        height: 1px;
        background: linear-gradient(90deg, var(--primary), var(--accent));
        opacity: 0.25;
        z-index: 0;
      }
      .step-item {
        position: relative;
        z-index: 1;
        text-align: center;
      }
      .step-num {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary), var(--primary-lt));
        color: #fff;
        font-size: 1.125rem;
        font-weight: 900;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 18px;
        box-shadow: 0 6px 18px rgba(108, 64, 153, 0.35);
        position: relative;
      }
      .step-num::after {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 1.5px solid rgba(108, 64, 153, 0.2);
      }
      .step-icon-wrap {
        position: absolute;
        top: -6px;
        left: -6px;
        width: 28px;
        height: 28px;
        background: var(--accent);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .step-icon-wrap svg,
      .step-icon-wrap iconify-icon {
        width: 14px;
        height: 14px;
        color: #fff;
      }
      .step-title {
        font-size: 0.9375rem;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 7px;
      }
      .step-desc {
        font-size: 0.8125rem;
        color: var(--text-muted);
        line-height: 1.65;
      }

      /* ─── Section 6: Why Nexfon (Bento layout) ─── */
      #why-nexfon {
        background: var(--card-bg);
      }
      .benefits-bento {
        display: grid;
        grid-template-columns: 1.6fr 1fr 1fr;
        grid-auto-rows: 1fr;
        gap: 16px;
      }
      .benefit-card {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 22px 20px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        transition: all var(--transition);
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: hidden;
        min-height: 150px;
      }
      .benefit-card:hover {
        border-color: rgba(108, 64, 153, 0.25);
        box-shadow: 0 16px 40px rgba(108, 64, 153, 0.1);
        transform: translateY(-3px);
      }
      .benefit-card .benefit-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: linear-gradient(
          135deg,
          rgba(108, 64, 153, 0.12),
          rgba(135, 95, 175, 0.06)
        );
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .benefit-card .benefit-icon svg,
      .benefit-card .benefit-icon iconify-icon {
        width: 19px;
        height: 19px;
        color: var(--primary);
      }
      .benefit-card .title {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 4px;
      }
      .benefit-card .desc {
        font-size: 0.8rem;
        color: var(--text-muted);
        line-height: 1.7;
      }

      /* ── Iran map mega-card ── */
      .benefit-map {
        grid-row: span 3;
        background: linear-gradient(160deg, #fff 0%, #faf7ff 100%);
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 24px;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: var(--shadow-sm);
        transition: all var(--transition);
      }
      .benefit-map:hover {
        box-shadow: 0 24px 60px rgba(108, 64, 153, 0.18);
        transform: translateY(-3px);
      }
      .benefit-map-head {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 6px;
      }
      .benefit-map-head .benefit-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: linear-gradient(135deg, var(--primary), var(--light));
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .benefit-map-head .benefit-icon svg {
        width: 19px;
        height: 19px;
        color: #fff;
      }
      .benefit-map-title {
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--text);
      }
      .benefit-map-desc {
        font-size: 0.82rem;
        color: var(--text-muted);
        line-height: 1.8;
        max-width: 340px;
        margin-bottom: 12px;
      }
      .benefit-map-svg {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        min-height: 280px;
      }
      .benefit-map-svg svg {
        width: 100%;
        height: 100%;
        max-height: 360px;
      }

      /* Map paths/dots animation */
      .iran-shape path {
        fill: rgba(108, 64, 153, 0.06);
        stroke: rgba(108, 64, 153, 0.32);
        stroke-width: 2;
        stroke-linejoin: round;
        transition: fill 0.3s;
      }
      .benefit-map:hover .iran-shape path {
        fill: rgba(108, 64, 153, 0.1);
      }
      .iran-line {
        stroke: var(--primary);
        stroke-width: 2;
        fill: none;
        opacity: 0;
        transition: opacity 0.4s ease;
      }
      .iran-line.drawing {
        stroke-dasharray: 2000;
        stroke-dashoffset: 2000;
        opacity: 0.55;
        animation: drawIranLine var(--dur, 1.6s) cubic-bezier(0.4, 0, 0.2, 1)
          forwards;
      }
      .iran-line.fading {
        opacity: 0;
        transition: opacity 0.6s ease;
      }
      @keyframes drawIranLine {
        from {
          stroke-dashoffset: 2000;
        }
        to {
          stroke-dashoffset: 0;
        }
      }
      @keyframes drawLine {
        to {
          stroke-dashoffset: 0;
        }
      }
      .iran-city {
        fill: var(--primary);
        transition: r 0.3s;
      }
      .iran-city-ring {
        fill: none;
        stroke: var(--primary);
        stroke-width: 1.5;
        opacity: 0;
        transform-origin: center;
        animation: cityPulse 2.4s ease-out infinite;
      }
      .iran-city-ring {
        stroke-width: 4;
      }
      @keyframes cityPulse {
        0% {
          r: 12;
          opacity: 0.8;
        }
        100% {
          r: 46;
          opacity: 0;
        }
      }
      .iran-hub {
        fill: var(--accent);
        filter: drop-shadow(0 0 14px rgba(43, 182, 115, 0.7));
      }
      .iran-hub-ring {
        fill: none;
        stroke: var(--accent);
        stroke-width: 5;
        opacity: 0;
        animation: hubPulse 2s ease-out infinite;
      }
      @keyframes hubPulse {
        0% {
          r: 16;
          opacity: 1;
        }
        100% {
          r: 72;
          opacity: 0;
        }
      }
      .iran-label {
        font-size: 27px;
        font-weight: 600;
        fill: var(--text-muted);
        direction: rtl;
        text-anchor: middle;
      }
      .iran-label.hub {
        font-size: 31px;
        font-weight: 800;
        fill: var(--text);
      }
      .iran-stats {
        margin-top: 14px;
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding-top: 14px;
        border-top: 1px dashed var(--border);
        pointer-events: none;
      }
      .iran-stat {
        text-align: center;
      }
      .iran-stat-num {
        font-size: 1rem;
        font-weight: 800;
        color: var(--primary);
      }
      .iran-stat-lbl {
        font-size: 0.68rem;
        color: var(--text-muted);
        margin-top: 2px;
      }

      /* ─── Section 7: Stats ─── */
      #stats {
        background: transparent;
        position: relative;
        overflow: hidden;
        padding: 100px 0;
      }
      /* zone provides the continuous background light → drop per-section ambient layers */
      #stats::before {
        display: none;
      }
      .stats-blob {
        display: none;
      }
      /* glow blobs */
      .stats-mouse-glow {
        pointer-events: none;
        position: absolute;
        inset: 0;
        z-index: 0;
        opacity: 0;
        transition: opacity 0.4s ease;
        background: radial-gradient(
          600px circle at var(--sx, 50%) var(--sy, 50%),
          rgba(149, 74, 181, 0.22) 0%,
          rgba(185, 109, 255, 0.08) 45%,
          transparent 70%
        );
      }
      #stats:hover .stats-mouse-glow {
        opacity: 1;
      }

      .stats-blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        pointer-events: none;
      }
      .stats-blob-1 {
        width: 600px;
        height: 600px;
        background: radial-gradient(
          circle,
          rgba(149, 74, 181, 0.3) 0%,
          transparent 70%
        );
        top: -150px;
        right: -150px;
      }
      .stats-blob-2 {
        width: 400px;
        height: 400px;
        background: radial-gradient(
          circle,
          rgba(185, 109, 255, 0.16) 0%,
          transparent 70%
        );
        bottom: -100px;
        left: -100px;
      }
      .stats-blob-3 {
        width: 300px;
        height: 300px;
        background: radial-gradient(
          circle,
          rgba(149, 74, 181, 0.22) 0%,
          transparent 70%
        );
        top: 50%;
        left: 40%;
        transform: translateY(-50%);
      }

      .stats-header {
        text-align: center;
        margin-bottom: 64px;
        position: relative;
        z-index: 1;
      }
      .stats-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(149, 74, 181, 0.14);
        border: 1px solid rgba(149, 74, 181, 0.3);
        border-radius: 100px;
        padding: 5px 16px;
        font-size: 0.8125rem;
        font-weight: 600;
        color: rgba(196, 166, 240, 0.95);
        margin-bottom: 16px;
      }
      .stats-title {
        font-size: clamp(1.5rem, 3vw, 2.25rem);
        font-weight: 800;
        color: #fff;
        letter-spacing: -0.025em;
      }
      .stats-sub {
        max-width: 760px;
        margin: 18px auto 0;
        color: rgba(255, 255, 255, 0.62);
        font-size: clamp(0.95rem, 1.4vw, 1.125rem);
        font-weight: 500;
        line-height: 2;
      }

      .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        position: relative;
        z-index: 1;
      }
      .stat-card {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 20px;
        padding: 36px 28px;
        text-align: center;
        position: relative;
        overflow: hidden;
        transition:
          border-color 0.3s,
          transform 0.3s,
          background 0.3s;
        cursor: default;
      }
      .stat-card::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 2px;
        background: linear-gradient(
          90deg,
          transparent,
          var(--stat-color, #b96dff),
          transparent
        );
        opacity: 0;
        transition: opacity 0.3s;
      }
      .stat-card:hover {
        border-color: rgba(185, 109, 255, 0.3);
        background: rgba(255, 255, 255, 0.07);
        transform: translateY(-4px);
      }
      .stat-card:hover::before {
        opacity: 1;
      }

      /* ring progress */
      .stat-ring-wrap {
        position: relative;
        width: 80px;
        height: 80px;
        margin: 0 auto 20px;
      }
      .stat-ring-svg {
        width: 80px;
        height: 80px;
        transform: rotate(-90deg);
      }
      .stat-ring-track {
        fill: none;
        stroke: rgba(255, 255, 255, 0.06);
        stroke-width: 3;
      }
      .stat-ring-fill {
        fill: none;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-dasharray: 213;
        stroke-dashoffset: 213;
        transition: stroke-dashoffset 1.6s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .stat-ring-fill.animated {
        stroke-dashoffset: 0;
      }
      .stat-ring-icon {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .stat-ring-icon svg {
        width: 22px;
        height: 22px;
      }

      .stat-num {
        font-size: clamp(0.8rem, 1.5vw, 1.25rem);
        font-weight: 900;
        color: #fff;
        letter-spacing: -0.03em;
        line-height: 1;
        margin-bottom: 8px;
        direction: ltr;
        font-variant-numeric: tabular-nums;
      }
      .stat-num .stat-prefix,
      .stat-num .stat-suffix {
        font-size: 0.65em;
        font-weight: 700;
        opacity: 0.85;
      }
      .stat-label {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.55);
        font-weight: 500;
        margin-bottom: 16px;
      }
      .stat-bar-wrap {
        height: 3px;
        background: rgba(255, 255, 255, 0.07);
        border-radius: 2px;
        overflow: hidden;
      }
      .stat-bar {
        height: 100%;
        border-radius: 2px;
        width: 0;
        transition: width 1.6s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .stat-bar.animated {
        width: var(--bar-w, 80%);
      }

      /* ══════════ Connected metrics timeline (telecom backbone) ══════════ */
      .net-timeline {
        position: relative;
        z-index: 1;
        max-width: 1040px;
        margin: 0 auto;
      }
      /* faint telecom grid + soft aura, blends with section (no boxed bg) */
      .net-timeline::before {
        content: "";
        position: absolute;
        inset: -40px -20px;
        z-index: 0;
        pointer-events: none;
        background-image:
          linear-gradient(rgba(185, 109, 255, 0.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(185, 109, 255, 0.05) 1px, transparent 1px);
        background-size: 46px 46px;
        -webkit-mask-image: radial-gradient(
          ellipse 70% 90% at 50% 50%,
          #000 0%,
          transparent 72%
        );
        mask-image: radial-gradient(
          ellipse 70% 90% at 50% 50%,
          #000 0%,
          transparent 72%
        );
        opacity: 0.6;
      }
      .net-timeline::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: radial-gradient(
          ellipse 60% 120% at 50% 50%,
          rgba(149, 74, 181, 0.18) 0%,
          transparent 70%
        );
        filter: blur(20px);
      }

      .net-nodes {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* ── Connection link (animated telecom data line) ── */
      .net-link {
        position: relative;
        flex: 1 1 auto;
        min-width: 24px;
        height: 24px;
        opacity: 0;
        transition: opacity 0.45s ease;
      }
      .net-link.in {
        opacity: 1;
      }
      .net-link-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
      }
      .net-link-base {
        stroke: rgba(255, 255, 255, 0.09);
        stroke-width: 2;
      }
      .net-link-glow {
        stroke: url(#netGrad);
        stroke-width: 2;
        opacity: 0.7;
        filter: drop-shadow(0 0 6px rgba(185, 109, 255, 0.45));
        transition:
          opacity 0.35s ease,
          filter 0.35s ease;
        animation: netGlowPulse 3s ease-in-out infinite;
      }
      @keyframes netGlowPulse {
        0%,
        100% {
          opacity: 0.45;
        }
        50% {
          opacity: 0.95;
        }
      }
      /* traveling data packet */
      .net-spark {
        position: absolute;
        top: 50%;
        left: 0;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #e7d2ff;
        box-shadow: 0 0 10px 2px rgba(199, 141, 255, 0.85);
        transform: translate(-50%, -50%);
        animation: netSpark 2.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
      }
      @keyframes netSpark {
        0% {
          left: 0;
          opacity: 0;
        }
        12% {
          opacity: 1;
        }
        88% {
          opacity: 1;
        }
        100% {
          left: 100%;
          opacity: 0;
        }
      }

      /* ── Circular glass metric node ── */
      .net-node {
        position: relative;
        flex: 0 0 auto;
        width: 168px;
        height: 168px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        text-align: center;
        background: radial-gradient(
          circle at 50% 32%,
          rgba(185, 109, 255, 0.16) 0%,
          rgba(255, 255, 255, 0.035) 58%,
          rgba(255, 255, 255, 0.012) 100%
        );
        border: 1px solid rgba(185, 109, 255, 0.28);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.1),
          inset 0 0 34px rgba(149, 74, 181, 0.2),
          0 18px 46px -22px rgba(149, 74, 181, 0.55);
        opacity: 0;
        transform: translateY(18px) scale(0.92);
        transition:
          opacity 0.5s ease,
          transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
          box-shadow 0.4s ease,
          border-color 0.4s ease;
        cursor: default;
      }
      .net-node::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: 50%;
        box-shadow: 0 0 26px rgba(185, 109, 255, 0.22);
        opacity: 0.55;
        transition: opacity 0.4s ease;
        pointer-events: none;
      }
      .net-node.in {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      .net-node.in:hover {
        transform: translateY(-6px) scale(1.055);
        border-color: rgba(199, 141, 255, 0.6);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.14),
          inset 0 0 40px rgba(149, 74, 181, 0.3),
          0 26px 60px -22px rgba(149, 74, 181, 0.8),
          0 0 50px rgba(185, 109, 255, 0.35);
      }
      .net-node.in:hover::before {
        opacity: 1;
      }
      /* hovering a node brightens the connected lines on both sides */
      .net-node.in:hover + .net-link .net-link-glow,
      .net-link:has(+ .net-node.in:hover) .net-link-glow {
        opacity: 1;
        filter: drop-shadow(0 0 11px rgba(207, 158, 255, 0.95));
      }

      .net-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(185, 109, 255, 0.12);
        border: 1px solid rgba(185, 109, 255, 0.28);
        color: #c99bf0;
        margin-bottom: 2px;
      }
      .net-icon img {
        width: 26px;
        height: 26px;
        object-fit: contain;
      }
      .net-num {
        font-size: clamp(0.95rem, 1.4vw, 1.15rem);
        font-weight: 900;
        color: #fff;
        letter-spacing: -0.03em;
        line-height: 1;
        direction: ltr;
        font-variant-numeric: tabular-nums;
      }
      .net-num .stat-prefix,
      .net-num .stat-suffix {
        font-size: 0.62em;
        font-weight: 700;
        opacity: 0.85;
      }
      .net-label {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.6);
        font-weight: 500;
      }

      /* Tablet: 2×2 grid, keep connection visuals as a cross */
      @media (max-width: 900px) {
        .net-link {
          display: none;
        }
        .net-nodes {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          place-items: center;
          gap: 56px 40px;
          max-width: 540px;
          margin: 0 auto;
        }
        .net-nodes::before,
        .net-nodes::after {
          content: "";
          position: absolute;
          pointer-events: none;
          z-index: 0;
        }
        .net-nodes::before {
          left: 10%;
          right: 10%;
          top: 50%;
          height: 2px;
          transform: translateY(-50%);
          background: linear-gradient(
            90deg,
            transparent,
            rgba(185, 109, 255, 0.45),
            transparent
          );
          box-shadow: 0 0 12px rgba(185, 109, 255, 0.28);
        }
        .net-nodes::after {
          top: 8%;
          bottom: 8%;
          left: 50%;
          width: 2px;
          transform: translateX(-50%);
          background: linear-gradient(
            180deg,
            transparent,
            rgba(185, 109, 255, 0.45),
            transparent
          );
          box-shadow: 0 0 12px rgba(185, 109, 255, 0.28);
        }
      }

      /* Mobile: vertical timeline */
      @media (max-width: 560px) {
        .net-nodes {
          grid-template-columns: 1fr;
          gap: 30px;
          max-width: 200px;
        }
        .net-nodes::before {
          display: none;
        }
        .net-nodes::after {
          display: none;
        }
        .net-node {
          width: 150px;
          height: 150px;
        }
        .net-node:not(:last-child)::after {
          content: "";
          position: absolute;
          top: 100%;
          left: 50%;
          width: 2px;
          height: 30px;
          transform: translateX(-50%);
          background: linear-gradient(
            180deg,
            rgba(185, 109, 255, 0.48),
            rgba(185, 109, 255, 0.28)
          );
          box-shadow: 0 0 12px rgba(185, 109, 255, 0.28);
          pointer-events: none;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .net-spark,
        .net-link-glow {
          animation: none;
        }
        .net-node {
          transition: opacity 0.3s ease;
          transform: none;
        }
        .net-node.in {
          transform: none;
        }
      }

      /* ─── Section 8: Logos ─── */
      /* ─── Social Proof (logos + testimonials merged) ─── */
      #social-proof {
        background: transparent;
        position: relative;
        overflow: hidden;
      }
      #social-proof .container {
        position: relative;
        z-index: 1;
      }
      #social-proof .section-title {
        color: #fff;
      }
      #social-proof .section-sub {
        color: rgba(255, 255, 255, 0.5);
      }
      #social-proof .section-label {
        color: rgba(196, 166, 240, 0.9);
      }
      #social-proof .section-label::before {
        background: var(--env-brand);
      }

      /* ── Premium logo trust bar ── */
      .sp-logo-grid {
        margin-bottom: 96px;
      }
      .sp-logo-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: center;
        max-width: 980px;
        margin: 0 auto;
        padding: 12px;
        border-radius: 24px;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.045),
          rgba(255, 255, 255, 0.012)
        );
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow:
          0 30px 70px -40px rgba(0, 0, 0, 0.8),
          inset 0 1px 0 rgba(255, 255, 255, 0.06);
        position: relative;
        overflow: hidden;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
      }
      .sp-logo-bar::before {
        content: "";
        position: absolute;
        top: 0;
        left: 12%;
        right: 12%;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(185, 109, 255, 0.55),
          transparent
        );
      }
      .sp-logo-bar::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(
          120% 80% at 50% -10%,
          rgba(149, 74, 181, 0.16),
          transparent 60%
        );
      }
      .sp-logo-card {
        position: relative;
        z-index: 1;
        flex: 1 1 150px;
        min-width: 130px;
        height: 76px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 18px;
        border-radius: 15px;
        transition:
          background 0.25s cubic-bezier(0.23, 1, 0.32, 1),
          transform 0.25s;
      }
      .sp-logo-card img {
        max-height: 36px;
        max-width: 80%;
        object-fit: contain;
        filter: grayscale(1) brightness(2) opacity(0.3);
        transition:
          filter 0.3s,
          transform 0.3s;
      }
      @media (hover: hover) and (pointer: fine) {
        .sp-logo-card:hover {
          background: rgba(149, 74, 181, 0.12);
        }
        .sp-logo-card:hover img {
          filter: grayscale(0) opacity(1);
          transform: scale(1.06);
        }
      }
      @media (max-width: 900px) and (min-width: 601px) {
        .sp-logo-card {
          flex-basis: 30%;
        } /* balanced 3 × 2 on tablet */
      }
      @media (max-width: 600px) {
        .sp-logo-grid {
          margin-bottom: 64px;
        }
        .sp-logo-card {
          flex-basis: 40%;
          height: 64px;
          padding: 10px 12px;
        }
      }

      /* ── Premium testimonials slider ── */
      .sp-testimonials {
        margin-top: 8px;
      }
      .sp-slider-outer {
        overflow: hidden;
        direction: ltr;
        padding: 6px;
      }
      .sp-slider-track {
        display: flex;
        transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        will-change: transform;
      }
      .sp-slide {
        flex: 0 0 100%;
        min-width: 0;
        display: flex;
        justify-content: center;
        padding: 4px;
        box-sizing: border-box;
        direction: rtl;
      }
      .sp-slide-card {
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(
            120% 130% at 100% 0%,
            rgba(149, 74, 181, 0.16) 0%,
            transparent 42%
          ),
          linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.022) 55%,
            rgba(255, 255, 255, 0.012) 100%
          );
        border: 1px solid rgba(185, 109, 255, 0.2);
        border-radius: 28px;
        padding: 52px 48px 38px;
        max-width: 760px;
        width: 100%;
        box-shadow:
          0 36px 80px -34px rgba(8, 4, 18, 0.85),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }
      .sp-slide-card::before {
        content: "\201D";
        position: absolute;
        top: 4px;
        right: 34px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 7.5rem;
        line-height: 1;
        font-weight: 700;
        color: rgba(185, 109, 255, 0.22);
        pointer-events: none;
      }
      .sp-slide-card::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        height: 200px;
        pointer-events: none;
        background: radial-gradient(
          circle at 100% 0%,
          rgba(185, 109, 255, 0.18),
          transparent 70%
        );
      }
      .sp-slide-stars {
        position: relative;
        z-index: 1;
        color: #fbbf24;
        font-size: 1.05rem;
        letter-spacing: 4px;
        margin-bottom: 20px;
        filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.35));
      }
      .sp-slide-quote {
        position: relative;
        z-index: 1;
        font-size: 1.12rem;
        line-height: 2;
        color: rgba(255, 255, 255, 0.86);
        margin-bottom: 30px;
        font-weight: 500;
      }
      .sp-slide-author {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 14px;
        padding-top: 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
      }
      .sp-slide-avatar {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        flex-shrink: 0;
        overflow: hidden;
        border: 2px solid rgba(185, 109, 255, 0.5);
        box-shadow:
          0 0 0 4px rgba(149, 74, 181, 0.16),
          0 6px 16px rgba(0, 0, 0, 0.4);
      }
      .sp-slide-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .sp-slide-info {
        flex: 1;
        min-width: 0;
      }
      .sp-slide-name {
        font-size: 0.96rem;
        font-weight: 800;
        color: #fff;
      }
      .sp-slide-role {
        font-size: 0.76rem;
        color: rgba(208, 180, 250, 0.6);
        margin-top: 3px;
      }
      .sp-slide-tag {
        font-size: 0.64rem;
        font-weight: 700;
        padding: 5px 13px;
        border-radius: 100px;
        background: rgba(149, 74, 181, 0.18);
        color: rgba(208, 180, 250, 0.95);
        border: 1px solid rgba(185, 109, 255, 0.35);
        white-space: nowrap;
        flex-shrink: 0;
        box-shadow: 0 0 14px rgba(149, 74, 181, 0.2);
      }
      /* Nav */
      .sp-slider-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        margin-top: 34px;
        direction: ltr;
      }
      .sp-slider-btn {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.16);
        color: rgba(255, 255, 255, 0.7);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          background 0.2s,
          border-color 0.2s,
          color 0.2s,
          transform 0.2s,
          box-shadow 0.2s;
        flex-shrink: 0;
      }
      @media (hover: hover) and (pointer: fine) {
        .sp-slider-btn:hover {
          background: linear-gradient(135deg, #6c4099, #8b5cf6);
          border-color: transparent;
          color: #fff;
          transform: translateY(-2px);
          box-shadow: 0 10px 26px rgba(108, 64, 153, 0.5);
        }
      }
      .sp-slider-dots {
        display: flex;
        gap: 7px;
        align-items: center;
      }
      .sp-slider-dot {
        width: 7px;
        height: 7px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.2);
        cursor: pointer;
        transition:
          background 0.3s cubic-bezier(0.23, 1, 0.32, 1),
          width 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        border: none;
      }
      .sp-slider-dot.active {
        background: #b96dff;
        width: 24px;
        box-shadow: 0 0 12px rgba(185, 109, 255, 0.6);
      }
      @media (max-width: 600px) {
        .sp-slide-card {
          padding: 40px 24px 26px;
          border-radius: 22px;
        }
        .sp-slide-card::before {
          font-size: 5.5rem;
          right: 20px;
        }
        .sp-slide-quote {
          font-size: 0.98rem;
          line-height: 1.95;
        }
      }

      /* ─── Section 9: FAQ ─── */
      #faq {
        background: var(--card-bg);
      }
      .faq-list {
        max-width: 760px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .faq-item {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        overflow: hidden;
        transition: border-color var(--transition);
      }
      .faq-item.open {
        border-color: rgba(108, 64, 153, 0.25);
      }
      .faq-q {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 15px 20px;
        background: none;
        font-family: inherit;
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--text);
        cursor: pointer;
        text-align: right;
        transition: color var(--transition);
      }
      .faq-item.open .faq-q {
        color: var(--primary);
      }
      .faq-arrow {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--card-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition:
          background var(--transition),
          transform var(--transition);
      }
      .faq-arrow iconify-icon {
        display: block;
        color: var(--text-muted);
        transition: color var(--transition);
      }
      .faq-item.open .faq-arrow {
        background: var(--primary);
        transform: rotate(180deg);
      }
      .faq-item.open .faq-arrow iconify-icon {
        color: #fff;
      }
      .faq-a {
        max-height: 0;
        overflow: hidden;
        transition:
          max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
          padding 0.35s;
        font-size: 0.9375rem;
        color: var(--text-muted);
        line-height: 1.75;
      }
      .faq-item.open .faq-a {
        max-height: 300px;
      }
      .faq-a-inner {
        padding: 0 24px 20px;
      }

      /* ── FAQ bottom CTA ── */
      .faq-bottom-cta {
        max-width: 760px;
        margin: 28px auto 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 18px 28px;
        background: #fff;
        border: 1.5px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: 0 2px 12px rgba(16, 24, 40, 0.04);
      }
      .faq-bottom-text {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-muted);
      }
      .faq-bottom-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 10px 22px;
        border-radius: 10px;
        background: var(--primary);
        color: #fff;
        font-size: 0.85rem;
        font-weight: 700;
        font-family: inherit;
        text-decoration: none;
        transition:
          background 0.2s,
          box-shadow 0.2s,
          gap 0.2s;
        box-shadow: 0 4px 14px rgba(108, 64, 153, 0.28);
        white-space: nowrap;
      }
      .faq-bottom-btn:hover {
        background: #5a3490;
        box-shadow: 0 6px 20px rgba(108, 64, 153, 0.4);
        gap: 10px;
      }
      @media (max-width: 520px) {
        .faq-bottom-cta {
          flex-direction: column;
          gap: 12px;
          text-align: center;
        }
        .faq-bottom-btn {
          width: 100%;
          justify-content: center;
        }
      }

      /* ─── Section 9.5: Blog (Editorial/Magazine layout) ─── */
      #blog {
        background: #fff;
        position: relative;
        overflow: hidden;
      }
      #blog::before {
        content: "";
        position: absolute;
        top: -120px;
        right: -120px;
        width: 320px;
        height: 320px;
        background: radial-gradient(
          circle,
          rgba(108, 64, 153, 0.08),
          transparent 70%
        );
        pointer-events: none;
      }
      .blog-header-row {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
        margin-bottom: 32px;
        padding-bottom: 20px;
      }
      .blog-header-row .section-title {
        margin-bottom: 6px;
      }
      .blog-header-meta {
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 0.78rem;
        color: var(--text-muted);
        flex-shrink: 0;
      }
      .blog-header-meta strong {
        color: var(--text);
        font-weight: 700;
      }

      .blog-layout {
        display: grid;
        grid-template-columns: 1.15fr 1fr;
        gap: 36px;
        margin-bottom: 32px;
        position: relative;
        z-index: 1;
      }

      /* ── Featured big article ── */
      .blog-feature {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
        group: feature;
      }
      .blog-feature-cover {
        position: relative;
        aspect-ratio: 16/10;
        border-radius: 16px;
        overflow: hidden;
        margin-bottom: 18px;
        background: linear-gradient(
          135deg,
          #6c4099 0%,
          #543277 60%,
          #2bb673 100%
        );
        box-shadow: 0 18px 50px rgba(108, 64, 153, 0.25);
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .blog-feature:hover .blog-feature-cover {
        transform: translateY(-4px);
      }
      .blog-feature-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
      }
      .blog-feature-cover::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse at 85% 15%,
            rgba(255, 255, 255, 0.3),
            transparent 55%
          ),
          radial-gradient(
            ellipse at 15% 85%,
            rgba(0, 0, 0, 0.25),
            transparent 55%
          );
      }
      .blog-feature-cover::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: linear-gradient(
          0deg,
          rgba(0, 0, 0, 0.55) 0%,
          transparent 100%
        );
      }
      /* big number/digit decoration on cover */
      .blog-feature-deco {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 9rem;
        font-weight: 900;
        color: rgba(255, 255, 255, 0.14);
        direction: ltr;
        letter-spacing: 0.02em;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        pointer-events: none;
      }
      .blog-feature-badge {
        position: absolute;
        top: 16px;
        right: 16px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: rgba(255, 255, 255, 0.95);
        color: var(--primary);
        font-size: 0.68rem;
        font-weight: 800;
        padding: 5px 11px;
        border-radius: 20px;
        letter-spacing: 0.03em;
        z-index: 2;
      }
      .blog-feature-badge::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--accent);
      }
      .blog-feature-cat-line {
        position: absolute;
        bottom: 16px;
        right: 16px;
        color: #fff;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }
      .blog-feature-cat-line::after {
        content: "";
        width: 24px;
        height: 1px;
        background: rgba(255, 255, 255, 0.6);
      }
      .blog-feature-title {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--text);
        line-height: 1.5;
        margin-bottom: 10px;
        transition: color 0.2s;
      }
      .blog-feature:hover .blog-feature-title {
        color: var(--primary);
      }
      .blog-feature-excerpt {
        font-size: 0.9rem;
        color: var(--text-muted);
        line-height: 1.8;
        margin-bottom: 14px;
      }
      .blog-feature-meta {
        display: flex;
        gap: 14px;
        align-items: center;
        font-size: 0.76rem;
        color: var(--text-muted);
      }
      .blog-feature-meta .author {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-weight: 700;
        color: var(--text);
      }
      .blog-feature-meta .author-dot {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary), var(--light));
        color: #fff;
        font-size: 0.65rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* ── Numbered list on the side ── */
      .blog-list {
        display: flex;
        flex-direction: column;
      }
      .blog-list-head {
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--primary);
        margin-bottom: 18px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }
      .blog-list-head::after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(
          90deg,
          rgba(108, 64, 153, 0.25),
          transparent
        );
      }
      .blog-item {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 18px;
        padding: 16px 0;
        border-bottom: 1px dashed var(--border);
        text-decoration: none;
        color: inherit;
        cursor: pointer;
        transition: transform 0.25s;
      }
      .blog-item:last-of-type {
        border-bottom: none;
      }
      .blog-item:hover {
        transform: translateX(-4px);
      }
      .blog-item-num {
        font-size: 1.5rem;
        font-weight: 900;
        color: var(--border);
        direction: ltr;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        transition: color 0.25s;
        padding-top: 2px;
        min-width: 32px;
      }
      .blog-item:hover .blog-item-num {
        color: var(--primary);
      }
      .blog-item-content {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
      }
      .blog-item-cat {
        font-size: 0.68rem;
        font-weight: 700;
        color: var(--accent-dk);
        letter-spacing: 0.04em;
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }
      .blog-item-cat::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--accent);
      }
      .blog-item-title {
        font-size: 0.92rem;
        font-weight: 700;
        color: var(--text);
        line-height: 1.6;
        transition: color 0.25s;
      }
      .blog-item:hover .blog-item-title {
        color: var(--primary);
      }
      .blog-item-meta {
        font-size: 0.7rem;
        color: var(--text-muted);
        display: flex;
        gap: 10px;
      }

      /* ── Blog: vertical scroll carousel with peek ── */
      .blog-carousel {
        display: flex;
        align-items: center;
        gap: 18px;
        margin-bottom: 28px;
      }
.blog-deck {
  flex: 1;
  min-width: 0;
  position: relative;
  height: 404px; /* 30% of each adjacent 232px card plus row gaps */
  overflow: hidden;
}
      .blog-deck-track {
        display: flex;
        flex-direction: column;
        gap: 16px;
        will-change: transform;
        transition: transform 0.55s cubic-bezier(0.34, 1.1, 0.4, 1);
      }
      .blog-deck .blog-row {
        flex-shrink: 0;
      }
      .blog-nav {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        flex-shrink: 0;
      }
      .blog-nav-btn {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: 1px solid var(--border);
        background: #fff;
        color: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: var(--shadow-sm);
        transition: all var(--transition);
      }
      .blog-nav-btn:hover:not(:disabled) {
        background: var(--primary);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
      }
      .blog-nav-btn:disabled {
        opacity: 0.3;
        cursor: default;
      }

      .blog-row {
        display: flex;
        align-items: stretch;
        width: 100%;
        height: 232px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        text-decoration: none;
        box-shadow: var(--shadow-sm);
        transition:
          transform var(--transition),
          box-shadow var(--transition),
          border-color var(--transition);
      }
      .blog-row:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
        border-color: rgba(108, 64, 153, 0.35);
      }

      /* right side: text */
      .blog-row-body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        padding: 26px 30px;
      }
      .blog-row-cat {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--primary);
        letter-spacing: 0.01em;
      }
      .blog-row-cat::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--primary);
        flex-shrink: 0;
      }
      .blog-row-title {
        font-size: 1.18rem;
        font-weight: 800;
        line-height: 1.55;
        color: var(--text);
        margin: 0;
        transition: color var(--transition);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .blog-row:hover .blog-row-title {
        color: var(--primary);
      }
      .blog-row-foot {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-top: 2px;
      }
      .blog-row-date {
        font-size: 0.78rem;
        color: var(--text-muted);
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .blog-row-more {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--primary);
        transition: gap var(--transition);
      }
      .blog-row:hover .blog-row-more {
        gap: 10px;
      }
      .blog-row-more svg {
        transition: transform var(--transition);
      }

      /* left side: thumbnail with gradient fade */
      .blog-row-media {
        position: relative;
        flex-shrink: 0;
        width: 500px;
        align-self: stretch;
        overflow: hidden;
      }
      .blog-row-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform var(--transition);
      }
      .blog-row:hover .blog-row-media img {
        transform: scale(1.05);
      }
      /* gradient fades image into the card body (body sits to the right in RTL) */
      .blog-row-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to right,
          rgba(255, 255, 255, 0) 30%,
          #fff 97%
        );
        pointer-events: none;
      }

      @media (max-width: 1024px) {
        .blog-carousel {
          position: relative;
          display: block;
          padding-inline: 0;
        }
        .blog-deck {
          height: 320px;
          overflow: hidden;
        }
        .blog-deck-track {
          flex-direction: row;
          direction: ltr;
          gap: 16px;
        }
        .blog-deck .blog-row {
          flex: 0 0 100%;
          width: 100%;
        }
        html[dir="rtl"] .blog-deck .blog-row {
          direction: rtl;
        }
        html[dir="ltr"] .blog-deck .blog-row {
          direction: ltr;
        }
        .blog-row {
          flex-direction: column-reverse;
          height: 320px;
        }
        .blog-row-media {
          width: 100%;
          height: 150px;
        }
        /* Stacked cards put the image on top, where the fade-into-white read
           as a smudge across the photo instead of a blend. Show the image
           clean — no gradient wash over it. */
        .blog-row-media::after {
          display: none;
        }
        .blog-row-body {
          padding: 18px 20px;
        }
        .blog-row-title {
          font-size: 1.05rem;
        }
        /* Stacked cards get the footer pushed to the edges: the date on the
           reading-start side, the "read more" link on the far side. `order` plus
           space-between follows the writing direction, so RTL puts the date
           right / link left and LTR mirrors it with no extra rule. */
        .blog-row-foot {
          justify-content: space-between;
          width: 100%;
        }
        .blog-row-date {
          order: 1;
        }
        .blog-row-more {
          order: 2;
        }
        .blog-nav {
          position: static;
          width: 100%;
          margin-top: 8px;
          z-index: 3;
          direction: ltr;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          gap: 12px;
          pointer-events: auto;
          transform: none;
        }
        .blog-nav-btn {
          width: 40px;
          height: 40px;
          pointer-events: auto;
        }
        #blogUp svg {
          transform: rotate(-90deg);
        }
        #blogDown svg {
          transform: rotate(-90deg);
        }
      }

      /* ─── Consult form ─── */
      #consult {
        background: var(--card-bg);
      }
      .consult-wrap {
        max-width: 960px;
        margin: 0 auto;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 40px 36px;
        box-shadow: var(--shadow-md);
      }
      .consult-intro {
        text-align: center;
        margin-bottom: 28px;
      }
      .consult-intro .section-sub {
        margin-left: auto;
        margin-right: auto;
      }
      .consult-form {
        display: flex;
        flex-direction: column;
        gap: 22px;
      }
      .consult-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px 18px;
      }
      .consult-field {
        display: flex;
        flex-direction: column;
        gap: 7px;
      }
      .consult-label {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--text);
      }
      .consult-field input,
      .consult-field select {
        width: 100%;
        height: 46px;
        padding: 0 14px;
        font-family: inherit;
        font-size: 0.9rem;
        color: var(--text);
        background: var(--card-bg);
        border: 1.5px solid var(--border);
        border-radius: var(--radius-md);
        transition:
          border-color 0.2s,
          box-shadow 0.2s,
          background 0.2s;
        outline: none;
      }
      .consult-field input::placeholder {
        color: var(--text-muted);
      }
      .consult-field input:hover,
      .consult-field select:hover {
        border-color: rgba(108, 64, 153, 0.35);
        background: #fff;
      }
      .consult-field input:focus,
      .consult-field select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(108, 64, 153, 0.15);
        background: #fff;
      }
      .consult-select-wrap {
        position: relative;
      }
      .consult-select-wrap select {
        appearance: none;
        -webkit-appearance: none;
        padding-left: 40px;
        cursor: pointer;
      }
      .consult-select-caret {
        position: absolute;
        top: 50%;
        left: 14px;
        transform: translateY(-50%);
        color: var(--text-muted);
        pointer-events: none;
      }
      .consult-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 14px;
        flex-wrap: wrap;
      }
      .consult-feedback {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--accent-dk);
      }
      .consult-feedback.error {
        color: #c62828;
      }
      .consult-field input.is-invalid,
      .consult-field select.is-invalid {
        border-color: #c62828;
        box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12);
      }
      .nexfon-gf-consult form,
      #consult .nexfon-gf-consult #gform_1 {
        display: flex;
        flex-direction: column;
        gap: 22px !important;
      }
      .nexfon-gf-consult .gform_fields,
      #consult .nexfon-gf-consult #gform_fields_1 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px 18px !important;
        inline-size: 100% !important;
      }
      .nexfon-gf-consult .gfield,
      #consult .nexfon-gf-consult #gform_fields_1 .gfield {
        display: block !important;
        grid-column: auto !important;
        inline-size: auto !important;
        min-inline-size: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
      }
      .nexfon-gf-consult .ginput_container,
      #consult .nexfon-gf-consult #gform_fields_1 .ginput_container {
        margin: 0 !important;
      }
      .nexfon-gf-consult .gfield_label,
      #consult .nexfon-gf-consult #gform_fields_1 .gfield_label {
        display: block !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        line-height: 1.45 !important;
        color: var(--text) !important;
        margin: 0 0 7px !important;
        padding: 0 !important;
      }
      .nexfon-gf-consult .gfield_required_text {
        display: none !important;
      }
      .nexfon-gf-consult input[type="text"],
      .nexfon-gf-consult input[type="tel"],
      .nexfon-gf-consult input[type="email"],
      .nexfon-gf-consult select,
      #consult .nexfon-gf-consult #gform_fields_1 input[type="text"],
      #consult .nexfon-gf-consult #gform_fields_1 input[type="tel"],
      #consult .nexfon-gf-consult #gform_fields_1 input[type="email"],
      #consult .nexfon-gf-consult #gform_fields_1 select {
        display: block !important;
        width: 100% !important;
        inline-size: 100% !important;
        height: 46px !important;
        block-size: 46px !important;
        min-block-size: 46px !important;
        padding: 0 14px !important;
        font-family: inherit !important;
        font-size: 0.9rem !important;
        color: var(--text) !important;
        background: var(--card-bg) !important;
        border: 1.5px solid var(--border) !important;
        border-radius: var(--radius-md) !important;
        outline: none !important;
        box-shadow: none !important;
        transition:
          border-color 0.2s,
          box-shadow 0.2s,
          background 0.2s !important;
      }
      .nexfon-gf-consult input::placeholder {
        color: var(--text-muted) !important;
        opacity: 1 !important;
      }
      .nexfon-gf-consult input:hover,
      .nexfon-gf-consult select:hover {
        border-color: rgba(108, 64, 153, 0.35) !important;
        background: #fff !important;
      }
      .nexfon-gf-consult input:focus,
      .nexfon-gf-consult select:focus,
      #consult .nexfon-gf-consult #gform_fields_1 input:focus,
      #consult .nexfon-gf-consult #gform_fields_1 select:focus {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 3px rgba(108, 64, 153, 0.15) !important;
        background: #fff !important;
      }
      .nexfon-gf-consult select:hover,
      .nexfon-gf-consult select:focus,
      .nexfon-gf-consult 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-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%236c4099' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: left 16px center !important;
        background-size: 14px 14px !important;
      }
      #consult .nexfon-gf-consult #gform_fields_1 .gfield_error input,
      #consult .nexfon-gf-consult #gform_fields_1 .gfield_error select,
      #consult .nexfon-gf-consult #gform_fields_1 input.is-invalid,
      #consult .nexfon-gf-consult #gform_fields_1 select.is-invalid {
        border-color: #c62828 !important;
        box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12) !important;
      }
      #consult .nexfon-gf-consult #gform_fields_1 .gfield_validation_message,
      #consult .nexfon-gf-consult #gform_fields_1 .validation_message {
        margin: 6px 0 0 !important;
        padding: 0 !important;
        color: #c62828 !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        line-height: 1.7 !important;
      }
      .nexfon-gf-consult select {
        appearance: none !important;
        -webkit-appearance: none !important;
        padding-left: 40px !important;
        background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%236c4099' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: left 16px center !important;
        background-size: 14px 14px !important;
        cursor: pointer !important;
      }
      .nexfon-gf-consult .gform_footer,
      #consult .nexfon-gf-consult #gform_1 .gform_footer {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 14px !important;
        flex-wrap: wrap !important;
        margin: 0 !important;
        padding: 0 !important;
      }
      .nexfon-gf-consult .gform_button,
      #consult .nexfon-gf-consult #gform_submit_button_1 {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        width: auto !important;
        inline-size: auto !important;
        min-width: 0 !important;
        min-inline-size: 0 !important;
        min-height: 0 !important;
        min-block-size: 0 !important;
        padding: 11px 26px !important;
        background: var(--primary) !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: var(--radius-md) !important;
        font-family: inherit !important;
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        white-space: nowrap !important;
        cursor: pointer !important;
        box-shadow: 0 0 0 0 rgba(108, 64, 153, 0.4) !important;
        transition: all var(--transition) !important;
        appearance: none !important;
        -webkit-appearance: none !important;
      }
      .nexfon-gf-consult .gform_button:hover {
        background: #5a3490 !important;
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(108, 64, 153, 0.35) !important;
      }
      #consult .nexfon-gf-consult #gform_submit_button_1 iconify-icon {
        flex: 0 0 auto;
      }
      @media (max-width: 640px) {
        .consult-wrap {
          padding: 28px 20px;
        }
        .consult-grid {
          grid-template-columns: 1fr;
        }
        .nexfon-gf-consult .gform_fields,
        #consult .nexfon-gf-consult #gform_fields_1 {
          grid-template-columns: 1fr !important;
        }
        .consult-actions {
          justify-content: center;
        }
        .nexfon-gf-consult .gform_footer,
        #consult .nexfon-gf-consult #gform_1 .gform_footer {
          justify-content: center !important;
        }
      }

      /* ═══════════════ Customer testimonials (dark) ═══════════════ */
      #testimonials {
        position: relative;
        background: var(--env-base);
        padding: 96px 0 110px;
        overflow: hidden;
      }
      #testimonials::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            60% 50% at 20% 0%,
            rgba(149, 74, 181, 0.2),
            transparent 70%
          ),
          radial-gradient(
            50% 60% at 90% 100%,
            rgba(108, 64, 153, 0.16),
            transparent 70%
          );
        pointer-events: none;
      }
      #testimonials .container {
        position: relative;
        z-index: 1;
      }
      #testimonials .section-title {
        color: #fff;
      }
      #testimonials .section-sub {
        color: rgba(255, 255, 255, 0.5);
      }
      #testimonials .section-label {
        color: rgba(196, 166, 240, 0.9);
      }
      #testimonials .section-label::before {
        background: var(--env-brand);
      }

      .tst-card {
        position: relative;
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        border-radius: 26px;
        overflow: hidden;
        background: #141416;
        border: 1px solid rgba(255, 255, 255, 0.07);
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
        text-align: right;
        padding: 0 56px 48px;
        min-height: 460px;
        display: flex;
        flex-direction: column;
      }
      .tst-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
      }
      .tst-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        display: block;
        transition: opacity 0.5s ease;
      }
      .tst-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to bottom,
          rgba(20, 20, 22, 0.55) 0%,
          rgba(20, 20, 22, 0.8) 38%,
          #141416 72%
        );
      }
      .tst-inner {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        flex: 1;
      }

      .tst-logo {
        margin: 52px 0 0;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
      .tst-logo img {
        max-height: 56px;
        max-width: 200px;
        width: auto;
        object-fit: contain;
        display: block;
      }

      .tst-quote-mark {
        position: absolute;
        bottom: 14px;
        left: 30px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 11rem;
        line-height: 0.6;
        color: rgba(255, 255, 255, 0.07);
        z-index: 0;
        pointer-events: none;
        user-select: none;
      }
      .tst-text {
        position: relative;
        z-index: 1;
        margin: auto 0 0;
        max-width: 820px;
        color: #fff;
        font-size: 1.08rem;
        font-weight: 600;
        line-height: 2.1;
        padding-top: 60px;
        text-align: right;
        direction: rtl;
      }
      .tst-author {
        position: relative;
        z-index: 1;
        margin-top: 30px;
        text-align: left;
        direction: ltr;
        align-self: flex-end;
      }
      .tst-name {
        font-size: 1rem;
        font-weight: 800;
        color: #fff;
      }
      .tst-role {
        font-size: 0.82rem;
        color: rgba(255, 255, 255, 0.55);
        margin-top: 5px;
      }

      /* ── Splide carousel wrapper ── */
      .tst-splide {
        margin-top: 44px;
      }
      .tst-splide .splide__track {
        padding: 8px 0 32px;
      }
      .tst-splide .splide__pagination {
        bottom: -4px;
        gap: 6px;
      }
      .tst-splide .splide__pagination__page {
        background: rgba(255, 255, 255, 0.22);
        width: 8px;
        height: 8px;
        opacity: 1;
        transition: all 0.25s;
      }
      .tst-splide .splide__pagination__page.is-active {
        background: var(--env-accent);
        transform: scale(1.4);
      }
      .tst-splide .splide__arrow {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        width: 44px;
        height: 44px;
        opacity: 1;
        transition:
          background 0.2s,
          border-color 0.2s;
      }
      .tst-splide .splide__arrow:hover:not(:disabled) {
        background: rgba(149, 74, 181, 0.25);
        border-color: rgba(185, 109, 255, 0.4);
      }
      .tst-splide .splide__arrow svg {
        fill: #fff;
        width: 18px;
        height: 18px;
      }
      .tst-splide .splide__arrow--prev {
        right: -8px;
      }
      .tst-splide .splide__arrow--next {
        left: -8px;
      }
      @media (max-width: 980px) {
        .tst-splide .splide__arrow {
          display: none;
        }
      }

      /* brand logo tabs */
      .tst-tabs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 14px 40px;
        direction: ltr;
        margin: 40px auto 0;
        max-width: 900px;
      }
      .tst-tab {
        background: none;
        border: none;
        cursor: pointer;
        padding: 14px 6px;
        position: relative;
        opacity: 0.45;
        transition: opacity var(--transition);
      }
      .tst-tab:hover {
        opacity: 0.8;
      }
      .tst-tab.active {
        opacity: 1;
      }
      .tst-tab img {
        height: 32px;
        width: auto;
        max-width: 150px;
        object-fit: contain;
        display: block;
      }
      .tst-tab.active::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        width: 64px;
        height: 3px;
        border-radius: 3px;
        background: var(--env-accent);
      }

      @media (max-width: 760px) {
        #testimonials {
          padding: 64px 0 76px;
        }
        .tst-card {
          padding: 0 22px 36px;
          min-height: 0;
          border-radius: 20px;
        }
        .tst-logo {
          margin-top: 36px;
          height: 48px;
        }
        .tst-logo img {
          max-height: 42px;
        }
        .tst-text {
          font-size: 0.95rem;
          line-height: 1.95;
          padding-top: 36px;
        }
        .tst-quote-mark {
          font-size: 7rem;
          left: 14px;
        }
        .tst-tabs {
          gap: 10px 26px;
        }
        .tst-tab img {
          height: 24px;
        }
      }

      /* ── footer CTA strip ── */
      .blog-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22px 28px;
        border-radius: 14px;
        background: linear-gradient(135deg, #f7f3fc 0%, #ecf6f1 100%);
        border: 1px dashed rgba(108, 64, 153, 0.2);
        gap: 16px;
        flex-wrap: wrap;
      }
      .blog-foot-text {
        font-size: 0.9rem;
        color: var(--text);
      }
      .blog-foot-text strong {
        color: var(--primary);
        font-weight: 800;
      }
      .blog-foot .btn {
        flex-shrink: 0;
      }

      /* ─── Section 10: Final CTA ─── */
      #final-cta {
        background: linear-gradient(135deg, var(--primary-dk) 0%, #3d2068 100%);
        position: relative;
        overflow: hidden;
        text-align: center;
      }
      #final-cta::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image:
          radial-gradient(
            ellipse at 20% 50%,
            rgba(43, 182, 115, 0.12) 0%,
            transparent 50%
          ),
          radial-gradient(
            ellipse at 80% 30%,
            rgba(135, 95, 175, 0.2) 0%,
            transparent 50%
          );
        pointer-events: none;
      }
      /* Diagonal slash decorations */
      .cta-slash {
        position: absolute;
        opacity: 0.06;
        pointer-events: none;
      }
      .cta-slash-1 {
        top: -60px;
        left: -40px;
        width: 300px;
        height: 500px;
        background: linear-gradient(
          135deg,
          transparent 40%,
          #fff 40%,
          #fff 60%,
          transparent 60%
        );
        transform: skewX(-20deg);
      }
      .cta-slash-2 {
        bottom: -60px;
        right: -40px;
        width: 250px;
        height: 400px;
        background: linear-gradient(
          135deg,
          transparent 40%,
          #fff 40%,
          #fff 60%,
          transparent 60%
        );
        transform: skewX(-20deg);
      }
      .final-cta-content {
        position: relative;
        z-index: 1;
      }
      .final-cta-title {
        font-size: clamp(1.25rem, 3vw, 2rem);
        font-weight: 900;
        color: #fff;
        letter-spacing: -0.02em;
        line-height: 1.25;
        margin-bottom: 10px;
      }
      .final-cta-sub {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 28px;
      }
      .final-cta-btns {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        flex-wrap: wrap;
      }

      /* ═══════════════════ Pre-footer CTA (image banner) ═══════════════════ */
      #pre-footer-cta {
        position: relative;
        width: 100%;
        overflow: hidden;
        background: transparent;
        isolation: isolate;
      }
      /* full-width image, natural height */
      .pf-picture {
        display: block;
        width: 100%;
      }
      .pf-img {
        width: 100%;
        height: auto;
        display: block;
      }
      /* dark overlay on the LEFT only — keeps phone (right) visible */
      .pf-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(
          90deg,
          rgba(5, 5, 15, 0.92) 0%,
          rgba(5, 5, 15, 0.55) 40%,
          transparent 68%
        );
      }
      /* soft purple glow behind the content */
      .pf-glow {
        position: absolute;
        z-index: 1;
        pointer-events: none;
        top: 50%;
        left: 6%;
        width: 480px;
        height: 320px;
        transform: translateY(-50%);
        background: radial-gradient(
          ellipse at center,
          rgba(149, 74, 181, 0.3) 0%,
          transparent 70%
        );
        filter: blur(20px);
      }
      /* content overlay — centered title + single CTA on the LEFT */
      .pf-inner {
        position: absolute;
        inset: 0;
        z-index: 2;
        direction: ltr; /* force content to the physical LEFT */
        display: flex;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
      }
      .pf-content {
        direction: rtl;
        text-align: right;
        max-width: 560px;
      }
      .pf-title {
        font-size: clamp(17px, 2.4vw, 32px);
        line-height: 1.25;
        font-weight: 900;
        letter-spacing: -0.02em;
        color: #fff;
        margin-bottom: clamp(12px, 1.6vw, 20px);
        text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
      }
      .pf-sub {
        max-width: 46ch;
        margin: 0 0 clamp(14px, 1.8vw, 22px);
        font-size: clamp(0.82rem, 1.25vw, 1rem);
        line-height: 1.9;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.78);
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
      }
      .pf-btn {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 14px 30px;
        border-radius: 12px;
        font-size: clamp(0.8rem, 1.3vw, 0.98rem);
        font-weight: 700;
        font-family: inherit;
        cursor: pointer;
        text-decoration: none;
        color: #fff;
        background: linear-gradient(135deg, #954ab5 0%, #b96dff 100%);
        box-shadow: 0 12px 32px rgba(149, 74, 181, 0.5);
        transition:
          transform 0.16s ease-out,
          box-shadow 0.25s ease,
          gap 0.2s cubic-bezier(0.23, 1, 0.32, 1);
      }
      @media (hover: hover) and (pointer: fine) {
        .pf-btn:hover {
          gap: 13px;
          transform: translateY(-2px);
          box-shadow: 0 16px 40px rgba(149, 74, 181, 0.65);
        }
      }
      .pf-btn:active {
        transform: scale(0.97);
      }
      .pf-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(185, 109, 255, 0.5);
      }

      @media (max-width: 900px) {
        .pf-overlay {
          background: linear-gradient(
            90deg,
            rgba(5, 5, 15, 0.95) 0%,
            rgba(5, 5, 15, 0.6) 50%,
            transparent 90%
          );
        }
        .pf-glow {
          width: 360px;
          height: 240px;
        }
        .pf-btn {
          padding: 12px 22px;
        }
      }
      /* Below 640px the portrait banner from the block's mobile-image field is
         the one that loads (see the <source media> in the renderer), so the
         copy moves off the left column and sits in the empty sky above the
         phone. The two breakpoints must stay in sync. */
      @media (max-width: 640px) {
        #pre-footer-cta.pf-has-mobile {
          /* Portrait banner is 941x1672. Cutting 15% of the empty black band
             off the top leaves 941x1421 — the box reserved for the section. */
          aspect-ratio: 941 / 1421;
        }
        .pf-has-mobile .pf-picture {
          position: absolute;
          inset: 0;
          overflow: hidden;
        }
        .pf-has-mobile .pf-img {
          width: 100%;
          max-width: none;
          height: auto;
          /* Transform percentages resolve against the image's own height, so
             this lifts away exactly the 15% that the section no longer spans. */
          transform: translateY(-15%);
        }
        .pf-has-mobile .pf-overlay {
          background: linear-gradient(
            180deg,
            rgba(5, 5, 15, 0.6) 0%,
            rgba(5, 5, 15, 0.32) 34%,
            transparent 58%
          );
        }
        .pf-has-mobile .pf-glow {
          top: 20%;
          left: 50%;
          width: 300px;
          height: 200px;
          transform: translate(-50%, -50%);
        }
        .pf-has-mobile .pf-inner {
          /* The handset starts ~29% down the cropped frame; anchor the copy to
             the top so it never lands on the screen in the artwork. */
          align-items: flex-start;
          justify-content: center;
          padding: 5% 16px 0;
        }
        .pf-has-mobile .pf-content {
          width: 100%;
          max-width: 320px;
        }
        .pf-has-mobile .pf-title {
          margin-bottom: 12px;
        }
        .pf-has-mobile .pf-sub {
          margin-bottom: 14px;
        }
        .pf-has-mobile .pf-btn {
          padding: 10px 18px;
        }
      }

      /* ─── Footer ─── */
      #site-footer {
        --mx: -999px;
        --my: -999px;
      }
      .footer-mouse-glow {
        pointer-events: none;
        position: absolute;
        inset: 0;
        z-index: 0;
        opacity: 0;
        transition: opacity 0.4s ease;
        background: radial-gradient(
          600px circle at var(--mx) var(--my),
          rgba(108, 64, 153, 0.18) 0%,
          rgba(108, 64, 153, 0.06) 40%,
          transparent 70%
        );
      }
      #site-footer.is-glowing .footer-mouse-glow {
        opacity: 1;
      }

      footer {
        position: relative;
        background: #0d0b12;
        color: rgba(255, 255, 255, 0.55);
        padding: 0 0 0;
        overflow: hidden;
      }
      /* ── decorative top glow bar ── */
      footer::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent 0%,
          var(--primary) 40%,
          var(--light) 60%,
          transparent 100%
        );
      }
      /* ── radial glow behind content ── */
      footer::after {
        content: "";
        position: absolute;
        top: -120px;
        left: 50%;
        transform: translateX(-50%);
        width: 700px;
        height: 420px;
        background: radial-gradient(
          ellipse at center,
          rgba(108, 64, 153, 0.18) 0%,
          transparent 70%
        );
        pointer-events: none;
      }
      /* ── diagonal grid pattern overlay ── */
      .footer-pattern {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(108, 64, 153, 0.06) 1px, transparent 1px),
          linear-gradient(90deg, rgba(108, 64, 153, 0.06) 1px, transparent 1px);
        background-size: 40px 40px;
        pointer-events: none;
      }
      .footer-inner {
        position: relative;
        z-index: 1;
        padding: 64px 24px 0;
      }
      /* ── top CTA strip ── */
      .footer-cta-strip {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 28px 36px;
        border-radius: 14px;
        background: linear-gradient(
          120deg,
          rgba(108, 64, 153, 0.28) 0%,
          rgba(43, 182, 115, 0.1) 100%
        );
        border: 1px solid rgba(108, 64, 153, 0.3);
        margin-bottom: 52px;
        backdrop-filter: blur(8px);
      }
      .footer-cta-strip-text {
      }
      .footer-cta-strip-text strong {
        display: block;
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 4px;
      }
      .footer-cta-strip-text span {
        font-size: 0.82rem;
        color: rgba(255, 255, 255, 0.5);
      }
      .footer-cta-btn {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--primary);
        color: #fff;
        padding: 10px 22px;
        border-radius: 8px;
        font-size: 0.875rem;
        font-weight: 700;
        border: none;
        cursor: pointer;
        white-space: nowrap;
        transition: background var(--transition);
        text-decoration: none;
      }
      .footer-cta-btn:hover {
        background: var(--dark);
      }
      .footer-grid {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
        gap: 48px;
        margin-bottom: 0;
        align-items: start;
      }
      /* 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;
      }
      .footer-logo {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        margin-bottom: 14px;
      }
      .footer-logo-text {
        font-size: 1.125rem;
        font-weight: 800;
        color: #fff;
      }
      .footer-logo-mark {
        filter: brightness(0) invert(1);
      }
      .footer-logo-text-img {
        height: 19px;
        width: auto;
        display: block;
        filter: brightness(0) invert(1);
      }
      .footer-tagline {
        font-size: 0.84rem;
        line-height: 1.8;
        max-width: 240px;
        color: rgba(255, 255, 255, 0.45);
      }
      .footer-social {
        display: flex;
        width: fit-content;
        gap: 10px;
        margin-top: 20px;
      }
      .footer-contact-list + .footer-social {
        margin-top: 34px;
      }
      .footer-social a {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        transition:
          border-color 0.2s,
          color 0.2s,
          background 0.2s;
      }
      .footer-social a:hover {
        border-color: var(--primary);
        color: #fff;
        background: rgba(108, 64, 153, 0.25);
      }
      .footer-social a img {
        width: 16px;
        height: 16px;
        object-fit: contain;
        display: block;
        flex: 0 0 auto;
      }
      .footer-col-title {
        font-size: 0.8rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.35);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-bottom: 18px;
      }
      /* footer accordion (mobile) */
      .footer-acc-title {
        display: none;
      }
      @media (max-width: 768px) {
        .footer-inner {
          padding: 40px 20px 0;
        }
        .footer-cta-strip {
          margin-bottom: 32px;
        }
        .footer-col-title {
          display: none;
        }
        .footer-acc-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          background: none;
          border: none;
          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
          padding: 14px 0;
          cursor: pointer;
          color: rgba(255, 255, 255, 0.55);
          font-size: 0.875rem;
          font-weight: 600;
          font-family: inherit;
          text-align: right;
        }
        .footer-acc-title .acc-chevron {
          transition: transform 0.25s ease;
          flex-shrink: 0;
        }
        .footer-acc-title.open .acc-chevron {
          transform: rotate(180deg);
        }
        .footer-acc-body {
          max-height: 0;
          overflow: hidden;
          transition:
            max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
            padding 0.25s;
          padding-top: 0;
        }
        .footer-acc-body.open {
          max-height: 400px;
          padding-top: 16px;
        }
        .footer-acc-body .footer-links,
        .footer-acc-body .footer-contact-list {
          padding-bottom: 16px;
        }
      }
      .footer-links {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 11px;
      }
      .footer-links li {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .footer-links a {
        font-size: 0.875rem;
        color: rgba(255, 255, 255, 0.55);
        transition: color var(--transition);
        display: flex;
        align-items: center;
        gap: 7px;
      }
      .footer-links a:hover {
        color: #fff;
      }
      .footer-links a::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: rgba(108, 64, 153, 0.6);
        flex-shrink: 0;
        transition: background 0.2s;
      }
      .footer-links a:hover::before {
        background: var(--primary);
      }
      .footer-hiring-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        padding: 2px 7px;
        border-radius: 20px;
        background: rgba(43, 182, 115, 0.15);
        border: 1px solid rgba(43, 182, 115, 0.35);
        color: var(--accent);
        animation: pulse-badge 2.4s ease-in-out infinite;
      }
      .footer-hiring-badge::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--accent);
        animation: blink 1.2s ease-in-out infinite;
      }
      @keyframes blink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.25;
        }
      }
      @keyframes pulse-badge {
        0%,
        100% {
          box-shadow: 0 0 0 0 rgba(43, 182, 115, 0.25);
        }
        50% {
          box-shadow: 0 0 0 4px rgba(43, 182, 115, 0);
        }
      }

      .footer-contact-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      #site-footer address {
        font-style: normal;
      }
      .footer-contact-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
      }
      .footer-contact-icon {
        width: 30px;
        height: 30px;
        border-radius: 7px;
        background: rgba(108, 64, 153, 0.18);
        border: 1px solid rgba(108, 64, 153, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: 1px;
      }
      .footer-contact-text {
        font-size: 0.82rem;
        color: rgba(255, 255, 255, 0.5);
        line-height: 1.7;
      }
      .footer-contact-text a {
        color: rgba(255, 255, 255, 0.5);
        transition: color 0.2s;
      }
      .footer-contact-text a:hover {
        color: #fff;
      }
      /* ── divider ── */
      .footer-divider {
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.08) 30%,
          rgba(255, 255, 255, 0.08) 70%,
          transparent
        );
        margin-top: 48px;
      }
      .footer-bottom {
        padding: 20px 24px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.3);
        position: relative;
        z-index: 1;
      }

      /* ─── Responsive ─── */
      @media (max-width: 1024px) {
        #lines-4 {
          order: -1;
        }
        .features-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .numbers-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .num-number,
        .num-number.sm {
          font-size: 1.75rem;
          letter-spacing: 0.05em;
        }
        .blog-layout {
          grid-template-columns: 1fr;
          gap: 32px;
        }
        .blog-feature-deco {
          font-size: 7rem;
        }
        .benefits-bento {
          grid-template-columns: 1fr 1fr;
          grid-auto-rows: auto;
        }
        .benefit-map {
          grid-column: 1 / -1;
          grid-row: auto;
        }
        .stats-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .stat-item {
          border-left: none;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .stat-item:last-child,
        .stat-item:nth-child(3) {
          border-bottom: none;
        }
        .logos-grid {
          grid-template-columns: repeat(3, 1fr);
        }
        .footer-grid {
          grid-template-columns: 1fr 1fr;
          gap: 28px;
        }
        .footer-cta-strip {
          flex-direction: column;
          align-items: flex-start;
          gap: 16px;
        }
        .nav-links,
        .nav-actions .btn {
          display: none !important;
        }
        .nav-inner {
          display: grid;
          grid-template-columns: auto 1fr auto;
          align-items: center;
          gap: 14px;
        }
        .nav-logo {
          grid-column: 1;
          justify-self: start;
          margin: 0;
        }
        .nav-actions {
          grid-column: 3;
          justify-self: end;
          direction: ltr;
          margin: 0;
          gap: 8px;
        }
        .nav-actions > .language-switcher {
          order: 2;
          display: inline-block !important;
        }
        .nav-toggle {
          display: flex;
          order: 1;
        }
        html[dir="ltr"] .nav-logo {
          grid-column: 1;
          justify-self: start;
        }
        html[dir="ltr"] .nav-actions {
          grid-column: 3;
          justify-self: end;
        }
        html[dir="ltr"] .nav-actions > .language-switcher {
          order: 1;
        }
        html[dir="ltr"] .nav-toggle {
          order: 2;
        }
      }
      @media (max-width: 768px) {
        .section {
          padding: 64px 0;
        }
        .nav-links,
        .nav-actions .btn {
          display: none;
        }
        .nav-inner {
          display: grid;
          grid-template-columns: auto 1fr auto;
          align-items: center;
          gap: 14px;
        }
        .nav-logo {
          grid-column: 1;
          justify-self: start;
          margin: 0;
        }
        .nav-actions {
          grid-column: 3;
          justify-self: end;
          direction: ltr;
          margin: 0;
          gap: 8px;
        }
        .nav-actions > .language-switcher {
          order: 2;
          display: inline-block;
        }
        .nav-toggle {
          display: flex;
          order: 1;
        }
        html[dir="ltr"] .nav-logo {
          grid-column: 1;
          justify-self: start;
        }
        html[dir="ltr"] .nav-actions {
          grid-column: 3;
          justify-self: end;
        }
        html[dir="ltr"] .nav-actions > .language-switcher {
          order: 1;
        }
        html[dir="ltr"] .nav-toggle {
          order: 2;
        }
        .features-grid {
          grid-template-columns: 1fr 1fr;
        }
        .numbers-grid {
          grid-template-columns: 1fr 1fr;
        }

        .benefits-bento {
          grid-template-columns: 1fr;
          grid-auto-rows: auto;
        }
        .benefit-card {
          min-height: 0;
        }
        .steps-container {
          grid-template-columns: 1fr;
          gap: 32px;
        }
        .steps-line {
          display: none;
        }
        .stats-grid {
          grid-template-columns: 1fr 1fr;
        }
        .logos-grid {
          grid-template-columns: repeat(3, 1fr);
        }
        .blog-feature-title {
          font-size: 1.2rem;
        }
        .blog-feature-deco {
          font-size: 6rem;
        }
        .blog-foot {
          flex-direction: column;
          align-items: stretch;
          text-align: center;
        }
        .blog-header-row {
          flex-direction: column;
          align-items: flex-start;
          gap: 12px;
        }
        .footer-grid {
          grid-template-columns: 1fr;
          gap: 32px;
        }
        .footer-bottom {
          flex-direction: column;
          gap: 12px;
          text-align: center;
        }
        .footer-cta-strip {
          padding: 20px;
        }
      }
      @media (max-width: 480px) {
        .hero-ctas {
          flex-direction: column;
        }
        .search-row {
          flex-direction: column;
        }
      .search-btn {
        width: 100%;
      }
      }

      .hsc-btn.is-loading {
        position: relative;
        pointer-events: none;
        opacity: .82;
      }

      .hsc-btn.is-loading svg {
        opacity: 0;
      }

      .hsc-btn.is-loading::after {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        width: 24px;
        height: 24px;
        margin: -12px 0 0 -12px;
        border: 3px solid rgba(255,255,255,.45);
        border-top-color: #fff;
        border-radius: 999px;
        animation: hscSpin .8s linear infinite;
      }

      @keyframes hscSpin {
        to { transform: rotate(360deg); }
      }

      .nexfon-number-modal-open {
        overflow: hidden;
      }

      .nexfon-number-modal {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: grid;
        place-items: center;
        padding: 22px;
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s ease;
      }

      .nexfon-number-modal.is-open {
        opacity: 1;
        pointer-events: auto;
      }

      .nexfon-number-modal__overlay {
        position: absolute;
        inset: 0;
        background:
          radial-gradient(circle at 50% 30%, rgba(151, 83, 236, .28), transparent 32%),
          rgba(11, 6, 20, .62);
        backdrop-filter: blur(7px);
      }

      .nexfon-number-modal__dialog {
        position: relative;
        width: min(100%, 560px);
        max-height: min(88vh, 680px);
        overflow: auto;
        direction: rtl;
        padding: clamp(20px, 3vw, 30px);
        border: 1px solid rgba(153, 102, 220, .28);
        border-radius: 24px;
        background:
          linear-gradient(135deg, rgba(255,255,255,.98), rgba(250,247,255,.96)),
          #fff;
        box-shadow: 0 22px 62px rgba(32, 18, 54, .24);
        transform: translateY(16px) scale(.98);
        transition: transform .22s ease;
      }

      .nexfon-number-modal.is-open .nexfon-number-modal__dialog {
        transform: translateY(0) scale(1);
      }

      .nexfon-number-modal__close {
        position: absolute;
        top: 14px;
        left: 14px;
        width: 34px;
        height: 34px;
        border: 1px solid rgba(113, 62, 166, .18);
        border-radius: 12px;
        background: #fff;
        color: #111827;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        transition: border-color .18s ease, color .18s ease, transform .18s ease, background .18s ease;
      }

      .nexfon-number-modal__close:hover {
        border-color: rgba(113, 62, 166, .34);
        background: rgba(113, 62, 166, .06);
        color: #713ea6;
        transform: translateY(-1px);
      }

      .nexfon-number-modal__badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        padding: 5px 16px;
        border-radius: 999px;
        border: 1px solid rgba(113, 62, 166, .28);
        background: rgba(113, 62, 166, .08);
        color: #713ea6;
        font-weight: 900;
        font-size: .98rem;
        margin-bottom: 12px;
      }

      .nexfon-number-modal__title {
        margin: 0 0 8px;
        color: #111827;
        font-size: clamp(1.32rem, 2.4vw, 1.78rem);
        line-height: 1.4;
        font-weight: 900;
      }

      .nexfon-number-modal__body {
        margin: 0 0 18px;
        color: #667085;
        font-size: .9rem;
        line-height: 1.9;
        font-weight: 650;
      }

      .nexfon-number-modal.is-available .nexfon-number-modal__badge {
        border-color: rgba(35, 185, 120, .28);
        background: rgba(35, 185, 120, .09);
        color: #169b67;
      }

      .nexfon-number-modal__form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 14px;
      }

      .nexfon-number-modal__form label {
        display: grid;
        gap: 6px;
        color: #111827;
        font-size: .82rem;
        font-weight: 850;
      }

      .nexfon-number-modal__full {
        grid-column: 1 / -1;
      }

      .nexfon-number-modal__form input {
        width: 100%;
        min-height: 50px;
        border: 2px solid #e2e6ee;
        border-radius: 15px;
        background: #f8fafc;
        color: #111827;
        padding: 0 15px;
        font: inherit;
        font-size: .92rem;
        font-weight: 750;
        outline: none;
        transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
      }

      .nexfon-number-modal__form input:focus {
        border-color: #7b45b4;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(123, 69, 180, .11);
      }

      .nexfon-number-modal__form button[type="submit"] {
        grid-column: 1 / -1;
        min-height: 52px;
        border: 0;
        border-radius: 15px;
        background: linear-gradient(135deg, #713ea6, #8b55ee);
        color: #fff;
        font: inherit;
        font-weight: 900;
        font-size: .98rem;
        cursor: pointer;
        box-shadow: 0 14px 30px rgba(113, 62, 166, .24);
        transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
      }

      .nexfon-number-modal__form button[type="submit"]:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 34px rgba(113, 62, 166, .32);
        filter: saturate(1.08) brightness(1.02);
      }

      .nexfon-number-modal__form button[type="submit"]:disabled {
        cursor: wait;
        opacity: .74;
        transform: none;
        filter: none;
      }

      .nexfon-number-modal__feedback {
        grid-column: 1 / -1;
        min-height: 28px;
        margin: 0;
        color: #667085;
        font-size: .92rem;
        font-weight: 750;
        line-height: 1.8;
      }

      .nexfon-number-modal__feedback.error {
        color: #dc2626;
      }

      .nexfon-number-modal__feedback.success {
        color: #169b67;
      }

      html[dir="ltr"] .nexfon-number-modal__dialog {
        direction: ltr;
        text-align: left;
      }

      html[dir="ltr"] .nexfon-number-modal__close {
        left: auto;
        right: 16px;
      }

      @media (max-width: 640px) {
        /* Justified body copy on phones; centred section intros keep their alignment. */
        .section-header:not(.centered) .section-sub,
        .info-intro-body,
        .story-text p,
        .close-copy p,
        .history-readout p {
          text-align: justify;
          text-justify: inter-word;
        }

        .nexfon-number-modal {
          padding: 14px;
        }

        .nexfon-number-modal__dialog {
          border-radius: 24px;
          padding: 26px 18px 22px;
        }

        .nexfon-number-modal__form {
          grid-template-columns: 1fr;
        }
      }
      @media (max-width: 480px) {
        .features-grid {
          grid-template-columns: 1fr;
        }
        .num-all-btn-desktop {
          display: none;
        }
        .num-all-btn-mobile {
          display: flex;
          justify-content: center;
          margin-top: 20px;
        }
        .num-carousel-dots {
          display: flex;
          justify-content: center;
          gap: 6px;
          margin-top: 16px;
          padding-bottom: 4px;
        }
        .num-carousel-dots .dot {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #d0d5dd;
          transition:
            background 0.2s,
            width 0.2s;
          flex-shrink: 0;
        }
        .num-carousel-dots .dot.active {
          width: 20px;
          border-radius: 4px;
          background: var(--primary);
        }
        /* carousel */
        .numbers-grid {
          display: flex;
          flex-direction: row;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          -webkit-overflow-scrolling: touch;
          gap: 12px;
          padding-bottom: 12px;
          /* hide scrollbar */
          scrollbar-width: none;
        }
        .numbers-grid::-webkit-scrollbar {
          display: none;
        }
        .numbers-grid .num-card {
          flex: 0 0 80vw;
          max-width: 320px;
          scroll-snap-align: center;
        }
        .stats-grid {
          grid-template-columns: 1fr 1fr;
          gap: 10px;
        }
        .stat-card {
          padding: 24px 16px;
        }
        .logos-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      /* ─── Mobile Menu ─── */
      #mobile-menu {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(16, 24, 40, 0);
        z-index: 60;
        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%;
        background: #fff;
        padding: 24px;
        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);
      }
      #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 {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 24px;
      }
      .mobile-nav-links a {
        display: block;
        padding: 12px 16px;
        border-radius: var(--radius-sm);
        font-weight: 600;
        color: var(--text);
        transition: background var(--transition);
      }
      .mobile-nav-links a:hover {
        background: var(--card-bg);
      }

      /* ─── Utility ─── */
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          transition-duration: 0.01ms !important;
        }
      }

      /* Scroll reveal */
      .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition:
          opacity 0.55s ease,
          transform 0.55s ease;
      }
      .reveal.visible {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-delay-1 {
        transition-delay: 0.1s;
      }
      .reveal-delay-2 {
        transition-delay: 0.2s;
      }
      .reveal-delay-3 {
        transition-delay: 0.3s;
      }

      #blog-title {
        margin-bottom: 0;
      }

      /* ── Hero live beam-grid background ── */