/* =====================================================
   Plans Page CSS - TENDERGlobal
   Includes: Executive Slider + Plan Cards + Sections
   ===================================================== */


    :root {
      --tg-primary: #378b95;
      --tg-primary-dark: #246b74;
      --tg-primary-deep: #174f57;
      --tg-primary-soft: #eaf5f6;
      --tg-secondary: #f5833d;
      --tg-secondary-dark: #c85c1f;
      --tg-secondary-soft: #fff2e9;
      --tg-success: #98ce44;
      --tg-ink: #0f172a;
      --tg-text: #334155;
      --tg-muted: #64748b;
      --tg-line: #dbe5e8;
      --tg-surface: #ffffff;
      --tg-soft: #f7fafb;
      --tg-shadow: 0 32px 90px rgba(15, 23, 42, .13);
      --tg-card-shadow: 0 18px 46px rgba(15, 23, 42, .10);
      --tg-ease: cubic-bezier(.22, .78, .18, 1);
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      min-width: 320px;
      color: var(--tg-ink);
      background: #edf4f5;
      font-family: "Inter", "Aptos", "Segoe UI", Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    html[lang="ar"] body {
      font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
    }

    button, a { font: inherit; }

    .tg-executive-slider {
      width: 100%;
      min-height: 700px;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      background:
        linear-gradient(125deg, rgba(255,255,255,.98) 0%, rgba(243,248,249,.98) 48%, rgba(255,248,243,.96) 100%);
      border-block: 1px solid rgba(203, 213, 225, .78);
      box-shadow: var(--tg-shadow);
    }

    /* Quiet moving dot matrix across the complete section. */
    .tg-executive-slider::before {
      content: "";
      position: absolute;
      inset: -70px;
      z-index: -3;
      pointer-events: none;
      opacity: .34;
      background-image:
        radial-gradient(circle, rgba(55,139,149,.16) 0 1px, transparent 1.35px),
        radial-gradient(circle, rgba(245,131,61,.10) 0 1px, transparent 1.35px);
      background-size: 34px 34px, 68px 68px;
      background-position: 0 0, 17px 17px;
      mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
      animation: tgExecutiveDotField 38s linear infinite;
    }

    /* Broad luminous business ribbon, intentionally restrained. */
    .tg-executive-slider::after {
      content: "";
      position: absolute;
      z-index: -2;
      width: 72%;
      height: 185%;
      left: -58%;
      top: -44%;
      pointer-events: none;
      opacity: .68;
      border-radius: 48%;
      background:
        linear-gradient(110deg,
          transparent 12%,
          rgba(55,139,149,.025) 30%,
          rgba(55,139,149,.10) 49%,
          rgba(245,131,61,.055) 61%,
          transparent 80%);
      filter: blur(12px);
      transform: rotate(14deg);
      animation: tgExecutiveRibbon 24s var(--tg-ease) infinite;
    }


    /* Global animated regional data field shared by all slides. */
    .tg-global-shapes {
      position: absolute;
      inset: 0;
      z-index: 1;
      overflow: hidden;
      pointer-events: none;
    }

    .tg-slider-viewport {
      position: relative;
      z-index: 2;
    }

    .tg-global-network {
      position: absolute;
      inset: -6% -4%;
      width: 108%;
      height: 112%;
      overflow: visible;
      opacity: .58;
      animation: tgNetworkDrift 22s ease-in-out infinite alternate;
    }

    .tg-network-line {
      fill: none;
      stroke-width: 1.15;
      stroke-linecap: round;
      stroke-dasharray: 9 17;
      vector-effect: non-scaling-stroke;
      animation: tgNetworkFlow 30s linear infinite;
    }

    .tg-network-line-a { stroke: url(#tgNetworkTeal); }
    .tg-network-line-b {
      stroke: url(#tgNetworkOrange);
      stroke-dasharray: 5 22;
      animation-duration: 37s;
      animation-direction: reverse;
    }
    .tg-network-line-c {
      stroke: rgba(55,139,149,.16);
      stroke-dasharray: 2 18;
      animation-duration: 44s;
    }

    .tg-network-node {
      transform-box: fill-box;
      transform-origin: center;
      animation: tgNetworkNodePulse 4.6s ease-in-out infinite;
    }

    .tg-network-node.teal { fill: rgba(55,139,149,.34); }
    .tg-network-node.orange { fill: rgba(245,131,61,.32); }
    .tg-network-node:nth-of-type(2) { animation-delay: -.8s; }
    .tg-network-node:nth-of-type(3) { animation-delay: -1.6s; }
    .tg-network-node:nth-of-type(4) { animation-delay: -2.4s; }
    .tg-network-node:nth-of-type(5) { animation-delay: -3.2s; }
    .tg-network-node:nth-of-type(6) { animation-delay: -4s; }

    .tg-background-arc {
      position: absolute;
      display: block;
      border-radius: 50%;
      opacity: .46;
      will-change: transform;
    }

    .tg-background-arc-a {
      width: 520px;
      height: 520px;
      left: -330px;
      top: 118px;
      border: 1px solid rgba(55,139,149,.12);
      box-shadow:
        0 0 0 54px rgba(55,139,149,.025),
        0 0 0 108px rgba(55,139,149,.018);
      animation: tgArcFloatA 20s ease-in-out infinite alternate;
    }

    .tg-background-arc-b {
      width: 390px;
      height: 390px;
      right: -220px;
      bottom: -150px;
      border: 1px solid rgba(245,131,61,.13);
      box-shadow:
        0 0 0 44px rgba(245,131,61,.025),
        0 0 0 88px rgba(245,131,61,.016);
      animation: tgArcFloatB 24s ease-in-out infinite alternate;
    }

    @keyframes tgExecutiveDotField {
      to { background-position: 68px 34px, -51px 85px; }
    }

    @keyframes tgExecutiveRibbon {
      0%, 14% { transform: translate3d(0,0,0) rotate(14deg); opacity: .18; }
      45% { opacity: .68; }
      78% { opacity: .48; }
      100% { transform: translate3d(230%,0,0) rotate(14deg); opacity: .12; }
    }

    @keyframes tgNetworkFlow {
      to { stroke-dashoffset: -520; }
    }

    @keyframes tgNetworkDrift {
      from { transform: translate3d(-1.2%, 0, 0) scale(1); }
      to { transform: translate3d(1.5%, -1.1%, 0) scale(1.025); }
    }

    @keyframes tgNetworkNodePulse {
      0%,100% { opacity: .42; transform: scale(.72); }
      50% { opacity: .92; transform: scale(1.28); }
    }

    @keyframes tgArcFloatA {
      from { transform: translate3d(0,0,0) rotate(-8deg); }
      to { transform: translate3d(52px,-28px,0) rotate(5deg); }
    }

    @keyframes tgArcFloatB {
      from { transform: translate3d(0,0,0) rotate(8deg); }
      to { transform: translate3d(-46px,-34px,0) rotate(-6deg); }
    }

    .tg-slider-topbar {
      width: min(1200px, calc(100% - 64px));
      position: absolute;
      z-index: 30;
      top: 24px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: flex-end;
      pointer-events: none;
    }

    .tg-control-cluster {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px;
      border: 1px solid rgba(203, 213, 225, .82);
      border-radius: 999px;
      background: rgba(255,255,255,.84);
      box-shadow: 0 12px 36px rgba(15,23,42,.08);
      backdrop-filter: blur(18px) saturate(140%);
      pointer-events: auto;
    }

    .tg-lang-button {
      min-height: 34px;
      border: 0;
      background: transparent;
      color: var(--tg-muted);
      cursor: pointer;
      font-weight: 800;
      transition: transform .2s ease, background .2s ease, color .2s ease;
    }

    .tg-lang-button {
      min-width: 48px;
      padding: 7px 13px;
      border-radius: 999px;
      font-size: 12px;
    }

    .tg-lang-button.is-active {
      color: #fff;
      background: var(--tg-primary);
      box-shadow: 0 7px 18px rgba(55,139,149,.24);
    }

    .tg-pause-button {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 1px solid var(--tg-line);
      border-radius: 14px;
      color: var(--tg-text);
      background: rgba(255,255,255,.88);
      box-shadow: 0 10px 24px rgba(15,23,42,.06);
      backdrop-filter: blur(12px);
      cursor: pointer;
      transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
    }

    .tg-pause-button:hover {
      transform: translateY(-2px);
      border-color: rgba(55,139,149,.34);
      color: var(--tg-primary-dark);
      background: rgba(255,255,255,.96);
    }

    .tg-pause-button.is-paused {
      color: #fff;
      border-color: var(--tg-primary);
      background: var(--tg-primary);
      box-shadow: 0 10px 24px rgba(55,139,149,.22);
    }

    .tg-pause-button svg { width: 15px; height: 15px; }
    .tg-pause-button .tg-icon-play { display: none; }
    .tg-pause-button.is-paused .tg-icon-pause { display: none; }
    .tg-pause-button.is-paused .tg-icon-play { display: block; }

    .tg-slider-viewport { overflow: hidden; }

    .tg-slider-track {
      display: flex;
      width: 100%;
      transition: transform .82s var(--tg-ease);
      will-change: transform;
    }

    html[dir="rtl"] .tg-slider-track { direction: ltr; }

    .tg-slide {
      flex: 0 0 100%;
      min-width: 100%;
      min-height: 700px;
      display: grid;
      grid-template-columns: minmax(430px, .88fr) minmax(560px, 1.12fr);
      align-items: center;
      gap: clamp(34px, 4vw, 70px);
      padding: 84px max(48px, calc((100vw - 1200px) / 2)) 92px;
      position: relative;
    }

    .tg-copy {
      max-width: 650px;
      position: relative;
      z-index: 4;
    }

    html[dir="rtl"] .tg-copy {
      direction: rtl;
      text-align: right;
    }

    html[dir="rtl"] .tg-slide {
      grid-template-columns: minmax(560px, 1.12fr) minmax(430px, .88fr);
    }

    .tg-reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .7s var(--tg-ease), transform .8s var(--tg-ease);
    }

    .tg-slide.is-active .tg-reveal { opacity: 1; transform: translateY(0); }
    .tg-slide.is-active .tg-reveal:nth-child(1) { transition-delay: .08s; }
    .tg-slide.is-active .tg-reveal:nth-child(2) { transition-delay: .16s; }
    .tg-slide.is-active .tg-reveal:nth-child(3) { transition-delay: .24s; }
    .tg-slide.is-active .tg-reveal:nth-child(4) { transition-delay: .32s; }

    .tg-eyebrow {
      width: max-content;
      max-width: 100%;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 22px;
      padding: 9px 15px;
      border: 1px solid rgba(55,139,149,.19);
      border-radius: 999px;
      color: var(--tg-primary-deep);
      background: rgba(255,255,255,.78);
      box-shadow: 0 10px 28px rgba(15,23,42,.05);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .085em;
      text-transform: uppercase;
      backdrop-filter: blur(12px);
    }

    html[dir="rtl"] .tg-eyebrow { letter-spacing: 0; text-transform: none; }

    .tg-eyebrow-dot {
      width: 8px;
      height: 8px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--tg-secondary);
      box-shadow: 0 0 0 6px rgba(245,131,61,.11);
    }

    .tg-title {
      max-width: 660px;
      margin: 0;
      color: var(--tg-ink);
      font-size: clamp(48px, 4.6vw, 76px);
      line-height: .99;
      letter-spacing: -.058em;
      font-weight: 900;
      text-wrap: balance;
    }

    html[dir="rtl"] .tg-title {
      line-height: 1.12;
      letter-spacing: -.025em;
    }

    .tg-title .tg-teal { color: var(--tg-primary-dark); }
    .tg-title .tg-orange { color: var(--tg-secondary); }

    .tg-description {
      max-width: 620px;
      margin: 24px 0 0;
      color: var(--tg-muted);
      font-size: clamp(16px, 1.25vw, 19px);
      line-height: 1.82;
      font-weight: 500;
      text-wrap: pretty;
    }

    .tg-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 32px;
    }

    .tg-button {
      min-height: 50px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 13px 21px;
      border: 1px solid transparent;
      border-radius: 14px;
      text-decoration: none;
      font-size: 14px;
      font-weight: 900;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .tg-button:hover { transform: translateY(-2px); }

    .tg-button-primary {
      color: #fff;
      background: linear-gradient(135deg, var(--tg-primary), var(--tg-primary-dark));
      box-shadow: 0 14px 32px rgba(55,139,149,.27);
    }

    .tg-button-primary:hover { box-shadow: 0 18px 40px rgba(55,139,149,.32); }

    .tg-button-secondary {
      color: var(--tg-text);
      border-color: var(--tg-line);
      background: rgba(255,255,255,.88);
      box-shadow: 0 12px 28px rgba(15,23,42,.06);
      backdrop-filter: blur(12px);
    }

    .tg-button-secondary:hover { border-color: rgba(55,139,149,.34); }

    .tg-button svg { width: 18px; height: 18px; }
    html[dir="rtl"] .tg-button svg { transform: scaleX(-1); }

    .tg-visual {
      width: 100%;
      max-width: 780px;
      min-height: 530px;
      justify-self: end;
      position: relative;
      opacity: 0;
      transform: translateY(20px) scale(.975);
      transition: opacity .78s var(--tg-ease), transform .9s var(--tg-ease);
    }

    .tg-slide.is-active .tg-visual {
      opacity: 1;
      transform: translateY(0) scale(1);
      transition-delay: .13s;
    }

    html[dir="rtl"] .tg-visual { justify-self: start; direction: rtl; }

    .tg-visual-shell {
      min-height: 530px;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(203,213,225,.84);
      border-radius: 30px;
      background: rgba(255,255,255,.82);
      box-shadow: 0 28px 70px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.96);
      backdrop-filter: blur(18px) saturate(130%);
    }

    .tg-visual-shell::before,
    .tg-visual-shell::after {
      content: "";
      position: absolute;
      pointer-events: none;
      border-radius: 50%;
    }

    .tg-visual-shell::before {
      width: 330px;
      height: 330px;
      top: -180px;
      right: -130px;
      background: rgba(55,139,149,.08);
    }

    .tg-visual-shell::after {
      width: 280px;
      height: 280px;
      bottom: -155px;
      left: -105px;
      background: rgba(245,131,61,.07);
    }

    .tg-panel {
      position: absolute;
      z-index: 4;
      border: 1px solid rgba(219,229,232,.96);
      border-radius: 22px;
      background: rgba(255,255,255,.94);
      box-shadow: var(--tg-card-shadow);
    }

    .tg-panel-kicker {
      color: var(--tg-muted);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    html[dir="rtl"] .tg-panel-kicker { letter-spacing: 0; text-transform: none; }

    .tg-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 11px;
      border: 1px solid rgba(55,139,149,.17);
      border-radius: 999px;
      color: var(--tg-primary-dark);
      background: var(--tg-primary-soft);
      font-size: 9px;
      font-weight: 900;
    }

    .tg-chip::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--tg-success);
      box-shadow: 0 0 0 4px rgba(152,206,68,.13);
    }

    /* Slide 1 */
    .tg-intelligence-shell { padding: 28px; }

    .tg-intelligence-head {
      position: relative;
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .tg-intelligence-head strong {
      display: block;
      margin-top: 5px;
      color: var(--tg-ink);
      font-size: 18px;
    }

    .tg-metric-row {
      position: relative;
      z-index: 4;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      margin-top: 16px;
      max-width: 400px;
    }

    .tg-metric-card {
      min-height: 82px;
      display: grid;
      grid-template-columns: 40px 1fr;
      align-items: center;
      gap: 10px;
      padding: 13px 15px;
      position: relative;
      isolation: isolate;
      overflow: hidden;
      border-radius: 14px;
      box-shadow: var(--tg-card-shadow);
    }

    .tg-metric-card::before {
      content: "";
      position: absolute;
      z-index: -2;
      inset: 10px -10px -10px 12px;
      border-radius: 24px 14px 24px 14px;
      transform: rotate(-2.5deg);
      pointer-events: none;
    }

    .tg-metric-card::after {
      content: "";
      position: absolute;
      z-index: -1;
      width: 54px;
      height: 54px;
      right: -14px;
      top: -15px;
      border-radius: 18px;
      transform: rotate(12deg);
      pointer-events: none;
    }

    html[dir="rtl"] .tg-metric-card::after {
      right: auto;
      left: -14px;
      transform: rotate(-12deg);
    }

    .tg-metric-card.primary {
      color: #fff;
      background: linear-gradient(135deg, var(--tg-primary-dark), #68adb5);
    }

    .tg-metric-card.primary::before {
      background: linear-gradient(135deg, rgba(55,139,149,.22), rgba(104,173,181,.08));
      border: 1px solid rgba(55,139,149,.16);
    }

    .tg-metric-card.primary::after {
      background: rgba(55,139,149,.12);
      border: 1px solid rgba(55,139,149,.14);
    }

    .tg-metric-card.secondary {
      color: var(--tg-secondary-dark);
      border: 1px solid #f1d6c3;
      background: rgba(255,255,255,.92);
    }

    .tg-metric-card.secondary::before {
      background: linear-gradient(135deg, rgba(245,131,61,.20), rgba(255,242,234,.10));
      border: 1px solid rgba(245,131,61,.16);
      transform: rotate(2.5deg);
    }

    .tg-metric-card.secondary::after {
      background: rgba(245,131,61,.11);
      border: 1px solid rgba(245,131,61,.14);
    }

    .tg-metric-icon {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: rgba(255,255,255,.16);
    }

    .tg-metric-card.secondary .tg-metric-icon { background: var(--tg-secondary-soft); }
    .tg-metric-icon svg { width: 20px; height: 20px; }

    .tg-metric-label { display: block; font-size: 9px; font-weight: 800; opacity: .88; }
    .tg-metric-number { display: block; margin-top: 4px; font-size: 24px; line-height: 1; font-weight: 900; letter-spacing: -.045em; }

    .tg-coverage-panel {
      left: 28px;
      right: 28px;
      bottom: 28px;
      min-height: 286px;
      display: grid;
      grid-template-columns: 210px 1fr;
      align-items: center;
      gap: 26px;
      padding: 24px;
      border: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .tg-donut-wrap { display: grid; place-items: center; }

    .tg-donut {
      width: 174px;
      height: 174px;
      display: grid;
      place-items: center;
      position: relative;
      border-radius: 50%;
      background: conic-gradient(
        var(--tg-primary-dark) 0 36%,
        #68adb5 36% 63%,
        var(--tg-secondary) 63% 79%,
        #f7b083 79% 89%,
        #7d94a5 89% 96%,
        #c7d3da 96% 100%
      );
      box-shadow: 0 16px 34px rgba(15,23,42,.10);
    }

    .tg-donut::before {
      content: "";
      width: 112px;
      height: 112px;
      position: absolute;
      border-radius: 50%;
      background: #fff;
      box-shadow: inset 0 0 0 1px rgba(219,229,232,.9);
    }

    .tg-donut-center { position: relative; z-index: 2; text-align: center; }
    .tg-donut-center strong { display: block; color: var(--tg-ink); font-size: 30px; line-height: 1; }
    .tg-donut-center span { display: block; margin-top: 7px; color: var(--tg-muted); font-size: 9px; font-weight: 900; }

    .tg-coverage-title { margin: 0 0 15px; color: var(--tg-ink); font-size: 14px; font-weight: 900; }
    .tg-legend { display: grid; gap: 10px; }
    .tg-legend-row { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 9px; color: var(--tg-text); font-size: 10.5px; font-weight: 800; }
    .tg-legend-dot { width: 8px; height: 8px; border-radius: 50%; }
    .tg-legend-row strong { color: var(--tg-ink); font-size: 11px; }

    /* Slide 2 */
    .tg-alert-shell { min-height: 530px; }

    .tg-alert-orbit {
      position: absolute;
      z-index: 1;
      width: 325px;
      height: 325px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border: 1px dashed rgba(55,139,149,.25);
      border-radius: 50%;
    }

    .tg-alert-orbit::before {
      content: "";
      position: absolute;
      inset: 42px;
      border: 1px solid rgba(245,131,61,.13);
      border-radius: 50%;
    }

    .tg-alert-core {
      width: 244px;
      min-height: 286px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 22px;
      border: 2px solid rgba(55,139,149,.78);
      text-align: center;
    }

    .tg-alert-core h3 { margin: 0; color: var(--tg-primary-deep); font-size: 15px; }

    .tg-alert-stat-stack { display: grid; gap: 11px; margin-top: 16px; }

    .tg-alert-stat {
      min-height: 78px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 13px 15px;
      border-radius: 14px;
      text-align: start;
    }

    .tg-alert-stat.primary { color: #fff; background: linear-gradient(135deg, var(--tg-primary-dark), #68adb5); }
    .tg-alert-stat.secondary { color: var(--tg-secondary-dark); border: 1px solid #f2d4bf; background: var(--tg-secondary-soft); }
    .tg-alert-stat strong { font-size: 29px; line-height: 1; letter-spacing: -.04em; }
    .tg-alert-stat span { margin-top: 7px; font-size: 9px; line-height: 1.35; font-weight: 900; }

    .tg-feature-node {
      width: 148px;
      min-height: 92px;
      position: absolute;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 14px;
      border: 1px solid var(--tg-line);
      border-radius: 17px;
      color: var(--tg-text);
      background: #fff;
      box-shadow: var(--tg-card-shadow);
      font-size: 11px;
      line-height: 1.3;
      font-weight: 900;
    }

    .tg-feature-icon {
      width: 37px;
      height: 37px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: var(--tg-primary-dark);
      background: var(--tg-primary-soft);
    }

    .tg-feature-node.orange .tg-feature-icon { color: var(--tg-secondary-dark); background: var(--tg-secondary-soft); }
    .tg-feature-icon svg { width: 19px; height: 19px; }

    .tg-node-saved { left: 30px; top: 78px; }
    .tg-node-daily { left: 30px; bottom: 76px; }
    .tg-node-mobile { right: 30px; top: 78px; }
    .tg-node-tracking { right: 30px; bottom: 76px; }

    /* Slide 3 */
    .tg-region-shell { min-height: 530px; }

    .tg-region-heading {
      position: absolute;
      z-index: 5;
      top: 30px;
      left: 50%;
      width: 100%;
      padding: 0 20px;
      transform: translateX(-50%);
      text-align: center;
    }

    .tg-region-heading strong { display: block; color: var(--tg-ink); font-size: 20px; }
    .tg-region-heading span { display: block; margin-top: 6px; color: var(--tg-muted); font-size: 10px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
    html[dir="rtl"] .tg-region-heading span { letter-spacing: 0; text-transform: none; }

    .tg-map-art {
      position: absolute;
      z-index: 1;
      inset: 92px 38px 32px;
    }

    .tg-map-art svg { width: 100%; height: 100%; overflow: visible; }

    .tg-region-stat {
      width: 218px;
      min-height: 96px;
      position: absolute;
      z-index: 6;
      top: 93px;
      display: grid;
      grid-template-columns: 45px 1fr;
      align-items: center;
      gap: 12px;
      padding: 16px;
      border-radius: 18px;
      box-shadow: var(--tg-card-shadow);
    }

    .tg-region-stat.primary { left: 27px; color: #fff; background: linear-gradient(135deg, var(--tg-primary-dark), #68adb5); }
    .tg-region-stat.secondary { right: 27px; color: var(--tg-secondary-dark); border: 1px solid #f1d6c3; background: #fff; }

    .tg-region-stat-icon {
      width: 43px;
      height: 43px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: rgba(255,255,255,.16);
    }

    .tg-region-stat.secondary .tg-region-stat-icon { background: var(--tg-secondary-soft); }
    .tg-region-stat-icon svg { width: 23px; height: 23px; }
    .tg-region-stat strong { display: block; font-size: 23px; line-height: 1; letter-spacing: -.04em; }
    .tg-region-stat span { display: block; margin-top: 6px; font-size: 9px; line-height: 1.35; font-weight: 900; }

    .tg-market {
      width: 49px;
      height: 49px;
      position: absolute;
      z-index: 5;
      display: grid;
      place-items: center;
      border: 2px solid var(--tg-primary);
      border-radius: 50%;
      color: var(--tg-primary-dark);
      background: #fff;
      box-shadow: 0 12px 28px rgba(15,23,42,.10);
      font-size: 10px;
      font-weight: 900;
    }

    .tg-market.orange { border-color: var(--tg-secondary); color: var(--tg-secondary-dark); }
    .m-jo { left: 164px; top: 238px; }
    .m-sa { left: 258px; top: 188px; }
    .m-ae { left: 360px; top: 250px; }
    .m-iq { right: 75px; top: 230px; }
    .m-qa { left: 154px; top: 345px; }
    .m-sy { left: 263px; bottom: 67px; }
    .m-om { left: 365px; bottom: 57px; }
    .m-bh { right: 116px; bottom: 44px; }
    .m-ps { right: 60px; top: 338px; }

    .tg-region-footer {
      position: absolute;
      z-index: 7;
      left: 50%;
      bottom: 20px;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 14px;
      border: 1px solid var(--tg-line);
      border-radius: 999px;
      color: var(--tg-muted);
      background: rgba(255,255,255,.94);
      box-shadow: 0 10px 24px rgba(15,23,42,.06);
      font-size: 9px;
      font-weight: 900;
      white-space: nowrap;
    }

    .tg-region-footer i { width: 7px; height: 7px; border-radius: 50%; background: var(--tg-primary); }
    .tg-region-footer i:nth-child(2) { background: var(--tg-secondary); }

    /* Navigation */
    .tg-slider-nav {
      width: min(1200px, calc(100% - 64px));
      position: absolute;
      z-index: 30;
      left: 50%;
      bottom: 24px;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      pointer-events: none;
    }

    .tg-dots,
    .tg-arrows { display: flex; align-items: center; gap: 9px; pointer-events: auto; }

    .tg-dot {
      width: 9px;
      height: 9px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: #cbd5e1;
      cursor: pointer;
      transition: width .25s ease, background .25s ease, box-shadow .25s ease;
    }

    .tg-dot.is-active {
      width: 32px;
      background: var(--tg-primary);
      box-shadow: 0 0 0 5px rgba(55,139,149,.09);
    }

    .tg-slide-index {
      min-width: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 8px 12px;
      border: 1px solid var(--tg-line);
      border-radius: 999px;
      color: var(--tg-muted);
      background: rgba(255,255,255,.86);
      box-shadow: 0 10px 24px rgba(15,23,42,.05);
      backdrop-filter: blur(12px);
      pointer-events: auto;
      font-size: 10px;
      font-weight: 900;
    }

    .tg-slide-index strong { color: var(--tg-primary-dark); font-size: 12px; }
    .tg-slide-index i { width: 16px; height: 1px; background: #cbd5e1; }

    .tg-arrow {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 1px solid var(--tg-line);
      border-radius: 14px;
      color: var(--tg-text);
      background: rgba(255,255,255,.88);
      box-shadow: 0 10px 24px rgba(15,23,42,.06);
      backdrop-filter: blur(12px);
      cursor: pointer;
      transition: transform .2s ease, border-color .2s ease, color .2s ease;
    }

    .tg-arrow:hover { transform: translateY(-2px); border-color: rgba(55,139,149,.34); color: var(--tg-primary-dark); }
    .tg-arrow svg { width: 18px; height: 18px; }
    html[dir="rtl"] .tg-arrow svg { transform: scaleX(-1); }

    .tg-lang-button:focus-visible,
    .tg-pause-button:focus-visible,
    .tg-button:focus-visible,
    .tg-dot:focus-visible,
    .tg-arrow:focus-visible {
      outline: 3px solid rgba(55,139,149,.25);
      outline-offset: 3px;
    }

    @media (hover: hover) and (pointer: fine) {
      .tg-metric-card,
      .tg-feature-node,
      .tg-region-stat,
      .tg-panel { transition: transform .3s var(--tg-ease), box-shadow .3s ease, border-color .3s ease; }
      .tg-metric-card:hover,
      .tg-feature-node:hover,
      .tg-region-stat:hover { transform: translateY(-5px); box-shadow: 0 23px 50px rgba(15,23,42,.14); }
    }

    @media (max-width: 1180px) {
      .tg-slide {
        grid-template-columns: 1fr;
        gap: 34px;
        min-height: auto;
        padding: 94px 42px 100px;
      }

      .tg-copy { max-width: 850px; }
      .tg-title { max-width: 840px; font-size: clamp(48px, 7vw, 70px); }
      .tg-description { max-width: 800px; }
      .tg-visual { max-width: 800px; justify-self: center; }
      html[dir="rtl"] .tg-visual { justify-self: center; }
      .tg-slider-topbar,
      .tg-slider-nav { width: calc(100% - 84px); }
    }

    @media (max-width: 760px) {
      .tg-executive-slider { min-height: auto; }
      .tg-slider-topbar { width: calc(100% - 28px); top: 14px; }
      .tg-slider-nav { width: calc(100% - 28px); bottom: 16px; }

      .tg-slide { padding: 78px 14px 88px; gap: 26px; }
      .tg-copy { padding: 0 5px; }
      .tg-eyebrow { margin-bottom: 17px; font-size: 10px; }
      .tg-title { font-size: clamp(40px, 11vw, 54px); line-height: 1.03; }
      html[dir="rtl"] .tg-title { line-height: 1.16; }
      .tg-description { margin-top: 18px; font-size: 15px; line-height: 1.75; }
      .tg-actions { margin-top: 24px; align-items: stretch; }
      .tg-button { flex: 1 1 100%; }

      .tg-visual,
      .tg-visual-shell { min-height: 570px; }
      .tg-visual-shell { border-radius: 24px; }

      .tg-intelligence-shell { padding: 18px 14px; }
      .tg-metric-row { grid-template-columns: 1fr; gap: 10px; }
      .tg-metric-card { min-height: 82px; }
      .tg-coverage-panel { left: 14px; right: 14px; bottom: 16px; grid-template-columns: 1fr; gap: 13px; min-height: 290px; padding: 16px; }
      .tg-donut { width: 130px; height: 130px; }
      .tg-donut::before { width: 84px; height: 84px; }
      .tg-donut-center strong { font-size: 22px; }
      .tg-legend { grid-template-columns: 1fr 1fr; gap: 8px 13px; }

      .tg-alert-orbit { width: 250px; height: 250px; }
      .tg-alert-core { width: 190px; min-height: 258px; padding: 16px; }
      .tg-alert-stat strong { font-size: 24px; }
      .tg-feature-node { width: 116px; min-height: 82px; padding: 11px; gap: 8px; font-size: 9.5px; }
      .tg-feature-icon { width: 31px; height: 31px; }
      .tg-node-saved { left: 12px; top: 76px; }
      .tg-node-daily { left: 12px; bottom: 75px; }
      .tg-node-mobile { right: 12px; top: 76px; }
      .tg-node-tracking { right: 12px; bottom: 75px; }

      .tg-region-heading { top: 22px; }
      .tg-region-stat { width: 164px; min-height: 82px; grid-template-columns: 36px 1fr; gap: 8px; padding: 12px; }
      .tg-region-stat-icon { width: 36px; height: 36px; }
      .tg-region-stat strong { font-size: 19px; }
      .tg-region-stat span { font-size: 7.7px; }
      .tg-region-stat.primary { left: 9px; }
      .tg-region-stat.secondary { right: 9px; }
      .tg-map-art { inset: 130px 8px 55px; }
      .tg-market { width: 42px; height: 42px; font-size: 8.5px; }
      .m-jo { left: 55px; top: 260px; }
      .m-sa { left: 145px; top: 218px; }
      .m-ae { left: 236px; top: 266px; }
      .m-iq { right: 17px; top: 250px; }
      .m-qa { left: 40px; top: 364px; }
      .m-sy { left: 158px; bottom: 70px; }
      .m-om { left: 236px; bottom: 62px; }
      .m-bh { right: 58px; bottom: 45px; }
      .m-ps { right: 13px; top: 360px; }
      .tg-region-footer { font-size: 8px; }
    }

    @media (max-width: 420px) {
      .tg-control-cluster { transform: scale(.92); transform-origin: top right; }
      html[dir="rtl"] .tg-control-cluster { transform-origin: top left; }
      .tg-slide-index { display: none; }
      .tg-title { font-size: 40px; }
      .tg-visual, .tg-visual-shell { min-height: 600px; }
      .tg-feature-node { width: 107px; font-size: 8.8px; }
      .tg-alert-core { width: 170px; }
      .tg-region-stat { width: 150px; }
      .m-sa { left: 132px; }
      .m-ae { left: 218px; }
      .m-sy { left: 148px; }
      .m-om { left: 220px; }
    }



    /* =========================================================
       INTEGRATED 3D VISUALS
       No separate visual background: artwork floats in the slider
       ========================================================= */
    .tg-visual {
      perspective: 1900px;
      overflow: visible;
    }

    .tg-visual-shell {
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      transform-style: preserve-3d;
      transform: rotateX(.55deg) rotateY(-2.1deg);
      transition: transform .55s var(--tg-ease);
    }

    html[dir="rtl"] .tg-visual-shell {
      transform: rotateX(.55deg) rotateY(2.1deg);
    }

    .tg-visual-shell::before,
    .tg-visual-shell::after {
      display: none;
    }

    .tg-slide.is-active .tg-visual-shell {
      animation: tgIntegratedSceneFloat 7s ease-in-out infinite;
    }

    html[dir="rtl"] .tg-slide.is-active .tg-visual-shell {
      animation-name: tgIntegratedSceneFloatRtl;
    }

    .tg-panel,
    .tg-metric-card,
    .tg-feature-node,
    .tg-region-stat,
    .tg-market,
    .tg-intelligence-head,
    .tg-region-heading,
    .tg-map-art {
      backface-visibility: hidden;
      transform-style: preserve-3d;
    }

    /* Slide 1: layered executive dashboard */
    .tg-intelligence-head {
      transform: translate3d(18px, 2px, 82px);
      text-shadow: 0 1px 0 rgba(255,255,255,.7);
    }

    html[dir="rtl"] .tg-intelligence-head {
      transform: translate3d(-18px, 2px, 82px);
    }

    .tg-metric-row {
      transform-style: preserve-3d;
    }

    .tg-metric-card.primary {
      transform: translate3d(-4px, 3px, 48px) rotateZ(-.55deg);
      box-shadow: 0 28px 55px rgba(37,106,115,.24);
    }

    .tg-metric-card.secondary {
      transform: translate3d(4px, 9px, 38px) rotateZ(.55deg);
      box-shadow: 0 24px 48px rgba(15,23,42,.14);
    }

    .tg-coverage-panel {
      transform: translate3d(0, 0, 22px) rotateX(.25deg) rotateY(-.4deg);
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    html[dir="rtl"] .tg-coverage-panel {
      transform: translate3d(0, 0, 22px) rotateX(.25deg) rotateY(.4deg);
    }

    .tg-donut {
      transform: translateZ(28px) rotate(-1.5deg);
      filter: drop-shadow(0 18px 20px rgba(15,23,42,.12));
    }

    .tg-legend {
      transform: translateZ(18px);
    }

    /* Slide 2: floating alert system */
    .tg-alert-orbit {
      border-color: rgba(55,139,149,.34);
      transform: translate(-50%, -50%) rotateX(64deg) rotateZ(-8deg);
      box-shadow: 0 24px 45px rgba(55,139,149,.08);
    }

    .tg-alert-orbit::before {
      border-color: rgba(245,131,61,.20);
    }

    .tg-alert-core {
      transform: translate(-50%, -50%) translateZ(58px) rotateY(-.55deg);
      box-shadow: 0 34px 70px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.96);
    }

    html[dir="rtl"] .tg-alert-core {
      transform: translate(-50%, -50%) translateZ(58px) rotateY(.55deg);
    }

    .tg-node-saved {
      transform: translate3d(-2px, -3px, 44px) rotateZ(-.7deg) rotateY(1.2deg);
    }

    .tg-node-daily {
      transform: translate3d(3px, 4px, 30px) rotateZ(.65deg) rotateY(1deg);
    }

    .tg-node-mobile {
      transform: translate3d(2px, 2px, 48px) rotateZ(.7deg) rotateY(-1.2deg);
    }

    .tg-node-tracking {
      transform: translate3d(-3px, -1px, 34px) rotateZ(-.65deg) rotateY(-1deg);
    }

    /* Slide 3: map becomes the scene, not a boxed image */
    .tg-region-heading {
      transform: translateX(-50%) translateZ(88px);
      text-shadow: 0 2px 10px rgba(255,255,255,.9);
    }

    .tg-map-art {
      transform-origin: 50% 56%;
      transform: translateZ(10px) rotateX(36deg) rotateZ(-1deg) scale(1.045);
      filter: drop-shadow(0 28px 24px rgba(55,139,149,.16));
    }

    html[dir="rtl"] .tg-map-art {
      transform: translateZ(10px) rotateX(36deg) rotateZ(1deg) scale(1.045);
    }

    .tg-region-stat.primary {
      transform: translate3d(-3px, -2px, 54px) rotateZ(-.6deg) rotateY(1deg);
      box-shadow: 0 30px 58px rgba(37,106,115,.25);
    }

    .tg-region-stat.secondary {
      transform: translate3d(3px, 7px, 42px) rotateZ(.6deg) rotateY(-1deg);
      box-shadow: 0 25px 52px rgba(15,23,42,.14);
    }

    .tg-market {
      box-shadow: 0 18px 34px rgba(15,23,42,.15), inset 0 1px 0 rgba(255,255,255,.9);
    }

    .m-jo, .m-ae, .m-qa, .m-om, .m-ps {
      transform: translateZ(76px);
    }

    .m-sa, .m-iq, .m-sy, .m-bh {
      transform: translateZ(48px);
    }

    .tg-region-footer {
      transform: translateX(-50%) translateZ(70px);
      box-shadow: 0 18px 35px rgba(15,23,42,.10);
    }

    @media (hover: hover) and (pointer: fine) {
      .tg-visual:hover .tg-visual-shell {
        transform: rotateX(0deg) rotateY(-1deg) translateY(-3px);
        animation-play-state: paused;
      }

      html[dir="rtl"] .tg-visual:hover .tg-visual-shell {
        transform: rotateX(0deg) rotateY(1deg) translateY(-3px);
      }

      .tg-metric-card.primary:hover {
        transform: translate3d(-4px, -2px, 62px) rotateZ(-.25deg);
      }

      .tg-metric-card.secondary:hover {
        transform: translate3d(4px, 7px, 52px) rotateZ(.25deg);
      }

      .tg-feature-node:hover,
      .tg-region-stat:hover {
        filter: brightness(1.015);
      }
    }






    @keyframes tgIntegratedSceneFloat {
      0%, 100% { transform: rotateX(.55deg) rotateY(-2.1deg) translateY(0); }
      50% { transform: rotateX(.25deg) rotateY(-1.35deg) translateY(-5px); }
    }

    @keyframes tgIntegratedSceneFloatRtl {
      0%, 100% { transform: rotateX(.55deg) rotateY(2.1deg) translateY(0); }
      50% { transform: rotateX(.25deg) rotateY(1.35deg) translateY(-5px); }
    }

    @media (max-width: 760px) {
      .tg-visual-shell,
      html[dir="rtl"] .tg-visual-shell {
        transform: rotateX(0deg) rotateY(0deg);
      }

      .tg-slide.is-active .tg-visual-shell,
      html[dir="rtl"] .tg-slide.is-active .tg-visual-shell {
        animation: none;
      }

      .tg-intelligence-head,
      html[dir="rtl"] .tg-intelligence-head {
        transform: translate3d(0, 0, 36px);
      }

      .tg-metric-card.primary {
        transform: translate3d(-2px, 0, 30px) rotateZ(-.25deg);
      }

      .tg-metric-card.secondary {
        transform: translate3d(2px, 0, 24px) rotateZ(.25deg);
      }

      .tg-coverage-panel,
      html[dir="rtl"] .tg-coverage-panel {
        transform: translate3d(0, 0, 14px);
      }

      .tg-alert-orbit {
        transform: translate(-50%, -50%) rotateX(67deg) rotateZ(-6deg);
      }

      .tg-alert-core,
      html[dir="rtl"] .tg-alert-core {
        transform: translate(-50%, -50%) translateZ(42px);
      }

      .tg-node-saved { transform: translate3d(0, 0, 26px) rotateZ(-.3deg); }
      .tg-node-daily { transform: translate3d(0, 0, 18px) rotateZ(.3deg); }
      .tg-node-mobile { transform: translate3d(0, 0, 28px) rotateZ(.3deg); }
      .tg-node-tracking { transform: translate3d(0, 0, 20px) rotateZ(-.3deg); }

      .tg-map-art,
      html[dir="rtl"] .tg-map-art {
        transform: translateZ(4px) rotateX(28deg) rotateZ(0deg) scale(1.02);
      }

      .tg-region-stat.primary {
        transform: translate3d(0, 0, 34px) rotateZ(-.3deg);
      }

      .tg-region-stat.secondary {
        transform: translate3d(0, 0, 28px) rotateZ(.3deg);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }
  

    /* =========================================================
       SLIDE 2 REFINEMENT: CLEAR CREATIVE ALERT ENGINE
       Replaces the unclear flattened orbit with a connected hub
       ========================================================= */
    .tg-alert-orbit { display: none !important; }

    .tg-alert-network {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: .96;
      filter: drop-shadow(0 10px 18px rgba(55,139,149,.08));
    }

    .tg-alert-network svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .tg-alert-path {
      fill: none;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-dasharray: 8 10;
      animation: tgAlertRoute 10s linear infinite;
    }

    .tg-alert-path.path-b,
    .tg-alert-path.path-d { animation-direction: reverse; }

    .tg-alert-route-dot {
      filter: drop-shadow(0 0 6px currentColor);
      opacity: .92;
    }

    .tg-alert-halo {
      width: 292px;
      height: 292px;
      position: absolute;
      z-index: 2;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.00) 0 43%, rgba(55,139,149,.09) 44% 45%, transparent 46%),
        radial-gradient(circle at 35% 28%, rgba(55,139,149,.13), transparent 34%),
        radial-gradient(circle at 68% 72%, rgba(245,131,61,.11), transparent 32%);
      border: 1px solid rgba(55,139,149,.13);
      box-shadow:
        0 0 0 18px rgba(255,255,255,.24),
        0 26px 64px rgba(55,139,149,.10);
      pointer-events: none;
    }

    .tg-alert-halo::before,
    .tg-alert-halo::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(55,139,149,.12);
    }

    .tg-alert-halo::before { inset: 28px; }
    .tg-alert-halo::after {
      inset: 58px;
      border-color: rgba(245,131,61,.14);
    }

    .tg-slide.is-active .tg-alert-halo {
      animation: tgAlertHaloBreath 4.8s ease-in-out infinite;
    }

    .tg-alert-core {
      position: absolute;
      width: 252px;
      height: 252px;
      min-height: 0;
      left: 50%;
      top: 50%;
      z-index: 6;
      transform: translate(-50%, -50%) translateZ(58px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px 19px 17px;
      overflow: visible;
      border: 1px solid rgba(255,255,255,.92);
      border-radius: 50%;
      background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(241,248,249,.92));
      box-shadow:
        0 34px 72px rgba(15,23,42,.16),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -18px 38px rgba(55,139,149,.045);
      text-align: center;
    }

    .tg-alert-live {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
      padding: 5px 9px;
      border: 1px solid rgba(55,139,149,.15);
      border-radius: 999px;
      color: var(--tg-primary-dark);
      background: rgba(234,244,245,.84);
      font-size: 8px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: .03em;
    }

    .tg-alert-live::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--tg-success);
      box-shadow: 0 0 0 4px rgba(152,206,68,.13);
      animation: tgAlertStatus 2.2s ease-in-out infinite;
    }

    html[dir="rtl"] .tg-alert-live { letter-spacing: 0; }

    .tg-alert-core-icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      margin-bottom: 8px;
      border-radius: 16px;
      color: #fff;
      background: linear-gradient(145deg, var(--tg-primary), var(--tg-primary-dark));
      box-shadow: 0 12px 25px rgba(55,139,149,.26);
      transform: rotate(-3deg);
    }

    html[dir="rtl"] .tg-alert-core-icon { transform: rotate(3deg); }
    .tg-alert-core-icon svg { width: 25px; height: 25px; }

    .tg-alert-core h3 {
      max-width: 190px;
      margin: 0;
      color: var(--tg-primary-deep);
      font-size: 14px;
      line-height: 1.2;
      font-weight: 900;
    }

    .tg-alert-stat-stack {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 11px;
    }

    .tg-alert-stat {
      min-height: 58px;
      align-items: center;
      padding: 9px 7px;
      border-radius: 13px;
      text-align: center;
      box-shadow: 0 9px 20px rgba(15,23,42,.06);
    }

    .tg-alert-stat.primary {
      color: #fff;
      background: linear-gradient(145deg, var(--tg-primary-dark), #68adb5);
    }

    .tg-alert-stat.secondary {
      color: var(--tg-secondary-dark);
      border: 1px solid rgba(245,131,61,.18);
      background: linear-gradient(145deg, rgba(255,255,255,.96), var(--tg-secondary-soft));
    }

    .tg-alert-stat strong { font-size: 21px; }
    .tg-alert-stat span { margin-top: 5px; font-size: 7.4px; line-height: 1.25; }

    .tg-alert-since {
      display: block;
      margin-top: 7px;
      color: var(--tg-muted);
      font-size: 7.5px;
      font-weight: 800;
    }

    .tg-feature-node {
      overflow: visible;
      border-color: rgba(219,229,232,.92);
      background: rgba(255,255,255,.90);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .tg-feature-node::after {
      content: "";
      position: absolute;
      z-index: -1;
      width: 38px;
      height: 38px;
      right: -10px;
      bottom: -10px;
      border-radius: 14px;
      background: rgba(55,139,149,.07);
      transform: rotate(12deg);
    }

    .tg-feature-node.orange::after { background: rgba(245,131,61,.08); }

    html[dir="rtl"] .tg-feature-node::after {
      right: auto;
      left: -10px;
      transform: rotate(-12deg);
    }

    @keyframes tgAlertRoute {
      to { stroke-dashoffset: -144; }
    }

    @keyframes tgAlertHaloBreath {
      0%,100% { transform: translate(-50%, -50%) scale(1); opacity: .88; }
      50% { transform: translate(-50%, -50%) scale(1.025); opacity: 1; }
    }

    @keyframes tgAlertStatus {
      0%,100% { transform: scale(1); box-shadow: 0 0 0 4px rgba(152,206,68,.13); }
      50% { transform: scale(1.08); box-shadow: 0 0 0 7px rgba(152,206,68,.04); }
    }

    @media (max-width: 760px) {
      .tg-alert-network { opacity: .72; }
      .tg-alert-halo { width: 236px; height: 236px; }
      .tg-alert-core {
        width: 202px;
        height: 202px;
        padding: 14px 13px 12px;
        transform: translate(-50%, -50%) translateZ(42px);
      }
      .tg-alert-live { margin-bottom: 6px; padding: 4px 7px; font-size: 6.8px; }
      .tg-alert-core-icon { width: 38px; height: 38px; margin-bottom: 6px; border-radius: 13px; }
      .tg-alert-core-icon svg { width: 20px; height: 20px; }
      .tg-alert-core h3 { max-width: 155px; font-size: 11px; }
      .tg-alert-stat-stack { gap: 6px; margin-top: 8px; }
      .tg-alert-stat { min-height: 48px; padding: 7px 5px; }
      .tg-alert-stat strong { font-size: 17px; }
      .tg-alert-stat span { font-size: 6.2px; }
      .tg-alert-since { margin-top: 5px; font-size: 6.4px; }
    }

    @media (max-width: 420px) {
      .tg-alert-halo { width: 218px; height: 218px; }
      .tg-alert-core { width: 188px; height: 188px; }
      .tg-alert-core h3 { font-size: 10.2px; }
      .tg-alert-stat strong { font-size: 16px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .tg-alert-path,
      .tg-alert-halo,
      .tg-alert-live::before { animation: none !important; }
      .tg-alert-route-dot { display: none; }
    }


    /* =========================================================
       FINAL EXECUTIVE POLISH
       Larger alert hub, distinctive regional KPI instruments,
       and subtle slide-specific animated background motifs
       ========================================================= */

    /* Each slide has its own restrained background signature. */
    .tg-slide::before,
    .tg-slide::after {
      content: "";
      position: absolute;
      z-index: 0;
      pointer-events: none;
      opacity: 0;
      transition: opacity .8s var(--tg-ease);
    }

    .tg-slide.is-active::before,
    .tg-slide.is-active::after { opacity: 1; }

    .tg-slide > .tg-copy,
    .tg-slide > .tg-visual {
      position: relative;
      z-index: 2;
    }

    /* Slide 1: quiet intelligence rings and a floating data tile. */
    .tg-slide:nth-child(1)::before {
      width: 560px;
      height: 560px;
      right: clamp(-150px, -7vw, -70px);
      top: 62px;
      border-radius: 50%;
      background: repeating-radial-gradient(
        circle,
        transparent 0 34px,
        rgba(55,139,149,.075) 35px 36px,
        transparent 37px 62px
      );
      mask-image: radial-gradient(circle, #000 12%, rgba(0,0,0,.88) 58%, transparent 76%);
      animation: tgSlideOneOrbit 26s linear infinite;
    }

    .tg-slide:nth-child(1)::after {
      width: 190px;
      height: 190px;
      right: 43%;
      bottom: 42px;
      border: 1px solid rgba(55,139,149,.10);
      border-radius: 42px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.34), rgba(55,139,149,.035)),
        repeating-linear-gradient(90deg, transparent 0 30px, rgba(55,139,149,.05) 31px 32px);
      transform: rotate(18deg);
      animation: tgSlideOneTile 12s ease-in-out infinite alternate;
    }

    /* Slide 2: expanding signal field behind the alert engine. */
    .tg-slide:nth-child(2)::before {
      width: 520px;
      height: 520px;
      right: clamp(-90px, 2vw, 26px);
      top: 88px;
      border-radius: 50%;
      background:
        radial-gradient(circle, transparent 0 31%, rgba(55,139,149,.075) 31.3% 31.7%, transparent 32% 43%, rgba(245,131,61,.065) 43.3% 43.7%, transparent 44% 56%, rgba(55,139,149,.05) 56.3% 56.7%, transparent 57%),
        conic-gradient(from 20deg, transparent 0 18%, rgba(55,139,149,.055) 20% 24%, transparent 26% 55%, rgba(245,131,61,.045) 58% 62%, transparent 65%);
      animation: tgSlideTwoSignal 9s ease-in-out infinite;
    }

    .tg-slide:nth-child(2)::after {
      width: 300px;
      height: 190px;
      right: 12%;
      bottom: 62px;
      opacity: .45;
      background-image: radial-gradient(circle, rgba(55,139,149,.20) 1.2px, transparent 1.5px);
      background-size: 24px 24px;
      mask-image: linear-gradient(135deg, transparent 8%, #000 48%, transparent 92%);
      animation: tgSlideTwoDots 18s linear infinite;
    }

    /* Slide 3: slow regional routes crossing the scene. */
    .tg-slide:nth-child(3)::before {
      width: 720px;
      height: 470px;
      right: -70px;
      top: 100px;
      border-radius: 46% 54% 50% 50%;
      background:
        radial-gradient(circle at 16% 74%, rgba(55,139,149,.14) 0 3px, transparent 4px),
        radial-gradient(circle at 43% 33%, rgba(245,131,61,.13) 0 3px, transparent 4px),
        radial-gradient(circle at 76% 66%, rgba(55,139,149,.12) 0 3px, transparent 4px),
        linear-gradient(24deg, transparent 0 35%, rgba(55,139,149,.045) 35.2% 35.6%, transparent 35.8% 60%, rgba(245,131,61,.04) 60.2% 60.6%, transparent 60.8%);
      border: 1px solid rgba(55,139,149,.045);
      transform: rotate(-4deg);
      animation: tgSlideThreeRoutes 16s ease-in-out infinite alternate;
    }

    .tg-slide:nth-child(3)::after {
      width: 250px;
      height: 250px;
      right: 7%;
      bottom: 18px;
      border-radius: 50%;
      background: repeating-conic-gradient(from 20deg, rgba(245,131,61,.055) 0 3deg, transparent 3deg 24deg);
      mask-image: radial-gradient(circle, transparent 0 48%, #000 49% 51%, transparent 52% 64%, #000 65% 66%, transparent 67%);
      animation: tgSlideThreeRadar 30s linear infinite;
    }

    /* Slightly larger and more confident alert engine. */
    .tg-alert-halo {
      width: 318px;
      height: 318px;
    }

    .tg-alert-core {
      width: 268px;
      height: 268px;
      padding: 21px 20px 18px;
    }

    .tg-alert-core h3 {
      max-width: 205px;
      font-size: 15px;
    }

    .tg-alert-core-icon {
      width: 50px;
      height: 50px;
    }

    .tg-alert-stat { min-height: 60px; }

    /* Slide 3 KPI cards become two distinct regional intelligence tools. */
    .tg-region-stat {
      width: 236px;
      min-height: 122px;
      top: 82px;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 13px;
      padding: 15px 16px;
      overflow: hidden;
      border-radius: 22px;
      isolation: isolate;
    }

    .tg-region-stat::before,
    .tg-region-stat::after {
      content: "";
      position: absolute;
      z-index: -1;
      pointer-events: none;
    }

    .tg-region-stat::before {
      width: 118px;
      height: 118px;
      right: -54px;
      top: -58px;
      border-radius: 34px;
      transform: rotate(18deg);
    }

    html[dir="rtl"] .tg-region-stat::before {
      right: auto;
      left: -54px;
      transform: rotate(-18deg);
    }

    .tg-region-stat::after {
      inset: auto 14px 10px 14px;
      height: 1px;
      background: linear-gradient(90deg, transparent, currentColor, transparent);
      opacity: .15;
    }

    .tg-region-stat.primary {
      left: 18px;
      color: #fff;
      border: 1px solid rgba(255,255,255,.36);
      background: linear-gradient(145deg, rgba(36,107,116,.98), rgba(82,157,166,.94));
    }

    .tg-region-stat.primary::before {
      background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.02));
    }

    .tg-region-stat.secondary {
      right: 18px;
      color: var(--tg-secondary-dark);
      border: 1px solid rgba(245,131,61,.24);
      background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(255,246,240,.94));
    }

    .tg-region-stat.secondary::before {
      background: linear-gradient(145deg, rgba(245,131,61,.15), rgba(245,131,61,.025));
    }

    .tg-region-stat-icon {
      display: grid !important;
      width: 46px;
      height: 46px;
      margin: 0 !important;
      border-radius: 15px;
    }

    .tg-region-stat.secondary .tg-region-stat-icon {
      border: 1px solid rgba(245,131,61,.13);
      background: rgba(255,255,255,.78);
      box-shadow: 0 9px 18px rgba(245,131,61,.09);
    }


    /* Isolate icon boxes from the generic .tg-region-stat span rules. */
    .tg-region-stat .tg-region-stat-icon {
      width: 48px !important;
      height: 48px !important;
      min-width: 48px;
      min-height: 48px;
      display: grid !important;
      place-items: center;
      align-self: start;
      justify-self: start;
      margin: 1px 0 0 !important;
      padding: 0 !important;
      border-radius: 15px;
      font-size: 0 !important;
      line-height: 0 !important;
      overflow: hidden;
    }

    .tg-region-stat.primary .tg-region-stat-icon {
      color: var(--tg-primary-dark);
      border: 1px solid rgba(255,255,255,.72);
      background: rgba(255,255,255,.94);
      box-shadow: 0 10px 22px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.9);
    }

    .tg-region-stat.secondary .tg-region-stat-icon {
      color: var(--tg-secondary-dark);
      border: 1px solid rgba(245,131,61,.20);
      background: rgba(255,247,241,.98);
      box-shadow: 0 10px 22px rgba(245,131,61,.13), inset 0 1px 0 rgba(255,255,255,.95);
    }

    .tg-region-stat .tg-region-stat-icon svg {
      width: 23px !important;
      height: 23px !important;
      display: block;
      margin: 0;
      overflow: visible;
    }

    .tg-region-stat-content {
      align-self: stretch;
      padding-top: 1px;
    }

    .tg-region-stat-content {
      display: block !important;
      min-width: 0;
      margin: 0 !important;
      font-size: inherit !important;
      line-height: normal !important;
      font-weight: inherit !important;
    }

    .tg-region-stat-kicker {
      display: block;
      margin: 0 0 5px;
      opacity: .76;
      font-size: 7.5px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: .09em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    html[dir="rtl"] .tg-region-stat-kicker {
      letter-spacing: 0;
      text-transform: none;
    }

    .tg-region-stat strong {
      display: block;
      margin: 0;
      font-size: 25px;
      line-height: 1;
    }

    .tg-region-stat-label {
      display: block !important;
      margin: 5px 0 0 !important;
      font-size: 8.2px !important;
      line-height: 1.3 !important;
      font-weight: 900 !important;
      opacity: .88;
    }

    .tg-region-mini-bars {
      height: 22px;
      display: flex !important;
      align-items: end;
      gap: 4px;
      margin: 8px 0 0 !important;
    }

    .tg-region-mini-bars i {
      width: 7px;
      display: block;
      border-radius: 5px 5px 2px 2px;
      background: rgba(255,255,255,.72);
      transform-origin: bottom;
      animation: tgRegionBars 2.8s ease-in-out infinite;
    }

    .tg-region-mini-bars i:nth-child(1) { height: 8px; animation-delay: -.4s; }
    .tg-region-mini-bars i:nth-child(2) { height: 15px; animation-delay: -.8s; }
    .tg-region-mini-bars i:nth-child(3) { height: 11px; animation-delay: -1.2s; }
    .tg-region-mini-bars i:nth-child(4) { height: 19px; animation-delay: -1.6s; }
    .tg-region-mini-bars i:nth-child(5) { height: 14px; animation-delay: -2s; }

    .tg-region-mini-network {
      width: 82px;
      height: 22px;
      position: relative;
      display: block !important;
      margin: 8px 0 0 !important;
      background:
        linear-gradient(14deg, transparent 0 18%, rgba(245,131,61,.22) 19% 21%, transparent 22% 44%, rgba(245,131,61,.18) 45% 47%, transparent 48%),
        linear-gradient(-16deg, transparent 0 34%, rgba(55,139,149,.16) 35% 37%, transparent 38% 64%, rgba(245,131,61,.18) 65% 67%, transparent 68%);
    }

    .tg-region-mini-network i {
      width: 7px;
      height: 7px;
      position: absolute;
      display: block;
      border: 2px solid #fff;
      border-radius: 50%;
      background: var(--tg-secondary);
      box-shadow: 0 4px 9px rgba(245,131,61,.22);
      animation: tgRegionNode 3.2s ease-in-out infinite;
    }

    .tg-region-mini-network i:nth-child(1) { left: 0; top: 10px; animation-delay: -.3s; }
    .tg-region-mini-network i:nth-child(2) { left: 20px; top: 2px; animation-delay: -.8s; }
    .tg-region-mini-network i:nth-child(3) { left: 38px; top: 12px; animation-delay: -1.3s; }
    .tg-region-mini-network i:nth-child(4) { left: 58px; top: 3px; animation-delay: -1.8s; }
    .tg-region-mini-network i:nth-child(5) { right: 0; top: 11px; animation-delay: -2.3s; }

    .tg-slide:nth-child(3).is-active .tg-map-art path:not(:first-child) {
      animation: tgMapRouteFlow 12s linear infinite;
    }

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

    @keyframes tgSlideOneTile {
      from { transform: translate3d(0,0,0) rotate(18deg); }
      to { transform: translate3d(22px,-16px,0) rotate(24deg); }
    }

    @keyframes tgSlideTwoSignal {
      0%,100% { transform: scale(.96) rotate(-3deg); opacity: .64; }
      50% { transform: scale(1.035) rotate(3deg); opacity: .9; }
    }

    @keyframes tgSlideTwoDots {
      to { background-position: 48px 24px; }
    }

    @keyframes tgSlideThreeRoutes {
      from { transform: translate3d(0,0,0) rotate(-4deg); }
      to { transform: translate3d(-24px,14px,0) rotate(1deg); }
    }

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

    @keyframes tgRegionBars {
      0%,100% { transform: scaleY(.72); opacity: .58; }
      50% { transform: scaleY(1.08); opacity: 1; }
    }

    @keyframes tgRegionNode {
      0%,100% { transform: scale(.88); opacity: .72; }
      50% { transform: scale(1.18); opacity: 1; }
    }

    @keyframes tgMapRouteFlow {
      to { stroke-dashoffset: -120; }
    }

    @media (max-width: 760px) {
      .tg-global-network { inset: -2% -24%; width: 148%; height: 104%; opacity: .42; }
      .tg-background-arc-a { width: 330px; height: 330px; left: -250px; top: 210px; opacity: .34; }
      .tg-background-arc-b { width: 270px; height: 270px; right: -190px; bottom: -70px; opacity: .34; }

      .tg-slide::before,
      .tg-slide::after { transform: scale(.72); opacity: .52; }

      .tg-slide:nth-child(1)::before { right: -250px; top: 330px; }
      .tg-slide:nth-child(1)::after { right: -30px; bottom: 56px; }
      .tg-slide:nth-child(2)::before { right: -210px; top: 390px; }
      .tg-slide:nth-child(2)::after { right: -40px; bottom: 70px; }
      .tg-slide:nth-child(3)::before { right: -300px; top: 420px; }
      .tg-slide:nth-child(3)::after { right: -65px; bottom: 42px; }

      .tg-alert-halo { width: 248px; height: 248px; }
      .tg-alert-core {
        width: 212px;
        height: 212px;
        padding: 14px 14px 12px;
      }

      .tg-alert-core h3 { max-width: 164px; font-size: 11.3px; }
      .tg-alert-core-icon { width: 40px; height: 40px; }
      .tg-alert-stat { min-height: 50px; }

      .tg-region-stat {
        width: 177px;
        min-height: 105px;
        top: 78px;
        grid-template-columns: 38px minmax(0,1fr);
        gap: 8px;
        padding: 11px 10px;
        border-radius: 17px;
      }

      .tg-region-stat.primary { left: 4px; }
      .tg-region-stat.secondary { right: 4px; }
      .tg-region-stat .tg-region-stat-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px;
        min-height: 38px;
        border-radius: 12px;
      }
      .tg-region-stat .tg-region-stat-icon svg {
        width: 19px !important;
        height: 19px !important;
      }
      .tg-region-stat-kicker { font-size: 5.9px; margin-bottom: 4px; }
      .tg-region-stat strong { font-size: 19px; }
      .tg-region-stat-label { font-size: 6.5px !important; margin-top: 4px !important; }
      .tg-region-mini-bars,
      .tg-region-mini-network { margin-top: 6px !important; transform: scale(.8); transform-origin: left center; }
      html[dir="rtl"] .tg-region-mini-bars,
      html[dir="rtl"] .tg-region-mini-network { transform-origin: right center; }
    }

    @media (max-width: 420px) {
      .tg-alert-halo { width: 232px; height: 232px; }
      .tg-alert-core { width: 198px; height: 198px; }
      .tg-region-stat { width: 158px; min-height: 101px; }
      .tg-region-stat-kicker { display: none; }
      .tg-region-mini-bars,
      .tg-region-mini-network { transform: scale(.72); }
    }

    @media (prefers-reduced-motion: reduce) {
      .tg-slide::before,
      .tg-slide::after,
      .tg-region-mini-bars i,
      .tg-region-mini-network i,
      .tg-slide:nth-child(3).is-active .tg-map-art path:not(:first-child),
      .tg-global-network,
      .tg-network-line,
      .tg-network-node,
      .tg-background-arc,
      .tg-executive-slider::before,
      .tg-executive-slider::after {
        animation: none !important;
      }
    }


    /* Center the single remaining alert statistic after the secondary card was removed. */
    .tg-alert-stat-stack {
      grid-template-columns: minmax(0, 138px);
      justify-content: center;
      justify-items: center;
    }

    .tg-alert-stat-stack > .tg-alert-stat {
      width: 100%;
    }

    @media (max-width: 760px) {
      .tg-alert-stat-stack {
        grid-template-columns: minmax(0, 120px);
      }
    }


    /* =========================================================
       FINAL RTL / CAROUSEL HARDENING
       Desktop AR: copy on the right, visual on the left.
       Stacked layouts retain copy-first reading order.
       ========================================================= */
    @media (min-width: 1181px) {
      .tg-slide > .tg-copy {
        grid-column: 1;
        grid-row: 1;
      }

      .tg-slide > .tg-visual {
        grid-column: 2;
        grid-row: 1;
      }

      html[dir="rtl"] .tg-slide > .tg-copy {
        grid-column: 2;
        justify-self: end;
        width: 100%;
      }

      html[dir="rtl"] .tg-slide > .tg-visual {
        grid-column: 1;
        justify-self: start;
      }
    }

    html[dir="rtl"] .tg-copy,
    html[dir="rtl"] .tg-description,
    html[dir="rtl"] .tg-title {
      text-align: right;
    }

    html[dir="rtl"] .tg-actions {
      justify-content: flex-start;
    }

    @media (max-width: 1180px) {
      .tg-slide > .tg-copy,
      .tg-slide > .tg-visual,
      html[dir="rtl"] .tg-slide > .tg-copy,
      html[dir="rtl"] .tg-slide > .tg-visual {
        grid-column: 1;
      }

      html[dir="rtl"] .tg-slide > .tg-copy {
        justify-self: stretch;
      }
    }

  


/* =====================================================
   PLANS PAGE – Additional Sections
   Reuses sd- prefix for plan cards (shared with subscription-details.css)
   pp- prefix for plans-page-specific sections
   ===================================================== */

/* ── Page Wrapper ── */
.pp-page { background: #edf4f5; }

/* ── Plans Section ── */
.pp-plans-section {
  padding: 100px 0 60px;
  background: linear-gradient(180deg, #edf4f5 0%, #f7fafb 100%);
}

.pp-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.pp-section-header {
  text-align: center;
  margin-bottom: 48px;
}

.pp-kicker {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html[dir="rtl"] .pp-kicker { letter-spacing: 0; text-transform: none; }

.pp-kicker--teal {
  color: var(--tg-primary-dark, #246b74);
  background: rgba(55,139,149,.08);
  border: 1px solid rgba(55,139,149,.15);
}

.pp-kicker--orange {
  color: #c85c1f;
  background: rgba(245,131,61,.08);
  border: 1px solid rgba(245,131,61,.15);
}

.pp-section-title {
  margin: 18px 0 12px;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -.03em;
}

html[dir="rtl"] .pp-section-title { letter-spacing: -.015em; }

.pp-section-desc {
  max-width: 680px;
  margin: 0 auto;
  color: #64748b;
  font-size: 16px;
  line-height: 1.7;
}

/* ── Duration Switcher ── */
.pp-duration-switcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto 90px;
  padding: 18px 28px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(219,229,232,.8);
  border-radius: 20px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(15,23,42,.05);
}

.pp-duration-info { display: flex; flex-direction: column; gap: 4px; }

.pp-duration-switcher__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tg-primary-dark, #246b74);
}

html[dir="rtl"] .pp-duration-switcher__label { letter-spacing: 0; text-transform: none; }

.pp-duration-result {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #334155;
  font-weight: 700;
}

.pp-duration-result__value { text-decoration: underline; text-underline-offset: 3px; }

.pp-discount-badge {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: #98ce44;
}

.pp-discount-badge:empty { display: none; }

.pp-duration-buttons {
  display: flex;
  gap: 0;
  border: 1px solid rgba(219,229,232,.9);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(247,250,251,.9);
}

.pp-duration-btn {
  min-height: 42px;
  padding: 10px 24px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}

.pp-duration-btn.is-active {
  color: #fff;
  background: var(--tg-primary-dark, #246b74);
  box-shadow: 0 4px 12px rgba(55,139,149,.2);
  border-radius: 12px;
}

/* ── Plan Cards Grid ── */
.pp-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.pp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 18px 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(219,229,232,.8);
  border-radius: 24px;
  box-shadow: 0 12px 32px rgba(15,23,42,.06);
  backdrop-filter: blur(8px);
  overflow: visible;
  isolation: isolate;
  transition: transform .3s ease, box-shadow .3s ease;
}

.pp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(15,23,42,.10);
}

.pp-card--basic {
  border-color: rgba(55,139,149,.12);
  box-shadow: 0 14px 36px rgba(55,139,149,.03);
  background: linear-gradient(135deg, rgba(55,139,149,.008) 0%, rgba(255,255,255,.98) 50%);
}

.pp-card--standard {
  border-color: rgba(245,131,61,.12);
  box-shadow: 0 14px 36px rgba(245,131,61,.03);
  background: linear-gradient(135deg, rgba(245,131,61,.008) 0%, rgba(255,255,255,.98) 50%);
}

.pp-card--premium {
  border-color: rgba(124,58,237,.12);
  box-shadow: 0 14px 36px rgba(124,58,237,.03);
  background: linear-gradient(135deg, rgba(124,58,237,.008) 0%, rgba(255,255,255,.98) 50%);
}

.pp-card__blob {
  position: absolute;
  top: -60px;
  right: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  opacity: .12;
  pointer-events: none;
}

html[dir="rtl"] .pp-card__blob { right: auto; left: -40px; }

.pp-card--basic .pp-card__blob { background: radial-gradient(circle, #378b95, transparent 70%); }
.pp-card--standard .pp-card__blob { background: radial-gradient(circle, #f5833d, transparent 70%); }
.pp-card--premium .pp-card__blob { background: radial-gradient(circle, #7c3aed, transparent 70%); }

.pp-card__recommended {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--tg-primary-dark, #246b74);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  border-radius: 0 0 12px 12px;
  border: 1px solid rgba(55,139,149,.18);
  border-top: none;
  box-shadow: 0 4px 14px rgba(15,23,42,.06);
}

.pp-card__recommended svg { width: 14px; height: 14px; color: var(--tg-secondary, #f5833d); }

.pp-tier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pp-tier-label {
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

html[dir="rtl"] .pp-tier-label { letter-spacing: 0; text-transform: none; }

.pp-tier-label--basic { color: var(--tg-primary-dark, #246b74); background: rgba(55,139,149,.08); border: 1px solid rgba(55,139,149,.12); }
.pp-tier-label--standard { color: #c85c1f; background: rgba(245,131,61,.08); border: 1px solid rgba(245,131,61,.12); }
.pp-tier-label--premium { color: #6d28d9; background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.12); }

.pp-tier-gem { width: 28px; height: 28px; }

.pp-plan-name {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 900;
  color: #0f172a;
}

.pp-plan-desc {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.6;
  color: #64748b;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Price Block */
.pp-price-block { margin-bottom: 20px; }

.pp-price-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 4px;
}

.pp-price-currency {
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  align-self: flex-start;
  padding-top: 6px;
  margin-right: 4px;
  letter-spacing: .02em;
}
html[dir="rtl"] .pp-price-currency {
  margin-right: 0;
  margin-left: 4px;
}

.pp-price-value {
  font-size: 48px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -.03em;
  line-height: 1;
}

.pp-price-period {
  display: inline;
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  margin-left: 4px;
}
html[dir="rtl"] .pp-price-period {
  margin-left: 0;
  margin-right: 4px;
}

.pp-price-total {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 16px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.pp-price-total--basic { color: var(--tg-primary-dark, #246b74); background: rgba(55,139,149,.06); border: 1px solid rgba(55,139,149,.1); }
.pp-price-total--standard { color: #c85c1f; background: rgba(245,131,61,.06); border: 1px solid rgba(245,131,61,.1); }
.pp-price-total--premium { color: #6d28d9; background: rgba(124,58,237,.06); border: 1px solid rgba(124,58,237,.1); }

.pp-price-total__amount { font-size: 13px; font-weight: 900; }
.pp-price-total__sep { opacity: .3; font-size: 14px; }
.pp-price-total__label { font-size: 10px; font-weight: 600; opacity: .8; }
.pp-price-total__sub { font-size: 10px; font-weight: 800; background: rgba(0,0,0,.05); padding: 2px 8px; border-radius: 6px; }

/* ─── Differentiated Card Sizing ─── */
.pp-card--standard {
  transform: translateY(-20px);
  margin-bottom: -20px;
  z-index: 2;
}
.pp-card--standard:hover {
  transform: translateY(-24px);
}
.pp-card--standard .pp-price-value { font-size: 52px; }

.pp-card--premium {
  padding-top: 20px;
  padding-bottom: 28px;
}
.pp-card--premium .pp-price-value { font-size: 44px; color: #4c1d95; }
.pp-card--premium .pp-price-currency { color: #7c3aed; }

/* Features */
.pp-card__divider {
  border: none;
  border-top: 1px solid rgba(219,229,232,.6);
  margin: 0 0 16px;
}

.pp-features-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

html[dir="rtl"] .pp-features-label { letter-spacing: 0; text-transform: none; }

.pp-features-label--basic { color: var(--tg-primary-dark, #246b74); }
.pp-features-label--standard { color: #c85c1f; }
.pp-features-label--premium { color: #6d28d9; }

.pp-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-grow: 1;
}

.pp-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #334155;
  padding: 7px 0;
  border-bottom: 1px solid rgba(226,232,240,.6);
}

.pp-feature-item:last-child { border-bottom: none; }

.pp-feature-item--disabled { opacity: .45; }

.pp-feature-check, .pp-feature-x {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  align-self: center;
}

.pp-feature-check--basic { color: var(--tg-primary, #378b95); }
.pp-feature-check--standard { color: #f5833d; }
.pp-feature-check--premium { color: #7c3aed; }
.pp-feature-x { color: #94a3b8; }

/* 2-line feature subtitle */
.pp-feature-item--2line { align-items: flex-start; }
.pp-feature-sub {
  display: block;
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
  color: #94a3b8;
  margin-top: 2px;
  line-height: 1.3;
}

/* 3-line feature (label / value + subtitle) */
.pp-feature-3line { align-items: flex-start; }
.pp-feature-3line > span {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 4px;
}
.pp-feature-3line > span > strong:first-child {
  width: 100%;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  line-height: 1.4;
  margin-bottom: 1px;
}
.pp-fv {
  font-size: 17px;
  font-weight: 900;
  color: #1e293b;
  line-height: 1.4;
  letter-spacing: -.02em;
}
.pp-feature-3line small {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  line-height: 1.4;
}

/* Select Button */
.pp-select-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  border: none;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  margin-top: 14px;
}

.pp-select-btn:hover { transform: translateY(-2px); }
.pp-select-btn svg { display: none !important; }
.pp-select-btn::after { content: none !important; display: none !important; }
html[dir="rtl"] .pp-select-btn svg { transform: scaleX(-1); }

.pp-select-btn--basic {
  color: #fff;
  background: linear-gradient(135deg, var(--tg-primary, #378b95), var(--tg-primary-dark, #246b74));
  box-shadow: 0 8px 20px rgba(55,139,149,.2);
}

.pp-select-btn--standard {
  color: #fff;
  background: linear-gradient(135deg, #f5833d, #c85c1f);
  box-shadow: 0 8px 20px rgba(245,131,61,.2);
}

.pp-select-btn--premium {
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  box-shadow: 0 8px 20px rgba(124,58,237,.2);
}

/* ── All Plans Include Section ── */
.pp-include-section {
  padding: 70px 0;
  background: linear-gradient(135deg, rgba(246,250,251,.95), rgba(255,253,251,.95));
  position: relative;
  overflow: hidden;
}

.pp-include-section::before {
  content: "";
  position: absolute;
  top: -80px;
  left: -80px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(55,139,149,.04);
  pointer-events: none;
}

.pp-divider-with-image {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
  margin-bottom: 20px;
}

.pp-divider-line {
  flex: 0 1 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(55,139,149,.2), transparent);
}

.pp-include-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}

.pp-include-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(219,229,232,.5);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15,23,42,.03);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.pp-include-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15,23,42,.07);
  border-color: rgba(55,139,149,.25);
}

.pp-include-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #378b95, #2a7a83);
  box-shadow: 0 3px 8px rgba(55,139,149,.25);
}

.pp-include-icon svg { width: 18px; height: 18px; }

.pp-include-card__title {
  margin: 0 0 3px;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.01em;
}

.pp-include-card__desc {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: #64748b;
}

/* ── CTA Banner Section ── */
.pp-cta-section {
  padding: 70px 0;
  background: linear-gradient(135deg, var(--tg-primary-dark, #246b74), var(--tg-primary, #378b95));
  text-align: center;
  position: relative;
  overflow: hidden;
}

.pp-cta-section::before,
.pp-cta-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.pp-cta-section::before {
  width: 300px;
  height: 300px;
  top: -100px;
  right: -80px;
  background: rgba(255,255,255,.05);
}

.pp-cta-section::after {
  width: 200px;
  height: 200px;
  bottom: -60px;
  left: -40px;
  background: rgba(245,131,61,.08);
}

.pp-cta-title {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 900;
}

.pp-cta-desc {
  max-width: 600px;
  margin: 0 auto 28px;
  color: rgba(255,255,255,.82);
  font-size: 16px;
  line-height: 1.7;
}

.pp-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 28px;
  border: none;
  border-radius: 14px;
  color: var(--tg-primary-dark, #246b74);
  background: #fff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15,23,42,.12);
  transition: transform .2s, box-shadow .2s;
}

.pp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,23,42,.16); }
.pp-btn-primary svg { width: 18px; height: 18px; }
html[dir="rtl"] .pp-btn-primary svg { transform: scaleX(-1); }

.pp-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 14px;
  color: #fff;
  background: rgba(255,255,255,.08);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform .2s, background .2s;
}

.pp-btn-secondary:hover { transform: translateY(-2px); background: rgba(255,255,255,.14); }

/* ↀↀ Responsive ↀↀ */
@media (max-width: 900px) {
  .pp-plans-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .pp-include-grid { grid-template-columns: repeat(2, 1fr); }
  .pp-duration-switcher { flex-direction: column; text-align: center; }
  .pp-duration-info { align-items: center; }
}

@media (max-width: 560px) {
  .pp-include-grid { grid-template-columns: 1fr; }
  .pp-card { padding: 24px 20px 20px; }
  .pp-price-value { font-size: 40px; }
}

/* ═══════════════ CUSTOMIZER — OPTION 4: SaaS DASHBOARD ═══════════════ */
.sd-customizer {
  margin-bottom: 4rem !important;
  position: relative !important;
  z-index: 20 !important;
  padding: 72px 0 56px !important;
  background: #f8fafb !important;
}

.sd-customizer__wrap {
  background: #ffffff !important;
  border-radius: 1.25rem !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 8px 32px rgba(15,23,42,.04) !important;
  border: 1px solid #e8eef0 !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Subtle corner accents (very faint) */
.sd-customizer__deco {
  position: absolute !important;
  width: 12rem !important;
  height: 12rem !important;
  pointer-events: none !important;
  opacity: 0.15 !important;
}
.sd-customizer__deco--tl {
  top: 0 !important; right: 0 !important;
  background: linear-gradient(to bottom left, rgba(55,139,149,.2), transparent) !important;
  border-bottom-left-radius: 100% !important;
}
[dir="rtl"] .sd-customizer__deco--tl { right: auto !important; left: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 100% !important; }
.sd-customizer__deco--br { bottom: 0 !important; left: 0 !important; background: linear-gradient(to top right, rgba(245,131,61,.15), transparent) !important; border-top-right-radius: 100% !important; }
[dir="rtl"] .sd-customizer__deco--br { left: auto !important; right: 0 !important; border-top-right-radius: 0 !important; border-top-left-radius: 100% !important; }
.sd-customizer__grid { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; align-items: stretch !important; position: relative !important; z-index: 10 !important; }
@media (min-width: 1024px) { .sd-customizer__grid { grid-template-columns: 1fr 400px !important; } }
.sd-cust-controls { display: flex !important; flex-direction: column !important; gap: 2rem !important; padding: 2.5rem !important; }
@media (min-width: 1024px) { .sd-cust-controls { padding: 2.5rem 3rem !important; } }
.sd-cust-kicker { font-size: 0.7rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; color: #378b95 !important; }
.sd-cust-title { font-size: 1.75rem !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #0f172a !important; margin-top: 0.25rem !important; line-height: 1.25 !important; }
.sd-cust-desc { font-size: 0.875rem !important; line-height: 1.65 !important; color: #64748b !important; max-width: 34rem !important; margin-top: 0.25rem !important; }
.sd-cust-step { display: flex !important; flex-direction: column !important; gap: 0.875rem !important; }
.sd-cust-step__header { display: flex !important; align-items: center !important; gap: 0.75rem !important; justify-content: space-between !important; flex-wrap: wrap !important; font-size: 0.8rem !important; font-weight: 800 !important; color: #0f172a !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }
.sd-cust-step__hint { font-size: 0.7rem !important; font-weight: 700 !important; color: #378b95 !important; background: rgba(55,139,149,.06) !important; padding: 0.25rem 0.625rem !important; border-radius: 6px !important; letter-spacing: 0.01em !important; }
.sd-cust-btn-grid { display: grid !important; gap: 0.5rem !important; }
.sd-cust-btn-grid--6 { grid-template-columns: repeat(3, 1fr) !important; }
@media (min-width: 640px) { .sd-cust-btn-grid--6 { grid-template-columns: repeat(6, 1fr) !important; } }
.sd-cust-btn-grid--3 { grid-template-columns: repeat(3, 1fr) !important; gap: 0.5rem !important; }
.sd-cust-btn { padding: 0.625rem 0.5rem !important; border-radius: 10px !important; border: 1.5px solid #e2e8f0 !important; background: #fff !important; font-size: 0.8125rem !important; font-weight: 700 !important; color: #475569 !important; cursor: pointer !important; text-align: center !important; transition: all 0.18s ease !important; line-height: 1.2 !important; height: auto !important; }
.sd-cust-btn:hover { border-color: #378b95 !important; color: #378b95 !important; background: rgba(55,139,149,.02) !important; }
.sd-cust-btn.is-active { background: #378b95 !important; border-color: #378b95 !important; color: #fff !important; box-shadow: 0 2px 8px rgba(55,139,149,.2) !important; }
.sd-cust-btn--enterprise { color: #64748b !important; }
.sd-cust-btn__sub { display: block !important; font-size: 0.6rem !important; font-weight: 700 !important; color: #f5833d !important; text-transform: uppercase !important; margin-top: 2px !important; }
.sd-cust-btn.is-active .sd-cust-btn__sub { color: rgba(255,255,255,.8) !important; }
.sd-cust-btn--history { padding: 0.875rem 0.75rem !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }
.sd-cust-btn--history .sd-cust-btn__sub { margin-top: 3px !important; }
.sd-u-btn, .sd-v-btn, .sd-h-btn { padding: 0.625rem 0.5rem !important; border-radius: 10px !important; border: 1.5px solid #e2e8f0 !important; background: #fff !important; font-size: 0.8125rem !important; font-weight: 700 !important; color: #475569 !important; cursor: pointer !important; text-align: center !important; transition: all 0.18s ease !important; line-height: 1.2 !important; }
.sd-u-btn:hover, .sd-v-btn:hover, .sd-h-btn:hover { border-color: #378b95 !important; color: #378b95 !important; }
.sd-u-btn.is-active, .sd-v-btn.is-active, .sd-h-btn.is-active { background: #378b95 !important; border-color: #378b95 !important; color: #fff !important; box-shadow: 0 2px 8px rgba(55,139,149,.2) !important; }
.sd-cust-duration { padding-top: 1rem !important; border-top: 1px solid #f1f5f9 !important; }
.sd-cust-duration__header { display: flex !important; justify-content: space-between !important; align-items: center !important; }
.sd-cust-duration__badge { font-size: 0.8125rem !important; background: #f1f5f9 !important; color: #0f172a !important; border: 1px solid #e2e8f0 !important; font-weight: 800 !important; padding: 0.3rem 0.875rem !important; border-radius: 8px !important; }
.sd-range-wrap { position: relative !important; padding-top: 0.75rem !important; padding-bottom: 0.5rem !important; }
.sd-range-wrap input[type=range] { width: 100% !important; -webkit-appearance: none !important; appearance: none !important; background: transparent !important; cursor: pointer !important; }
.sd-range-wrap input[type=range]::-webkit-slider-runnable-track { width: 100% !important; height: 6px !important; background: #e2e8f0 !important; border-radius: 3px !important; }
.sd-range-wrap input[type=range]::-webkit-slider-thumb { -webkit-appearance: none !important; height: 20px !important; width: 20px !important; border-radius: 50% !important; background: #378b95 !important; cursor: pointer !important; margin-top: -7px !important; box-shadow: 0 2px 8px rgba(55,139,149,.3) !important; border: 3px solid #fff !important; }
.sd-range-wrap input[type=range]::-moz-range-track { width: 100% !important; height: 6px !important; background: #e2e8f0 !important; border-radius: 3px !important; border: none !important; }
.sd-range-wrap input[type=range]::-moz-range-thumb { height: 20px !important; width: 20px !important; border-radius: 50% !important; background: #378b95 !important; cursor: pointer !important; box-shadow: 0 2px 8px rgba(55,139,149,.3) !important; border: 3px solid #fff !important; }
.sd-range-labels { display: flex !important; justify-content: space-between !important; font-size: 0.7rem !important; color: #94a3b8 !important; font-weight: 700 !important; padding-inline: 2px !important; margin-top: 0.75rem !important; }
.sd-cust-result { position: relative !important; background: #fafcfd !important; border-left: 4px solid #378b95 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; padding: 2.5rem 2rem !important; min-height: 480px !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; }
@media (max-width: 1023px) { .sd-cust-result { border-left: none !important; border-top: 4px solid #378b95 !important; min-height: auto !important; } }
[dir="rtl"] .sd-cust-result { border-left: none !important; border-right: 4px solid #378b95 !important; }
.sd-cust-result__blob { display: none !important; }
.sd-cust-result__top { position: relative !important; z-index: 10 !important; }
.sd-cust-result__header { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 0.25rem !important; }
.sd-cust-result__label { font-size: 0.65rem !important; font-weight: 800 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #94a3b8 !important; }
.sd-cust-result__badge { font-size: 0.65rem !important; font-weight: 800 !important; padding: 0.2rem 0.625rem !important; border-radius: 6px !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; }
.sd-cust-result__title { font-size: 1.625rem !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #0f172a !important; margin-top: 1rem !important; }
.sd-cust-result__desc { font-size: 0.8rem !important; color: #64748b !important; line-height: 1.6 !important; margin-top: 0.5rem !important; }
.sd-cust-summary { border-top: 1px solid #e8eef0 !important; margin-top: 1.5rem !important; margin-block: 0 !important; padding-top: 1.25rem !important; display: flex !important; flex-direction: column !important; gap: 0.75rem !important; font-size: 0.8125rem !important; font-weight: 600 !important; }
.sd-cust-summary__item { display: flex !important; align-items: center !important; gap: 0.625rem !important; }
.sd-cust-summary__check { width: 18px !important; height: 18px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: rgba(55,139,149,.1) !important; color: #378b95 !important; font-size: 0.7rem !important; font-weight: 900 !important; flex-shrink: 0 !important; }
.sd-cust-summary__text { color: #475569 !important; }
.sd-cust-pricing { padding-top: 1.25rem !important; border-top: 1px solid #e8eef0 !important; margin-top: auto !important; display: flex !important; flex-direction: column !important; gap: 1rem !important; position: relative !important; z-index: 10 !important; }
.sd-cust-pricing__label { font-size: 0.65rem !important; color: #94a3b8 !important; text-transform: uppercase !important; font-weight: 800 !important; letter-spacing: 0.08em !important; margin-bottom: 0.125rem !important; }
.sd-cust-pricing__value-row { display: flex !important; align-items: baseline !important; gap: 6px !important; }
.sd-cust-pricing__total { font-size: 2.5rem !important; font-weight: 900 !important; color: #0f172a !important; letter-spacing: -0.03em !important; line-height: 1 !important; }
.sd-cust-pricing__currency { font-size: 0.85rem !important; font-weight: 700 !important; color: #94a3b8 !important; align-self: flex-end !important; padding-bottom: 4px !important; }
.sd-cust-pricing__monthly { font-size: 0.75rem !important; color: #378b95 !important; font-weight: 700 !important; margin-top: 0.25rem !important; }
.sd-cust-action-btn { display: inline-flex !important; justify-content: center !important; align-items: center !important; gap: 0.625rem !important; background: #378b95 !important; color: #fff !important; font-weight: 800 !important; font-size: 0.875rem !important; padding: 0.875rem 1.75rem !important; border-radius: 10px !important; border: none !important; cursor: pointer !important; transition: all 0.2s !important; box-shadow: 0 4px 12px rgba(55,139,149,.2) !important; width: 100% !important; text-align: center !important; margin-top: 0.75rem !important; position: relative !important; overflow: hidden !important; height: auto !important; min-height: 48px !important; line-height: 1.4 !important; }
.sd-cust-action-btn::before { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent) !important; transition: left 0.5s !important; }
.sd-cust-action-btn:hover::before { left: 100% !important; }
.sd-cust-action-btn:active { transform: scale(0.98) !important; }
.sd-cust-action-btn:hover { background: #2d7a83 !important; box-shadow: 0 6px 18px rgba(55,139,149,.28) !important; transform: translateY(-1px) !important; }
.sd-cust-action-btn svg { width: 1.125rem !important; height: 1.125rem !important; transition: transform 0.2s !important; }
.sd-cust-action-btn:hover svg { transform: translateX(3px) !important; }
[dir="rtl"] .sd-cust-action-btn:hover svg { transform: translateX(-3px) !important; }

/* ═══════════ COMPARISON TABLE ═══════════ */
.pp-compare-section {
  padding: 120px 0 60px;
  background: linear-gradient(180deg, var(--tg-soft, #f7fafb) 0%, #fff 100%);
}

.pp-compare-card {
  background: var(--tg-surface, #ffffff);
  border-radius: 16px;
  border: 1px solid var(--tg-line, #dbe5e8);
  box-shadow: var(--tg-card-shadow, 0 18px 46px rgba(15,23,42,.10));
  overflow: hidden;
}

.pp-compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pp-compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 13px;
}

/* ── Column Headers ── */
.pp-ct-feature-th {
  width: 260px;
  min-width: 200px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 2px solid var(--tg-line, #dbe5e8);
  padding: 12px 18px;
}
[dir="rtl"] .pp-ct-feature-th { text-align: right; }

.pp-ct-plan-th {
  text-align: center;
  padding: 14px 8px;
  border-bottom: 2px solid var(--tg-line, #dbe5e8);
  vertical-align: middle;
  position: relative;
}

.pp-ct-plan-th--free { background: linear-gradient(180deg, rgba(148,163,184,.06) 0%, rgba(148,163,184,.02) 100%); }
.pp-ct-plan-th--basic { background: linear-gradient(180deg, rgba(55,136,149,.06) 0%, rgba(55,136,149,.02) 100%); }
.pp-ct-plan-th--standard { background: linear-gradient(180deg, rgba(245,131,61,.08) 0%, rgba(245,131,61,.02) 100%); }
.pp-ct-plan-th--premium { background: linear-gradient(180deg, rgba(109,38,199,.06) 0%, rgba(109,38,199,.02) 100%); }

.pp-ct-plan-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.pp-ct-plan-icon svg { width: 22px; height: 22px; }
.pp-ct-plan-icon--img { background: transparent !important; }
.pp-ct-plan-icon--img img { width: 28px; height: 28px; object-fit: contain; }
.pp-ct-plan-th--basic .pp-ct-plan-icon:not(.pp-ct-plan-icon--img) { background: rgba(55,136,149,.1); color: var(--tg-primary, #378b95); }
.pp-ct-plan-th--standard .pp-ct-plan-icon:not(.pp-ct-plan-icon--img) { background: rgba(245,131,61,.1); color: var(--tg-secondary, #f5833d); }
.pp-ct-plan-th--premium .pp-ct-plan-icon:not(.pp-ct-plan-icon--img) { background: rgba(109,38,199,.1); color: #6D26C7; }

.pp-ct-plan-label {
  display: block;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -.02em;
}
.pp-ct-plan-th--free .pp-ct-plan-label { color: #64748b; }
.pp-ct-plan-th--basic .pp-ct-plan-label { color: var(--tg-primary, #378b95); }
.pp-ct-plan-th--standard .pp-ct-plan-label { color: var(--tg-secondary, #f5833d); }
.pp-ct-plan-th--premium .pp-ct-plan-label { color: #6D26C7; }

.pp-ct-val--free {
  color: #94a3b8;
  font-weight: 600;
}

.pp-ct-popular-tag {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 6px;
  background: var(--tg-secondary-soft, #fff2e9);
  color: var(--tg-secondary-dark, #c85c1f);
}

/* ── Body Rows ── */
.pp-ct-feature {
  text-align: left;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 12.5px;
  font-style: italic;
  color: var(--tg-text, #334155);
  white-space: nowrap;
  border-bottom: 1px solid #f1f5f9;
}
[dir="rtl"] .pp-ct-feature { text-align: right; }

.pp-ct-fi {
  width: 16px;
  text-align: center;
  color: var(--tg-primary, #378b95);
  opacity: .55;
  margin-inline-end: 8px;
  font-size: 13px;
}

.pp-ct-val {
  text-align: center;
  padding: 10px 10px;
  font-weight: 400;
  font-size: 13px;
  color: var(--tg-ink, #0f172a);
  border-bottom: 1px solid #f1f5f9;
}

.pp-ct-val strong {
  font-weight: 900;
  font-size: 15px;
  color: #0f172a;
  letter-spacing: -.02em;
}

.pp-ct-val small {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  letter-spacing: .01em;
}

.pp-ct-val--pop {
  background: rgba(245,131,61,.03);
  border-inline-start: 2px solid rgba(245,131,61,.15);
  border-inline-end: 2px solid rgba(245,131,61,.15);
}

.pp-compare-table tbody tr:hover {
  background: rgba(55,139,149,.03);
  transition: background .2s ease;
}

.pp-compare-table tbody tr:nth-child(even) {
  background: rgba(248,250,252,.6);
}
.pp-compare-table tbody tr:nth-child(even):hover {
  background: rgba(55,139,149,.03);
}

/* ── Check / Cross Icons ── */
.pp-ct-yes {
  color: var(--tg-success, #98CE44);
  font-size: 18px;
}
.pp-ct-no {
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 500;
}
.pp-ct-no::before {
  content: '\2013';
  display: inline-block;
  margin-inline-end: 3px;
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .pp-ct-feature-th { width: 140px; min-width: 140px; position: sticky; left: 0; z-index: 2; }
  [dir="rtl"] .pp-ct-feature-th { left: auto; right: 0; }
  .pp-ct-feature { position: sticky; left: 0; z-index: 2; background: #fff; font-size: 13px; padding: 12px 14px; }
  [dir="rtl"] .pp-ct-feature { left: auto; right: 0; }
  .pp-ct-val { font-size: 13px; padding: 12px 10px; }
}

/* ═══════════ FAQ SECTION ═══════════ */
.pp-faq-section {
  padding: 60px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.pp-faq-grid {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pp-faq-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  overflow: hidden;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.pp-faq-item:hover, .pp-faq-item[open] {
  box-shadow: 0 8px 24px -8px rgba(16,43,63,0.1);
  border-color: #378895;
}
.pp-faq-q {
  padding: 1.25rem 1.5rem;
  font-weight: 800;
  font-size: 1rem;
  color: #102B3F;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  user-select: none;
}
.pp-faq-q::-webkit-details-marker { display: none; }
.pp-faq-q::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: #378895;
  transition: transform 0.3s;
  flex-shrink: 0;
}
.pp-faq-item[open] .pp-faq-q::after {
  content: '\2212';
  transform: rotate(180deg);
}
.pp-faq-a {
  padding: 0 1.5rem 1.25rem;
  color: #64748b;
  line-height: 1.8;
  font-size: 0.95rem;
}

/* ═══════════ TRUST SIGNALS ═══════════ */
.pp-trust-section {
  padding: 60px 0;
  background: linear-gradient(135deg, #102B3F 0%, #056577 50%, #378895 100%);
  color: #ffffff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pp-trust-content { position: relative; z-index: 2; }
.pp-trust-title {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.025em;
  margin-bottom: 0.75rem;
}
.pp-trust-desc {
  font-size: 1.05rem;
  opacity: 0.8;
  max-width: 600px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
}
.pp-trust-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 700px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .pp-trust-stats { grid-template-columns: repeat(4, 1fr); }
}
.pp-trust-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.pp-trust-stat__number {
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #98CE44;
  font-variant-numeric: lining-nums tabular-nums;
}
.pp-trust-stat__label {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

/* ═══════════════ SMOOTH SCROLL ═══════════════ */
html { scroll-behavior: smooth; }

/* ═══════════════ PLAN CARD ICON BOX ═══════════════ */
.pp-plan-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pp-plan-icon-box img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.pp-plan-icon-box--basic { background: rgba(55,139,149,.1); }
.pp-plan-icon-box--standard { background: rgba(245,131,61,.1); }
.pp-plan-icon-box--premium { background: rgba(124,58,237,.1); }

.pp-tier-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* ═══════════════ CENTERED PRICE BLOCK ═══════════════ */
.pp-price-block {
  margin-bottom: 20px;
  text-align: center;
}
.pp-price-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}
.pp-price-total {
  display: flex;
  justify-content: center;
}

/* ═══════════════ COMPACT SECTION HEADERS ═══════════════ */
.pp-section-header--compact {
  text-align: center;
  margin-bottom: 32px;
}
.pp-section-header--compact .pp-section-title {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.03em;
  margin: 0 0 8px;
  background: linear-gradient(135deg, #174f57 0%, #378b95 50%, #f5833d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pp-section-header--compact .pp-section-desc {
  font-size: 14px;
  color: var(--tg-muted);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}
.pp-section-header--compact .pp-kicker {
  margin-bottom: 6px;
}

@media (max-width: 768px) {
  .pp-section-header--compact .pp-section-title { font-size: 22px; }
}

/* ── Bar-style section header (matching standard page title) ── */
.pp-section-header--bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #378b95 0%, #4ba8b3 100%);
  color: #fff;
  padding: 14px 28px;
  border-radius: 12px;
  margin-bottom: 32px;
  text-align: start;
}
.pp-bar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.18);
  border-radius: 10px;
  flex-shrink: 0;
  color: #fff;
}
.pp-section-title--bar {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 !important;
  letter-spacing: -.01em;
}
/* â• â• â• â• â• â• â• â• â• â• â• â• â• â• â•  CLEAN SECTION DIVIDER â• â• â• â• â• â• â• â• â• â• â• â• â• â• â•  */
.pp-clean-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 700px;
  margin: 56px auto;
  position: relative;
}

.pp-clean-divider::before,
.pp-clean-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148,163,184,.28));
}

.pp-clean-divider::after {
  background: linear-gradient(90deg, rgba(148,163,184,.28), transparent);
}

.pp-clean-divider::before {
  background: linear-gradient(90deg, transparent, rgba(148,163,184,.28));
}

/* Subtle diamond accent */
.pp-clean-divider {
  gap: 16px;
}

.pp-clean-divider .pp-div-accent {
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: rgba(148,163,184,.3);
  border-radius: 1px;
  flex-shrink: 0;
}

/* ═══════════════ CARD OVERRIDES ═══════════════ */
.pp-card__blob { display: none !important; }
.pp-plans-grid { gap: 32px; }
.pp-card { border-radius: 28px 8px 28px 8px; isolation: isolate; }
.pp-card--standard { border-radius: 8px 28px 8px 28px; }

/* ── Decorative card shapes (inspired by tg-metric-card) ── */
.pp-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10px -6px -8px 8px;
  border-radius: 28px 12px 28px 12px;
  transform: rotate(-1.8deg);
  pointer-events: none;
  opacity: 1;
}

.pp-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 48px;
  height: 48px;
  right: -10px;
  top: -12px;
  border-radius: 14px;
  transform: rotate(15deg);
  pointer-events: none;
  opacity: 1;
}
html[dir="rtl"] .pp-card::after { right: auto; left: -10px; transform: rotate(-15deg); }

/* Basic — teal tint */
.pp-card--basic::before {
  background: linear-gradient(135deg, rgba(55,139,149,.07), rgba(104,173,181,.02));
  border: 1px solid rgba(55,139,149,.06);
}
.pp-card--basic::after {
  background: rgba(55,139,149,.04);
  border: 1px solid rgba(55,139,149,.06);
}

/* Standard — orange tint */
.pp-card--standard::before {
  border-radius: 12px 28px 12px 28px;
  background: linear-gradient(135deg, rgba(245,131,61,.07), rgba(255,242,234,.02));
  border: 1px solid rgba(245,131,61,.06);
  transform: rotate(1.8deg);
}
.pp-card--standard::after {
  background: rgba(245,131,61,.04);
  border: 1px solid rgba(245,131,61,.06);
}

/* Premium — purple tint */
.pp-card--premium::before {
  background: linear-gradient(135deg, rgba(124,58,237,.06), rgba(167,139,250,.02));
  border: 1px solid rgba(124,58,237,.05);
}
.pp-card--premium::after {
  background: rgba(124,58,237,.04);
  border: 1px solid rgba(124,58,237,.05);
}

/* ═══════════════ FEATURE ROWS ═══════════════ */
.pp-features-list { list-style: none; margin: 0; padding: 0; }

.pp-feature-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  color: var(--tg-text, #334155);
}
.pp-feature-row:last-child { border-bottom: none; }
.pp-feature-row > span:first-child { flex: 1; min-width: 0; }
.pp-feature-row > strong {
  font-weight: 700;
  color: var(--tg-ink, #0f172a);
  font-size: 13px;
  text-align: end;
  white-space: nowrap;
}

.pp-feat-yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(152,206,68,.12);
  color: #65a30d;
  font-size: 11px;
}
.pp-feat-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(148,163,184,.08);
  color: #cbd5e1;
  font-size: 11px;
}

/* ═══════════════ RTL SLIDER VISUAL FIXES ═══════════════ */
html[dir="rtl"] .tg-visual-shell,
html[dir="rtl"] .tg-slide.is-active .tg-visual-shell {
  opacity: 1 !important;
  visibility: visible !important;
}
html[dir="rtl"] .tg-intelligence-head,
html[dir="rtl"] .tg-coverage-panel,
html[dir="rtl"] .tg-alert-core,
html[dir="rtl"] .tg-map-art {
  opacity: 1 !important;
  visibility: visible !important;
}
html[dir="rtl"] .tg-metric-card,
html[dir="rtl"] .tg-stat-card,
html[dir="rtl"] .tg-feature-node,
html[dir="rtl"] .tg-region-stat,
html[dir="rtl"] .tg-region-mini-bars,
html[dir="rtl"] .tg-region-mini-network {
  opacity: 1 !important;
}

/* ─── Plans grid spacing ─── */
.pp-plans-grid { margin-top: 56px; }

/* Tier label now shows plan name — slightly larger */
.pp-tier-label { font-size: 13px !important; font-weight: 800 !important; letter-spacing: .3px; }

/* ═══════════════════════════════════════════════════════════════
   SECTION BACKGROUNDS — Unified 6-Background System
   From preview3.html: one connected visual language
   ═══════════════════════════════════════════════════════════════ */

/* ─── Global: Hide ALL dividers + FAQ ─── */
.pp-clean-divider { display: none !important; }
.pp-faq-section { display: none !important; }

/* ─── Curve separator (slider → plans) ─── */
.pp-section-curve {
  position: relative;
  height: 40px;
  margin-top: -1px;
  background: linear-gradient(180deg, rgba(243,248,249,.98) 0%, #fbfefe 100%);
  overflow: hidden;
}
.pp-section-curve::before {
  content: "";
  position: absolute;
  left: -8%; right: -8%;
  bottom: -60px;
  height: 140px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-top: 1px solid rgba(55,139,149,.08);
  background: linear-gradient(180deg, rgba(237,244,245,.20) 0%, #fbfefe 100%);
  transform: rotate(-1deg);
}

/* ─── 01. HERO ORBIT GRID — Main Slider ─── */
.tg-executive-slider {
  border-bottom: none !important;
  background:
    radial-gradient(circle at 85% 15%, rgba(245,131,61,.20), transparent 24%),
    radial-gradient(circle at 11% 85%, rgba(55,139,149,.19), transparent 29%),
    linear-gradient(135deg, #ffffff 0%, #ffffff 47%, #eef7f7 100%) !important;
}

/* Orbit grid lines — override dot matrix */
.tg-executive-slider::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -3 !important;
  opacity: 1 !important;
  animation: none !important;
  background-image:
    linear-gradient(rgba(55,139,149,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55,139,149,.055) 1px, transparent 1px) !important;
  background-size: 38px 38px !important;
  background-position: 0 0 !important;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.92), transparent) !important;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.92), transparent) !important;
  pointer-events: none !important;
}

/* Orbit ring — override ribbon */
.tg-executive-slider::after {
  content: "" !important;
  position: absolute !important;
  z-index: -2 !important;
  width: 520px !important;
  height: 520px !important;
  right: -180px !important;
  top: -190px !important;
  left: auto !important;
  border-radius: 50% !important;
  border: 1px solid rgba(55,139,149,.18) !important;
  box-shadow:
    0 0 0 52px rgba(55,139,149,.045),
    0 0 0 112px rgba(245,131,61,.032) !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  background: transparent !important;
  pointer-events: none !important;
}

[dir="rtl"] .tg-executive-slider::after {
  right: auto !important;
  left: -180px !important;
}

/* ─── 02. ARCHITECTURAL FRAMES — Pricing Plans ─── */
.pp-plans-section {
  padding-top: 50px !important;
  padding-bottom: 70px !important;
  background: linear-gradient(180deg, #f8fcfc, #f2f7f7) !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* Large rotated teal border frame */
.pp-plans-section::before {
  content: "";
  position: absolute;
  z-index: -3;
  width: 52%;
  height: 72%;
  right: -10%;
  top: 10%;
  border: 2px solid rgba(55,139,149,.11);
  border-radius: 34px;
  transform: rotate(7deg);
  pointer-events: none;
}

/* Smaller rotated orange border frame */
.pp-plans-section::after {
  content: "";
  position: absolute;
  z-index: -3;
  width: 42%;
  height: 58%;
  right: 8%;
  top: 22%;
  border: 2px solid rgba(245,131,61,.08);
  border-radius: 28px;
  transform: rotate(-5deg);
  pointer-events: none;
}

/* RTL: flip frames */
[dir="rtl"] .pp-plans-section::before {
  right: auto;
  left: -10%;
  transform: rotate(-7deg);
}
[dir="rtl"] .pp-plans-section::after {
  right: auto;
  left: 8%;
  transform: rotate(5deg);
}

/* ─── 03. DATA WAVES (Option 09) — All Plans Include ─── */
.pp-include-section {
  padding: 64px 0 !important;
  background: linear-gradient(180deg, #fbfefe, #edf6f6) !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* Repeating radial data waves — bottom-right origin */
.pp-include-section::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: -2 !important;
  background:
    repeating-radial-gradient(
      ellipse at 100% 100%,
      transparent 0 26px,
      rgba(55,139,149,.07) 27px 29px,
      transparent 30px 54px
    ) !important;
  opacity: .9 !important;
  pointer-events: none !important;
  border-radius: 0 !important;
  border: none !important;
}

/* Tri-color gradient streak — tilted */
.pp-include-section::after {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  width: 64% !important;
  height: 120px !important;
  right: -8% !important;
  top: 18% !important;
  border-radius: 999px 0 0 999px !important;
  transform: rotate(-9deg) !important;
  background:
    linear-gradient(90deg,
      rgba(55,139,149,.16),
      rgba(245,131,61,.10),
      rgba(152,206,68,.08)) !important;
  box-shadow:
    0 54px 0 rgba(55,139,149,.045),
    0 108px 0 rgba(245,131,61,.035) !important;
  pointer-events: none !important;
}

/* RTL: flip wave origin + streak */
[dir="rtl"] .pp-include-section::before {
  background:
    repeating-radial-gradient(
      ellipse at 0% 100%,
      transparent 0 26px,
      rgba(55,139,149,.07) 27px 29px,
      transparent 30px 54px
    ) !important;
}
[dir="rtl"] .pp-include-section::after {
  right: auto !important;
  left: -8% !important;
  border-radius: 0 999px 999px 0 !important;
  transform: rotate(9deg) !important;
}

/* ─── 04. ANGLED RIBBONS — Comparison Table ─── */
.pp-compare-section {
  padding: 70px 0 60px !important;
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 60%, #f2f8f8 60%, #f2f8f8 100%) !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* Teal ribbon — skewed */
.pp-compare-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 52%;
  height: 170%;
  top: -35%;
  right: -15%;
  transform: skewX(-18deg);
  border-radius: 50px;
  background: linear-gradient(180deg, rgba(55,139,149,.16), rgba(55,139,149,.03));
  pointer-events: none;
}

/* Orange ribbon — skewed, offset */
.pp-compare-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 52%;
  height: 170%;
  top: -35%;
  right: 17%;
  transform: skewX(-18deg);
  border-radius: 50px;
  background: linear-gradient(180deg, rgba(245,131,61,.13), rgba(245,131,61,.015));
  pointer-events: none;
}

/* RTL: flip ribbons */
[dir="rtl"] .pp-compare-section::before { right: auto; left: -15%; }
[dir="rtl"] .pp-compare-section::after  { right: auto; left: 17%; }

/* ─── 05. CORNER HALOS (Option 03) — Custom Plan Builder ─── */
.sd-customizer {
  margin-bottom: 0 !important;
  padding: 60px 0 50px !important;
  background: linear-gradient(180deg, #fbfefe, #f3f9f9) !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.sd-customizer .pp-section-header--compact {
  margin-bottom: 24px !important;
}

/* Triple radial halos (teal top-left, orange bottom-right, green top-right) */
.sd-customizer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 0 0, rgba(55,139,149,.26), transparent 31%),
    radial-gradient(circle at 100% 100%, rgba(245,131,61,.21), transparent 28%),
    radial-gradient(circle at 100% 0, rgba(152,206,68,.12), transparent 22%);
  pointer-events: none;
}

/* Thick frosted ring — bottom-left */
.sd-customizer::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 260px;
  height: 260px;
  left: -90px;
  bottom: -110px;
  border-radius: 50%;
  border: 34px solid rgba(255,255,255,.38);
  pointer-events: none;
}

/* RTL: flip halos ring */
[dir="rtl"] .sd-customizer::after {
  left: auto;
  right: -90px;
}

/* Customizer card polish */
.sd-cust-configurator {
  box-shadow: 0 12px 40px rgba(15,23,42,.07) !important;
  border: 1px solid rgba(219,229,232,.5) !important;
  border-radius: 18px !important;
}

/* ═══════════════════════════════════════════════════════════ */
/*  07. CENTER SPOTLIGHT CAROUSEL — Client Logos              */
/* ═══════════════════════════════════════════════════════════ */
.pp-spotlight-section {
  padding: 56px 0 48px !important;
  background: linear-gradient(180deg, #f6fafa, #eef5f5) !important;
  position: relative !important;
  overflow: hidden !important;
}

.pp-spot-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.pp-spot-badge {
  color: #378b95;
  font-weight: 600;
  font-size: 13px;
  background: rgba(55,139,149,0.1);
  padding: 4px 12px;
  border-radius: 20px;
}

.pp-spot-sep {
  color: #ccc;
  font-size: 18px;
}

.pp-spot-title {
  font-size: 20px;
  font-weight: 800;
  color: #1f2937;
  margin: 0;
}

.pp-spot-stat {
  font-size: 15px;
  color: #6b7280;
}

.pp-spot-stat strong {
  color: #378b95;
  font-weight: 700;
}

.pp-spotlight-stage {
  min-height: 180px;
  display: grid;
  place-items: center;
  overflow: hidden;
  perspective: 1000px;
}

.pp-spotlight-orbit {
  position: relative;
  width: min(920px, 100%);
  height: 130px;
}

.pp-spot-card {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -48px 0 0 -78px;
  width: 156px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border: 1px solid #e2ecee;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(21,64,70,.08);
  opacity: .18;
  filter: grayscale(1);
  animation: ppSpotlight 18s ease-in-out infinite;
  transform-origin: center;
}

.pp-spot-card img {
  max-width: 100%;
  max-height: 64px;
  object-fit: contain;
}

.pp-spot-card:hover {
  animation-play-state: paused !important;
  opacity: 1 !important;
  filter: grayscale(0) !important;
  transform: scale(1.12) !important;
  box-shadow: 0 16px 48px rgba(55,139,149,.22), 0 0 0 3px rgba(55,139,149,.12) !important;
  border-color: rgba(55,139,149,.25) !important;
  transition: transform .3s, box-shadow .3s, filter .3s, opacity .3s !important;
  z-index: 10 !important;
  cursor: pointer;
}

.pp-spot-card:nth-child(1) { animation-delay: 0s; }
.pp-spot-card:nth-child(2) { animation-delay: -3s; }
.pp-spot-card:nth-child(3) { animation-delay: -6s; }
.pp-spot-card:nth-child(4) { animation-delay: -9s; }
.pp-spot-card:nth-child(5) { animation-delay: -12s; }
.pp-spot-card:nth-child(6) { animation-delay: -15s; }

@keyframes ppSpotlight {
  0% {
    transform: translateX(-390px) scale(.72) rotateY(18deg);
    opacity: 0;
  }
  15% {
    opacity: .28;
  }
  33% {
    transform: translateX(-195px) scale(.84) rotateY(10deg);
    opacity: .48;
    filter: grayscale(.75);
  }
  50% {
    transform: translateX(0) scale(1.16) rotateY(0);
    opacity: 1;
    filter: grayscale(0);
    box-shadow: 0 20px 45px rgba(55,139,149,.17);
  }
  67% {
    transform: translateX(195px) scale(.84) rotateY(-10deg);
    opacity: .48;
    filter: grayscale(.75);
  }
  85% {
    opacity: .28;
  }
  100% {
    transform: translateX(390px) scale(.72) rotateY(-18deg);
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .pp-spotlight-orbit { transform: scale(.78); }
}
@media (max-width: 580px) {
  .pp-spotlight-orbit { transform: scale(.6); }
  .pp-spotlight-stage { min-height: 150px; }
}


/* ═══════════════════════════════════════════════════════════ */
/*  08. 3D CTA BOX — Final Call to Action                    */
/* ═══════════════════════════════════════════════════════════ */
.pp-cta-section {
  max-width: 1380px !important;
  width: calc(100% - 48px) !important;
  margin: 40px auto 70px !important;
  padding: 58px 24px !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 3% 5%,rgba(255,255,255,.09) 0 105px,transparent 107px),
    radial-gradient(circle at 98% 100%,transparent 0 85px,rgba(255,255,255,.08) 87px 126px,transparent 128px),
    linear-gradient(120deg,#fb8340,#e86721) !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: center !important;
  box-shadow: 0 18px 50px rgba(38,77,84,.13) !important;
}

/* Metric section (style-four) */
.pp-cta-section.style-four .pp-cta-metric {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 9px !important;
  margin-bottom: 8px !important;
  color: #fff !important;
}

.pp-cta-section.style-four .pp-cta-metric strong {
  font-size: clamp(54px, 7vw, 92px) !important;
  line-height: .9 !important;
  font-weight: 900 !important;
}

.pp-cta-section.style-four .pp-cta-metric span {
  font-size: clamp(18px, 2vw, 25px) !important;
  font-weight: 800 !important;
}

/* Main heading */
.pp-cta-main-title {
  color: #fff !important;
  font-size: clamp(26px, 3.4vw, 44px) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  max-width: 700px !important;
  margin: 0 auto 16px !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
}

/* Hide old title */
.pp-cta-section .pp-cta-title {
  display: none !important;
}

.pp-cta-section .pp-cta-desc {
  color: rgba(255,255,255,.92) !important;
  font-size: 1.1rem !important;
  line-height: 1.7 !important;
  max-width: 680px !important;
  margin: 0 auto 36px !important;
}

/* Subscribe button */
.pp-cta-subscribe-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 16px 42px !important;
  background: #fff !important;
  color: #e06e2a !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  box-shadow:
    0 8px 28px rgba(0,0,0,.12),
    0 2px 0 rgba(255,255,255,.15) inset !important;
  transition: transform .25s, box-shadow .25s !important;
}
.pp-cta-subscribe-btn:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.2) !important;
}
.pp-cta-subscribe-btn svg {
  width: 20px !important;
  height: 20px !important;
}

/* RTL: flip 3D box shapes */
[dir="rtl"] .pp-cta-section::before {
  right: auto !important;
  left: 6% !important;
  transform: rotate(-22deg) perspective(600px) rotateX(12deg) !important;
}
[dir="rtl"] .pp-cta-section::after {
  left: auto !important;
  right: 4% !important;
  transform: rotate(15deg) perspective(600px) rotateY(-16deg) !important;
}

@media (max-width: 768px) {
  .pp-cta-main-title { font-size: 1.6rem !important; }
  .pp-cta-section::before { width: 180px !important; height: 180px !important; right: -20px !important; }
  .pp-cta-section::after { width: 120px !important; height: 120px !important; left: -20px !important; }
}