/* ════════════════════════════════════════════════════════
       VisitFlow — Luxury Premium Theme
       ════════════════════════════════════════════════════════ */
    :root {
      --navy:         #081424;
      --navy-2:       #0d1e38;
      --navy-3:       #12254a;
      --gold:         #dfa23a;
      --gold-2:       #c48a28;
      --gold-light:   #fef8eb;
      --gold-glow:    rgba(223,162,58,.28);
      --blue:         #3b7ef8;
      --blue-2:       #2563eb;
      --blue-light:   #eff4ff;
      --blue-glow:    rgba(59,126,248,.22);
      --accent:       #7c3aed;
      --bg:           #fafaf8;
      --bg2:          #f3ede4;
      --bg-alt:       #f7f3ee;
      --white:        #ffffff;
      --border:       #e6ddd2;
      --text:         #0c1d34;
      --text2:        #3e5474;
      --muted:        #8a9ab6;
      --text-dark:    #dce8fc;
      --muted-dark:   #7a94be;
      --primary:      #3b7ef8;
      --primary-h:    #2563eb;
      --primary-light:#eff4ff;
      --success:      #059669;
      --success-light:#ecfdf5;
      --warning:      #d97706;
      --warning-light:#fffbeb;
      --danger:       #dc2626;
      --danger-light: #fef2f2;
      --radius:       16px;
      --radius-lg:    26px;
      --radius-xl:    40px;
      --shadow-sm:    0 1px 4px rgba(8,20,36,.06);
      --shadow:       0 6px 32px rgba(8,20,36,.09);
      --shadow-md:    0 12px 48px rgba(8,20,36,.13);
      --shadow-lg:    0 24px 72px rgba(8,20,36,.18);
      --shadow-gold:  0 8px 36px rgba(223,162,58,.28);
      --shadow-blue:  0 8px 36px rgba(59,126,248,.22);
      --transition:   .3s cubic-bezier(.4,0,.2,1);
      --header-h:     88px;
    }

    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 90px; }
    body {
      font-family: 'Tajawal', sans-serif;
      background: var(--bg); color: var(--text);
      line-height: 1.75; -webkit-font-smoothing: antialiased; overflow-x: hidden;
    }
    body.ltr { font-family: 'Inter', sans-serif; }
    /* Mobile sticky CTA bottom padding so content isn't hidden */
    @media (max-width: 768px) {
      body { padding-bottom: 80px; }
    }
    img { max-width:100%; display:block; }
    a { color: inherit; text-decoration: none; }
    ul { list-style: none; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; }

    /* ── Typography ── */
    h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
    h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; }
    h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: -.01em; }
    h3 { font-size: 1.3rem; font-weight: 700; }
    h4 { font-size: 1.05rem; font-weight: 600; }
    p  { color: var(--text2); line-height: 1.75; }

    .section { padding: 96px 0; }
    .container { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

    /* Consistent vertical rhythm on mobile/tablet */
    @media (max-width: 768px) {
      .section { padding: 56px 0; }
      .container { padding: 0 20px; }
      .section-header { margin-bottom: 40px; }
    }

    /* ── Utilities ── */
    .text-center { text-align: center; }
    .text-success { color: var(--success); }
    .text-danger  { color: var(--danger); }
    .text-warning { color: var(--warning); }

    .section-header { text-align: center; margin-bottom: 64px; }
    .section-header .badge { margin-bottom: 16px; display: inline-flex; }
    .section-header h2 { margin-bottom: 14px; }
    .section-header p { max-width: 580px; margin: 0 auto; font-size: 1.05rem; }

    .badge {
      display: inline-flex; align-items: center; gap: 7px;
      background: var(--blue-light); color: var(--blue-2);
      font-size: .84rem; font-weight: 700; padding: 6px 16px;
      border-radius: 99px; border: 1px solid rgba(59,126,248,.2);
      letter-spacing: .01em;
    }
    .badge-gold { background: var(--gold-light); color: var(--gold-2); border-color: rgba(223,162,58,.25); }
    .badge-dark { background: rgba(255,255,255,.08); color: var(--gold); border-color: rgba(223,162,58,.25); }

    /* ── Buttons ── */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 9px;
      padding: 13px 30px; border-radius: var(--radius); font-size: 1rem;
      font-family: inherit; font-weight: 700; transition: var(--transition);
      white-space: nowrap; cursor: pointer; letter-spacing: .01em;
    }
    .btn-primary {
      background: linear-gradient(135deg, var(--gold), var(--gold-2));
      color: #0c1d34; box-shadow: var(--shadow-gold);
    }
    .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 14px 44px rgba(223,162,58,.42); }
    .btn-blue {
      background: linear-gradient(135deg, var(--blue), var(--blue-2));
      color: #fff; box-shadow: var(--shadow-blue);
    }
    .btn-blue:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(59,126,248,.4); }
    .btn-outline {
      background: transparent; color: var(--blue-2);
      border: 2px solid var(--blue-2);
    }
    .btn-outline:hover { background: var(--blue-light); }
    .btn-ghost {
      background: transparent; color: var(--text2);
      border: 2px solid var(--border);
    }
    .btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
    /* ghost on dark (hero) */
    #home .btn-ghost {
      color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.25);
      background: rgba(255,255,255,.05);
    }
    #home .btn-ghost:hover { border-color: var(--gold); color: var(--gold); background: rgba(223,162,58,.08); }
    .btn-outline-light {
      background: rgba(255,255,255,.06); color: rgba(255,255,255,.9);
      border: 1.5px solid rgba(255,255,255,.2); backdrop-filter: blur(10px);
    }
    .btn-outline-light:hover { border-color: var(--gold); color: var(--gold); background: rgba(223,162,58,.08); }
    /* outline on dark navy (custom pkg card) */
    .custom-pkg .btn { color: var(--gold); border-color: rgba(223,162,58,.5); background: rgba(223,162,58,.07); }
    .custom-pkg .btn:hover { background: rgba(223,162,58,.15); border-color: var(--gold); }
    .btn-lg  { padding: 16px 38px; font-size: 1.1rem; min-height: 52px; }
    .btn-sm  { padding: 8px 18px; font-size: .88rem; }
    .btn-group { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
    @media (max-width: 768px) {
      .btn { padding: 13px 24px; min-height: 48px; }
      .btn-lg { padding: 16px 28px; font-size: 1.02rem; min-height: 52px; }
    }

    /* ── Cards ── */
    .card {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--radius-lg); padding: 32px;
      box-shadow: var(--shadow); transition: var(--transition);
    }
    .card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: rgba(59,126,248,.15); }

    /* ── Grid ── */
    .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
    @media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 580px) { .grid-3 { grid-template-columns: 1fr; } }
    .grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }

    /* ── Animate on scroll ── */
    .animate-on-scroll { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
    .animate-on-scroll.visible { opacity: 1; transform: none; }
    /* Reduced-motion support — accessibility */
    @media (prefers-reduced-motion: reduce) {
      .animate-on-scroll { opacity: 1; transform: none; transition: none; }
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* ── Toast ── */
    #toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
    [dir="ltr"] #toast-container { right: auto; left: 24px; }
    .toast {
      background: var(--navy); color: #fff; padding: 12px 20px;
      border-radius: var(--radius); font-size: .9rem; font-weight: 500;
      opacity: 0; transform: translateY(10px); transition: .3s; max-width: 300px;
      border-inline-start: 3px solid var(--gold);
    }
    .toast.toast-show { opacity: 1; transform: none; }
    .toast.toast-error { background: var(--danger); border-inline-start-color: #fca5a5; }

    /* ── Mobile Sticky CTA (bottom bar) ── */
    .mobile-sticky-cta {
      display: none;
      position: fixed; left: 0; right: 0; bottom: 0;
      z-index: 950;
      background: linear-gradient(180deg, rgba(8,20,36,.92), rgba(8,20,36,.98));
      backdrop-filter: blur(20px);
      border-top: 1px solid rgba(223,162,58,.28);
      padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
      box-shadow: 0 -8px 32px rgba(0,0,0,.3);
    }
    .mobile-sticky-cta .btn {
      width: 100%;
      padding: 14px 22px;
      font-size: 1rem;
      letter-spacing: .01em;
    }
    .mobile-sticky-cta .msc-label {
      display: block;
      font-size: .68rem;
      color: rgba(255,255,255,.55);
      text-align: center;
      margin-bottom: 6px;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-weight: 700;
    }
    @media (max-width: 768px) {
      .mobile-sticky-cta { display: block; }
    }
    /* Hide sticky CTA when keyboard is open / focused on form input */
    .mobile-sticky-cta.hidden-cta { display: none !important; }

    /* ── Restore Banner ── */
    #restore-banner {
      display: none; position: fixed; bottom: 0; left: 0; right: 0;
      background: var(--navy-2); border-top: 1px solid var(--gold);
      padding: 16px 28px; z-index: 999;
      align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 12px;
    }
    @media (max-width: 768px) {
      #restore-banner { bottom: 76px; padding: 12px 16px; }
    }
    #restore-banner .restore-text h4 { font-size: .95rem; margin-bottom: 3px; color: var(--gold); }
    #restore-banner .restore-text p  { font-size: .82rem; margin: 0; color: var(--muted-dark); }
    #restore-banner .restore-btns    { display: flex; gap: 10px; flex-wrap: wrap; }

    /* ── Header ── */
    .header {
      position: fixed; top: 0; left: 0; right: 0; z-index: 900;
      height: var(--header-h);
      background: rgba(8,20,36,.85);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255,255,255,.07);
      transition: var(--transition);
    }
    .header.scrolled { background: rgba(8,20,36,.97); box-shadow: 0 4px 32px rgba(0,0,0,.3); border-bottom-color: rgba(223,162,58,.2); }
    .header-inner {
      max-width: 1180px; margin: 0 auto; padding: 0 28px;
      height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
    }
    .logo {
      font-size: 1.35rem; font-weight: 800; color: var(--white);
      display: flex; align-items: center; gap: 10px; letter-spacing: -.02em;
    }
    .logo i { color: var(--gold); font-size: 1.1rem; }
    .logo-img { width: 80px; height: 80px; object-fit: contain; display: block; }

    .nav { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
    .nav a {
      padding: 7px 10px; border-radius: 10px; font-size: .83rem;
      font-weight: 600; color: rgba(255,255,255,.75); transition: var(--transition); white-space: nowrap;
    }
    .nav a:hover { color: var(--gold); background: rgba(223,162,58,.08); }

    .header-actions { display: flex; align-items: center; gap: 12px; }
    @media (max-width: 1100px) {
      /* Hide language button from header — it lives inside the mobile menu */
      .header-actions .lang-btn { display: none; }
    }

    .lang-btn {
      padding: 7px 14px; border-radius: 99px; font-size: .82rem; font-weight: 700;
      color: rgba(255,255,255,.8); border: 1.5px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.05); cursor: pointer; transition: var(--transition); font-family: inherit;
    }
    .lang-btn:hover { border-color: var(--primary); color: var(--primary); }

    /* Hamburger */
    .lang-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(223,162,58,.08); }
    .hamburger {
      display: none; flex-direction: column; gap: 5px;
      padding: 8px; cursor: pointer; background: none; border: none;
    }
    .hamburger span { display: block; width: 22px; height: 2px; background: rgba(255,255,255,.8); border-radius: 2px; transition: var(--transition); }

    /* Mobile menu */
    .mobile-menu {
      display: none; position: fixed;
      top: var(--header-h); left: 0; right: 0; bottom: 0;
      background: rgba(8,20,36,.98); z-index: 800;
      flex-direction: column; padding: 24px; overflow-y: auto;
      backdrop-filter: blur(20px);
    }
    .mobile-menu.open { display: flex; }
    .mobile-menu a {
      padding: 14px 16px; font-size: 1rem; font-weight: 600;
      color: rgba(255,255,255,.8); border-radius: 10px;
      border-bottom: 1px solid rgba(255,255,255,.07);
      display: flex; align-items: center; gap: 12px;
    }
    .mobile-menu a i { width: 20px; color: var(--muted-dark); }
    .mobile-menu a:hover { background: rgba(223,162,58,.08); color: var(--gold); }
    .mobile-lang { margin-top: 20px; }

    /* ── Hero — Dark Premium ── */
    #home {
      background: linear-gradient(145deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy-3) 100%);
      padding: 126px 0 96px; position: relative; overflow: hidden;
      border-bottom: 1px solid rgba(223,162,58,.12);
    }
    @media (max-width: 768px) {
      #home { padding: 104px 0 64px; }
    }
    #home::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background-image:
        radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.5) 0%, transparent 100%),
        radial-gradient(1px   1px   at 83% 14%, rgba(255,255,255,.4) 0%, transparent 100%),
        radial-gradient(2px   2px   at 68% 62%, rgba(255,255,255,.3) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 35% 78%, rgba(255,255,255,.4) 0%, transparent 100%),
        radial-gradient(2px   2px   at 44%  8%, rgba(223,162,58,.5)  0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 90% 72%, rgba(223,162,58,.35) 0%, transparent 100%);
    }
    #home::after {
      content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold) 40%, rgba(223,162,58,.4) 70%, transparent);
    }
    .hero-inner {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 64px; align-items: center; position: relative; z-index: 1;
    }
    .hero-badge { margin-bottom: 22px; }
    .hero-title { color: var(--white); margin-bottom: 20px; }
    .hero-title .highlight { color: var(--gold); }
    .hero-desc { font-size: 1.1rem; margin-bottom: 36px; max-width: 520px; color: var(--muted-dark) !important; line-height: 1.8; }
    .hero-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; }
    .hero-features { display: flex; flex-wrap: wrap; gap: 22px; }
    .hero-feature { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; color: var(--text-dark); }
    .hero-feature i { color: var(--gold); font-size: .85rem; }

    /* Hero trust micro-bar (above-the-fold credibility) */
    .hero-trust-mini {
      display: inline-flex; align-items: center; gap: 10px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(223,162,58,.18);
      border-radius: 99px;
      padding: 7px 16px;
      margin-bottom: 18px;
      font-size: .82rem; font-weight: 600;
      color: rgba(255,255,255,.78);
      backdrop-filter: blur(10px);
    }
    .hero-trust-mini .htm-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 8px rgba(16,185,129,.6);
      animation: np-pulse-dot 1.8s ease-out infinite;
    }
    .hero-trust-mini strong {
      color: var(--gold); font-weight: 800;
    }

    @media (max-width: 768px) {
      .hero-badge { margin-bottom: 16px; }
      .hero-title { margin-bottom: 14px; }
      .hero-desc { font-size: 1rem; margin-bottom: 24px; line-height: 1.7; }
      .hero-btns { gap: 10px; margin-bottom: 24px; }
      .hero-features { gap: 14px; }
      .hero-feature { font-size: .85rem; }
      .hero-trust-mini { font-size: .78rem; padding: 6px 14px; }
    }

    /* ── Hero Visualization (SVG traffic flow) ── */
    .hero-visual { display: flex; flex-direction: column; gap: 18px; align-items: center; }
    .traffic-viz { position: relative; width: 100%; max-width: 430px; }
    .viz-svg { width: 100%; height: auto; overflow: visible; }

    @keyframes pulse-ring {
      0%   { opacity: .5; transform: scale(.85); }
      100% { opacity: 0;  transform: scale(1.55); }
    }
    .pulse-r1 { animation: pulse-ring 3.2s ease-out infinite; transform-origin: 200px 195px; }
    .pulse-r2 { animation: pulse-ring 3.2s ease-out infinite .9s; transform-origin: 200px 195px; }

    @keyframes globe-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

    /* Viz overlay icons */
    .viz-overlay { position: absolute; inset: 0; pointer-events: none; }
    .viz-node { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 5px; }
    .viz-center-node {
      top: 50%; left: 50%; transform: translate(-50%, -52%);
      z-index: 2;
    }
    .viz-center-node i { font-size: 1.6rem; color: rgba(255,255,255,.9); animation: globe-rotate 14s linear infinite; }
    .viz-center-node span { font-size: .7rem; font-weight: 800; color: rgba(255,255,255,.6); letter-spacing: .06em; text-transform: uppercase; }
    .viz-src { pointer-events: none; }
    .viz-src-icon {
      width: 42px; height: 42px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem; box-shadow: 0 4px 16px rgba(0,0,0,.3);
    }
    .viz-src > span { font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.55); white-space: nowrap; }
    .icon-google  { background: rgba(59,126,248,.25); color: #93c5fd; border: 1px solid rgba(59,126,248,.4); }
    .icon-social  { background: rgba(168,85,247,.22); color: #c4b5fd; border: 1px solid rgba(168,85,247,.35); }
    .icon-ai      { background: rgba(16,185,129,.2);  color: #6ee7b7; border: 1px solid rgba(16,185,129,.35); }
    .icon-direct  { background: rgba(223,162,58,.22); color: #fcd34d; border: 1px solid rgba(223,162,58,.35); }
    .icon-search  { background: rgba(239,68,68,.18);  color: #fca5a5; border: 1px solid rgba(239,68,68,.3); }

    /* Hero stat card — luxury */
    .hero-stat-card {
      background: rgba(8,20,36,.7); border: 1px solid rgba(223,162,58,.22);
      border-radius: var(--radius-lg); padding: 20px 28px;
      backdrop-filter: blur(18px); display: flex; align-items: center; gap: 0;
      width: 100%; max-width: 430px;
      box-shadow: 0 8px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
    }
    @media (max-width: 768px) {
      .hero-stat-card { padding: 16px 14px; max-width: 100%; }
      .stat-item strong { font-size: 1.4rem; }
      .stat-item span { font-size: .65rem; }
    }
    .stat-item { text-align: center; flex: 1; padding: 4px 12px; }
    .stat-item strong {
      display: block; font-size: 1.85rem; font-weight: 900; line-height: 1;
      margin-bottom: 5px; letter-spacing: -.03em;
      background: linear-gradient(135deg, var(--gold) 30%, #fff5cc 80%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 0 8px rgba(223,162,58,.4));
    }
    .stat-item span { font-size: .72rem; color: rgba(255,255,255,.5); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    .stat-sep { width: 1px; height: 40px; background: linear-gradient(to bottom, transparent, rgba(223,162,58,.3), transparent); flex-shrink: 0; }
    @keyframes count-pulse { 0%,100% { filter: drop-shadow(0 0 8px rgba(223,162,58,.4)); } 50% { filter: drop-shadow(0 0 16px rgba(223,162,58,.7)); } }
    .stat-item strong { animation: count-pulse 3s ease-in-out infinite; }

    /* ── Platform Stats (under hero) ── */
    #platform-stats {
      background: var(--white); padding: 48px 0; border-bottom: 1px solid var(--border);
    }
    .pstats-grid {
      display: flex; flex-wrap: wrap; justify-content: center; gap: 0;
      border: 1.5px solid var(--border); border-radius: var(--radius-lg);
      overflow: hidden; box-shadow: var(--shadow);
    }
    .pstat-item {
      flex: 1; min-width: 160px; padding: 32px 24px; text-align: center;
      border-inline-end: 1.5px solid var(--border); position: relative;
      background: var(--white); transition: var(--transition);
    }
    .pstat-item:last-child { border-inline-end: none; }
    .pstat-item:hover { background: var(--bg); }
    .pstat-item::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--gold-2), var(--gold));
      transform: scaleX(0); transition: transform .4s ease;
    }
    .pstat-item:hover::before { transform: scaleX(1); }
    .pstat-num {
      font-size: clamp(1.3rem, 2vw, 1.9rem); font-weight: 900; letter-spacing: -.04em;
      background: linear-gradient(135deg, var(--blue-2), var(--blue));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      line-height: 1; margin-bottom: 8px; display: block;
    }
    .pstat-item:nth-child(odd) .pstat-num {
      background: linear-gradient(135deg, var(--gold-2), #f59e0b);
      -webkit-background-clip: text; background-clip: text;
    }
    .pstat-label { font-size: .82rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
    .pstat-icon { font-size: 1.4rem; margin-bottom: 10px; }
    .pstat-item:nth-child(1) .pstat-icon { color: var(--gold); }
    .pstat-item:nth-child(2) .pstat-icon { color: var(--blue-2); }
    .pstat-item:nth-child(3) .pstat-icon { color: #059669; }
    .pstat-item:nth-child(4) .pstat-icon { color: var(--accent); }
    .pstat-item:nth-child(5) .pstat-icon { color: #ea580c; }
    @media (max-width: 640px) {
      .pstat-item { border-inline-end: none; border-bottom: 1.5px solid var(--border); min-width: 45%; }
      .pstat-item:last-child { border-bottom: none; }
    }

    /* ══════════════════════════════════════════
       NETWORK PULSE SECTION
    ══════════════════════════════════════════ */
    .network-pulse-section {
      background: linear-gradient(160deg, #020b18 0%, #060f22 40%, #030d1c 100%);
      overflow: hidden;
      position: relative;
    }
    .network-pulse-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 40% at 20% 50%, rgba(45,125,224,.09) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at 80% 30%, rgba(16,185,129,.06) 0%, transparent 70%);
      pointer-events: none;
    }
    /* Live dot in badge */
    .np-live-dot {
      display: inline-block;
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 0 0 rgba(16,185,129,.6);
      animation: np-pulse-dot 1.8s ease-out infinite;
      margin-inline-start: 6px;
    }
    @keyframes np-pulse-dot {
      0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.7); }
      70%  { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
      100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
    }
    /* Big counter */
    .np-counter-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 40px;
      margin: 52px 0 44px;
    }
    @media (max-width: 768px) {
      .np-counter-wrap { gap: 28px; margin: 32px 0 28px; }
      .np-sub-counters { gap: 10px; }
      .np-sub-item { padding: 14px 16px; min-width: calc(50% - 5px); }
      .np-sub-num { font-size: 1.3rem; }
    }
    .np-main-counter {
      text-align: center;
      position: relative;
    }
    .np-counter-num {
      font-size: clamp(3rem, 8vw, 5.5rem);
      font-weight: 900;
      font-feature-settings: 'tnum';
      background: linear-gradient(135deg, #fff 30%, #60a5fa 70%, #34d399 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
      letter-spacing: -2px;
    }
    .np-counter-label {
      font-size: 1.05rem;
      color: rgba(148,163,184,.8);
      margin-top: 10px;
      letter-spacing: .04em;
    }
    .np-sub-counters {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .np-sub-item {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 16px;
      padding: 20px 28px;
      text-align: center;
      min-width: 140px;
      backdrop-filter: blur(8px);
      transition: border-color .3s;
    }
    .np-sub-item:hover { border-color: rgba(96,165,250,.3); }
    .np-sub-icon {
      font-size: 1.1rem;
      color: #60a5fa;
      margin-bottom: 8px;
    }
    .np-sub-num {
      font-size: 1.55rem;
      font-weight: 800;
      color: #e2e8f0;
      font-feature-settings: 'tnum';
    }
    .np-sub-label {
      font-size: .75rem;
      color: #64748b;
      margin-top: 4px;
    }
    /* Utilization bar */
    .np-utilization {
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 16px;
      padding: 24px 28px;
      margin-bottom: 40px;
    }
    .np-util-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: .9rem;
      color: #94a3b8;
      margin-bottom: 14px;
    }
    .np-util-pct {
      font-size: 1rem;
      font-weight: 700;
      color: #f59e0b;
    }
    .np-util-bar-wrap {
      height: 10px;
      background: rgba(255,255,255,.06);
      border-radius: 99px;
      overflow: hidden;
      margin-bottom: 12px;
    }
    .np-util-bar {
      height: 100%;
      border-radius: 99px;
      background: linear-gradient(90deg, #3b82f6, #f59e0b);
      transition: width 1.2s cubic-bezier(.4,0,.2,1);
    }
    .np-util-note {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: .78rem;
      color: #475569;
      flex-wrap: wrap;
    }
    .np-util-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      display: inline-block;
    }
    .np-util-dot.occupied  { background: #f59e0b; }
    .np-util-dot.available { background: #10b981; }
    /* Country grid */
    .np-countries { margin-bottom: 40px; }
    .np-countries-title {
      font-size: .82rem;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: .12em;
      margin-bottom: 16px;
    }
    .np-country-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: 10px;
    }
    .np-country-card {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.06);
      border-radius: 10px;
      padding: 10px 14px;
      transition: border-color .25s;
    }
    .np-country-card:hover { border-color: rgba(96,165,250,.25); }
    .np-country-flag { font-size: 1.3rem; line-height: 1; }
    .np-country-info { flex: 1; min-width: 0; }
    .np-country-name {
      font-size: .8rem;
      color: #cbd5e1;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .np-country-users {
      font-size: .72rem;
      color: #475569;
      font-feature-settings: 'tnum';
    }
    .np-country-live {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 4px #10b981;
      flex-shrink: 0;
    }
    .np-country-skeleton {
      height: 50px;
      border-radius: 10px;
      background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.03) 75%);
      background-size: 200% 100%;
      animation: np-shimmer 1.6s infinite;
    }
    @keyframes np-shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    /* Platform tags */
    .np-platforms-row { margin-bottom: 44px; }
    .np-platforms-title {
      font-size: .82rem;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: .12em;
      margin-bottom: 14px;
    }
    .np-platform-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .np-ptag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 99px;
      padding: 6px 14px;
      font-size: .8rem;
      color: #94a3b8;
      transition: all .2s;
      cursor: default;
    }
    .np-ptag:hover { border-color: rgba(96,165,250,.3); color: #60a5fa; }
    .np-ptag-more { color: #475569; font-style: italic; }
    /* CTA */
    .np-cta { text-align: center; }
    .np-cta-note {
      font-size: .85rem;
      color: #94a3b8;
      margin-bottom: 18px;
    }
    .np-cta-note::before { content: '⚠ '; }

    /* ── Dark-section text overrides (network-pulse has dark bg) ── */
    .network-pulse-section .section-header h2 { color: #e2e8f0; }
    .network-pulse-section .section-header p  { color: rgba(148,163,184,.9); }
    .np-countries-title   { color: #94a3b8 !important; }
    .np-platforms-title   { color: #94a3b8 !important; }
    .np-sub-label         { color: #94a3b8 !important; }
    .np-country-users     { color: #94a3b8 !important; }
    .np-util-note         { color: #94a3b8 !important; }
    .np-util-header       { color: #94a3b8 !important; }
    .np-ptag              { color: #94a3b8 !important; }
    .np-ptag-more         { color: #64748b !important; }

    /* ── Features (Why Us) ── */
    #features { background: var(--white); }
    .feature-card { text-align: center; position: relative; overflow: hidden; }
    .feature-card::after {
      content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg);
      background: linear-gradient(135deg, transparent 60%, rgba(59,126,248,.04));
      opacity: 0; transition: var(--transition);
    }
    .feature-card:hover::after { opacity: 1; }
    .feature-icon-wrap {
      width: 84px; height: 84px; border-radius: 24px; margin: 0 auto 24px;
      display: flex; align-items: center; justify-content: center; font-size: 1.9rem;
      transition: var(--transition);
    }
    .feature-card:hover .feature-icon-wrap { transform: scale(1.1) rotate(-4deg); }
    .fi-blue   { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: var(--blue-2); }
    .fi-green  { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #059669; }
    .fi-purple { background: linear-gradient(135deg, #ede9fe, #ddd6fe); color: var(--accent); }
    .fi-orange { background: linear-gradient(135deg, #ffedd5, #fed7aa); color: #ea580c; }
    .fi-teal   { background: linear-gradient(135deg, #ccfbf1, #99f6e4); color: #0d9488; }
    .fi-gold   { background: linear-gradient(135deg, var(--gold-light), #fde68a); color: var(--gold-2); }
    .feature-card h3 { margin-bottom: 10px; transition: var(--transition); }
    .feature-card:hover h3 { color: var(--blue-2); }
    .feature-card p  { font-size: .93rem; }

    /* ── Sources & Reach (new section) ── */
    #sources-reach {
      background: linear-gradient(160deg, var(--navy-2) 0%, var(--navy-3) 100%);
      padding: 96px 0; border-top: 1px solid rgba(223,162,58,.08); border-bottom: 1px solid rgba(223,162,58,.08);
    }
    #sources-reach::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 600px 300px at 80% 50%, rgba(59,126,248,.05), transparent);
    }
    #sources-reach { position: relative; }
    #sources-reach .section-header h2 { color: var(--white); }
    #sources-reach .section-header p  { color: var(--muted-dark); }
    .reach-rows { display: flex; flex-direction: column; gap: 48px; }
    .reach-row-title {
      font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
      color: var(--muted-dark); margin-bottom: 16px;
      display: flex; align-items: center; gap: 12px;
    }
    .reach-row-title::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.07); }
    .platform-scroll { display: flex; flex-wrap: wrap; gap: 10px; }
    .platform-pill {
      display: flex; align-items: center; gap: 9px;
      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
      border-radius: 99px; padding: 9px 18px;
      font-size: .87rem; font-weight: 600; color: rgba(255,255,255,.8);
      transition: var(--transition);
    }
    .platform-pill:hover { background: rgba(255,255,255,.1); border-color: rgba(223,162,58,.3); color: var(--gold); }
    .platform-pill i { font-size: 1rem; }
    .pp-google  { color: #60a5fa; } .pp-bing { color: #93c5fd; }
    .pp-fb      { color: #818cf8; } .pp-insta { color: #f472b6; }
    .pp-x       { color: rgba(255,255,255,.85); } .pp-tiktok { color: #34d399; }
    .pp-linkedin { color: #60a5fa; } .pp-chat { color: #34d399; }
    .pp-gemini  { color: #a78bfa; } .pp-claude { color: #fbbf24; }
    .pp-ppx     { color: #f87171; } .pp-direct { color: var(--gold); }
    .countries-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
    .country-pill {
      display: flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--radius); padding: 8px 16px;
      font-size: .86rem; font-weight: 600; color: rgba(255,255,255,.75);
      transition: var(--transition);
    }
    .country-pill:hover { background: rgba(255,255,255,.09); border-color: rgba(223,162,58,.25); color: var(--white); }
    .country-flag { font-size: 1.2rem; }
    .devices-wrap { display: flex; flex-wrap: wrap; gap: 16px; }
    .device-card {
      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
      border-radius: var(--radius); padding: 20px 28px;
      display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 130px;
      transition: var(--transition);
    }
    .device-card:hover { background: rgba(255,255,255,.09); border-color: rgba(223,162,58,.3); transform: translateY(-3px); }
    .device-card i     { font-size: 2rem; color: var(--gold); }
    .device-card span  { font-size: .88rem; font-weight: 700; color: rgba(255,255,255,.85); }
    .device-card small { font-size: .75rem; color: var(--muted-dark); }

    /* ── How It Works — Interactive ── */
    #how { background: var(--bg-alt); }
    .steps { display: flex; flex-direction: column; gap: 0; position: relative; }
    .steps::before {
      content: ''; position: absolute; inset-inline-start: 38px; top: 0; bottom: 0;
      width: 2px; background: linear-gradient(to bottom, var(--blue), rgba(59,126,248,.05));
    }
    .step {
      display: flex; gap: 28px; align-items: flex-start; padding: 20px 0;
      position: relative; cursor: pointer;
    }
    .step-icon-wrap {
      width: 76px; height: 76px; border-radius: 20px; flex-shrink: 0; z-index: 1;
      display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
      box-shadow: var(--shadow); background: var(--white); border: 2px solid var(--border);
      transition: var(--transition); position: relative;
    }
    .step-num-badge {
      position: absolute; top: -8px; right: -8px; width: 22px; height: 22px;
      border-radius: 99px; background: var(--blue-2); color: #fff;
      font-size: .68rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
      transition: var(--transition);
    }
    [dir="ltr"] .step-num-badge { right: auto; left: -8px; }
    .step.active .step-icon-wrap,
    .step:hover .step-icon-wrap {
      background: linear-gradient(135deg, var(--navy), var(--navy-2));
      border-color: var(--gold); box-shadow: var(--shadow-gold);
    }
    .step.active .step-icon-wrap i,
    .step:hover .step-icon-wrap i { color: var(--gold) !important; }
    .step.active .step-num-badge { background: var(--gold); color: #0c1d34; }
    .step-icon-wrap i { color: var(--text2); transition: var(--transition); }
    .step-main { padding-top: 8px; flex: 1; }
    .step-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .step-header h3 { margin-bottom: 4px; transition: var(--transition); }
    .step:hover .step-header h3, .step.active .step-header h3 { color: var(--blue-2); }
    .step-brief { font-size: .92rem; color: var(--muted); margin: 0; }
    .step-chevron {
      font-size: .85rem; color: var(--muted); transition: transform .35s ease, color .2s;
      flex-shrink: 0;
    }
    .step.active .step-chevron { transform: rotate(180deg); color: var(--blue-2); }

    /* Expandable detail panel */
    .step-detail {
      max-height: 0; overflow: hidden;
      transition: max-height .45s cubic-bezier(.4,0,.2,1), opacity .3s ease, transform .35s ease;
      opacity: 0; transform: translateY(-6px);
    }
    .step.active .step-detail {
      max-height: 400px; opacity: 1; transform: none;
    }
    .step-detail-inner {
      margin-top: 16px; padding: 20px 24px;
      background: var(--white); border-radius: var(--radius-lg);
      border: 1.5px solid var(--border); border-inline-start: 3px solid var(--blue);
      box-shadow: var(--shadow-sm);
    }
    .step-detail-inner p { font-size: .95rem; margin-bottom: 14px; }
    .step-tips { display: flex; flex-direction: column; gap: 8px; }
    .step-tip {
      display: flex; align-items: flex-start; gap: 10px;
      font-size: .87rem; color: var(--text2);
    }
    .step-tip i { color: var(--gold); margin-top: 2px; flex-shrink: 0; }

    /* ── Pricing ── */
    #pricing { background: var(--white); position: relative; }
    /* Subtle separator from previous (store) section */
    #pricing::before {
      content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
      width: 80px; height: 4px; border-radius: 99px;
      background: linear-gradient(90deg, var(--gold-2), var(--gold));
      margin-top: 0;
    }
    .pricing-note { text-align: center; font-size: .88rem; color: var(--muted); margin-top: -44px; margin-bottom: 52px; font-style: italic; }
    .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
    @media (max-width: 860px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 540px) { .pricing-grid { grid-template-columns: 1fr; } }
    .pricing-card {
      background: var(--white); border: 1.5px solid var(--border);
      border-radius: var(--radius-lg); padding: 32px 26px 28px;
      position: relative; transition: var(--transition); text-align: center; overflow: hidden;
      display: flex; flex-direction: column;
    }
    .pricing-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, transparent, var(--blue-light), transparent); transition: var(--transition);
    }
    .pricing-card:hover { border-color: var(--blue-2); box-shadow: var(--shadow-blue); transform: translateY(-5px); }
    .pricing-card:hover::before { background: linear-gradient(90deg, var(--blue), var(--blue-2), var(--blue)); }
    .pricing-card.popular {
      border-color: var(--gold); background: linear-gradient(180deg, var(--gold-light) 0%, #fff 70%);
      box-shadow: var(--shadow-gold); transform: translateY(-8px); border-width: 2px;
      padding-top: 44px;
    }
    .pricing-card.popular::before { background: linear-gradient(90deg, var(--gold-2), var(--gold), var(--gold-2)); height: 5px; }
    .pricing-card.popular:hover { transform: translateY(-12px); }
    .popular-badge {
      position: absolute; top: 0; inset-inline-end: 0;
      background: linear-gradient(135deg, var(--gold), var(--gold-2));
      color: #0c1d34; font-size: .78rem; font-weight: 800;
      padding: 6px 22px; border-radius: 0 0 0 12px; letter-spacing: .04em;
      box-shadow: 0 4px 12px rgba(223,162,58,.35);
    }
    .pkg-icon {
      width: 58px; height: 58px; border-radius: 16px; margin: 0 auto 16px;
      display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
      background: var(--blue-light); color: var(--blue-2);
    }
    .pricing-card.popular .pkg-icon { background: rgba(223,162,58,.18); color: var(--gold-2); width: 64px; height: 64px; font-size: 1.7rem; }
    .pkg-name     { font-size: 1.25rem; font-weight: 800; margin-bottom: 8px; color: var(--text); }
    .pkg-visitors { font-size: .9rem; color: var(--muted); margin-bottom: 16px; font-weight: 600; }
    .pkg-price    {
      font-size: 2.6rem; font-weight: 900; color: var(--blue-2); margin-bottom: 6px;
      letter-spacing: -.02em; line-height: 1;
    }
    .pricing-card.popular .pkg-price { color: var(--gold-2); font-size: 2.9rem; }
    .pkg-desc     { font-size: .87rem; color: var(--text2); margin-bottom: 22px; min-height: 44px; line-height: 1.6; flex: 1; }
    .pricing-card .btn { width: 100%; margin-top: auto; }
    @media (max-width: 768px) {
      .pricing-grid { grid-template-columns: 1fr; gap: 16px; }
      .pricing-card { padding: 26px 22px 22px; }
      .pricing-card.popular { transform: none; padding-top: 38px; }
      .pricing-card.popular:hover { transform: none; }
      .pkg-price { font-size: 2.2rem; }
      .pricing-card.popular .pkg-price { font-size: 2.4rem; }
    }
    .pricing-card.custom-pkg {
      background: linear-gradient(135deg, var(--navy-2), var(--navy-3));
      border-color: rgba(223,162,58,.25); text-align: start; grid-column: 1 / -1;
    }
    /* text-align: start on .custom-pkg already handles ltr/rtl */
    .custom-pkg .pkg-name { color: var(--gold); }
    .custom-pkg .pkg-desc { color: var(--muted-dark); }
    .custom-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
    .custom-feature { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--text-dark); }
    .custom-feature i { color: var(--gold); width: 16px; flex-shrink: 0; }

    /* ── Store Featured Products ── */
    #store-products { position: relative; }
    /* Store section context label */
    .store-context-tag {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 5px 14px; border-radius: 99px;
      background: rgba(59,126,248,.08);
      border: 1px solid rgba(59,126,248,.2);
      color: var(--blue-2);
      font-size: .76rem; font-weight: 700;
      margin-bottom: 8px; letter-spacing: .02em;
    }
    .store-context-tag i { font-size: .72rem; }

    /* Mode-divider — visually separates store (à-la-carte) from pricing (managed packages) */
    .mode-divider {
      max-width: 720px; margin: 0 auto;
      padding: 28px 24px;
      background: linear-gradient(135deg, rgba(8,20,36,.04), rgba(223,162,58,.05));
      border: 1px dashed rgba(223,162,58,.35);
      border-radius: var(--radius-lg);
      text-align: center;
      position: relative;
    }
    .mode-divider .md-icon {
      width: 44px; height: 44px; border-radius: 50%;
      background: var(--gold-light); color: var(--gold-2);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 1.1rem; margin-bottom: 12px;
      border: 1px solid rgba(223,162,58,.3);
    }
    .mode-divider strong {
      display: block; font-size: 1rem; color: var(--text);
      font-weight: 800; margin-bottom: 4px;
    }
    .mode-divider span {
      display: block; font-size: .85rem; color: var(--text2);
      line-height: 1.6;
    }

    .store-products-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 22px;
    }
    @media (max-width: 768px) {
      .store-products-grid { grid-template-columns: 1fr; gap: 14px; }
    }
    .store-prod-card {
      background: var(--white); border: 1.5px solid var(--border);
      border-radius: var(--radius-lg); padding: 26px 22px;
      display: flex; flex-direction: column;
      position: relative; overflow: hidden;
      transition: var(--transition);
      box-shadow: var(--shadow-sm);
    }
    .store-prod-card:hover {
      border-color: var(--gold); box-shadow: var(--shadow-gold);
      transform: translateY(-4px);
    }
    .store-prod-badge {
      position: absolute; top: 14px; inset-inline-end: 14px;
      background: linear-gradient(135deg, var(--gold), var(--gold-2));
      color: var(--white); font-size: .7rem; font-weight: 800;
      padding: 3px 10px; border-radius: 999px; white-space: nowrap;
    }
    .store-prod-icon {
      width: 48px; height: 48px; border-radius: 12px;
      background: var(--gold-light); border: 1px solid rgba(223,162,58,.25);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem; color: var(--gold-2); margin-bottom: 14px;
    }
    .store-prod-type { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; }
    .store-prod-name { font-size: 1.08rem; font-weight: 800; margin-bottom: 7px; color: var(--text); }
    .store-prod-desc { font-size: .85rem; color: var(--text2); flex: 1; margin-bottom: 16px; line-height: 1.6; }
    .store-prod-specs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
    .store-prod-spec {
      display: flex; align-items: center; gap: 5px;
      background: var(--primary-light); border-radius: 7px;
      padding: 4px 9px; font-size: .77rem; color: var(--blue-2); font-weight: 600;
    }
    .store-prod-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .store-prod-price { font-size: 1.45rem; font-weight: 800; color: var(--gold-2); }
    .store-prod-price .unit { font-size: .75rem; font-weight: 500; color: var(--muted); display: block; }
    .btn-store-order {
      padding: 10px 20px; border-radius: 10px;
      background: linear-gradient(135deg, var(--gold), var(--gold-2));
      color: #0c1d34; font-weight: 800; font-size: .88rem;
      border: none; cursor: pointer; transition: var(--transition);
      white-space: nowrap;
    }
    .btn-store-order:hover { filter: brightness(1.08); transform: scale(1.03); }
    .store-prod-skeleton {
      height: 260px; border-radius: var(--radius-lg);
      background: linear-gradient(90deg, #f0ede9 25%, #e8e5e1 50%, #f0ede9 75%);
      background-size: 200% 100%;
      animation: shimmer-light 1.4s infinite;
    }
    @keyframes shimmer-light { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

    /* ── Checker ── */
    #checker { background: var(--bg2); }
    .checker-box {
      max-width: 720px; margin: 0 auto;
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--radius-lg); padding: 44px;
      box-shadow: var(--shadow-md);
    }
    .form-group { margin-bottom: 22px; }
    .form-label { display: block; font-weight: 700; margin-bottom: 10px; font-size: .95rem; }
    .form-input {
      width: 100%; padding: 14px 18px; border: 2px solid var(--border);
      border-radius: var(--radius); font-size: 1rem; font-family: inherit;
      transition: var(--transition); background: var(--bg); color: var(--text);
      min-height: 50px;
    }
    .form-input:focus { outline: none; border-color: var(--blue); background: var(--white); box-shadow: 0 0 0 4px rgba(59,126,248,.1); }
    .form-input.input-error { border-color: var(--danger); background: var(--danger-light); }
    .form-helper { font-size: .82rem; color: var(--muted); margin-top: 8px; line-height: 1.55; }
    .form-helper.error-msg { color: var(--danger); font-weight: 600; }

    /* Direction-aware inputs: follow the html[dir] set by the language switcher */
    html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select,
    html[dir="rtl"] .form-input { direction: rtl; text-align: right; }
    html[dir="ltr"] input, html[dir="ltr"] textarea, html[dir="ltr"] select,
    html[dir="ltr"] .form-input { direction: ltr; text-align: left; }
    html[dir="rtl"] input::placeholder, html[dir="rtl"] textarea::placeholder { text-align: right; }
    html[dir="ltr"] input::placeholder, html[dir="ltr"] textarea::placeholder { text-align: left; }

    /* Check list */
    #check-result { display: none; margin-top: 28px; }
    .check-loading-msg { color: var(--muted); font-size: .9rem; margin-bottom: 16px; text-align: center; }
    .check-list { display: flex; flex-direction: column; gap: 10px; }
    .check-item {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 12px 16px; border-radius: var(--radius);
      border: 1px solid var(--border); background: var(--bg);
      transition: var(--transition);
    }
    .check-item.check-success { background: var(--success-light); border-color: #6ee7b7; }
    .check-item.check-warn    { background: var(--warning-light); border-color: #fcd34d; }
    .check-item.check-fail    { background: var(--danger-light);  border-color: #fca5a5; }
    .check-icon { font-size: 1.1rem; margin-top: 2px; }
    .check-item.check-pending .check-icon { color: var(--muted); }
    .check-item.check-success .check-icon { color: var(--success); }
    .check-item.check-warn    .check-icon { color: var(--warning); }
    .check-item.check-fail    .check-icon { color: var(--danger); }
    .check-item strong { display: block; font-size: .95rem; margin-bottom: 2px; }
    .check-item p { font-size: .82rem; margin: 0; }

    .check-final { margin-top: 24px; padding: 24px; border-radius: var(--radius-lg); border: 2px solid; }
    .check-final h3 { margin-bottom: 8px; }
    .check-final-success { background: var(--success-light); border-color: #6ee7b7; text-align: center; }
    .check-final-success h3 { color: var(--success); }
    .check-final-warn    { background: var(--warning-light); border-color: #fcd34d; }
    .check-final-warn h3 { color: var(--warning); }
    .check-final-fail    { background: var(--danger-light);  border-color: #fca5a5; }
    .check-final-fail h3 { color: var(--danger); }
    .success-icon { font-size: 3rem; color: var(--success); margin-bottom: 16px; }

    /* ═══════════════════════════════════════════════════════
       Campaign
    ══════════════════════════════════════════════════════════ */
    #campaign { display: none; background: var(--bg2); padding: 60px 0; }
    .campaign-inner { max-width: 800px; margin: 0 auto; }

    /* Wizard progress indicator */
    .wizard-progress {
      display: flex; align-items: center; justify-content: center;
      gap: 12px; margin-bottom: 32px; flex-wrap: wrap;
    }
    .wizard-step {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 16px; border-radius: 99px;
      background: rgba(255,255,255,.6); border: 1.5px solid var(--border);
      font-size: .82rem; font-weight: 700; color: var(--muted);
      transition: var(--transition);
    }
    .wizard-step.active {
      background: var(--white); border-color: var(--gold);
      color: var(--text); box-shadow: 0 4px 12px rgba(223,162,58,.18);
    }
    .wizard-step.done {
      background: var(--gold-light); border-color: var(--gold);
      color: var(--gold-2);
    }
    .wizard-step .ws-num {
      width: 22px; height: 22px; border-radius: 50%;
      background: var(--border); color: var(--text2);
      font-size: .72rem; font-weight: 800;
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .wizard-step.active .ws-num { background: var(--gold); color: var(--navy); }
    .wizard-step.done .ws-num { background: var(--gold-2); color: #fff; }
    .wizard-arrow { color: var(--muted); font-size: .7rem; }
    @media (max-width: 640px) {
      .wizard-progress { gap: 6px; }
      .wizard-step { padding: 6px 10px; font-size: .74rem; }
      .wizard-step .ws-text { display: none; }
      .wizard-step.active .ws-text { display: inline; }
    }

    .campaign-card {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--radius-lg); padding: 36px;
      box-shadow: var(--shadow); margin-bottom: 24px;
    }
    .campaign-card h4 { margin-bottom: 6px; font-size: 1.1rem; }
    .campaign-card > p { font-size: .9rem; margin-bottom: 20px; }
    @media (max-width: 768px) {
      .campaign-card { padding: 24px 20px; }
    }

    /* Qty chips */
    .qty-chips { display: flex; flex-wrap: wrap; gap: 10px; }
    .qty-chip {
      padding: 12px 22px; border-radius: var(--radius);
      border: 2px solid var(--border); font-size: .92rem;
      font-weight: 700; color: var(--text2); cursor: pointer;
      transition: var(--transition); background: var(--bg);
      min-height: 46px;
    }
    .qty-chip:hover { border-color: var(--primary); color: var(--primary); }
    .qty-chip.selected {
      border-color: var(--gold); background: linear-gradient(135deg, var(--gold), var(--gold-2));
      color: var(--navy); box-shadow: 0 4px 16px rgba(223,162,58,.35);
    }

    /* Sources */
    .sources-main { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
    .src-chip {
      display: flex; align-items: center; gap: 9px;
      padding: 12px 20px; border-radius: var(--radius);
      border: 2px solid var(--border); font-size: .92rem;
      font-weight: 700; color: var(--text2); cursor: pointer;
      transition: var(--transition); background: var(--bg);
      min-height: 46px;
    }
    .src-chip:hover { border-color: var(--primary); color: var(--primary); }
    .src-chip.active {
      border-color: var(--gold); background: linear-gradient(135deg, var(--gold), var(--gold-2));
      color: var(--navy); box-shadow: 0 4px 16px rgba(223,162,58,.35);
    }
    .src-chip i { font-size: 1rem; }
    #sources-msg { font-size: .85rem; color: var(--success); margin-top: 8px; display: none; }

    /* Sub sources */
    .sub-sources {
      display: none; flex-wrap: wrap; align-items: center; gap: 8px;
      padding: 12px 14px;
      background: var(--bg);
      border-radius: var(--radius);
      border: 1px solid var(--border);
      border-right: 3px solid var(--gold);
      margin-top: 6px;
    }
    .sub-sources.open { display: flex; }
    .sub-sources + .sub-sources.open { margin-top: 4px; }

    .sub-label {
      width: 100%; font-size: .75rem; font-weight: 700;
      color: var(--gold); margin-bottom: 4px;
      text-align: right; letter-spacing: .3px;
    }

    .sub-chip {
      padding: 5px 13px; border-radius: 99px;
      border: 1px solid var(--border); font-size: .82rem;
      cursor: pointer; transition: var(--transition);
      background: var(--white); color: var(--text2);
    }
    .sub-chip:hover  { border-color: var(--primary); color: var(--primary); }
    .sub-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }

    /* Engagement */
    .eng-btns { display: flex; gap: 10px; flex-wrap: wrap; }
    .eng-btn {
      padding: 12px 24px; border-radius: var(--radius);
      border: 2px solid var(--border); font-size: .92rem;
      font-weight: 700; color: var(--text2); cursor: pointer;
      transition: var(--transition); background: var(--bg);
      min-height: 46px;
    }
    .eng-btn:hover { border-color: var(--primary); color: var(--primary); }
    .eng-btn.active {
      border-color: var(--gold); background: linear-gradient(135deg, var(--gold), var(--gold-2));
      color: var(--navy); box-shadow: 0 4px 16px rgba(223,162,58,.35);
    }
    #engagement-msg { font-size: .85rem; color: var(--text2); margin-top: 10px; }

    /* ── Sitemap toggle switch ── */
    .sitemap-switch { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; }
    .sitemap-switch input { opacity: 0; width: 0; height: 0; }
    .sitemap-slider {
      position: absolute; cursor: pointer; inset: 0;
      background: rgba(255,255,255,.12); border-radius: 26px;
      transition: .25s;
    }
    .sitemap-slider::before {
      content: ''; position: absolute;
      height: 20px; width: 20px; left: 3px; bottom: 3px;
      background: #fff; border-radius: 50%; transition: .25s;
    }
    .sitemap-switch input:checked + .sitemap-slider { background: var(--gold); }
    .sitemap-switch input:checked + .sitemap-slider::before { transform: translateX(22px); }
    .sitemap-switch input:disabled + .sitemap-slider { opacity: .4; cursor: not-allowed; }
    #sitemap-toggle-note { color: var(--text2); }
    #sitemap-toggle-note.note-ok { color: var(--gold); }
    #sitemap-toggle-note.note-warn { color: #f59e0b; }

    /* ═══════════════════════════════════════════════════════
       Availability
    ══════════════════════════════════════════════════════════ */
    #avail-result { display: none; max-width: 800px; margin: 24px auto 0; }
    .avail-checking { text-align: center; padding: 40px; }
    .spinner-lg { font-size: 3rem; color: var(--primary); margin-bottom: 20px; }
    .avail-card { padding: 28px; border-radius: var(--radius-lg); border: 2px solid; }
    .avail-ok   { background: var(--success-light); border-color: #6ee7b7; }
    .avail-partial { background: var(--warning-light); border-color: #fcd34d; }
    .avail-none { background: var(--danger-light); border-color: #fca5a5; }
    .avail-header {
      display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
    }
    .avail-header i { font-size: 1.8rem; }
    .avail-ok i     { color: var(--success); }
    .avail-partial i{ color: var(--warning); }
    .avail-none i   { color: var(--danger); }

    /* Summary grid */
    .summary-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 12px; margin: 20px 0;
    }
    .summary-item {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 12px 16px;
    }
    .summary-item span { font-size: .8rem; color: var(--muted); display: block; }
    .summary-item strong { font-size: .95rem; font-weight: 700; }
    .summary-price { grid-column: 1 / -1; }
    .price-big { font-size: 1.4rem !important; color: var(--primary); }

    /* Schedule table */
    .table-wrap { overflow-x: auto; margin: 16px 0; }
    .schedule-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
    .schedule-table th, .schedule-table td {
      padding: 10px 14px; text-align: start;
      border-bottom: 1px solid var(--border);
    }
    .schedule-table th { background: var(--bg); font-weight: 700; }

    /* ═══════════════════════════════════════════════════════
       Payment
    ══════════════════════════════════════════════════════════ */
    #payment { display: none; background: var(--bg); padding: 60px 0; }
    #payment .container { max-width: 700px; }
    #pay-area { margin-top: 28px; }
    .pay-processing, .pay-fail { text-align: center; padding: 40px; }
    .fail-icon { font-size: 3rem; color: var(--danger); margin-bottom: 16px; }
    .success-icon-lg { font-size: 4rem; color: var(--success); margin-bottom: 20px; text-align: center; }

    .receipt-card {
      background: var(--bg); border: 1px solid var(--border);
      border-radius: var(--radius-lg); padding: 24px; margin: 24px 0;
    }
    .receipt-card h4 { margin-bottom: 16px; font-size: 1.05rem; }

    .whats-next {
      background: var(--primary-light); border-radius: var(--radius);
      padding: 20px 24px; margin: 20px 0;
    }
    .whats-next h4 { color: var(--primary); margin-bottom: 12px; }
    .whats-next li {
      display: flex; align-items: flex-start; gap: 10px;
      font-size: .9rem; padding: 6px 0; border-bottom: 1px solid #bfdbfe;
      color: var(--text2);
    }
    .whats-next li::before {
      content: '✓'; color: var(--success); font-weight: 700; flex-shrink: 0;
    }

    .success-payment { text-align: center; }
    .success-payment h2 { color: var(--success); margin-bottom: 8px; }

    /* ═══════════════════════════════════════════════════════
       Mid-Page CTA Band
    ══════════════════════════════════════════════════════════ */
    .mid-cta-band {
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%);
      border-top: 1px solid rgba(223,162,58,.15);
      border-bottom: 1px solid rgba(223,162,58,.15);
      padding: 64px 0;
    }
    .mid-cta-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      flex-wrap: wrap;
    }
    .mid-cta-text { flex: 1; min-width: 260px; }
    .mid-cta-badge {
      display: inline-flex; align-items: center; gap: 10px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(223,162,58,.2);
      border-radius: 99px; padding: 6px 16px;
      font-size: .82rem; font-weight: 600;
      color: rgba(255,255,255,.75);
      margin-bottom: 16px;
    }
    .mid-cta-badge .htm-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 8px rgba(16,185,129,.6);
      animation: np-pulse-dot 1.8s ease-out infinite;
      flex-shrink: 0;
    }
    .mid-cta-text h2 { color: var(--white); margin-bottom: 10px; font-size: clamp(1.5rem, 3vw, 2.2rem); }
    .mid-cta-text p  { color: var(--muted-dark); font-size: 1.05rem; }
    .mid-cta-actions { flex-shrink: 0; }
    @media (max-width: 768px) {
      .mid-cta-band { padding: 48px 0; }
      .mid-cta-inner { flex-direction: column; text-align: center; }
      .mid-cta-badge { margin-block: 0 16px; margin-inline: auto; }
      .mid-cta-actions .btn { width: 100%; justify-content: center; }
    }

    /* ═══════════════════════════════════════════════════════
       Trust
    ══════════════════════════════════════════════════════════ */
    #trust {
      background: linear-gradient(145deg, var(--navy) 0%, var(--navy-2) 100%);
      border-top: 1px solid rgba(223,162,58,.1);
    }
    #trust .section-header h2 { color: var(--white); }
    #trust .section-header p  { color: var(--muted-dark); }
    .trust-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 18px;
    }
    @media (min-width: 1024px) {
      .trust-grid { grid-template-columns: repeat(3, 1fr); }
    }
    .trust-item {
      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
      border-radius: var(--radius-lg); padding: 28px 22px;
      display: flex; flex-direction: column; align-items: center; gap: 14px;
      text-align: center; font-weight: 700; font-size: .93rem;
      color: rgba(255,255,255,.85); transition: var(--transition);
    }
    .trust-item:hover {
      border-color: rgba(223,162,58,.35); background: rgba(255,255,255,.09);
      transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,.25);
    }
    .trust-icon {
      width: 58px; height: 58px; border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem; flex-shrink: 0;
      background: linear-gradient(135deg, rgba(223,162,58,.2), rgba(223,162,58,.08));
      border: 1px solid rgba(223,162,58,.25); color: var(--gold);
    }

    /* ═══════════════════════════════════════════════════════
       FAQ
    ══════════════════════════════════════════════════════════ */
    #faq { background: var(--white); }
    .faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
    .faq-item {
      background: var(--bg); border: 1.5px solid var(--border);
      border-radius: var(--radius-lg); overflow: hidden;
      transition: var(--transition);
    }
    .faq-item:hover { border-color: rgba(59,126,248,.25); }
    .faq-q {
      width: 100%; display: flex; align-items: center; justify-content: space-between;
      padding: 20px 24px; font-weight: 700; font-size: .97rem;
      cursor: pointer; text-align: start; gap: 12px;
      transition: var(--transition); color: var(--text);
      background: none;
    }
    .faq-q:hover { color: var(--blue-2); }
    .faq-q i { transition: transform .3s ease; flex-shrink: 0; color: var(--blue-2); }
    .faq-item.open { border-color: var(--blue); }
    .faq-item.open .faq-q { color: var(--blue-2); background: var(--blue-light); }
    .faq-item.open .faq-q i { transform: rotate(180deg); }
    .faq-a {
      max-height: 0; overflow: hidden;
      transition: max-height .38s ease, padding .2s;
      padding: 0 24px;
    }
    .faq-item.open .faq-a { max-height: 300px; padding: 0 24px 20px; }
    .faq-a p { font-size: .93rem; }

    /* ═══════════════════════════════════════════════════════
       Contact
    ══════════════════════════════════════════════════════════ */
    #contact { background: var(--bg-alt); }
    .contact-inner { max-width: 680px; margin: 0 auto; }
    .contact-form { display: flex; flex-direction: column; gap: 18px; }
    .form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
    @media (max-width: 640px) { .form-row-2 { grid-template-columns: 1fr; } }
    .customer-info-form { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 4px; }
    .customer-info-form label { display:block; font-size:.92rem; font-weight:700; color:var(--text); margin-bottom:8px; }
    .customer-info-form input { width:100%; padding:13px 16px; border:1.5px solid var(--border); border-radius:10px; font-size:1rem; font-family:inherit; outline:none; transition:border-color .2s, box-shadow .2s; background:var(--white); box-sizing:border-box; min-height: 48px; }
    .customer-info-form input:focus { border-color:var(--primary); box-shadow: 0 0 0 4px rgba(59,126,248,.1); }
    .customer-info-form input.input-error { border-color: var(--danger); background: var(--danger-light); }
    select.form-input { appearance: none; -webkit-appearance: none; cursor: pointer; }
    textarea.form-input { resize: vertical; min-height: 120px; }
    #contact-result { display: none; padding: 14px 18px; border-radius: var(--radius); font-weight: 600; }
    #contact-result.success { background: var(--success-light); color: var(--success); border: 1px solid #6ee7b7; }
    #contact-result.error   { background: var(--danger-light);  color: var(--danger);  border: 1px solid #fca5a5; }

    /* ═══════════════════════════════════════════════════════
       Footer
    ══════════════════════════════════════════════════════════ */
    .footer {
      background: var(--navy); color: #94a3b8; padding: 72px 0 36px;
      border-top: 1px solid rgba(223,162,58,.12);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 40px; margin-bottom: 56px;
    }
    .footer-logo {
      font-size: 1.4rem; font-weight: 800; color: var(--white);
      display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
    }
    .footer-logo i { color: var(--gold); }
    .footer-logo-img { width: 44px; height: 44px; object-fit: contain; display: block; opacity: .9; }
    .footer-desc { font-size: .87rem; line-height: 1.8; color: var(--muted-dark); }
    .footer-col h5 {
      color: var(--gold); font-size: .8rem; font-weight: 800;
      margin-bottom: 18px; text-transform: uppercase; letter-spacing: .08em;
    }
    .footer-col ul li { margin-bottom: 12px; }
    .footer-col ul a { font-size: .87rem; color: #64748b; transition: var(--transition); }
    .footer-col ul a:hover { color: var(--white); padding-inline-start: 4px; }
    .footer-divider { height: 1px; background: rgba(255,255,255,.06); margin-bottom: 28px; }
    .footer-bottom {
      display: flex; align-items: center; justify-content: center;
      font-size: .8rem; color: #475569; text-align: center; gap: 6px;
    }
    .footer-bottom span { color: var(--gold); }

    /* ══════════════════════════════════════════════════════
       Live Ticker
    ══════════════════════════════════════════════════════ */
    .ticker-wrap {
      background: var(--navy); border-top: 1px solid rgba(223,162,58,.15);
      border-bottom: 1px solid rgba(223,162,58,.15);
      overflow: hidden; padding: 0; position: relative; z-index: 10;
    }
    .ticker-wrap::before,
    .ticker-wrap::after {
      content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2;
      pointer-events: none;
    }
    .ticker-wrap::before { left: 0; background: linear-gradient(to right, var(--navy), transparent); }
    .ticker-wrap::after  { right: 0; background: linear-gradient(to left, var(--navy), transparent); }
    .ticker-label { display: none; }
    .ticker-track {
      display: flex; align-items: center;
      white-space: nowrap;
      will-change: transform;
    }
    .ticker-track.running {
      animation: ticker-scroll var(--ticker-dur, 40s) linear infinite;
    }
    .ticker-track:hover { animation-play-state: paused; }
    @keyframes ticker-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(var(--ticker-shift)); }
    }
    .ticker-inner { display: flex; align-items: center; height: 46px; flex-shrink: 0; }
    .tick-item {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 0 28px; font-size: .84rem; font-weight: 600;
      color: rgba(255,255,255,.75); white-space: nowrap;
      border-inline-end: 1px solid rgba(255,255,255,.1);
    }
    .tick-item i { font-size: .9rem; }
    .tick-gold { color: var(--gold); }
    .tick-blue { color: #60a5fa; }
    .tick-green { color: #34d399; }
    .tick-purple { color: #a78bfa; }
    .tick-red { color: #f87171; }

    /* ══════════════════════════════════════════════════════
       Integrations Section
    ══════════════════════════════════════════════════════ */
    #integrations { background: #060d1a; padding: 96px 0; }
    .integrations-header { text-align: center; margin-bottom: 56px; }
    .integrations-header h2 { margin-bottom: 12px; }
    .integrations-header p  { max-width: 540px; margin: 0 auto; font-size: 1.03rem; }
    .int-categories { display: flex; flex-direction: column; gap: 48px; }
    .int-cat-label {
      font-size: .75rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 18px;
      display: flex; align-items: center; gap: 10px;
    }
    .int-cat-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
    .int-cat-label i { color: var(--gold); }
    .int-grid { display: flex; flex-wrap: wrap; gap: 14px; }
    .int-card {
      display: flex; align-items: center; gap: 14px;
      background: var(--bg); border: 1.5px solid var(--border);
      border-radius: var(--radius-lg); padding: 16px 22px;
      transition: var(--transition); cursor: default; min-width: 160px;
    }
    .int-card:hover {
      border-color: var(--blue-2); box-shadow: var(--shadow-blue);
      transform: translateY(-3px); background: var(--white);
    }
    .int-card:hover .int-icon { transform: scale(1.12); }
    .int-icon {
      width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem; transition: transform .3s ease;
    }
    .int-info strong { display: block; font-size: .93rem; font-weight: 800; }
    .int-info span { font-size: .75rem; color: var(--muted); }
    .int-badge {
      margin-inline-start: auto; font-size: .68rem; font-weight: 800;
      padding: 3px 10px; border-radius: 99px; white-space: nowrap;
    }
    .int-badge-live  { background: #d1fae5; color: #059669; }
    .int-badge-ai    { background: #ede9fe; color: var(--accent); }
    .int-badge-search { background: #dbeafe; color: var(--blue-2); }
    .int-cta-wrap { margin-top: 48px; text-align: center; }

    /* ═══════════════════════════════════════════════════════
       Responsive
    ══════════════════════════════════════════════════════════ */
    @media (max-width: 1400px) { .nav-hide-md { display: none !important; } }

    @media (max-width: 1100px) {
      .nav { display: none; }
      .hamburger { display: flex; }
    }

    @media (max-width: 1024px) {
      .hero-inner { grid-template-columns: 1fr; gap: 36px; text-align: center; }
      .hero-text { display: flex; flex-direction: column; align-items: center; }
      .hero-desc { margin-inline: auto; }
      .hero-btns { justify-content: center; }
      .hero-features { justify-content: center; }
      .hero-visual { display: none; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .steps::before { display: none; }
      .summary-grid { grid-template-columns: 1fr; }
      .reach-rows { gap: 36px; }
    }

    @media (max-width: 640px) {
      .footer-grid { grid-template-columns: 1fr; }
      .form-row { grid-template-columns: 1fr; }
      .hero-btns { flex-direction: column; width: 100%; }
      .hero-btns .btn { width: 100%; }
      .btn-group { flex-direction: column; }
      .btn-group .btn { width: 100%; }
      .pricing-grid { grid-template-columns: 1fr; }
      .trust-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
      .trust-item { padding: 22px 16px; gap: 10px; }
      .devices-wrap { justify-content: center; }
      .checker-box { padding: 28px 20px; }
      .hero-trust-mini { width: 100%; justify-content: center; }
      h1 { font-size: clamp(1.75rem, 7vw, 2.4rem) !important; }
      h2 { font-size: clamp(1.45rem, 5vw, 2rem) !important; }
      .section-header p { font-size: .95rem; }
      /* Analytics Proof */
      .ap-inner { flex-direction: column; }
      .ap-text { flex: none; }
      /* Ticker */
      .ticker-section-header h2 { font-size: 1.4rem; }
      .ticker-stats-strip { gap: 0; }
      /* Founder */
      .founder-card { flex-direction: column; align-items: center; text-align: center; padding: 36px 24px; gap: 32px; }
      .founder-right { text-align: right; }
      .founder-chips { justify-content: center; }
      .founder-quote-bg { font-size: 10rem; }
    }

/* ═══════════════════════════════════════════════════════════
   ANALYTICS PROOF SECTION
═══════════════════════════════════════════════════════════ */
.ap-section { padding: 90px 0; }

.ap-inner {
  display: flex;
  align-items: center;
  gap: 64px;
}

.ap-text { flex: 0 0 42%; }

.ap-heading {
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.3;
  margin: 16px 0 20px;
}

.ap-desc {
  font-size: 1.02rem;
  color: var(--text-muted);
  line-height: 1.85;
  margin-bottom: 28px;
}

.ap-slideshow { flex: 1; min-width: 0; }

.ap-browser {
  background: #111827;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
}

.ap-browser-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: #0d1421;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.ap-dots { display: flex; gap: 6px; }
.ap-dots span { width: 11px; height: 11px; border-radius: 50%; }
.ap-dots span:nth-child(1) { background: #ef4444; }
.ap-dots span:nth-child(2) { background: #f59e0b; }
.ap-dots span:nth-child(3) { background: #22c55e; }

.ap-url {
  flex: 1;
  background: rgba(255,255,255,.05);
  border-radius: 5px;
  padding: 4px 12px;
  font-size: 11px;
  color: rgba(255,255,255,.35);
  font-family: monospace;
  letter-spacing: .3px;
}

.ap-slides-wrap {
  position: relative;
  height: 290px; /* fixed height — all slides identical */
}

.ap-slide {
  display: none;
  padding: 22px 22px 6px;
  animation: apFadeIn .45s ease;
  height: 100%;
  box-sizing: border-box;
  flex-direction: column;
}
.ap-slide.active { display: flex; }

@keyframes apFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ap-slide-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ap-metric-num {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.ap-metric-label {
  font-size: .75rem;
  color: rgba(255,255,255,.45);
  display: block;
  margin-top: 3px;
}

.ap-metric-delta {
  display: inline-block;
  margin-top: 5px;
  background: rgba(34,197,94,.15);
  color: #22c55e;
  font-size: .75rem;
  padding: 2px 9px;
  border-radius: 20px;
  font-weight: 700;
}

.ap-vf-badge {
  font-size: .68rem;
  color: var(--gold);
  opacity: .65;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(201,168,76,.08);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(201,168,76,.2);
}

.ap-chart { margin-bottom: 8px; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.ap-chart svg { flex: 1; height: 100%; }
.ap-bars { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.ap-chart-dates {
  display: flex;
  justify-content: space-between;
  font-size: .7rem;
  color: rgba(255,255,255,.25);
  padding: 0 2px;
  margin-bottom: 10px;
}

/* Bar slide */
.ap-bars { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }

.ap-bar-row { display: flex; align-items: center; gap: 10px; }

.ap-bar-label {
  font-size: .78rem;
  color: rgba(255,255,255,.65);
  width: 120px;
  flex-shrink: 0;
  text-align: right;
  direction: rtl;
}

.ap-bar-bg {
  flex: 1;
  height: 9px;
  background: rgba(255,255,255,.06);
  border-radius: 10px;
  overflow: hidden;
}

.ap-bar-fill {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--gold), #f59e0b);
}

.ap-bar-pct {
  font-size: .75rem;
  color: var(--gold);
  width: 34px;
  text-align: left;
  flex-shrink: 0;
  font-weight: 700;
}

/* Slide nav dots */
.ap-dots-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 0 16px;
}

.ap-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: none;
  cursor: pointer;
  transition: background .25s, transform .25s;
  padding: 0;
}

.ap-dot.active { background: var(--gold); transform: scale(1.35); }

/* ═══════════════════════════════════════════════════════════
   TICKER / CONVEYOR BELT SECTION
═══════════════════════════════════════════════════════════ */
.ticker-section {
  padding: 64px 0;
  overflow: hidden;
  background: #060d1a;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.ticker-section-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 0 20px;
  color: #fff;
}

.ticker-section-header h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 800; margin-bottom: 10px; color: #fff; }
.ticker-section-header p  { color: rgba(255,255,255,.55); font-size: .95rem; }

.ticker-row {
  display: flex;
  overflow: hidden;
  margin-bottom: 14px;
  direction: ltr; /* force LTR so translateX(-50%) math is correct regardless of page RTL */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-image:         linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

.ticker-track {
  display: flex;
  flex-shrink: 0;
  width: max-content;
  will-change: transform;
  animation: tkLeft 38s linear infinite;
}

.ticker-track.reverse { animation: tkRight 38s linear infinite; }

.ticker-row:hover .ticker-track { animation-play-state: paused; }

/* margin-right instead of margin-inline-end — direction is now forced LTR */
.ticker-track .ticker-pill { margin-right: 12px; }

/* Standard seamless loop: track = [SET1][SET2], animate by exactly -SET1_width = -50% of total */
@keyframes tkLeft  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes tkRight { from { transform: translateX(-50%); } to { transform: translateX(0); }    }

/* Stagger so all 3 rows appear mid-motion on first load — no empty-start visible */
#integrations .ticker-row:nth-child(2) .ticker-track { animation-delay: -19s; }
#integrations .ticker-row:nth-child(3) .ticker-track { animation-delay: -9.5s; }
#integrations .ticker-row:nth-child(4) .ticker-track { animation-delay: -28.5s; }

.ticker-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 100px;
  font-size: .88rem;
  color: rgba(255,255,255,.82);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
  cursor: default;
  /* force dark to override any inherited light background */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.ticker-pill:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(201,168,76,.3);
  color: #fff;
}

.ticker-pill i { font-size: .85rem; }

.ticker-pill-ai {
  border-color: rgba(201,168,76,.2);
  background: rgba(201,168,76,.05);
}

.ticker-pill-ai:hover {
  background: rgba(201,168,76,.12);
  border-color: rgba(201,168,76,.4);
  color: var(--gold);
}

.tk-flag { font-size: 1.15em; line-height: 1; }

.ticker-label-row {
  text-align: center;
  margin-bottom: 14px;
}

.ticker-cat-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .8px;
}

.ticker-stats-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-top: 40px;
  flex-wrap: wrap;
  gap: 0;
}

.ticker-stat {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 28px;
  font-size: .92rem;
  color: rgba(255,255,255,.6);
}

.ticker-stat strong {
  color: var(--gold);
  font-weight: 700;
  font-size: 1rem;
}

.ticker-stat i { color: rgba(201,168,76,.6); font-size: .85rem; }

.ticker-stat-divider {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,.1);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .ticker-stat { padding: 8px 16px; }
  .ticker-stat-divider { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   FOUNDER SECTION
═══════════════════════════════════════════════════════════ */
.founder-section { padding: 80px 0; }

.founder-card {
  display: flex;
  align-items: center;
  gap: 56px;
  background: linear-gradient(135deg, rgba(15,25,50,.9) 0%, rgba(10,18,38,.95) 100%);
  border: 1px solid rgba(201,168,76,.18);
  border-radius: 24px;
  padding: 56px 60px;
  max-width: 920px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* Large decorative quote */
.founder-quote-bg {
  position: absolute;
  top: -20px; left: 30px;
  font-size: 18rem;
  line-height: 1;
  color: rgba(201,168,76,.04);
  font-family: Georgia, serif;
  pointer-events: none;
  user-select: none;
}

/* Left column */
.founder-left {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.founder-avatar-ring {
  width: 120px; height: 120px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, var(--gold), rgba(201,168,76,.3));
  flex-shrink: 0;
}

.founder-photo {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: rgba(201,168,76,.08);
}

.founder-photo-placeholder {
  width: 100%; height: 100%;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: rgba(201,168,76,.45);
  background: rgba(201,168,76,.06);
}

.founder-identity { display: flex; flex-direction: column; gap: 3px; }

.founder-name-sm {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}

.founder-role {
  font-size: .75rem;
  color: var(--gold);
  opacity: .8;
  font-weight: 500;
  white-space: nowrap;
}

.founder-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: #0a66c2;
  color: #fff !important;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, transform .2s;
  white-space: nowrap;
}

.founder-linkedin:hover { background: #0958a8; transform: translateY(-2px); }

/* Right column */
.founder-right { flex: 1; }

.founder-eyebrow {
  font-size: .78rem;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 10px;
  opacity: .8;
}

.founder-headline {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 18px;
  color: #fff;
}

.founder-bio {
  font-size: .97rem;
  color: #fff;
  line-height: 1.9;
  margin-bottom: 24px;
}

.founder-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.founder-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(201,168,76,.08);
  border: 1px solid rgba(201,168,76,.2);
  border-radius: 100px;
  font-size: .78rem;
  color: rgba(201,168,76,.85);
  font-weight: 500;
}

.founder-chip i { font-size: .75rem; }