/* ============================================================
   PULSE THEME — combined stylesheet
   1. Bootstrap 3.3.7 overrides (neutralize legacy visuals)
   2. Pulse theme tokens, layout, components
   ============================================================ */
/* ============================================================
   PART 1 — BOOTSTRAP 3.3.7 OVERRIDES
   ============================================================ */
   *, :after, :before {
      box-sizing: border-box;
   }
   
   html { scroll-behavior: smooth; }
   
   /* Remove default outline only — replaced by :focus-visible below */
   .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus,
   .form-control:focus,
   input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus,
   a:focus { outline: 0; outline-offset: 0; }
   
   /* Focus ring disabled globally — components style their own focus state */
   :focus-visible { outline: 0; outline-offset: 0; }
   .btn:focus-visible, .form-control:focus-visible, a:focus-visible,
   input:focus-visible, select:focus-visible, textarea:focus-visible {
      outline: 0;
      outline-offset: 0;
   }
   
   .form-control, .form-control:focus, .btn, .btn:active, .btn.active,
   .input-group-addon,
   .has-success .form-control, .has-warning .form-control, .has-error .form-control,
   .has-success .form-control:focus, .has-warning .form-control:focus, .has-error .form-control:focus,
   .btn-group.open .dropdown-toggle, .progress {
      -webkit-box-shadow: none !important; box-shadow: none !important;
   }
   
   .progress-bar, .progress-striped .progress-bar, .progress-bar-striped,
   .progress-striped .progress-bar-success, .progress-striped .progress-bar-info,
   .progress-striped .progress-bar-warning, .progress-striped .progress-bar-danger {
      background-image: none !important;
      -webkit-animation: none !important; -o-animation: none !important; animation: none !important;
   }
   
   .glyphicon { font-size: inherit; line-height: 1; }
   
   .navbar.navbar-default, .navbar.navbar-inverse { background-color: transparent; border: 0; box-shadow: none; }
   .navbar { min-height: 0; margin-bottom: 0; border: 0; }
   
   .pager li > a, .pager li > span { border-radius: 6px; padding: 8px 14px; }
   
   .breadcrumb { background-color: transparent; padding: 0; margin-bottom: 12px; font-size: 13px; }
   .breadcrumb > li + li:before { content: "›\00a0"; color: var(--ctrl-text-muted); }
   .breadcrumb > .active { color: var(--ctrl-text-active); }
   
   .jumbotron { background-color: transparent; padding: 0; margin-bottom: 0; }
   
   .well, .thumbnail {
      background-color: var(--ctrl-bg-alt); border: 1px solid var(--ctrl-border);
      border-radius: 8px; box-shadow: none;
   }
   
   .panel {
      background-color: var(--ctrl-bg); border: 1px solid var(--ctrl-border);
      border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
      margin-bottom: 16px;
   }
   .panel-heading {
      background-color: transparent; border-bottom: 1px solid var(--ctrl-border);
      padding: 14px 16px; border-radius: 12px 12px 0 0; font-weight: 600;
   }
   .panel-body { padding: 16px; }
   .panel-footer {
      background-color: var(--ctrl-bg-alt); border-top: 1px solid var(--ctrl-border);
      padding: 12px 16px; border-radius: 0 0 12px 12px;
   }
   .panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger {
      border-color: var(--ctrl-border);
   }
   .panel-default > .panel-heading, .panel-primary > .panel-heading,
   .panel-success > .panel-heading, .panel-info > .panel-heading,
   .panel-warning > .panel-heading, .panel-danger > .panel-heading {
      background-color: transparent; color: inherit; border-color: var(--ctrl-border);
   }
   
   .tooltip-inner {
      background-color: var(--tooltip-bg); color: #fff; font-size: 12px;
      padding: 6px 10px; border-radius: 6px; max-width: 240px;
   }
   .tooltip.top .tooltip-arrow { border-top-color: var(--tooltip-bg); }
   .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--tooltip-bg); }
   .tooltip.left .tooltip-arrow { border-left-color: var(--tooltip-bg); }
   .tooltip.right .tooltip-arrow { border-right-color: var(--tooltip-bg); }
   
   .popover {
      border: 1px solid var(--ctrl-border); border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,.08);
   }
   
   .modal-backdrop.in { opacity: 0.45; }
   .modal-content {
      border: 1px solid var(--ctrl-border); border-radius: 8px;
      box-shadow: 0 20px 48px rgba(0,0,0,.18);
      background-color: var(--ctrl-bg); color: var(--ink-1);
   }
   .modal-header, .modal-footer { border-color: var(--ctrl-border); }
   
   .btn { border-width: 1px; text-shadow: none; background-image: none; }
   .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-default {
      background-image: none;
   }
   
   .has-error .form-control { border-color: #f0a4a4; }
   .has-success .form-control { border-color: #9ec79f; }
   .has-warning .form-control { border-color: #e6c87a; }
   
   .caret {
      border: 0; width: 8px; height: 8px;
      border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
      transform: rotate(45deg) translateY(-2px);
      margin-left: 6px; vertical-align: middle;
   }
   
   /* ============================================================
     PART 2 — PULSE THEME
     Tokens, layout shell, components
     ============================================================ */
   
   :root {
      /* Primary = blue (dominant action color) */
      --brand: #498CE8;
      --brand-2: #3D5CDB;
      --brand-3: #498CE8;
      --brand-strong: #2F4AC4;
      --brand-soft: #EDF2FF;
      /* Secondary = coral (CTAs & highlights only) */
      --accent: #FF6255;
      --accent-2: #498CE8;
      --accent-soft: #FFF0EC;
      --ink-1: #262626;
      --ink-2: #555555;
      --ink-3: #9CA3AF;
      --ink-4: #D1D5DB;
      --line: #DBDBDB;
      --line-2: #F3F4F6;
      --line-3: #888888;
      --line-4: #ffffff;
      --bg-1: #ffffff;
      --bg-2: #F8F9FC;
      /* --bg-3: #EFF1F5; */
      --bg-3: #E3E5E5;
      --bg-4: #F9FBFC;
      --bg-5: #f2f4f5;
      --bg-6: #FFFFFF66;
      --green: #22C55E;
      --green-soft: #ECFDF5;
      --amber: #F59E0B;
      --amber-soft: #FEF9E7;
      --red: #EF4444;
      --red-soft: #FEF2F2;
      --blue: #4A6CF7;
      --blue-soft: #B2D9FF;
      --radius-sm: 6px;
      --radius: 10px;
      --radius-lg: 14px;
      --shadow-1: 0 1px 2px rgba(26,26,46,.04);
      --shadow-2: 0 4px 16px rgba(26,26,46,.06);
      --shadow-3: 0 12px 32px rgba(26,26,46,.10);
      /* Branded shadows — blue-tinted depth */
      --shadow-brand: 0 4px 14px rgba(74,108,247,.12), 0 1px 3px rgba(74,108,247,.08);
      --shadow-brand-lg: 0 12px 36px rgba(74,108,247,.18), 0 4px 12px rgba(74,108,247,.10);
      --shadow-lift: 0 8px 30px rgba(26,26,46,.12), 0 2px 4px rgba(26,26,46,.04);
      /* Fluid spacing — section rhythm */
      --space-section: clamp(40px, 5vw, 72px);
      --space-section-sm: clamp(28px, 3.5vw, 48px);
      /* Transitions — intentional timing */
      --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
      --dur-fast: 150ms;
      --dur-normal: 300ms;
      --dur-slow: 500ms;
      --sidebar-w: 300px;
      --topbar-h: 68px;
      --sidebar-rail-w: 76px;
      /* ── Dashboard shell (Figma) ── */
      --shell-bg: #F2F4F5;
      --glass-side: rgba(255,255,255,0.3);
      --glass-top: rgba(255,255,255,.8);
      --glass-border: #FFFFFF;
      --shadow-side: 10px 0 20px rgba(51, 68, 102, 0.16);
      --shadow-top: 0 5px 20px rgba(77, 140, 153, 0.15);
      --shell-coral: #FF6255;
      --shell-title: #262626;
      --shell-item: #555555;
      --shell-icon: #888888;
      --shell-green: #00BF80;
      --shell-green-soft: rgba(0, 191, 128, 0.10);
      --shell-tg: #2AA0DB;
      /* Bootstrap control surface tokens */
      --ctrl-bg: #ffffff;
      --ctrl-bg-alt: #F8F9FC;
      --ctrl-border: #E5E7EB;
      --ctrl-text-muted: #9CA3AF;
      --ctrl-text-active: #262626;
      --tooltip-bg: #262626;
     --select2-chevron: var(--ink-3);
      --hero-bg-from: #ffffff;
      --hero-bg-to: #d0dcff;
      color-scheme: light;
   }
   .accent-text {
   color: var(--accent);
   }
   
   /* ─── Dark theme token overrides ─── */
   [data-theme="dark"] {
      --ink-1: #E8ECF2;
      --ink-2: #8B95A5;
      --ink-3: #606878;
      --ink-4: #3D4452;
      /* ── Dashboard shell (dark) ── */
      --shell-bg: #0B1120;
      --glass-side: rgba(26, 29, 46, 0.55);
      --glass-top: rgba(26, 29, 46, 0.80);
      --glass-border: rgba(255, 255, 255, 0.06);
      --shadow-side: 10px 0 24px rgba(0, 0, 0, 0.45);
      --shadow-top: 0 5px 20px rgba(0, 0, 0, 0.35);
      --shell-coral: #FF7A6E;
      --shell-title: #E8ECF2;
      --shell-item: #A8B2C2;
      --shell-icon: #6B7689;
      --shell-green: #2FD39B;
      --shell-green-soft: rgba(47, 211, 155, 0.12);
      --shell-tg: #2AA0DB;
     --select2-chevron: var(--ink-1);
      --line: #252B3A;
      --line-2: #1A1F2E;
      --line-4: #252B3A;
      --bg-1: #1A1D2E;
      --bg-2: #0F1629;
      --bg-3: #222840;
      --bg-4: #222840;
      --bg-5: #0F1629;
      --bg-6: #1A1D2E;
      /* Primary = brighter blue in dark mode */
      --brand: #5B7FFF;
      --brand-2: #4A6CF7;
      --brand-strong: #3D5CDB;
      --brand-soft: #0C1830;
      /* Secondary = coral accent */
      --accent: #E8553D;
      --accent-2: #D04530;
      --accent-soft: #2E1410;
      --green-soft: #0D2818;
      --amber-soft: #2A1E06;
      --red-soft: #2E0E0E;
      --shadow-1: 0 1px 2px rgba(0,0,0,.25);
      --shadow-2: 0 4px 16px rgba(0,0,0,.35);
      --shadow-3: 0 12px 32px rgba(0,0,0,.45);
      --shadow-brand: 0 4px 14px rgba(91,127,255,.20), 0 1px 3px rgba(91,127,255,.12);
      --shadow-brand-lg: 0 12px 36px rgba(91,127,255,.25), 0 4px 12px rgba(91,127,255,.14);
      --shadow-lift: 0 8px 30px rgba(0,0,0,.30), 0 2px 4px rgba(0,0,0,.12);
      /* Bootstrap control surface tokens — dark */
      --ctrl-bg: #1A1D2E;
      --ctrl-bg-alt: #141828;
      --ctrl-border: #252B3A;
      --ctrl-text-muted: #606878;
      --ctrl-text-active: #E8ECF2;
      --tooltip-bg: #2A3147;
      --hero-bg-from: #0F1629;
      --hero-bg-to: #1A1D2E;
      color-scheme: dark;
   }
   
   /* ─── Smooth theme transition (only during explicit switch, not page load) ─── */
   html.theme-transitioning,
   html.theme-transitioning * {
      transition: background-color .25s ease, border-color .25s ease, color .25s ease !important;
   }
   
   /* ─── Entrance animation keyframes ─── */
   @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
   }
   @keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
   }
   @keyframes scaleIn {
      from { opacity: 0; transform: scale(0.92); }
      to   { opacity: 1; transform: scale(1); }
   }
   @keyframes slideInLeft {
      from { opacity: 0; transform: translateX(-32px); }
      to   { opacity: 1; transform: translateX(0); }
   }
   @keyframes slideInRight {
      from { opacity: 0; transform: translateX(32px); }
      to   { opacity: 1; transform: translateX(0); }
   }
   
   /* Reveal-on-scroll utility — elements start hidden, animate when .is-visible is added via IntersectionObserver */
   .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity var(--dur-slow) var(--ease-out-expo),
                  transform var(--dur-slow) var(--ease-out-expo);
   }
   .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
   }
   .reveal--delay-1 { transition-delay: 80ms; }
   .reveal--delay-2 { transition-delay: 160ms; }
   .reveal--delay-3 { transition-delay: 240ms; }
   .reveal--delay-4 { transition-delay: 320ms; }
   .reveal--scale {
      opacity: 0;
      transform: scale(0.92);
   }
   .reveal--scale.is-visible {
      opacity: 1;
      transform: scale(1);
   }
   
   @media (prefers-reduced-motion: reduce) {
      .reveal,
      .reveal--scale {
          opacity: 1;
          transform: none;
          transition: none;
      }
   }
   
   html {
      font-size: 14px;
      overflow-x: hidden;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
   }
   
   body.theme-pulse {
      /* font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; */
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 14px;
      line-height: 1.5;
      color: var(--ink-1);
      background-color: var(--bg-2);
      margin: 0;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
   }
   
   /* Heading font — Poppins for display hierarchy */
   h1, h2, h3, h4, h5, h6,
   .lp-h1, .lp-h2, .auth-h1, .page-title,
   .sidebar-brand,
   .lp-usecase__title {
      font-family: 'Poppins', 'Inter', sans-serif;
   }
   
   .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
   .muted { color: var(--ink-3); }
   
   a { color: var(--brand); text-decoration: none; }
   a:hover, a:focus { color: var(--brand-2); text-decoration: none; }
   
   /* ─── App Shell (authenticated) ─── */
   
   .app {
      display: grid;
      grid-template-columns: var(--sidebar-w) 1fr;
      min-height: 100vh;
      min-height: 100dvh;
   }
   
   .sidebar {
      grid-column: 1;
      background: var(--bg-1);
      box-shadow: var(--shadow-1);
      border-right: 1px solid var(--line-4);
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0; left: 0; bottom: 0;
      width: var(--sidebar-w);
      z-index: 50;
      overflow-y: auto;
   }
   
   .sidebar-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      height: var(--topbar-h);
      padding: 0 20px;
      box-sizing: border-box;
      border-bottom: 1px solid var(--line);
      color: var(--ink-1);
      font-weight: 600;
      font-size: 15px;
   }
   .sidebar-brand:hover, .sidebar-brand:focus { color: var(--ink-1); }
   .sidebar-brand img { max-height: 59px; max-width: 200px; }
   
   .brand-logo-combo {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
   }
   .brand-logo-icon { height: 59px; width: auto; }
   .brand-logo-text { color:var(--accent); font-size: 20px; line-height:15px; }
   .brand-logo-text .blue-part { color: var(--brand); font-weight: 600;}
   .public-navbar .brand-logo-combo {
      flex-direction: row;
      align-items: center;
      gap: 10px;
   }
   .public-navbar .brand-logo-icon { height: 40px; }
   .public-navbar .brand-logo-stack {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      line-height: 1;
      gap: 3px;
   }
   .public-navbar .brand-logo-text {
      font-size: 22px;
      line-height: 1;
      letter-spacing: 0.5px;
      font-weight: 700;
   }
   .public-navbar .brand-logo-text .blue-part { font-weight: 700; }
   .public-navbar .brand-logo-tagline {
      font-size: 10px;
      line-height: 1;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: var(--ink-3, #6b7280);
      font-weight: 500;
      white-space: nowrap;
   }
   @media (max-width: 480px) {
      .public-navbar .brand-logo-tagline { display: none; }
   }
   @media (max-width: 480px) {
      .brand-logo-text { display: none; }
      .brand-logo-icon { height: 32px; }
   }
   
   .brand-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px; height: 28px;
      background: var(--brand);
      border-radius: 8px;
      flex-shrink: 0;
   }
   .brand-mark-public { width: 26px; height: 26px; }
   
   .sidebar-nav {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 25px 25px 12px 44px;
      gap: 2px;
   }
   
   .sidebar-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 12px;
      border-radius: 8px;
      color: var(--ink-2);
      font-size: 13.5px;
      font-weight: 500;
      transition: background var(--dur-fast) ease,
                  color var(--dur-fast) ease,
                  transform var(--dur-fast) ease;
   }
   .sidebar-item:hover, .sidebar-item:focus {
      background: var(--bg-2);
      color: var(--ink-1);
      text-decoration: none;
   }
   .sidebar-icon, .sidebar-icon-placeholder {
      width: 18px; height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 14px;
   }
   svg.mi {
      width: 18px; height: 18px;
      flex-shrink: 0;
      opacity: .55;
      transition: opacity .15s;
   }
   
   .sidebar-greeting {
      margin-top: auto;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--ink-3);
      border-top: 1px solid var(--line);
   }
   .sidebar-greeting-wave { font-size: 14px; }
   .sidebar-greeting-text { opacity: .7; }
   .sidebar-item:hover svg.mi { opacity: .85; }
   .sidebar-item.active svg.mi { opacity: 1; }
   
   /* ─── Main column ─── */
   
   .app-main {
      grid-column: 2;
      min-width: 0;
      max-width: calc(100vw - var(--sidebar-w));
      display: flex;
      flex-direction: column;
      overflow-x: clip;
      /* Offset content below the fixed topbar */
      padding-top: var(--topbar-h);
   }
   
   .topbar {
      display: flex;
      align-items: center;
      height: var(--topbar-h);
      padding: 0 20px;
      box-sizing: border-box;
      position: fixed;
      top: 0;
      left: var(--sidebar-w);
      right: 0;
      width: auto;
      z-index: 40;
   }
   .topbar-inner {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      flex: 1;
      min-width: 0;
   }
   .topbar-search {
      position: relative;
      display: flex;
      align-items: center;
      background: var(--bg-2);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding-inline-start: 32px;
      padding-inline-end: 10px;
      height: 32px;
      width: 260px;
      max-width: 100%;
      box-sizing: border-box;
      color: var(--ink-3);
      margin-inline-start: 7px;
   }
   .topbar-search > :first-child:not(input):not(select):not(textarea) {
      position: absolute;
      inset-inline-start: 10px;
      top: 50%;
      transform: translateY(-50%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      color: inherit;
   }
   .topbar-search > :first-child:not(input):not(select):not(textarea) svg {
      width: 14px; height: 14px;
      display: block; flex-shrink: 0;
   }
   .topbar-search input {
      border: 0;
      background: transparent;
      flex: 1;
      min-width: 0;
      font-size: 13px;
      color: var(--ink-1);
      outline: 0;
      box-shadow: none;
      padding: 0;
   }
   /* No focus ring anywhere — neither on the input nor on the wrapping pill */
   .topbar-search,
   .topbar-search:hover,
   .topbar-search:focus,
   .topbar-search:focus-within,
   .topbar-search:focus-visible,
   .topbar-search input,
   .topbar-search input:hover,
   .topbar-search input:focus,
   .topbar-search input:focus-visible,
   .topbar-search input:active {
      outline: 0 !important;
      outline-color: transparent !important;
      outline-offset: 0 !important;
      box-shadow: none !important;
      -webkit-tap-highlight-color: transparent;
   }
   .topbar-search:focus-within {
      border-color: var(--line) !important;
   }
   .topbar-spacer { flex: 1; }
   
   /* ── Compact icon row ── */
   .topbar-icons {
      display: flex;
      align-items: center;
      gap: 2px;
      flex: 0 0 auto;
   }
   .topbar-icon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px; height: 34px;
      border-radius: 8px;
      border: none;
      background: transparent;
      color: var(--ink-3);
      cursor: pointer;
      transition: background .12s, color .12s;
      text-decoration: none;
      padding: 0;
      position: relative;
   }
   .topbar-icon-btn svg {
      width: 18px; height: 18px;
      flex-shrink: 0;
   }
   .topbar-icon-btn:hover { background: var(--bg-2); color: var(--ink-1); }
   .topbar-icon-btn.is-active { color: var(--brand); }
   .topbar-icon-btn .topbar-lang-flag { font-size: 16px; line-height: 1; }
   
   /* Divider between balance and account/logout icons */
   .topbar-divider {
      width: 1px;
      height: 20px;
      background: var(--line);
      margin: 0 4px;
      flex-shrink: 0;
   }
   
   /* Balance button — compact pill with amount */
   .topbar-balance-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 34px;
      padding: 0 10px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--brand-soft);
      color: var(--brand);
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      transition: background .12s, border-color .12s;
   }
   .topbar-balance-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
   .topbar-balance-btn:hover { background: var(--bg-2); border-color: var(--ink-4); }
   .topbar-balance-amount { white-space: nowrap; }
   
   .app-content {
      flex: 1;
      min-width: 0;
      box-sizing: border-box;
      padding: 24px 24px 48px;
      max-width: 1400px;
      width: 100%;
   }
   @media (min-width: 1101px) { .app-content { padding: 24px 48px 48px; } }
   @media (min-width: 1600px) { .app-content { max-width: 1600px; padding: 30px 72px 50px 90px; } }
   @media (min-width: 1920px) { .app-content { max-width: 1800px; } }
   
   /* ─── Welcome strip ─── */
   
   .welcome-strip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 24px;
      margin-bottom: 24px;
      background: var(--bg-2);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
   }
   .welcome-strip-greeting {
      font-size: 20px;
      font-weight: 700;
      color: var(--ink-1);
      margin: 0;
      line-height: 1.3;
   }
   .welcome-strip-user {
      color: var(--brand);
   }
   .welcome-strip-sub {
      font-size: 14px;
      color: var(--ink-2);
      margin: 4px 0 0;
   }
   .welcome-strip-actions {
      display: flex;
      gap: 10px;
      flex-shrink: 0;
   }
   .welcome-strip-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 9px 18px;
      font-size: 14px;
      font-weight: 600;
      border-radius: var(--radius);
      text-decoration: none;
      transition: background 0.15s, box-shadow 0.15s;
      white-space: nowrap;
      cursor: pointer;
   }
   .welcome-strip-btn--primary {
      background: var(--brand);
      color: #fff;
   }
   .welcome-strip-btn--primary:hover,
   .welcome-strip-btn--primary:focus {
      background: var(--brand-2);
      color: #fff;
      text-decoration: none;
      box-shadow: var(--shadow-2);
   }
   .welcome-strip-btn--secondary {
      background: var(--bg-1);
      color: var(--ink-1);
      border: 1px solid var(--line);
   }
   .welcome-strip-btn--secondary:hover,
   .welcome-strip-btn--secondary:focus {
      background: var(--bg-3);
      color: var(--ink-1);
      text-decoration: none;
      box-shadow: var(--shadow-1);
   }
   
   @media (max-width: 600px) {
      .welcome-strip {
          flex-direction: column;
          align-items: flex-start;
          padding: 16px 18px;
          gap: 14px;
      }
      .welcome-strip-greeting {
          font-size: 16px;
      }
      .welcome-strip-actions {
          width: 100%;
      }
      .welcome-strip-btn {
          flex: 1;
          justify-content: center;
          padding: 10px 14px;
          font-size: 13px;
      }
   }
   
   /* ─── Announcement bar ─── */
   .pn-announce {
      background: var(--brand);
      color: #fff;
      font-size: 13px;
      font-weight: 500;
      padding: 0;
      overflow: hidden;
   }
   .pn-announce__inner {
      max-width: 1240px;
      margin: 0 auto;
      padding: 9px 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
   }
   .pn-announce__text {
      display: inline-flex;
      align-items: center;
      gap: 6px;
   }
   .pn-announce__icon { flex-shrink: 0; opacity: 0.85; }
   .pn-announce__link {
      color: #fff;
      text-decoration: none;
      font-weight: 700;
      border-bottom: 1px solid rgba(255,255,255,0.4);
      padding-bottom: 1px;
      transition: border-color .15s;
   }
   .pn-announce__link:hover { border-color: #fff; color: #fff; }
   .pn-announce__close {
      background: none;
      border: none;
      color: rgba(255,255,255,0.6);
      cursor: pointer;
      padding: 4px;
      margin-left: 8px;
      line-height: 1;
      border-radius: 4px;
      transition: color .12s;
      flex-shrink: 0;
   }
   .pn-announce__close:hover { color: #fff; }
   
   /* ─── Public navbar ─── */
   
   .navbar.navbar-default.public-navbar {
      position: relative;
      top: 0;
      z-index: 1030;
      background: var(--bg-1);
      border: none;
      box-shadow: 0px 5px 20px 0px rgba(77, 140, 153, 0.15);
      margin: 0;
      overflow-x: clip;
      transition: box-shadow .35s var(--ease-out-expo), background-color .35s;
   }
   .navbar.navbar-default.public-navbar.is-fixed {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
   }
   .public-navbar.is-scrolled {
      box-shadow: 0 1px 0 var(--line), 0 4px 20px rgba(0,0,0,.04);
      background: rgba(255,255,255,0.88);
      backdrop-filter: blur(14px) saturate(180%);
      -webkit-backdrop-filter: blur(14px) saturate(180%);
   }
   [data-theme="dark"] .public-navbar.is-scrolled {
      background: rgba(28,33,51,0.86);
      box-shadow: none;
   }
   [data-theme="dark"] .navbar.navbar-default.public-navbar {
      box-shadow: none;
   }
   .public-navbar > .container {
      max-width: 1440px !important;
      width: 100% !important;
      padding: 0 24px !important;
      margin: 0 auto;
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      flex-wrap: nowrap !important;
      min-width: 0;
      box-sizing: border-box;
      height: 80px;
   }
   .public-navbar .navbar-header {
      float: none !important;
      margin: 0 40px 0 0 !important;
      display: flex !important;
      align-items: center;
      flex-shrink: 0;
   }
   .public-navbar .navbar-collapse {
      float: none;
      flex: 1 1 0% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      padding: 0 !important;
      border: 0 !important;
      box-shadow: none !important;
      margin: 0 !important;
      height: auto !important;
      overflow: visible !important;
   }
   .public-navbar .navbar-right {
      float: none !important;
      margin-left: auto !important;
      margin-right: 0;
      display: flex !important;
      align-items: center;
   }
   .public-navbar .navbar-brand {
      display: flex; align-items: center; gap: 10px;
      height: auto; padding: 6px 0;
      color: var(--ink-1); font-weight: 700;
      float: none; margin-left: 0;
   }
   .public-navbar .navbar-brand .brand-text { font-size: 15px; }
   .public-navbar .navbar-brand img {
   max-height: 48px;
   height: 60px;
   width: auto;
   max-width: 200px;
   display: block;
   }
   
   /* ── Nav links ── */
   .pn-nav-links {
      display: flex !important;
      align-items: center;
      justify-content: end !important;
      flex: 1 !important;
      gap: 0;
      margin: 0 !important;
      padding: 0 !important;
      float: none !important;
      list-style: none;
   }
   .pn-nav-links > li > a,
   .pn-services-trigger {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--ink-2);
      font-size: 14px;
      font-weight: 500;
      padding: 7px 14px;
      border-radius: 8px;
      text-decoration: none;
      background: none;
      border: none;
      cursor: pointer;
      font-family: inherit;
      line-height: 1.5;
      white-space: nowrap;
      transition: color .15s, background .15s;
   }
   .pn-nav-links > li > a:hover,
   .pn-nav-links > li > a:focus,
   .pn-services-trigger:hover,
   .pn-services-drop.is-open .pn-services-trigger {
      color: var(--ink-1);
      background: var(--bg-2);
      text-decoration: none;
   }
   .pn-nav-links > li.active > a { color: var(--brand); }
   
   /* ── Services mega-dropdown ── */
   .pn-services-drop { position: relative; }
   .pn-chevron {
      transition: transform .2s var(--ease-out-expo);
      flex-shrink: 0;
   }
   .pn-services-drop.is-open .pn-chevron { transform: rotate(180deg); }
   .pn-mega {
      display: none;
      position: absolute;
      top: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%) translateY(6px);
      min-width: 580px;
      background: var(--bg-1);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0,0,0,.10), 0 4px 16px rgba(0,0,0,.05);
      padding: 0;
      z-index: 1050;
      opacity: 0;
      transition: opacity .2s, transform .2s var(--ease-out-expo);
      pointer-events: none;
   }
   .pn-services-drop.is-open .pn-mega {
      display: block;
      opacity: 1;
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;
   }
   .pn-mega__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 20px 10px;
      border-bottom: 1px solid var(--line-2);
   }
   .pn-mega__title {
      font-size: 11px; font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--ink-3);
   }
   .pn-mega__all {
      font-size: 13px; font-weight: 600;
      color: var(--brand);
      text-decoration: none;
      transition: opacity .15s;
   }
   .pn-mega__all:hover { opacity: 0.8; text-decoration: none; color: var(--brand); }
   .pn-mega__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 4px;
      padding: 10px;
   }
   .pn-mega__card {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px;
      border-radius: 12px;
      text-decoration: none;
      color: var(--ink-1);
      transition: background .12s;
   }
   .pn-mega__card:hover {
      background: var(--bg-2);
      color: var(--ink-1);
      text-decoration: none;
   }
   .pn-mega__icon {
      width: 36px; height: 36px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
   }
   .pn-mega__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
   .pn-mega__name { font-size: 13px; font-weight: 600; line-height: 1.2; }
   .pn-mega__count { font-size: 11px; color: var(--ink-3); font-weight: 500; line-height: 1.2; }
   
   /* ── CTA group ── */
   .pn-cta-group {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      margin: 0 !important;
      padding: 0 !important;
      float: none !important;
      list-style: none;
      margin-left: auto !important;
   }
   .pn-cta-item { list-style: none; }
   .pn-cta-signin > a {
      display: inline-flex !important;
      align-items: center;
      padding: 7px 16px !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      color: var(--ink-1) !important;
      border: 1px solid var(--line) !important;
      border-radius: 9px;
      text-decoration: none !important;
      background: transparent !important;
      transition: background .15s, border-color .15s;
      white-space: nowrap;
   }
   .pn-cta-signin > a:hover {
      background: var(--bg-2) !important;
      border-color: var(--ink-4) !important;
      color: var(--ink-1) !important;
      text-decoration: none !important;
   }
   .pn-cta-signup > a {
      display: inline-flex !important;
      align-items: center;
      gap: 6px;
      padding: 6px 12px !important;
      font-size: 14px !important;
      font-weight: 700 !important;
      color: #fff !important;
      background: linear-gradient(90deg, #7277FF 0%, #53B9FF 100%);
      box-shadow: 0px 8px 10px 0px #609EFF33;
      border: none !important;
      border-radius: 9px;
      text-decoration: none !important;
      box-shadow: var(--shadow-brand);
      transition: background .15s, transform .12s, box-shadow .15s;
      white-space: nowrap;
   }
   .pn-cta-signup > a:hover {
      background: linear-gradient(90deg, #7277FF 0%, #53B9FF 100%) !important;
      color: #fff !important;
      text-decoration: none !important;
      transform: translateY(-1px);
      box-shadow: var(--shadow-brand-lg);
   }
   .pn-cta-signup > a:active { transform: translateY(0); }
   .pn-cta-signup > a svg {
      transition: transform .2s var(--ease-out-expo);
      flex-shrink: 0;
   }
   .pn-cta-signup > a:hover svg { transform: translateX(3px); }
   
   .public-navbar .nav > li > a {
      color: var(--ink-2);
      font-size: 14px; font-weight: 500;
      padding: 7px 14px;
   }
   .public-navbar .nav > li > a:hover,
   .public-navbar .nav > li > a:focus { color: var(--ink-1); background: var(--bg-2); border-radius: 8px; text-decoration: none; }
   .public-navbar .nav > li.active > a,
   .public-navbar .nav > li.active > a:hover,
   .public-navbar .nav > li.active > a:focus { color: var(--brand); background: transparent; }
   
   /* ─── Public navbar hamburger button ─── */
   .public-menu-toggle {
      display: none;
      width: 44px; height: 44px;
      align-items: center; justify-content: center;
      flex-direction: column;
      gap: 5px;
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 0;
      cursor: pointer;
      flex-shrink: 0;
      transition: background .15s;
   }
   .public-menu-toggle:hover { background: var(--bg-2); }
   .public-menu-toggle__bar {
      display: block;
      width: 20px; height: 2px;
      background: var(--ink-1);
      border-radius: 2px;
      transition: transform .25s, opacity .2s;
   }
   .public-menu-toggle.is-open .public-menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
   .public-menu-toggle.is-open .public-menu-toggle__bar:nth-child(2) { opacity: 0; }
   .public-menu-toggle.is-open .public-menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
   
   .public-shell {
      min-height: calc(100vh - 64px);
      min-height: calc(100dvh - 64px);
      padding: 32px 16px;
      display: flex;
      align-items: flex-start;
      justify-content: center;
   }
   /* Auth pages: remove shell padding so the auth grid fills the viewport */
   .public-shell--auth {
     padding: 90px 0 105px 0;
     min-height: auto;
   }
   
   /* Desktop: make inputs slightly narrower than the submit button */
   .auth-field__wrap,
   .auth-field__input {
     max-width: 450px;
     margin-left: 0;
     margin-right: auto;
   }
   /* ─── Auth card + tab toggle ─── */
   .auth-card {
      width: 100%;
      max-width: 660px;
      margin: 0 auto;
      background: var(--bg-1);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-2);
   }
   /* Back link on split auth pages */
   .auth-back {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 500;
      color: var(--ink-3);
      text-decoration: none;
      margin-bottom: 28px;
      transition: color var(--dur-fast) ease;
   }
   .auth-back:hover { color: var(--ink-1); text-decoration: none; }
   .auth-tabs {
      display: flex;
      position: relative;
      border-bottom: 1px solid var(--line);
      margin-bottom: 28px;
   }
   .auth-tabs__btn {
      flex: 1;
      padding: 12px 16px;
      border: 0;
      background: transparent;
      color: var(--ink-3);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      text-align: center;
      transition: color var(--dur-fast) ease;
      -webkit-appearance: none;
   }
   .auth-tabs__btn--active {
      color: var(--brand);
   }
   .auth-tabs__btn:hover:not(.auth-tabs__btn--active) {
      color: var(--ink-1);
   }
   .auth-tabs__indicator {
      position: absolute;
      bottom: -1px;
      left: 0;
      height: 2px;
      background: var(--brand);
      border-radius: 1px;
      transition: transform var(--dur-normal) var(--ease-out-expo),
                  width var(--dur-normal) var(--ease-out-expo);
   }
   /* Divider between submit and social login */
   .auth-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--ink-3);
      font-size: 12px;
      margin: 4px 0;
   }
   .auth-divider::before,
   .auth-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--line);
   }
   /* ─── Auth stack (heading + card) ─── */
   .auth-stack {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 750px;
      margin: 0 auto;
   }
   .auth-stack .auth-card {
      max-width: 100%;
   }
   
   /* ─── Shared page hero + breadcrumb ─── */
   .one-page-hero {
      text-align: center;
      margin-bottom: var(--space-section-sm);
   }
   .one-page-title {
      font-family: 'Poppins', 'Inter', sans-serif;
      font-size: 36px;
      font-weight: 600;
      letter-spacing: -0.025em;
      color: var(--ink-1);
      line-height: 1.12;
      margin-bottom: var(--space-section-sm);
   }
   .one-page-title__accent { color: var(--accent); }
   .one-breadcrumb {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 13px;
      color: var(--ink-3);
      margin-bottom: 20px;
      padding-top: 16px;
   }
   .one-breadcrumb__link { color: var(--ink-3); text-decoration: none; }
   .one-breadcrumb__link:hover { color: var(--ink-1); }
   .one-breadcrumb__current { color: var(--ink-1); font-weight: 500; }
   
   /* ─── Auth heading ─── */
   .auth-heading {
      font-family: 'Poppins', 'Inter', sans-serif;
      font-size: 40px;
      font-weight: 900;
      color: var(--ink-1);
      line-height: 1.5;
      margin: 0 0 60px;
      letter-spacing: -0.5px;
      text-align: center;
   }
   .auth-heading__accent {
      color: var(--accent);
   }
   
   /* Panel wrapper animates height to prevent page jump on tab switch */
   .auth-panels-wrap {
      position: relative;
      overflow: hidden;
      transition: height var(--dur-slow) var(--ease-out-expo);
   }
   .auth-panel {
      padding: 45px 40px;
      opacity: 1;
      transition: opacity .2s ease;
   }
   .auth-panel[hidden] {
      display: block !important;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
   }
   
   .auth-eyebrow {
      font-size: 13px;
      color: var(--brand);
      font-weight: 500;
      margin-bottom: 8px;
   }
   .auth-h1 {
      font-size: 32px;
      font-weight: 600;
      letter-spacing: -0.025em;
      margin: 0 0 8px;
      color: var(--ink-1);
      line-height: 1.2;
   }
   
   .auth-form {
      display: flex;
      flex-direction: column;
      gap: 14px;
      max-width: 450px;
      margin-left: auto;
      margin-right: auto;
      width: 100%;
   }
   .auth-field {
      margin: 0;
   }
   .auth-field__label-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 6px;
   }
   .auth-field__label {
      font-size: 12px;
      font-weight: 500;
      color: var(--ink-2);
      margin: 0 0 6px;
      display: block;
   }
   .auth-field__wrap--pw {
      position: relative;
   }
   .auth-field__wrap--pw .auth-field__input {
      padding-right: 44px;
   }
   .auth-pw-toggle {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: 0;
      padding: 0;
      cursor: pointer;
      color: var(--ink-3);
      display: flex;
      align-items: center;
      line-height: 1;
   }
   .auth-pw-toggle:hover { color: var(--ink-1); }
   .auth-field__forgot {
      font-size: 12px;
      color: var(--brand);
      font-weight: 500;
      text-decoration: none;
      display: block;
      text-align: right;
      margin-top: 6px;
   }
   .auth-field__wrap {
      position: relative;
   }
   .auth-field__icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--ink-3);
      pointer-events: none;
   }
   .auth-field__input {
      width: 100%;
      height: 42px;
      padding: 0 14px 0 38px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--bg-1);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 14px;
      color: var(--ink-1);
      transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
   }
   .auth-field__input:focus {
      border-color: var(--brand);
      outline: 0;
      box-shadow: 0 0 0 3px rgba(74,108,247,.12);
   }
   /* Plain variant — no left icon padding */
   .auth-field__input--plain {
      padding-left: 14px;
   }
   /* Terms checkbox row */
   .auth-terms {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 12px;
      color: var(--ink-2);
      line-height: 1.5;
      margin: 4px 0 0;
      cursor: pointer;
   }
   .auth-terms input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
   .auth-terms a { color: var(--brand); font-weight: 500; }
   
   /* Captcha containment — keeps the verify-human popup inside the form */
   .captcha-block {
      position: relative;
      max-width: 100%;
      overflow: visible;
      display: flex;
      justify-content: center;
   }
   .captcha-block iframe,
   .captcha-block > div {
      position: relative !important;
      margin: 0 auto;
   }
   .auth-btn-row {
      display: flex;
      align-items: stretch;
      gap: 10px;
      margin-top: 10px;
   }
   .auth-btn-row .auth-google-signin {
      flex: 1;
   }
   .auth-submit {
   max-width: 400px;
   margin-left: 0;
   margin-right: auto;
   flex: 0 0 auto;
   min-width: 150px;
   height: 46px;
   border: 0;
   border-radius: var(--radius);
   background: var(--brand);
   color: #fff;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 14.5px;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   cursor: pointer;
   box-shadow: var(--shadow-1);
   transition: background var(--dur-fast) ease,
                  box-shadow var(--dur-normal) var(--ease-out-expo),
                  transform var(--dur-fast) ease;
   }
   .auth-submit:hover, .auth-submit:focus {
      background: var(--brand-2);
      color: #fff;
      box-shadow: var(--shadow-brand);
      transform: translateY(-2px);
   }
   .auth-submit:active {
      transform: scale(0.97);
      box-shadow: var(--shadow-1);
   }
   /* Google Sign-In rendered button — match auth-submit size */
   .auth-google-signin {
      width: 100%;
      height: 50px;
      border-radius: 8px;
      overflow: hidden;
   }
   .auth-google-signin iframe {
      width: 100% !important;
      height: 50px !important;
      border-radius: 8px !important;
   }
   .auth-google-signin [role="button"] {
      display: inline-flex !important;
      align-items: center !important;
      gap: 24px !important;
      height: 50px !important;
      width: 100% !important;
      padding: 0 24px !important;
      background: var(--bg-1) !important;
      color: var(--ink-1) !important;
      border: 1px solid var(--line) !important;
      border-radius: var(--radius-sm) !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      cursor: pointer !important;
      white-space: nowrap !important;
      transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease !important;
      box-shadow: none !important;
   }
   .auth-google-signin [role="button"]:hover {
      background: var(--bg-2) !important;
      border-color: var(--ink-3) !important;
   }
   .auth-google-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      max-width: 400px;
      height: 44px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--bg-1);
      color: var(--ink-1);
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      cursor: pointer;
      transition: background .15s, border-color .15s, box-shadow .15s;
   }
   .auth-google-btn:hover {
      background: var(--bg-2);
      border-color: var(--line);
      box-shadow: 0 1px 4px rgba(0,0,0,.08);
      color: var(--ink-1);
      text-decoration: none;
   }
   
   @media (max-width: 860px) {
    .auth-field__wrap,
    .auth-field__input,
    .auth-submit {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .auth-h1 { font-size: 26px; }
   }
   
   /* ─── Buttons (Pulse) ─── */
   
   .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: 8px;
      height: 38px; padding: 0 16px;
      border-radius: 8px;
      font-weight: 500; font-size: 13.5px;
      border: 1px solid transparent;
      transition: background var(--dur-fast) ease,
                  border-color var(--dur-fast) ease,
                  box-shadow var(--dur-normal) var(--ease-out-expo),
                  transform var(--dur-fast) ease;
   }
   .btn:active {
      transform: scale(0.97);
   }
   .btn-primary {
      background: var(--brand); border-color: var(--brand); color: #fff;
      box-shadow: 0 1px 2px rgba(240,101,67,.15);
   }
   .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
      background: var(--brand-2); border-color: var(--brand-2); color: #fff;
      box-shadow: var(--shadow-brand);
      transform: translateY(-1px);
   }
   .btn-default {
      background: var(--bg-1); border-color: var(--line); color: var(--ink-1);
   }
   .btn-default:hover, .btn-default:focus {
      background: var(--bg-2); border-color: var(--ink-4); color: var(--ink-1);
   }
   .btn-block { width: 100%; display: flex; }
   .btn-lg { height: 44px; font-size: 14.5px; padding: 0 20px; }
   .btn-sm { height: 32px; font-size: 12px; padding: 0 12px; }
   .btn-xs { height: 26px; font-size: 12px; padding: 0 10px; }
   
   /* ─── Form controls (Pulse) ─── */
   .form-group { margin-bottom: 20px; }
   .form-group:last-child { margin-bottom: 0; }
   .modal-body label, .control-label {
      font-size: 12px;
      font-weight: 400;
      line-height: 1;
      margin-bottom: 6px;
      color: var(--shell-icon);
      display: block;
      padding:8px 0 0 10px;
   }
   .form-control {
      height: 48px;
      padding: 0 30px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--glass-border);
      font-size: 14px; 
      font-weight:400;
      color: var(--ink-1);
      transition: border-color .15s, box-shadow .15s;
      width:100%;
   }
   .form-control::placeholder {
      color: var(--line-3);
   }
   .form-control:hover {
      border-color: rgba(255, 98, 85, 0.42);
      box-shadow:
          0 0 0 4px rgba(255, 98, 85, 0.09),
          0 1px 3px rgba(255, 98, 85, 0.14);
   }
   .form-control:focus,
   .form-control:focus-visible {
      border-color: var(--accent);
      box-shadow:
          0 0 0 4px rgba(255, 98, 85, 0.18),
          0 0 18px rgba(255, 98, 85, 0.24);
   }
   .form-control[readonly] { background: var(--bg-2); color: var(--ink-2); }
   .form-control.with-icon { padding-left: 38px; }
   textarea.form-control { height: auto; padding: 15px 30px; line-height:1.4;}
   
   select.form-control {
      padding:0;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      background-size: 16px 16px;
      padding:15px 30px;
      padding-right: 42px;
   }
   select.form-control:focus {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath d='M5 12.5 10 7.5 15 12.5' fill='none' stroke='%232962ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   }
   
   /* ─── Cards / page header ─── */
   
   .page-header {
      border: 0; padding: 0; margin: 0 0 20px;
      display: flex; justify-content: space-between; align-items: flex-end;
      gap: 16px; flex-wrap: wrap;
   }
   .page-title { font-size: 20px; font-weight: 700; margin: 0 0 4px; color: var(--ink-1); }
   .page-sub { color: var(--ink-3); font-size: 13px; }
   
   /* ============================================================
     SHARED SUB-PAGE SCAFFOLD
     Every dashboard sub-page (addfunds, affiliates, api, orders,
     services, child_panel, giveaway, levels, tickets, …) uses this
     same skeleton so the page chrome lives in ONE place:
       .subpage          → page root
       .subpage-head     → header row (holds the title + optional actions)
       .subpage-title    → big left-aligned title; first word coral via <span>
       .subpage-body     → vertical stack of content boxes (consistent gap)
       .subpage-card     → the white "content box"
     ============================================================ */
   .subpage { width: 100%; }
   .subpage-head {
      display: flex; align-items: flex-end; justify-content: space-between;
      gap: 16px; flex-wrap: wrap;
   }
   .subpage-title {
      font-family: 'Poppins', 'Inter', sans-serif;
      font-size: 36px;
      font-weight: 600;
      color: var(--ink-1);
      line-height: 1.12;
      margin-bottom: var(--space-section-sm);
   }
   .subpage-head .subpage-title {
      margin-bottom: 18px;
   }
   .subpage-title span { 
       background: linear-gradient(90deg, #FF6255 0%, #FF8D64 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }
   .subpage-sub { margin: 8px 0 0; color: var(--ink-3); font-size: 14px; }
   .subpage-body { display: flex; flex-direction: column; gap: 10px; }
   
   /* Content box — shared white card used for every section */
   .subpage-card {
      background: var(--bg-1);
      box-shadow: var(--shadow-1);
      border: 1px solid var(--line-4);
      border-radius: var(--radius);
      overflow: hidden;
      transition: box-shadow var(--dur-normal) var(--ease-out-expo),
                  transform var(--dur-normal) var(--ease-out-expo),
                  border-color var(--dur-fast) ease;
      padding: 0 15px;
   }
   .subpage-card--flush { overflow: hidden; }
   
   /* In-card heading — leading words muted, key word(s) in <b> bold dark */
   @media (max-width: 640px) {
      .subpage-title { font-size: 24px; }
      .subpage-card { padding: 0 10px; }
   }
   
   .card {
      background: var(--bg-1);
      box-shadow: var(--shadow-1);
      border: 1px solid var(--line-4);
      border-radius: var(--radius);
      overflow: hidden;
      transition: box-shadow var(--dur-normal) var(--ease-out-expo),
                  transform var(--dur-normal) var(--ease-out-expo),
                  border-color var(--dur-fast) ease;
   }
   .card:hover {
      box-shadow: var(--shadow-2);
   }
   /* Featured card — brand accent border + deeper shadow */
   .card--featured {
      border-color: var(--brand);
      box-shadow: var(--shadow-brand);
   }
   .card--featured:hover {
      box-shadow: var(--shadow-brand-lg);
      transform: translateY(-2px);
   }
   .card-header { padding: 16px 20px; border-bottom: 1px solid var(--line); }
   .card-body { padding: 30px; }
   .card-body2 { padding: 30px 20px; }
   .card-body p, .card-body2 p {
      color: var(--ink-2);
      font-size:14px;
      font-weight:400;
      line-height:24px;
   }
   
   /* ─── Tables ─── */
   
   .table { 
      margin-bottom: 0; 
      width: 100%;
      border-collapse: separate; border-spacing: 0; color: var(--ink-2); 
      table-layout: auto;
   }
   .table > thead > tr > th {
      background: var(--bg-3);
      color: var(--ink-1);
      font-size: 14px;
      font-weight: 400; 
      vertical-align: middle;
      padding:15px;
      text-align: left;
   }
   .table > thead th:first-child { border-radius: 8px 0 0 8px; }
   .table > thead th:last-child { border-radius: 0 8px 8px 0; }
   .table-hover > tbody > tr:hover { background: var(--bg-2); }
   
   .table > tbody > tr > td {
      padding:15px;
      vertical-align: middle;
      border-bottom: 1px solid #CCCCCC;
   }
   
   /* ─── Badges & labels ─── */
   
   .badge {
      display: inline-flex; align-items: center;
      padding: 3px 8px;
      background: var(--bg-3); color: var(--ink-1);
      border-radius: 999px;
      font-size: 12px; font-weight: 600;
      line-height: 1.4;
   }
   .badge-success, .label-success { background: var(--green-soft); color: var(--green); }
   .badge-warning, .label-warning { background: var(--amber-soft); color: var(--amber); }
   .badge-danger,  .label-danger  { background: var(--red-soft); color: var(--red); }
   .badge-info,    .label-info    { background: var(--blue-soft); color: var(--blue); }
   
   /* ─── Dropdowns ─── */
   
   .dropdown,
   div.dropdown,
   .services-toolbar .dropdown,
   .services-toolbar-left .dropdown {
      position: relative !important;
   }
   .dropdown-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 1000;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-3);
      padding: 6px;
      margin-top: 6px;
      min-width: 90px;
      background: var(--ctrl-bg);
   }
   .dropdown-menu li {
   list-style: none;
   }
   .open > .dropdown-menu,
   .dropdown-menu.show {
      display: block;
   }
   
   /* Bootstrap responsive utilities — fallback in case Bootstrap CSS is missing
     or its rules are out-cascaded. xs ≤ 767, sm 768-991, md 992-1199, lg ≥ 1200 */
   .hidden { display: none !important; }
   .hidden-xs, .hidden-sm, .hidden-md, .hidden-lg { /* default visible */ }
   .visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; }
   .visible-xs-block, .visible-sm-block, .visible-md-block, .visible-lg-block { display: none !important; }
   
   @media (max-width: 767px) {
      .hidden-xs { display: none !important; }
      .visible-xs, .visible-xs-block { display: block !important; }
      tr.visible-xs { display: table-row !important; }
      td.visible-xs, th.visible-xs { display: table-cell !important; }
   }
   @media (min-width: 768px) and (max-width: 991px) {
      .hidden-sm { display: none !important; }
      .visible-sm, .visible-sm-block { display: block !important; }
      tr.visible-sm { display: table-row !important; }
      td.visible-sm, th.visible-sm { display: table-cell !important; }
   }
   @media (min-width: 992px) and (max-width: 1199px) {
      .hidden-md { display: none !important; }
      .visible-md, .visible-md-block { display: block !important; }
      tr.visible-md { display: table-row !important; }
      td.visible-md, th.visible-md { display: table-cell !important; }
   }
   @media (min-width: 1200px) {
      .hidden-lg { display: none !important; }
      .visible-lg, .visible-lg-block { display: block !important; }
      tr.visible-lg { display: table-row !important; }
      td.visible-lg, th.visible-lg { display: table-cell !important; }
   }
   .dropdown-menu > li > a {
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 13.5px;
      color: var(--ink-1);
   }
   .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
      background: var(--bg-2); color: var(--ink-1);
   }
   .dropdown-menu > .active > a,
   .dropdown-menu > .active > a:hover,
   .dropdown-menu > .active > a:focus {
      background: var(--brand-soft); color: var(--brand);
   }
   
   /* ─── Pagination ─── */
   
   .pagination {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px;
      margin: 16px 0;
      padding-left: 0;
      list-style: none;
   }
   .pagination > li {
      list-style: none;
   }
   .pagination > li::marker {
      content: none;
   }
   /* Full-width centered pagination — blog list only */
   .blog-page .pagination {
      display: flex;
      justify-content: center;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
   }
   .pagination > li > a, .pagination > li > span {
      border: 1px solid var(--line);
      border-radius: 6px !important;
      padding: 6px 12px;
      margin: 0;
      color: var(--ink-2);
      font-size: 13px;
      background: var(--bg-1);
   }
   .pagination > li > a:hover { background: var(--bg-2); color: var(--ink-1); }
   .pagination > .active > a,
   .pagination > .active > span,
   .pagination > .active > a:hover,
   .pagination > .active > span:hover {
      background: var(--brand); border-color: var(--brand); color: #fff;
   }
   
   /* ─── Theme toggle ─── */
   .theme-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px; height: 34px;
      border: none;
      border-radius: 8px;
      background: transparent;
      color: var(--ink-3);
      cursor: pointer;
      padding: 0;
      transition: background .12s, color .12s;
   }
   .theme-toggle:hover { background: var(--bg-2); color: var(--ink-1); }
   .theme-toggle svg { width: 18px; height: 18px; flex-shrink: 0; }
   .theme-toggle .icon-sun { display: none; }
   .theme-toggle .icon-moon { display: block; }
   [data-theme="dark"] .theme-toggle .icon-sun { display: block; }
   [data-theme="dark"] .theme-toggle .icon-moon { display: none; }
   
   /* Language switcher (topbar — compact icon-only) */
   .topbar-lang { position: relative; display: inline-flex; align-items: center; }
   .topbar-lang .topbar-lang-btn { padding: 0; overflow: hidden; }
   .topbar-lang-flag-img {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 3px;
    display: block;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06);
   }
   .topbar-lang .dropdown-menu > li > a { display: flex !important; align-items: center; gap: 8px; }
   .topbar-lang .dropdown-menu .topbar-lang-flag-img { width: 20px; height: 14px; }
   
   /* Dropdown menus — force hidden until .open is toggled */
   .topbar-lang .dropdown-menu { display: none !important; }
   .topbar-lang.open .dropdown-menu { display: block !important; }
   .topbar-lang .dropdown-menu > li { display: list-item !important; }
   
   .dropdown-currencies { position: relative; display: inline-flex; align-items: center; }
   .dropdown-currencies .dropdown-menu { display: none !important; }
   .dropdown-currencies.open .dropdown-menu { display: block !important; }
   .dropdown-currencies .dropdown-menu > li { display: list-item !important; list-style:none; }
   
   /* Perfect Panel injects admin CSS after ours and unhides .dropdown-menu — force it back */
   .topbar-user .dropdown-menu { display: none !important; }
   .topbar-user.open .dropdown-menu { display: block !important; }
   .topbar-user .dropdown-menu > li { display: list-item !important; list-style: none; }
   
   /* Logo is theme-agnostic (transparent bg, works on both light/dark) */
   
   /* ─── Modals ─── */
   
   .modal-content { border-radius: var(--radius-lg); }
   
   /* ─── Alerts / notify wrapper ─── */
   
   .alert {
      padding: 12px 16px;
      border-radius: var(--radius);
      font-size: 12px;
      border: 1px solid transparent;
      margin:10px 0;
   }
   .alert button.close { float:right; padding:0 3px; }
   .alert-success { background: var(--green-soft); color: var(--green); border-color: rgba(31,157,85,.2); }
   .alert-warning { background: var(--amber-soft); color: var(--amber); border-color: rgba(184,130,23,.2); }
   .alert-danger  { background: var(--red-soft);   color: var(--red);   border-color: rgba(196,50,47,.2); }
   .alert-info    { background: var(--blue-soft);  color: var(--blue);  border-color: rgba(240,101,67,.2); }
   
   #notify-wrapper {
      position: fixed; top: 16px; right: 16px;
      z-index: 9999; max-width: 380px;
      box-shadow: var(--shadow-3);
   }
   
   /* ─── Mobile menu trigger ─── */
   /* Hamburger sits inline at the start of the topbar (best-practice mobile layout)
     — not a floating fixed button. Hidden on desktop, shown via the @media block below. */
   .navbar-toggle-mobile {
      display: none;
      width: 40px; height: 40px;
      align-items: center; justify-content: center;
      flex-direction: column;
      gap: 4px;
      background: var(--bg-1);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 0;
      margin: 0;
      cursor: pointer;
      flex-shrink: 0;
   }
   .navbar-toggle-mobile:hover { background: var(--bg-2); }
   .navbar-toggle-mobile .icon-bar {
      display: block;
      width: 18px; height: 2px;
      background: var(--ink-1);
      border-radius: 2px;
      transition: transform .2s, opacity .2s;
   }
   .navbar-toggle-mobile.is-open .icon-bar:nth-child(2) { transform: translateY(6px) rotate(45deg); }
   .navbar-toggle-mobile.is-open .icon-bar:nth-child(3) { opacity: 0; }
   .navbar-toggle-mobile.is-open .icon-bar:nth-child(4) { transform: translateY(-6px) rotate(-45deg); }
   
   /* Sidebar overlay backdrop on mobile.
     Hidden state must NOT capture clicks — otherwise it sits over the topbar
     (this element comes after .app-main in source order) and silently
     intercepts taps on the hamburger button. Use pointer-events to gate. */
   .sidebar-backdrop {
      display: none;
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.4);
      z-index: 49;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s;
   }
   .sidebar-backdrop.is-visible {
      opacity: 1;
      pointer-events: auto;
   }
   
   /* ─── Responsive ─── */
   
   @media (max-width: 991px) {
      .app { grid-template-columns: 1fr; }
      .sidebar {
          position: fixed;
          top: 0; left: 0; bottom: 0;
          width: 260px; max-width: 80vw;
          z-index: 55;
          transform: translateX(-100%);
          transition: transform .25s;
          box-shadow: 2px 0 12px rgba(0,0,0,0.08);
      }
      .sidebar.open { transform: translateX(0); }
      .sidebar-backdrop { display: block; }
      .app-main { margin-left: 0; grid-column: 1; max-width: 100vw; overflow-x: clip; }
      .navbar-toggle-mobile { display: inline-flex; }
      .topbar { padding-left: 12px; padding-right: 8px; gap: 12px; }
      .topbar-inner { gap: 8px; flex-wrap: nowrap; min-width: 0; }
      .topbar-search {
          width: auto;
          flex: 1 1 0;
          min-width: 0;
          margin-inline-start: 10px;
      }
      .topbar-spacer { display: none; }
      .topbar-icons { flex-shrink: 0; margin-left: auto; }
      /* Hide balance amount text on tablet to save room */
      .topbar-balance-amount { display: none; }
   
      /* Compact stepper on mobile — numbers only, no labels */
      .neworder-stepper .step span:last-child { display: none; }
      .neworder-summary > .neworder-stepper { padding: 8px 10px; }
   
      .auth-shell.with-aside { grid-template-columns: 1fr; max-width: 420px; }
   }
   
   /* Phone-only — drop topbar search to give room for nav links */
   @media (max-width: 639px) {
      .topbar-search { display: none !important; }
      .topbar { padding-left: 8px; padding-right: 8px; gap: 6px; }
      .topbar-icons { gap: 2px; }
      .topbar-icon-btn { width: 32px; height: 32px; }
      .topbar-balance-btn { height: 32px; padding: 0 8px; font-size: 12px; }
      .topbar-divider { margin: 0 6px; }
   }
   
   /* ─── Kill stray top-of-page borders/elements above public header ─── */
   
   body > button:first-child:not(.navbar-toggle-mobile),
   body > .navbar-toggle:not(.navbar-toggle-mobile) {
      display: none !important;
   }
   
   /* Hide PP's stock BS3 hamburger button — keep it hidden at all sizes.
     Excludes `.navbar-toggle-mobile` (our custom sidebar trigger). */
   .navbar-toggle:not(.navbar-toggle-mobile),
   .navbar-header .navbar-toggle:not(.navbar-toggle-mobile),
   button.navbar-toggle:not(.navbar-toggle-mobile) {
      display: none !important;
      border: 0 !important;
      background: transparent !important;
   }
   
   /* Force BS3 collapse panel visible on desktop, stack on mobile */
   @media (min-width: 1101px) {
      .navbar-collapse,
      .navbar-collapse.collapse,
      .navbar-collapse.collapse.in,
      #public-navbar.collapse,
      #public-navbar.collapse:not(.in) {
          display: flex !important;
          align-items: center;
          justify-content: center;
          flex: 1 1 0%;
          height: auto !important;
          padding: 0 !important;
          max-height: none !important;
          overflow: visible !important;
          flex: 1;
          justify-content: flex-start;
      }
   }
   
   @media (max-width: 1100px) {
      /* ── Public navbar: hamburger + dropdown panel ── */
      .public-navbar {
          overflow: visible !important;
      }
      .public-navbar > .container {
          display: flex !important;
          flex-wrap: wrap !important;
          align-items: center;
          padding: 0 12px !important;
          max-width: 100% !important;
          width: 100% !important;
          box-sizing: border-box !important;
          overflow: visible !important;
          height: auto !important;
          min-height: 56px;
      }
      .public-navbar .navbar-header,
      .public-navbar > .container > .navbar-header {
          display: flex !important;
          flex-direction: row !important;
          align-items: center !important;
          width: 100% !important;
          margin: 0 !important;
          padding: 0 !important;
          float: none !important;
          box-sizing: border-box !important;
      }
      /* Logo — left side, shrinks if needed */
      .public-navbar .navbar-header > .navbar-brand {
          flex: 1 1 0% !important;
          min-width: 0 !important;
          float: none !important;
          padding: 6px 0 !important;
          margin: 0 !important;
          order: -1 !important;
      }
      .public-navbar .navbar-brand img,
      .public-navbar .navbar-brand svg {
          height: 36px !important;
          width: auto !important;
          max-width: 140px !important;
      }
   
      /* Hamburger button — end side, never hidden, never shrinks */
      .public-navbar .navbar-header > .public-menu-toggle {
          display: flex !important;
          flex: 0 0 44px !important;
          width: 44px !important;
          height: 44px !important;
          float: none !important;
          margin: 0 !important;
          visibility: visible !important;
          opacity: 1 !important;
          position: static !important;
          overflow: visible !important;
          order: 99 !important;
      }
   
      /* Collapse nav behind hamburger — hide all states */
      .public-navbar .navbar-collapse,
      .public-navbar .navbar-collapse.collapse,
      .public-navbar .navbar-collapse.collapse.in,
      .public-navbar #public-navbar,
      .public-navbar #public-navbar.collapse,
      #public-navbar.collapse,
      #public-navbar.collapse.in {
          display: none !important;
          width: 100%;
          order: 10;
          border: 0 !important;
          box-shadow: none !important;
          max-height: none !important;
          height: auto !important;
          overflow: visible !important;
      }
      /* Open state — highest specificity wins */
      .public-navbar #public-navbar.public-nav-open,
      #public-navbar.public-nav-open,
      #public-navbar.collapse.public-nav-open,
      #public-navbar.collapse.in.public-nav-open {
          display: block !important;
          width: 100% !important;
          padding: 8px 0 12px !important;
          border-top: 1px solid var(--line) !important;
          height: auto !important;
          max-height: none !important;
          overflow: visible !important;
      }
      #public-navbar.public-nav-open .nav {
          display: flex !important;
          flex-direction: column !important;
          align-items: stretch !important;
          gap: 2px !important;
          margin: 0 !important;
          padding: 0 !important;
      }
      #public-navbar.public-nav-open .nav > li {
          display: block !important;
          margin-bottom: 10px;
      }
      #public-navbar.public-nav-open .nav > li > a {
          display: flex;
          align-items: center;
          padding: 12px 16px;
          font-size: 15px;
          font-weight: 500;
          color: var(--ink-1);
          border-radius: 8px;
          min-height: 44px;
      }
      #public-navbar.public-nav-open .nav > li > a:hover {
          background: var(--bg-2);
      }
   
      /* Mobile theme toggle — visible next to hamburger */
      .theme-toggle--mobile {
          display: inline-flex !important;
          flex: 0 0 36px !important;
          width: 36px !important;
          height: 36px !important;
          margin: 0 !important;
          margin-inline-end: 4px !important;
          order: 97 !important;
      }
   
      /* Mobile language switcher — visible next to theme toggle */
      .lang-mobile-wrap {
          display: inline-flex !important;
          position: relative !important;
          flex: 0 0 36px !important;
          order: 98 !important;
          margin-inline-end: 6px !important;
      }
      .lang-mobile-btn {
          display: inline-flex !important;
          align-items: center;
          justify-content: center;
          width: 36px !important;
          height: 36px !important;
          border-radius: 8px;
          border: 1px solid var(--line);
          background: var(--bg-1);
          color: var(--ink-2);
          cursor: pointer;
          padding: 0;
          transition: background .12s, border-color .12s;
      }
      .lang-mobile-btn:hover,
      .lang-mobile-btn:focus {
          background: var(--bg-2);
          border-color: var(--ink-4);
          color: var(--ink-1);
      }
      .lang-mobile-menu {
          display: none !important;
          position: absolute;
          top: 100%;
          inset-inline-end: 0;
          margin-top: 6px;
          min-width: 140px;
          max-height: 260px;
          overflow-y: auto;
          background: var(--bg-1);
          border: 1px solid var(--line);
          border-radius: 8px;
          box-shadow: 0 8px 24px rgba(0,0,0,.12);
          list-style: none;
          padding: 4px;
          z-index: 1100;
      }
      .lang-mobile-menu.is-open { display: block !important; }
      .lang-mobile-menu li a {
          display: block;
          padding: 8px 12px;
          font-size: 13px;
          font-weight: 500;
          color: var(--ink-2);
          text-decoration: none;
          border-radius: 6px;
          transition: background .1s;
      }
      .lang-mobile-menu li a:hover { background: var(--bg-2); color: var(--ink-1); }
      .lang-mobile-menu li.active a { color: var(--brand); font-weight: 600; }
   
      /* Hide the language dropdown inside the collapsed menu on mobile */
      #public-navbar .navbar-left-block { display: none !important; }
   
      /* Hide the theme toggle inside the collapsed menu on mobile */
      #public-navbar .theme-toggle,
      #public-navbar .nav > li:last-child:has(.theme-toggle) {
          display: none !important;
      }
   
      /* ── No white space on either edge of navbar ── */
      .public-navbar {
          padding-inline: 0 !important;
      }
      .public-navbar > .container {
          padding-inline: 12px !important;
      }
   
      /* ── Announcement bar mobile ── */
      .pn-announce__inner {
          padding: 8px 12px;
          font-size: 12px;
          gap: 4px;
      }
   
      /* ── Services mega-dropdown mobile ── */
      .pn-services-drop { position: static; }
      .pn-mega {
          position: static !important;
          transform: none !important;
          min-width: 0 !important;
          border: none !important;
          box-shadow: none !important;
          border-radius: 12px !important;
          background: var(--bg-2) !important;
          padding: 4px 0 !important;
          margin: 4px 0 !important;
          width: 100% !important;
      }
      .pn-services-drop.is-open .pn-mega {
          transform: none !important;
      }
      .pn-mega__head { padding: 8px 12px 6px; }
      .pn-mega__grid {
          grid-template-columns: repeat(2, 1fr) !important;
          gap: 2px !important;
          padding: 4px 6px !important;
      }
      .pn-mega__card { padding: 10px 8px; }
      .pn-mega__icon { width: 32px; height: 32px; }
   
      /* ── Nav links mobile ── */
      .pn-nav-links {
          display: flex !important;
          flex-direction: column !important;
          align-items: stretch !important;
          gap: 2px !important;
          margin: 0 !important;
          padding: 0 !important;
      }
      .pn-nav-links > li > a,
      .pn-services-trigger {
          display: flex !important;
          width: 100%;
          padding: 12px 16px !important;
          font-size: 15px !important;
          border-radius: 8px;
          min-height: 44px;
          color: var(--ink-1);
      }
   
      /* ── CTA group mobile ── */
      .pn-cta-group {
          flex-direction: row !important;
          justify-content: center !important;
          gap: 10px !important;
          padding: 12px 16px 8px !important;
          border-top: 1px solid var(--line);
          margin-top: 4px !important;
          margin-left: 0 !important;
      }
      .pn-cta-item { flex: none !important; width: auto !important; }
      /* Ensure CTA buttons inside the opened mobile nav are centered and spaced */
      #public-navbar.public-nav-open .pn-cta-group,
      .public-navbar #public-navbar.public-nav-open .pn-cta-group {
         display: flex !important;
         justify-content: center !important;
         gap: 10px !important;
         padding: 12px 16px !important;
         width: 100% !important;
      }
      #public-navbar.public-nav-open .pn-cta-group .pn-cta-item { margin: 0 !important; }
      .pn-cta-signin > a,
      .pn-cta-signup > a {
          width: auto !important;
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          padding: 7px 20px !important;
          font-size: 13px !important;
          border-radius: 8px !important;
          min-height: unset !important;
          line-height: 1.3 !important;
      }
      /* Hide desktop theme toggle in mobile menu CTA group */
      .pn-cta-group .pn-cta-item:has(.theme-toggle) {
          display: none !important;
      }
      #public-navbar.public-nav-open .pn-cta-item.pn-cta-signin {
          margin-top: 10px;
      }
   }
   
   /* Hide mobile theme toggle and language switcher on desktop */
   .theme-toggle--mobile {
      display: none;
   }
   .lang-mobile-wrap {
      display: none;
   }
   
   /* Remove any top body margin that browsers add */
   html, body { margin: 0 !important; overflow-x: auto; }
   body.theme-pulse { padding-top: 0 !important; }
   
   /* Remove any default top border on first child of body */
   body > *:first-child:not(header):not(nav):not(.app):not(.public-shell-wrap):not(.public-shell):not(main) {
      display: none;
   }
   
   /* ─── Public navbar — defensive overrides for bare <ul><li> markup ─── */
   
   body:not(.has-sidebar) > header,
   body:not(.has-sidebar) > nav,
   .public-shell-wrap > header,
   .public-shell-wrap > nav {
      background: var(--bg-1);
      border-bottom: 1px solid var(--line);
   }
   
   svg.navbar-icon { display: inline-block; vertical-align: -2px; margin-right: 4px; }
   
   /* When the menu lacks .navbar-nav classes, force horizontal layout via the parent */
   header ul:not(.topbar-actions):not(.lang-mobile-menu):not(.dropdown-menu), header > div > ul:not(.topbar-actions):not(.lang-mobile-menu):not(.dropdown-menu),
   nav:not(.sidebar-nav) ul:not(.dropdown-menu):not(.topbar-actions):not(.lang-mobile-menu),
   .navbar ul:not(.dropdown-menu):not(.topbar-actions):not(.lang-mobile-menu) {
      list-style: none !important;
      padding: 0 !important;
      margin: 0 !important;
      display: flex !important;
      align-items: center;
      gap: 0px;
      flex-wrap: wrap;
   }
   
   header ul:not(.dropdown-menu) > li:not(.lang-mobile-menu li), nav:not(.sidebar-nav) ul:not(.dropdown-menu) > li,
   .navbar ul:not(.dropdown-menu) > li {
      list-style: none !important;
      display: inline-flex !important;
   }
   
   header ul:not(.dropdown-menu) > li > a, nav:not(.sidebar-nav) ul:not(.dropdown-menu) > li > a,
   .navbar ul:not(.dropdown-menu) > li > a {
      display: inline-flex;
      align-items: center;
      padding: 10px 20px;
      color: var(--ink-2);
      font-size: 14px;
      font-weight: 500;
      border-radius: 6px;
      text-decoration: none;
   }
   
   header ul:not(.dropdown-menu) > li > a:hover, nav:not(.sidebar-nav) ul:not(.dropdown-menu) > li > a:hover {
      color: var(--ink-1);
      background: var(--bg-2);
   }
   
   header ul:not(.dropdown-menu) > li.active > a, nav:not(.sidebar-nav) ul:not(.dropdown-menu) > li.active > a {
      color: var(--brand);
   }
   /* Layout the public header: brand left, menu right */
   header > .container, header > div:first-child,
   .navbar > .container, .navbar > .container-fluid {
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      padding: 8px 24px;
      flex-wrap: wrap;
      gap: 16px;
   }
   
   /* Brand block */
   header .navbar-brand, header [class*="brand"] {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--ink-1);
      font-weight: 700;
      font-size: 15px;
      padding: 0;
      text-decoration: none;
   }
   
   /* ─── New Order page ─── */
   .neworder-grid {
      display: grid;
      grid-template-columns: 1fr 360px;
      gap: 10px;
      align-items: start;
   }
   .neworder-form { min-width: 0; }
   .search-dropdown .select2-selection { box-sizing: border-box; width: 100%; }
   .neworder-form textarea.form-control { height: auto; min-height: 80px; }
   
   /* Fix oversized Link / Quantity / Charge fields (PerfectPanel + Bootstrap input-lg etc.)
     PerfectPanel injects Link/Quantity into #fields; IDs vary, so target by name/containers. */
   .help-block {
      font-size: 12px; 
      margin-top: 6px; 
      color: var(--shell-icon);
      display:block;
   }

   /* ── Input-group fix: keep delete/action buttons beside fields (e.g. expiry) ── */
   .neworder-form #fields .input-group {
      display: flex; align-items: flex-start; width: 100%;
   }
   .neworder-form #fields .input-group .input-group-btn {
      display: flex; white-space: nowrap; flex-shrink: 0;
   }
   .neworder-form #fields .input-group .input-group-btn .btn {
      height: 42px; border-radius: 0 8px 8px 0; padding: 0 14px;
      display: inline-flex; align-items: center; justify-content: center;
   }
   .neworder-form #fields .input-group textarea.form-control + .input-group-btn .btn {
      height: auto; min-height: 42px; align-self: stretch;
   }
   
   /* ── Drip-feed checkbox ── */
   .neworder-form .form-group__checkbox {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 14px; margin-bottom: 12px;
      border: 1px solid var(--line); border-radius: 8px;
      background: var(--bg-2); cursor: pointer;
      transition: border-color .15s;
   }
   .neworder-form .form-group__checkbox:hover { border-color: var(--brand); }
   .neworder-form .form-group__checkbox-label {
      position: relative; display: flex; align-items: center;
      cursor: pointer; margin: 0;
   }
   .neworder-form .form-group__checkbox-label input[type="checkbox"] {
      position: absolute; opacity: 0; width: 0; height: 0;
   }
   .neworder-form .form-group__checkbox-label .checkmark {
      width: 20px; height: 20px; border-radius: 5px;
      border: 2px solid var(--line); background: var(--bg-1);
      display: flex; align-items: center; justify-content: center;
      transition: background .15s, border-color .15s;
   }
   .neworder-form .form-group__checkbox-label input:checked + .checkmark {
      background: var(--brand); border-color: var(--brand);
   }
   .neworder-form .form-group__checkbox-label input:checked + .checkmark::after {
      content: ''; display: block; width: 6px; height: 10px;
      border: solid #fff; border-width: 0 2px 2px 0;
      transform: rotate(45deg); margin-top: -2px;
   }
   .neworder-form .form-group__label-title {
      font-size: 14px; font-weight: 500; color: var(--ink-1);
      cursor: pointer; margin: 0;
   }
   .neworder-form #dripfeed-options { padding-left: 0; }
   .neworder-form #dripfeed-options.hidden,
   .neworder-form .depend-fields.hidden { display: none; }
   .neworder-form #dripfeed-options input[readonly] {
      background: var(--bg-2); cursor: not-allowed;
   }
   
   /* ── Subscription fields (type 100) — min/max side-by-side ── */
   .neworder-form #order_min .row { display: flex; gap: 12px; }
   .neworder-form #order_min .col-md-6 {
      flex: 1; width: auto; float: none; padding: 0;
   }
   .neworder-form #order_min .help-block.min-max {
      font-size: 11px; color: var(--ink-3); margin-top: 4px;
   }
   .neworder-form #order_delay .row { display: flex; gap: 12px; }
   .neworder-form #order_delay .col-md-6 {
      flex: 1; width: auto; float: none; padding: 0;
   }
   
   /* ── Radio button groups (device, traffic type) ── */
   .neworder-form #order_device .radio,
   .neworder-form #order_type_of_traffic .radio {
      display: inline-flex; align-items: center; gap: 6px;
      margin: 0 12px 8px 0; cursor: pointer;
   }
   .neworder-form #order_device .radio label,
   .neworder-form #order_type_of_traffic .radio label {
      display: inline-flex; align-items: center; gap: 6px;
      cursor: pointer; font-size: 14px; color: var(--ink-1);
      text-transform: none; letter-spacing: 0;
   }
   .neworder-form #fields input[type="radio"] {
      appearance: none; width: 18px; height: 18px;
      border: 2px solid var(--line); border-radius: 50%;
      background: var(--bg-1); cursor: pointer;
      transition: border-color .15s;
      position: relative; flex-shrink: 0;
   }
   .neworder-form #fields input[type="radio"]:checked {
      border-color: var(--brand);
   }
   .neworder-form #fields input[type="radio"]:checked::after {
      content: ''; position: absolute;
      top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--brand);
   }
   
   /* Perfect Panel field visibility — hidden class must always win */
   #fields .form-group.hidden,
   #fields .fields.hidden,
   .form-group.fields.hidden,
   .fields.hidden {
      display: none !important;
   }
   
   
   
   /* Select2 container/trigger — force 100% width immediately to prevent
     layout shift while PP/Select2 calculates its inline width. */
   .neworder-form .select2-container { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
   .select2-container { z-index: 1; }
   .select2-container--open { z-index: 1060 !important; }
   
   /* Select2 scroll fix — prevent the body-appended container from blocking
     page scroll, and prevent Select2's height/overflow lock on html/body. */
   body > .select2-container { pointer-events: none !important; }
   body > .select2-container .select2-dropdown { pointer-events: auto !important; }
   html, body { height: auto !important; overflow-y: auto !important; }
   
   /* The actual floating dropdown panel — Select2 appends this either inline or to <body>.
     Only the OUTER wrapper gets border + shadow; the inner <ul> stays naked
     so we don't render two stacked boxes. */
   .select2-container--open .select2-dropdown,
   .select2-dropdown {
     background: var(--ctrl-bg) !important;
      border: 1px solid var(--line) !important;
      border-radius: 6px !important;
      box-sizing: border-box;
      box-shadow: 0 8px 24px -4px rgba(15,23,42,0.18) !important;
      overflow: hidden;
   }
   .select2-results__options.dropdown-menu,
   ul.select2-results__options {
      max-height: 340px !important;
      overflow-y: auto !important;
      overscroll-behavior: contain !important;
      padding: 4px !important;
      margin: 0 !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      border-radius: 0 !important;
   }
   
   /* Search box inside dropdown */
   .select2-search--dropdown { padding: 6px 8px !important; background: var(--ctrl-bg); border-bottom: 1px solid var(--line-2); }
   .select2-search--dropdown .select2-search__field {
      border: 1px solid var(--line) !important; border-radius: 6px !important;
      padding: 6px 10px !important; font-size: 13px !important;
      width: 100%; outline: 0;
   }
   .select2-search--dropdown .select2-search__field:focus {
      border-color: var(--brand) !important;
      box-shadow: none !important;
   }
   
   /* Options */
   .select2-results__option {
     padding: 0 !important;
     border-radius: 4px !important;
      font-size: 13px !important; color: var(--ink-1) !important;
      background: transparent !important;
      line-height: 1.35 !important;
   }
   .select2-results__option--highlighted,
   .select2-results__option--highlighted[aria-selected],
   .select2-results__option[aria-selected="true"] {
     /* don't change text styles; only background handled on the inner <a> */
     background: transparent !important;
     color: inherit !important;
   }
   /* Inset row to avoid "stuck to corners" + nicer hover */
   .select2-results__option a {
     color: inherit !important;
     text-decoration: none !important;
     display: block;
     box-sizing: border-box;
     width: 100%;
     margin: 0;
     padding: 6px 10px !important;
     border-radius: 4px;
     transition: background .1s ease;
   }
   /* Select2 sometimes keeps the highlighted class after scrolling.
    Only show hover background when the pointer is actually over the row. */
   .select2-results__option--highlighted > a {
     background: rgba(240,101,67,0.12) !important;
   }
   .select2-results__option > a:hover,
   .select2-results__option > a:focus {
     background: rgba(240,101,67,0.14) !important;
   }
   .select2-results__option[aria-selected="true"] > a {
     background: rgba(240,101,67,0.10) !important;
     font-weight: 500;
   }
   [data-theme="dark"] .select2-results__option--highlighted > a {
     background: rgba(224,90,58,0.22) !important;
   }
   [data-theme="dark"] .select2-results__option > a:hover,
   [data-theme="dark"] .select2-results__option > a:focus {
     background: rgba(224,90,58,0.25) !important;
   }
   [data-theme="dark"] .select2-results__option[aria-selected="true"] > a {
     background: rgba(224,90,58,0.18) !important;
   }
   
   /* Service-search results: number bubble + text — left-align with gap.
     PP injects inline style="justify-content:space-between" on each <a>;
     override to a normal left-aligned row. */
   .select2-results__option > a[style*="space-between"],
   .select2-results__option > a {
      display: flex !important;
      justify-content: flex-start !important;
      align-items: flex-start !important;
      gap: 8px !important;
      text-decoration: none !important;
      color: var(--ink-1) !important;
   }
   .select2-selection__id {
      flex: 0 0 auto;
      min-width: 20px;
      text-align: right;
      background: none !important;
      color: var(--ink-3) !important;
      border-radius: 0;
      padding: 0;
      font-size: 11px;
      font-weight: 500;
      font-variant-numeric: tabular-nums;
      line-height: 1.4;
   }
   /* Closed trigger only — truncate the selected label */
   .select2-selection__rendered .select2-selection__text {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: left;
      line-height: 1.35;
   }
   /* Dropdown options — show full service name (no ellipsis) */
   .select2-results__option .select2-selection__text {
      flex: 1 1 auto;
      min-width: 0;
      overflow: visible;
      text-overflow: unset;
      white-space: normal;
      word-break: break-word;
      text-align: left;
      line-height: 1.35;
   }
   
   /* Kill double scrollbar — only the inner <ul> scrolls.
     PP wraps the <ul> in a div with inline `max-height:300px; overflow-y:auto`
     that competes with the ul's own scroll. Need high specificity + !important
     to beat the inline style.
     NOTE: do NOT set overflow:hidden on .select2-dropdown — it suppresses child
     scroll in Safari/WebKit and breaks mouse-wheel scroll in other browsers. */
   .select2-container .select2-results,
   .select2-container .select2-results > div,
   .select2-container .select2-results div[style] {
      overflow: visible !important;
      max-height: none !important;
      height: auto !important;
   }
   
   .search-dropdown { width: 100%; box-sizing: border-box; min-width: 0; max-width: 595px; }
   #pulse-service-search { box-sizing: border-box; width: 100%; }
   .search-dropdown .input-wrapper { position: relative; width: 100%; box-sizing: border-box; }
   .search-dropdown .select2-container { max-width: 100% !important; width: 100% !important; box-sizing: border-box; }
   .search-dropdown .search-icon {
      position: absolute; left: 14px; top: 55%; transform: translateY(-50%);
      color: var(--shell-icon); pointer-events: none; z-index: 1;
   }
   .search-dropdown .input-wrapper .form-control {
      padding-left: 46px !important;
      width: 100%;
   }
   @media (max-width: 767px) {
      .neworder-form .search-dropdown {
         min-width: 0;
         max-width: none;
         width: 100%;
      }
      .neworder-form .select2-container .select2-selection--single {
         padding-right: 46px !important;
      }
   }
   /* ── Search results dropdown ── */
   .pulse-search-results {
      max-height: 260px; overflow-y: auto; overflow-x: hidden;
      margin-top: 4px; border-radius: 8px;
      background: var(--bg-1); border: 1px solid var(--line);
      box-shadow: 0 4px 16px rgba(0,0,0,.08);
   }
   .pulse-search-item {
      display: flex; align-items: center; gap: 8px;
      padding: 9px 14px; cursor: pointer; overflow: hidden;
      border-bottom: 1px solid var(--line-light, rgba(0,0,0,.04));
      transition: background .12s ease;
   }
   .pulse-search-item:last-child { border-bottom: none; }
   .pulse-search-item:hover { background: var(--bg-2, #f5f5f5); }
   .pulse-search-id {
      flex-shrink: 0; font-size: 11px; font-weight: 600;
      color: var(--ink-3); min-width: 36px;
   }
   .pulse-search-name {
      flex: 1; min-width: 0; font-size: 13px; color: var(--ink-1);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
   }
   .pulse-search-price {
      flex-shrink: 0; font-size: 12px; font-weight: 600;
      color: var(--accent, #5c6bc0); font-variant-numeric: tabular-nums;
   }
   .pulse-search-empty {
      padding: 16px; text-align: center; font-size: 13px; color: var(--ink-3);
   }
   
   .search-pills {
      display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
   }
   .search-pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 10px; border-radius: 99px;
      font-size: 12px; font-weight: 400; line-height: 1;
      border: 1px solid var(--line); background: var(--bg-1);
      color: var(--ink-2); cursor: pointer;
      transition: all .18s ease; white-space: nowrap;
   }
   .search-pill svg { flex-shrink: 0; transition: all .18s ease; }
   .search-pill:hover { border-color: var(--ink-3); color: var(--ink-1); }
   
   /* ── Selected: Favorites — amber/gold ── */
   .pill-fav[aria-pressed="true"] {
      background: oklch(.72 .16 65); border-color: oklch(.65 .17 60);
      color: #fff;
   }
   .pill-fav[aria-pressed="true"] svg { stroke: #fff; fill: #fff; }
   
   /* ── Selected: Subscription — indigo ── */
   .pill-sub[aria-pressed="true"] {
      background: oklch(.52 .2 260); border-color: oklch(.47 .21 260);
      color: #fff;
   }
   .pill-sub[aria-pressed="true"] svg { stroke: #fff; }
   
   /* ── Selected: Country — emerald ── */
   .pill-geo[aria-pressed="true"] {
      background: oklch(.55 .16 160); border-color: oklch(.5 .17 160);
      color: #fff;
   }
   .pill-geo[aria-pressed="true"] svg { stroke: #fff; }
   
   .pill-count {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 16px; height: 16px; padding: 0 4px;
      border-radius: 99px; font-size: 10px; font-weight: 600;
      margin-left: 2px; line-height: 1;
      background: var(--ink-2); color: #fff;
   }
   [data-theme="dark"] .pill-count {
      background: var(--ink-1); color: var(--bg-1);
   }
   .search-pill[aria-pressed="true"] .pill-count {
      background: rgba(255,255,255,.28); color: #fff;
   }
   /* Force-hide PP's native description — we show it in the service detail card */
   #service_description { display: none !important; }
   
   .terms-row { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
   .terms-row input[type="checkbox"] { margin-top: 2px; accent-color: var(--brand); }
   .terms-row span { font-size: 13px; color: var(--ink-2); line-height: 1.5; text-transform: none; letter-spacing: 0; font-weight: 400; }
   .terms-row a { color: var(--brand); font-weight: 500; }
   
   .success-grid {
      display: grid;
      grid-template-columns: max-content 1fr;
      gap: 4px 16px;
      margin-top: 8px;
      font-size: 13px;
   }
   .success-grid > span:nth-child(odd) { color: var(--ink-2); }
   .break-all { word-break: break-all; }
   
   /* Stepper sits above the order-summary card on the right rail */
   .neworder-summary > .neworder-stepper {
      margin: 0 0 12px;
      padding: 10px 12px;
      background: var(--bg-1);
      border: 1px solid var(--line);
      border-radius: var(--radius, 12px);
      width: 100%;
      box-sizing: border-box;
      justify-content: space-between;
      gap: 4px;
      overflow: hidden;
   }
   .neworder-summary > .neworder-stepper .step {
      flex: 0 0 auto;
      min-width: 0;
      gap: 4px;
      font-size: 11.5px;
      padding: 0;
   }
   .neworder-summary > .neworder-stepper .step span:last-child {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
   }
   /* Drop the connector dashes — too tight in the rail */
   .neworder-summary > .neworder-stepper .step + .step::before {
      display: none;
   }
   .neworder-summary > .neworder-stepper .step-num {
      width: 18px; height: 18px; min-width: 18px; min-height: 18px;
      font-size: 10px;
      flex-shrink: 0;
   }
   .neworder-summary > .neworder-stepper .step.is-done .step-num::after {
      background-size: 10px 10px;
   }
   
   /* Stepper — keep on one line; collapse labels at narrow widths */
   .neworder-page .page-header {
      display: flex !important;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
      gap: 24px;
   }
   .neworder-page .page-header > div:first-child { flex: 0 1 auto; min-width: 0; }
   .neworder-stepper {
      display: flex !important;
      flex-direction: row !important;
      align-items: center; gap: 4px;
      flex-wrap: nowrap; flex-shrink: 0;
      width: auto;
   }
   .neworder-stepper .step {
      display: flex; align-items: center; gap: 6px;
      font-size: 12px; font-weight: 500; color: var(--ink-3);
      white-space: nowrap;
      line-height: 1;
      padding: 5px 0;
   }
   .neworder-stepper .step + .step::before {
      content: ""; width: 14px; height: 1px; background: var(--line);
      display: inline-block; margin-right: 4px; flex-shrink: 0;
   }
   @media (max-width: 1100px) {
      .neworder-stepper .step:not(.is-active):not(.is-done) span:last-child { display: none; }
   }
   @media (max-width: 720px) {
      .neworder-page .page-header { flex-wrap: wrap; }
   }
   .neworder-stepper .step-num {
      width: 22px; height: 22px; min-width: 22px; min-height: 22px;
      border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--bg-2); color: var(--ink-3);
      font-size: 11px; font-weight: 600;
      line-height: 1;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
      font-feature-settings: "tnum" 1, "lnum" 1;
      text-align: center;
      border: 1px solid var(--line);
      flex-shrink: 0;
      box-sizing: border-box;
      vertical-align: middle;
      padding: 0;
      overflow: hidden;
   }
   .neworder-stepper .step-num > span { display: inline-block; line-height: 1; }
   .neworder-stepper .step.is-active { color: var(--ink-1); }
   .neworder-stepper .step.is-active .step-num {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
   }
   .neworder-stepper .step.is-done { color: var(--ink-1); }
   .neworder-stepper .step.is-done .step-num {
      background: var(--brand);
      color: transparent;
      border-color: var(--brand);
      position: relative;
      overflow: hidden;
   }
   .neworder-stepper .step.is-done .step-num::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 12px 12px;
   }
   
   /* Platform chips */
   .platform-step-num {
      width: 24px; height: 24px; border-radius: 6px;
      background: var(--bg-2); color: var(--ink-2);
      font-size: 12px; font-weight: 600;
      display: inline-flex; align-items: center; justify-content: center;
   }
   .card-head { font-family: 'Poppins','Inter',sans-serif; font-size: 16px; font-weight: 600; line-height:30px; margin: 0 0 15px; color: var(--shell-icon); }
   .card-head b { font-weight: 600; color: var(--ink-1); }
   
   .platform-grid {
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      gap: 8px;
      padding:4px;
   }
   .pulse-platform-chip {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 8px;
      padding: 10px 6px 12px;
      background: var(--ctrl-bg, #fff); border: 1px solid var(--line); border-radius: 8px;
      color: var(--ink-1); font-size: 12px; font-weight: 600;
      cursor: pointer; transition: all .15s;
      min-height: 80px;
      min-width: 0;
      text-align: center;
   }
   .pulse-platform-chip:hover { border-color: var(--brand-3); color: var(--brand-3); background: var(--bg-2); }
   .pulse-platform-chip.is-active {
      border: 1px solid var(--brand-3);
      background: var(--brand-3);
      box-shadow: 0px 8px 10px 0px #2AA0DB4D;
      border-radius: 8px;
   }
   .pulse-platform-chip.is-active .platform-name,
   .pulse-platform-chip.is-active .platform-icon { color: #fff; }
   
   /* Coming-soon platforms — desaturated, non-active, "Soon" ribbon top-right.
     Tap is still allowed; JS shows a toast and snaps focus back to the active chip. */
   .pulse-platform-chip.is-coming-soon {
      position: relative;
      opacity: 0.55;
      cursor: not-allowed;
      background: var(--bg-1, #fafafa);
   }
   .pulse-platform-chip.is-coming-soon:hover {
      border-color: var(--line);
      background: var(--bg-1, #fafafa);
   }
   .pulse-platform-chip.is-coming-soon .platform-icon { filter: grayscale(0.7); }
   .pulse-platform-chip.is-coming-soon::after {
      content: "SOON";
      position: absolute;
      top: 4px;
      right: 4px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.4px;
      color: var(--ink-3, #888);
      background: var(--bg-2, #eee);
      border-radius: 4px;
      padding: 2px 5px;
      line-height: 1;
   }
   
   /* Coming-soon toast — tiny inline message that appears under the platform card */
   .pulse-coming-soon-toast {
      position: fixed;
      left: 50%;
      bottom: 24px;
      transform: translateX(-50%) translateY(20px);
      background: var(--ink-1, #1a1a1a);
      color: #fff;
      padding: 10px 16px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      box-shadow: 0 8px 24px rgba(0,0,0,0.25);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s, transform .2s;
      z-index: 9999;
      max-width: calc(100vw - 32px);
      text-align: center;
   }
   .pulse-coming-soon-toast.is-visible {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
   }
   .platform-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 28px;
      color: var(--shell-icon);
      flex-shrink: 0;
   }
   .pulse-platform-chip:hover .platform-icon {
      color: var(--brand-3);
   }
   .platform-name { line-height: 1.2; font-weight:600; font-size:12px; text-align: center; }
   
   /* Hide More/Less toggle button completely */
   .platform-more-chip { display: none !important; }
      
   @media (max-width: 1690px) { .platform-grid { grid-template-columns: repeat(6, 1fr); } }
   @media (max-width: 1520px) { .platform-grid { grid-template-columns: repeat(5, 1fr); } }
   @media (max-width: 880px)  { .platform-grid { grid-template-columns: repeat(4, 1fr); } }
   @media (max-width: 600px)  { .platform-grid { grid-template-columns: repeat(3, 1fr); } }
   
   /* New order responsive — collapse summary below form on narrow screens */
   @media (max-width: 1180px) {
      .neworder-grid { grid-template-columns: 1fr !important; }
      .neworder-summary { position: static !important; }
   }
   
   /* Hide empty Select2 trigger gracefully */
   .select2-selection__rendered:empty::before {
      content: "Select a category…";
      color: var(--ink-3);
      font-style: italic;
   }
   
   /* Hide native <select> on Perfect Panel form — Select2 takes over */
   .select2-container + select,
   select.select2-hidden-accessible {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0,0,0,0) !important;
      white-space: nowrap !important;
      border: 0 !important;
      opacity: 0 !important;
      pointer-events: none !important;
   }
   
   /* Constrain Select2 trigger height to match other form controls */
   .select2-container .select2-selection--single {
      height: 48px !important;
      border: 1px solid var(--line) !important;
      border-radius: 12px !important;
      background: var(--bg-1) !important;
      transition: border-color 0.15s, box-shadow 0.15s;
      padding: 0 15px;
      display: flex !important;
      align-items: center !important;
      box-sizing: border-box;
   }
   .select2-container .select2-selection--single .select2-selection__rendered {
      flex: 1 1 auto;
      min-width: 0;
      max-width: 100%;
      display: flex !important;
      align-items: center !important;
      gap: 8px;
      line-height: 1.35 !important;
      height: auto !important;
      overflow: hidden !important;
      padding: 0 !important;
      padding-right: 42px !important;
      color: var(--ink-1) !important;
      font-size: 14px !important;
      font-weight: 400 !important;
   }
   .select2-selection__rendered .select2-selection__id {
      flex-shrink: 0;
   }

   /* New Order — closed preview: one inline row, ellipsis at end, clear of arrow */
   .neworder-form .select2-container .select2-selection--single {
      position: relative;
      padding-right: 44px !important;
   }
   .neworder-form .select2-container .select2-selection--single .select2-selection__rendered,
   .neworder-form .select2-container .select2-selection--single .select2-selection__rendered[style] {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      padding-right: 0 !important;
   }
   .neworder-form .select2-container .select2-selection--single .select2-selection__rendered * {
      display: inline !important;
      float: none !important;
      vertical-align: middle;
      max-width: none !important;
      min-width: 0 !important;
      overflow: visible !important;
      text-overflow: clip !important;
      white-space: inherit !important;
      flex: none !important;
   }
   .neworder-form .select2-container .select2-selection--single .select2-selection__rendered .select2-selection__text {
      overflow: visible !important;
      text-overflow: clip !important;
      white-space: inherit !important;
   }
   .neworder-form .select2-container .select2-selection--single .select2-selection__rendered img {
      display: inline-block !important;
      max-height: 1.2em;
      width: auto;
      vertical-align: middle;
   }
   .neworder-form .select2-container .select2-selection--single .select2-selection__arrow {
      position: absolute !important;
      right: 8px !important;
      top: 0 !important;
      bottom: 0 !important;
      height: auto !important;
      width: 28px !important;
      z-index: 2;
      background: var(--bg-1);
   }
   .select2-container .select2-selection--single .select2-selection__arrow {
      height: 100% !important;
      top: 0 !important;
      right: 10px !important;
   }
   /* Replace Select2 default arrow with a cleaner chevron */
   .select2-container .select2-selection--single .select2-selection__arrow {
     width: 28px !important;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: var(--select2-chevron) !important;
   }
   .select2-container .select2-selection--single .select2-selection__arrow b {
     display: none !important;
   }
   .select2-container .select2-selection--single .select2-selection__arrow::before {
     content: "";
     width: 16px;
     height: 16px;
     display: block;
     background-repeat: no-repeat;
     background-position: center;
     background-size: 16px 16px;
     /* down chevron (stroke uses currentColor) */
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
   }
   .select2-container--open .select2-selection--single .select2-selection__arrow::before {
     transform: rotate(180deg);
   }
   .select2-container--open .select2-selection--single {
      border-color: var(--brand) !important;
      box-shadow: none !important;
   }
   
   /* "No results found" panel inside Select2 */
   .select2-results__message,
   .select2-results__option[role="alert"] {
      padding: 14px 16px !important;
      color: var(--ink-3) !important;
      font-size: 13px !important;
      text-align: center;
      background: var(--bg-2) !important;
      border-radius: 6px !important;
   }
   .neworder-form .card {
      margin-bottom: 10px;
      overflow: visible;
   }
   .neworder-form .card:last-child { margin-bottom: 0; }
   .neworder-form > .alert { margin-bottom: 16px; position: relative; padding-right: 36px; }
   .neworder-form > .alert > .close {
      position: absolute; top: 12px; right: 14px;
      float: none; opacity: .5; font-size: 18px; line-height: 1;
   }
   .neworder-form > .alert > .close:hover { opacity: 1; }
   /* Charge — large green value (match design) */
   .details-card #charge {
      color: var(--shell-green);
      font-weight: 700;
      font-size: 24px !important;
      cursor: not-allowed;
   }
   
   /* ── Order Details fields (match design) ── */
   .neworder-form .form-group .control-label,
   .neworder-form #fields label.control-label,
   .neworder-form #fields .control-label,
   .neworder-form #order_quantity label {
      font-size: 12px !important;
      font-weight: 400 !important;
      line-height: 1 !important;
      margin-bottom: 6px !important;
      color: var(--shell-icon) !important;
      display: block !important;
      padding: 8px 0 0 10px !important;
      text-transform: none !important;
      letter-spacing: normal !important;
   }
   .qty-original-input {
      display: none !important;
   }
   .neworder-form #order_quantity .help-block,
   .neworder-form #order_quantity .min-max {
      display: none !important;
   }
   .qty-layout {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 24px;
      width: 100%;
   }
   .qty-field {
      flex: 0 0 210px;
      width: 210px;
      min-width: 210px;
      max-width: 210px;
   }
   .qty-display-value {
      display: flex;
      align-items: center;
      width: 100%;
      height: 52px;
      padding: 0 18px;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 16px;
      font-weight: 500;
      line-height: normal;
      letter-spacing: 0;
      font-variant-numeric: tabular-nums;
      background: var(--bg-1);
      border: 1px solid var(--line);
      border-radius: 12px;
      color: var(--shell-item);
      outline: none;
      cursor: text;
      -webkit-appearance: none;
      appearance: none;
      box-shadow: none;
      transition: border-color var(--dur-fast) ease;
   }
   .qty-display-value:focus {
      border-color: var(--shell-icon);
      outline: none;
      box-shadow: none;
   }
   #order_quantity .qty-minmax {
      margin: 8px 0 0;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 10px;
      font-weight: 400;
      line-height: normal;
      letter-spacing: 0;
      color: #888888;
   }
   .qty-display-value::-webkit-outer-spin-button,
   .qty-display-value::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
   }
   .qty-slider-wrap {
      display: flex;
      flex-direction: column;
      flex: 1 1 0;
      min-width: 300px;
      max-width: none;
      gap: 10px;
      padding: 2px 4px 0;
   }
   .qty-track {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      height: 18px;
   }
   .qty-track-segs {
      position: absolute;
      left: 4px;
      right: 4px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      gap: 6px;
      height: 4px;
      pointer-events: none;
      z-index: 0;
   }
   .qty-seg {
      flex: 1;
      height: 100%;
      border-radius: 999px;
      background: #E3E5E5;
   }
   .qty-seg.is-filled {
      background: linear-gradient(90deg, #ff6255, #ff8d64);
   }
   .neworder-form #order_quantity input.qty-range,
   .qty-range {
      position: relative;
      z-index: 1;
      display: block;
      -webkit-appearance: none;
      appearance: none;
      width: 100% !important;
      height: 18px !important;
      margin: 0;
      padding: 0 4px !important;
      border: 0 !important;
      border-radius: 0;
      background: transparent;
      outline: none;
      cursor: pointer;
   }
   .qty-range::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none;
      width: 14px; height: 14px;
      margin-top: -5px;
      background: var(--accent);
      border: 2px solid #fff;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 1px 6px rgba(255,98,85,.45);
      transition: transform .12s ease, box-shadow .12s ease;
   }
   .qty-range::-webkit-slider-thumb:hover {
      transform: scale(1.08);
      box-shadow: 0 2px 8px rgba(255,98,85,.55);
   }
   .qty-range::-moz-range-thumb {
      width: 14px; height: 14px;
      background: var(--accent);
      border: 2px solid #fff;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 1px 6px rgba(255,98,85,.45);
   }
   .qty-range::-webkit-slider-runnable-track {
      height: 4px;
      background: transparent;
   }
   .qty-range::-moz-range-track {
      height: 4px;
      background: transparent;
      border: 0;
   }
   .qty-ticks {
      position: relative;
      height: 16px;
      margin-top: 2px;
      padding: 0 4px;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 10px;
      font-weight: 400;
      color: #888888;
      font-variant-numeric: tabular-nums;
   }
   .qty-ticks span {
      position: absolute;
      top: 0;
      white-space: nowrap;
      transform: none;
   }
   .qty-ticks span.is-active { color: var(--accent); font-weight: 600; }
   
   
   /* Summary card */
   .neworder-summary { position: sticky; top: 84px; align-self: flex-start; }
   .summary-trust {
      list-style: none; padding: 14px 0 0; margin: 14px 0 0;
      border-top: 1px solid var(--line);
      display: flex; justify-content: center; gap: 18px;
      font-size: 11.5px; color: var(--ink-3);
   }
   .summary-trust li { display: inline-flex; align-items: center; gap: 5px; }
   
   .neworder-text { margin-top: 20px; }
   
   /* Service detail card (right rail) */
   .svc-info-card { margin-bottom: 12px; }
   .svc-info-body { padding: 32px; }
   .svc-info-label, .h3 {
      font-family: 'Poppins','Inter',sans-serif;
      font-size: 16px; font-weight: 600;
      line-height:30px;
      color: var(--ink-1); margin: 0 0 20px;
   }
   .svc-stats {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 6px 8px; margin: 0; font-size: 12px;
   }
   .svc-stats dt { color: var(--shell-icon); font-weight: 400; margin: 0; }
   .svc-stats dd { color: var(--ink-2); font-weight: 700; margin: 0; text-align: right; }
   .svc-trust { justify-content: flex-start; gap: 14px; margin-top: 12px; padding-top: 12px; }
   /* Quality badges */
   .svc-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
   .svc-badge {
      font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: var(--radius-sm);
      background: var(--brand-faint, rgba(37,99,235,0.08)); 
      color: var(--blue);
      border: 1px solid var(--blue);
   }
   /* Service description (full, rendered as HTML) */
   .svc-desc-excerpt { margin-top: 20px; padding: 20px 0; border-top: 1px solid var(--line); }
   .svc-desc-text { font-size: 12px; line-height: 1.5; color: var(--shell-icon); }
   .svc-desc-text p { margin: 0 0 6px; }
   .svc-desc-text p:last-child { margin-bottom: 0; }
   
   @media (max-width: 1280px) {
      .qty-layout {
         flex-direction: column;
         align-items: stretch;
         gap: 16px;
      }
      .qty-field {
         flex: none;
         width: 100%;
         min-width: 0;
         max-width: none;
      }
      .qty-slider-wrap {
         width: 100%;
         max-width: none;
      }
   }
   @media (max-width: 1024px) {
      .neworder-grid { grid-template-columns: 1fr; }
      .neworder-summary { position: static; }
   }
   @media (max-width: 767px) {
      .qty-slider-wrap {
         display:none;
      }
   }
   
   /* ─── Mass Order page ─── */
   
   .massorder-page .page-header,
   .updates-page .page-header,
   .addfunds-page .page-header,
   .subscriptions-page .page-header,
   .refund-page .page-header { display: block; border: 0; padding: 0; margin: 0 0 22px; text-align: left; }
   .massorder-page .page-header .h1,
   .api-page .page-header .h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; color: var(--ink-1); }
   .massorder-page .page-header .muted,
   .api-page .page-header .muted { font-size: 13.5px; color: var(--ink-3); margin: 0; }
   
   .massorder-grid {
      display: grid;
      grid-template-columns: 1fr 360px;
      gap: 10px;
      align-items: start;
   }
   .format-pre {
      padding: 10px;
      margin: 20px 0;
      font-size: 12px;
      color: var(--ink-1);
      background: var(--bg-3);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      white-space: pre-wrap;
      word-break: break-all;
      line-height: 1.5;
   }
   .massorder-tips {
      list-style: none; padding: 16px 0 0; margin: 16px 0 0;
      border-top: 1px solid var(--line);
      display: flex; flex-direction: column; gap: 10px;
      font-size: 12px; color: var(--ink-2);
   }
   .massorder-tips li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
   .massorder-tips li svg { flex-shrink: 0; margin-top: 3px; }
   .massorder-tips strong { color: var(--ink-1); font-weight: 600; }
   
   /* ─── API page ("API & Description") ─── */
   
   .api-sec-title {
      font-family: 'Poppins','Inter',sans-serif;
      font-size: 24px; font-weight: 600; color: var(--ink-1);
      margin: 0 0 22px;
   }
   .api-example-link {
      display: inline-flex; align-items: center; gap: 8px;
      height: 38px; padding: 0 14px;
      background: var(--bg-1);
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--ink-1);
      font-size: 13px; font-weight: 500;
      text-decoration: none;
   }
   .api-example-link:hover { background: var(--bg-2); color: var(--ink-1); text-decoration: none; }
   
   /* Variable rows */
   .api-vars { display: flex; flex-direction: column; gap: 4px; }
   .api-var { display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 16px; padding: 6px 0; }
   .api-var-label {
      font-size: 12px; font-weight: 600; color: var(--ink-2);
      text-transform: uppercase; letter-spacing: 0.04em;
   }
   .api-pill {
      justify-self: start;
      display: inline-flex; align-items: center;
      padding: 3px 10px; border-radius: 4px;
      background: #E6E6E6; color: #555;
      border: 1px solid rgba(0, 0, 0, 0.08);
      font-size: 12px; font-weight: 500;
   }
   
   /* Parameter table */
   .api-ptable { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 4px; }
   .api-ptable thead th {
      background: var(--bg-3); color: var(--ink-1);
      font-size: 14px; font-weight: 500; text-align: left;
      padding: 12px 16px;
   }
   .api-ptable thead th:first-child { border-radius: 8px 0 0 10px; width: 42%; }
   .api-ptable thead th:last-child { border-radius: 0 10px 10px 0; }
   .api-ptable tbody td {
       padding: 8px 16px;
       font-size: 14px;
       color: var(--ink-2);
       border-bottom: 1px solid var(--bg-3);
       vertical-align: middle;
   }
   .api-ptable tbody tr:last-child td { border-bottom: 0; }
   .api-param-pill {
      display: inline-flex; align-items: center;
      padding: 3px 10px; border-radius: 4px;
      background: #E6E6E6; color: #555;
      border: 1px solid rgba(0, 0, 0, 0.08);
      font-size: 12px; font-weight: 500;
   }
   
   /* Blue Service Type dropdown */
   .api-dropdown { position: relative; max-width: 420px; margin-bottom: 20px; }
   .api-dropdown-btn {
      width: 100%; display: flex; align-items: center; gap: 12px;
      height: 45px; padding: 0 16px; border: 0; cursor: pointer;
      border-radius: 12px;
      background: linear-gradient(100deg, #4F86F7 0%, #5C7CF5 100%);
      color: #fff; font-size: 15px;
   }
   .api-dropdown.is-open .api-dropdown-btn { border-radius: 12px 12px 0 0; }
   .api-dropdown-lead { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; opacity: 0.95; }
   .api-dropdown-val { margin-left: auto; font-weight: 700; }
   .api-dropdown-caret { transition: transform .18s; }
   .api-dropdown.is-open .api-dropdown-caret { transform: rotate(180deg); }
   .api-dropdown-menu {
      position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
      background: var(--bg-1); border: 1px solid var(--line); border-top: 0;
      border-radius: 0 0 12px 12px; box-shadow: var(--shadow-3);
      padding: 8px; max-height: 320px; overflow-y: auto;
   }
   .api-dropdown-opt {
      width: 100%; display: flex; align-items: center; justify-content: space-between;
      padding: 10px 12px; border: 0; background: transparent; cursor: pointer;
      border-radius: 8px; font-size: 14px; color: var(--ink-2); text-align: left;
   }
   .api-dropdown-opt:hover { background: var(--bg-2); }
   .api-dropdown-opt.is-selected { color: var(--ink-1); font-weight: 600; }
   .api-dropdown-sel { display: none; color: var(--brand); font-size: 13px; font-weight: 600; }
   .api-dropdown-opt.is-selected .api-dropdown-sel { display: inline; }
   
   /* Dark code block */
   .api-code { border-radius: 12px; overflow: hidden; margin-top: 18px; }
   .api-code-head {
      display: flex; align-items: center; justify-content: space-between;
      background: #1f2733; color: #9aa6b8; padding: 12px 18px;
   }
   .api-code-title { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
   .api-code-glyph { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #6b7689; }
   .api-code-copy { background: transparent; border: 0; color: #9aa6b8; cursor: pointer; display: inline-flex; padding: 4px; border-radius: 6px; }
   .api-code-copy:hover { color: #fff; background: rgba(255,255,255,0.08); }
   .api-code-copy.is-copied { color: #4ec9b0; }
   .api-code-pre {
      background: #161d29; color: #cdd3de; border: 0; border-radius: 0;
      padding: 22px 24px; margin: 0;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 13px; line-height: 1.7; overflow-x: auto; white-space: pre;
   }
   .api-json-str  { color: #4ec9b0; }
   .api-json-num  { color: #d19a66; }
   .api-json-bool { color: #569cd6; }
   .api-json-null { color: #569cd6; }
   .api-json-key  { color: #cdd3de; }
   
   
   .api-page { padding: 8px 0 32px; width: 100%; max-width: none; }
   .api-page .page-header {
         display: flex !important;
         align-items: center;
         justify-content: space-between;
         gap: 16px;
         border: 0; padding: 0; margin: 0 0 22px;
         flex-wrap: wrap;
   }
   .api-page .page-header > div { display: block; }
   .api-page .page-header .h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; color: var(--ink-1); }
   .api-page .page-header .muted { font-size: 13.5px; color: var(--ink-3); margin: 0; }
   .api-example-link {
         display: inline-flex; align-items: center; gap: 8px;
         height: 38px; padding: 0 14px;
         background: var(--bg-1);
         border: 1px solid var(--line);
         border-radius: 8px;
         color: var(--ink-1);
         font-size: 13px; font-weight: 500;
         text-decoration: none;
   }
   .api-example-link:hover { background: var(--bg-2); color: var(--ink-1); text-decoration: none; }
   
   .api-connection { margin-bottom: 20px; }
   .api-conn-list {
      display: grid;
      grid-template-columns: 150px 1fr;
      gap: 20px;
      margin: 0;
   }
   .api-conn-list dt {
      color: var(--ink-2); font-weight: 500; margin: 0;
      font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
      padding-top: 4px;
   }
   .api-conn-list dd { color: var(--ink-1); margin: 0; word-break: break-all; }
   .api-conn-list code {
      border-radius: 4px;
      padding: 4px 8px;
      background: #E6E6E6;
      border: 1px solid #00000014;
      font-size: 13px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      color: #555;
   }
   
   .api-methods { display: flex; flex-direction: column; gap: 16px; }
   .api-method-head {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 16px; flex-wrap: wrap;
   }
   .api-method-pill {
      padding: 4px 8px;
      color: #294766;
      background: #E5F2FF;
      border: 1px solid #00000014;
      border-radius: 4px;
      font-family: 'Inter';
      font-size: 14px; 
      font-weight: 700;
      margin-right:8px;
   }
   .api-method-title { font-size: 24px; font-weight: 600; line-height:40px; margin: 0 0 30px; color: var(--ink-1);}
   
   .api-params-table {
      margin: 0 0 18px;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      width: 100%;
   }
   .api-params-table > thead > tr > th {
      background: var(--bg-3);
      border-top: 0;
      color: var(--ink-1);
      font-size: 14px; 
      font-weight: 400;
      text-align: left;
      padding: 15px;
   }
   .table.api-params-table > tbody > tr > td {
      padding: 10px;
      border-bottom: 1px solid var(--line, #CCCCCC);
      font-size: 14px;
      vertical-align: top;
   }
   .api-params-table .col-param { width: 38%; }
   .api-params-table code {
      border-radius: 4px;
      padding: 4px 8px;
      background: #E6E6E6;
      border: 1px solid #00000014;
      font-size: 13px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      color: #555;
   }
   
   .api-example-head {
      font-size: 11px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.05em;
      color: var(--ink-2); margin: 4px 0 8px;
   }
   .api-example-pre {
      background: #0f172a;
      color: #e2e8f0;
      border: 0;
      border-radius: 8px;
      padding: 16px;
      margin: 0;
      font-size: 12px;
      line-height: 1.6;
      overflow-x: auto;
      white-space: pre;
   }
      
   @media (max-width: 1024px) {
      .massorder-grid { grid-template-columns: 1fr; }
      .api-conn-list { grid-template-columns: 1fr; gap: 4px; }
      .api-conn-list dt { padding-top: 12px; }
      .api-conn-list dt:first-child { padding-top: 0; }
      .massorder-grid { grid-template-columns: 1fr; }
   }
   @media (max-width: 640px) {
      .api-var { grid-template-columns: 1fr; gap: 6px; }
   }
   
   /* ─── Services page: platform tabs + search ─── */
   
   .svc-filter-section {
      padding:30px;
      box-shadow: var(--shadow-1);
      margin-bottom: 10px;
   }
   .svc-filter-label {
      font-family: 'Poppins', 'Inter', sans-serif;
      font-size: 16px;
      font-weight: 600;
      margin: 5px 0 20px 0;
      color: var(--shell-icon);
   }
   .svc-filter-label strong { 
      font-weight: 700;
      color: var(--ink-1);
   }
   
   .svc-tabs-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
      gap: 10px;
   }
   /* Flatten the inner wrappers so their children become direct grid items
     of .svc-tabs-grid. */
   .svc-platform-tabs,
   .svc-more-panel { display: contents; }
   
   .svc-platform-tab {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-width: 0;
      min-height: 80px;
      padding: 14px 8px;
      background: var(--ctrl-bg, #fff);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: none;
      color: var(--ink-1);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all .15s;
      -webkit-appearance: none;
   }
   .svc-platform-tab svg {
      color:var(--shell-icon);
   }
   .svc-platform-tab:hover:not(.svc-platform-tab--active) {
      background: var(--bg-2);
      border-color: #2AA0DB;
      color: #2AA0DB;
   }
   .svc-platform-tab:hover:not(.svc-platform-tab--active) svg {
      color: #2AA0DB;
   }
   .svc-platform-tab--active {
      background: #2AA0DB;
      color: #fff;
      border-color: #2AA0DB;
      box-shadow: 0px 8px 10px 0px #2AA0DB4D;
   }
   .svc-platform-tab--active svg {
      color: #fff;
   }
   .svc-platform-tab__dots {
      font-size: 20px;
      line-height: 1;
      letter-spacing: 2px;
   }
   /* Extras start hidden; .is-open reveals them inline in the same grid.
     Selector is intentionally more specific than .svc-platform-tab so it
     wins regardless of source order. */
   .svc-more-panel:not(.is-open) > .svc-platform-tab { display: none; }
   
   /* Responsive — tab columns are container-aware via auto-fit above; only
     paddings/font/gap are tweaked here for narrow phones. */
   @media (max-width: 900px) {
      .svc-platform-tab { padding: 12px 10px; }
   }
   @media (max-width: 600px) {
      .svc-tabs-grid { gap: 8px; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); }
      .svc-platform-tab { padding: 10px 8px; font-size: 11px; }
   }
   
   /* ─── Services page redesign ("Services List") ─── */
   .svc-platform-grid { grid-template-columns: repeat(11, 1fr); }
   @media (max-width: 1280px) { .svc-platform-grid { grid-template-columns: repeat(6, 1fr); } }
   @media (max-width: 880px)  { .svc-platform-grid { grid-template-columns: repeat(4, 1fr); } }
   @media (max-width: 600px)  { .svc-platform-grid { grid-template-columns: repeat(3, 1fr); } }
   
   /* Standalone search bar */
   .svc-searchbar {
      position: relative; margin-bottom: 20px;
   }
   .svc-searchbar-ic { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
   
   /* Services table */
   .svc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 14px 12px 8px; }
   .svc-table { width: 100%; min-width: 880px; border-collapse: separate; border-spacing: 0; }
   .svc-table thead th {
      background: var(--bg-3); color: var(--ink-1);
      font-size: 13px; font-weight: 500; text-align: left;
      padding: 13px 16px; white-space: nowrap;
   }
   .svc-table thead th:first-child { border-radius: 8px 0 0 10px; }
   .svc-table thead th:last-child { border-radius: 0 10px 10px 0; }
   .svc-table tbody td { padding: 15px 16px; font-size: 14px; color: var(--ink-1); border-bottom: 1px solid var(--line-2); vertical-align: middle; }
   .svc-table .nowrap { white-space: nowrap; }
   .svc-table .tabular { font-variant-numeric: tabular-nums; }
   .svc-c-id { color: var(--ink-3); width: 56px; }
   .svc-c-fav { width: 44px; }
   .svc-c-mm { color: var(--ink-2); }
   .svc-c-rate { color: var(--green); font-weight: 700; }
   .svc-name { color: var(--ink-1); }
   .svc-c-order { text-align: right; }
   
   /* Platform header bar (top of table card) */
   .svc-card-head {
         display: flex; align-items: center; gap: 12px;
         padding: 18px 22px; border-bottom: 1px solid var(--line-2);
   }
   .svc-card-head-ic {
         width: 38px; height: 38px; border-radius: 10px;
         display: inline-flex; align-items: center; justify-content: center;
         background: var(--blue-soft); color: var(--brand-3); flex: 0 0 auto;
   }
   .svc-card-head-ic svg { width: 20px; height: 20px; }
   .svc-card-head-title { font-family: 'Poppins','Inter',sans-serif; font-size: 16px; font-weight: 500; color: var(--shell-icon); }
   .svc-card-head-title b { color: var(--brand-3); font-weight: 700; }
   .svc-card-head-caret { margin-left: auto; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; display: inline-flex; padding: 4px; transition: transform .15s; }
   .svc-card-head-caret.is-collapsed { transform: rotate(180deg); }
   
   /* Platform header bar (top of table card) */
   .svc-card-head {
      display: flex; align-items: center; gap: 12px;
      padding: 18px 22px; border-bottom: 1px solid var(--line-2);
   }
   .svc-card-head-ic {
      width: 38px; height: 38px; border-radius: 10px;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--blue-soft); color: var(--brand-3); flex: 0 0 auto;
   }
   
   /* Category group header row */
   .svc-cat-row > td { padding: 0 !important; border-bottom: 1px solid var(--line-2); }
   .svc-cat-head {
      display: flex; align-items: center; gap: 10px;
      padding: 16px; font-size: 14px; color: var(--ink-1);
      cursor: pointer; user-select: none;
   }
   .svc-cat-head:hover { background: var(--bg-2); }
   .svc-cat-head strong { font-weight: 700; }
   .svc-cat-emoji { font-size: 18px; }
   .svc-cat-caret { margin-left: auto; color: var(--ink-3); transition: transform .15s; }
   .svc-cat-head.is-collapsed .svc-cat-caret { transform: rotate(180deg); }
   
   /* Fav star */
   .svc-table .fav-toggle { cursor: pointer; color: var(--ink-4); font-size: 16px; }
   .svc-table .fav-toggle.favorite-active { color: #F5B301; }
   .svc-table .fav-toggle .fas.fa-star::before { content: "★"; }
   .svc-table .fav-toggle .far.fa-star::before { content: "☆"; }
   .svc-table .fav-toggle [data-favorite-icon] { font-family: inherit; font-style: normal; }
   
   /* Description cell */
   .svc-c-desc { max-width: 320px; position: relative; cursor: pointer; padding-right: 38px !important; color: var(--ink-2); }
   .svc-c-desc .desc-text { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
   .svc-desc-caret { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); transition: transform .15s; }
   .is-desc-open .svc-c-desc .desc-text { -webkit-line-clamp: unset; display: block; }
   .is-desc-open .svc-desc-caret { transform: translateY(-50%) rotate(180deg); }
   
   /* Order button — outline pill */
   .svc-order-btn {
      display: inline-flex; align-items: center; gap: 6px;
      height: 38px; padding: 0 18px; border: 1px solid var(--line); border-radius: 9px;
      background: var(--bg-1); color: var(--ink-1); font-size: 14px; font-weight: 600;
      text-decoration: none; white-space: nowrap;
   }
   .svc-order-btn:hover { border-color: var(--brand); color: var(--brand); }
   
   .services-toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 0;
      flex-wrap: wrap;
   }
   .services-toolbar-left {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      gap: 8px;
   }
   .services-toolbar-left > li { display: inline-flex; }
   .services-toolbar-right { flex: 0 1 280px; min-width: 220px; max-width: 320px; }
   
   /* Services header — title + toolbar top row, platform bar below */
   .services-page .services-header { align-items: center; gap: 16px; flex-wrap: wrap; }
   .services-page .services-header__title { min-width: 0; flex: 1 1 0%; }
   .services-page .services-platform-bar { flex: 1 1 100%; order: 3; }
   .services-page .services-header .services-toolbar {
      flex: 0 0 auto;
      margin: 0;
      flex-wrap: nowrap;
      width: auto;
      min-width: 0;
   }
   .services-page .services-header .services-toolbar-right { flex: 0 1 240px; min-width: 180px; max-width: 280px; margin-left: 0; }
   @media (max-width: 900px) {
      .services-page .services-header { flex-wrap: wrap; }
      .services-page .services-header__title { flex: 1 1 100%; }
      .services-page .services-header .services-toolbar { width: 100%; flex-wrap: wrap; }
      .services-page .services-header .services-toolbar-right { flex: 1 1 200px; max-width: none; }
   }
   @media (max-width: 767px) {
      .form-control { padding:15px;}
      .page-header { gap: 12px; margin-bottom: 12px; padding: 0 14px; }
      .page-header .h1 { font-size: 22px; }
      .services-toolbar { gap: 8px; }
      .services-toolbar-left { flex-wrap: wrap; gap: 6px; }
      .services-toolbar-right { flex: 1 1 100%; min-width: 0; max-width: none; }
      .services-toolbar .btn-secondary, .services-toolbar .dropdown-toggle.btn-secondary {
          height: 36px; padding: 0 12px; font-size: 13px;
      }
      .services-toolbar .input-with-icon .form-control { height: 36px; font-size: 13px; }
   }
   
   /* ─── Platform filter pills ─── */
   
   .services-toolbar .btn-secondary, .services-toolbar .dropdown-toggle.btn-secondary {
      display: inline-flex; align-items: center; gap: 8px;
      height: 38px; padding: 0 14px;
      background: var(--bg-1);
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--ink-1);
      font-size: 13.5px; font-weight: 500;
   }
   .services-toolbar .btn-secondary:hover { background: var(--bg-2); }
   
   /* Filter label: hide the default "All" text when PP fills the active-category span */
   .services-filter-label .services-filter-default { display: inline; }
   .services-filter-label:has([data-filter-active-category]:not(:empty)) .services-filter-default { display: none; }
   
   .services-toolbar .input-with-icon {
      position: relative;
      display: flex; align-items: center;
   }
   .services-toolbar .input-with-icon .input-icon {
      position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
      color: var(--ink-3);
   }
   
   .dropdown-max-height { max-height: 360px; overflow-y: auto; }
   .dropdown-menu .dropdown-item, .dropdown-menu > li > a {
      padding: 8px 12px; border-radius: 6px; font-size: 13.5px;
      display: flex; align-items: center; gap: 8px; color: var(--ink-1);
   }
   .dropdown-divider-label {
      display: block; padding: 6px 12px 4px; font-size: 11px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3);
      border-top: 1px solid var(--line); margin-top: 4px;
   }
   .dropdown-item--platform {
      font-weight: 500;
   }
   .dropdown-item--platform.is-active {
      background: color-mix(in oklch, var(--accent) 12%, transparent);
      color: var(--accent);
   }
   .cat-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 14px; }
   .cat-icon-img { width: 36px; height: 36px; border-radius: 6px; object-fit: contain; }
   
   .services-card {
      background: var(--bg-1);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-1);
      margin-bottom: var(--space-section);
      padding:30px;
   }
   .services-card .table-responsive { border: 0; margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
   
   /* Column widths come from the <colgroup>. Fixed table-layout keeps columns
     stable when the accordion opens — they don't reflow with body content.
     All columns have explicit widths so nothing depends on remainder
     distribution (which is inconsistent across browsers under fixed layout). */
   .services-table > colgroup > col.col-fav      { width: 40px; }
   .services-table > colgroup > col.col-id       { width: 60px; }
   .services-table > colgroup > col.col-svc-name { width: 280px; }
   .services-table > colgroup > col.col-rate     { width: 92px; }
   .services-table > colgroup > col.col-min      { width: 76px; }
   .services-table > colgroup > col.col-max      { width: 80px; }
   .services-table > colgroup > col.col-avg      { width: 100px; }
   .services-table > colgroup > col.col-desc     { width: 220px; }
   .services-table > colgroup > col.col-order    { width: 92px; }
   .services-table tbody tr {
      content-visibility: auto;
      contain-intrinsic-size: auto 48px;
   }
   .services-table tbody td.col-fav,
   .services-table tbody td.col-order { text-align: center; padding-left: 8px; padding-right: 8px; }
   .services-table tbody > tr:not(.services-cat-row):hover {
      background: var(--bg-2);
      transition: background var(--dur-fast);
   }
   .services-table .ink { color: var(--ink-1); font-weight: 500; }
   .services-table tbody > tr > td.col-rate {
      color: #00BF80;
      font-weight: 700;
   }
   .services-table tbody > tr > td.col-rate span {
      display: inline-block;
      padding:15px 5px;
      position:relative;
   }
   /* .services-table tbody > tr > td.col-rate::after {
      content: " /1K";
      font-weight: 600;
      color: var(--ink-2);
      font-size: 0.85em;
      margin-left: 2px;
   } */
   .services-table .service-name { color: var(--ink-1); }
   
   /* Description column: collapsed by default (1 line ellipsis), expands on click */
   .services-table .col-desc {
      min-width: 320px;
   }
   .services-table tbody td.col-desc {
      color: var(--ink-2);
      line-height: 1.5;
      cursor: pointer;
      position: relative;
      padding-right: 36px !important;
   }
   .services-table .col-desc .desc-text {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      white-space: normal;
   }
   .services-table tr.is-desc-open .col-desc {
      color: var(--ink-1);
      vertical-align: top;
      padding-top: 14px !important;
      padding-bottom: 14px !important;
   }
   .services-table tr.is-desc-open .col-desc .desc-text {
      -webkit-line-clamp: unset;
      display: block;
      overflow: visible;
   }
   /* Structured list (built lazily) is only shown when the row is expanded.
     When collapsed, hide the list and show the truncated raw text. */
   .services-table .col-desc .desc-list { display: none; }
   .services-table tr.is-desc-open .col-desc[data-parsed="1"] .desc-text { display: none; }
   /* Hide the raw <br> tags when expanded — JS rewrites the cell as a list */
   .services-table tr.is-desc-open .col-desc .desc-text br { display: none; }
   .services-table tr.is-desc-open .col-desc .desc-list {
   display: flex;
   margin: 0;
   padding: 0;
   list-style: none;
   flex-direction: column;
   gap: 6px;
   }
   .services-table tr.is-desc-open .col-desc .desc-list .desc-title {
      font-weight: 600;
      color: var(--ink-1);
      font-size: 13px;
      margin-bottom: 4px;
   }
   .services-table tr.is-desc-open .col-desc .desc-list li {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding-left: 14px;
      position: relative;
   }
   .services-table tr.is-desc-open .col-desc .desc-list li::before {
      content: "";
      position: absolute;
      left: 0; top: 8px;
      width: 4px; height: 4px;
      border-radius: 50%;
      background: var(--brand);
   }
   .services-table tr.is-desc-open .col-desc .desc-list li .desc-line-main {
      color: var(--ink-1);
      font-weight: 500;
   }
   .services-table tr.is-desc-open .col-desc .desc-list li .desc-line-sub {
      color: var(--ink-2);
      font-size: 12px;
   }
   
   /* Explicitly suppress chevron on the header cell — overrides any older .col-desc::after rule */
   .services-table thead th.col-desc {
      cursor: default;
      padding-right: 14px !important;
   }
   .services-table thead th.col-desc::after { content: none; }
   
   .services-table tbody td.col-desc::after {
      content: "";
      position: absolute;
      right: 14px; top: 50%;
      width: 7px; height: 7px;
      border-right: 1.5px solid var(--ink-3);
      border-bottom: 1.5px solid var(--ink-3);
      transform: translateY(-70%) rotate(45deg);
      transition: transform .15s;
      pointer-events: none;
   }
   .services-table tr.is-desc-open td.col-desc::after {
      top: 22px;
      transform: rotate(-135deg);
   }
   
   /* Mobile: PP renders a separate `.service-description-mobile` row below each
     service row that is `visible-xs visible-sm` and always shows the full
     description by default — flooding the page with text. The Bootstrap
     visible-* utilities use !important, so we have to as well. */
   /* Hide mobile description row by default on ALL widths.
     Bootstrap's `visible-xs`/`visible-sm` utilities would otherwise show it as
     a full-width row that floods the page with description text on desktop too. */
   .services-table tr.service-description-mobile { display: none !important; }
   /* Reveal it ONLY on small screens, when its preceding service row is open. */
   @media (max-width: 991px) {
      .services-table tr.is-desc-open + tr.service-description-mobile { display: table-row !important; }
   }
   .services-table tr.service-description-mobile td {
      background: var(--bg-1);
      color: var(--ink-2);
      font-size: 13px;
      line-height: 1.55;
      padding: 12px 16px 16px;
      border-top: 0;
   }
   
   /* Make the whole service row tappable on mobile so the user has a clear hit area */
   @media (max-width: 991px) {
      .services-table tbody > tr:not(.service-description-mobile):not(.services-table-category) {
          cursor: pointer;
      }
      .services-table tbody > tr.is-desc-open:not(.service-description-mobile) {
          background: var(--bg-1);
      }
   }
   
   /* ─── Mobile: convert services table to stacked cards ───────────────────────
     Each <tr> becomes a card. Hide the <thead>; rows display as flexible blocks.
     The fav star + ID + service name sit on top; rate / min / max appear as a
     chip strip below; the description row reveals on tap (handled by existing
     .is-desc-open accordion JS). */
   @media (max-width: 767px) {
      /* Reset table layout */
      .services-card,
      .services-card .table-responsive,
      .services-table,
      .services-table thead,
      .services-table tbody,
      .services-table tr,
      .services-table th,
      .services-table td {
          display: block;
          width: 100%;
      }
      /* Drop the desktop min-width / fixed layout — cards flow naturally now */
      .services-table { min-width: 0; table-layout: auto; }
      .services-table thead { display: none; }
   
      /* Kill Bootstrap's table-responsive horizontal scroll on mobile —
         cards sit naturally in the page flow, no shrinking needed. */
      .services-card .table-responsive {
          overflow-x: visible;
          overflow-y: visible;
          border: 0;
      }
      .services-card { box-shadow: none; border: 0; background: transparent; padding: 0; }
      .services-card .card-body { padding: 0; }
   
      /* Card container — flexbox for clean cell flow */
      .services-table tbody > tr:not(.services-cat-row):not(.service-description-mobile) {
          display: flex !important;
          flex-wrap: wrap;
          align-items: center;
          position: relative;
          padding: 12px 14px 12px 14px;
          border: 1px solid var(--line);
          border-radius: 8px;
          margin: 8px 14px;
          background: var(--bg-1);
          cursor: pointer;
          transition: border-color .15s, box-shadow .15s;
          box-sizing: border-box;
          width: calc(100% - 28px);
      }
      .services-table tr.service-description-mobile {
          box-sizing: border-box;
          width: calc(100% - 28px);
      }
      .services-table tbody > tr.is-desc-open:not(.service-description-mobile) {
          border-color: var(--brand);
          box-shadow: 0 2px 8px rgba(240,101,67,0.08);
          background: var(--bg-1);
      }
   
      /* All cells: reset */
      .services-table tbody > tr:not(.services-cat-row):not(.service-description-mobile) > td {
          border: 0;
          padding: 0;
          background: transparent !important;
          font-size: 13px;
          line-height: 1.4;
          display: block;
          width: auto;
      }
   
      /* Fav star: sits first, inline */
      .services-table tbody > tr > td.col-fav {
          flex: 0 0 24px;
          order: 1;
          margin-right: 8px;
      }
   
      /* ID: inline prefix */
      .services-table tbody > tr > td.col-id {
          flex: 0 0 auto;
          order: 2;
          margin-right: 6px;
          font-weight: 600;
          color: var(--ink-2);
          font-size: 12px;
      }
      .services-table tbody > tr > td.col-id::before {
          content: "#";
          opacity: 0.6;
          margin-right: 1px;
      }
   
      /* Order button: pushed to far right of first row */
      .services-table tbody > tr > td.col-order {
          flex: 0 0 auto;
          order: 3;
          margin-left: auto;
      }
   
      /* Service name: full width second row */
      .services-table tbody > tr > td.col-svc-name {
          flex: 1 1 100%;
          order: 4;
          margin-top: 6px;
          font-weight: 500;
          color: var(--ink-1);
          font-size: 13.5px;
          line-height: 1.4;
          word-wrap: break-word;
          overflow-wrap: break-word;
      }
   
      /* Hide desktop description cell */
      .services-table tbody > tr > td.col-desc { display: none !important; order: 99; }
   
      /* Mobile description row */
      .services-table tr.service-description-mobile {
          display: none !important;
          padding: 0;
          margin: 0 14px 10px;
      }
      .services-table tr.service-description-mobile td {
          background: var(--bg-1);
          color: var(--ink-2);
          padding: 12px 14px;
          border: 1px solid var(--brand);
          border-top: 0;
          border-radius: 0 0 10px 10px;
          font-size: 13px;
          line-height: 1.55;
          width: auto;
      }
      .services-table tr.is-desc-open + tr.service-description-mobile { display: block !important; }
      .services-table tbody > tr.is-desc-open:not(.service-description-mobile) {
          border-radius: 8px 10px 0 0;
          border-bottom: 0;
          margin-bottom: 0;
      }
   
      /* Category header */
      .services-table tr.services-cat-row {
          display: block !important;
          background: transparent !important;
          margin: 16px 14px 4px;
          padding: 0 !important;
          border: 0 !important;
          box-sizing: border-box;
          width: calc(100% - 28px);
      }
      .services-table tr.services-cat-row td {
          padding: 8px 4px !important;
          background: transparent !important;
          border: 0 !important;
      }
      .services-table tr.services-cat-row .services-cat-head {
         font-size: 12px;
      }
   
      /* Remove the chevron — order button is the CTA */
      .services-table tbody > tr:not(.services-cat-row):not(.service-description-mobile)::after {
          content: none;
      }
   }
   
   .services-cat-row { cursor: pointer; user-select: none; }
   .services-cat-row:focus { outline: none; }
   .services-cat-row:focus-visible td { box-shadow: inset 0 0 0 2px var(--brand); }
   .services-cat-row td {
      background: var(--bg-2) !important;
      border-top: 1px solid var(--line) !important;
      padding: 10px 14px !important;
      transition: background var(--dur-fast) ease;
   }
   .services-cat-row:hover td { background: var(--bg-3, #eef0f4) !important; }
   .services-cat-head {
      display: flex; align-items: center; gap: 8px;
      font-family: 'Poppins';
      font-weight:600;
      font-size: 16px; 
      line-height:30px;
      color: var(--ink-1);
   }
   .services-cat-head strong { color: var(--ink-1); font-weight: 600; }
   /* Chevron affordance — sits right next to the category name (not at the
     row's far-right edge, which would fall offscreen when the table overflows
     its responsive wrapper). Flips 180° when the accordion is open. */
   .services-cat-head::after {
      content: "";
      width: 10px; height: 10px;
      margin-left: 4px;
      border-right: 2.5px solid var(--ink-2);
      border-bottom: 2.5px solid var(--ink-2);
      transform: rotate(45deg) translate(-3px, -3px);
      transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease;
      flex-shrink: 0;
   }
   .services-cat-row:hover .services-cat-head::after { border-color: var(--brand); }
   .services-cat-row.is-open .services-cat-head::after {
      transform: rotate(-135deg) translate(-3px, -3px);
      border-color: var(--brand);
   }
   
   .fav-toggle { cursor: pointer; color: var(--ink-4); display: inline-flex; align-items: center; }
   .fav-toggle:hover { color: var(--amber); }
   .fav-toggle.favorite-active { color: var(--amber); }
   
   .info-tip { display: inline-flex; vertical-align: middle; margin-left: 4px; color: var(--ink-3); cursor: help; }
   
   .services-text-wrap { margin-top: 24px; padding: 20px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg); }
   .services-text { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
   
   .col-order { text-align: center; }
   .btn.btn-order-service {
      display: inline-flex; align-items: center; justify-content: center; gap: 4px;
      padding: 5px 12px; border-radius: var(--radius-sm);
      background: var(--brand-soft) !important; color: var(--brand) !important;
      font-size: 11.5px; font-weight: 600;
      border: 1px solid var(--brand) !important; text-decoration: none;
      transition: background var(--dur-fast) ease, transform var(--dur-fast) ease, box-shadow var(--dur-normal) var(--ease-out-expo);
      white-space: nowrap;
   }
   .btn.btn-order-service:hover,
   .btn.btn-order-service:focus,
   .btn.btn-order-service:active {
      background: var(--brand) !important; transform: translateY(-1px);
      color: #fff !important; border-color: var(--brand) !important;
      box-shadow: var(--shadow-brand);
      text-decoration: none;
   }
   
   .services-cat-row .col-order { background: transparent; }
   /* ─── Orders page ("Orders Status") ─── */
   
   .ord-toolbar { padding: 30px 0; }
   
   /* Search */
   .ord-search { margin:0 0 60px; }
   
   /* Status filter chips */
   .ord-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
   .ord-filter {
      display: inline-flex; align-items: center; height: 50px; padding: 10px 30px;
      border: 1px solid var(--ink-2); border-radius: 999px;
      font-size: 14px; font-weight: 600; 
      color: var(--ink-2);
      background: var(--bg-1); text-decoration: none;
      transition: background .15s, color .15s, border-color .15s;
   }
   .ord-filter:hover { border-color: var(--ink-1); color: var(--ink-1); }
   .ord-filter.is-active { 
      background: var(--brand); 
      color: #fff; 
      border-color: rgba(0, 0, 0, 0.08);
      box-shadow: 0 4px 5px 0 rgba(73, 140, 232, 0.3);
   }
   
   /* Table */
   .ord-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 14px 10px 8px; }
   .ord-table { width: 100%; min-width: 880px; border-collapse: separate; border-spacing: 0; color: var(--ink-2); table-layout: auto; }
   .ord-table thead th {
      background: var(--bg-3);
      color: var(--ink-1);
      font-size: 14px;
      font-weight: 400;
      text-align: left;
      padding: 15px;
      vertical-align: middle;
      border: 0;
   }
   .ord-table thead th:first-child { border-radius: 8px 0 0 8px; }
   .ord-table thead th:last-child { border-radius: 0 8px 8px 0; }
   .ord-table thead th.num { text-align: right; }
   
   .ord-table tbody tr:last-child td { border-bottom: 0; }
   .ord-table tbody tr { transition: background-color .15s ease; }
   .ord-table tbody tr:hover td { background: var(--bg-4); }
   .ord-table .nowrap { white-space: nowrap; }
   .ord-table .tabular { font-variant-numeric: tabular-nums; }
   .ord-table .num,
   
   .ord-table .ord-id { color: var(--ink-2); }
   .ord-table .ord-date { white-space: nowrap; line-height: 1.35; }
   .ord-table .ord-date .ord-date-d { display: block; color: var(--ink-2); }
   .ord-table .ord-date .ord-date-t { display: block; font-size: 12px; color: var(--ink-3); }
   .ord-table .ord-link { color: var(--ink-2); font-size: 13.5px; }
   .ord-table .ord-charge { color: var(--shell-green); font-weight: 700; }
   .ord-table .ord-service { max-width: 240px; }
   .ord-table .ord-service-id { color: var(--brand); font-weight: 600; }
   .ord-table .ord-service-sep { color: var(--ink-4); margin: 0 6px; }
   .ord-table .ord-service-name { color: var(--ink-2); }
   .ord-table .ord-username { color: var(--ink-1); font-weight: 500; max-width: 200px; }
   .ord-table .ord-remains.is-warn { color: var(--accent); font-weight: 600; }
   
   /* Status pill + underline accent */
   .ord-status {
      position: relative; display: inline-block;
      padding: 5px 12px; border-radius: 4px;
      font-size: 12px; font-weight: 600; white-space: nowrap;
   }
   .ord-status::after {
      content: ""; position: absolute; left: 12%; right: 12%; bottom: -7px;
      height: 2px; border-radius: 2px; background: currentColor; opacity: .85;
   }
   .ord-status--green  { background: var(--green-soft);  color: #16a34a; }
   .ord-status--blue   { background: var(--blue-soft);   color: var(--brand); }
   .ord-status--amber  { background: var(--amber-soft);  color: #d97706; }
   .ord-status--yellow { background: #FEF9C3;            color: #CA8A04; }
   .ord-status--gray   { background: var(--bg-3);        color: var(--ink-2); }
   .ord-status--red    { background: #FFE4E6;            color: #E11D48; }
   
   /* Action buttons */
   .ord-col-act { text-align: center; white-space: nowrap; }
   .ord-act {
      display: inline-flex; text-align:center; align-items: center; justify-content: center; gap: 6px;
      min-width: 124px; height: 42px; padding: 0 18px;
      border-radius: 8px; font-size: 14px; font-weight: 600;
      text-decoration: none; cursor: pointer; border: 1px solid transparent;
   }
   .ord-act--grad { background: linear-gradient(135deg, #FF6B5E 0%, #FF8A5C 100%); color: #fff; }
   .ord-act--grad:hover { filter: brightness(1.04); color: #fff; }
   .ord-act--ghost { background: var(--bg-1); border-color: var(--line-3); color: var(--ink-1); }
   .ord-act--ghost:hover { border-color: var(--ink-2); color: var(--ink-1); }
   
   .ord-empty { padding: 48px 24px; text-align: center; color: var(--ink-3); font-size: 14px; }
   
   /* Pagination */
   .orders-pagination { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 16px 0 0; }
   .orders-pagination > li > a,
   .orders-pagination > li > span {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 32px; height: 32px; padding: 0 8px;
      border: 1px solid var(--line); border-radius: 4px;
      font-size: 13px; color: var(--ink-2); text-decoration: none;
      background: var(--bg-1);
      transition: background .15s, color .15s;
   }
   .orders-pagination > li > a:hover { background: var(--bg-2); color: var(--ink-1); }
   .orders-pagination > li.active > a,
   .orders-pagination > li.active > span { background: var(--brand); color: #fff; border-color: var(--brand); }
   
   /* ─── Mobile: ord-table collapses to a stacked card view ────────────────
     Below 760px each <tr> becomes a card; each <td> shows its label via
     data-label. The wide table layout (10–11 cols) is unreadable on phones
     even with horizontal scroll, so we restructure rather than shrink. */
   
   @media (max-width: 760px) {
      .ord-toolbar { padding: 15px 0; }
      .ord-search {margin: 0 0 30px;}
      .ord-table-wrap { padding: 8px 12px 12px; overflow: visible; }
      .ord-table { min-width: 0; display: block; }
      .ord-table thead { position: absolute; left: -9999px; }
      .ord-table tbody,
      .ord-table tr { display: block; }
      .ord-table tr {
          background: var(--bg-1);
          border: 1px solid var(--line-2);
          border-radius: 12px;
          padding: 8px 4px;
          margin-bottom: 12px;
          box-shadow: var(--shadow-1);
      }
      .ord-table tbody tr:hover td { background: transparent; }
      .ord-table tbody td {
          display: flex; align-items: center; justify-content: space-between;
          gap: 16px; padding: 9px 12px;
          border-bottom: 1px dashed var(--line-2);
          font-size: 14px; text-align: right;
      }
      .ord-table tbody tr td:last-child { border-bottom: 0; }
      .ord-table .num,
      .ord-table thead th.num { text-align: right; }
      .ord-table tbody td::before {
          content: attr(data-label);
          color: var(--ink-3);
          font-size: 12px;
          font-weight: 500;
          text-transform: uppercase;
          letter-spacing: 0.04em;
          text-align: left;
          flex: 0 0 auto;
      }
      .ord-table tbody td[data-label=""]::before { content: none; }
      .ord-table .ord-service { max-width: none; }
      .ord-table .ord-service-name,
      .ord-table .ord-link,
      .ord-table .ord-username {
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
          max-width: 60vw;
      }
      .ord-table .ord-date { white-space: nowrap; text-align: right; }
      .ord-table .ord-date .ord-date-d,
      .ord-table .ord-date .ord-date-t { display: inline; }
      .ord-table .ord-date .ord-date-t::before { content: " · "; color: var(--ink-4); }
      .ord-col-act { justify-content: flex-end !important; }
      .ord-col-act .ord-act { width: 100%; min-width: 0; }
      .ord-empty { padding: 32px 16px; }
   }
   /* ─── Updates page ─── */
   
   .updates-page,
   .addfunds-page { padding: 8px 0 32px; width: 100%; }
   .updates-toolbar .dropdown { position: relative; }
   .updates-toolbar .updates-search { margin-left: auto; flex: 1; max-width: 360px; min-width: 220px; }
   .updates-toolbar .input-with-icon { position: relative; }
   .updates-toolbar .input-with-icon .input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
   .updates-toolbar {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 16px;
   flex-wrap: wrap;
   }
   .updates-search {
     position: relative;
     display: block;
     flex: 1 1 280px;
     max-width: 360px;
     min-width: 220px;
     margin: 0;
     box-sizing: border-box;
   }
   .updates-search input {
     width: 100%;
     box-sizing: border-box;
   }
   
   /* Updates dropdown: remove stray list bullets */
   .updates-toolbar ul,
   .updates-toolbar ol {
     list-style: none !important;
     padding-left: 0 !important;
     margin: 0 !important;
   }
   .updates-toolbar li {
     list-style: none !important;
   }
   .updates-toolbar li::marker {
     content: "" !important;
   }
   .updates-toolbar li::before {
     display: none !important;
   }
   
   /* Updates filter dropdown: add inset so items don't stick to corners */
   .updates-toolbar .dropdown-menu {
     padding: 6px !important;
     border-radius: 8px;
     box-sizing: border-box;
   }
   .updates-toolbar .dropdown-menu > li > a {
     padding: 10px 12px !important;
     margin: 2px 4px;
     border-radius: 8px;
     box-sizing: border-box;
   }
   .updates-toolbar .dropdown-menu > li > a:hover,
   .updates-toolbar .dropdown-menu > li > a:focus {
     background: rgba(240,101,67,0.10);
   }
   
   .updates-table { margin: 0; font-size: 13.5px; }
   .updates-table thead th { background: var(--bg-3); border-bottom: 1px solid var(--line); border-top: 0; color: var(--ink-2); font-size: 12px; font-weight: 600; padding: 11px 14px; vertical-align: middle; }
   .updates-table tbody td { padding: 12px 14px; border-top: 1px solid var(--line-2); vertical-align: middle; }
   .updates-table .col-date { width: 160px; }
   .service-name {     
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
      color: var(--ink-1);
   }
   .service-name .ink { color: var(--ink-1); font-weight: 500; }
   .col-rate { color: var(--green); font-weight:700;}
   
   .empty-row { text-align: center; color: var(--ink-3); padding: 40px 14px !important; font-size: 13px; }
   .empty-state { display: flex; flex-direction: column; align-items: center; gap: 6px; }
   .empty-state svg { color: var(--ink-3); opacity: 0.35; margin-bottom: 4px; }
   .empty-state-text { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
   .empty-state-sub { font-size: 12px; color: var(--ink-3); }
   
   /* ─── Add Funds page ("Add Funds") ─── */
   
   .addfunds-layout {
      display: grid;
      grid-template-columns: 1fr 360px;
      gap: 10px;
      align-items: start;
   }
   .addfunds-side { display: flex; flex-direction: column; gap: 10px; }
   
   /* Category filter chips */
   .pay-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 20px; }
   .pay-filter {
      display: inline-flex; align-items: center; height: 50px; padding: 10px 30px;
      border: 1px solid var(--ink-2); border-radius: 999px;
      font-size: 14px; font-weight: 600; 
      color: var(--ink-2);
      background: var(--bg-1); text-decoration: none;
      transition: background .15s, color .15s, border-color .15s;
   }
   .pay-filter:hover { border-color: var(--ink-1); color: var(--ink-1); }
   .pay-filter.is-active { 
      background: var(--brand); 
      color: #fff; 
      border-color: rgba(0, 0, 0, 0.08);
      box-shadow: 0 4px 5px 0 rgba(73, 140, 232, 0.3);
   }
   
   /* Payment method tiles */
   .pay-tiles {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: 10px;
      margin: 30px 0 48px;
   }
   .pay-tiles-empty {
      grid-column: 1 / -1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 28px 16px 12px;
   }
   .pay-tiles-empty[hidden] { display: none !important; }
   .pay-tiles-empty-ic {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      margin-bottom: 12px;
      border-radius: 12px;
      background: var(--bg-2);
      color: var(--ink-3);
   }
   .pay-tiles-empty-ic svg { width: 22px; height: 22px; display: block; }
   .pay-tiles-empty-text {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      color: var(--ink-2);
      letter-spacing: -0.01em;
   }
   .pay-tile {
      position: relative;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
      min-height: 92px; padding: 15px 8px;
      border-radius: var(--radius);
      background: var(--bg-1); cursor: pointer; user-select: none;
      box-shadow: 0px 0px 30px 0px rgba(51, 68, 102, 0.1);
      overflow: hidden;
      border:1px solid #fff;
      transition: box-shadow var(--dur-normal) var(--ease-out-expo),
                  transform var(--dur-normal) var(--ease-out-expo);
   
   }
   .pay-tile:hover { box-shadow: var(--shadow-1); }
   .pay-tile-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
   .pay-tile > :not(.pay-tile-radio):not(.pay-tile-ic):not(.pay-tile-name) { display: none !important; }
   .pay-tile-ic {
      display: inline-flex; align-items: center; justify-content: center;
      width: 30px; height: 30px; color: var(--ink-1);
   }
   .pay-tile-ic svg { width: 28px; height: 28px; display: block; }
   .pay-tile-img { width: 28px; height: 28px; object-fit: contain; display: block; }
   .pay-ic-letter { font-size: 18px; font-weight: 700; }
   /* 1xgate text logo */
   .pay-1xgate { font-family: 'Poppins','Inter',sans-serif; font-size: 12px; font-weight: 800; letter-spacing: -0.3px; color: var(--ink-1); white-space: nowrap; }
   .pay-1xgate b { color: #1E6FD9; font-weight: 800; }
   .pay-tile-name { font-size: 12px; font-weight: 600; color: var(--ink-1); text-align: center; line-height: 1.2; }
   .pay-tile.is-active .pay-tile-name { color: #fff; }
   /* Flip monochrome (currentColor) icons to white on active tiles */
   .pay-tile.is-active .pay-tile-ic { color: #fff; }
   .pay-tile.is-active .pay-1xgate { color: #fff; }
   .pay-tile.is-active .pay-1xgate b { color: #6CA8FF; }
   /* Active tile — default (Cryptomus etc.) + brand overrides */
   .pay-tile.is-active {
      background: #313131;
      border-color: #313131;
      box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2);
   }
   .pay-tile.is-active.pay-brand-heleket {
      background: #E8313A;
      border-color: #E8313A;
      box-shadow: 0px 8px 10px 0px rgba(232, 49, 58, 0.35);
   }
   .pay-tile.is-active.pay-brand-heleket .pay-tile-ic svg path { fill: #fff; }
   .pay-tile.is-active.pay-brand-cryptogate {
      background: #A855F7;
      border-color: #A855F7;
      box-shadow: 0px 8px 10px 0px rgba(168, 85, 247, 0.35);
   }
   .pay-tile.is-active.pay-brand-cryptogate .pay-tile-ic { color: #fff; }
   .pay-tile.is-active.pay-brand-cryptogate .pay-tile-ic svg,
   .pay-tile.is-active.pay-brand-cryptogate .pay-tile-ic svg path { stroke: #fff; }
   .pay-selected.pay-brand-cryptogate .pay-selected-ic svg,
   .pay-selected.pay-brand-cryptogate .pay-selected-ic svg path { stroke: #A855F7; }
   .pay-tile.is-active.pay-brand-1xgate {
      background: #1E6FD9;
      border-color: #1E6FD9;
      box-shadow: 0px 8px 10px 0px rgba(30, 111, 217, 0.35);
   }
   .pay-tile.is-active.pay-brand-usdt {
      background: #26A17B;
      border-color: #26A17B;
      box-shadow: 0px 8px 10px 0px rgba(38, 161, 123, 0.35);
   }
   .pay-tile.is-active.pay-brand-bitcoin {
      background: #F7931A;
      border-color: #F7931A;
      box-shadow: 0px 8px 10px 0px rgba(247, 147, 26, 0.35);
   }
   .pay-tile.is-active.pay-brand-wise {
      background: #37B24D;
      border-color: #37B24D;
      box-shadow: 0px 8px 10px 0px rgba(55, 178, 77, 0.35);
   }
   /* Selected method header — match brand accent */
   .pay-selected.pay-brand-heleket .pay-selected-name { color: #E8313A; }
   .pay-selected.pay-brand-cryptogate .pay-selected-name { color: #A855F7; }
   .pay-selected.pay-brand-1xgate .pay-selected-name { color: #1E6FD9; }
   .pay-selected.pay-brand-usdt .pay-selected-name { color: #26A17B; }
   .pay-selected.pay-brand-bitcoin .pay-selected-name { color: #F7931A; }
   .pay-selected.pay-brand-wise .pay-selected-name { color: #37B24D; }
   
   /* Selected method + instruction */
   .pay-selected { margin-bottom: 26px; }
   .pay-selected-head { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; }
   .pay-selected-ic { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-1); }
   .pay-selected-ic svg { width: 30px; height: 30px; display: block; }
   .pay-selected-ic .pay-tile-img { width: 30px; height: 30px; object-fit: contain; display: block; }
   .pay-selected-name {
      font-family: 'Poppins','Inter',sans-serif;
      font-size: 22px; font-weight: 700; color: var(--ink-1);
   }
   .pay-instr-body { font-size: 14px; line-height: 1.7; color: var(--ink-2); }
   .pay-instr-body p { margin: 0 0 5px; }
   .pay-instr-body p:last-child { margin-bottom: 0; }
   .pay-instr-body strong, .pay-instr-body b { font-weight: 700; }
   
   /* Amount */
   .pay-amount-input {
      font-size: 16px; font-weight: 700; color: var(--green);
   }
   .amount-error { font-size: 12px; color: #dc2626; margin-top: 4px; }
   
   /* Submit */
   .pay-submit {
      width: 100%; height: 56px;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      font-size: 16px; font-weight: 700; position: relative;
   }
   .pay-submit .pay-label { display: inline-flex; align-items: center; gap: 8px; }
   .pay-submit .pay-loading { display: inline-flex; align-items: center; gap: 8px; }
   .pay-submit.loading { opacity: 0.75; cursor: not-allowed; }
   .btn-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: spin 0.6s linear infinite; }
   @keyframes spin { to { transform: rotate(360deg); } }
   
   .addfunds-history-table tbody td { color: var(--ink-2); }
   .addfunds-history-table .col-date   { width: 120px; }
   /* Date cell holds two stacked spans (date / time) — let the cell itself wrap by line, but each span still truncates */
   .addfunds-history-table .aff-date { white-space: normal; }
   .addfunds-history-table .hist-amount { font-weight: 700; color: var(--shell-green) }
   .addfunds-history-table  tbody td .hist-time { font-size: 12px; color: var(--ink-3); line-height: 1;}
   .addfunds-history-table .hist-affil { color: var(--accent); }
   
   /* Trust signals aside (shown when no panel-provided addfunds_aside) */
   .trust-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
   .trust-item { display: flex; align-items: flex-start; gap: 12px; }
   .trust-ic {
      flex: 0 0 32px; width: 32px; height: 32px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 8px;
      background: rgba(255, 122, 89, 0.12);
      color: var(--accent);
   }
   .trust-ic svg { width: 16px; height: 16px; display: block; }
   .trust-text { min-width: 0; }
   .trust-title { font-size: 14px; font-weight: 700; color: var(--ink-1); line-height: 1.3; }
   .trust-desc { font-size: 13px; line-height: 1.55; color: var(--ink-3); margin-top: 2px; }
   
   @media (max-width: 1024px) {
      .addfunds-layout { grid-template-columns: 1fr; }
   }
   
   /* ─── Generic page toolbar + data card (subscriptions, refunds, etc) ─── */
   
   .page-toolbar {
      display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
   }
   .status-pills {
      list-style: none; margin: 0; padding: 0;
      display: inline-flex; flex-wrap: wrap; gap: 4px;
      background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px;
   }
   .status-pills > li > a {
      display: inline-flex; align-items: center;
      padding: 6px 14px;
      border-radius: 4px;
      font-size: 13px; font-weight: 500; color: var(--ink-2);
      text-decoration: none; transition: background .15s, color .15s;
   }
   .status-pills > li > a:hover { color: var(--ink-1); background: var(--bg-1); }
   .status-pills > li.active > a {
      background: var(--bg-1); color: var(--ink-1);
      box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px var(--line);
   }
   
   .page-search { margin-left: auto; flex: 1; max-width: 320px; min-width: 200px; }
   .page-search .input-with-icon { position: relative; display: flex; align-items: center; }
   .page-search .input-icon {
      position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none;
   }
   .data-card {
      background: var(--bg-1); border: 1px solid var(--line);
      border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1);
   }
   .data-card .table-responsive { border: 0; margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
   .data-table { margin: 0; font-size: 13.5px; min-width: 900px; }
   .data-table thead th {
      background: var(--bg-3); border-bottom: 1px solid var(--line); border-top: 0;
      color: var(--ink-2); font-size: 11px; font-weight: 600;
      padding: 10px 15px; vertical-align: middle;
   }
   .data-table tbody td {
      padding: 10px 15px; border-top: 1px solid var(--line-2); vertical-align: middle;
   }
   .data-table .col-id { width: 80px; color: var(--ink-2); }
   .data-table .nowrap { white-space: nowrap; }
   .data-table .ink { color: var(--ink-1); font-weight: 500; }
   .data-table .link { color: var(--ink-1); }
   .data-table .actions { white-space: nowrap; }
   .data-table .empty-cell {
      text-align: center; padding: 40px 14px; color: var(--ink-3); font-size: 13.5px;
   }
   
   .status-pill {
      display: inline-flex; align-items: center;
      padding: 3px 10px; border-radius: 999px;
      font-size: 11.5px; font-weight: 500;
      background: var(--bg-2); color: var(--ink-2);
      border: 1px solid var(--line);
   }
   .status-pill.status-0 { background: rgba(255,176,32,0.10); color: #b87a00; border-color: rgba(255,176,32,0.25); }
   .status-pill.status-1 { background: rgba(34,197,94,0.10); color: #15803d; border-color: rgba(34,197,94,0.25); }
   .status-pill.status-2 { background: rgba(100,116,139,0.10); color: #475569; border-color: rgba(100,116,139,0.20); }
   .status-pill.status-3 { background: rgba(34,197,94,0.10); color: #15803d; border-color: rgba(34,197,94,0.25); }
   .status-pill.status-4 { background: rgba(239,68,68,0.10); color: #b91c1c; border-color: rgba(239,68,68,0.25); }
   .status-pill.status-5 { background: rgba(239,68,68,0.10); color: #b91c1c; border-color: rgba(239,68,68,0.25); }
   
   /* ─── Tickets page ─── */
   
   .tickets-page .tickets-grid {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 20px;
      align-items: start;
      margin-bottom: 28px;
   }
   .tickets-page .card-section-head {
      display: flex; justify-content: space-between; align-items: baseline;
      margin-bottom: 16px;
   }
   .tickets-page .card-section-head .h3 {
      font-size: 16px; font-weight: 600; margin: 0; color: var(--ink-1);
   }
   .tickets-page .card-section-head .small { font-size: 11.5px; }
   
   .tickets-page textarea.form-control {
      height: auto;
      min-height: 140px;
   }
   .tickets-page .input-group {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
   }
   .account-page .form-group > select:focus,
   .account-page .form-group > input:focus,
   .account-page .form-group > textarea:focus,
   .account-page .account-card select:focus,
   .account-page .account-card input:focus,
   .account-page .account-card textarea:focus { border-color: var(--brand); outline: 0; box-shadow: none; }
   
   .tickets-page textarea.form-control.input-lg {
      height: auto;
      min-height: 140px;
   }
   .tickets-page select.form-control.input-lg { padding-right: 42px; }
   
   /* Toolbar search: .tickets-page .form-control resets horizontal padding and erases room for the icon */
   .tickets-page .page-search .form-control,
   .tickets-page .page-search .input-with-icon .form-control {
      padding-inline-start: 42px;
      padding-inline-end: 14px;
   }
   .tickets-page .page-search .input-icon {
      left: 12px;
      inset-inline-start: 12px;
   }
   .tickets-page .page-search input.form-control.input-lg {
      padding-inline-start: 42px !important;
      padding-inline-end: 14px !important;
   }
   
   .tickets-page form button[type="submit"],
   .tickets-page form input[type="submit"],
   .tickets-page form .btn-primary,
   .tickets-page form .btn.btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 100%;
      height: 42px;
      min-height: 42px;
      padding: 0 16px;
      margin-top: 4px;
      box-sizing: border-box;
      text-align: center;
      line-height: 1;
   }
   .tickets-page form button[type="submit"] i,
   .tickets-page form button[type="submit"] svg,
   .tickets-page form .btn-primary i,
   .tickets-page form .btn-primary svg,
   .tickets-page form .btn.btn-primary i,
   .tickets-page form .btn.btn-primary svg {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
   }
   .tickets-page form button[type="submit"] > .glyphicon,
   .tickets-page form .btn-primary > .glyphicon,
   .tickets-page form .btn.btn-primary > .glyphicon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      top: 0;
      line-height: 1;
   }
   .tickets-page form button[type="submit"] > .fa,
   .tickets-page form .btn-primary > .fa,
   .tickets-page form .btn.btn-primary > .fa {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
   }
   
   .tickets-tips { background: var(--bg-2); border: 1px solid var(--line); }
   .tickets-tips .h3 { font-size: 14px; font-weight: 600; margin: 0 0 12px; color: var(--ink-1); }
   .tickets-tips-list {
      list-style: none; padding: 0; margin: 0 0 18px;
      display: flex; flex-direction: column; gap: 10px;
      font-size: 13px; color: var(--ink-2); line-height: 1.5;
   }
   .tickets-tips-list li { padding-left: 18px; position: relative; }
   .tickets-tips-list li::before {
      content: ""; position: absolute; left: 0; top: 6px;
      width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
   }
   .tickets-tips-list strong { color: var(--ink-1); font-weight: 600; }
   
   .tickets-sla {
      border-top: 1px solid var(--line); padding-top: 14px;
      display: flex; flex-direction: column; gap: 8px; font-size: 12px;
   }
   .tickets-sla .sla-row { display: flex; justify-content: space-between; }
   .tickets-sla .ink { color: var(--ink-1); font-weight: 500; }
   
   .tickets-toolbar { align-items: baseline; }
   .tickets-toolbar-title { flex: 0 0 auto; }
   .tickets-toolbar-title .h3 { font-size: 18px; font-weight: 600; margin: 0; color: var(--ink-1); }
   
   @media (max-width: 900px) {
      .tickets-page .tickets-grid { grid-template-columns: 1fr; }
   }
   
   
   /* ─── Ticket thread (viewticket) ─── */
   
   .viewticket-page .back-link {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 12px; color: var(--ink-3); text-decoration: none;
      margin-bottom: 8px;
   }
   .viewticket-page .back-link:hover,
   .blogpost-page .back-link:hover { color: var(--ink-1); }
   .viewticket-page .ticket-title { font-size: 22px; }
   
   .ticket-thread {
      max-width: 820px; margin: 0 auto;
      display: flex; flex-direction: column; gap: 14px;
   }
   .ticket-row { display: flex; gap: 10px; align-items: flex-start; }
   .ticket-row-mine { justify-content: flex-end; }
   .ticket-row-support { justify-content: flex-start; }
   .ticket-avatar {
      flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
      background: rgba(240,101,67,0.10); color: var(--brand);
      display: inline-flex; align-items: center; justify-content: center;
      margin-top: 6px;
   }
   .ticket-bubble {
      max-width: 78%;
      background: var(--bg-1); border: 1px solid var(--line);
      border-radius: 12px; padding: 14px 16px;
      box-shadow: var(--shadow-1);
   }
   .ticket-bubble-mine {
      background: var(--brand); color: #fff; border-color: transparent;
      border-bottom-right-radius: 4px;
   }
   .ticket-bubble-mine .muted, .ticket-bubble-mine strong { color: rgba(255,255,255,0.92); }
   .ticket-bubble-mine .ticket-file { color: #fff; border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.10); }
   .ticket-bubble-mine .ticket-file:hover { background: rgba(255,255,255,0.18); }
   .ticket-bubble-support { border-bottom-left-radius: 4px; }
   
   .ticket-bubble-header {
      display: flex; align-items: center; gap: 8px;
      font-size: 12px; margin-bottom: 6px;
   }
   .ticket-bubble-header strong { font-weight: 600; }
   .ticket-bubble-body {
      font-size: 14px; line-height: 1.55; word-break: break-word;
      white-space: pre-wrap;
   }
   .ticket-bubble-files {
      margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px;
   }
   .ticket-file {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px;
      border: 1px solid var(--line); border-radius: 999px;
      background: var(--bg-2);
      font-size: 12px; color: var(--ink-2); text-decoration: none;
      transition: background .15s;
   }
   .ticket-file:hover { background: var(--bg-1); color: var(--ink-1); }
   
   .ticket-reply { margin-top: 10px; }
   .viewticket-page textarea.form-control { min-height: 110px; }
   
   /* OTP input on 2fa */
   .auth-otp {
      text-align: center;
      font-size: 24px; font-weight: 600;
      letter-spacing: 0.4em;
      font-variant-numeric: tabular-nums;
   }
   
   /* ─── FAQ page ─── */
   
   .faq-page .page-header-eyebrow,
   .affiliates-page .page-header-eyebrow,
   .terms-page .page-header-eyebrow,
   .childpanels-page .page-header-eyebrow,
   .childpanel-order-page .page-header-eyebrow { font-size: 12px; font-weight: 600; color: var(--brand); margin-bottom: 2px; }
   
   .faq-grid {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 20px;
      align-items: start;
   }
   
   .faq-content h1, .faq-content h2, .faq-content h3, .faq-content h4 {
      color: var(--ink-1); font-weight: 600; letter-spacing: -0.01em;
      margin: 28px 0 12px;
   }
   .faq-content h1:first-child, .faq-content h2:first-child, .faq-content h3:first-child {
      margin-top: 0;
   }
   .faq-content h2 { font-size: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
   .faq-content h3 { font-size: 16px; }
   .faq-content h4 { font-size: 14px; color: var(--ink-2); }
   .faq-content p {
      color: var(--ink-2); line-height: 1.65; font-size: 14px;
      margin: 0 0 14px;
   }
   .faq-content ul, .faq-content ol {
      color: var(--ink-2); line-height: 1.65; font-size: 14px;
      padding-left: 22px; margin: 0 0 14px;
   }
   .faq-content li { margin-bottom: 6px; }
   .faq-content a { color: var(--brand); text-decoration: none; }
   .faq-content a:hover { text-decoration: underline; }
   .faq-content code {
      background: var(--bg-2); border: 1px solid var(--line);
      padding: 1px 6px; border-radius: 4px;
      font-size: 12px; color: var(--ink-1);
   }
   .faq-content blockquote {
      border-left: 3px solid var(--brand);
      padding: 4px 0 4px 16px;
      margin: 0 0 14px;
      color: var(--ink-2); font-style: normal;
   }
   .faq-content hr { border: 0; border-top: 1px solid var(--line-2); margin: 24px 0; }
   
   .faq-aside { background: var(--bg-2); border: 1px solid var(--line); position: sticky; top: 88px; }
   .faq-aside-icon {
      width: 40px; height: 40px; border-radius: 8px;
      background: rgba(240,101,67,0.10); color: var(--brand);
      display: inline-flex; align-items: center; justify-content: center;
      margin-bottom: 12px;
   }
   .faq-aside .h3 { font-size: 15px; font-weight: 600; margin: 0 0 6px; color: var(--ink-1); }
   .faq-aside-stats {
      margin-top: 18px; padding-top: 16px;
      border-top: 1px solid var(--line);
      display: flex; flex-direction: column; gap: 8px;
      font-size: 12px;
   }
   
   @media (max-width: 900px) {
      .faq-grid { grid-template-columns: 1fr; }
      .faq-aside { position: static; }
   }
   
   /* ─── Affiliates page ("Affiliate and Grow") ─── */
   
   /* KPI row — 6 stat cards */
   .aff-kpis {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 10px;
      padding:10px;
      box-shadow: var(--shadow-1);
      border: 1px solid var(--line-4);
      border-radius: var(--radius);
   }
   .aff-kpi {
      position: relative; 
      overflow: hidden;
      background: var(--bg-1);
      padding: 30px 20px;
      box-shadow: var(--shadow-1);
      border: 1px solid var(--line-4);
      border-radius: var(--radius);
      min-height: 116px;
   }
   .aff-kpi-label {
      font-size: 14px; font-weight: 400; line-height:1; 
      color: var(--shell-icon);
      margin-bottom: 10px;
   }
   .aff-kpi-value {
      font-size: 16px; font-weight: 700; color: var(--ink-2);
      line-height: 1;
      position: relative; z-index: 1;
   }
   .aff-kpi-value.tabular {
      font-size: 24px; font-weight: 700; color: var(--green);
   }
   /* faint icon watermark, right side */
   .aff-kpi-wm {
      position: absolute; right: -8px; bottom: -10px;
      width: 76px; height: 76px;
      color: var(--ink-1); opacity: 0.05;
      pointer-events: none;
   }
   /* Total Earnings — green gradient fill */
   .aff-kpi--accent {
      background: linear-gradient(90deg, #00BF80 0%, #28DDA1 100%);
      color:#fff;
   }
   .aff-kpi--accent .aff-kpi-label { color:#fff; }
   .aff-kpi--accent .aff-kpi-value { color: #fff; }
   .aff-kpi--accent .aff-kpi-value.tabular { color:#fff; }
   
   /* "1" logo watermark (Total Earnings + Referral Link blocks) */
   .aff-wm-one {
      position: absolute; right: 5px; top: 0;
      height: 110px; width: auto;
      opacity: 0.16; pointer-events: none; z-index: 0;
   }
   .aff-wm-one--reflink {
      right: 25px; top: 0; bottom: auto;
      height: 190px; opacity: 0.14;
   }
   
   /* Referral link (gradient) + program terms */
   .aff-row2 {
      display: grid;
      grid-template-columns: 1.7fr 1fr;
      gap: 20px;
      align-items: stretch;
   }
   .aff-reflink {
      position: relative; overflow: hidden;
      border-radius: var(--radius);
      padding: 30px;
      background: linear-gradient(90deg, #7277FF 0%, #53B9FF 100%);
      min-height:190px;
      color: #fff;
   }
   .aff-reflink::after {
      content: ""; position: absolute; right: -30px; top: -40px;
      width: 220px; height: 220px;
      background: radial-gradient(closest-side, rgba(255,255,255,0.16), transparent);
      pointer-events: none;
   }
   .aff-reflink-title {
      font-size: 16px; font-weight: 600; line-height:30px; margin: 0 0 15px;
      position: relative; z-index: 1;
   }
   .aff-reflink .control-label {
      color: #fff;
   }
   .aff-reflink-sub {
      font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.88);
      margin: 0 0 16px; position: relative; z-index: 1;
   }
   .aff-reflink-row {
      display: flex; position: relative; z-index: 1;
   }
   .aff-reflink-input {
      flex: 1; height: 48px; padding: 15px 10px 15px 30px;
      border: 0;
      background: #fff; color: var(--brand);
      font-size: 16px; font-weight: 700;
      border-radius: 12px 0 0 12px;
   }
   .aff-reflink-input:focus { outline: 2px solid rgba(255,255,255,0.6); }
   .aff-copy-btn {
      flex: 0 0 48px; width: 48px; height: 48px;
      display: inline-flex; align-items: center; justify-content: center;
      border: 0; border-radius: 0 12px 12px 0; cursor: pointer;
      background: var(--accent); color: #fff;
      transition: filter .15s;
   }
   .aff-copy-btn:hover { filter: brightness(1.05); }
   .aff-copy-ok { display: none; }
   .aff-copy-btn.is-copied .aff-copy-ic { display: none; }
   .aff-copy-btn.is-copied .aff-copy-ok { display: block; }
   
   .aff-terms {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 24px; align-items: center;
      background: var(--bg-1); border: 1px solid var(--line);
      border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
      padding: 24px 28px;
   }
   .aff-term-label { font-size: 13px; color: var(--ink-3); margin-bottom: 10px; }
   .aff-term-value {
      font-size: 26px; font-weight: 700; color: var(--ink-1);
      letter-spacing: -0.02em; line-height: 1.1;
   }
   
   /* Tables (referred users / payment history) */
   .aff-table { width: 100%; border-collapse: separate; border-spacing: 0; }
   .aff-table > thead > tr > th {
      background: var(--bg-3);
      color: var(--ink-1);
      font-size: 14px;
      font-weight: 400; 
      vertical-align: middle;
      padding:15px;
      text-align: left;
   }
   .aff-table > thead th:first-child { border-radius: 8px 0 0 8px; }
   .aff-table > thead th:last-child { border-radius: 0 8px 8px 0; }
   
   .aff-table tbody td {
      padding: 10px; font-size: 14px;
      border-bottom: 1px solid var(--line-2);
      vertical-align: middle;
   }
   .aff-table tbody tr:last-child td { border-bottom: 0; }
   .aff-user { display: flex; align-items: center; gap: 12px; }
   .aff-avatar {
      width: 38px; height: 38px; border-radius: 50%;
      object-fit: cover; flex: 0 0 38px;
   }
   .aff-avatar--letter {
      display: inline-flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, #6E6BF2, #54A8F2); color: #fff;
      font-weight: 700; font-size: 15px;
   }
   .aff-user-name { font-weight: 600; color: var(--ink-1); }
   .aff-date { color: var(--ink-3); white-space: nowrap; }
   .aff-date-sep { color: var(--ink-4); margin: 0 2px; }
   .aff-spent { font-weight: 700; color: var(--ink-1); }
   .aff-comm { font-weight: 700; color: var(--green); }
   
   @media (max-width: 1100px) {
      .aff-kpis { grid-template-columns: repeat(3, 1fr); }
   }
   @media (max-width: 760px) {
      .aff-kpis { grid-template-columns: repeat(2, 1fr); }
      .aff-row2 { grid-template-columns: 1fr; }
   }
   
   /* ─── Terms ─── */
   .terms-content-wrap { max-width: 880px; margin: 0 auto; width: 100%; }
   .terms-content { max-width: none; margin: 0; }
   
   /* ─── Account page ─── */
   
   .account-tabs { margin-bottom: 24px; }
   
   .account-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
   }
   .account-card-wide { grid-column: 1 / -1; }
   
   .account-card-head {
      display: flex; justify-content: space-between; align-items: flex-start;
      gap: 12px; margin-bottom: 16px;
   }
   .account-card-title {
      font-size: 15px; font-weight: 600; color: var(--ink-1);
      margin-bottom: 3px;
      display: flex; align-items: center; flex-wrap: wrap;
   }
   .account-icon {
      flex: 0 0 36px; width: 36px; height: 36px; border-radius: 9px;
      background: var(--bg-2); color: var(--ink-2);
      display: inline-flex; align-items: center; justify-content: center;
   }
   
   .account-page .form-control,
   .account-page .form-group > select,
   .account-page .form-group > input,
   .account-page .form-group > textarea,
   .account-page .account-card select,
   .account-page .account-card input[type="text"],
   .account-page .account-card input[type="email"],
   .account-page .account-card input[type="password"],
   .account-page .account-card input[type="number"],
   .account-page .account-card input[type="search"],
   .account-page .account-card input[type="tel"],
   .account-page .account-card input[type="url"],
   .account-page .account-card textarea {
      width: 100%;
      max-width: 100%;
      display: block;
      box-sizing: border-box;
      height: 42px;
      padding: 0 14px;
      border: 1px solid var(--line); border-radius: 8px; background: var(--bg-1);
      font-size: 14px; color: var(--ink-1);
      transition: border-color .15s, box-shadow .15s;
   }
   .account-page input.form-control[readonly],
   .account-page .form-group > input[readonly] {
      background: var(--bg-2); color: var(--ink-2); cursor: default;
   }
   .account-page textarea.form-control,
   .account-page .form-group > textarea,
   .account-page .account-card textarea {
      height: auto;
      padding: 12px 14px;
      line-height: 1.55;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 13px;
   }
   .account-page .form-group > select,
   .account-page .account-card select,
   .account-page select.form-control {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 36px;
   }
   
   .account-secondary-btn {
      display: inline-flex; align-items: center; gap: 6px;
      height: 38px; padding: 0 14px;
      background: var(--bg-2); border: 1px solid var(--line);
      border-radius: 8px; color: var(--ink-1);
      font-size: 13px; font-weight: 500;
   }
   .account-secondary-btn:hover { background: var(--bg-1); border-color: var(--line-2); }
   
   .api-key-row { display: flex; gap: 8px; }
   .api-key-row .form-control {
      flex: 1; font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 13px; background: var(--bg-2);
      line-height: 40px;
   }
   .api-copy-btn {
      display: inline-flex; align-items: center; gap: 6px;
      height: 42px; padding: 0 14px; white-space: nowrap;
      background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
      color: var(--ink-1); font-size: 13px; font-weight: 500;
   }
   .api-copy-btn:hover { background: var(--bg-1); }
   
   .account-card-2fa .auth-otp { font-size: 20px; height: 46px; }
   
   /* Modal — account change email */
   .modal-content {
      background: var(--bg-1);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: none;
   }
   .modal-header {
   padding: 18px 22px;
   border-bottom: 1px solid var(--line);
   display: flex;
   align-items: center;
   justify-content: flex-start;
   }
   /* Hide the × close icon — title takes its place on the left */
   .modal-header .close,
   .modal-header button.close { display: none !important; }
   .modal-title {
   font-size: 16px;
   font-weight: 600;
   color: var(--ink-1);
   margin: 0;
   order: -1;
   text-align: left;
   }
   /* Hide the bottom "Close" button — only the primary action remains */
   .modal-footer .btn-default,
   .modal-footer button[data-dismiss="modal"] { display: none !important; }
   .modal-footer {
   padding: 14px 22px;
   border-top: 1px solid var(--line);
   display: flex;
   gap: 8px;
   justify-content: flex-end;
   }
   .modal-footer .btn-default {
      background: var(--bg-2); border: 1px solid var(--line);
      color: var(--ink-1); border-radius: 8px; padding: 8px 16px;
      font-weight: 500;
   }
   .modal-footer .btn-default:hover { background: var(--bg-1); border-color: var(--line-2); }
   .modal-footer .btn-primary {
      border-radius: 8px; padding: 8px 16px; font-weight: 500;
   }
   
   .modal-header .close,
   .modal-header button.close {
      appearance: none;
      -webkit-appearance: none;
      background: transparent;
      border: 0;
      padding: 0;
      margin: 0;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      line-height: 1;
      color: var(--ink-3);
      opacity: 1;
      cursor: pointer;
      text-shadow: none;
      box-shadow: none;
      transition: background-color .15s, color .15s;
   }
   .modal-header .close:hover,
   .modal-header button.close:hover {
      background: var(--bg-2);
      color: var(--ink-1);
   }
   .modal-header .close > span { line-height: 1; }
   .modal-body {
      padding: 24px;
   }
   .modal-body .form-group:last-child { margin-bottom: 4px; }
   .modal-body .form-control,
   .modal-body input[type="text"],
   .modal-body input[type="email"],
   .modal-body input[type="password"],
   .modal-body input[type="number"],
   .modal-body input[type="search"],
   .modal-body input[type="tel"],
   .modal-body input[type="url"],
   .modal-body select,
   .modal-body textarea {
      width: 100%;
      max-width: 100%;
      display: block;
      box-sizing: border-box;
      height: 42px;
      line-height: 40px;
      padding: 0 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--bg-1);
      font-size: 14px;
      color: var(--ink-1);
      box-shadow: none;
      transition: border-color .15s, box-shadow .15s;
   }
   .modal-body textarea {
      height: auto;
      min-height: 96px;
      padding: 12px 14px;
      line-height: 1.55;
   }
   .modal-body .form-control:focus,
   .modal-body input:focus,
   .modal-body select:focus,
   .modal-body textarea:focus {
      border-color: var(--brand);
      outline: 0;
      box-shadow: none;
   }
   
   /* Last wide card in the grid (API key) flows next to Timezone instead of taking a full row */
   .account-grid > .account-card-wide:last-of-type,
   .account-grid > .account-card.account-card-wide:last-child {
      grid-column: auto;
   }
   
   /* Tight gap between the account grid and the Change-email section below */
   .account-page .account-grid { margin-bottom: 12px; }
   .account-page .modal,
   .account-page .modal-content { margin-bottom: 28px; }
   .account-page { padding-bottom: 16px;  }
   
   @media (max-width: 900px) {
      .account-grid { grid-template-columns: 1fr; }
      .account-card-wide,
      .account-grid > .account-card-wide:last-of-type,
      .account-grid > .account-card.account-card-wide:last-child { grid-column: auto; }
   }
   
   /* ─── Blog list ─── */
   
   .blog-page {
      /* padding-top: 28px; */
      width: 100%;
   }
   
   /* Controls: tabs + search */
   .blog-controls {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
      margin-bottom: 40px;
   }
   
   /* Category tabs */
   .blog-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
   }
   .blog-tab {
      padding: 15px 22px;
      border-radius: 8px;
      border: 1.5px solid var(--line);
      background: var(--bg-1);
      color: var(--ink-1);
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: background .15s, border-color .15s, color .15s;
      -webkit-appearance: none;
   }
   .blog-tab:hover:not(.blog-tab--active) {
      border-color: var(--ink-2);
      background: var(--bg-2);
   }
   .blog-tab--active {
      background: #3b82f6;
      border-color: #3b82f6;
      color: #fff;
   }
   
   /* Search */
   .blog-search {
      display: flex;
      align-items: center;
      width: 100%;
      max-width: 560px;
      margin-bottom: 30px;
      background: var(--bg-1);
      border: 1.5px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
      padding: 0 0 0 16px;
   }
   .blog-search__icon {
      flex-shrink: 0;
      color: var(--ink-3);
   }
   .blog-search__input {
      flex: 1;
      border: 0;
      background: transparent;
      padding: 13px 12px;
      font-size: 14px;
      color: var(--ink-1);
      outline: none;
   }
   .blog-search__input::placeholder { color: var(--ink-3); }
   .blog-search__btn {
      flex-shrink: 0;
      width: 48px;
      height: 48px;
      background: var(--bg-2);
      border: 0;
      border-left: 1.5px solid var(--line);
      color: var(--ink-2);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s, color .15s;
      -webkit-appearance: none;
   }
   .blog-search__btn:hover { background: var(--bg-3); color: var(--ink-1); }
   
   /* Grid */
   .blog-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-bottom: 40px;
   }
   
   /* Card */
   .blog-card {
      background: transparent;
      border-bottom: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      padding-bottom: 28px;
   }
   .blog-card-media {
      display: block;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: var(--bg-2);
      border-radius: 12px;
   }
   .blog-card-media img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform .4s ease;
      border-radius: 12px;
   }
   .blog-card:hover .blog-card-media img { transform: scale(1.04); }
   
   .blog-card-body {
      padding: 16px 0 0;
      flex: 1;
      display: flex;
      flex-direction: column;
   }
   .blog-card-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
   }
   .blog-card-tags {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
   }
   .blog-card-tag {
      font-size: 10px;
      font-weight: 500;
      color: var(--ink-2);
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 3px 5px;
      white-space: nowrap;
   }
   .blog-card-info {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
   }
   .blog-card-info__item {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      color: var(--ink-3);
      white-space: nowrap;
   }
   .blog-card-title {
      font-size: 16px;
      font-weight: 600;
      line-height: 1.4;
      color: var(--ink-1);
      margin: 0 0 10px;
      letter-spacing: -0.01em;
   }
   .blog-card-title a { color: inherit; text-decoration: none; }
   .blog-card-title a:hover { color: var(--brand); }
   .blog-card-excerpt {
      font-size: 14px;
      color: var(--ink-2);
      line-height: 1.6;
      margin: 0 0 16px;
      max-height: calc(1.6em * 3);
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      flex: 1;
   }
   .blog-card-excerpt p { margin: 0; }
   .blog-card-excerpt img,
   .blog-card-excerpt h1, .blog-card-excerpt h2,
   .blog-card-excerpt h3, .blog-card-excerpt h4 { display: none; }
   .blog-card-cta {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      align-self: flex-end;
      color: var(--accent);
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      transition: gap .15s, color .15s;
   }
   .blog-card-cta:hover { gap: 8px; color: #e8574b; }
   
   /* Responsive */
   @media (max-width: 1100px) {
      .blog-grid { grid-template-columns: repeat(3, 1fr); }
   }
   @media (max-width: 760px) {
      .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
      .blog-controls { gap: 14px; }
   }
   @media (max-width: 480px) {
      .blog-grid { grid-template-columns: 1fr; }
      .blog-tab { padding: 8px 16px; font-size: 13px; }
   }
   
   /* ─── Blog post — shared column width (must match .blogpost-article) ─── */
   
   .blogpost-page .back-link {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      max-width: 1120px;
      font-size: 12px; font-weight: 500;
      color: var(--ink-3); text-decoration: none;
      margin: 0 auto 10px;
      padding: 0;
      box-sizing: border-box;
   }
   
   .blogpost-page .page-header {
      width: 100%;
      max-width: 1120px;
      margin-left: auto;
      margin-right: auto;
      padding: 0;
      box-sizing: border-box;
   }
   
   .blogpost-content > h1:first-child { display: none; }
   
   .blogpost-article {
      width: 100%;
      max-width: 1120px;
      margin: 0 auto;
      box-sizing: border-box;
      overflow: hidden;
      border-radius: var(--radius-lg);
      border: 1px solid var(--line);
      background: var(--bg-1);
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
   }
   
   /* Full image visible — no crop (natural aspect ratio) */
     .blogpost-hero {
      width: 100%;
      min-height: clamp(320px, 46vw, 520px);
      background: var(--bg-2);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px 0;
      box-sizing: border-box;
   }
   .blogpost-hero img {
      width: 100%;
      height: auto;
      display: block;
   }
   
   .blogpost-body { padding: 40px clamp(24px, 5vw, 56px); }
   .blogpost-title {
      font-size: clamp(28px, 3.5vw, 38px);
      font-weight: 700;
      line-height: 1.18;
      letter-spacing: -0.03em;
      color: var(--ink-1);
      margin: 0 0 20px;
   }
   .blogpost-content {
      font-size: 16px;
      line-height: 1.75;
      color: var(--ink-2);
   }
   .blogpost-content img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 24px 0; }
   
   .blogpost-foot {
      width: 100%;
      max-width: 1120px;
      margin: 28px auto 0;
      padding: 0;
      box-sizing: border-box;
   }
   
   @media (max-width: 700px) {
      .blogpost-body { padding: 28px 20px; }
      .blogpost-title { font-size: 26px; }
      .blogpost-hero {
          min-height: clamp(260px, 56vw, 400px);
          padding: 18px 0;
      }
   }
   
   /* ─── Child panels ─── */
   
   .panel-action-alert {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 16px;
      border: 1px solid rgba(239,68,68,0.25);
      background: rgba(239,68,68,0.06);
      color: #b91c1c;
      border-radius: 8px;
      margin-bottom: 16px;
   }
   .panel-action-text { flex: 1; font-size: 13.5px; line-height: 1.5; }
   .panel-action-btn {
      flex: 0 0 auto;
      background: #fff; border: 1px solid rgba(239,68,68,0.35);
      color: #b91c1c; padding: 7px 14px; border-radius: 8px;
      font-size: 13px; font-weight: 600;
      text-decoration: none;
      display: inline-flex; align-items: center; gap: 6px;
   }
   .panel-action-btn:hover { background: rgba(239,68,68,0.06); }
   
   .panel-domain {
      display: inline-flex; align-items: center; gap: 8px;
      text-decoration: none; font-weight: 500;
   }
   .panel-domain:hover { color: var(--brand); }
   
   .empty-state-card { text-align: center; }
   .empty-state-card .card-body { padding: 56px 24px; }
   .empty-state-icon {
      width: 56px; height: 56px; border-radius: 8px;
      background: var(--bg-2); color: var(--ink-3);
      display: inline-flex; align-items: center; justify-content: center;
      margin-bottom: 14px;
   }
   .empty-state-title {
      font-size: 16px; font-weight: 600; color: var(--ink-1);
      margin-bottom: 6px;
   }
   
   /* ─── Custom CMS pages ─── */
   .cmspage-article {
      max-width: 880px; margin: 0 auto;
   }
   /* ─── Child panel order (layout + fields match New Order) ─── */
   
   .childpanel-order-page {
      padding: 8px 0 32px;
      width: 100%;
      max-width: none;
      box-sizing: border-box;
   }
   
   /* Intro + grid: same left edge as .page-header (no margin:auto centering) */
   .childpanel-intro {
      max-width: 1200px;
      width: 100%;
      margin: 0 0 20px;
      box-sizing: border-box;
   }
   .childpanel-grid {
      display: grid;
      grid-template-columns: 1fr 360px;
      gap: 20px;
      align-items: start;
      width: 100%;
      max-width: 1200px;
      margin: 0;
      box-sizing: border-box;
   }
   .childpanel-grid > * { min-width: 0; }
   
   .childpanel-form { min-width: 0; }
   .childpanel-form .card { margin-bottom: 0; overflow: visible; }
   .childpanel-form .form-group:last-child { margin-bottom: 0; }
   .childpanel-form textarea.form-control {
      height: auto;
      min-height: 80px;
   }
   .childpanel-form .input-group {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
   }
   .childpanel-form .form-control[readonly] { background: var(--bg-2); color: var(--ink-2); }
   
   /* Same as New Order — PP/Bootstrap input-lg */
   .childpanel-form .form-control.input-lg,
   .childpanel-form input.form-control.input-lg,
   .childpanel-form select.form-control.input-lg {
      height: 42px !important;
      min-height: 42px !important;
      padding: 0 14px !important;
      font-size: 14px !important;
      line-height: 1.2 !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
   }
   .childpanel-form textarea.form-control.input-lg {
      height: auto !important;
      min-height: 80px !important;
      padding: 10px 14px !important;
   }
   .childpanel-form select.form-control.input-lg { padding-right: 42px !important; }
   
   .childpanel-form .form-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 12px;
   }
   .childpanel-form button[type="submit"],
   .childpanel-form input[type="submit"],
   .childpanel-form .btn-primary,
   .childpanel-form .btn.btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 100%;
      height: 42px;
      min-height: 42px;
      padding: 0 16px;
      margin-top: 8px;
      box-sizing: border-box;
      text-align: center;
      line-height: 1;
   }
   .childpanel-form button[type="submit"] i,
   .childpanel-form button[type="submit"] svg,
   .childpanel-form .btn-primary i,
   .childpanel-form .btn-primary svg,
   .childpanel-form .btn.btn-primary i,
   .childpanel-form .btn.btn-primary svg {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
   }
   .childpanel-form button[type="submit"] > .glyphicon,
   .childpanel-form .btn-primary > .glyphicon,
   .childpanel-form .btn.btn-primary > .glyphicon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      top: 0;
      line-height: 1;
   }
   .childpanel-form button[type="submit"] > .fa,
   .childpanel-form .btn-primary > .fa,
   .childpanel-form .btn.btn-primary > .fa {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
   }
   .childpanel-form button[type="submit"]:has(> img:only-child) {
      height: auto;
      min-height: 0;
      padding: 0;
      line-height: 0;
   }
   .childpanel-form button[type="submit"]:has(> img:only-child) > img {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
      object-fit: contain;
   }
   .childpanel-form .card-section-head {
      display: flex; justify-content: space-between; align-items: baseline;
      margin-bottom: 16px;
   }
   
   .childpanel-section-divider {
      display: flex; align-items: center; gap: 12px;
      margin: 8px 0 14px;
      font-size: 12px; font-weight: 600; color: var(--ink-3);
   }
   .childpanel-section-divider::before,
   .childpanel-section-divider::after {
      content: ""; flex: 1; height: 1px; background: var(--line-2);
   }
   
   .childpanel-ns-alert {
      background: rgba(240,101,67,0.05); border: 1px solid rgba(240,101,67,0.15);
      color: var(--ink-1); border-radius: 8px;
      padding: 12px 14px; margin-bottom: 14px;
   }
   .childpanel-ns-head {
      display: flex; align-items: flex-start; gap: 8px;
      font-size: 12px; line-height: 1.45; color: var(--ink-2);
      margin-bottom: 8px;
   }
   .childpanel-ns-head svg { color: var(--brand); flex: 0 0 auto; margin-top: 1px; }
   .childpanel-ns-list {
      list-style: none; padding: 0; margin: 0;
      display: flex; flex-direction: column; gap: 6px;
   }
   .childpanel-ns-list li {
      display: flex; align-items: center; justify-content: space-between;
      background: var(--ctrl-bg, #fff); border: 1px solid var(--line); border-radius: 6px;
      padding: 6px 6px 6px 12px;
   }
   .childpanel-ns-list code {
      background: transparent; border: 0; padding: 0;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 12px; color: var(--ink-1);
   }
   .ns-copy-btn {
      background: var(--bg-2); border: 1px solid var(--line);
      border-radius: 5px; padding: 3px 10px;
      font-size: 11px; font-weight: 600; color: var(--ink-2);
      cursor: pointer; transition: background .15s;
   }
   .ns-copy-btn:hover { background: var(--bg-1); color: var(--ink-1); }
   
   .childpanel-aside {
      background: var(--bg-2);
      border: 1px solid var(--line);
      position: sticky;
      top: 84px;
      align-self: flex-start;
   }
   .childpanel-features {
      list-style: none; padding: 0; margin: 0 0 14px;
      display: flex; flex-direction: column; gap: 9px;
      font-size: 13px; color: var(--ink-2);
   }
   .childpanel-features li {
      display: flex; align-items: flex-start; gap: 8px; line-height: 1.45;
   }
   .childpanel-features svg { color: var(--brand); flex: 0 0 auto; margin-top: 2px; }
   .childpanel-aside-foot {
      border-top: 1px solid var(--line); padding-top: 12px;
   }
   
   
   
   /* ─── Child Panel / Reseller order page ("Child Panel / Reseller") ─── */
   .cp-layout {
      display: grid; grid-template-columns: 1fr 360px; gap: 10px; align-items: start;
   }
   .cp-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
   .cp-side { position: sticky; top: 84px; }
   
   .cp-field { margin-bottom: 12px; }
   .cp-label { display: block; font-size: 12px; color: var(--shell-icon); margin-bottom: 2px; }
   .cp-input {
      width: 100%; box-sizing: border-box; height: 48px; padding: 0 16px;
      border: 1px solid var(--line); border-radius: 8px; background: var(--bg-1);
      font-size: 14px; color: var(--ink-1); transition: border-color .15s;
   }
   .cp-input::placeholder { color: var(--ink-3); }
   .cp-input:focus { outline: 0; border-color: var(--brand); }
   .cp-input[readonly] { background: #fff; color: var(--ink-1); }
   
   .cp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
   
   /* Gradient name-server block */
   .cp-ns {
      position: relative; overflow: hidden;
      margin-top: 20px; border-radius: var(--radius); padding: 30px 20px;
      min-height:175px;
      background: linear-gradient(90deg, #7277FF 0%, #53B9FF 100%);
      color: #fff;
   }
   .cp-ns-title { position: relative; z-index: 1; font-size: 14px; font-weight: 700; margin-bottom: 20px; padding-left:12px; }
   .cp-ns-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
   .cp-ns-label { font-size: 14px; font-weight: 700; margin-bottom: 6px; padding-left:12px; }
   .cp-ns-row { display: flex; }
   .cp-ns-input {
      flex: 1; min-width: 0; height: 48px; padding: 0 15px;
      border: 0; border-radius: 12px 0 0 12px; background: #fff; color: var(--ink-1);
      font-size: 14px; font-weight: 700;
   }
   .cp-ns-copy {
      flex: 0 0 48px; width: 48px; height: 48px; border: 0; border-radius: 0 12px 12px 0; cursor: pointer;
      background: var(--accent); color: #fff;
      display: inline-flex; align-items: center; justify-content: center;
   }
   .cp-ns-copy:hover { filter: brightness(1.05); }
   .cp-ns-copy-ok { display: none; }
   .cp-ns-copy.is-copied .cp-ns-copy-ic { display: none; }
   .cp-ns-copy.is-copied .cp-ns-copy-ok { display: block; }
   
   /* Password field with eye toggle */
   .cp-pass-wrap { position: relative; }
   .cp-pass-wrap .cp-input { padding-right: 46px; }
   .cp-pass-toggle {
      position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
      width: 34px; height: 34px; border: 0; background: transparent; cursor: pointer;
      color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center;
   }
   .cp-pass-toggle:hover { color: var(--ink-1); }
   .cp-pass-toggle .cp-eye-off { display: none; }
   .cp-pass-toggle.is-on .cp-eye { display: none; }
   .cp-pass-toggle.is-on .cp-eye-off { display: block; }
   
   /* Price + checkout */
   .cp-checkout { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
   .cp-price { display: flex; align-items: baseline; gap: 8px; }
   .cp-price-amt { font-family: 'Inter',sans-serif; font-size: 24px; font-weight: 400; color: var(--green); }
   .cp-price-per { font-size: 14px; color: var(--ink-3); }
   .cp-currency { margin-left: auto; min-width: 260px; }
   .cp-submit { width: 100%; height: 54px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 700; }
   
   /* What's included */
   .cp-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
   .cp-features li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
   .cp-check { color: var(--brand); flex: 0 0 auto; margin-top: 1px; }
   .cp-side-foot { margin-top: 18px; padding: 20px 0; border-top: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--ink-2); }
   
   
   @media (max-width: 1440px) {
      .cp-ns-grid {
         grid-template-columns: 1fr;
      }
   }
   @media (max-width: 1280px) {
      .cp-ns-input { width:150px; }
      .ord-filters, .pay-filters { gap: 8px; }
      .ord-filter, .pay-filter { height: 34px; padding: 0 14px; font-size: 13px; }
   }
   @media (max-width: 1024px) {
      .childpanel-grid { grid-template-columns: 1fr; }
      .childpanel-aside { position: static; }
      .childpanel-form .form-row { grid-template-columns: 1fr; }
      .cp-layout { grid-template-columns: 1fr; }
      .cp-side { position: static; }
   }
   
   @media (max-width: 768px) {
      .childpanel-form button[type="submit"],
      .childpanel-form input[type="submit"],
      .childpanel-form .btn-primary,
      .childpanel-form .btn.btn-primary {
          margin-top: 20px;
      }
   }
   
   @media (max-width: 560px) {
      .cp-row2, .cp-ns-grid { grid-template-columns: 1fr; }
      .cp-currency { margin-left: 0; min-width: 0; width: 100%; }
   }
   
   /* ─── Giveaway & Rewards page ─── */
   .gv-banner {
      position: relative; overflow: hidden;
      display: flex; align-items: center; gap: 18px;
      border-radius: 8px; padding: 30px 20px; color: #fff;
      background: linear-gradient(90deg, #7277FF 0%, #53B9FF 100%);
      box-shadow: 0px 0px 20px 0px #3344661A;
   }
   .gv-banner-ic { position: relative; z-index: 1; flex: 0 0 auto; opacity: 0.95; }
   .gv-banner-ic img { display: block; }
   .gv-banner-text { position: relative; z-index: 1; margin: 0; font-size: 14px; font-weight: 400; line-height: 1.6; color: rgba(255,255,255,0.95); }
   @media (min-width: 992px) {
      .gv-banner-text .gv-banner-line2 { display: block; }
   }
   
   .gv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding:20px 10px; }
   .gv-card {
      display: flex; flex-direction: column;
      background: var(--bg-1); 
      box-shadow: var(--shadow-1);
      border: 1px solid var(--line-4);
      border-radius: var(--radius);
      overflow: hidden;
      transition: box-shadow .15s, transform .15s;
   }
   .gv-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
   .gv-card-body { flex: 1; padding: 26px 20px 22px; text-align: center; }
   .gv-logo { height: 44px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; }
   .gv-logo img { max-height: 40px; max-width: 160px; width: auto; height: auto; object-fit: contain; }
   .gv-task { color: var(--ink-2); }
   .gv-earn-label { color: var(--line-3); margin-bottom: 4px; }
   .gv-reward { font-family: 'Poppins','Inter',sans-serif; font-size: 24px; line-height:40px; font-weight: 600; color: var(--green);}
   .gv-learn {
      display: flex; align-items: center; justify-content: center; 
      gap: 15px;
      padding: 13px 54px; border: 1px solid var(--line-2);
      font-size: 16px; font-weight: 700; 
      color: var(--ink-1); text-decoration: none;
      background: var(--bg-1); 
      box-shadow: var(--shadow-1);
      border: 1px solid #8888881A;
      box-shadow: 0px 8px 10px 0px #0000001A;
   }
   .gv-learn:hover { color: var(--accent); }
   .gv-learn svg { color: var(--accent); }
   
   /* How to participate */
   .gv-how-head { text-align: center; margin-bottom: 28px; }
   .gv-how-sub { margin: 6px 0 0; color: var(--ink-3); font-size: 14px; }
   .gv-steps { display: flex; align-items: flex-start; justify-content: center; gap: 8px; }
   .gv-step { flex: 1; max-width: 280px; text-align: center; }
   .gv-step-ic {
      width: 56px; height: 56px; margin: 0 auto 10px;
      display: inline-flex; align-items: center; justify-content: center;
   }
   .gv-step-ic img { width: 50px; height: 50px; display: block; }
   .gv-step-num { font-family: 'Poppins','Inter',sans-serif; font-size: 30px; font-weight: 800; color: var(--ink-4); line-height: 1; margin-bottom: 6px; }
   .gv-step-title { font-size: 16px; font-weight: 700; color: var(--ink-1); margin-bottom: 4px; }
   .gv-step-desc { font-size: 13px; color: var(--ink-3); }
   .gv-step-arrow { flex: 0 0 auto; color: var(--accent); padding-top: 60px; }
   
   /* General rules */
   .gv-rules { border: 1px solid var(--line); border-radius: 8px; padding: 26px 28px; }
   .gv-rules-list { margin: 0; padding: 0 0 0 40px; list-style: none; display: flex; flex-direction: column; gap: 10px; }
   .gv-rules-list li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
   .gv-rules-list li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
   
   @media (max-width: 1280px) { .gv-grid { grid-template-columns: repeat(3, 1fr); } .gv-rules-list {padding:0 0 0 20px} }
   @media (max-width: 1024px) { .gv-grid { grid-template-columns: repeat(2, 1fr); } .gv-rules-list {padding:0 0 0 10px} }
   @media (max-width: 860px) {
      .gv-steps { flex-direction: column; align-items: center; gap: 24px; }
      .gv-step-arrow { transform: rotate(90deg); padding: 0; }
   }
   @media (max-width: 520px) { .gv-grid { grid-template-columns: 1fr; } .gv-rules-list {padding:0} }
   
   /* Giveaway "Learn More" detail popup */
   .gv-modal {
      position: fixed; inset: 0; z-index: 1300;
      display: flex; align-items: flex-start; justify-content: center;
      padding: 40px 16px; overflow-y: auto;
      background: rgba(20, 22, 34, 0.45);
   }
   .gv-modal[hidden] { display: none; }
   .gv-modal-dialog {
      position: relative; width: 100%; max-width: 860px;
      background: linear-gradient(180deg, #fafbff 0%, #ffffff 22%);
      border-radius: 18px; box-shadow: var(--shadow-3);
      padding: 32px 40px 36px;
   }
   .gv-modal-close {
      position: absolute; top: 22px; right: 24px;
      width: 30px; height: 30px; border: 0; background: transparent;
      color: var(--ink-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
   }
   .gv-modal-close:hover { color: var(--ink-1); }
   .gv-modal-logo { margin-bottom: 16px; }
   .gv-modal-logo img { height: 34px; width: auto; max-width: 170px; }
   .gv-modal-title { font-family: 'Poppins','Inter',sans-serif; font-size: 24px; font-weight: 800; color: var(--ink-1); margin: 0 0 18px; letter-spacing: -0.01em; }
   .gv-modal-rule { border: 0; border-top: 1px solid var(--line-2); margin: 0 0 20px; }
   .gv-modal-h { font-size: 16px; font-weight: 700; color: var(--ink-1); margin: 24px 0 12px; display: flex; align-items: center; gap: 8px; }
   .gv-modal-sec ul { margin: 0; padding-left: 22px; list-style: disc; }
   .gv-modal-sec li { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin-bottom: 8px; }
   .gv-modal-sec li::marker { color: var(--ink-4); }
   .gv-modal-sec a { color: var(--brand); text-decoration: none; word-break: break-all; }
   .gv-modal-sec a:hover { text-decoration: underline; }
   .gv-modal-sub { margin: 10px 0 6px; display: flex; flex-direction: column; gap: 8px; }
   .gv-modal-sub div { color: var(--ink-1); font-weight: 600; }
   .gv-modal-foot { margin-top: 26px; }
   .gv-modal-note { margin: 0 0 6px; color: var(--ink-1); font-size: 14px; }
   .gv-modal-foot p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
   .gv-modal-foot a { color: var(--ink-1); text-decoration: underline; }
   .gv-modal-submit { width: 100%; height: 54px; margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 700; }
   @media (max-width: 640px) { .gv-modal-dialog { padding: 26px 20px 28px; } }
   
   /* ─── Levels & Rewards page ─── */
   .lv-hero {
      display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
   }
   .lv-hero-user { display: flex; align-items: center; gap: 16px; min-width: 480px; }
   .lv-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 96px; }
   .lv-avatar--initials {
      display: inline-flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, var(--brand), var(--brand-3));
      color: #fff; font-weight: 700; font-size: 22px; letter-spacing: .3px;
      border: 1px solid var(--glass-border);
      box-shadow: 0 0 20px rgba(51,68,102,.30);
   }
   .lv-hero-name { font-size: 14px; font-weight: 600; line-height:1.2; color: var(--ink-1); margin:0 0 8px; }
   .lv-hero-meta { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--ink-2); }
   .lv-hero-badge { width: 36px; height: 36px; flex: 0 0 auto; }
   .lv-hero-level { color: var(--accent); font-size:16px; font-weight: 700; }
   .lv-stars { color: #F5B301; letter-spacing: 1px; }
   .lv-stars .lv-star-off { color: var(--ink-4); }
   .lv-hero-spent { margin-left: 42px; }
   .lv-hero-spent b { color: var(--green); }
   .lv-progress-wrap { flex: 1; min-width: 260px; }
   .lv-progress-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
   .lv-progress-next { font-size: 20px; font-weight: 700; color: var(--ink-1); }
   .lv-progress-next b { color: var(--accent); }
   .lv-progress-pct { font-size: 15px; font-weight: 700; color: var(--brand); }
   .lv-progress-sub { margin-bottom: 8px; }
   .lv-progress-sub .lv-reach { color: var(--green); font-weight: 600; }
   .lv-bar { height: 5px; border-radius: 5px; background: var(--bg-3); overflow: hidden; }
   .lv-bar-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #FF6255 0%, #FF8D64 100%); }
   
   .lv-how-head { text-align: center; margin-bottom: 15px; }
   .lv-how-head .card-head {margin-bottom:0}
   .lv-how-sub { margin: 0;}
   .lv-steps { display: flex; align-items: flex-start; justify-content: center; gap: 20px; margin:20px 0; }
   .lv-step { flex: 1; max-width: 300px; text-align: center; }
   .lv-step-ic { width: 56px; height: 56px; margin: 0 auto 12px; display: inline-flex; align-items: center; justify-content: center; }
   .lv-step-ic img { width: 48px; height: 48px; display: block; }
   .lv-step-num { font-family: 'Poppins','Inter',sans-serif; font-size: 30px; font-weight: 800; color: var(--ink-4); line-height: 1; margin-bottom: 6px; }
   .lv-step-title { font-size: 16px; font-weight: 700; color: var(--ink-1); margin-bottom: 4px; }
   .lv-step-desc { font-size: 13px; color: var(--ink-3); }
   .lv-step-arrow { flex: 0 0 auto; color: var(--accent); padding-top: 64px; }
   
   /* Levels table */
   .lv-desc-sub { color: var(--ink-2); font-size: 14px; margin: 0 0 18px; }
   .lv-table { width: 100%; border-collapse: separate; border-spacing: 0; }
   .lv-table td { padding: 10px 5px; border-bottom: 1px solid var(--line-2); font-size: 14px; vertical-align: top; }
   .lv-table tr:last-child td { border-bottom: 0; }
   .lv-table-ic { width: 34px; }
   .lv-table-ic img { width: 36px; height: 36px; display: block; }
   .lv-lvl-name { font-weight: 700; color: var(--ink-1); white-space: nowrap; }
   .lv-lvl-name b { color: var(--accent); }
   .lv-lvl-req { color: var(--ink-2); }
   .lv-discount-cell { text-align: right; white-space: nowrap; }
   .lv-discount-pill { display: inline-block; padding: 5px 10px; border-radius: var(--radius); background: var(--shadow-1); font-size:16px; font-weight: 700; color: var(--ink-1); }
   .lv-discount-pill.is-top { background: var(--accent-soft); color: var(--accent); }
   .lv-discount-word { color: var(--ink-2); margin-left: 8px; }
   .lv-discount-word.is-top { color: var(--accent); font-weight: 700; }
   
   /* Level cards row */
   .lv-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
   .lv-lc { 
      background: var(--bg-1);
      box-shadow: var(--shadow-1);
      border: 1px solid var(--line-4);
      border-radius: var(--radius);
      overflow: hidden;
      transition: box-shadow var(--dur-normal) var(--ease-out-expo),
                  transform var(--dur-normal) var(--ease-out-expo),
                  border-color var(--dur-fast) ease;
      text-align: center;
      padding:20px;
   }
   .lv-lc-ic { margin-bottom: 10px; line-height: 0; }
   .lv-lc-ic img { width: 32px; height: 32px; display: inline-block; }
   .lv-lc-name { font-size: 15px; font-weight: 700; color: var(--ink-1); margin-bottom: 6px; }
   .lv-lc-name b { color: var(--accent); }
   .lv-lc-entry { font-size: 13px; color: var(--ink-3); margin-bottom: 14px; }
   .lv-lc-benefit { font-size: 14px; font-weight: 700; color: var(--ink-1); }
   .lv-lc.is-current {
      background: linear-gradient(90deg, #7277FF 0%, #53B9FF 100%);
      box-shadow: 0px 8px 10px 0px #6398FF4D;
      border-color: transparent;
      width:320px;
   }
   .lv-lc.is-current .lv-lc-name,
   .lv-lc.is-current .lv-lc-name b,
   .lv-lc.is-current .lv-lc-entry,
   .lv-lc.is-current .lv-lc-benefit { color: #fff; }
   /* current card: render the level badge in white */
   .lv-lc.is-current .lv-lc-ic img { filter: brightness(0) invert(1); }
   
   @media (max-width: 1280px) { .lv-lc.is-current { width: auto;} }
   @media (max-width: 980px) { .lv-cards { grid-template-columns: repeat(3, 1fr); } }
   @media (max-width: 860px) {
      .lv-steps { flex-direction: column; align-items: center; gap: 24px; }
      .lv-step-arrow { transform: rotate(90deg); padding: 0; }
   }
   @media (max-width: 560px) { .lv-cards { grid-template-columns: repeat(2, 1fr); } }
   
   /* ─── Notifications slide-in panel ─── */
   .notif-dot {
      position: absolute; top: 7px; right: 7px; width: 7px; height: 7px;
      background: var(--accent); border-radius: 50%; border: 2px solid var(--bg-1);
   }
   .notif-overlay {
      position: fixed; inset: 0; z-index: 1200;
      background: rgba(20, 22, 34, 0.35);
      opacity: 0; transition: opacity .26s ease;
   }
   .notif-overlay.is-open { opacity: 1; }
   .notif-drawer {
      position: fixed; top: 0; right: 0; bottom: 0; z-index: 1201;
      width: 440px; max-width: 92vw;
      background: var(--bg-1);
      border-radius: 18px 0 0 18px;
      box-shadow: -16px 0 48px rgba(20,22,34,0.18);
      transform: translateX(100%); transition: transform .26s var(--ease-out-expo, ease);
      display: flex; flex-direction: column;
      padding: 30px 32px;
      overflow-y: auto;
   }
   .notif-drawer.is-open { transform: translateX(0); }
   .notif-close {
      position: absolute; top: 22px; right: 24px;
      width: 28px; height: 28px; border: 0; background: transparent;
      color: var(--ink-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
   }
   .notif-close:hover { color: var(--ink-1); }
   .notif-list { display: flex; flex-direction: column; }
   .notif-item { padding: 24px 0; border-bottom: 1px solid var(--line-2); }
   .notif-item:first-child { padding-top: 8px; }
   .notif-item:last-child { border-bottom: 0; }
   .notif-item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
   .notif-title { font-family: 'Poppins','Inter',sans-serif; font-size: 19px; font-weight: 700; color: var(--ink-1); margin: 0; }
   .notif-badge {
      display: inline-flex; align-items: center; height: 22px; padding: 0 10px;
      background: var(--accent); color: #fff; border-radius: 6px;
      font-size: 12px; font-weight: 600;
   }
   .notif-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); margin-bottom: 12px; }
   .notif-meta svg { color: var(--ink-4); }
   .notif-date-label { font-size: 15px; font-weight: 700; color: var(--ink-1); margin-bottom: 12px; }
   .notif-text { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin: 0; }
   .notif-readmore { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
   .notif-readmore:hover { filter: brightness(0.95); }
   
   /* ─── Support & Contact Us page ─── */
   .tickets-page .subpage-card > .box-head { padding: 20px 11px 14px; }
   .tickets-page .box-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink-1); }
   .tickets-page .box-title b { font-weight: 800; }
   .tk-actions {
      display: grid;
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
      gap: 10px;
      padding: 0 11px 20px;
   }
   .tk-btn {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; min-width: 0; box-sizing: border-box;
      height: 50px; border-radius: 8px; border: 0; cursor: pointer;
      font-size: 15px; font-weight: 600; text-decoration: none; color: #fff;
      white-space: nowrap;
   }
   .tk-btn svg { flex-shrink: 0; }
   .tk-btn--new { background: linear-gradient(90deg, #FF6255 0%, #FF8D64 100%); box-shadow: 0px 8px 10px 0px #0000001A;}
   .tk-btn--new.is-disabled { background: var(--bg-3); color: var(--ink-3); pointer-events: none; }
   .tk-btn--telegram { background: #2AA2E0; }
   .tk-btn--whatsapp { background: #25B95E; }
   .tk-btn:hover { filter: brightness(1.04); color: #fff; }
   
   /* New ticket form */
   .tk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
   .tk-field { margin-bottom: 18px; }
   .tk-label { display: block; font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
   .tk-optional { color: var(--brand); }
   .tk-textarea { height: auto; min-height: 150px; }
   .tk-dropzone {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
      padding: 26px; border: 1.5px dashed var(--line); border-radius: 12px;
      background: var(--bg-3); color: var(--ink-3); font-size: 13.5px; text-align: center; cursor: pointer;
   }
   .tk-dropzone:hover { border-color: var(--brand); color: var(--ink-2); }
   .tk-submit { width: 100%; height: 54px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 700; }
   
   /* Your tickets */
   .tk-list-head { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 24px 26px 8px; }
   .tk-search { width: 100%; max-width: 560px; display: flex; }
   .tk-search-input {position:relative; width:100%;}
   .tk-search-ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
   .tk-search input { width: 100%; box-sizing: border-box; height: 46px; padding: 0 50px 0 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-1); font-size: 14px; color: var(--ink-1); }
   .tk-search input:focus { outline: 0; border-color: var(--brand); }
   .tickets-page form button[type="submit"].tk-search-go { gap: 0; margin-top: 0; height: auto; right: 5px; top: 5px; width: 40px; border: 0; border-radius: 8px; background: var(--bg-3); color: var(--ink-1); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
   .tickets-page form button[type="submit"].tk-search-go:hover { background: var(--brand-soft); color: var(--brand); }
   
   .tk-table-wrap { overflow-x: auto; margin:20px 0 0; }
   .tk-table { width: 100%; min-width: 800px; border-collapse: separate; border-spacing: 0; }
   .tk-table thead th { background: var(--bg-3); color: var(--ink-1); font-size: 13px; font-weight: 500; text-align: left; padding: 13px 16px; white-space: nowrap; }
   .tk-table thead th:first-child { border-radius: 8px 0 0 10px; }
   .tk-table thead th:last-child { border-radius: 0 10px 10px 0; }
   .tk-table tbody td { padding: 16px; font-size: 14px; color: var(--ink-1); border-bottom: 1px solid var(--line-2); vertical-align: middle; }
   .tk-table tbody tr:last-child td { border-bottom: 0; }
   .tk-id { color: var(--ink-2); }
   .tk-subject { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .tk-update { display: flex; align-items: center; gap: 6px; color: var(--ink-3); white-space: nowrap; }
   .tk-update svg { color: var(--ink-4); }
   .tk-status { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 11px; font-weight: 600; }
   .tk-status--blue  { background: #B2D9FF; color: #294766; }
   .tk-status--amber { background: #FFDFB2; color: #664D29; }
   .tk-status--teal  { background: #B2FFF2; color: #29665C; }
   .tk-status--gray  { background: #E6E6E6; color: #555555; }
   .tk-view-cell { text-align: right; }
   .tk-view { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 22px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid transparent; }
   .tk-view--grad { background: linear-gradient(135deg, #FF6B5E 0%, #FF8A5C 100%); color: #fff; }
   .tk-view--grad:hover { filter: brightness(1.04); color: #fff; }
   .tk-view--ghost { background: var(--bg-1); border-color: var(--line); color: var(--ink-1); }
   .tk-view--ghost:hover { border-color: var(--ink-4); }
   
   /* Footer */
   .tk-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
   .tk-foot-card { border: 1px solid var(--line); border-radius: 8px; padding: 24px 26px; }
   .tk-contact { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
   .tk-contact li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); flex-wrap: wrap; }
   .tk-contact svg { color: var(--ink-3); flex: 0 0 auto; }
   .tk-contact-k { color: var(--ink-3); }
   .tk-contact-v { color: var(--ink-1); }
   .tk-socials { display: flex; flex-wrap: wrap; gap: 10px; }
   .tk-socials a { width: 44px; height: 44px; border-radius: 8px; background: var(--bg-1); border: 1px solid var(--line); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; }
   .tk-socials a:hover { color: var(--brand); border-color: var(--brand); }
   
   @media (max-width: 860px) {
      .tk-actions { grid-template-columns: 1fr; }
      .tk-form-row { grid-template-columns: 1fr; }
      .tk-footer { grid-template-columns: 1fr; }
   }
   
   /* ─── View ticket thread (stage 2) ─── */
   .vt-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 8px; }
   .vt-back { color: var(--ink-2); display: inline-flex; padding-top: 2px; }
   .vt-back:hover { color: var(--ink-1); }
   .vt-title { font-family: 'Poppins','Inter',sans-serif; font-size: 24px; font-weight: 800; color: var(--ink-1); margin: 0 0 8px; letter-spacing: -0.02em; }
   .vt-thread { border-top: 1px solid var(--line-2); padding-top: 24px; margin-bottom: 24px; display: flex; flex-direction: column; gap: 22px; }
   .vt-msg { max-width: 76%; border-radius: 8px; padding: 20px 22px; }
   .vt-msg--mine { align-self: flex-end; background: var(--bg-2); border: 1px solid var(--line-2); }
   .vt-msg--support { align-self: flex-start; background: linear-gradient(105deg, #FDE4E4 0%, #E4ECFB 100%); }
   .vt-msg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
   .vt-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 40px; }
   .vt-avatar--brand { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #FFB347, #FF6B5E); color: #fff; }
   .vt-author { font-size: 15px; font-weight: 700; color: var(--ink-1); display: block; }
   .vt-time { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
   .vt-time svg { color: var(--ink-4); }
   .vt-msg-body { font-size: 14px; line-height: 1.7; color: var(--ink-2); }
   .vt-msg-body p { margin: 0 0 10px; }
   .vt-msg-body p:last-child { margin-bottom: 0; }
   .vt-attach { margin-top: 16px; }
   .vt-attach-count { font-size: 13px; color: var(--ink-3); margin-bottom: 10px; }
   .vt-files { display: flex; flex-wrap: wrap; gap: 12px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
   .vt-file { display: flex; align-items: center; gap: 10px; min-width: 200px; }
   .vt-file-ic { color: var(--brand); flex: 0 0 auto; }
   .vt-file-info { display: flex; flex-direction: column; }
   .vt-file-name { font-size: 13.5px; font-weight: 600; color: var(--ink-1); }
   .vt-file-size { font-size: 12px; color: var(--ink-3); }
   .vt-file-dl { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; }
   .vt-reply { margin-top: 4px; }
   
   @media (max-width: 640px) { .vt-msg { max-width: 100%; } }
   
   /* ─── Confirm email ─── */
   
   .confirm-email { text-align: center; }
   .confirm-email-icon {
      width: 64px; height: 64px; border-radius: 16px;
      background: rgba(240,101,67,0.08); color: var(--brand);
      display: inline-flex; align-items: center; justify-content: center;
      margin: 0 auto 18px;
   }
   .confirm-email .auth-title { font-size: 22px; }
   .confirm-email .auth-sub { font-size: 14px; line-height: 1.55; }
   .confirm-email__action { display: flex; flex-direction: column; gap: 8px; }
   .confirm-change-link {
      background: transparent; border: 0; color: var(--brand);
      font-size: 13px; font-weight: 500; cursor: pointer;
      padding: 8px;
   }
   .confirm-change-link:hover { color: var(--brand-strong); text-decoration: underline; }
   
   /* ─── Notifications page ─── */
   
   .notif-channels-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 20px;
   }
   @media (max-width: 760px) {
      .notif-channels-grid { grid-template-columns: 1fr; }
   }
   
   .notif-channel-head {
      display: grid;
      grid-template-columns: 44px 1fr auto;
      gap: 12px;
      align-items: center;
      margin-bottom: 16px;
   }
   .notif-channel-icon {
      width: 44px; height: 44px; border-radius: 11px;
      display: inline-flex; align-items: center; justify-content: center;
   }
   .notif-channel-icon-email { background: rgba(240,101,67,0.10); color: var(--brand); }
   .notif-channel-icon-telegram { background: rgba(34,158,217,0.12); color: #229ed9; }
   .notif-channel-title { font-size: 14px; font-weight: 600; color: var(--ink-1); margin-bottom: 2px; }
   .notif-channel-btn { width: 100%; justify-content: center; height: 42px; }
   
   .notif-matrix-wrap {
      border: 1px solid var(--line); border-radius: 8px;
      overflow: hidden; margin-bottom: 18px;
   }
   .notif-matrix { margin: 0; font-size: 13.5px; }
   .notif-matrix thead th {
      background: var(--bg-3); border-bottom: 1px solid var(--line); border-top: 0;
      color: var(--ink-2); font-size: 11px; font-weight: 600;
      padding: 10px 15px; vertical-align: middle;
   }
   .notif-matrix tbody td {
      padding: 10px 15px; border-top: 1px solid var(--line-2); vertical-align: middle;
   }
   .notif-matrix-event { font-weight: 500; }
   .notif-matrix-channel { text-align: center; }
   .notif-matrix-cell { text-align: center; }
   
   /* Toggle switch */
   .notif-toggle {
      display: inline-block; position: relative; cursor: pointer;
      margin: 0; padding: 0; line-height: 0;
   }
   .notif-toggle input {
      position: absolute; opacity: 0; width: 0; height: 0;
   }
   .notif-toggle-track {
      display: inline-block; position: relative;
      width: 36px; height: 20px;
      background: var(--line); border-radius: 999px;
      transition: background .18s;
   }
   .notif-toggle-thumb {
      position: absolute; left: 2px; top: 2px;
      width: 16px; height: 16px;
      background: #fff; border-radius: 50%;
      box-shadow: 0 1px 2px rgba(0,0,0,0.15);
      transition: transform .18s;
   }
   .notif-toggle input:checked + .notif-toggle-track {
      background: var(--brand);
   }
   .notif-toggle input:checked + .notif-toggle-track .notif-toggle-thumb {
      transform: translateX(16px);
   }
   .notif-toggle input:disabled + .notif-toggle-track {
      opacity: 0.5; cursor: not-allowed;
   }
   .notif-toggle input:focus-visible + .notif-toggle-track {
      box-shadow: 0 0 0 3px rgba(240,101,67,0.18);
   }
   
   .notif-save-row {
      display: flex; justify-content: flex-end;
   }
   
   /* ─── RTL ─── */
   
   body.rtl { direction: rtl; text-align: right; font-family: 'Vazirmatn', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
   /* Public pages enable RTL via html[dir="rtl"] (Twig base.twig) */
   html[dir="rtl"] body { direction: rtl; text-align: right; font-family: 'Vazirmatn', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
   
   /* Panel brand/logo (sidebar): keep logo art LTR to avoid overlap in RTL */
   body.rtl .sidebar-brand,
   html[dir="rtl"] .sidebar-brand {
     direction: ltr;
     unicode-bidi: isolate;
     flex-direction: row;
   }
   body.rtl .sidebar-brand img,
   body.rtl .sidebar-brand svg,
   html[dir="rtl"] .sidebar-brand img,
   html[dir="rtl"] .sidebar-brand svg { order: 0; }
   body.rtl .sidebar-brand .brand-text,
   html[dir="rtl"] .sidebar-brand .brand-text { order: 1; }
   
   /* Brand logo art contains Latin text; keep it LTR to avoid glyph overlap */
   html[dir="rtl"] .public-navbar .navbar-brand { direction: ltr; unicode-bidi: isolate; }
   
   /* Landing/LP: responsive rules hardcode left alignment; override for RTL */
   html[dir="rtl"] .lp { direction: rtl; text-align: right; }
   html[dir="rtl"] .lp-section__head { text-align: center !important; }
   html[dir="rtl"] .lp-section__head--center { text-align: center !important; }
   
   /* Sidebar */
   body.rtl .sidebar { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--line); }
   body.rtl .sidebar-item { flex-direction: row-reverse; text-align: right; }
   body.rtl .sidebar-nav { padding: 12px 10px; }
   
   /* App grid — flip columns */
   body.rtl .app { direction: rtl; }
   body.rtl .app-main { direction: rtl; }
   
   /* Topbar */
   body.rtl .topbar { flex-direction: row-reverse; }
   body.rtl .topbar-inner { flex-direction: row-reverse; }
   body.rtl .topbar-search { direction: ltr; }
   body.rtl .topbar-search input { text-align: right; direction: rtl; }
   body.rtl .topbar-icons { flex-direction: row-reverse; }
   body.rtl .topbar-balance-btn { flex-direction: row-reverse; }
   
   /* Page headers */
   body.rtl .page-header { text-align: right; }
   body.rtl .page-header-eyebrow { text-align: right; }
   
   /* Forms */
   body.rtl .form-control { text-align: right; }
   body.rtl .control-label, body.rtl .modal-body label, body.rtl .control-label { text-align: right; }
   body.rtl label { text-align: right; }
   body.rtl .input-group .input-group-addon:first-child { border-radius: 0 8px 8px 0; border-right: 1px solid var(--line); border-left: 0; }
   body.rtl .input-group .input-group-addon:last-child { border-radius: 8px 0 0 8px; border-left: 1px solid var(--line); border-right: 0; }
   body.rtl .input-group .form-control:first-child { border-radius: 0 8px 8px 0; }
   body.rtl .input-group .form-control:last-child { border-radius: 8px 0 0 8px; }
   
   body.rtl .auth-field__wrap,
   body.rtl .auth-field__input,
   body.rtl .auth-submit,
   html[dir="rtl"] .auth-field__wrap,
   html[dir="rtl"] .auth-field__input,
   html[dir="rtl"] .auth-submit { margin-right: 0; margin-left: auto; }
   
   body.rtl .auth-field__icon,
   html[dir="rtl"] .auth-field__icon { left: auto; right: 12px; }
   
   body.rtl .auth-field__input,
   html[dir="rtl"] .auth-field__input { padding: 0 38px 0 14px; text-align: right; direction: rtl; }
   
   body.rtl .auth-field__input--plain,
   html[dir="rtl"] .auth-field__input--plain { padding-left: 14px; padding-right: 14px; }
   
   body.rtl .auth-field__label-row,
   html[dir="rtl"] .auth-field__label-row { flex-direction: row-reverse; }
   
   body.rtl .auth-terms,
   html[dir="rtl"] .auth-terms { flex-direction: row-reverse; }
   
   /* Alerts */
   body.rtl .alert { text-align: right; }
   body.rtl .alert-dismissible .close { left: 12px; right: auto; }
   
   /* Dropdowns */
   body.rtl .dropdown-menu { text-align: right; }
   body.rtl .dropdown-menu-right { left: 0; right: auto; }
   
   /* Cards */
   body.rtl .card-body { text-align: right; }
   
   /* Tables */
   body.rtl .table th, body.rtl .table td { text-align: right; }
   
   /* Neworder page */
   body.rtl .neworder-page .page-header { text-align: right; }
   body.rtl .neworder-grid { direction: rtl; }
   
   /* Step headings (1 Choose a platform, 2 Pick a service, etc.) */
   body.rtl .card-head { flex-direction: row-reverse; text-align: right; }
   
   /* Stepper progress bar in summary */
   body.rtl .neworder-stepper { flex-direction: row-reverse; }
   body.rtl .neworder-stepper .step { flex-direction: row-reverse; }
   body.rtl .neworder-stepper .step + .step::before { transform: scaleX(-1); }
   
   /* Platform chips */
   body.rtl .platform-grid { direction: rtl; }
   body.rtl .pulse-platform-chip { direction: rtl; }
   
   /* Form fields */
   body.rtl .form-control.with-icon { padding-left: 14px; padding-right: 38px; }
   body.rtl select.form-control { background-position: left 12px center; padding-left: 32px; padding-right: 14px; }
   body.rtl #fields .input-group .form-control { border-radius: 0 8px 8px 0; }
   body.rtl #fields .input-group .input-group-btn .btn { border-radius: 8px 0 0 8px; }
   
   /* RTL: service detail card trust signals */
   body.rtl .summary-trust { flex-direction: row-reverse; }
   body.rtl .summary-trust li { flex-direction: row-reverse; }
   
   /* Global select arrow flip for RTL */
   body.rtl select.form-control { background-position: left 14px center !important; padding-left: 42px !important; padding-right: 14px !important; }
   
   /* Add funds */
   body.rtl .method-card { flex-direction: row-reverse; }
   body.rtl .amount-presets { flex-direction: row-reverse; }
   body.rtl .addfunds-grid { direction: rtl; }
   body.rtl .instructions-header { flex-direction: row-reverse; text-align: right; }
   
   /* Pagination */
   body.rtl .pagination { direction: ltr; }
   
   /* Misc */
   body.rtl .muted { text-align: right; }
   body.rtl .badge { margin-left: 0; margin-right: 6px; }
   body.rtl .caret { margin-left: 0; margin-right: 4px; }
   
   @media (max-width: 991px) {
      body.rtl .sidebar { left: auto; right: 0; transform: translateX(100%); box-shadow: -2px 0 12px rgba(0,0,0,0.08); }
      body.rtl .sidebar.open { transform: translateX(0); }
      body.rtl .app-main { margin-right: 0; }
   }
   
   /* ============================================================
     Landing page (signin.twig public-facing) — JAP-style
     All selectors prefixed .lp-* to avoid collisions
     ============================================================ */
   
   .lp { background: var(--bg-1); color: var(--ink-1); }
   .lp .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
   
   /* Container */
   .lp-container { max-width: 1488px; margin: 0 auto; padding: 0 24px; }
   
   /* Eyebrow chip */
   .lp-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 12px; font-weight: 600;
      color: var(--brand);
      padding: 6px 12px;
      background: var(--brand-soft);
      border-radius: 999px;
      margin-bottom: 18px;
   }
   .lp-eyebrow--on-dark { color: rgba(255,255,255,0.92); background: rgba(255,255,255,0.1); }
   @keyframes lp-pulse {
      0%   { box-shadow: 0 0 0 0 rgba(22,163,74,0.55); }
      70%  { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
      100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
   }
   
   /* Headings */
   .lp-h1 {
      font-size: 40px; font-weight: 700;
      letter-spacing: 0; line-height: 1.5;
      color: var(--ink-1);
      margin: 0 0 18px;
   }
   .lp-h1__em { color: var(--brand); font-style: normal; }
   .lp-h1__brand {
      display: block;
      font-size: 0.55em;
      font-weight: 500;
      letter-spacing: 0;
      color: var(--ink-2);
      margin-top: 6px;
   }
   .lp-h1__brand .lp-one { font-weight: 700; }
   .lp-lede { font-size: 18px; line-height: 1.55; color: var(--ink-2); margin: 0 0 24px; max-width: 540px; }
   
   .lp-h2 { font-size: clamp(20px, 4vw, 24px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink-1); margin: 0 0 6px; }
   .lp-h2--on-dark { color: #fff; }
   
   /* ── Heading text treatments ── */
   .lp-accent { color: var(--brand); }
   .lp-gradient-text {
      background: linear-gradient(135deg, var(--brand) 0%, #f97316 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
   }
   [data-theme="dark"] .lp-gradient-text {
      background: linear-gradient(135deg, #ff8a65 0%, #ffb74d 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
   }
   .lp-h2--underline {
      display: inline;
      background-image: linear-gradient(var(--brand), var(--brand));
      background-position: 0 92%;
      background-size: 100% 3px;
      background-repeat: no-repeat;
      padding-bottom: 2px;
   }
   .lp-section__sub .lp-sub-em {
      color: var(--ink-1);
      font-weight: 500;
   }
   [data-theme="dark"] .lp-section__sub .lp-sub-em { color: #e2e8f0; }
   .lp-section--dark .lp-section__sub .lp-sub-em { color: #fff; }
   .lp-section__sub--with-rule {
      position: relative;
      padding-top: 18px;
      margin-top: 14px !important;
   }
   .lp-section__sub--with-rule::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 36px;
      height: 3px;
      border-radius: 2px;
      background: var(--brand);
      opacity: 0.55;
   }
   .lp-section--dark .lp-section__sub--with-rule::before {
      background: rgba(255,255,255,0.35);
   }
   
   /* ============================================================
     1. HERO
     ============================================================ */
   .lp-hero {
      position: relative;
      padding: clamp(36px, 5vw, 90px) 0 clamp(24px, 3vw, 64px);
      overflow: hidden;
      border-bottom: none;
      background: var(--bg-5);
   }
   .lp-hero::after {
      content: "";
      position: absolute; inset: 0;
      background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 0;
   }
   .lp-hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
   .lp-hero__3d-canvas { display: none; }
   .lp-hero__grid { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--brand); }
   
   .lp-hero__inner {
      position: relative; z-index: 1;
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 48px; align-items: start; padding-top: 0;
      max-width: 1440px; margin: 0 auto;
   }
   .lp-hero__inner.lp-hero__inner--centered {
      display: flex; flex-direction: column; align-items: center;
      grid-template-columns: none; gap: 0; text-align: center;
      max-width: 760px; margin: 0 auto; padding-top: 0;
   }
   .lp-hero__inner.lp-hero__inner--centered .lp-hero__pitch {
      text-align: center; width: 100%;
   }
   
   .lp-hero__pitch { min-width: 0; }
   
   .lp-bullets {
      list-style: none; padding: 0; margin: 24px 0 32px;
      display: flex; flex-direction: column; gap: 10px;
      font-size: 14.5px; color: var(--ink-2);
   }
   .lp-bullets li { display: flex; align-items: flex-start; gap: 10px; }
   .lp-bullets li svg {
      flex-shrink: 0; margin-top: 4px;
      color: var(--brand);
      background: var(--brand-soft);
      border-radius: 50%; padding: 3px;
      box-sizing: content-box;
   }
   .lp-bullets strong { color: var(--ink-1); font-weight: 600; }
   
   /* ============================================================
     3. SECTIONS (generic shell)
     ============================================================ */
   .lp-section { padding: var(--space-section) 0; }
   .lp-section--alt {
      background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-3) 100%);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
   }
   .lp-section--alt-2 {
      background: var(--bg-4);
   }
   .lp-section--alt-3 {
      background: var(--bg-5);
   }
   .lp-section__head { display: block; text-align: center; max-width: 720px; margin: 0 auto 40px; }
   .lp-section__head--left { text-align: left; max-width: none; margin: 0 0 40px; }
   .lp-section__head--left .lp-section__sub { margin-left: 0; }
   .lp-section__head--center { display: block; text-align: center; max-width: 720px; margin: 0 auto 48px; }
   .lp-section__h { font-size: clamp(30px, 4.5vw, 44px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; color: var(--ink-1); margin: 0 0 10px; }
   .lp-section__sub,
   .lp-section__head p { font-size: 12px; color: var(--ink-3); margin: 6px auto 0; max-width: 580px; line-height: 1.6; }
   .lp-section__sub--mb { margin-bottom: 10px !important; }
   .lp-section__more { font-size: 13px; color: var(--brand); font-weight: 500; text-decoration: none; white-space: nowrap; align-self: baseline; }
   .lp-section__more:hover { text-decoration: underline; }
   
   /* ============================================================
     3b. SERVICES PREVIEW TABLE
     ============================================================ */
   .lp-services {
      background: transparent;
      border: none;
      border-radius: 0;
      overflow: visible;
      padding: 30px 0;
   }
   .lp-services__head, .lp-services__row {
      display: grid;
      grid-template-columns: 90px 1fr 160px 140px 120px;
      gap: 16px; align-items: center;
      padding: 16px 16px;
   }
   .lp-services__head {
      background: #E3E5E6;
      border-bottom: none;
      border-radius: 8px;
      font-size: 14px; font-weight: 400;
      letter-spacing: 0; text-transform: none;
      color: var(--ink-1);
      margin-bottom: 10px;
      padding: 20px 16px;
   }
   [data-theme="dark"] .lp-services__head {
      background: #2A2D3A;
   }
   .lp-services__head span:nth-child(4) { font-weight: 700; }
   .lp-services__row {
      border-bottom: 1px solid #ccc; font-size: 14px;
      transition: background var(--dur-fast) ease;
      padding: 14px 16px;
   }
   .lp-services__row:last-child { border-bottom: 0; }
   .lp-services__row:hover { background: var(--bg-2); }
   .lp-services__id { color: #888; font-size: 14px; }
   .lp-services__name { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--ink-1); font-weight: 600; font-size: 14px; }
   .lp-services__plat {
      font-size: 10px; padding: 5px 10px;
      background: #e6e6e6; color: #888;
      border-radius: 4px; font-weight: 700;
   }
   .lp-services__range { color: #555; font-size: 14px; }
   .lp-services__price { font-weight: 700; color: var(--ink-1); font-size: 14px; }
   .lp-services__cta {
      text-align: center;
      padding: 7px 14px;
      background: var(--brand-soft); color: var(--brand);
      font-weight: 600; font-size: 13px;
      border-radius: 8px;
      text-decoration: none;
      transition: background var(--dur-fast) ease,
                  color var(--dur-fast) ease,
                  box-shadow var(--dur-normal) var(--ease-out-expo),
                  transform var(--dur-fast) ease;
   }
   .lp-services__cta:not(.lp-services__cta--outline):hover {
      background: var(--brand); color: #fff; text-decoration: none;
      box-shadow: var(--shadow-brand);
      transform: translateY(-1px);
   }
   /* Cell-name aliases — templates use __cell-* variants */
   .lp-services__cell-id { color: var(--ink-3); font-size: 12px; }
   .lp-services__cell-name { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink-1); font-weight: 500; }
   .lp-services__cell-mm { color: var(--ink-2); font-size: 13px; }
   .lp-services__cell-price { font-weight: 600; color: var(--ink-1); font-size: 15px; }
   .lp-services__cell-act {
      text-align: center;
      padding: 7px 14px;
      background: var(--brand-soft); color: var(--brand);
      font-weight: 600; font-size: 13px;
      border-radius: 8px;
      text-decoration: none;
      transition: background .15s;
   }
   .lp-services__cell-act:hover { background: var(--brand); color: #fff; text-decoration: none; }
   .lp-badge { font-size: 10px; font-weight: 700; padding: 5px 10px; border-radius: 4px; letter-spacing: 0.04em; }
   .lp-badge--hot { background: #ffccd4; color: #cc2844; }
   .lp-badge--refill { background: #d1fae5; color: #065f46; }
   
   /* ============================================================
     3b2. POPULAR SERVICES SECTION
     ============================================================ */
   .lp-popular-section { padding-top: 60px; padding-bottom: 60px; }
   .lp-popular__bar {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 20px;
      margin-bottom: 0;
      flex-wrap: wrap;
   }
   .lp-popular__h {
      font-family: 'Poppins', sans-serif;
      font-size: 24px;
      font-weight: 600;
      color: var(--ink-1);
      letter-spacing: 0;
      line-height: 40px;
      margin: 0;
   }
   .lp-popular__sub {
      font-size: 12px;
      color: #888;
      line-height: 20px;
      margin: 0;
      max-width: 520px;
   }
   .lp-popular__catalog {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      font-weight: 700;
      color: var(--accent);
      text-decoration: none;
      white-space: nowrap;
      flex-shrink: 0;
      align-self: flex-end;
   }
   .lp-popular__catalog:hover { color: #e04a3e; text-decoration: underline; }
   .lp-popular-section .lp-services {
      overflow: visible;
      padding-bottom: 36px;
   }
   .lp-popular-section .lp-services__head {
      margin-bottom: 8;
   }
   .lp-popular-section .lp-services__head,
   .lp-popular-section .lp-services__row {
      gap: 10px;
   }
   .lp-popular-section .lp-services__row {
      box-sizing: border-box;
      min-height: 70px;
      padding: 10px 16px;
      border-radius: 8px;
      border: 1px solid transparent;
      border-bottom: 1px solid #ccc;
      transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      position: relative;
      z-index: 0;
      overflow: hidden;
   }
   .lp-popular-section .lp-services__row::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      border-radius: 8px 0 0 8px;
      background: transparent;
      transition: background 0.2s ease;
      pointer-events: none;
   }
   .lp-popular-section .lp-services__row:last-child {
      border-bottom: 1px solid transparent;
   }
   .lp-popular-section .lp-services__row:hover {
      background: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-color: #ffffff;
      border-bottom-color: #ffffff;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      z-index: 1;
   }
   .lp-popular-section .lp-services__row:has(+ .lp-services__row:hover) {
      border-bottom-color: transparent;
   }
   .lp-popular-section .lp-services__row:hover::before {
      background: linear-gradient(180deg, #ff6255, #ff8d64);
   }
   [data-theme="dark"] .lp-popular-section .lp-services__row:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.18);
      border-bottom-color: rgba(255, 255, 255, 0.18);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
   }
   [data-theme="dark"] .lp-popular-section .lp-services__row:hover::before {
      background: linear-gradient(180deg, #ff6255, #ff8d64);
   }
   .lp-services__price--green { color: #00bf7f; font-weight: 700; }
   .lp-services__cta--outline {
      background: transparent;
      color: var(--shell-item);
      border: 1px solid var(--shell-icon);
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      height: 50px;
      padding: 13px 24px;
      box-sizing: border-box;
      font-weight: 700;
      font-size: 14px;
      line-height: 1;
      white-space: nowrap;
      text-decoration: none;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
   }
   .lp-services__cta--outline:hover,
   .lp-services__cta--outline:focus-visible {
      background: var(--accent);
      color: #ffffff;
      border-color: var(--accent);
      box-shadow: 0 4px 12px rgba(255, 98, 85, 0.25);
      transform: none;
      text-decoration: none;
   }
   .lp-popular-section .lp-services__row:hover .lp-services__cta--outline {
      background: var(--accent);
      color: #ffffff;
      border-color: var(--accent);
      box-shadow: 0 4px 12px rgba(255, 98, 85, 0.25);
   }
   .lp-services__cta-arrow {
      color: var(--accent);
      margin-left: 0;
      transition: color 0.2s ease;
   }
   .lp-services__cta--outline:hover .lp-services__cta-arrow,
   .lp-services__cta--outline:focus-visible .lp-services__cta-arrow,
   .lp-popular-section .lp-services__row:hover .lp-services__cta--outline .lp-services__cta-arrow {
      color: #ffffff;
   }
   @media (max-width: 640px) {
      .lp-popular__bar { align-items: flex-start; }
      .lp-popular__catalog { align-self: flex-end; }
   }
   
   /* ============================================================
     3b3. TELEGRAM CHANNEL BANNER
     ============================================================ */
   .lp-tgbanner-section { overflow: hidden; }
   .lp-tgbanner {
      border: none;
      position: relative;
      overflow: hidden;
   }
   .lp-tgbanner::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url('/public/images/Telegram-bg.png') no-repeat top / cover;
   }
   .lp-tgbanner .lp-container {
      display: flex;
      align-items: center;
      position: relative;
      z-index: 2;
   }
   .lp-tgbanner__content { padding: 30px 0; }
   .lp-tgbanner__h {
      font-family: 'Poppins', sans-serif;
      font-size: 36px;
      font-weight: 600;
      color: var(--ink-1);
      line-height: 60px;
      letter-spacing: 0;
      margin: 0;
   }
   .lp-tgbanner__brand { color: #2aabee; }
   .lp-tgbanner__sub {
      font-size: 14px;
      color: #888;
      line-height: 24px;
      margin: 0 0 20px;
   }
   .lp-tgbanner__btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(90deg, #0094ff 0%, #2aaedb 100%);
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      padding: 13px 24px;
      border-radius: 8px;
      text-decoration: none;
      box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);
      transition: transform var(--dur-fast) ease,
                  box-shadow var(--dur-normal) var(--ease-out-expo);
   }
   .lp-tgbanner__btn svg {
      width: 24px;
      height: 19px;
      flex-shrink: 0;
   }
   .lp-tgbanner__btn:hover {
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(0, 148, 255, 0.3);
      text-decoration: none;
   }
   [data-theme="dark"] .lp-tgbanner::before {
      background-image: url('https://storage.perfectcdn.com/aedutt/sfpyr0wpf54srijx.png');
      opacity: 0.4;
   }
   [data-theme="dark"] .lp-tgbanner::after {
      background: linear-gradient(to right, var(--bg-2) 0%, var(--bg-2) 30%, transparent 65%);
   }
   @media (max-width: 900px) {
      .lp-tgbanner__h { font-size: 28px; line-height: 40px; }
   }
   @media (max-width: 640px) {
      .lp-tgbanner::before, .lp-tgbanner::after { display: none; }
      .lp-tgbanner__content { padding: 28px 0; }
      .lp-tgbanner__h { font-size: 24px; line-height: 36px; }
   }
   
   /* ============================================================
     3b4. SEO TEXT SECTION
     ============================================================ */
   .lp-seo-section { padding-top: 64px; padding-bottom: 64px; }
   .lp-seo__h {
      font-size: clamp(18px, 2vw, 24px);
      font-weight: 600;
      color: var(--ink-1);
      line-height: 1.3;
      margin: 0 0 6px;
   }
   .lp-seo__label {
      font-size: 13px;
      color: var(--ink-3);
      margin: 0 0 28px;
      line-height: 1.5;
   }
   .lp-seo__intro {
      font-size: 15px;
      line-height: 1.75;
      color: var(--ink-2);
      margin: 0 0 32px;
   }
   .lp-seo__cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 40px;
      font-size: 14px;
      line-height: 1.75;
      color: var(--ink-2);
   }
   .lp-seo__cols p { margin: 0; }
   @media (max-width: 768px) {
      .lp-seo__cols { grid-template-columns: 1fr; gap: 20px 0; }
   }
   
   /* ============================================================
     3c. PACKAGE CAROUSEL (scroll-snap)
     ============================================================ */
   .lp-pkg-wrap { position: relative; overflow: hidden; }
   .lp-pkg-track {
      display: flex;
      gap: 16px;
   }
   .lp-pkg-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 4;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: var(--bg-1);
      color: var(--ink-2);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 12px rgba(0,0,0,.12);
      backdrop-filter: blur(4px);
      transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
   }
   .lp-pkg-nav:hover {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
      box-shadow: 0 4px 20px rgba(0,0,0,.15);
   }
   .lp-pkg-nav svg { width: 18px; height: 18px; }
   .lp-pkg-nav--prev { left: 8px; }
   .lp-pkg-nav--next { right: 8px; }
   .lp-pkg-nav[disabled] { opacity: .3; pointer-events: none; }
   @media (max-width: 768px) {
      .lp-pkg-nav--prev { left: 4px; }
      .lp-pkg-nav--next { right: 4px; }
      .lp-pkg-nav { width: 36px; height: 36px; }
      .lp-pkg-nav svg { width: 14px; height: 14px; }
   }
   
   .lp-pkg-card {
      flex: 0 0 calc(25% - 12px);
      scroll-snap-align: start;
      background: var(--bg-1);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg, 14px);
      padding: 28px 24px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: border-color var(--dur-fast) ease,
                  box-shadow var(--dur-normal) var(--ease-out-expo),
                  transform var(--dur-normal) var(--ease-out-expo);
   }
   .lp-pkg-card:hover {
      border-color: var(--brand);
      box-shadow: var(--shadow-brand);
      transform: translateY(-4px);
   }
   
   .lp-pkg-card__wm {
      position: absolute;
      right: -20px;
      bottom: -20px;
      width: 140px;
      height: 140px;
      opacity: 0.06;
      pointer-events: none;
   }
   
   .lp-pkg-card__title {
      font-size: 15px;
      font-weight: 600;
      color: var(--ink-1);
      margin-bottom: 8px;
      line-height: 1.35;
   }
   .lp-pkg-card__price {
      font-size: 28px;
      font-weight: 700;
      color: var(--brand);
      margin-bottom: 16px;
      line-height: 1;
   }
   .lp-pkg-card__price span {
      font-size: 14px;
      font-weight: 500;
      color: var(--ink-3);
   }
   
   .lp-pkg-card__feats {
      list-style: none;
      padding: 0;
      margin: 0 0 20px;
      flex: 1;
   }
   .lp-pkg-card__feats li {
      font-size: 13px;
      color: var(--ink-2);
      padding: 4px 0 4px 20px;
      position: relative;
      line-height: 1.45;
   }
   .lp-pkg-card__feats li::before {
      content: "✓";
      position: absolute;
      left: 0;
      color: var(--brand);
      font-weight: 700;
      font-size: 12px;
   }
   
   .lp-pkg-card__cta {
      display: inline-block;
      text-align: center;
      padding: 10px 18px;
      background: var(--brand-soft);
      color: var(--brand);
      font-weight: 600;
      font-size: 13px;
      border-radius: 8px;
      text-decoration: none;
      transition: background .15s, color .15s;
   }
   .lp-pkg-card__cta:hover {
      background: var(--brand);
      color: #fff;
      text-decoration: none;
   }
   
   .lp-pkg-card .lp-tag { position: absolute; top: 16px; right: 16px; }
   
   @media (max-width: 1024px) {
      .lp-pkg-card { flex: 0 0 calc(33.333% - 11px); }
   }
   @media (max-width: 768px) {
      .lp-pkg-card { flex: 0 0 calc(50% - 8px); }
   }
   @media (max-width: 480px) {
      .lp-pkg-card { flex: 0 0 82%; }
   }
   
   /* ============================================================
     3d. PACKAGE SECTION — FLOATING ICONS BACKGROUND
     ============================================================ */
   .lp-pkg-section {
      position: relative;
      overflow: hidden;
   }
   .lp-pkg-section > .lp-container {
      position: relative;
      z-index: 1;
   }
   
   .lp-pkg-rain {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
   }
   
   .lp-pkg-rain__icon {
      position: absolute;
      color: var(--brand);
      opacity: 0.05;
      animation: pkgFloat 6s ease-in-out infinite;
   }
   
   .lp-rain--1  { left: 2%;  top: 5%;   width: 32px; height: 32px; animation-duration: 7s;   animation-delay: 0s; }
   .lp-rain--2  { left: 12%; top: 60%;  width: 48px; height: 48px; animation-duration: 9s;   animation-delay: 1.2s; opacity: 0.04; }
   .lp-rain--3  { left: 24%; top: 18%;  width: 24px; height: 24px; animation-duration: 6.5s; animation-delay: 0.5s; }
   .lp-rain--4  { left: 36%; top: 72%;  width: 40px; height: 40px; animation-duration: 8s;   animation-delay: 2.8s; opacity: 0.035; }
   .lp-rain--5  { left: 48%; top: 10%;  width: 56px; height: 56px; animation-duration: 10s;  animation-delay: 1.5s; opacity: 0.03; }
   .lp-rain--6  { left: 60%; top: 55%;  width: 28px; height: 28px; animation-duration: 7.5s; animation-delay: 3s; }
   .lp-rain--7  { left: 72%; top: 22%;  width: 44px; height: 44px; animation-duration: 8.5s; animation-delay: 0.8s; opacity: 0.04; }
   .lp-rain--8  { left: 83%; top: 48%;  width: 36px; height: 36px; animation-duration: 6.5s; animation-delay: 2s; }
   .lp-rain--9  { left: 91%; top: 12%;  width: 28px; height: 28px; animation-duration: 9s;   animation-delay: 4s;   opacity: 0.035; }
   .lp-rain--10 { left: 7%;  top: 82%;  width: 20px; height: 20px; animation-duration: 7s;   animation-delay: 1.8s; }
   .lp-rain--11 { left: 44%; top: 38%;  width: 52px; height: 52px; animation-duration: 11s;  animation-delay: 3.5s; opacity: 0.025; }
   .lp-rain--12 { left: 68%; top: 85%;  width: 24px; height: 24px; animation-duration: 6s;   animation-delay: 0.3s; }
   
   @keyframes pkgFloat {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      25%      { transform: translateY(-10px) rotate(4deg); }
      75%      { transform: translateY(8px) rotate(-3deg); }
   }
   
   @media (prefers-reduced-motion: reduce) {
      .lp-pkg-rain__icon { animation: none; }
   }
   @media (max-width: 768px) {
      .lp-rain--5, .lp-rain--9, .lp-rain--11 { display: none; }
   }
   
   /* Package card category label */
   .lp-pkg-card__cat {
      font-size: 10px;
      font-weight: 700;
      color: var(--ink-3);
      margin-bottom: 6px;
      display: block;
   }
   
   /* ============================================================
     4. PLATFORMS
     ============================================================ */
   .lp-platforms {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
   }
   .lp-platform {
      background: var(--bg-1);
      border: 1px solid var(--line);
      border-top: 3px solid var(--line);
      border-radius: 12px;
      padding: 22px;
      box-shadow: var(--shadow-1);
      transition: box-shadow var(--dur-normal) var(--ease-out-expo),
                  transform var(--dur-normal) var(--ease-out-expo),
                  border-color var(--dur-fast) ease;
   }
   .lp-platform:hover {
      box-shadow: var(--shadow-brand-lg);
      transform: translateY(-5px);
      border-color: rgba(240,101,67,.20);
   }
   /* Platform-colored top borders */
   .lp-platform--tg  { border-top-color: #0088cc; }
   .lp-platform--ig  { border-top-color: #E4405F; }
   .lp-platform--tt  { border-top-color: #000000; }
   .lp-platform--yt  { border-top-color: #FF0000; }
   .lp-platform--x   { border-top-color: #1DA1F2; }
   .lp-platform--sp  { border-top-color: #1DB954; }
   .lp-platform--fb  { border-top-color: #1877F2; }
   .lp-platform--tw  { border-top-color: #9146FF; }
   .lp-platform__name { font-size: 16px; font-weight: 600; color: var(--ink-1); margin-bottom: 4px; }
   .lp-platform__count { font-size: 12px; color: var(--ink-3); margin-bottom: auto; }
   
   /* ── Price badge — the visual hero of each card ── */
   .lp-platform__price {
      display: flex;
      align-items: baseline;
      gap: 4px;
      margin-top: 16px;
      padding: 8px 12px;
      border-radius: 8px;
      background: var(--price-bg, rgba(74,108,247,0.08));
      width: fit-content;
   }
   .lp-platform__price-amount {
      font-family: 'Plus Jakarta Sans', 'DM Sans', -apple-system, sans-serif;
      font-size: 26px;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1;
      color: var(--price-ink, var(--brand));
      font-variant-numeric: tabular-nums;
   }
   .lp-platform__price-unit {
      font-size: 12px;
      font-weight: 600;
      color: var(--ink-3);
   }
   
   /* Platform-specific price tints */
   .lp-platform--tg .lp-platform__price  { --price-bg: rgba(0,136,204,0.08);  --price-ink: #0077b5; }
   .lp-platform--ig .lp-platform__price  { --price-bg: rgba(228,64,95,0.08);  --price-ink: #c13584; }
   .lp-platform--tt .lp-platform__price  { --price-bg: rgba(0,0,0,0.06);      --price-ink: #262626; }
   .lp-platform--yt .lp-platform__price  { --price-bg: rgba(255,0,0,0.07);    --price-ink: #cc0000; }
   .lp-platform--x  .lp-platform__price  { --price-bg: rgba(29,161,242,0.08); --price-ink: #1a8cd8; }
   .lp-platform--sp .lp-platform__price  { --price-bg: rgba(29,185,84,0.08);  --price-ink: #1db954; }
   .lp-platform--fb .lp-platform__price  { --price-bg: rgba(24,119,242,0.08); --price-ink: #1877f2; }
   .lp-platform--tw .lp-platform__price  { --price-bg: rgba(145,70,255,0.08); --price-ink: #7c3aed; }
   
   /* Dark mode price adjustments */
   [data-theme="dark"] .lp-platform__price-amount,
   .dark .lp-platform__price-amount { color: var(--price-ink); filter: brightness(1.3); }
   [data-theme="dark"] .lp-platform--tt .lp-platform__price,
   .dark .lp-platform--tt .lp-platform__price { --price-bg: rgba(255,255,255,0.08); --price-ink: #e8ecf2; }
   
   /* Hover: badge pops slightly */
   .lp-platform:hover .lp-platform__price {
      background: var(--price-bg-hover, var(--price-bg));
      transform: scale(1.04);
      transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), background 0.2s ease;
   }
   .lp-platform--tg:hover .lp-platform__price  { --price-bg-hover: rgba(0,136,204,0.14); }
   .lp-platform--ig:hover .lp-platform__price  { --price-bg-hover: rgba(228,64,95,0.14); }
   .lp-platform--tt:hover .lp-platform__price  { --price-bg-hover: rgba(0,0,0,0.10); }
   .lp-platform--yt:hover .lp-platform__price  { --price-bg-hover: rgba(255,0,0,0.12); }
   .lp-platform--x:hover  .lp-platform__price  { --price-bg-hover: rgba(29,161,242,0.14); }
   .lp-platform--sp:hover .lp-platform__price  { --price-bg-hover: rgba(29,185,84,0.14); }
   .lp-platform--fb:hover .lp-platform__price  { --price-bg-hover: rgba(24,119,242,0.14); }
   .lp-platform--tw:hover .lp-platform__price  { --price-bg-hover: rgba(145,70,255,0.14); }
   
   .lp-platform__cheap { display: flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--ink-2); }
   .lp-platform__cheap span { font-size: 10.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
   .lp-platform__cheap strong { font-size: 18px; color: var(--ink-1); font-weight: 600; margin: 0; }
   .lp-platforms--guides { grid-template-columns: repeat(2, 1fr); max-width: 640px; margin: 0 auto; }
   
   /* ── Newsletter subscribe section (forced dark) ── */
   .lp-newsletter-section {
      background: #0c101b;
      border-top: 1px solid rgba(255,255,255,.06);
      border-bottom: 1px solid rgba(255,255,255,.06);
      padding: 72px 0 80px;
      overflow: hidden;
   }
   .lp-newsletter {
      position: relative;
      max-width: 620px;
      margin: 0 auto;
      text-align: center;
   }
   .lp-newsletter__mesh {
      position: absolute;
      inset: -60px -80px;
      background:
          radial-gradient(ellipse 50% 40% at 20% 30%, rgba(99,102,241,.12) 0%, transparent 70%),
          radial-gradient(ellipse 50% 40% at 80% 70%, rgba(168,85,247,.10) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
   }
   .lp-newsletter__content {
      position: relative;
      z-index: 1;
   }
   .lp-newsletter__title {
      font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.5rem);
      font-weight: 700;
      color: #e6eaf0;
      line-height: 1.2;
      margin: 0 0 12px;
      letter-spacing: -.02em;
   }
   .lp-newsletter__sub {
      font-size: 1.05rem;
      color: #8b95a1;
      margin: 0 0 32px;
      line-height: 1.5;
   }
   .lp-newsletter__form {
      transition: opacity .3s ease, transform .3s ease;
   }
   .lp-newsletter__form.is-hidden {
      opacity: 0;
      transform: translateY(-8px);
      pointer-events: none;
      position: absolute;
      width: 100%;
   }
   .lp-newsletter__input-wrap {
      display: flex;
      gap: 0;
      max-width: 480px;
      margin: 0 auto;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.10);
      background: #161b2a;
      transition: border-color .2s ease, box-shadow .2s ease;
   }
   .lp-newsletter__input-wrap:focus-within {
      border-color: rgba(99,102,241,.5);
      box-shadow: 0 0 0 3px rgba(99,102,241,.15);
   }
   .lp-newsletter__input {
      flex: 1;
      min-width: 0;
      padding: 14px 18px;
      border: none;
      background: transparent;
      color: #e6eaf0;
      font-size: 15px;
      outline: none;
      font-family: inherit;
   }
   .lp-newsletter__input::placeholder {
      color: #555d6e;
   }
   .lp-newsletter__btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 14px 24px;
      border: none;
      background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent-2, #a855f7));
      color: #fff;
      font-size: 15px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
      transition: opacity .2s ease, filter .2s ease;
   }
   .lp-newsletter__btn:hover { filter: brightness(1.1); }
   .lp-newsletter__btn:active { filter: brightness(.95); }
   .lp-newsletter__btn:disabled {
      cursor: not-allowed;
      opacity: .7;
   }
   .lp-newsletter__btn-spinner {
      display: none;
      animation: nl-spin .7s linear infinite;
   }
   .lp-newsletter__btn.is-loading .lp-newsletter__btn-text,
   .lp-newsletter__btn.is-loading .lp-newsletter__btn-arrow { display: none; }
   .lp-newsletter__btn.is-loading .lp-newsletter__btn-spinner { display: block; }
   @keyframes nl-spin { to { transform: rotate(360deg); } }
   
   .lp-newsletter__error {
      max-width: 480px;
      margin: 8px auto 0;
      font-size: 13px;
      color: #f87171;
      min-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: opacity .2s ease;
   }
   .lp-newsletter__error.is-visible { opacity: 1; }
   
   .lp-newsletter__success {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      opacity: 0;
      transform: scale(.92);
      transition: opacity .4s ease, transform .4s var(--ease-out-expo, cubic-bezier(.16,1,.3,1));
      pointer-events: none;
      position: absolute;
      width: 100%;
      left: 0;
   }
   .lp-newsletter__success.is-visible {
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
      position: relative;
   }
   .lp-newsletter__success svg {
      color: #34d399;
   }
   .lp-newsletter__success-text {
      font-size: 1.1rem;
      font-weight: 600;
      color: #e6eaf0;
   }
   .lp-newsletter__privacy {
      margin: 16px 0 0;
      font-size: 12px;
      color: #555d6e;
      letter-spacing: .01em;
   }
   @media (max-width: 520px) {
      .lp-newsletter-section { padding: 56px 0 64px; }
      .lp-newsletter__input-wrap {
          flex-direction: column;
          border-radius: 12px;
          max-width: 100%;
      }
      .lp-newsletter__input { padding: 14px 16px; }
      .lp-newsletter__btn {
          justify-content: center;
          border-top: 1px solid rgba(255,255,255,.06);
          padding: 14px 20px;
      }
   }
   
   /* ============================================================
     10. ADMIN-EDITABLE COPY
     ============================================================ */
   .lp-authtext {
      font-size: 15px; line-height: 1.65; color: var(--ink-2);
      max-width: 760px; margin-left: auto; margin-right: auto;
   }
   .lp-authtext h1, .lp-authtext h2, .lp-authtext h3 { color: var(--ink-1); margin-top: 1.4em; }
   .lp-authtext a { color: var(--brand); }
   
   /* ============================================================
     11. FAQ
     ============================================================ */
   .lp-faq-section { padding-top: 80px; padding-bottom: 80px; }
   .lp-faq__head { max-width: 560px; margin: 0 0 48px; }
   .lp-faq__h {
      font-size: clamp(26px, 3.5vw, 40px);
      font-weight: 800;
      color: var(--ink-1);
      line-height: 1.2;
      letter-spacing: -0.5px;
      margin: 0 0 12px;
   }
   .lp-faq__sub {
      font-size: 12px;
      color: var(--ink-2);
      line-height: 1.65;
      margin: 0;
   }
   .lp-faq__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 56px;
   }
   .lp-faq__item {
      border-bottom: 1px solid var(--line);
      cursor: pointer;
   }
   .lp-faq__item summary {
      list-style: none;
      font-size: 16px;
      font-weight: 600;
      color: var(--ink-2);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      gap: 16px;
      transition: color var(--dur-fast) ease;
   }
   .lp-faq__item summary:hover { color: var(--brand); }
   .lp-faq__item summary::-webkit-details-marker { display: none; }
   .lp-faq__item summary::after {
      content: '';
      display: inline-block;
      flex-shrink: 0;
      width: 8px;
      height: 8px;
      border-right: 2px solid #ff6255;
      border-bottom: 2px solid #ff6255;
      transform: rotate(45deg);
      transition: transform var(--dur-normal) var(--ease-out-expo);
   }
   .lp-faq__item[open] summary::after { transform: rotate(-135deg); }
   .lp-faq__item .lp-faq__a,
   .lp-faq__item p { font-size: 14px; line-height: 1.65; color: var(--ink-2); margin: 0; padding: 20px; }
   
   /* ============================================================
     13. FINAL CTA
     ============================================================ */
   /* ── Related links (internal cross-linking) ── */
   .lp-related-links {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 16px;
      margin-top: 24px;
   }
   .lp-related-links__card {
      display: block;
      padding: 20px 24px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--card-bg, #fff);
      text-decoration: none;
      color: inherit;
      transition: transform .15s, box-shadow .15s;
   }
   .lp-related-links__card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0,0,0,.08);
      text-decoration: none;
      color: inherit;
   }
   .lp-related-links__card strong {
      display: block;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 6px;
      color: var(--brand);
   }
   .lp-related-links__card span {
      font-size: 14px;
      color: var(--text-muted, #6b7280);
      line-height: 1.5;
   }
   [data-theme="dark"] .lp-related-links__card {
      background: var(--card-bg, #1e1e2e);
   }
   
   /* ── Compact related links variant (4-col) ── */
   .lp-related-links--compact {
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 10px;
   }
   .lp-related-links--compact .lp-related-links__card {
      padding: 14px 18px;
   }
   .lp-related-links--compact .lp-related-links__card strong {
      font-size: 14px;
      margin-bottom: 3px;
   }
   .lp-related-links--compact .lp-related-links__card span {
      font-size: 13px;
   }
   
   /* ── Links group title ── */
   .lp-links-group-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink-3);
      margin: 32px 0 8px;
   }
   .lp-links-group-title:first-of-type { margin-top: 0; }
   
   /* ============================================================
     REVIEW PLATFORM BADGES
     ============================================================ */
   .lp-review-badges {
      display: flex;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;
      margin-bottom: 40px;
   }
   .lp-review-badge {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 20px;
      border-radius: 8px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
   }
   .lp-review-badge__logo { flex-shrink: 0; }
   .lp-review-badge__info {
      display: flex;
      flex-direction: column;
      line-height: 1.3;
   }
   .lp-review-badge__info strong {
      font-size: 13px;
      font-weight: 600;
      color: #fff;
   }
   .lp-review-badge__info span {
      font-size: 13px;
      color: rgba(255,255,255,0.7);
   }
   .lp-review-badge__count {
      font-size: 12px;
      opacity: 0.6;
   }
   @media (max-width: 600px) {
      .lp-review-badges { gap: 10px; }
      .lp-review-badge { padding: 10px 14px; gap: 8px; }
      .lp-review-badge__info strong,
      .lp-review-badge__info span { font-size: 12px; }
   }
   
   /* ============================================================
     RESELLER & API SECTION
     ============================================================ */
   .lp-reseller__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 20px;
   }
   .lp-reseller__card {
      padding: 28px 24px;
      border-radius: 12px;
      border: 1px solid var(--line);
      border-top: 3px solid var(--brand);
      background: var(--bg-1);
      box-shadow: var(--shadow-1);
      transition: transform var(--dur-normal) var(--ease-out-expo),
                  box-shadow var(--dur-normal) var(--ease-out-expo);
   }
   .lp-reseller__card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-brand-lg);
   }
   .lp-reseller__icon {
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: var(--brand-soft);
      margin-bottom: 16px;
   }
   .lp-reseller__card h3 {
      font-size: 16px;
      font-weight: 600;
      margin: 0 0 8px;
      color: var(--shell-icon);
   }
   .lp-reseller__card p {
      font-size: 14px;
      line-height: 1.6;
      color: var(--ink-2);
      margin: 0;
   }
   [data-theme="dark"] .lp-reseller__card {
      background: var(--bg-2);
      border-color: var(--line);
   }
   [data-theme="dark"] .lp-reseller__icon {
      background: rgba(240,101,67,0.12);
   }
   
   /* ============================================================
     FREE TOOLS GRID
     ============================================================ */
   .lp-tools-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
   }
   .lp-tool-card {
      display: flex;
      flex-direction: column;
      padding: 24px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: var(--bg-1);
      text-decoration: none;
      color: inherit;
      transition: transform .15s, box-shadow .15s, border-color .15s;
   }
   .lp-tool-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-2);
      border-color: var(--brand);
      text-decoration: none;
      color: inherit;
   }
   .lp-tool-card__icon {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: var(--brand-soft);
      color: var(--brand);
      margin-bottom: 14px;
   }
   .lp-tool-card strong {
      font-size: 15px;
      font-weight: 600;
      color: var(--ink-1);
      margin-bottom: 6px;
   }
   .lp-tool-card span {
      font-size: 13px;
      line-height: 1.5;
      color: var(--ink-2);
   }
   [data-theme="dark"] .lp-tool-card {
      background: var(--bg-2);
   }
   [data-theme="dark"] .lp-tool-card__icon {
      background: rgba(240,101,67,0.12);
   }
   
   /* ============================================================
     HOW SMM PANELS WORK — atmospheric section
     ============================================================ */
   .lp-works {
      position: relative;
      padding: var(--space-section) 0;
      overflow: hidden;
      background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-3) 100%);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
   }
   
   /* Floating glow orbs (hidden for clean alternating bg) */
   .lp-works__bg {
      display: none;
   }
   .lp-works__orb {
      position: absolute; border-radius: 50%;
      filter: blur(100px); opacity: 0.3;
   }
   .lp-works__orb--a {
      width: 420px; height: 420px; top: -80px; right: -60px;
      background: radial-gradient(circle, rgba(240,101,67,0.4), transparent 70%);
      animation: lp-orb-drift 14s ease-in-out infinite alternate;
   }
   .lp-works__orb--b {
      width: 360px; height: 360px; bottom: -100px; left: -40px;
      background: radial-gradient(circle, rgba(251,191,36,0.25), transparent 70%);
      animation: lp-orb-drift 18s ease-in-out infinite alternate-reverse;
   }
   .lp-works__orb--c {
      width: 280px; height: 280px; top: 40%; left: 50%;
      background: radial-gradient(circle, rgba(240,101,67,0.2), transparent 70%);
      animation: lp-orb-drift 12s ease-in-out infinite alternate;
   }
   [data-theme="dark"] .lp-works__orb { opacity: 0.18; }
   @keyframes lp-orb-drift {
      0%   { transform: translate(0, 0); }
      100% { transform: translate(30px, -20px); }
   }
   
   /* Section tag pill */
   .lp-works__tag {
      display: inline-block;
      font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
      color: var(--brand);
      background: var(--brand-soft);
      padding: 5px 14px; border-radius: 20px;
      margin-bottom: 14px;
   }
   [data-theme="dark"] .lp-works__tag {
      background: rgba(224,90,58,0.12);
   }
   
   /* 3×2 card grid */
   .lp-works__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
   }
   
   /* Individual card */
   .lp-works__card {
      position: relative;
      border-radius: 16px;
      padding: 32px 26px 28px;
      overflow: hidden;
      background: rgba(255,255,255,0.72);
      border: 1px solid rgba(229,231,235,0.7);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: transform 0.25s cubic-bezier(0.16,1,0.3,1),
                  box-shadow 0.25s cubic-bezier(0.16,1,0.3,1),
                  border-color 0.2s;
   }
   .lp-works__card::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--brand) 0%, #f5874e 60%, rgba(251,191,36,0.6) 100%);
      opacity: 0;
      transition: opacity 0.25s;
   }
   .lp-works__card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 48px rgba(240,101,67,0.10), 0 4px 12px rgba(0,0,0,0.04);
      border-color: rgba(240,101,67,0.25);
   }
   .lp-works__card:hover::before { opacity: 1; }
   
   /* Dark card */
   [data-theme="dark"] .lp-works__card {
      background: rgba(28,33,51,0.7);
      border-color: rgba(37,43,56,0.8);
   }
   [data-theme="dark"] .lp-works__card:hover {
      box-shadow: 0 16px 48px rgba(224,90,58,0.08), 0 4px 12px rgba(0,0,0,0.2);
      border-color: rgba(224,90,58,0.3);
   }
   
   /* Large watermark number */
   .lp-works__watermark {
      position: absolute;
      top: -8px; right: 8px;
      font-size: 96px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -0.04em;
      color: var(--brand);
      opacity: 0.06;
      pointer-events: none;
      user-select: none;
   }
   [data-theme="dark"] .lp-works__watermark { opacity: 0.07; }
   
   /* Card content */
   .lp-works__card-inner { position: relative; z-index: 1; }
   .lp-works__title {
      font-size: 16px; font-weight: 700;
      color: var(--ink-1);
      margin: 0 0 8px; line-height: 1.35;
   }
   .lp-works__desc {
      font-size: 14px; line-height: 1.65;
      color: var(--ink-2); margin: 0;
   }
   
   /* Responsive */
   @media (max-width: 900px) {
      .lp-works__grid { grid-template-columns: repeat(2, 1fr); }
   }
   @media (max-width: 600px) {
      .lp-works__grid { grid-template-columns: 1fr; gap: 14px; }
      .lp-works__card { padding: 26px 20px 22px; }
      .lp-works__watermark { font-size: 72px; top: -4px; }
   }
   
   /* ============================================================
     EDITORIAL GUIDE — two-column prose
     ============================================================ */
   .lp-editorial {
      max-width: 960px;
      margin: 0 auto;
   }
   .lp-editorial__head {
      text-align: center;
      margin-bottom: 40px;
   }
   .lp-editorial__h2 {
      font-size: clamp(24px, 3.5vw, 34px);
      font-weight: 700;
      color: var(--ink-1);
      margin: 0;
      line-height: 1.2;
      letter-spacing: -0.02em;
   }
   .lp-editorial__cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
   }
   .lp-editorial__col {
      border-top: 3px solid var(--brand);
      padding-top: 24px;
   }
   .lp-editorial__h3 {
      font-size: 16px; font-weight: 700;
      color: var(--shell-icon);
      margin: 0 0 8px; line-height: 1.35;
   }
   .lp-editorial__col h3 + p { margin-top: 0; }
   .lp-editorial__col p {
      font-size: 14.5px; line-height: 1.72;
      color: var(--ink-2);
      margin: 0 0 24px;
   }
   .lp-editorial__col p:last-child { margin-bottom: 0; }
   .lp-editorial__col strong { color: var(--ink-1); }
   
   @media (max-width: 700px) {
      .lp-editorial__cols { grid-template-columns: 1fr; gap: 32px; }
   }
   
   /* ============================================================
     RESPONSIVE
     ============================================================ */
   @media (max-width: 1080px) {
      .lp-hero__inner    { grid-template-columns: 1fr; gap: 40px; }
      .lp-hero__pitch    { text-align: center; }
      .lp-hero__sub-block { margin-left: auto; margin-right: auto; }
      .lp-hero__cta-bar  { justify-content: center; }
      .lp-hero__stats    { justify-content: center; }
      .lp-hero__visual   { order: -1; }
      .lp-hero__image    { max-width: 480px; }
   }
   @media (max-width: 760px) {
      .lp-h1             { font-size: 28px; }
      .lp-h2             { font-size: 28px; }
      .lp-hero           { padding: 48px 0 72px; }
      .lp-hero__stats    { gap: 12px !important; flex-wrap: nowrap; }
      .lp-hero__stat + .lp-hero__stat { padding-left: 12px; }
      .lp-hero__stat strong { font-size: 14px; }
      .lp-hero__stat span   { font-size: 10px; }
      .lp-hero__cta-bar  { flex-direction: column; align-items: stretch; padding-left: 40px; padding-right: 40px; }
      .lp-hero__cta-bar .lp-cta { justify-content: center; width: 100%; }
      .lp-faq__grid     { grid-template-columns: 1fr; }
      .lp-services__head { display: none; }
      .lp-services__row {
          grid-template-columns: 1fr auto;
          grid-template-areas:
            "id    price"
            "name  name"
            "range cta";
          gap: 8px;
      }
      .lp-services__id    { grid-area: id; }
      .lp-services__price { grid-area: price; text-align: right; }
      .lp-services__name  { grid-area: name; }
      .lp-services__range { grid-area: range; }
      .lp-services__cta   { grid-area: cta; }
      .lp-section__head   { display: block; }
      .lp-section__head--center { text-align: center; }
   }
   
   /* ============================================================
     Landing page full-bleed within .public-shell.
     .public-shell has 32px top/bottom + 16px left/right padding.
     When .lp is present we (a) zero the parent's padding via :has()
     and (b) use negative margins as fallback for older browsers.
     ============================================================ */
   
   .public-shell:has(> .lp) {
      padding: 0;
      min-height: 0;
      background: var(--bg-1);
      flex-direction: column;
      align-items: stretch;
   }
   
   /* Free trial pages — same full-bleed column treatment */
   .public-shell:has(> .ft-breadcrumb) {
      padding: 0;
      min-height: 0;
      background: var(--bg-1);
      flex-direction: column;
      align-items: stretch;
   }
   
   /* Negative-margin fallback for browsers without :has() */
   .lp {
      width: calc(100% + 32px);
      margin-top: -32px;
      margin-bottom: -32px;
      margin-left: -16px;
      margin-right: -16px;
      background: var(--bg-1);
   }
   
   /* When :has() is supported, the parent padding is already 0 — reset margins and fill full width */
   .public-shell:has(> .lp) .lp {
      margin: 0;
      width: 100%;
   }
   
   /* Hide the public-navbar on landing so the hero is the first thing */
   .lp ~ * { /* nothing — kept for clarity */ }
   
   .lp-platform:focus,
   .lp-platform:focus-within { outline: 0; }
   
   /* ============================================================
     Density overrides — hero glow, metrics, eyebrow visibility
     ============================================================ */
   
   .lp-hero__metrics {
      font-size: 13px;
      margin-bottom: 24px;
      color: var(--ink-2);
   }
   .lp-hero__metrics strong { color: var(--ink-1); font-weight: 600; }
   .lp-hero__metrics .lp-sep {
      margin: 0 10px;
      color: var(--line);
   }
   
   /* Section eyebrows — visible for visual hierarchy */
   .lp-section__head .lp-eyebrow,
   .lp-section__head--center .lp-eyebrow,
   .lp-section__head--center .lp-eyebrow--on-dark { display: inline-flex; }
   
   /* Eyebrow chip — keep but smaller */
   .lp-eyebrow {
      font-size: 11px;
      padding: 4px 10px;
      margin-bottom: 14px;
   }
   
   /* Responsive tweaks */
   @media (max-width: 1080px) {
      .lp-faq__grid { grid-template-columns: 1fr; }
   }
   
   /* ============================================================
     New landing sections — hero CTAs, why-not panel,
     live order feed, dashboard preview
     ============================================================ */
   
   /* Hero CTAs (above metrics) */
   .lp-hero__ctas {
      display: flex; flex-wrap: wrap; gap: 10px;
      margin: 18px 0 18px;
   }
   .lp-hero__inner.lp-hero__inner--centered .lp-hero__ctas { justify-content: center; }
   .lp-hero__inner.lp-hero__inner--centered .lp-hero__metrics { justify-content: center; }
   .lp-hero__inner.lp-hero__inner--centered .lp-hero__trust-strip { justify-content: center; }
   .lp-hero__inner.lp-hero__inner--centered .lp-eyebrow { margin-left: auto; margin-right: auto; }
   .lp-cta {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 0 24px;
      height: 50px;
      border-radius: 8px;
      font-size: 16px; font-weight: 700;
      text-decoration: none;
      transition: background var(--dur-fast) ease,
                  border-color var(--dur-fast) ease,
                  box-shadow var(--dur-normal) var(--ease-out-expo),
                  transform var(--dur-fast) ease;
      line-height: 1;
   }
   .lp-cta:active { transform: scale(0.97); }
   .lp-cta svg {
      color: var(--shell-coral);
   }
   .lp-cta--primary {
      background: var(--brand);
      color: #fff;
      border: 1px solid var(--brand);
      box-shadow: 0 2px 8px rgba(240,101,67,.20), 0 4px 14px rgba(240,101,67,.12);
   }
   .lp-cta--primary:hover {
      background: var(--brand-2); border-color: var(--brand-2);
      color: #fff; text-decoration: none;
      transform: translateY(-2px);
      box-shadow: var(--shadow-brand-lg);
   }
   .lp-cta--primary svg { transition: transform .15s; }
   .lp-cta--primary:hover svg { transform: translateX(2px); }
   .lp-cta--secondary {
      background: #fff;
      color: var(--ink-1);
      border: 1px solid var(--line);
   }
   .lp-cta--secondary.lp-cta--secondary-no-bg {
      background: transparent;
      color: var(--ink-1);
      border: 1px solid var(--line-3);
   }
   .lp-cta--secondary:hover {
      background: var(--bg-2);
      color: var(--ink-1);
      text-decoration: none;
      border-color: var(--ink-3);
   }
   /* Glow pulse for free-trial CTA */
   @keyframes ctaGlow {
      0%, 100% { box-shadow: 0 0 8px rgba(240,101,67,0.4), 0 0 24px rgba(240,101,67,0.15); }
      50%      { box-shadow: 0 0 16px rgba(240,101,67,0.6), 0 0 40px rgba(240,101,67,0.25); }
   }
   .lp-cta--glow {
      background: var(--brand);
      color: #fff;
      border: 1px solid var(--brand);
      animation: ctaGlow 2s ease-in-out infinite;
   }
   .lp-cta--glow:hover {
      background: var(--brand-dark, #c4421f);
      color: #fff;
      border-color: var(--brand-dark, #c4421f);
      text-decoration: none;
      animation: none;
      box-shadow: 0 0 20px rgba(240,101,67,0.5);
   }
   [data-theme="dark"] .lp-cta--glow {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
   }
   [data-theme="dark"] .lp-cta--glow:hover {
      background: var(--brand-dark, #c4421f);
      color: #fff;
      border-color: var(--brand-dark, #c4421f);
   }
   @media (prefers-reduced-motion: reduce) {
      .lp-cta--glow { animation: none; box-shadow: 0 0 12px rgba(240,101,67,0.3); }
   }
   
   /* Shine sweep animation for CTA */
   @keyframes ctaShine {
      0%   { left: -100%; }
      20%  { left: 100%; }
      100% { left: 100%; }
   }
   .lp-cta--shine {
      position: relative;
      overflow: hidden;
      background: var(--brand);
      color: #fff;
      border: 1px solid var(--brand);
      box-shadow: 0 2px 8px rgba(240,101,67,.20), 0 4px 14px rgba(240,101,67,.12);
   }
   .lp-cta--shine::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(
          90deg,
          transparent 0%,
          rgba(255,255,255,0.08) 20%,
          rgba(255,255,255,0.35) 50%,
          rgba(255,255,255,0.08) 80%,
          transparent 100%
      );
      transform: skewX(-20deg);
      animation: ctaShine 3s ease-in-out infinite;
      pointer-events: none;
   }
   .lp-cta--shine:hover {
      background: var(--brand-2); border-color: var(--brand-2);
      color: #fff; text-decoration: none;
      transform: translateY(-2px);
      box-shadow: var(--shadow-brand-lg);
   }
   .lp-cta--shine:hover::after { animation-play-state: paused; }
   @media (prefers-reduced-motion: reduce) {
      .lp-cta--shine::after { animation: none; display: none; }
   }
   .lp-cta--wide {
      padding: 15px 44px;
      font-size: 16px;
      letter-spacing: 0.01em;
   }
   
   /* ── Glass / Liquid CTA ── */
   .lp-glass-wrap {
      position: relative;
      display: inline-flex;
      border-radius: 12px;
      overflow: hidden;
      isolation: isolate;
   }
   .lp-glass-wrap__distort {
      position: absolute;
      inset: 0;
      z-index: -1;
      filter: url(#glass-distort);
      background: color-mix(in oklch, var(--brand) 25%, transparent);
      opacity: 0.55;
      pointer-events: none;
      border-radius: inherit;
      transition: opacity var(--dur-normal, 300ms) var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
   }
   .lp-glass-wrap:hover .lp-glass-wrap__distort {
      opacity: 0.75;
   }
   .lp-cta--glass {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(240,101,67,0.15);
      -webkit-backdrop-filter: blur(14px) saturate(1.6);
      backdrop-filter: blur(14px) saturate(1.6);
      color: var(--brand);
      font-weight: 700;
      border: 1.5px solid rgba(240,101,67,0.30);
      border-radius: 12px;
      box-shadow:
          0 0 6px rgba(0,0,0,0.03),
          0 2px 6px rgba(0,0,0,0.08),
          inset 1px 1px 1px -0.5px rgba(255,255,255,0.45),
          inset -1px -1px 1px -0.5px rgba(0,0,0,0.08),
          inset 0 0 8px 4px rgba(240,101,67,0.06),
          0 0 16px rgba(240,101,67,0.12);
      text-decoration: none;
      transition:
          background var(--dur-fast, 150ms) ease,
          border-color var(--dur-fast, 150ms) ease,
          box-shadow var(--dur-normal, 300ms) var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
          transform var(--dur-fast, 150ms) ease,
          color var(--dur-fast, 150ms) ease;
   }
   .lp-cta--glass:hover {
      background: rgba(240,101,67,0.25);
      border-color: rgba(240,101,67,0.50);
      color: var(--brand);
      text-decoration: none;
      transform: translateY(-2px);
      box-shadow:
          0 0 8px rgba(0,0,0,0.04),
          0 4px 12px rgba(0,0,0,0.10),
          inset 1px 1px 2px -0.5px rgba(255,255,255,0.5),
          inset -1px -1px 2px -0.5px rgba(0,0,0,0.10),
          inset 0 0 12px 6px rgba(240,101,67,0.10),
          0 0 28px rgba(240,101,67,0.20);
   }
   .lp-cta--glass:active { transform: scale(0.97); }
   .lp-cta--glass svg { transition: transform 0.15s; }
   .lp-cta--glass:hover svg { transform: translateX(3px); }
   [data-theme="dark"] .lp-cta--glass {
      background: rgba(240,101,67,0.12);
      border-color: rgba(240,101,67,0.35);
      color: #ff8a65;
      box-shadow:
          0 0 8px rgba(0,0,0,0.06),
          0 2px 6px rgba(0,0,0,0.15),
          inset 1px 1px 1px -0.5px rgba(255,255,255,0.08),
          inset -1px -1px 1px -0.5px rgba(0,0,0,0.3),
          inset 0 0 10px 5px rgba(240,101,67,0.08),
          0 0 20px rgba(240,101,67,0.15);
   }
   [data-theme="dark"] .lp-cta--glass:hover {
      background: rgba(240,101,67,0.22);
      border-color: rgba(240,101,67,0.55);
      color: #ffab91;
      box-shadow:
          0 0 10px rgba(0,0,0,0.08),
          0 4px 14px rgba(0,0,0,0.18),
          inset 1px 1px 2px -0.5px rgba(255,255,255,0.12),
          inset -1px -1px 2px -0.5px rgba(0,0,0,0.35),
          inset 0 0 14px 7px rgba(240,101,67,0.12),
          0 0 32px rgba(240,101,67,0.22);
   }
   @media (prefers-reduced-motion: reduce) {
      .lp-glass-wrap__distort { filter: none; }
   }
   
   /* Hero CTA bar — primary + secondary buttons */
   .lp-hero__cta-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 24px;
      flex-wrap: wrap;
   }
   .lp-hero__video-thumb {
      position: relative;
      width: 120px;
      height: 68px;
      border-radius: 8px;
      overflow: hidden;
      border: 2px solid var(--line);
      cursor: pointer;
      background: var(--bg-2);
      flex-shrink: 0;
      transition: border-color .2s, box-shadow .2s;
   }
   .lp-hero__video-thumb:hover {
      border-color: var(--brand);
      box-shadow: 0 2px 12px rgba(240,101,67,.18);
   }
   .lp-hero__video-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
   }
   .lp-hero__video-img--dark { display: none; }
   [data-theme="dark"] .lp-hero__video-img--light { display: none; }
   [data-theme="dark"] .lp-hero__video-img--dark  { display: block; }
   .lp-hero__video-play {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.35);
      transition: background .2s;
   }
   .lp-hero__video-thumb:hover .lp-hero__video-play {
      background: rgba(0,0,0,0.5);
   }
   .lp-hero__video-play svg {
      filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
   }
   
   /* Avatar stack */
   .lp-hero__social-proof {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
   }
   .lp-hero__avatars {
      display: flex;
   }
   .lp-hero__avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2px solid #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: -8px;
   }
   .lp-hero__avatar:first-child { margin-left: 0; }
   [data-theme="dark"] .lp-hero__avatar { border-color: var(--bg-1); }
   .lp-hero__trusted-text {
      font-size: 13px;
      color: var(--ink-2);
      white-space: nowrap;
   }
   .lp-hero__trusted-text strong {
      color: var(--ink-1);
      font-weight: 700;
   }
   
   @media (max-width: 600px) {
      .lp-hero__cta-bar { gap: 14px; }
      .lp-hero__video-thumb { width: 90px; height: 52px; }
      .lp-hero__avatar { width: 28px; height: 28px; }
      .lp-hero__trusted-text { font-size: 12px; }
      .lp-hero__cta-bar .lp-cta { font-size: 13px; padding: 11px 18px; }
   }
   @media (max-width: 420px) {
      .lp-hero__cta-bar {
          flex-direction: column;
          gap: 12px;
      }
      .lp-hero__social-proof { order: -1; }
   }
   
   .lp-cta--outline {
      background: transparent;
      color: var(--ink-1);
      border: 1.5px solid var(--line);
   }
   .lp-cta--outline:hover {
      background: var(--bg-2);
      border-color: var(--brand);
      color: var(--brand);
      text-decoration: none;
   }
   
   /* WHY NOT — comparison panel */
   .lp-why__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
   }
   .lp-why__col--bad {
      background: #fef9f9;
      border-color: #fde0e0;
   }
   .lp-why__col--good {
      background: #f4f9f4;
      border-color: #d4ebd4;
   }
   .lp-why__h {
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid currentColor;
      border-bottom-color: rgba(0,0,0,0.06);
   }
   .lp-why__col--bad .lp-why__h { color: #b91c1c; }
   .lp-why__col--good .lp-why__h { color: #166534; }
   .lp-why__list {
      list-style: none; margin: 0; padding: 0;
      display: flex; flex-direction: column; gap: 10px;
   }
   .lp-why__list li {
      display: grid;
      grid-template-columns: 18px 1fr;
      gap: 10px;
      font-size: 13.5px;
      line-height: 1.5;
      color: var(--ink-2);
      align-items: start;
   }
   .lp-why__x, .lp-why__c {
      display: inline-flex; align-items: center; justify-content: center;
      width: 18px; height: 18px;
      border-radius: 50%;
      font-size: 11px; font-weight: 700;
      margin-top: 1px;
   }
   .lp-why__x {
      background: #fee2e2;
      color: #b91c1c;
   }
   .lp-why__c {
      background: #d1fae5;
      color: #065f46;
   }
   .lp-why__sub-heading {
      font-size: 20px;
      font-weight: 600;
      color: var(--ink-1);
      letter-spacing: -0.01em;
      margin: 48px 0 20px;
      text-align: center;
   }
   .lp-why__features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
   }
   .lp-why__feat {
      display: flex;
      gap: 14px;
      padding: 20px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--bg-1);
      transition: border-color var(--dur-fast) ease,
                  box-shadow var(--dur-normal) var(--ease-out-expo),
                  transform var(--dur-normal) var(--ease-out-expo);
   }
   .lp-why__feat-icon {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: var(--brand-soft);
      color: var(--brand);
   }
   .lp-why__feat-icon--lottie {
      width: 64px;
      height: 64px;
      background: none;
      border-radius: 0;
   }
   .lp-why__feat-icon--lottie svg {
      width: 100% !important;
      height: 100% !important;
   }
   .lp-why__feat-text {
      display: flex;
      flex-direction: column;
      gap: 4px;
   }
   .lp-why__feat-text strong {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
   }
   .lp-why__feat-text span {
      font-size: 13px;
      line-height: 1.55;
      color: var(--ink-2);
   }
   
   /* Feature card depth — left border accent + coral hover + lift */
   .lp-why__feat {
      background: var(--bg-1);
      border: 1px solid var(--line);
      border-left: 3px solid var(--brand);
      box-shadow: var(--shadow-1);
      transition: transform var(--dur-normal) var(--ease-out-expo),
                  box-shadow var(--dur-normal) var(--ease-out-expo),
                  border-color var(--dur-fast) ease;
   }
   .lp-why__feat:hover {
   border-color: var(--brand);
   transform: translateY(-4px);
   border-left-color: var(--brand-2, var(--brand));
   box-shadow: var(--shadow-brand-lg);
   }
   
   /* Warm section tint */
   .lp-section--warm {
      background: linear-gradient(180deg, #fff3ee 0%, #ffede4 100%);
      border-top: 1px solid #fde0d2;
      border-bottom: 1px solid #fde0d2;
   }
   [data-theme="dark"] .lp-section--warm { background: #1e1410; border-color: rgba(240,101,67,0.12); }
   
   /* PROOF — live feed + dashboard preview side by side */
   .lp-proof__grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 16px;
   }
   
   /* Live feed */
   .lp-feed {
      background: transparent;
      border: none;
      border-radius: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 30px 0;
   }
   .lp-feed__head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 20px 16px;
      background: #E3E5E6;
      border-radius: 8px;
   }
   .lp-feed__title {
      font-size: 14px;
      font-weight: 400;
      color: var(--ink-1);
   }
   .lp-feed__hint {
      margin-left: auto;
      color: var(--ink-3);
      font-size: 14px;
   }
   .lp-feed__rows {
      display: flex;
      flex-direction: column;
      overflow: hidden;
   }
   .lp-feed__row {
      display: grid;
      grid-template-columns: 0.30fr 5fr 1fr 1fr 1fr;
      gap: 30px;
      padding: 5px 16px 15px 16px;
      align-items: center;
      border-bottom: 1px solid #CCCCCC;
      font-size: 14px;
      transition: opacity 0.4s ease, transform 0.4s ease;
   }
   .lp-feed__row--enter {
      opacity: 0;
      transform: translateY(-6px);
   }
   .lp-feed__row--exit {
      opacity: 0;
      transform: translateY(20%);
      pointer-events: none;
      height: 0 !important;
      min-height: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      overflow: hidden;
   }
   .lp-feed__row:last-child { border-bottom: 0; }
   .lp-feed__row:hover { background: var(--bg-2); }
   .lp-feed__id {
      color: var(--ink-3);
      font-size: 14px;
   }
   .lp-feed__svc {
      color: var(--ink-1);
      font-weight: 600;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
   }
   .lp-feed__qty {
      text-align: right;
      color: var(--ink-2);
      font-size: 14px;
   }
   .lp-feed__pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 700;
      border: 1px solid rgba(0,0,0,0.08);
      justify-self: start;
      white-space: nowrap;
   }
   .lp-pill--ok     { background: #E6FFEE; color: #29663D; }
   .lp-pill--prog   { background: #E6F2FF; color: #294766; }
   .lp-pill--refill { background: #ede9fe; color: #6d28d9; }
   .lp-pill--part   { background: #FFEEE6; color: #663E29; }
   .lp-feed__time {
      color: var(--ink-3);
      font-size: 14px;
      text-align: right;
   }
   
   /* Dashboard preview */
   .lp-dashprev {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
   }
   .lp-dashprev__head {
      display: flex; align-items: center;
      padding: 12px 16px;
      background: var(--bg-2);
      border-bottom: 1px solid var(--line);
   }
   .lp-dashprev__title {
      font-size: 12px; font-weight: 600;
      color: var(--ink-1);
   }
   .lp-dashprev__hint {
      margin-left: auto;
      color: var(--ink-3);
      font-size: 12px;
   }
   .lp-dashprev__body {
      padding: 18px;
      flex: 1;
      display: flex; flex-direction: column; gap: 16px;
   }
   .lp-dashprev__balance {
      padding: 14px 16px;
      background: linear-gradient(135deg, rgba(240,101,67,0.06), rgba(240,101,67,0.02));
      border: 1px solid rgba(240,101,67,0.18);
      border-radius: 8px;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 4px 12px;
      align-items: baseline;
   }
   .lp-dashprev__balance-lbl {
      font-size: 10.5px; font-weight: 600;
      color: var(--ink-3);
   }
   .lp-dashprev__balance-val {
      font-size: 22px; font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--ink-1);
      text-align: right;
   }
   .lp-dashprev__balance-tier {
      grid-column: 1 / -1;
      font-size: 11.5px;
      color: var(--brand);
      font-weight: 500;
   }
   .lp-dashprev__stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
   }
   .lp-dashprev__stat {
      padding: 10px 12px;
      background: var(--bg-2);
      border-radius: 6px;
      display: flex; flex-direction: column; gap: 2px;
   }
   .lp-dashprev__stat-num {
      font-size: 16px; font-weight: 700;
      color: var(--ink-1);
      letter-spacing: -0.01em;
      line-height: 1.1;
   }
   .lp-dashprev__stat-lbl {
      font-size: 10.5px;
      color: var(--ink-3);
   }
   .lp-dashprev__chart {
      margin-top: auto;
      background: var(--bg-2);
      border-radius: 6px;
      padding: 12px;
      position: relative;
   }
   .lp-dashprev__chart svg {
      width: 100%; height: 80px; display: block;
   }
   .lp-dashprev__chart-lbl {
      margin-top: 6px;
      font-size: 11px;
      color: var(--ink-3);
      font-weight: 500;
   }
   
   /* Responsive */
   @media (max-width: 1080px) {
      .lp-why__grid,
      .lp-why__features,
      .lp-proof__grid {
          grid-template-columns: 1fr;
      }
   }
   @media (max-width: 700px) {
      .lp-feed__row {
          grid-template-columns: 36px 1fr 90px;
          grid-template-rows: auto auto;
          gap: 4px 12px;
          padding: 12px 16px;
      }
      .lp-feed__id  { grid-column: 1; grid-row: 1 / 3; align-self: center; }
      .lp-feed__svc { grid-column: 2; grid-row: 1; }
      .lp-feed__pill { grid-column: 3; grid-row: 1; justify-self: end; }
      .lp-feed__time { grid-column: 3; grid-row: 2; justify-self: end; }
      .lp-feed__qty { display: none; }
      .lp-feed__head { padding: 12px 16px; }
   }
   
   /* ============================================================
     Platform logos — branded colors per platform.
     Logo sits as 36px rounded chip top-left of card.
     ============================================================ */
   
   .lp-platform {
      display: flex !important;
      flex-direction: column;
      gap: 6px;
      padding: 16px 18px !important;
      position: relative;
   }
   .lp-platform__logo {
      width: 36px;
      height: 36px;
      border-radius: 9px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 6px;
      flex-shrink: 0;
   }
   .lp-platform__logo svg {
      width: 20px;
      height: 20px;
      display: block;
   }
   
   @keyframes icon-shake {
      0%, 100% { transform: rotate(0deg); }
      15% { transform: rotate(12deg); }
      30% { transform: rotate(-10deg); }
      45% { transform: rotate(8deg); }
      60% { transform: rotate(-6deg); }
      75% { transform: rotate(3deg); }
   }
   .lp-platform:hover .lp-platform__logo {
      animation: icon-shake 0.5s ease-in-out;
   }
   
   /* Per-platform colors */
   .lp-plogo--ig {
      background: linear-gradient(180deg, #D83CFF 0%, #FF98A6 100%);
      color: #fff;
   }
   .lp-plogo--tt {
      background: #000;
      color: #fff;
      position: relative;
   }
   .lp-plogo--tt::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(37,244,238,0.22), rgba(254,44,85,0.22));
      pointer-events: none;
   }
   .lp-plogo--yt {
      background: #ff0000;
      color: #fff;
   }
   .lp-plogo--x {
      background: #000;
      color: #fff;
   }
   .lp-plogo--sp {
      background: #1db954;
      color: #fff;
   }
   .lp-plogo--tg {
      background: linear-gradient(135deg, #2aabee, #229ed9);
      color: #fff;
   }
   .lp-plogo--fb {
      background: #1877f2;
      color: #fff;
   }
   .lp-plogo--tw {
      background: #9146ff;
      color: #fff;
   }
   
   /* Platform card transition (single source of truth) */
   .lp-platform { transition: border-color .15s, box-shadow .15s, transform .15s; }
   
   /* On mobile, single-column compact horizontal cards */
   @media (max-width: 600px) {
      .lp-platforms {
          grid-template-columns: 1fr !important;
          gap: 8px;
      }
      .lp-platform {
          flex-direction: row;
          align-items: center;
          flex-wrap: nowrap;
          gap: 12px;
          padding: 12px 16px !important;
      }
      .lp-platform__logo { margin-bottom: 0; flex-shrink: 0; }
      .lp-platform__name {
          flex: 1;
          min-width: 0;
          font-size: 15px;
          margin-bottom: 0;
      }
      .lp-platform__count {
          display: none;
      }
      .lp-platform__price {
          margin-top: 0;
          margin-left: auto;
          flex-shrink: 0;
          padding: 6px 10px;
      }
      .lp-platform__price-amount { font-size: 18px; }
      .lp-platform__price-unit { font-size: 10px; }
   }
   
   /* ============================================================
     LIGHT-SAAS REFRESH — May 2026
     - hero: pitch left, light stat cards right
     - sign-in moved out of hero, lives as a horizontal bar below
     - dark stats band hidden, dark final CTA + trust pillars lightened
     ============================================================ */
   
   /* Hero H1 gradient accent — "When your growth" */
   .lp-h1-accent {
      font-weight: 700;
      background: linear-gradient(90deg, #ff6255, #ff8d64);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
   }
   
   /* Hero sub-block (two description lines) */
   .lp-hero__sub-block {
      display: flex;
      flex-direction: column;
      margin-top: 10px;
      margin-bottom: 60px;
      max-width: 650px;
   }
   .lp-hero__sub-line1 {
      font-size: 20px;
      font-weight: 400;
      line-height: 30px;
      color: var(--ink-2);
      margin: 0;
   }
   .lp-hero__sub-highlight {
      color: #29a0db;
      font-weight: 700;
   }
   .lp-hero__sub-line2 {
      font-size: 14px;
      font-weight: 700;
      line-height: 30px;
      color: var(--ink-2);
      margin: 0;
   }
   
   /* Hero accent line — "Test our delivery..." */
   .lp-hero__accent-line {
      font-size: 15px;
      font-weight: 700;
      color: var(--ink);
      margin: 0 0 20px;
   }
   .lp-hero__accent-green {
      color: #00BF80;
   }
   
   /* Hero gradient CTA button */
   .lp-cta--gradient {
      background: linear-gradient(90deg, #ff6255, #ff8d64);
      color: #fff;
      border: none;
      padding:13px 54px;
      border-radius: 8px;
      box-shadow: 0 8px 10px rgba(255,98,85,0.3);
      text-decoration: none;
      font-family: 'Inter';
      font-weight:700;
      cursor: pointer;
      gap:15px;
      margin:15px 0;
   }
   .lp-cta--gradient:hover {
      background: linear-gradient(90deg, #e8574b, #e67e5a);
      transform: translateY(-2px);
      box-shadow: 0 12px 20px rgba(255,98,85,0.35);
      color: #fff !important;
   }
   .lp-cta--gradient svg {
      color: #fff !important;
   }
   
   /* Hero stats bar */
   .lp-hero__stats {
      display: flex;
      gap: 32px;
      margin-top: 28px;
   }
   .lp-hero__stat {
      display: flex;
      flex-direction: column;
      gap: 2px;
   }
   .lp-hero__stat + .lp-hero__stat {
      border-left: 1px solid var(--line);
      padding-left: 32px;
   }
   .lp-hero__stat strong {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0;
      color: var(--ink-2);
   }
   .lp-hero__stat span {
      font-size: 12px;
      color: var(--ink-3);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: 400;
   }
   
   /* Hero right-column visual */
   .lp-hero__visual {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
   }
   .lp-hero__image {
      border-radius: 12px;
      width: 100%;
      max-width: 100%;
      height: auto;
   }
   
   /* Hero visual — animation container (right column) */
   .lp-hero__visual {
      display: flex;
      justify-content: center;
      /* align-self: center; */
   }
   
   /* Orbit animation — placeholder until Lottie is ready */
   .lp-orbit {
      position: relative;
      width: 340px;
      height: 340px;
      overflow: hidden; /* prevent orbit icons from overflowing into adjacent content */
   }
   .lp-orbit__center {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 64px; height: 64px;
      background: linear-gradient(135deg, var(--brand-strong), var(--brand), #f5874e);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: #fff;
      box-shadow: 0 8px 32px rgba(240,101,67,0.35);
   }
   .lp-orbit__ring {
      position: absolute;
      top: 50%; left: 50%;
      border: 1px dashed rgba(79,70,229,0.15);
      border-radius: 50%;
   }
   .lp-orbit__ring--outer {
      width: 300px; height: 300px;
      margin: -150px 0 0 -150px;
      animation: lp-spin 28s linear infinite;
   }
   .lp-orbit__ring--inner {
      width: 190px; height: 190px;
      margin: -95px 0 0 -95px;
      animation: lp-spin 20s linear infinite reverse;
   }
   .lp-orbit__icon {
      position: absolute;
      width: 44px; height: 44px;
      background: #fff;
      border: 1px solid #e7eaf3;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 16px rgba(15,23,42,0.08);
      padding: 10px;
   }
   /* Counter-rotate icons so they stay upright */
   .lp-orbit__ring--outer .lp-orbit__icon { animation: lp-counterspin 28s linear infinite; }
   .lp-orbit__ring--inner .lp-orbit__icon { animation: lp-counterspin 20s linear infinite reverse; }
   
   /* Position icons evenly around rings */
   .lp-orbit__ring--outer .lp-orbit__icon:nth-child(1) { top: -22px; left: 50%; margin-left: -22px; }
   .lp-orbit__ring--outer .lp-orbit__icon:nth-child(2) { top: 50%; right: -22px; margin-top: -22px; }
   .lp-orbit__ring--outer .lp-orbit__icon:nth-child(3) { bottom: -22px; left: 50%; margin-left: -22px; }
   .lp-orbit__ring--outer .lp-orbit__icon:nth-child(4) { top: 50%; left: -22px; margin-top: -22px; }
   
   .lp-orbit__ring--inner .lp-orbit__icon:nth-child(1) { top: -22px; left: 50%; margin-left: -22px; }
   .lp-orbit__ring--inner .lp-orbit__icon:nth-child(2) { bottom: -22px; right: 10%; }
   .lp-orbit__ring--inner .lp-orbit__icon:nth-child(3) { bottom: -22px; left: 10%; }
   
   /* Icon brand colors */
   .lp-orbit__icon--ig  { color: #E4405F; }
   .lp-orbit__icon--tg  { color: #26A5E4; }
   .lp-orbit__icon--tt  { color: #000; }
   .lp-orbit__icon--yt  { color: #FF0000; }
   .lp-orbit__icon--x   { color: #0f172a; }
   .lp-orbit__icon--sp  { color: #1DB954; }
   .lp-orbit__icon--fb  { color: #1877F2; }
   
   @keyframes lp-spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
   }
   @keyframes lp-counterspin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(-360deg); }
   }
   
   /* Lottie player — shows when you uncomment the element in twig */
   dotlottie-player, lottie-player {
      width: 100%;
      max-width: 480px;
   }
   
   /* Hide orbit when Lottie is active (add class to .lp-hero__visual) */
   .lp-hero__visual--lottie .lp-orbit { display: none; }
   
   /* Screen-reader only utility */
   .sr-only {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0,0,0,0); white-space: nowrap; border: 0;
   }
   
   /* ============================================================
     SIGN-IN BAR — inline form strip under hero
     ============================================================ */
   .lp-signinbar {
      padding: 60px 0;
      position: relative;
      z-index: 10;
      background: var(--bg-5);
   }
   
   /* Card container with SVG background */
   .lp-signinbar__card {
      position: relative;
      margin: 0 auto;
      padding: 110px 64px 80px 64px;
      aspect-ratio: 1440 / 316;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
   }
   .lp-signinbar__card::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('https://storage.perfectcdn.com/aedutt/kc774ajgneiq81k8.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      pointer-events: none;
      z-index: 0;
   }
   [data-theme="dark"] .lp-signinbar__card::after {
      opacity: 0.1;
   }
   
   /* Background wrapper — kept for markup compatibility */
   .lp-signinbar__bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
   }
   .lp-signinbar__curve {
      position: absolute;
   }
   .lp-signinbar__curve--outer {
      inset: 0;
      z-index: 0;
   }
   .lp-signinbar__curve--gradient {
      left: 56px;
      right: 56px;
      top: 68px;
      bottom: -14px;
      z-index: 1;
   }
   .lp-signinbar__curve--inner {
      left: 56px;
      right: 56px;
      top: 68px;
      bottom: 0;
      z-index: 2;
   }
   
   .lp-signinbar__content {
      position: relative;
      z-index: 1;
      max-width: 1020px;
      margin-left: auto;
      margin-right: auto;
      overflow: visible;
   }
   
   .lp-signinbar__alert {
      margin: 0 0 16px;
   }
   .lp-signinbar__row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      overflow: visible;
   }
   .lp-signinbar__field {
      position: relative;
      flex: 1;
      min-width: 200px;
      height: 48px;
      overflow: visible;
   }
   .lp-signinbar__input {
      width: 100%;
      height: 48px;
      padding: 0 16px;
      background: #f5f5f5;
      border: 1px solid #dbdbdb;
      border-radius: 12px;
      font-size: 14px;
      color: var(--ink-1);
      outline: none;
      box-shadow: none;
      transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
   }
   .lp-signinbar__input::placeholder { color: transparent; }
   .lp-signinbar__input:focus,
   .lp-signinbar__input:not(:placeholder-shown),
   .lp-signinbar__input:-webkit-autofill {
      background: var(--bg-1);
   }
   .lp-signinbar__input:focus,
   .lp-signinbar__input:focus-visible {
      border-color: #9EC5F0;
      outline: none;
      box-shadow: none;
   }
   .lp-signinbar__label {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 14px;
      font-weight: 500;
      color: var(--shell-icon);
      pointer-events: none;
      line-height: 1;
      z-index: 1;
      transition: top var(--dur-fast) ease, transform var(--dur-fast) ease,
                  font-size var(--dur-fast) ease, color var(--dur-fast) ease,
                  left var(--dur-fast) ease;
   }
   .lp-signinbar__field:focus-within .lp-signinbar__label,
   .lp-signinbar__field:has(.lp-signinbar__input:not(:placeholder-shown)) .lp-signinbar__label,
   .lp-signinbar__field:has(.lp-signinbar__input:-webkit-autofill) .lp-signinbar__label {
      top: 0;
      left: 0;
      transform: translateY(calc(-100% - 6px));
      font-size: 12px;
      color: var(--shell-item);
      background: transparent;
      padding: 0;
   }
   .lp-signinbar__input:-webkit-autofill,
   .lp-signinbar__input:-webkit-autofill:focus {
      background: var(--bg-1);
      -webkit-box-shadow: 0 0 0 1000px var(--bg-1) inset;
   }
   
   /* Gradient submit button */
   .lp-signinbar__submit--gradient {
      display: inline-flex;
      align-items: center;
      gap: 24px;
      height: 50px;
      padding: 0 24px;
      background: linear-gradient(90deg, #ff6255, #ff8d64);
      color: #fff;
      border: 0;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      transition: transform .15s, box-shadow .15s;
      box-shadow: 0 8px 10px rgba(255,98,85,0.2);
   }
   .lp-signinbar__submit--gradient:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 20px rgba(255,98,85,0.3);
   }
   
   /* Custom Google sign-in button */
   .lp-signinbar__google {
      display: inline-flex;
      align-items: center;
      gap: 24px;
      height: 50px;
      padding: 0 24px;
      background: #fff;
      color: var(--ink-1);
      border: 1px solid #888;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      transition: background .15s, border-color .15s;
   }
   .lp-signinbar__google:hover {
      background: #f8f8f8;
      border-color: var(--ink-2);
   }
   .lp-signinbar__google-inner {
      display: inline-flex;
      align-items: center;
      gap: 10px;
   }
   .lp-signinbar__google svg:last-child { flex-shrink: 0; }
   
   .lp-signinbar__meta {
      display: flex;
      align-items: center;
      gap: 40px;
      margin-top: 10px;
      flex-wrap: wrap;
   }
   .lp-signinbar__meta-left {
      font-size: 14px;
      color: #888;
   }
   .lp-signinbar__meta-link {
      color: var(--brand-3);
      text-decoration: none;
   }
   .lp-signinbar__meta-link:hover { text-decoration: underline; }
   .lp-signinbar__captcha {
      margin-top: 12px;
   }
   /* ── Google Sign-In toggle ──
     Desktop → icon-only square (44×44), sits inline next to Sign In
     Mobile  → full-width standard button with text               */
   .lp-gbtn-desk {
      display: flex !important;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      border-radius: 8px;
      overflow: hidden;
   }
   .lp-gbtn-mob {
      display: none !important;
   }
   
   /* ── Video lightbox modal ── */
   .lp-video-modal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease;
   }
   .lp-video-modal[aria-hidden="false"] {
      opacity: 1;
      pointer-events: auto;
   }
   .lp-video-modal__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.75);
   }
   .lp-video-modal__wrap {
      position: relative;
      width: 90vw;
      max-width: 900px;
      aspect-ratio: 16/9;
      border-radius: 16px;
      overflow: hidden;
      background: #000;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
      transform: scale(0.92);
      transition: transform .25s ease;
   }
   .lp-video-modal[aria-hidden="false"] .lp-video-modal__wrap {
      transform: scale(1);
   }
   .lp-video-modal__close {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 2;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      border: none;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s ease;
   }
   .lp-video-modal__close:hover { background: rgba(255,255,255,0.3); }
   .lp-video-modal__player {
      width: 100%;
      height: 100%;
   }
   .lp-video-modal__player iframe {
      width: 100%;
      height: 100%;
      border: 0;
   }
   
   /* ============================================================
     GLOBAL SOFTENING — radii, shadows, brand accent
     ============================================================ */
   
   /* CTA radii — consistent 8px for all interactive elements */
   .lp-cta--primary  { border-radius: 8px; }
   .lp-cta--secondary { border-radius: 8px; }
   
   /* Hero eyebrow — use brand token, not hardcoded indigo */
   .lp-eyebrow { color: var(--brand); background: var(--brand-soft); border-color: #e0e7ff; }
   .lp-eyebrow__dot {
   display: none;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--brand);
   box-shadow: 0 0 0 0 rgba(22,163,74,0.5);
   animation: lp-pulse 1.8s ease-out infinite;
   }
   
   /* ============================================================
     RESPONSIVE
     ============================================================ */
   @media (max-width: 1080px) {
      .lp-hero__inner { grid-template-columns: 1fr; gap: 36px; }
      .lp-hero__visual { justify-content: center; }
      .lp-orbit { width: 280px; height: 280px; }
      .lp-orbit__ring--outer { width: 250px; height: 250px; margin: -125px 0 0 -125px; }
      .lp-orbit__ring--inner { width: 160px; height: 160px; margin: -80px 0 0 -80px; }
   }
   @media (min-width: 761px) and (max-width: 1080px) {
      .lp-signinbar__card { aspect-ratio: 872 / 382; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
      .lp-signinbar__card::after { display: block; background-image: url('https://storage.perfectcdn.com/aedutt/0x5trn8fm5yylu9d.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; }
      .lp-signinbar__content { text-align: center; display: flex; flex-direction: column; align-items: center; width: 100%; }
      .lp-signinbar__form { width: 100%; display: flex; flex-direction: column; align-items: center; }
      .lp-signinbar__row { justify-content: center; }
      .lp-signinbar__meta { justify-content: center; }
   }
   
   @media (max-width: 760px) {
      .lp-h1 { font-size: 28px; }
      .lp-hero { padding: 40px 0 48px; }
      .lp-hero .lp-cta { padding: 0 16px; height: 42px; font-size: 13px; }
      .lp-signinbar { padding: 24px 12px 30px; }
      .lp-signinbar .lp-container { padding-left: 0; padding-right: 0; }
      .lp-signinbar__card { aspect-ratio: 412 / 550; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
      .lp-signinbar__card::after { display: block; background-image: url('https://storage.perfectcdn.com/aedutt/4cy7maxzinto2zfg.svg'); inset: auto; top: 0; left: 0; width: 100%; aspect-ratio: 412 / 550; background-size: cover; }
      .lp-signinbar__curve--outer { border-radius: 50% / 44px; }
      .lp-signinbar__curve--gradient { left: 20px; right: 20px; top: 40px; }
      .lp-signinbar__curve--inner { left: 20px; right: 20px; top: 40px; }
      .lp-signinbar__row { flex-direction: column; align-items: stretch; gap: 8px; }
      .lp-signinbar__field { min-width: 0; width: 100%; flex: none; }
      .lp-signinbar__input { min-width: 0; width: 100%; box-sizing: border-box; flex: none; }
      /* Mobile: keep hint inside — no floating label */
      .lp-signinbar__field:focus-within .lp-signinbar__label,
      .lp-signinbar__field:has(.lp-signinbar__input:not(:placeholder-shown)) .lp-signinbar__label,
      .lp-signinbar__field:has(.lp-signinbar__input:-webkit-autofill) .lp-signinbar__label {
         top: 50%;
         left: 16px;
         transform: translateY(-50%);
         font-size: 14px;
         color: var(--shell-icon);
         background: transparent;
         padding: 0;
      }
      .lp-signinbar__field:has(.lp-signinbar__input:not(:placeholder-shown)) .lp-signinbar__label,
      .lp-signinbar__field:has(.lp-signinbar__input:-webkit-autofill) .lp-signinbar__label {
         opacity: 0;
         visibility: hidden;
      }
      .lp-signinbar__submit--gradient { width: 100%; justify-content: center; }
      .lp-signinbar__google { width: 100%; justify-content: center; }
      .lp-signinbar__meta { flex-direction: column; gap: 8px; align-items: flex-start; }
   }
   
   /* ============================================================
   LP USE-CASE CARDS
   ============================================================ */
   .lp-usecases {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
   }
   .lp-usecase {
      background: var(--bg-1);
      border: 1px solid var(--line);
      border-left: 3px solid var(--brand);
      border-radius: var(--radius);
      padding: 24px;
      box-shadow: var(--shadow-1);
      transition: border-color .2s, box-shadow var(--dur-normal) var(--ease-out-expo), transform var(--dur-normal) var(--ease-out-expo);
   }
   .lp-usecase:hover {
      border-color: var(--brand);
      border-left-color: var(--brand-strong);
      box-shadow: var(--shadow-brand-lg);
      transform: translateY(-5px);
   }
   .lp-usecase__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--brand-soft), rgba(240,101,67,0.15));
      color: var(--brand);
      margin-bottom: 14px;
      box-shadow: 0 2px 6px rgba(240,101,67,0.12);
   }
   .lp-usecase__title {
      font-size: 15px;
      font-weight: 600;
      color: var(--ink-1);
      margin: 0 0 8px;
   }
   .lp-usecase__body {
      font-size: 13.5px;
      line-height: 1.55;
      color: var(--ink-2);
      margin: 0;
   }
   @media (max-width: 960px) {
      .lp-usecases { grid-template-columns: repeat(2, 1fr); }
   }
   @media (max-width: 600px) {
      .lp-usecases { grid-template-columns: 1fr; }
   }
   /* ============================================================
   LP FOOTER
   ============================================================ */
   .lp-footer {
      color: rgba(255,255,255,0.6);
      font-size: 14px;
   }
   /* ── Top row: brand (logo + content) + social icons ── */
   .lp-footer__top {
      background: #262626;
      padding: 56px 0 48px;
   }
   .lp-footer__top .lp-container {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 32px;
   }
   .lp-footer__brand {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      flex: 1;
      min-width: 0;
   }
   .lp-footer__brand-content {
      display: flex;
      flex-direction: column;
      gap: 20px;
      min-width: 0;
   }
   .lp-footer__tagline {
      font-size: 14px;
      line-height: 1.65;
      color: rgba(255,255,255,0.5);
      margin: 0;
      max-width: 520px;
   }
   .lp-footer__brand-accent {
      color: #FF6255;
      font-weight: 700;
   }
   .lp-footer__brand-highlight {
      color: #498CE8;
   }
   /* ── Social icons ── */
   .lp-footer__socials {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
   }
   .lp-footer__social-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 72px;
      height: 72px;
      border-radius: 14px;
      background: rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-shadow: 0px 4px 20px 0px rgba(51, 68, 102, 0.16);
      color: rgba(255,255,255,0.7);
      text-decoration: none;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
   }
   .lp-footer__social-icon svg,
   .lp-footer__social-icon img {
      max-width: 24px;
      max-height: 24px;
      width: auto;
      height: auto;
   }
   .lp-footer__social-icon:hover {
      background: rgba(255,255,255,0.12);
      color: #fff;
      border-color: rgba(255,255,255,0.2);
   }
   .lp-footer__trust-logo {
      width: 80px;
      height: 80px;
      object-fit: contain;
      flex-shrink: 0;
   }
   /* ── Trust chips ── */
   .lp-footer__trust {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
   }
   .lp-footer__trust-item {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 14px;
      color: rgba(255,255,255,0.85);
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 8px;
      padding: 8px 16px;
   }
   .lp-footer__trust-item img { flex-shrink: 0; }
   /* ── Nav grid ── */
   .lp-footer__grid {
      background: #212121;
      padding: 48px 0;
      border-top: 1px solid rgba(255,255,255,0.08);
   }
   .lp-footer__grid-inner {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
   }
   .lp-footer__col-head {
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 18px;
   }
   .lp-footer__links {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
   }
   .lp-footer__links a {
      color: rgba(255,255,255,0.5);
      text-decoration: none;
      font-size: 13.5px;
      transition: color 0.15s;
   }
   .lp-footer__links a:hover { color: #fff; }
   /* ── Rainbow divider ── */
   .lp-footer__rainbow {
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, #784ED2 0%, #4196EB 12.02%, #83B4FF 50%, #FF4868 50.01%, #FF9B5B 67.31%, #FECE34 100%);
   
   }
   /* ── Bottom bar ── */
   .lp-footer__bottom {
      background: #1A1A1A;
   }
   .lp-footer__bottom .lp-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding-top: 18px;
      padding-bottom: 18px;
      flex-wrap: wrap;
   }
   .lp-footer__copy {
      font-size: 14px;
      color: rgba(255,255,255,0.4);
   }
   .lp-footer__copy-link {
      color: #f06543;
      text-decoration: none;
   }
   .lp-footer__bottom-links {
      display: none;
   }
   .lp-footer__payments {
      display: flex;
      align-items: center;
      gap: 10px;
   }
   /* ── Responsive ── */
   @media (max-width: 1024px) {
      .lp-footer__grid-inner { grid-template-columns: repeat(2, 1fr); gap: 28px; }
      .lp-footer__socials { flex-wrap: wrap; max-width: 200px; justify-content: flex-end; }
      .lp-footer__top .lp-container { flex-direction: column; gap: 20px; }
       .lp-footer__top { padding: 32px 0 28px; }
      .lp-footer__socials { max-width: none; justify-content: center; }
   }
   @media (max-width: 640px) {
   
      .lp-footer__trust { display: none; }
      .lp-footer__grid { padding: 28px 0; }
      .lp-footer__grid-inner { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
      .lp-footer__top .lp-container { flex-direction: column; gap: 20px; align-items: center; }
      .lp-footer__bottom .lp-container { flex-direction: column; align-items: center; gap: 10px; padding-top: 14px; padding-bottom: 14px; }
      .lp-footer__payments { flex-wrap: wrap; }
      .lp-footer__socials {
         flex-wrap: wrap;
         justify-content: center;
         align-items: center;
         width: auto;
         overflow-x: visible;
         gap: 8px;
         padding-bottom: 0;
      }
      .lp-footer__social-icon {
            width: 34px;
            height: 34px;
            flex: 0 0 auto;
            border-radius: 12px;
            box-shadow: none;
            -webkit-box-shadow: none;
         }
   }
   @media (max-width: 380px) {
      .lp-footer__grid-inner { grid-template-columns: 1fr; }
   }
   /* ============================================================
   UI/UX IMPROVEMENTS — May 2026
   1. Vibrant blue CTAs with glow for contrast
   2. Restored hero heading scale
   3. Focus-visible accessibility
   4. Cursor pointers on interactive elements
   5. Section padding rhythm variation
   6. Platform card focus highlights (IG + TG)
   7. Stabilized hover states (no layout shift)
   ============================================================ */
   
   /* --- 1. UNIFIED PRIMARY CTAs — all use var(--brand) / var(--brand-2) --- */
   
   .lp-cta--primary {
   background: var(--brand);
   border-color: var(--brand);
   color: #fff;
   box-shadow: 0 1px 2px rgba(240,101,67,0.2), 0 4px 14px rgba(240,101,67,0.25);
   }
   .lp-cta--primary:hover {
   background: var(--brand-2);
   border-color: var(--brand-2);
   color: #fff;
   box-shadow: var(--shadow-brand-lg);
   }
   
   /* Secondary CTA — clear ghost style for contrast */
   .lp-cta--secondary {
   background: var(--bg-1);
   color: var(--ink-1);
   border: 1px solid var(--line);
   }
   .lp-cta--secondary:hover {
   background: var(--bg-2);
   color: var(--ink-1);
   border-color: var(--ink-3);
   }
   
   /* Sign-in bar submit — matches primary CTA */
   /* .lp-signinbar__submit base — gradient handled by --gradient modifier */
   
   /* --- 2. HEADING MOBILE OVERRIDES --- */
   @media (max-width: 760px) {
   .lp-h1 { font-size: 28px; }
   .lp-h2 { font-size: 24px; }
   }
   /* --- 3. FOCUS-VISIBLE ACCESSIBILITY (disabled) --- */
   
   :focus-visible { outline: 0; outline-offset: 0; }
   .btn:focus-visible,
   .form-control:focus-visible,
   a:focus-visible,
   button:focus-visible,
   input:focus-visible,
   select:focus-visible,
   textarea:focus-visible,
   details:focus-visible,
   summary:focus-visible {
   outline: 0;
   outline-offset: 0;
   }
   /* --- 4. CURSOR POINTERS ON INTERACTIVE ELEMENTS --- */
   
   a.lp-platform { text-decoration: none; color: inherit; }
   a.lp-platform:hover, a.lp-platform:focus { text-decoration: none; color: inherit; }
   .lp-platform { cursor: pointer; }
   .lp-statcard { cursor: default; }
   .lp-usecase { cursor: default; }
   .lp-why__col {
   border-radius: 8px;
   padding: 22px 24px;
   border: 1px solid var(--line);
   background: var(--bg-1);
   cursor: default;
   }
   .lp-services__row { cursor: pointer; }
   .lp-feed__row { cursor: default; }
   /* --- 5. SECTION PADDING — UNIFIED RHYTHM --- */
   
   @media (max-width: 760px) {
   .lp-section__head { margin-bottom: 16px; padding-bottom: 8px; }
   }
   /* --- 6. PLATFORM CARD IG + TG HIGHLIGHT (removed) --- */
   /* --- 7. STABILIZED HOVER STATES --- */
   
   /* Platform cards: shadow-only hover, no transform shift */
   .lp-platform:hover {
   border-color: rgba(240,101,67,0.3);
   box-shadow: 0 4px 16px rgba(15,23,42,0.08);
   transform: none;
   }
   /* Use-case cards: shadow-only hover */
   .lp-usecase:hover {
   box-shadow: 0 4px 16px rgba(15,23,42,0.06);
   transform: none;
   }
   /* Stat cards: shadow-only hover */
   .lp-statcard:hover {
   box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(240,101,67,0.08);
   transform: none;
   }
   /* --- 8. MISSING DEFINITIONS --- */
   
   /* Service tag chips (used in services table rows) */
   .lp-tag {
   display: inline-flex;
   align-items: center;
   padding: 2px 7px;
   font-size: 10px;
   font-weight: 600;
   border-radius: 4px;
   letter-spacing: 0.03em;
   text-transform: uppercase;
   background: var(--bg-2);
   color: var(--ink-3);
   white-space: nowrap;
   }
   .lp-tag--hot {
   background: #fee2e2;
   color: #b91c1c;
   }
   
   /* Live dot (used in feed header) */
   .lp-live-dot {
   position: relative;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background: rgba(41,204,41,0.2);
   flex-shrink: 0;
   animation: lp-pulse 1.8s ease-out infinite;
   }
   .lp-live-dot::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #29CC29;
   transform: translate(-50%, -50%);
   }
   /* ============================================================
   MOBILE / RESPONSIVENESS PATCH — May 2026
   Fixes overflow, touch targets, cramped layouts on < 768px
   ============================================================ */
   
   /* 1. Container gutters — tighter on phones */
   @media (max-width: 480px) {
   .lp-container { padding: 0 16px; }
   }
   
   /* 2. Hero metrics — wrap cleanly on narrow screens */
   .lp-hero__metrics {
   display: flex;
   flex-wrap: wrap;
   gap: 4px 0;
   align-items: baseline;
   }
   @media (max-width: 480px) {
   /* Force all three stats onto one line — prevents orphaned third stat */
   .lp-hero__metrics { font-size: 12px; flex-wrap: nowrap; overflow: hidden; }
   .lp-hero__metrics span { white-space: nowrap; }
   .lp-hero__metrics .lp-sep { margin: 0 5px; flex-shrink: 0; }
   .lp-hero__ctas { gap: 8px; }
   /* Compact CTA on small phones */
   .lp-cta { padding: 9px 14px; font-size: 13px; min-height: 40px; }
   }
   
   /* 3. Sign-in bar — ensure inputs don't overflow on narrow phones */
   .lp-signinbar__input {
   box-sizing: border-box;
   }
   .lp-signinbar__form {
   display: flex;
   flex-direction: column;
   gap: 0;
   max-width: 100%;
   }
   @media (max-width: 480px) {
   .lp-signinbar { padding: 0 8px; }
   .lp-signinbar__card { padding: 44px 20px 32px; }
   .lp-signinbar__curve--outer { border-radius: 50% / 28px; }
   .lp-signinbar__curve--gradient { left: 10px; right: 10px; top: 26px; }
   .lp-signinbar__curve--inner { left: 10px; right: 10px; top: 26px; }
   .lp-signinbar__submit--gradient { width: 100%; justify-content: center; }
   .lp-signinbar__google { width: 100%; justify-content: center; }
   .lp-signinbar__meta { flex-direction: column; gap: 6px; align-items: center;}
   }
   
   /* 4. Captcha overflow containment */
   .lp-signinbar__captcha {
   max-width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   }
   
   /* 6. Live feed — tablet-friendly (between 700px and 1080px) */
   @media (max-width: 1080px) and (min-width: 701px) {
   .lp-feed__row {
       grid-template-columns: 0.30fr 4fr 1fr 1fr 1fr;
       gap: 16px;
       font-size: 13px;
   }
   .lp-feed__svc { font-size: 13px; }
   }
   
   /* 7. (removed — Popular badge removed) */
   
   /* 8. Services table — mobile grid fix: ensure all 5 areas are defined */
   @media (max-width: 760px) {
   .lp-services__row {
       grid-template-columns: 1fr auto;
       grid-template-areas:
           "name  price"
           "range cta";
       gap: 6px 12px;
       padding: 12px 16px;
   }
   .lp-services__id { display: none; }
   .lp-services__name { grid-area: name; font-size: 13px; }
   .lp-services__price { grid-area: price; text-align: right; font-size: 14px; }
   .lp-services__range { grid-area: range; font-size: 12px; }
   .lp-services__cta { grid-area: cta; font-size: 12px; padding: 6px 12px; justify-self: end; }
   }
   
   /* 9. Platform cards on very small screens — full width */
   @media (max-width: 380px) {
   .lp-platforms { grid-template-columns: 1fr !important; gap: 8px; }
   }
   
   /* 10. Footer on very narrow phones — 1 col */
   @media (max-width: 380px) {
   .lp-footer__grid-inner { grid-template-columns: 1fr; gap: 16px; }
   .lp-footer__bottom .lp-container { flex-direction: column; align-items: flex-start; gap: 8px; }
   }
   
   /* 11. Orbit animation — already hidden on mobile via .lp-hero__visual { display:none } at ≤760px */
   @media (max-width: 480px) {
   /* orbit rules removed — visual is hidden at this breakpoint */
   .lp-orbit__center { width: 48px; height: 48px; }
   }
   
   /* 12. Why-not section — stack on phones */
   @media (max-width: 600px) {
   .lp-why__grid { grid-template-columns: 1fr; }
   .lp-why__features { grid-template-columns: 1fr; gap: 12px; }
   .lp-why__feat { padding: 16px; gap: 12px; }
   }
   
   /* 13. FAQ items — ensure touch target is large enough */
   .lp-faq__item summary {
   min-height: 44px;
   }
   
   /* 14. Touch target minimums on interactive links */
   @media (max-width: 768px) {
   .lp-footer__links a {
       display: inline-block;
       padding: 4px 0;
       min-height: 32px;
       line-height: 24px;
   }
   }
   
   /* 15. Prevent horizontal overflow on all screen sizes
   NOTE: any overflow clip on an ancestor breaks position:sticky.
   .lp-section--scrolly overrides this for scrollytelling sections. */
   .lp-hero,
   .lp-section,
   .lp-footer {
   overflow-x: clip;
   }
   .lp-section.lp-section--scrolly {
   overflow: visible !important;
   overflow-x: visible !important;
   }
   
   @media (max-width: 480px) {
      .lp-dashprev__stats { grid-template-columns: 1fr 1fr; }
      .lp-dashprev__stat:last-child { grid-column: 1 / -1; }
      .lp-proof__grid { gap: 12px; }
      .lp-feed { border-radius: 8px; }
      .lp-dashprev { border-radius: 8px; }
      .neworder-page { padding: 4px 0 24px; }
      .card-body { padding: 15px; }
      .card-body2 { padding: 15px 10px; }
      .platform-grid { gap: 6px; }
      .pulse-platform-chip .platform-icon { width: 24px; height: 24px; }
      .neworder-stepper .step span:last-child { display: none; }
   }
   
   /* 21. Public navbar — smaller logo on very narrow phones */
   @media (max-width: 380px) {
      .public-navbar .navbar-brand img,
      .public-navbar .navbar-brand svg {
         height: 30px !important;
         max-width: 120px !important;
      }
   }
   
   /* ============================================================
   22. Floating chat widget — smaller on mobile
   ============================================================ */
   @media (max-width: 768px) {
   .integration-fixed,
   .integration-fixed__bottom-left,
   .integration-fixed.integration-fixed__bottom-left {
       transform: scale(0.55) !important;
       transform-origin: bottom left !important;
   }
   }
   
   /* ============================================================
   23. Touch targets — minimum 44px on mobile
   ============================================================ */
   @media (max-width: 768px) {
   /* Hero CTA buttons */
   .lp-cta {
       padding: 10px 18px;
       font-size: 14px;
       min-height: 0;
   }
   /* "Order" links in services table */
   .lp-services__cta {
       min-height: 44px;
       padding: 10px 16px;
       display: inline-flex;
       align-items: center;
   }
   /* "View full catalog" link */
   .lp-section__more {
       display: inline-flex;
       align-items: center;
       min-height: 44px;
       padding: 4px 0;
   }
   /* Footer links — bigger tap areas */
   .lp-footer__links a {
       display: inline-flex;
       align-items: center;
       min-height: 40px;
       padding: 8px 0;
       font-size: 14px;
   }
   .lp-footer__bottom-links a {
       display: inline-flex;
       align-items: center;
       min-height: 36px;
       padding: 6px 4px;
       font-size: 13px;
   }
   .lp-footer__copy {
       font-size: 12px;
   }
   /* Sign-in "Sign up" and "Forgot password" links */
   .lp-signinbar__meta a {
       display: inline-flex;
       align-items: center;
       min-height: 44px;
       padding: 4px 0;
       font-size: 14px;
   }
   }
   
   /* ============================================================
   24. Font size minimums on mobile — nothing below 14px
   ============================================================ */
   @media (max-width: 768px) {
   /* Hero stats bar */
   .lp-hero__metrics {
       font-size: 13px;
   }
   .lp-hero__metrics strong {
       font-size: 14px;
   }
   /* "ORDERS COMPLETING RIGHT NOW" badge */
   .lp-hero__badge span,
   .lp-hero__badge {
       font-size: 11px;
   }
   /* Sign-in section meta text */
   .lp-signinbar__meta {
       font-size: 14px;
   }
   }
   
   /* ============================================================
   25. Multi-page mobile responsiveness fixes
   ============================================================ */
   
   /* ─── Services page: touch targets + font sizes ─── */
   @media (max-width: 768px) {
      .btn.btn-order-service {
         padding: 8px 14px;
         font-size: 13px;
         min-height: 36px;
         border-radius: 8px;
      }
      .services-table tr.services-cat-row .services-cat-head {
         font-size: 13px;
      }
      .services-table tbody > tr > td.col-svc-name {
         font-size: 12px;
      }
   }
   
   /* ─── Blog page: prevent table overflow + touch targets ─── */
   @media (max-width: 768px) {
      .blog-grid {
         grid-template-columns: 1fr;
         gap: 16px;
      }
      .blog-card-body {
         padding: 16px 18px;
      }
      .blog-card-title {
         font-size: 16px;
      }
      .blog-card-excerpt {
         font-size: 13.5px;
      }
      .blog-card-cta {
         font-size: 14px;
         min-height: 44px;
         display: inline-flex;
         align-items: center;
         padding: 8px 0;
      }
      /* Prevent any raw HTML tables from overflowing inside blog content */
      .blogpost-page table,
      .blog-card table {
         display: block;
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
         max-width: 100%;
      }
      .blogpost-page .card-body {
         overflow-x: clip;
      }
   }
   
   /* ─── Signup page: labels, links, stats ─── */
   @media (max-width: 768px) {
      .auth-field__label {
         font-size: 13px;
      }
      .auth-field__forgot {
         font-size: 13px;
         min-height: 44px;
         display: inline-flex;
         align-items: center;
      }
      /* "Already have an account? Sign in" links */
      .auth-form a,
      .auth-card a {
         min-height: 44px;
         display: inline-flex;
         align-items: center;
         font-size: 14px;
      }
   }
   
   /* ─── Landing pages (instagram/telegram): Order links + feed text ─── */
   @media (max-width: 768px) {
   .lp-services__cta {
       min-height: 40px;
       padding: 10px 16px;
       font-size: 13px;
       display: inline-flex;
       align-items: center;
   }
   .lp-feed__id {
       font-size: 12px;
   }
   .lp-feed__svc {
       font-size: 13px;
   }
   .lp-feed__qty {
       font-size: 12px;
   }
   .lp-feed__pill {
       font-size: 11px;
   }
   .lp-feed__time {
       font-size: 11.5px;
   }
   .lp-feed__row {
       min-height: 40px;
   }
   }
   
   /* ─── Howto/FAQ page: CTA buttons + inline links ─── */
   @media (max-width: 768px) {
   .faq-content a,
   .faq-page a.btn,
   .howto-page a.btn {
       min-height: 44px;
       display: inline-flex;
       align-items: center;
       padding: 10px 18px;
       font-size: 14px;
   }
   .faq-content p,
   .faq-content ul,
   .faq-content ol {
       font-size: 14px;
   }
   .faq-aside-stats {
       font-size: 13px;
   }
   }
   
   /* ─── Terms page: eyebrow + meta text ─── */
   @media (max-width: 768px) {
      .terms-page .page-header-eyebrow,
      .affiliates-page .page-header-eyebrow,
      .faq-page .page-header-eyebrow {
         font-size: 12px;
      }
   }
   
   /* ─── Global: prevent any page-level horizontal overflow ─── */
   @media (max-width: 768px) {
   .public-shell {
       overflow-x: hidden;
   }
   body {
       overflow-x: hidden;
   }
   .container {
       max-width: 100% !important;
       padding-left: 12px;
       padding-right: 12px;
   }
   }
   
   /* ============================================================
   SAFE AREA INSETS — iPhone notch, Dynamic Island, home indicator,
   and rounded-corner devices. Requires viewport-fit=cover in meta tag.
   Browsers that don't support env() ignore these rules entirely.
   ============================================================ */
   
   /* Public navbar — pad left/right for landscape notch, top for Dynamic Island */
   .public-navbar {
   padding-left: env(safe-area-inset-left);
   padding-right: env(safe-area-inset-right);
   padding-top: env(safe-area-inset-top);
   box-sizing: border-box;
   width: 100%;
   }
   
   /* Public shell — ensure content clears safe areas (skip full-bleed pages) */
   .public-shell:not(:has(> .lp)):not(:has(> .ft-breadcrumb)) {
   padding-left: max(16px, env(safe-area-inset-left));
   padding-right: max(16px, env(safe-area-inset-right));
   }
   
   /* Sign-in bar — ensure side padding respects safe areas */
   .lp-signinbar {
   padding-left: max(12px, env(safe-area-inset-left));
   padding-right: max(12px, env(safe-area-inset-right));
   }
   
   /* LP sections — inherit safe area gutters */
   .lp-container {
   padding-left: max(24px, env(safe-area-inset-left));
   padding-right: max(24px, env(safe-area-inset-right));
   }
   
   /* Footer — pad bottom for home indicator */
   .lp-footer__bottom .lp-container {
   padding-bottom: max(18px, env(safe-area-inset-bottom));
   }
   
   /* Authenticated sidebar — respect top safe area */
   .sidebar {
   padding-top: env(safe-area-inset-top);
   }
   
   /* Authenticated topbar — respect top + sides */
   .topbar {
      padding-top: env(safe-area-inset-top);
      padding-left: max(52px, env(safe-area-inset-left));
      padding-right: max(196px, env(safe-area-inset-right));
   }
   
   /* Authenticated app content — bottom safe area for home indicator */
   .app-content {
      /* padding-bottom: env(safe-area-inset-bottom); */
   }
   
   /* ============================================================
   AMBIENT DECORATIONS — Floating icons, arc separators,
   scroll-triggered micro-illustrations
   ============================================================ */
   
   /* ─── 1. Floating ambient icons ─── */
   .lp-ambient {
   position: absolute;
   inset: 0;
   overflow: hidden;
   pointer-events: none;
   z-index: 0;
   }
   .lp-ambient__icon {
   position: absolute;
   opacity: 0;
   animation-fill-mode: both;
   animation-timing-function: linear;
   will-change: transform, opacity;
   }
   .lp-ambient__icon svg {
   display: block;
   width: 100%;
   height: 100%;
   }
   
   /* Float paths — compositor-friendly, only transform + opacity */
   @keyframes lp-drift-1 {
   0%   { transform: translate(0, 0) rotate(0deg);     opacity: 0; }
   8%   { opacity: 0.045; }
   50%  { transform: translate(60px, -120px) rotate(15deg); opacity: 0.06; }
   92%  { opacity: 0.045; }
   100% { transform: translate(120px, -240px) rotate(30deg); opacity: 0; }
   }
   @keyframes lp-drift-2 {
   0%   { transform: translate(0, 0) rotate(0deg);      opacity: 0; }
   8%   { opacity: 0.04; }
   50%  { transform: translate(-80px, -100px) rotate(-12deg); opacity: 0.055; }
   92%  { opacity: 0.04; }
   100% { transform: translate(-160px, -200px) rotate(-25deg); opacity: 0; }
   }
   @keyframes lp-drift-3 {
   0%   { transform: translate(0, 0) rotate(0deg);     opacity: 0; }
   8%   { opacity: 0.035; }
   50%  { transform: translate(40px, -160px) rotate(8deg); opacity: 0.05; }
   92%  { opacity: 0.035; }
   100% { transform: translate(80px, -320px) rotate(16deg); opacity: 0; }
   }
   @keyframes lp-drift-4 {
   0%   { transform: translate(0, 0) rotate(5deg);     opacity: 0; }
   8%   { opacity: 0.05; }
   50%  { transform: translate(-50px, -140px) rotate(-10deg); opacity: 0.065; }
   92%  { opacity: 0.05; }
   100% { transform: translate(-100px, -280px) rotate(-20deg); opacity: 0; }
   }
   
   /* Convenience classes for drift variants */
   .lp-ambient__icon--d1 { animation-name: lp-drift-1; }
   .lp-ambient__icon--d2 { animation-name: lp-drift-2; }
   .lp-ambient__icon--d3 { animation-name: lp-drift-3; }
   .lp-ambient__icon--d4 { animation-name: lp-drift-4; }
   /* ─── 2. SVG section separators ─── */
   
   /* ─── 3. Scroll-reveal base ─── */
   .lp-reveal {
   opacity: 0;
   transform: translateY(28px);
   transition: opacity var(--dur-slow, 500ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
               transform var(--dur-slow, 500ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
   }
   .lp-reveal--visible {
   opacity: 1;
   transform: translateY(0);
   }
   
   /* Stagger children — slightly more spread for visual rhythm */
   .lp-reveal-stagger > .lp-reveal:nth-child(2) { transition-delay: 0.10s; }
   .lp-reveal-stagger > .lp-reveal:nth-child(3) { transition-delay: 0.20s; }
   .lp-reveal-stagger > .lp-reveal:nth-child(4) { transition-delay: 0.30s; }
   .lp-reveal-stagger > .lp-reveal:nth-child(5) { transition-delay: 0.40s; }
   .lp-reveal-stagger > .lp-reveal:nth-child(6) { transition-delay: 0.50s; }
   .lp-reveal-stagger > .lp-reveal:nth-child(7) { transition-delay: 0.60s; }
   .lp-reveal-stagger > .lp-reveal:nth-child(8) { transition-delay: 0.70s; }
   /* ─── 5. Ensure sections hosting ambient elements have stacking context ─── */
   .lp-hero,
   .lp-section,
   .lp-why {
   position: relative;
   }
   
   /* Content stays above ambient layer */
   .lp-container {
   position: relative;
   z-index: 2;
   }
   
   /* ─── 6. Reduced motion — consolidated in REDUCED MOTION block below ─── */
   
   /* ─── 7. Hide ambient on very small screens for performance ─── */
   @media (max-width: 480px) {
   .lp-ambient { display: none; }
   }
   
   /* ============================================================
   TRUST & CONVERSION IMPROVEMENTS — May 2026
   1. Hero trust strip (rating + review count)
   2. Payment logos strip
   3. Testimonials section
   4. Ghost CTA variant
   5. Mobile sticky sign-in
   6. Dashboard fallback
   ============================================================ */
   
   /* --- 1. Hero trust strip --- */
   .lp-hero__sep {
   border: none;
   border-top: 1px solid var(--line);
   margin: 16px 0 12px;
   width: 100%;
   max-width: 420px;
   }
   .lp-hero__inner.lp-hero__inner--centered .lp-hero__sep { margin-left: auto; margin-right: auto; }
   
   /* Hero trust badges */
   .lp-hero__badges {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 16px;
   justify-content: center;
   }
   .lp-hero__badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 7px 14px;
   border-radius: 20px;
   font-size: 12px;
   font-weight: 600;
   color: var(--ink);
   text-decoration: none;
   background: color-mix(in oklch, var(--brand) 4%, var(--surf-2));
   border: 1px solid color-mix(in oklch, var(--brand) 10%, var(--line));
   transition: border-color var(--duration-fast, 150ms) ease, background var(--duration-fast, 150ms) ease;
   cursor: pointer;
   }
   .lp-hero__badge:hover,
   .lp-hero__badge:focus-visible {
   background: var(--brand);
   color: #fff;
   border-color: var(--brand);
   }
   .lp-hero__badge:hover svg,
   .lp-hero__badge:focus-visible svg {
   color: #fff;
   }
   .lp-hero__badge svg {
   color: var(--brand);
   flex-shrink: 0;
   }
   @media (max-width: 760px) {
   .lp-hero__badges { gap: 6px; }
   .lp-hero__badge { font-size: 11px; padding: 5px 10px; }
   }
   .lp-hero__trust-strip {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
   margin-top: 0;
   font-size: 13px;
   color: var(--ink-3);
   }
   .lp-hero__trust-strip svg {
   vertical-align: -1px;
   }
   .lp-hero__rating {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   }
   .lp-hero__rating strong {
   color: var(--ink-1);
   font-weight: 600;
   }
   .lp-stars {
   display: inline-flex;
   gap: 1px;
   }
   .lp-hero__trust-sep {
   color: var(--ink-4, #c4c9d4);
   margin: 0 2px;
   }
   @media (max-width: 480px) {
   .lp-hero__trust-strip { font-size: 12px; gap: 6px; }
   }
   
   /* --- 2. Payment logos in footer --- */
   .lp-footer__payments {
   margin-top: 16px;
   }
   .lp-footer__pay-label {
   font-size: 14px;
   color: rgba(255,255,255,0.3);
   white-space: nowrap;
   display: block;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   }
   .lp-footer__pay-logos {
   display: flex;
   align-items: center;
   gap: 6px;
   flex-wrap: wrap;
   }
   .lp-footer__pay-logo {
   display: inline-flex;
   align-items: center;
   border-radius: 6px;
   overflow: hidden;
   transition: opacity 0.15s;
   }
   .lp-footer__pay-logo:hover {
   opacity: 0.85;
   }
   .lp-footer__pay-more {
   font-size: 12px;
   font-weight: 600;
   color: rgba(255,255,255,0.55);
   background: rgba(255,255,255,0.08);
   border: 1px solid rgba(255,255,255,0.14);
   border-radius: 6px;
   padding: 0 10px;
   height: 30px;
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
   }
   /* --- 3. Testimonials section --- */
   .lp-testimonial-stats {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
   margin-bottom: 32px;
   }
   .lp-testimonial-stat {
   text-align: center;
   padding: 20px 12px;
   background: var(--bg-1);
   border: 1px solid var(--line);
   border-radius: var(--radius, 10px);
   }
   .lp-testimonial-stat__num {
   display: block;
   font-size: 24px;
   font-weight: 700;
   color: var(--ink-1);
   letter-spacing: -0.02em;
   line-height: 1.2;
   }
   .lp-testimonial-stat__label {
   display: block;
   font-size: 12px;
   color: var(--ink-3);
   margin-top: 4px;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   font-weight: 500;
   }
   .lp-testimonials {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
   }
   .lp-testimonial:hover {
   border-color: rgba(240,101,67,0.2);
   box-shadow: 0 4px 16px rgba(15,23,42,0.06);
   }
   .lp-testimonial__body {
   font-size: 14px;
   line-height: 1.6;
   color: var(--ink-2);
   margin: 0;
   flex: 1;
   }
   .lp-testimonial__avatar {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--brand), #fbbf24);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   font-weight: 700;
   flex-shrink: 0;
   box-shadow: 0 0 0 2px rgba(240,101,67,0.25);
   }
   .lp-testimonial__role {
   font-size: 12px;
   color: var(--ink-3);
   display: block;
   }
   @media (max-width: 960px) {
   .lp-testimonial-stats { grid-template-columns: repeat(2, 1fr); }
   .lp-testimonials { grid-template-columns: repeat(2, 1fr); }
   }
   @media (max-width: 600px) {
   .lp-testimonial-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
   .lp-testimonial-stat { padding: 16px 8px; }
   .lp-testimonial-stat__num { font-size: 20px; }
   .lp-testimonials { grid-template-columns: 1fr; }
   .lp-testimonial { padding: 20px; }
   }
   
   /* --- 4. Ghost CTA (text-link style for hero secondary) --- */
   .lp-cta--ghost {
   background: transparent;
   color: var(--ink-2);
   border: none;
   padding: 12px 8px;
   font-weight: 500;
   text-decoration: underline;
   text-underline-offset: 3px;
   text-decoration-color: var(--ink-4, #c4c9d4);
   }
   .lp-cta--ghost:hover {
   color: var(--brand);
   text-decoration-color: var(--brand);
   background: transparent;
   }
   
   /* --- 5. Mobile sticky sign-in shortcut --- */
   .lp-mobile-signin {
   display: none;
   }
   @media (max-width: 768px) {
   .lp-mobile-signin {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 6px;
       position: fixed;
       bottom: 16px;
       right: 16px;
       z-index: 999;
       background: var(--brand);
       color: #fff;
       font-size: 13px;
       font-weight: 600;
       padding: 12px 18px;
       border-radius: 50px;
       box-shadow: 0 4px 16px rgba(240,101,67,0.35), 0 2px 4px rgba(0,0,0,0.15);
       text-decoration: none;
       transition: background var(--dur-fast) ease, transform var(--dur-fast) ease, box-shadow var(--dur-normal) var(--ease-out-expo);
   }
   .lp-mobile-signin:hover,
   .lp-mobile-signin:active {
       background: var(--brand-2);
       color: #fff;
       text-decoration: none;
       transform: translateY(-2px);
       box-shadow: var(--shadow-brand-lg);
   }
   .lp-mobile-signin svg {
       flex-shrink: 0;
   }
   }
   
   /* --- 6. (dashboard fallback removed) --- */
   
   /* ============================================================
   REDUCED MOTION — respect prefers-reduced-motion
   ============================================================ */
   @media (prefers-reduced-motion: reduce) {
   .lp-orbit__ring--outer,
   .lp-orbit__ring--inner,
   .lp-orbit__icon,
   .lp-ambient__icon,
   .lp-eyebrow__dot,
   .lp-live-dot,
   .lp-feed__row,
   .lp-reveal {
       animation: none !important;
       transition: none !important;
   }
   .lp-ambient__icon { opacity: 0 !important; }
   .lp-reveal { opacity: 1 !important; transform: none !important; }
   /* Shorten all remaining UI transitions */
   *, *::before, *::after {
       transition-duration: 0.01ms !important;
       animation-duration: 0.01ms !important;
       animation-iteration-count: 1 !important;
   }
   }
   
   /* ============================================================
   DARK THEME — Landing page overrides
   (All other theme-pulse elements are handled by CSS variable
   overrides in [data-theme="dark"] above)
   ============================================================ */
   
   /* Hero section */
   [data-theme="dark"] .lp-hero , [data-theme="dark"] .lp-signinbar {
   background: var(--bg-2);
   }
   
   /* Live orders feed */
   [data-theme="dark"] .lp-feed {
   background: transparent;
   }
   [data-theme="dark"] .lp-feed__head {
   background: #2A2D3A;
   }
   [data-theme="dark"] .lp-feed__row {
   border-bottom-color: #333;
   }
   [data-theme="dark"] .lp-feed__row:hover {
   background: var(--bg-2);
   }
   
   /* Sign-in bar at bottom of hero */
   [data-theme="dark"] .lp-signinbar__curve--outer {
   background: rgba(20,30,50,0.5);
   border-color: rgba(255,255,255,0.07);
   }
   [data-theme="dark"] .lp-signinbar__curve--inner {
   background: var(--bg-2);
   border-color: var(--line);
   }
   [data-theme="dark"] .lp-signinbar__input {
   background: var(--bg-2);
   border-color: var(--line);
   color: var(--ink-1);
   }
   [data-theme="dark"] .lp-signinbar__input:focus,
   [data-theme="dark"] .lp-signinbar__input:not(:placeholder-shown),
   [data-theme="dark"] .lp-signinbar__input:-webkit-autofill {
   background: var(--bg-1);
   }
   [data-theme="dark"] .lp-signinbar__input:focus,
   [data-theme="dark"] .lp-signinbar__input:focus-visible {
   border-color: rgba(91, 127, 255, 0.55);
   box-shadow: none;
   }
   [data-theme="dark"] .lp-signinbar__label { color: var(--shell-icon); }
   [data-theme="dark"] .lp-signinbar__field:focus-within .lp-signinbar__label,
   [data-theme="dark"] .lp-signinbar__field:has(.lp-signinbar__input:not(:placeholder-shown)) .lp-signinbar__label,
   [data-theme="dark"] .lp-signinbar__field:has(.lp-signinbar__input:-webkit-autofill) .lp-signinbar__label {
   color: var(--shell-item);
   background: transparent;
   }
   [data-theme="dark"] .lp-signinbar__input::placeholder {
   color: transparent;
   }
   [data-theme="dark"] .lp-signinbar__google {
   background: var(--bg-2);
   color: var(--ink-1);
   border-color: var(--line);
   }
   [data-theme="dark"] .lp-signinbar__google:hover {
   background: var(--bg-3);
   }
   
   /* Hot badge */
   [data-theme="dark"] .lp-badge--hot {
   background: var(--red-soft);
   color: #f87171;
   }
   [data-theme="dark"] .lp-badge--refill {
   background: rgba(16, 185, 129, 0.15);
   color: #34d399;
   }
   
   /* Status pills */
   [data-theme="dark"] .lp-pill--ok   { background: var(--green-soft); color: #4ade80; }
   [data-theme="dark"] .lp-pill--prog { background: var(--blue-soft);  color: #60a5fa; }
   [data-theme="dark"] .lp-pill--part { background: var(--amber-soft); color: #fbbf24; }
   
   /* Good/bad comparison headings */
   [data-theme="dark"] .lp-why__col--bad  .lp-why__h { color: #f87171; }
   [data-theme="dark"] .lp-why__col--good .lp-why__h { color: #4ade80; }
   
   /* TikTok and X icons are black — invert on dark */
   [data-theme="dark"] .lp-orbit__icon--tt { color: #e2e8f0; }
   
   /* (old how-step payment dark rules removed) */
   
   /* Eyebrow tags */
   [data-theme="dark"] .lp-eyebrow { border-color: var(--brand-soft); }
   
   /* Dashboard browser dots — keep as-is (decorative, look fine dark) */
   
   /* ─── Additional dark overrides pass 2 ─── */
   
   /* Secondary CTA button */
   [data-theme="dark"] .lp-cta--secondary { background: var(--bg-1); }
   
   /* Why comparison columns */
   [data-theme="dark"] .lp-why__col         { background: var(--bg-1); }
   [data-theme="dark"] .lp-why__col--bad    { background: #1e0e0e; border-color: #4a1a1a; }
   [data-theme="dark"] .lp-why__col--good   { background: #0d1e0d; border-color: #1a3a1a; }
   
   /* Feature cards (why section) */
   [data-theme="dark"] .lp-why__feat { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
   
   /* Dashboard preview widget */
   [data-theme="dark"] .lp-dashprev { background: var(--bg-1); }
   [data-theme="dark"] .lp-dashprev__head {
   background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
   }
   
   /* ─── Additional dark overrides pass 3 ─── */
   
   /* Orbit icon circles — soften the white circles in dark mode */
   [data-theme="dark"] .lp-orbit__icon {
   background: #1e2a3e;
   border-color: #2d3a52;
   box-shadow: 0 4px 16px rgba(0,0,0,.25);
   }
   /* TikTok and X icons — were black on white, flip to light on dark */
   [data-theme="dark"] .lp-orbit__icon--tt { color: #e2e8f0; }
   [data-theme="dark"] .lp-orbit__icon--x  { color: #e2e8f0; }
   
   /* Secondary CTA button — ensure text is always readable */
   [data-theme="dark"] .lp-cta--secondary {
   background: transparent;
   color: var(--ink-1);
   border-color: var(--line);
   }
   [data-theme="dark"] .lp-cta--secondary:hover {
   background: var(--bg-1);
   border-color: var(--ink-3);
   }
   
   /* Blog content dark mode is handled inline in blog-post.twig via .blogpost-content selectors */
   
   /* ============================================================
   ANIMATED "1" — hero brand identity
   The "1" in the hero heading launches upward like a rocket
   on page load, then settles into a gentle float.
   ============================================================ */
   
   /* Container for the animated 1 — inline element within heading */
   .lp-one {
   display: inline-block;
   position: relative;
   color: var(--brand);
   font-style: normal;
   }
   
   /* The "1" character itself */
   .lp-one__digit {
   display: inline-block;
   animation: one-launch 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
   animation-delay: 0.3s;
   }
   
   /* After launch, settle into idle float */
   .lp-one__digit.is-landed {
   animation: one-float 3.5s ease-in-out infinite;
   }
   
   /* Coral trail left behind during launch */
   .lp-one__trail {
   position: absolute;
   bottom: -2px;
   left: 50%;
   transform: translateX(-50%);
   width: 3px;
   height: 0;
   background: linear-gradient(to top, transparent, var(--brand));
   border-radius: 2px;
   opacity: 0;
   animation: one-trail 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
   animation-delay: 0.3s;
   pointer-events: none;
   }
   
   /* Launch: slide up from below with overshoot */
   @keyframes one-launch {
   0% {
       opacity: 0;
       transform: translateY(40px) scale(0.8);
   }
   60% {
       opacity: 1;
       transform: translateY(-8px) scale(1.05);
   }
   100% {
       opacity: 1;
       transform: translateY(0) scale(1);
   }
   }
   
   /* Trail: grows then fades */
   @keyframes one-trail {
   0% {
       height: 0;
       opacity: 0;
   }
   40% {
       height: 28px;
       opacity: 0.7;
   }
   100% {
       height: 0;
       opacity: 0;
   }
   }
   
   /* Idle float after landing — compositor-friendly translateY only */
   @keyframes one-float {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-4px); }
   }
   
   /* Reduced motion — no animation, just show the 1 */
   @media (prefers-reduced-motion: reduce) {
   .lp-one__digit {
       animation: none !important;
       opacity: 1;
       transform: none;
   }
   .lp-one__trail { display: none; }
   }
   
   /* ============================================================
   FREE TRIAL FORM — .ft-* component system
   Used on /free-instagram-likes, /free-instagram-followers,
   /free-youtube-likes, /free-telegram-members
   ============================================================ */
   
   /* Section with warm background */
   .ft-form-section {
   background: var(--brand-soft);
   padding: 72px 0;
   }
   
   /* 2-col grid: pitch left + form card right */
   .ft-form-wrap {
   display: grid;
   grid-template-columns: 1fr 420px;
   gap: 48px;
   align-items: start;
   max-width: 1080px;
   margin: 0 auto;
   padding: 0 24px;
   }
   
   /* Pitch side */
   .ft-pitch__badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 13px;
   font-weight: 600;
   padding: 5px 12px;
   border-radius: 20px;
   margin-bottom: 16px;
   }
   .ft-platform-badge--ig { background: #fce4ec; color: #c62828; }
   .ft-platform-badge--yt { background: #ffebee; color: #b71c1c; }
   .ft-platform-badge--tg { background: #e3f2fd; color: #1565c0; }
   .ft-platform-badge--tt { background: #f3e5f5; color: #6a1b9a; }
   .ft-platform-badge--fb { background: #e3f2fd; color: #1565c0; }
   .ft-platform-badge--tw { background: #eceff1; color: #212121; }
   .ft-platform-badge--twitch { background: #f3e5f5; color: #6a1b9a; }
   .ft-platform-badge--discord { background: #e8eaf6; color: #283593; }
   [data-theme="dark"] .ft-platform-badge--ig { background: #3e1a1a; color: #ef9a9a; }
   [data-theme="dark"] .ft-platform-badge--yt { background: #3e1515; color: #ef9a9a; }
   [data-theme="dark"] .ft-platform-badge--tg { background: #0d253e; color: #90caf9; }
   [data-theme="dark"] .ft-platform-badge--tt { background: #2a1336; color: #ce93d8; }
   [data-theme="dark"] .ft-platform-badge--fb { background: #0d253e; color: #90caf9; }
   [data-theme="dark"] .ft-platform-badge--tw { background: #1a1a1a; color: #bdbdbd; }
   [data-theme="dark"] .ft-platform-badge--twitch { background: #2a1336; color: #ce93d8; }
   [data-theme="dark"] .ft-platform-badge--discord { background: #1a1a3e; color: #9fa8da; }
   
   .ft-pitch__heading {
   font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
   font-weight: 700;
   color: var(--ink-1);
   line-height: 1.25;
   margin: 0 0 20px;
   }
   
   .ft-pitch__benefits {
   list-style: none;
   padding: 0;
   margin: 0 0 28px;
   }
   .ft-pitch__benefits li {
   position: relative;
   padding-left: 28px;
   margin-bottom: 12px;
   font-size: 15px;
   color: var(--ink-2);
   line-height: 1.5;
   }
   .ft-pitch__benefits li::before {
   content: '';
   position: absolute;
   left: 0;
   top: 4px;
   width: 18px;
   height: 18px;
   background: var(--green);
   mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'/%3E%3C/svg%3E") center/contain no-repeat;
   -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'/%3E%3C/svg%3E") center/contain no-repeat;
   }
   
   .ft-pitch__trust {
   display: flex;
   gap: 24px;
   flex-wrap: wrap;
   }
   .ft-pitch__trust-item {
   font-size: 13px;
   color: var(--ink-3);
   }
   .ft-pitch__trust-item strong {
   display: block;
   font-size: 22px;
   color: var(--ink-1);
   font-weight: 700;
   }
   
   /* Sticky form card */
   .ft-card {
   background: var(--bg-1);
   border-radius: 18px;
   padding: 32px 28px;
   box-shadow: var(--shadow-3);
   position: sticky;
   top: 80px;
   }
   .ft-card__title {
   font-size: 18px;
   font-weight: 700;
   color: var(--ink-1);
   margin: 0 0 24px;
   text-align: center;
   }
   
   /* Text input */
   .ft-input {
   display: block;
   width: 100%;
   padding: 12px 14px;
   font-size: 15px;
   border: 1.5px solid var(--line);
   border-radius: var(--radius);
   background: var(--bg-2);
   color: var(--ink-1);
   transition: border-color 0.15s;
   box-sizing: border-box;
   }
   .ft-input:focus {
   outline: none;
   border-color: var(--brand);
   box-shadow: 0 0 0 3px rgba(240, 101, 67, 0.12);
   }
   .ft-input--error {
   border-color: var(--red) !important;
   box-shadow: 0 0 0 3px rgba(196, 50, 47, 0.10) !important;
   }
   .ft-input-error-msg {
   font-size: 13px;
   color: var(--red);
   margin-top: 6px;
   display: none;
   }
   
   /* Quantity row: label + slider + number */
   .ft-qty-row {
   margin: 20px 0;
   }
   .ft-qty-row label {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 14px;
   font-weight: 600;
   color: var(--ink-1);
   margin-bottom: 10px;
   }
   .ft-qty-val {
   font-size: 20px;
   font-weight: 700;
   color: var(--brand);
   font-variant-numeric: tabular-nums;
   }
   .ft-qty-range {
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
   height: 6px;
   border-radius: 3px;
   background: var(--line);
   outline: none;
   }
   .ft-qty-range::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 22px;
   height: 22px;
   border-radius: 50%;
   background: var(--brand);
   cursor: pointer;
   border: 3px solid var(--bg-1);
   box-shadow: 0 2px 6px rgba(0,0,0,0.15);
   }
   .ft-qty-range::-moz-range-thumb {
   width: 22px;
   height: 22px;
   border-radius: 50%;
   background: var(--brand);
   cursor: pointer;
   border: 3px solid var(--bg-1);
   box-shadow: 0 2px 6px rgba(0,0,0,0.15);
   }
   
   /* Turnstile container */
   .ft-captcha {
   margin: 20px 0;
   display: flex;
   justify-content: center;
   }
   
   /* Submit button */
   .ft-submit {
   display: block;
   width: 100%;
   padding: 14px;
   font-size: 16px;
   font-weight: 700;
   border: none;
   border-radius: var(--radius);
   background: var(--brand);
   color: #fff;
   cursor: pointer;
   transition: opacity 0.15s, transform 0.1s;
   position: relative;
   }
   .ft-submit:hover:not(:disabled) { opacity: 0.9; }
   .ft-submit:active:not(:disabled) { transform: scale(0.98); }
   .ft-submit:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   }
   .ft-submit--loading {
   color: transparent !important;
   pointer-events: none;
   }
   .ft-submit--loading::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 20px;
   height: 20px;
   margin: -10px 0 0 -10px;
   border: 2.5px solid rgba(255,255,255,0.3);
   border-top-color: #fff;
   border-radius: 50%;
   animation: ft-spin 0.6s linear infinite;
   }
   @keyframes ft-spin {
   to { transform: rotate(360deg); }
   }
   
   /* Restrictions list */
   .ft-rules {
   list-style: none;
   padding: 0;
   margin: 20px 0 0;
   font-size: 12px;
   color: var(--ink-3);
   }
   .ft-rules li {
   padding: 4px 0 4px 20px;
   position: relative;
   }
   .ft-rules li::before {
   content: '';
   position: absolute;
   left: 0;
   top: 7px;
   width: 14px;
   height: 14px;
   background: var(--ink-3);
   mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z'/%3E%3C/svg%3E") center/contain no-repeat;
   -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z'/%3E%3C/svg%3E") center/contain no-repeat;
   }
   
   /* Status panels: success, error, already-used */
   .ft-status {
   display: none;
   padding: 16px;
   border-radius: var(--radius);
   margin-top: 20px;
   font-size: 14px;
   line-height: 1.5;
   }
   .ft-status.is-visible { display: block; }
   .ft-status--success {
   background: var(--green-soft);
   color: var(--green);
   border: 1px solid var(--green);
   }
   .ft-status--error {
   background: var(--red-soft);
   color: var(--red);
   border: 1px solid var(--red);
   }
   .ft-status--used {
      background: var(--amber-soft);
      color: var(--amber);
      border: 1px solid var(--amber);
   }
   .ft-status__title {
      font-weight: 700;
      margin-bottom: 4px;
   }
   
   /* How-it-works 3-step grid */
   .ft-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      max-width: 960px;
      margin: 0 auto;
   }
   .ft-step {
      text-align: center;
      padding: 28px 20px;
      background: var(--bg-1);
      border-radius: var(--radius-lg);
      border: 1px solid var(--line);
   }
   .ft-step__num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--brand-soft);
      color: var(--brand);
      font-weight: 700;
      font-size: 16px;
      margin-bottom: 14px;
   }
   .ft-step__title {
   font-size: 16px;
   font-weight: 700;
   color: var(--ink-1);
   margin-bottom: 8px;
   }
   .ft-step__desc {
   font-size: 14px;
   color: var(--ink-2);
   line-height: 1.5;
   }
   
   /* Related free trials 3-col grid */
   .ft-related {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   max-width: 960px;
   margin: 0 auto;
   }
   .ft-related__card {
   display: block;
   padding: 24px 20px;
   background: var(--bg-1);
   border-radius: var(--radius-lg);
   border: 1px solid var(--line);
   text-decoration: none;
   color: var(--ink-1);
   text-align: center;
   transition: border-color 0.15s, box-shadow 0.15s;
   }
   .ft-related__card:hover {
   border-color: var(--brand);
   box-shadow: var(--shadow-2);
   text-decoration: none;
   color: var(--ink-1);
   }
   .ft-related__card-title {
   font-size: 15px;
   font-weight: 700;
   margin-bottom: 6px;
   }
   .ft-related__card-desc {
   font-size: 13px;
   color: var(--ink-3);
   }
   
   /* Mobile: single column */
   @media (max-width: 760px) {
   .ft-form-wrap {
       grid-template-columns: 1fr;
       gap: 32px;
   }
   .ft-card {
       position: static;
   }
   .ft-steps {
       grid-template-columns: 1fr;
       gap: 16px;
   }
   .ft-related {
       grid-template-columns: 1fr;
       gap: 12px;
   }
   }
   
   /* ── All Free Trials catalog grid ── */
   .ft-all-trials {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
   max-width: 960px;
   margin: 0 auto;
   }
   .ft-trial-card {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 12px 14px;
   background: var(--bg-1);
   border-radius: var(--radius);
   border: 1px solid var(--line);
   text-decoration: none;
   color: var(--ink-1);
   transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
   }
   .ft-trial-card:hover {
   border-color: var(--brand);
   box-shadow: var(--shadow-2);
   transform: translateY(-1px);
   text-decoration: none;
   color: var(--ink-1);
   }
   .ft-trial-card--current {
   border-color: var(--brand);
   background: var(--brand-soft);
   pointer-events: none;
   }
   .ft-trial-card__dot {
   flex-shrink: 0;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   }
   .ft-trial-card__dot--ig { background: #E1306C; }
   .ft-trial-card__dot--yt { background: #FF0000; }
   .ft-trial-card__dot--tg { background: #0088cc; }
   .ft-trial-card__dot--tt { background: #000; }
   [data-theme="dark"] .ft-trial-card__dot--tt { background: #fff; }
   .ft-trial-card__dot--fb { background: #1877F2; }
   .ft-trial-card__dot--tw { background: #000; }
   [data-theme="dark"] .ft-trial-card__dot--tw { background: #fff; }
   .ft-trial-card__dot--twitch { background: #9146FF; }
   .ft-trial-card__dot--discord { background: #5865F2; }
   .ft-trial-card__label {
   font-size: 13px;
   font-weight: 600;
   flex: 1;
   min-width: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   }
   .ft-trial-card__qty {
   font-size: 11px;
   color: var(--brand);
   font-weight: 700;
   white-space: nowrap;
   }
   
   /* Visible breadcrumb nav */
   .ft-breadcrumb {
   padding: 16px 0 0;
   font-size: 13px;
   color: var(--ink-3);
   }
   .ft-breadcrumb a {
   color: var(--ink-3);
   text-decoration: none;
   }
   .ft-breadcrumb a:hover { color: var(--brand); }
   .ft-breadcrumb__sep {
   margin: 0 6px;
   opacity: 0.5;
   }
   
   @media (max-width: 960px) {
   .ft-all-trials { grid-template-columns: repeat(3, 1fr); }
   }
   @media (max-width: 760px) {
   .ft-all-trials { grid-template-columns: repeat(2, 1fr); }
   }
   @media (max-width: 400px) {
   .ft-all-trials { grid-template-columns: 1fr; }
   }
   
   /* ── Quality & Safety cards (free trial pages) ── */
   .ft-quality {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   max-width: 1080px;
   margin: 0 auto;
   }
   .ft-quality__card {
   padding: 28px 24px;
   background: var(--bg-1);
   border-radius: var(--radius-lg);
   border: 1px solid var(--line);
   transition: border-color 0.15s, box-shadow 0.15s;
   }
   .ft-quality__card:hover {
   border-color: var(--ink-4);
   box-shadow: var(--shadow-2);
   }
   .ft-quality__icon {
   width: 44px;
   height: 44px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 16px;
   }
   .ft-quality__icon--delivery { background: var(--green-soft); color: var(--green); }
   .ft-quality__icon--retention { background: var(--blue-soft); color: var(--blue); }
   .ft-quality__icon--safety { background: var(--amber-soft); color: var(--amber); }
   .ft-quality__title {
   font-size: 16px;
   font-weight: 700;
   color: var(--ink-1);
   margin: 0 0 10px;
   }
   .ft-quality__desc {
   font-size: 14px;
   color: var(--ink-2);
   line-height: 1.6;
   margin: 0;
   }
   @media (max-width: 760px) {
   .ft-quality { grid-template-columns: 1fr; gap: 16px; }
   }
   
   /* ── Review Tabs + Carousel ── */
   .lp-review-tabs {
   display: flex;
   justify-content: center;
   gap: 4px;
   margin-bottom: 32px;
   background: var(--bg-2);
   border-radius: var(--radius);
   padding: 4px;
   max-width: 480px;
   margin-left: auto;
   margin-right: auto;
   }
   .lp-review-tab {
   flex: 1;
   padding: 10px 16px;
   border: none;
   background: none;
   font-size: 13px;
   font-weight: 600;
   color: var(--ink-2);
   cursor: pointer;
   border-radius: calc(var(--radius) - 2px);
   transition: all 0.15s;
   white-space: nowrap;
   }
   .lp-review-tab:hover { color: var(--ink-1); }
   .lp-review-tab.is-active {
   background: var(--bg-1);
   color: var(--ink-1);
   box-shadow: var(--shadow-1);
   }
   .lp-review-panel { display: none; }
   .lp-review-panel.is-active { display: block; }
   
   /* Dark tab bar variant (for --dark sections) */
   .lp-review-tabs--on-dark { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); }
   .lp-section--dark .lp-review-tab { color: rgba(255,255,255,0.5); }
   .lp-section--dark .lp-review-tab:hover { color: rgba(255,255,255,0.75); }
   .lp-section--dark .lp-review-tab.is-active { background: rgba(255,255,255,0.1); color: #fff; box-shadow: none; }
   .lp-review-carousel {
   position: relative;
   }
   .lp-review-carousel__track {
   display: flex;
   gap: 20px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
   padding: 4px 0 20px;
   scrollbar-width: none;
   }
   .lp-review-carousel__track::-webkit-scrollbar { display: none; }
   .lp-review-carousel .lp-review {
   flex: 0 0 calc(33.333% - 14px);
   scroll-snap-align: start;
   min-width: 0;
   }
   .lp-review-carousel__nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 36px;
   height: 36px;
   border-radius: 50%;
   border: 1px solid var(--line);
   background: var(--bg-1);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 2;
   transition: all 0.15s;
   color: var(--ink-2);
   }
   .lp-review-carousel__nav:hover {
   border-color: var(--brand);
   color: var(--brand);
   box-shadow: var(--shadow-2);
   }
   .lp-review-carousel__nav--prev { left: -18px; }
   .lp-review-carousel__nav--next { right: -18px; }
   .lp-review-carousel__nav svg { width: 16px; height: 16px; }
   @media (max-width: 960px) {
   .lp-review-carousel .lp-review { flex: 0 0 calc(50% - 10px); }
   }
   @media (max-width: 600px) {
   .lp-review-carousel .lp-review { flex: 0 0 85%; }
   .lp-review-carousel__nav { display: none; }
   }
   
   /* ── Interactive Price Calculator ── */
   .lp-calc {
   max-width: 720px;
   margin: 0 auto;
   background: var(--bg-1);
   border: 1px solid var(--line);
   border-radius: var(--radius-lg);
   padding: 32px;
   box-shadow: var(--shadow-2);
   }
   .lp-calc__cats {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 28px;
   justify-content: center;
   }
   .lp-calc__cat {
   padding: 8px 16px;
   border: 1px solid var(--line);
   border-radius: 999px;
   background: none;
   font-size: 13px;
   font-weight: 600;
   color: var(--ink-2);
   cursor: pointer;
   transition: all 0.15s;
   }
   .lp-calc__cat:hover { border-color: var(--ink-3); color: var(--ink-1); }
   .lp-calc__cat.is-active {
   background: var(--brand);
   color: #fff;
   border-color: var(--brand);
   }
   .lp-calc__amounts {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 16px;
   justify-content: center;
   }
   .lp-calc__amount {
   padding: 6px 14px;
   border: 1px solid var(--line);
   border-radius: var(--radius-sm);
   background: none;
   font-size: 13px;
   color: var(--ink-2);
   cursor: pointer;
   font-weight: 500;
   transition: all 0.15s;
   }
   .lp-calc__amount:hover { border-color: var(--ink-3); }
   .lp-calc__amount.is-active {
   border-color: var(--brand);
   background: var(--brand-soft);
   color: var(--brand);
   font-weight: 700;
   }
   .lp-calc__range {
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
   height: 8px;
   border-radius: 4px;
   background: var(--line);
   outline: none;
   margin: 16px 0;
   }
   .lp-calc__range::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: var(--brand);
   cursor: pointer;
   border: 3px solid var(--bg-1);
   box-shadow: 0 2px 8px rgba(0,0,0,0.15);
   }
   .lp-calc__range::-moz-range-thumb {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: var(--brand);
   cursor: pointer;
   border: 3px solid var(--bg-1);
   box-shadow: 0 2px 8px rgba(0,0,0,0.15);
   }
   .lp-calc__result {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 24px;
   background: var(--bg-2);
   border-radius: var(--radius);
   margin-top: 8px;
   }
   .lp-calc__result-info { display: flex; flex-direction: column; gap: 2px; }
   .lp-calc__result-label { font-size: 13px; color: var(--ink-3); }
   .lp-calc__result-qty { font-size: 15px; font-weight: 600; color: var(--ink-1); }
   .lp-calc__result-price { font-size: 28px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
   .lp-calc__discount {
   display: inline-block;
   margin-left: 8px;
   padding: 2px 8px;
   border-radius: 999px;
   background: var(--green-soft);
   color: var(--green);
   font-size: 11px;
   font-weight: 700;
   vertical-align: middle;
   }
   .lp-calc__cta {
   display: block;
   width: 100%;
   padding: 14px;
   margin-top: 20px;
   text-align: center;
   background: var(--brand);
   color: #fff;
   border: none;
   border-radius: var(--radius);
   font-size: 15px;
   font-weight: 700;
   cursor: pointer;
   text-decoration: none;
   transition: opacity 0.15s, transform 0.1s;
   }
   .lp-calc__cta:hover { opacity: 0.9; color: #fff; text-decoration: none; }
   .lp-calc__cta:active { transform: scale(0.98); }
   /* Scope simple calc CTA so later .lp-calc__cta override doesn't break it */
   .lp-calc[data-calc] > .lp-calc__cta {
   display: block;
   width: 100%;
   padding: 14px;
   margin-top: 20px;
   text-align: center;
   font-size: 15px;
   font-weight: 700;
   border-radius: var(--radius);
   background: var(--brand);
   color: #fff;
   text-decoration: none;
   }
   .lp-calc[data-calc] > .lp-calc__cta:hover { opacity: 0.9; color: #fff; text-decoration: none; }
   @media (max-width: 600px) {
   .lp-calc { padding: 20px 16px; }
   .lp-calc__result { flex-direction: column; gap: 8px; text-align: center; }
   }
   
   /* ── Tabbed FAQ ── */
   .lp-faq-tabs {
   display: flex;
   gap: 4px;
   margin-bottom: 32px;
   background: var(--bg-1);
   border-radius: var(--radius);
   padding: 4px;
   justify-content: center;
   flex-wrap: wrap;
   max-width: 560px;
   margin-left: auto;
   margin-right: auto;
   }
   .lp-faq-tab {
   padding: 8px 16px;
   border: none;
   background: none;
   font-size: 13px;
   font-weight: 600;
   color: var(--ink-2);
   cursor: pointer;
   border-radius: calc(var(--radius) - 2px);
   transition: all 0.15s;
   }
   .lp-faq-tab:hover { color: var(--ink-1); }
   .lp-faq-tab.is-active {
   background: var(--brand-soft);
   color: var(--brand);
   }
   .lp-faq-panel { display: none; }
   .lp-faq-panel.is-active { display: block; }
   
   /* ═════════════════════════════════════════════════════════════════
   LANDING PAGE CONVERSION UPGRADE — Phases 1-6
   ═════════════════════════════════════════════════════════════════ */
   
   /* ── Phase 4: Hero free $1 badge ── */
   .lp-hero__free-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-top: 14px;
   padding: 6px 14px;
   border-radius: 999px;
   background: oklch(0.95 0.05 145);
   color: oklch(0.38 0.12 145);
   font-size: 12px;
   font-weight: 600;
   line-height: 1;
   }
   [data-theme="dark"] .lp-hero__free-badge {
   background: oklch(0.25 0.06 145);
   color: oklch(0.78 0.15 145);
   }
   
   /* ── Video Testimonials Carousel ── */
   .lp-vtesti {
   background: var(--bg-1);
   overflow: hidden;
   }
   .lp-vtesti__carousel {
   position: relative;
   display: flex;
   align-items: center;
   gap: 12px;
   }
   .lp-vtesti__track-wrap {
   flex: 1;
   overflow: hidden;
   }
   .lp-vtesti__track {
   display: flex;
   gap: 20px;
   transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   /* ── Full-bleed portrait cards (morethanpanel style) ── */
   .lp-vtesti__card {
   flex: 0 0 calc((100% - 60px) / 4);
   min-width: 0;
   border-radius: 16px;
   overflow: hidden;
   position: relative;
   aspect-ratio: 3 / 4;
   cursor: pointer;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   }
   .lp-vtesti__card:hover {
   transform: scale(1.02);
   box-shadow: 0 12px 40px rgba(0,0,0,0.15);
   }
   
   /* Full-bleed background */
   .lp-vtesti__thumb {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
   }
   .lp-vtesti__thumb-gradient {
   position: absolute;
   inset: 0;
   background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.15) 100%);
   pointer-events: none;
   }
   
   /* Rating badge — top left (green Trustpilot style) */
   .lp-vtesti__rating {
   position: absolute;
   top: 12px;
   left: 12px;
   display: flex;
   align-items: center;
   gap: 5px;
   z-index: 2;
   }
   .lp-vtesti__rating-icon {
   width: 24px;
   height: 24px;
   border-radius: 4px;
   background: #33b377;
   display: flex;
   align-items: center;
   justify-content: center;
   }
   .lp-vtesti__rating-icon svg {
   width: 14px;
   height: 14px;
   fill: #fff;
   }
   .lp-vtesti__rating-num {
   color: #fff;
   font-size: 13px;
   font-weight: 700;
   text-shadow: 0 1px 4px rgba(0,0,0,0.4);
   }
   
   /* Date badge — top right */
   .lp-vtesti__date {
   position: absolute;
   top: 12px;
   right: 12px;
   display: flex;
   align-items: center;
   gap: 5px;
   color: rgba(255,255,255,0.9);
   font-size: 12px;
   font-weight: 500;
   z-index: 2;
   text-shadow: 0 1px 4px rgba(0,0,0,0.4);
   }
   .lp-vtesti__date svg {
   width: 16px;
   height: 16px;
   opacity: 0.85;
   }
   
   /* Play button — centered */
   .lp-vtesti__play {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: rgba(255,255,255,0.92);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 24px rgba(0,0,0,0.25);
   transition: transform 0.25s ease, box-shadow 0.25s ease;
   border: none;
   cursor: pointer;
   }
   .lp-vtesti__card:hover .lp-vtesti__play {
   transform: translate(-50%, -50%) scale(1.1);
   box-shadow: 0 6px 32px rgba(0,0,0,0.3);
   }
   .lp-vtesti__play svg {
   width: 20px;
   height: 20px;
   fill: var(--brand);
   margin-left: 3px;
   }
   
   /* Duration badge — bottom-left (above user) */
   .lp-vtesti__duration {
   position: absolute;
   bottom: 72px;
   left: 14px;
   z-index: 2;
   font-size: 11px;
   font-weight: 600;
   color: #fff;
   background: rgba(0,0,0,0.55);
   padding: 2px 7px;
   border-radius: 4px;
   letter-spacing: 0.02em;
   font-variant-numeric: tabular-nums;
   }
   
   /* Iframe for embedded video */
   .lp-vtesti__iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
   z-index: 3;
   }
   
   /* User info — bottom overlay */
   .lp-vtesti__user {
   position: absolute;
   bottom: 14px;
   left: 14px;
   right: 14px;
   display: flex;
   align-items: center;
   gap: 10px;
   z-index: 2;
   }
   .lp-vtesti__avatar {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   border: 2px solid rgba(255,255,255,0.5);
   overflow: hidden;
   flex-shrink: 0;
   background: rgba(255,255,255,0.15);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 15px;
   font-weight: 700;
   color: #fff;
   }
   .lp-vtesti__avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   }
   .lp-vtesti__name {
   display: flex;
   align-items: center;
   gap: 4px;
   font-size: 14px;
   font-weight: 700;
   color: #fff;
   text-shadow: 0 1px 4px rgba(0,0,0,0.5);
   line-height: 1.3;
   }
   .lp-vtesti__verified svg {
   width: 18px;
   height: 18px;
   }
   .lp-vtesti__role {
   display: block;
   font-size: 12px;
   color: rgba(255,255,255,0.75);
   font-style: italic;
   text-shadow: 0 1px 3px rgba(0,0,0,0.4);
   line-height: 1.3;
   }
   
   /* Navigation arrows */
   .lp-vtesti__arrow {
   flex-shrink: 0;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   border: 1px solid var(--border, rgba(0,0,0,0.1));
   background: var(--card-bg, #fff);
   color: var(--ink-1);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
   }
   .lp-vtesti__arrow:hover {
   background: var(--brand-soft);
   border-color: var(--brand);
   color: var(--brand);
   }
   [data-theme="dark"] .lp-vtesti__arrow {
   background: rgba(255,255,255,0.06);
   border-color: rgba(255,255,255,0.12);
   color: #fff;
   }
   [data-theme="dark"] .lp-vtesti__arrow:hover {
   background: rgba(240,101,67,0.15);
   border-color: var(--brand);
   color: var(--brand);
   }
   
   /* Dot indicators */
   .lp-vtesti__dots {
   display: flex;
   justify-content: center;
   gap: 8px;
   margin-top: 28px;
   }
   .lp-vtesti__dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   border: none;
   background: var(--ink-4, #ccc);
   cursor: pointer;
   padding: 0;
   transition: background 0.25s ease, transform 0.25s ease;
   }
   .lp-vtesti__dot--active {
   background: var(--brand);
   transform: scale(1.3);
   }
   
   /* Responsive: 3 cards on smaller desktop */
   @media (max-width: 1200px) {
   .lp-vtesti__card {
       flex: 0 0 calc((100% - 40px) / 3);
   }
   }
   /* Responsive: 2 cards on tablet */
   @media (max-width: 1023px) {
   .lp-vtesti__card {
       flex: 0 0 calc((100% - 20px) / 2);
   }
   }
   /* Responsive: 1 card on mobile */
   @media (max-width: 639px) {
   .lp-vtesti__card {
       flex: 0 0 85%;
   }
   .lp-vtesti__arrow {
       display: none;
   }
   .lp-vtesti__carousel {
       overflow-x: auto;
       scroll-snap-type: x mandatory;
       -webkit-overflow-scrolling: touch;
       scrollbar-width: none;
   }
   .lp-vtesti__carousel::-webkit-scrollbar { display: none; }
   .lp-vtesti__track-wrap {
       overflow: visible;
   }
   .lp-vtesti__card {
       scroll-snap-align: start;
   }
   }
   
   /* RTL support */
   html[dir="rtl"] .lp-vtesti__track {
   flex-direction: row-reverse;
   }
   html[dir="rtl"] .lp-vtesti__arrow--prev svg {
   transform: scaleX(-1);
   }
   html[dir="rtl"] .lp-vtesti__arrow--next svg {
   transform: scaleX(-1);
   }
   html[dir="rtl"] .lp-vtesti__date {
   right: auto;
   left: 12px;
   }
   html[dir="rtl"] .lp-vtesti__rating {
   left: auto;
   right: 12px;
   }
   
   /* ── Phase 5: Section CTAs ── */
   .lp-section-cta {
   text-align: center;
   padding-top: 26px;
   }
   .lp-section-cta__link {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   color: var(--brand);
   font-size: 14px;
   font-weight: 600;
   text-decoration: none;
   transition: opacity 0.15s;
   }
   .lp-section-cta__link:hover {
   opacity: 0.8;
   text-decoration: none;
   color: var(--brand);
   }
   
   /* ── Price calculator ── */
   .lp-calc {
   display: flex;
   flex-direction: column;
   gap: 28px;
   background: linear-gradient(180deg, #fff9f7 0%, var(--bg-1) 100%);
   border: 1.5px solid #fde0d2;
   border-radius: var(--radius-lg);
   padding: 32px;
   box-shadow: 0 2px 8px rgba(240,101,67,0.06), 0 8px 24px rgba(15,23,42,0.04);
   }
   [data-theme="dark"] .lp-calc {
   background: linear-gradient(180deg, rgba(240,101,67,0.06) 0%, var(--bg-1) 100%);
   border-color: rgba(240,101,67,0.15);
   }
   /* ── Calculator v2 (Figma) ── */
   .lp-calc2 {
      --calc-accent: #f06543;
      --calc-accent-soft: rgba(240, 101, 67, 0.08);
      --calc-accent-gradient: linear-gradient(90deg, #ff6255, #ff8d64);
      --calc-plat-active: #2AA0DB;
      display: flex;
      flex-direction: column;
      gap: 20px;
      background: rgba(255, 255, 255, 0.3) !important;
      border: 1px solid #ffffff !important;
      border-radius: 8px !important;
      padding: 30px 100px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
      overflow: visible;
   }
   
   .lp-calc2__step {
      margin-bottom: 0;
      overflow: visible;
   }
   
   .lp-calc2__step:last-of-type {
      margin-bottom: 0;
   }
   
   .lp-calc2__label {
   display: block;
   font-size: 15px;
   font-weight: 700;
   color: var(--ink-1);
   margin-bottom: 14px;
   }
   .lp-calc2__label span {
   font-weight: 400;
   color: var(--ink-3);
   }
   
   /* ── Platform carousel ── */
   .lp-calc2__carousel-wrap {
      display: flex;
      align-items: center;
      position: relative;
      width: 100%;
      overflow: visible;
   }
   
   .lp-calc2__arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1.5px solid var(--line);
      background: var(--bg-1);
      color: var(--ink-2);
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
   }
   
   .lp-calc2__arrow--prev {
      left: -62px;
   }
   
   .lp-calc2__arrow--next {
      right: -62px;
   }
   
   .lp-calc2__arrow:hover {
      border-color: var(--ink-3);
      color: var(--ink-1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   }
   
   .lp-calc2__carousel {
      flex: 1;
      overflow: hidden;
      position: relative;
      padding: 6px 0 16px;
      box-sizing: border-box;
   }
   
   .lp-calc2__carousel-track {
      display: flex;
      gap: 20px !important;
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform;
      padding-bottom: 2px;
   }
   
   .lp-calc2__plat {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center !important;
      gap: 6px !important;
      width: calc((100% - 140px) / 8) !important;
      min-width: 80px;
      height: 102px !important;
      padding: 12px 4px !important;
      border: none !important;
      border-radius: 8px !important;
      background: #ffffff !important;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
      --plat-color: #498CE8;
      --plat-bg: #498CE8;
      --plat-text: #ffffff;
      --plat-shadow: rgba(73, 140, 232, 0.35);
      --plat-hover-bg: rgba(73, 140, 232, 0.05);
      color: var(--ink-2);
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
   }
   
   .lp-calc2__plat:hover:not(.is-active) {
      background: #ffffff !important;
      color: var(--plat-color) !important;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
      transform: none;
   }
   
   .lp-calc2__plat.is-active {
      background: var(--plat-bg) !important;
      border: none !important;
      color: var(--plat-text) !important;
      box-shadow: 0 4px 12px var(--plat-shadow) !important;
   }
   
   
   .lp-calc2__plat-icon {
      width: 32px !important;
      height: 32px !important;
      flex-shrink: 0;
      color: var(--shell-icon);
      transition: color 0.15s;
   }
   .lp-calc2__plat:hover:not(.is-active) .lp-calc2__plat-icon,
   .lp-calc2__plat:hover:not(.is-active) .lp-calc2__plat-name {
      color: var(--plat-color);
   }
   .lp-calc2__plat.is-active .lp-calc2__plat-icon {
      color: var(--plat-text) !important;
   }
   .lp-calc2__plat.is-active .lp-calc2__plat-name {
      color: var(--plat-text) !important;
   }
   .lp-calc2__plat-name {
      font-family: 'Inter', sans-serif;
      font-size: 14px !important;
      font-weight: 600 !important;
      white-space: nowrap;
      line-height: 1.2 !important;
      text-align: center;
   }
   
   /* Dots */
   .lp-calc2__dots {
   display: flex;
   justify-content: center;
   gap: 6px;
   margin-top: 14px;
   }
   .lp-calc2__dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   border: none;
   background: var(--line);
   cursor: pointer;
   padding: 0;
   transition: background 0.15s, transform 0.15s;
   }
   .lp-calc2__dot.is-active {
   background: var(--calc-accent);
   transform: scale(1.25);
   }
   
   /* ── Service filter pills ── */
   .lp-calc2__services {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   }
   .lp-calc2__svc-pill {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 50px;
   padding: 5px 30px;
   box-sizing: border-box;
   border: 1px solid var(--line);
   border-radius: 100px;
   background: #ffffff;
   color: var(--shell-item);
   font-family: 'Inter', sans-serif;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
   line-height: 1.3;
   white-space: nowrap;
   }
   .lp-calc2__svc-pill:hover:not(.is-active) {
   background: rgba(255, 255, 255, 0.3);
   border-color: #ffffff;
   color: var(--shell-item);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   }
   .lp-calc2__svc-pill.is-active {
   background: var(--brand);
   border-color: var(--brand);
   color: #fff;
   box-shadow: 0 10px 20px rgba(73, 140, 232, 0.25);
   }
   .lp-calc2__svc-pill.is-active:hover {
   background: var(--brand);
   border-color: var(--brand);
   color: #fff;
   }
   
   /* ── Quantity slider ── */
   .lp-calc2__qty-row {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   margin-bottom: 14px;
   }
   .lp-calc2__qty-row .lp-calc2__label { margin-bottom: 0; }
   .lp-calc2__qty-display {
   font-family: 'Plus Jakarta Sans', var(--ff-base);
   font-size: 32px;
   font-weight: 800;
   color: var(--ink-1);
   line-height: 1;
   font-variant-numeric: tabular-nums;
   }
   .lp-calc2__slider-wrap {
   position: relative;
   }
   .lp-calc2__slider {
   width: 100%;
   -webkit-appearance: none;
   appearance: none;
   height: 8px;
   border-radius: 999px;
   background: linear-gradient(
       to right,
       #f06543 0%,
       #f5874e var(--fill, 33%),
       var(--line) var(--fill, 33%),
       var(--line) 100%
   );
   outline: none;
   cursor: pointer;
   }
   .lp-calc2__slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: var(--calc-accent);
   border: 3px solid #fff;
   box-shadow: 0 2px 10px rgba(240,101,67,0.35);
   cursor: pointer;
   transition: transform 0.12s, box-shadow 0.12s;
   }
   .lp-calc2__slider::-webkit-slider-thumb:hover {
   transform: scale(1.15);
   box-shadow: 0 3px 14px rgba(240,101,67,0.45);
   }
   .lp-calc2__slider::-moz-range-thumb {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: var(--calc-accent);
   border: 3px solid #fff;
   box-shadow: 0 2px 10px rgba(240,101,67,0.35);
   cursor: pointer;
   }
   .lp-calc2__tier-labels {
   display: flex;
   justify-content: space-between;
   padding: 0 2px;
   margin-top: 8px;
   }
   .lp-calc2__tier-labels span {
   font-size: 11px;
   color: var(--ink-3);
   font-weight: 500;
   }
   
   /* ── Result bar ── */
   .lp-calc2__result {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 20px 30px !important;
      background: rgba(255, 255, 255, 0.3) !important;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid #ffffff !important;
      border-left: 4px solid var(--calc-accent) !important;
      border-right: 4px solid var(--calc-accent) !important;
      border-radius: 8px !important;
      margin-bottom: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
      min-height: 107px !important;
   }
   .lp-calc2__result-top {
   display: flex;
   align-items: baseline;
   gap: 10px;
   }
   .lp-calc2__result-price {
      font-family: 'Poppins', sans-serif;
      font-size: 36px !important;
      font-weight: 600 !important;
      color: var(--green) !important;
      line-height: 36px !important;
      font-variant-numeric: tabular-nums;
   }
   .lp-calc2__result-total-label {
   font-size: 14px;
   font-weight: 600;
   color: var(--ink-3);
   }
   .lp-calc2__result-rate {
   font-size: 13px;
   font-weight: 500;
   color: var(--ink-3);
   }
   .lp-calc2__cta {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 24px;
   min-width: 218px;
   height: 50px;
   padding: 13px 54px;
   box-sizing: border-box;
   border: none;
   border-radius: 8px;
   background: var(--calc-accent-gradient);
   color: #ffffff;
   font-family: 'Inter', sans-serif;
   font-size: 16px;
   font-weight: 700;
   line-height: 1;
   text-decoration: none;
   white-space: nowrap;
   flex-shrink: 0;
   cursor: pointer;
   transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, filter 0.2s ease;
   box-shadow: 0 6px 10px rgba(140, 45, 20, 0.22);
   }
   .lp-calc2__cta svg {
   width: 14px;
   height: 14px;
   flex-shrink: 0;
   transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
   }
   .lp-calc2__cta:hover {
   transform: translateY(-1px);
   filter: brightness(1.04);
   box-shadow: 0 8px 14px rgba(140, 45, 20, 0.26);
   color: #ffffff;
   text-decoration: none;
   }
   .lp-calc2__cta:hover svg {
   transform: translateX(3px);
   }
   .lp-calc2__cta:active {
   transform: translateY(0);
   filter: brightness(0.98);
   box-shadow: 0 4px 8px rgba(140, 45, 20, 0.18);
   }
   
   /* Trust badges */
   .lp-calc2__badges {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 6px 16px;
   font-size: 12px;
   color: var(--ink-3);
   }
   .lp-calc2__badges span { white-space: nowrap; }
   
   /* ── Mobile responsive ── */
   @media (max-width: 991px) {
      .lp-calc2 {
         padding: 30px 40px;
      }
      .lp-calc2__carousel-wrap {
         padding: 0 44px !important;
      }
      .lp-calc2__arrow {
         position: absolute !important;
         top: 50% !important;
         transform: translateY(-50%) !important;
      }
      .lp-calc2__arrow--prev {
         left: 0 !important;
      }
      .lp-calc2__arrow--next {
         right: 0 !important;
      }
      .lp-calc2__carousel {
         padding-bottom: 22px;
      }
      .lp-calc2__plat {
         width: calc((100% - 100px) / 6) !important;
      }
   }
   
   @media (max-width: 600px) {
      .lp-calc2 {
         padding: 24px 16px 20px;
      }
      .lp-calc2__carousel-wrap {
         padding: 0 40px !important;
      }
      .lp-calc2__carousel {
         padding-bottom: 22px;
      }
      .lp-calc2__arrow {
         position: absolute !important;
         top: 50% !important;
         transform: translateY(-50%) !important;
         width: 30px !important;
         height: 30px !important;
      }
      .lp-calc2__arrow--prev {
         left: 0 !important;
      }
      .lp-calc2__arrow--next {
         right: 0 !important;
      }
      .lp-calc2__carousel-track {
         gap: 10px !important;
      }
      .lp-calc2__plat {
         width: calc((100% - 20px) / 3) !important;
         min-width: 72px;
         height: auto !important;
         min-height: 72px;
         padding: 10px 4px !important;
         gap: 6px !important;
         justify-content: center !important;
      }

      .lp-calc2__plat-icon {
         width: 22px !important;
         height: 22px !important;
      }

      .lp-calc2__plat-name {
         font-size: 11px !important;
         line-height: 1.2 !important;
      }
   
      .lp-calc2__qty-display {
         font-size: 26px;
      }
   
      .lp-calc2__result {
         flex-direction: column;
         text-align: center;
         padding: 16px !important;
         min-height: auto !important;
      }
   
      .lp-calc2__result-left {
         align-items: center;
      }
   
      .lp-calc2__result-top {
         justify-content: center;
      }
   
      .lp-calc2__cta {
         width: 100%;
         min-width: 0;
         padding: 13px 24px;
         gap: 16px;
      }
   
      .lp-calc2__arrow {
         width: 30px;
         height: 30px;
      }
   }
   
   @media (max-width: 400px) {
      .lp-calc2__tier-labels span:nth-child(even) {
         display: none;
      }
   }
   
   /* ── Phase 2: Trust ticker ── */
   .lp-ticker {
   overflow: hidden;
   transform: rotate(-2deg);
   margin: 0 -5vw;
   padding: 18px 0;
   background: linear-gradient(135deg, var(--brand-strong, #e85d3a), var(--brand), #f5874e);
   color: #fff;
   position: relative;
   z-index: 1;
   box-shadow: 0 4px 16px rgba(240,101,67,0.2);
   }
   .lp-ticker__track {
   display: flex;
   white-space: nowrap;
   animation: lp-marquee 35s linear infinite;
   }
   .lp-ticker__item {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   margin-right: 48px;
   font-size: 15px;
   font-weight: 700;
   flex-shrink: 0;
   letter-spacing: 0.01em;
   }
   .lp-ticker__item svg {
   width: 16px;
   height: 16px;
   stroke: #fff;
   fill: none;
   flex-shrink: 0;
   }
   @keyframes lp-marquee {
   from { transform: translateX(0); }
   to   { transform: translateX(-50%); }
   }
   @media (prefers-reduced-motion: reduce) {
   .lp-ticker__track { animation-play-state: paused; }
   }
   
   /* ── Phase 6: Sticky mobile bar ── */
   .lp-sticky-bar {
   display: none;
   }
   @media (max-width: 760px) {
   .lp-sticky-bar {
       display: flex;
       align-items: center;
       gap: 8px;
       position: fixed;
       bottom: 0;
       left: 0;
       right: 0;
       z-index: 1000;
       padding: 10px 16px;
       padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
       background: var(--bg-1);
       border-top: 1px solid var(--line);
       box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
   }
   .lp-sticky-bar[hidden] { display: none; }
   .lp-sticky-bar__btn {
       flex: 1;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 6px;
       padding: 12px 20px;
       border-radius: 8px;
       background: var(--brand);
       color: #fff;
       font-size: 15px;
       font-weight: 700;
       text-decoration: none;
       transition: opacity 0.15s;
   }
   .lp-sticky-bar__btn:hover { opacity: 0.9; color: #fff; text-decoration: none; }
   .lp-sticky-bar__x {
       flex-shrink: 0;
       width: 36px;
       height: 36px;
       display: flex;
       align-items: center;
       justify-content: center;
       border: none;
       border-radius: 50%;
       background: var(--bg-2);
       color: var(--ink-3);
       font-size: 18px;
       cursor: pointer;
       transition: background 0.15s;
   }
   .lp-sticky-bar__x:hover { background: var(--bg-3, var(--bg-2)); }
   
   /* Hide existing mobile sign-in pill when sticky bar is active */
   .lp-mobile-signin { display: none; }
   }
   
   /* ============================================================
   VISUAL REDESIGN — May 2026
   ============================================================ */
   
   /* --- Floating hero notification cards (Change 2) --- */
   .lp-hero__visual { position: relative; }
   .lp-hero__notif {
   position: absolute; z-index: 2;
   display: flex; align-items: center; gap: 10px;
   padding: 10px 16px; border-radius: 12px;
   background: rgba(255,255,255,0.92); backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(0,0,0,0.06);
   box-shadow: 0 8px 32px rgba(0,0,0,0.08);
   font-size: 13px; white-space: nowrap;
   animation: notif-float 4s ease-in-out infinite;
   }
   [data-theme="dark"] .lp-hero__notif {
   background: rgba(30,30,36,0.88); border-color: rgba(255,255,255,0.08);
   }
   .lp-hero__notif--top { top: 15%; right: -10px; animation-delay: 0s; }
   .lp-hero__notif--bottom { bottom: 20%; left: -10px; animation-delay: 2s; }
   .lp-hero__notif strong { display: block; font-weight: 600; color: var(--ink-1); }
   .lp-hero__notif span { font-size: 11px; color: var(--ink-3); }
   .lp-hero__notif-icon {
   width: 32px; height: 32px; border-radius: 8px;
   display: flex; align-items: center; justify-content: center;
   flex-shrink: 0;
   }
   .lp-hero__notif-icon--ig { background: #fce4ec; }
   .lp-hero__notif-icon--tg { background: #e3f2fd; }
   [data-theme="dark"] .lp-hero__notif-icon--ig { background: rgba(225,48,108,0.15); }
   [data-theme="dark"] .lp-hero__notif-icon--tg { background: rgba(42,171,238,0.15); }
   @keyframes notif-float {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-8px); }
   }
   @media (prefers-reduced-motion: reduce) { .lp-hero__notif { animation: none; } }
   @media (max-width: 1080px) { .lp-hero__notif { display: none; } }
   
   /* --- Dark section variant (Change 3) — for testimonials --- */
   .lp-section--dark {
   background: linear-gradient(180deg, #0f1117 0%, #1a1d2b 100%);
   color: #e2e8f0;
   }
   .lp-section--dark .lp-h2 { color: #fff; }
   .lp-section--dark .lp-section__sub { color: rgba(255,255,255,0.6); }
   
   /* --- Mesh gradient section (Change 3) — for How It Works --- */
   .lp-section--mesh {
   background:
       radial-gradient(ellipse at 20% 50%, rgba(240,101,67,0.06) 0%, transparent 50%),
       radial-gradient(ellipse at 80% 50%, rgba(251,191,36,0.05) 0%, transparent 50%),
       var(--bg-1);
   }
   [data-theme="dark"] .lp-section--mesh {
   background:
       radial-gradient(ellipse at 20% 50%, rgba(240,101,67,0.08) 0%, transparent 50%),
       radial-gradient(ellipse at 80% 50%, rgba(251,191,36,0.06) 0%, transparent 50%),
       var(--bg-1);
   }
   
   /* --- Dark testimonial card overrides (Change 4) --- */
   .lp-section--dark .lp-testimonial {
   background: rgba(255,255,255,0.05);
   border-color: rgba(255,255,255,0.08);
   }
   .lp-section--dark .lp-testimonial:hover {
   border-color: rgba(240,101,67,0.3);
   box-shadow: 0 4px 16px rgba(0,0,0,0.2);
   }
   .lp-section--dark .lp-testimonial__body { color: rgba(255,255,255,0.85); }
   .lp-section--dark .lp-testimonial__name { color: #fff; }
   .lp-section--dark .lp-testimonial__role { color: rgba(255,255,255,0.5); }
   .lp-section--dark .lp-testimonial__avatar { box-shadow: 0 0 0 2px rgba(251,191,36,0.3); }
   .lp-section--dark .lp-testimonial-stat {
   background: rgba(255,255,255,0.05);
   border-color: rgba(255,255,255,0.08);
   }
   .lp-section--dark .lp-testimonial-stat__num { color: #fff; }
   .lp-section--dark .lp-testimonial-stat__label { color: rgba(255,255,255,0.5); }
   
   /* Video carousel in dark section */
   .lp-section--dark .lp-vtesti__arrow { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.08); }
   .lp-section--dark .lp-vtesti__arrow:hover { background: rgba(255,255,255,0.12); }
   .lp-section--dark .lp-vtesti__dot { background: rgba(255,255,255,0.25); }
   .lp-section--dark .lp-vtesti__dot--active { background: var(--brand); }
   
   /* --- Platform focus gradient border (removed) --- */
   
   /* ============================================================
   PLATFORM SMM PANEL PAGES
   ============================================================ */
   
   /* Service tabs */
   .lp-svc-tabs {
   display: flex; gap: 8px; flex-wrap: wrap;
   margin-bottom: 24px;
   }
   .lp-svc-tab {
   padding: 8px 18px; border-radius: 8px; border: 1px solid var(--line);
   background: var(--bg-1); color: var(--ink-2);
   font-size: 13.5px; font-weight: 500; cursor: pointer;
   transition: background .15s, color .15s, border-color .15s;
   }
   .lp-svc-tab:hover { border-color: var(--brand); color: var(--ink-1); }
   .lp-svc-tab.is-active {
   background: var(--brand); color: #fff; border-color: var(--brand);
   }
   
   /* Service panel (shown/hidden by tab) */
   .lp-svc-panel { display: none; }
   .lp-svc-panel.is-active { display: block; }
   
   /* ── Content area — structured card layout for platform info ── */
   .lp-content {
   max-width: 840px; margin: 0 auto;
   font-size: 15px; line-height: 1.7; color: var(--ink-2);
   }
   .lp-content p { margin-bottom: 14px; }
   .lp-content a {
   color: var(--brand); text-decoration: none; font-weight: 500;
   transition: color .15s;
   }
   .lp-content a:hover { text-decoration: underline; }
   
   /* Intro card */
   .lp-content__intro {
   background: var(--bg-2); border-radius: 12px;
   padding: 24px 28px; margin: 20px 0 0;
   }
   .lp-content__intro p:last-child { margin-bottom: 0; }
   
   /* Collapsible sub-sections */
   .lp-content__section { margin-top: 28px; }
   .lp-content__heading {
   display: flex; align-items: center; justify-content: space-between;
   padding: 12px 0; margin-bottom: 16px;
   font-size: 16px; font-weight: 700; color: var(--ink-1);
   cursor: pointer;
   border-bottom: 2px solid var(--line);
   list-style: none; user-select: none;
   transition: border-color .2s;
   }
   .lp-content__heading::-webkit-details-marker { display: none; }
   .lp-content__heading::marker { display: none; content: ""; }
   .lp-content__section[open] > .lp-content__heading {
   border-bottom-color: var(--brand);
   }
   .lp-content__heading::after {
   content: "";
   width: 8px; height: 8px; flex-shrink: 0; margin-left: 12px;
   border-right: 2px solid var(--ink-3);
   border-bottom: 2px solid var(--ink-3);
   transform: rotate(45deg);
   transition: transform .2s;
   }
   .lp-content__section[open] > .lp-content__heading::after {
   transform: rotate(-135deg);
   }
   
   /* Info cards grid (why-use / who-uses) */
   .lp-info-grid {
   display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
   }
   .lp-info-card {
   background: var(--bg-2); border: 1px solid var(--line);
   border-radius: 8px; padding: 18px 20px;
   transition: border-color .15s, box-shadow .15s;
   }
   .lp-info-card:hover {
   border-color: var(--brand);
   box-shadow: 0 2px 12px rgba(0,0,0,0.04);
   }
   .lp-info-card__title {
   font-size: 14px; font-weight: 600; color: var(--ink-1);
   margin-bottom: 8px; line-height: 1.35;
   }
   .lp-info-card p {
   font-size: 13.5px; color: var(--ink-3); line-height: 1.55; margin: 0;
   }
   
   /* ── Service showcase — tabbed categories + service cards ── */
   .lp-svc-showcase {}
   .lp-svc-showcase__cats {
   display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px;
   }
   .lp-svc-cat {
   padding: 7px 16px; border-radius: 20px;
   border: 1px solid var(--line); background: var(--bg-1);
   color: var(--ink-2); font-size: 13px; font-weight: 500;
   cursor: pointer; transition: all .15s; white-space: nowrap;
   }
   .lp-svc-cat:hover { border-color: var(--brand); color: var(--ink-1); }
   .lp-svc-cat.is-active {
   background: var(--brand); color: #fff; border-color: var(--brand);
   }
   .lp-svc-showcase__panel { display: none; }
   .lp-svc-showcase__panel.is-active { display: block; }
   .lp-svc-showcase__grid {
   display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
   }
   .lp-svc-card {
   background: var(--bg-2); border: 1px solid var(--line);
   border-radius: 12px; padding: 20px; position: relative;
   display: flex; flex-direction: column; gap: 10px;
   transition: border-color .15s, box-shadow .2s;
   }
   .lp-svc-card:hover {
   border-color: var(--brand);
   box-shadow: 0 4px 20px rgba(0,0,0,0.06);
   }
   .lp-svc-card__badge {
   position: absolute; top: 12px; right: 12px;
   padding: 3px 8px; border-radius: 6px;
   background: var(--brand); color: #fff;
   font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
   }
   .lp-svc-card__name {
   font-size: 14.5px; font-weight: 600; color: var(--ink-1);
   line-height: 1.35; padding-right: 50px;
   }
   .lp-svc-card__meta {
   display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
   }
   .lp-svc-card__price {
   font-size: 22px; font-weight: 700; color: var(--brand);
   line-height: 1;
   }
   .lp-svc-card__unit {
   font-size: 12px; color: var(--ink-3); font-weight: 500;
   }
   .lp-svc-card__range {
   font-size: 12px; color: var(--ink-3);
   padding: 3px 8px; border-radius: 6px;
   background: var(--bg-1); border: 1px solid var(--line);
   }
   .lp-svc-card__desc {
   font-size: 13px; color: var(--ink-3); line-height: 1.5;
   margin: 0; flex: 1;
   }
   .lp-svc-card__order {
   display: inline-flex; align-items: center; justify-content: center;
   gap: 6px; padding: 9px 18px; border-radius: 8px;
   background: var(--brand); color: #fff;
   font-size: 13px; font-weight: 600; text-decoration: none;
   transition: opacity .15s; align-self: flex-start;
   }
   .lp-svc-card__order:hover { opacity: .88; color: #fff; text-decoration: none; }
   .lp-svc-card__order svg { width: 13px; height: 13px; }
   
   /* ── Guide carousel — horizontal scroll-snap square cards ── */
   .lp-guide-carousel { position: relative; }
   .lp-guide-carousel__track {
   display: flex; gap: 14px;
   overflow-x: auto; scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none; padding: 4px 0 8px;
   }
   .lp-guide-carousel__track::-webkit-scrollbar { display: none; }
   .lp-guide-card {
   flex: 0 0 200px; scroll-snap-align: start;
   aspect-ratio: 1; border-radius: 8px;
   background: var(--bg-2); border: 1px solid var(--line);
   padding: 20px; display: flex; flex-direction: column;
   justify-content: space-between;
   text-decoration: none; color: inherit;
   transition: border-color .15s, transform .2s, box-shadow .2s;
   overflow: hidden; position: relative;
   }
   .lp-guide-card:hover {
   border-color: var(--brand); transform: translateY(-3px);
   box-shadow: 0 8px 24px rgba(0,0,0,0.07);
   text-decoration: none; color: inherit;
   }
   .lp-guide-card__icon {
   width: 40px; height: 40px; border-radius: 8px;
   display: flex; align-items: center; justify-content: center;
   background: rgba(240,101,67,0.08); color: var(--brand);
   flex-shrink: 0;
   }
   [data-theme="dark"] .lp-guide-card__icon {
   background: rgba(240,101,67,0.12);
   }
   .lp-guide-card__title {
   font-size: 14px; font-weight: 600; color: var(--ink-1);
   line-height: 1.35; margin: 0;
   }
   .lp-guide-card__arrow {
   display: flex; align-items: center; gap: 4px;
   font-size: 12px; font-weight: 600; color: var(--brand);
   }
   .lp-guide-card:hover .lp-guide-card__arrow svg { transform: translateX(3px); }
   .lp-guide-card__arrow svg {
   width: 14px; height: 14px; transition: transform .15s;
   }
   /* Carousel navigation arrows */
   .lp-guide-carousel__nav {
   position: absolute; top: 50%; transform: translateY(-50%);
   width: 34px; height: 34px; border-radius: 50%;
   background: var(--bg-1); border: 1px solid var(--line);
   display: flex; align-items: center; justify-content: center;
   cursor: pointer; z-index: 2;
   box-shadow: 0 2px 8px rgba(0,0,0,0.08);
   transition: border-color .15s, box-shadow .15s;
   color: var(--ink-2);
   }
   .lp-guide-carousel__nav:hover {
   border-color: var(--brand); color: var(--brand);
   box-shadow: 0 2px 12px rgba(0,0,0,0.12);
   }
   .lp-guide-carousel__nav--prev { left: -12px; }
   .lp-guide-carousel__nav--next { right: -12px; }
   .lp-guide-carousel__nav svg { width: 16px; height: 16px; }
   
   /* Content area responsive */
   @media (max-width: 700px) {
   .lp-info-grid { grid-template-columns: 1fr; }
   .lp-svc-showcase__grid { grid-template-columns: 1fr; }
   .lp-content__intro { padding: 18px 20px; }
   .lp-content__heading { font-size: 15px; }
   .lp-guide-card { flex: 0 0 170px; }
   .lp-guide-carousel__nav { display: none; }
   }
   @media (min-width: 701px) and (max-width: 900px) {
   .lp-svc-showcase__grid { grid-template-columns: 1fr 1fr; }
   }
   
   /* Steps grid */
   .lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
   .lp-step {
   background: var(--bg-1); border: 1px solid var(--line);
   border-radius: 12px; padding: 24px; position: relative;
   }
   .lp-step__num {
   width: 32px; height: 32px; border-radius: 8px;
   background: var(--brand); color: #fff;
   display: inline-flex; align-items: center; justify-content: center;
   font-size: 14px; font-weight: 700; margin-bottom: 12px;
   }
   .lp-step__title { font-size: 15px; font-weight: 600; color: var(--ink-1); margin-bottom: 6px; }
   .lp-step__desc { font-size: 13.5px; color: var(--ink-3); line-height: 1.55; }
   
   /* Why-choose grid (reusable) */
   .lp-reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
   .lp-reason {
   background: var(--bg-1); border: 1px solid var(--line);
   border-radius: 12px; padding: 24px;
   }
   .lp-reason__icon {
   width: 40px; height: 40px; border-radius: 8px;
   background: var(--brand-muted, rgba(239,68,68,0.08));
   display: inline-flex; align-items: center; justify-content: center;
   margin-bottom: 12px; color: var(--brand);
   }
   .lp-reason__title { font-size: 15px; font-weight: 600; color: var(--ink-1); margin-bottom: 6px; }
   .lp-reason__desc { font-size: 13.5px; color: var(--ink-3); line-height: 1.55; }
   
   /* Cross-link cards at bottom */
   .lp-cross-links {
   display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
   }
   .lp-cross-link {
   display: flex; flex-direction: column; gap: 6px;
   background: var(--bg-1); border: 1px solid var(--line);
   border-radius: 12px; padding: 20px;
   text-decoration: none; color: inherit;
   transition: border-color .15s, transform .15s;
   }
   .lp-cross-link:hover { border-color: var(--brand); transform: translateY(-2px); text-decoration: none; color: inherit; }
   .lp-cross-link__name { font-size: 15px; font-weight: 600; color: var(--ink-1); }
   .lp-cross-link__meta { font-size: 12px; color: var(--ink-3); }
   
   @media (max-width: 900px) {
   .lp-steps { grid-template-columns: 1fr; }
   .lp-reasons { grid-template-columns: 1fr 1fr; }
   .lp-cross-links { grid-template-columns: 1fr 1fr; }
   }
   @media (max-width: 600px) {
   .lp-reasons { grid-template-columns: 1fr; }
   .lp-cross-links { grid-template-columns: 1fr; }
   .lp-svc-tabs { gap: 6px; }
   .lp-svc-tab { padding: 6px 14px; font-size: 12px; }
   }
   
   /* ============================================================
   PLATFORM ACCENT COLOUR SYSTEM
   ============================================================ */
   .lp[data-platform="instagram"]  { --plat: #E4405F; --plat-soft: rgba(228,64,95,0.10); --plat-glow: rgba(228,64,95,0.30); }
   .lp[data-platform="telegram"]   { --plat: #26A5E4; --plat-soft: rgba(38,165,228,0.10); --plat-glow: rgba(38,165,228,0.30); }
   .lp[data-platform="youtube"]    { --plat: #FF0000; --plat-soft: rgba(255,0,0,0.10);    --plat-glow: rgba(255,0,0,0.25); }
   .lp[data-platform="tiktok"]     { --plat: #00F2EA; --plat-soft: rgba(0,242,234,0.12);  --plat-glow: rgba(0,242,234,0.25); }
   .lp[data-platform="twitter"]    { --plat: #000000; --plat-soft: rgba(0,0,0,0.07); --plat-glow: rgba(0,0,0,0.12); }
   .lp[data-platform="facebook"]   { --plat: #1877F2; --plat-soft: rgba(24,119,242,0.10); --plat-glow: rgba(24,119,242,0.30); }
   .lp[data-platform="spotify"]    { --plat: #1DB954; --plat-soft: rgba(29,185,84,0.10);  --plat-glow: rgba(29,185,84,0.30); }
   .lp[data-platform="twitch"]     { --plat: #9146FF; --plat-soft: rgba(145,70,255,0.10); --plat-glow: rgba(145,70,255,0.30); }
   
   /* Accent overrides for platform pages */
   .lp[data-platform] .lp-step__num          { background: var(--plat); }
   .lp[data-platform] .lp-svc-tab.is-active  { background: var(--plat); border-color: var(--plat); }
   .lp[data-platform] .lp-svc-tab:hover      { border-color: var(--plat); }
   .lp[data-platform] .lp-svc-cat.is-active  { background: var(--plat); border-color: var(--plat); }
   .lp[data-platform] .lp-svc-card__badge    { background: var(--plat); }
   .lp[data-platform] .lp-svc-card__price    { color: var(--plat); }
   .lp[data-platform] .lp-pkg-card__price    { color: var(--plat); }
   .lp[data-platform] .lp-reason__icon        { background: var(--plat-soft); color: var(--plat); }
   .lp[data-platform] .lp-pkg-card__feats li::before { color: var(--plat); }
   .lp[data-platform] .lp-guide-card__icon    { background: var(--plat-soft); color: var(--plat); }
   .lp[data-platform] .lp-hero__glow--a       { background: radial-gradient(circle, var(--plat-glow), transparent 70%); }
   .lp[data-platform] .lp-pkg-rain__icon      { color: var(--plat); }
   .lp[data-platform] .lp-faq__item[open]     { border-color: var(--plat); }
   .lp[data-platform] .lp-faq__item[open] summary::after { color: var(--plat); }
   .lp[data-platform] .lp-content__section[open] > .lp-content__heading { border-bottom-color: var(--plat); }
   
   /* TikTok special: cyan is too light on white text, darken for bg use */
   .lp[data-platform="tiktok"] .lp-step__num,
   .lp[data-platform="tiktok"] .lp-svc-tab.is-active,
   .lp[data-platform="tiktok"] .lp-svc-cat.is-active {
   color: #111;
   }
   
   /* ============================================================
   SCROLL-REVEAL ANIMATION
   ============================================================ */
   [data-reveal] {
   opacity: 0;
   transform: translateY(24px);
   transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
   }
   [data-reveal].is-revealed {
   opacity: 1;
   transform: translateY(0);
   }
   /* Stagger children: add data-reveal-delay="1|2|3" for 100ms/200ms/300ms */
   [data-reveal][data-reveal-delay="1"] { transition-delay: 0.1s; }
   [data-reveal][data-reveal-delay="2"] { transition-delay: 0.2s; }
   [data-reveal][data-reveal-delay="3"] { transition-delay: 0.3s; }
   [data-reveal][data-reveal-delay="4"] { transition-delay: 0.4s; }
   [data-reveal][data-reveal-delay="5"] { transition-delay: 0.5s; }
   
   @media (prefers-reduced-motion: reduce) {
   [data-reveal] { opacity: 1; transform: none; transition: none; }
   }
   
   /* ============================================================
   STATS COUNTER STRIP
   ============================================================ */
   .lp-stats {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0;
   max-width: 820px;
   margin: -40px auto 0;
   position: relative;
   z-index: 2;
   background: var(--bg-1);
   border: 1px solid var(--line);
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 4px 24px rgba(0,0,0,0.06);
   }
   .lp-stat {
   text-align: center;
   padding: 22px 12px;
   position: relative;
   }
   .lp-stat:not(:last-child)::after {
   content: "";
   position: absolute;
   right: 0; top: 20%; height: 60%;
   width: 1px;
   background: var(--line);
   }
   .lp-stat__num {
      font-size: 28px;
      font-weight: 700;
      color: var(--ink-1);
      line-height: 1.1;
      margin-bottom: 4px;
      font-variant-numeric: tabular-nums;
   }
   .lp[data-platform] .lp-stat__num { color: var(--plat); }.lp-stat__label {
   font-size: 12px;
   color: var(--ink-3);
   font-weight: 500;
   
   text-transform: uppercase;
   letter-spacing: 0.06em;
   }
   
   @media (max-width: 600px) {
   .lp-stats {
       grid-template-columns: 1fr 1fr;
       max-width: 400px;
       margin-top: -28px;
   }
   .lp-stat:nth-child(2)::after { display: none; }
   .lp-stat:nth-child(1),
   .lp-stat:nth-child(2) {
       border-bottom: 1px solid var(--line);
   }
   .lp-stat { padding: 16px 10px; }
   .lp-stat__num { font-size: 22px; }
   }
   
   /* ============================================================
   TESTIMONIALS / SOCIAL PROOF
   ============================================================ */
   .lp-reviews {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
   }
   .lp-review {
   background: var(--bg-1);
   border: 1px solid var(--line);
   border-radius: 12px;
   padding: 22px 20px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   }
   .lp-review__stars {
   display: flex;
   gap: 2px;
   color: #f59e0b;
   }
   .lp-review__stars svg { width: 14px; height: 14px; }
   .lp-review__text {
   font-size: 13.5px;
   color: var(--ink-2);
   line-height: 1.55;
   font-style: italic;
   flex: 1;
   }
   .lp-review__author {
   display: flex;
   align-items: center;
   gap: 10px;
   }
   .lp-review__avatar {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   font-weight: 700;
   color: #fff;
   flex-shrink: 0;
   }
   .lp[data-platform] .lp-review__avatar { background: var(--plat); }
   .lp-review__avatar:not([style]) { background: var(--brand); }
   .lp-review__info { line-height: 1.3; }
   .lp-review__name {
   font-size: 13px;
   font-weight: 600;
   color: var(--ink-1);
   }
   .lp-review__name svg {
   display: inline-block;
   width: 13px; height: 13px;
   vertical-align: -1px;
   color: #3b82f6;
   margin-left: 3px;
   }
   .lp-review__meta {
   font-size: 11.5px;
   color: var(--ink-3);
   }
   @media (max-width: 900px) {
   .lp-reviews {
       grid-template-columns: 1fr;
       overflow-x: auto;
       scroll-snap-type: x mandatory;
       display: flex;
       gap: 14px;
       padding-bottom: 6px;
   }
   .lp-review {
       flex: 0 0 85%;
       scroll-snap-align: start;
   }
   }
   
   /* Aliases — some templates use lp-testimonial* instead of lp-review* */
   .lp-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
   .lp-testimonial {
   background: var(--bg-1);
   border: 1px solid var(--line);
   border-radius: 12px;
   padding: 22px 20px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   transition: border-color 0.15s, box-shadow 0.15s;
   }
   .lp-testimonial__stars {
   display: flex;
   gap: 2px;
   color: #f59e0b;
   }
   .lp-testimonial__stars svg { width: 14px; height: 14px; }
   .lp-testimonial__text { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; font-style: italic; flex: 1; margin: 0; }
   .lp-testimonial__author {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: auto;
   }
   .lp-testimonial__avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
   .lp[data-platform] .lp-testimonial__avatar { background: var(--plat); }
   .lp-testimonial__name {
   font-size: 13px;
   font-weight: 600;
   color: var(--ink-1);
   display: block;
   line-height: 1.3;
   }
   .lp-testimonial__meta, .lp-testimonial__service, .lp-testimonial__time { font-size: 11.5px; color: var(--ink-3); }
   .lp-testimonial__name svg { display: inline-block; width: 13px; height: 13px; vertical-align: -1px; color: #3b82f6; margin-left: 3px; }
   @media (max-width: 900px) { .lp-testimonials { grid-template-columns: 1fr; overflow-x: auto; scroll-snap-type: x mandatory; display: flex; gap: 14px; padding-bottom: 6px; } .lp-testimonial { flex: 0 0 85%; scroll-snap-align: start; } }
   
   /* Review aggregation badges (top of testimonials) */
   .lp-proof-badges {
   display: flex;
   justify-content: center;
   gap: 16px;
   flex-wrap: wrap;
   margin-bottom: 28px;
   }
   .lp-proof-badge {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 16px;
   border-radius: 8px;
   background: var(--bg-2);
   border: 1px solid var(--line);
   font-size: 13px;
   font-weight: 600;
   color: var(--ink-1);
   }
   .lp-proof-badge__stars { color: #f59e0b; display: flex; gap: 1px; }
   .lp-proof-badge__stars svg { width: 12px; height: 12px; }
   
   /* ============================================================
   TIMELINE (replaces 3-card steps grid)
   ============================================================ */
   .lp-timeline {
   max-width: 640px;
   margin: 0 auto;
   position: relative;
   padding-left: 48px;
   }
   .lp[data-platform] .lp-timeline::before {
   background: linear-gradient(180deg, var(--plat), var(--plat-soft));
   }
   .lp-timeline::before {
   content: "";
   position: absolute;
   left: 18px;
   top: 0;
   bottom: 0;
   width: 2px;
   border-radius: 2px;
   background: linear-gradient(180deg, var(--brand), var(--brand-soft));
   }
   .lp-timeline__step {
   position: relative;
   padding-bottom: 32px;
   }
   .lp-timeline__step:last-child { padding-bottom: 0; }
   .lp[data-platform] .lp-timeline__dot { background: var(--plat); }
   .lp-timeline__dot {
   position: absolute;
   left: -48px;
   top: 0;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 15px;
   font-weight: 700;
   color: #fff;
   z-index: 1;
   background: var(--brand);
   }
   /* TikTok dot text fix */
   .lp[data-platform="tiktok"] .lp-timeline__dot { color: #111; }
   .lp-timeline__card {
   background: var(--bg-1);
   border: 1px solid var(--line);
   border-radius: 12px;
   padding: 20px 22px;
   }
   .lp-timeline__title {
   font-size: 15px;
   font-weight: 600;
   color: var(--ink-1);
   margin-bottom: 6px;
   display: flex;
   align-items: center;
   gap: 8px;
   }
   .lp-timeline__title svg {
   width: 16px; height: 16px;
   flex-shrink: 0;
   }
   .lp[data-platform] .lp-timeline__title svg { color: var(--plat); }
   .lp-timeline__desc {
   font-size: 13.5px;
   color: var(--ink-3);
   line-height: 1.55;
   }
   
   /* ============================================================
   PACKAGE CARD — PRICING PSYCHOLOGY
   ============================================================ */
   .lp-pkg-card__was {
   font-size: 14px;
   color: var(--ink-3);
   text-decoration: line-through;
   margin-right: 8px;
   font-weight: 400;
   }
   .lp-pkg-card__save {
   display: inline-block;
   font-size: 11px;
   font-weight: 700;
   padding: 2px 8px;
   border-radius: 6px;
   background: rgba(34,197,94,0.12);
   color: #16a34a;
   vertical-align: middle;
   margin-left: 6px;
   }
   
   /* Featured card */
   .lp-pkg-card--featured {
   border-width: 2px;
   }
   .lp[data-platform] .lp-pkg-card--featured {
   border-color: var(--plat);
   box-shadow: 0 0 0 3px var(--plat-soft), 0 4px 20px rgba(0,0,0,0.06);
   }
   .lp-tag--best {
   background: linear-gradient(135deg, #f59e0b, #ef4444) !important;
   color: #fff !important;
   }
   
   /* ============================================================
   SERVICE TABLE PLATFORM UPGRADE (CSS-only)
   ============================================================ */
   .lp[data-platform] .lp-services__head {
   background: var(--plat-soft);
   color: var(--plat);
   border-bottom: 2px solid var(--plat);
   }
   .lp[data-platform] .lp-services__row:nth-child(even) {
   background: var(--bg-2);
   }
   .lp[data-platform] .lp-services__row:hover {
   background: var(--plat-soft);
   }
   .lp[data-platform] .lp-services__cell-act {
   background: var(--plat-soft);
   color: var(--plat);
   }
   .lp[data-platform] .lp-services__cell-act:hover {
   background: var(--plat);
   color: #fff;
   }
   /* TikTok act button fix */
   .lp[data-platform="tiktok"] .lp-services__cell-act:hover {
   color: #111;
   }
   
   /* ============================================================
   HERO FLOATING ICON PILLS
   ============================================================ */
   .lp-hero__pill {
   position: absolute;
   width: 44px; height: 44px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 0;
   pointer-events: none;
   animation: heroFloat 5s ease-in-out infinite;
   }
   .lp[data-platform] .lp-hero__pill {
   background: var(--plat-soft);
   color: var(--plat);
   border: 1px solid var(--plat-soft);
   }
   .lp-hero__pill svg { width: 20px; height: 20px; }
   .lp-hero__pill--1 { top: 18%; left: 6%;  animation-delay: 0s; }
   .lp-hero__pill--2 { top: 28%; right: 8%; animation-delay: 1.2s; }
   .lp-hero__pill--3 { bottom: 22%; left: 10%; animation-delay: 0.6s; }
   .lp-hero__pill--4 { bottom: 18%; right: 12%; animation-delay: 1.8s; }
   
   @keyframes heroFloat {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-8px); }
   }
   @media (max-width: 768px) {
   .lp-hero__pill { display: none; }
   }
   @media (prefers-reduced-motion: reduce) {
   .lp-hero__pill { animation: none; }
   }
   
   /* ============================================================
   ABOUT / OUR STORY PAGE — Editorial design
   Sans/serif contrast · giant watermark numbers · brand-color
   mission block · asymmetric chapter flow
   ============================================================ */
   
   /* ---- Page wrapper ---- */
   .story-page { }
   
   /* ---- Hero (always dark, regardless of theme) ---- */
   .story-hero {
   background: #09090b;
   background-image:
       radial-gradient(ellipse at 75% 15%, rgba(240,101,67,0.10) 0%, transparent 55%),
       radial-gradient(ellipse at 25% 85%, rgba(240,101,67,0.04) 0%, transparent 55%);
   color: #fff;
   padding: clamp(100px, 18vh, 200px) 0 clamp(80px, 14vh, 160px);
   position: relative;
   overflow: hidden;
   }
   .story-hero__accent {
   position: absolute;
   top: -200px;
   right: -120px;
   width: 600px;
   height: 600px;
   background: radial-gradient(circle, rgba(240,101,67,0.07), transparent 65%);
   pointer-events: none;
   }
   .story-hero__inner {
   max-width: 1060px;
   margin: 0 auto;
   padding: 0 24px;
   position: relative;
   z-index: 1;
   }
   .story-hero__rule {
   width: 56px;
   height: 3px;
   background: var(--brand, #f06543);
   margin-bottom: 28px;
   border-radius: 2px;
   transform-origin: left;
   animation: storyRuleIn 0.8s cubic-bezier(0.16,1,0.3,1) 0.2s both;
   }
   html[dir="rtl"] .story-hero__rule { transform-origin: right; }
   @keyframes storyRuleIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
   
   .story-hero__h {
   font-family: 'Poppins', sans-serif;
   font-size: clamp(44px, 8vw, 88px);
   font-weight: 800;
   line-height: 1.06;
   letter-spacing: -0.04em;
   margin: 0 0 28px;
   color: #fff;
   }
   .story-hero__h em {
   font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
   font-style: italic;
   font-weight: 400;
   color: var(--brand, #f06543);
   }
   .story-hero__sub {
   font-size: clamp(15px, 1.4vw, 19px);
   color: rgba(255,255,255,0.50);
   max-width: 520px;
   line-height: 1.65;
   margin: 0;
   font-weight: 400;
   }
   
   /* ---- Stats strip ---- */
   .story-strip {
   background: #faf6f3;
   border-bottom: 1px solid #ede8e4;
   padding: 28px 0;
   }
   [data-theme="dark"] .story-strip {
   background: #14141f;
   border-bottom-color: #252535;
   }
   .story-strip__inner {
   max-width: 900px;
   margin: 0 auto;
   padding: 0 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0;
   flex-wrap: nowrap;
   }
   .story-strip__stat {
   display: flex;
   align-items: baseline;
   gap: 8px;
   padding: 0 clamp(16px, 3vw, 40px);
   white-space: nowrap;
   }
   .story-strip__stat strong {
   font-family: 'Poppins', sans-serif;
   font-size: clamp(22px, 3vw, 32px);
   font-weight: 800;
   letter-spacing: -0.02em;
   color: var(--ink-1);
   }
   .story-strip__stat span {
   font-size: 12px;
   color: var(--ink-3);
   text-transform: uppercase;
   letter-spacing: 0.06em;
   font-weight: 500;
   }
   .story-strip__sep {
   width: 1px;
   height: 24px;
   background: #ddd5cf;
   flex-shrink: 0;
   }
   [data-theme="dark"] .story-strip__sep { background: #2a2a3a; }
   
   /* ---- Story chapters ---- */
   .story-chapters {
   padding: clamp(72px, 12vh, 140px) 0;
   }
   .story-chapters__inner {
   max-width: 700px;
   margin: 0 auto;
   padding: 0 24px;
   }
   .story-ch {
   position: relative;
   }
   .story-ch__num {
   font-family: 'Poppins', sans-serif;
   font-size: clamp(90px, 16vw, 180px);
   font-weight: 900;
   line-height: 0.8;
   color: var(--brand-soft, #fef0ec);
   position: absolute;
   top: -16px;
   left: -20px;
   z-index: 0;
   user-select: none;
   pointer-events: none;
   }
   [data-theme="dark"] .story-ch__num { color: rgba(224,90,58,0.06); }
   
   .story-ch__h {
   font-family: 'Poppins', sans-serif;
   font-size: clamp(26px, 4vw, 42px);
   font-weight: 700;
   line-height: 1.15;
   letter-spacing: -0.025em;
   color: var(--ink-1);
   margin: 0 0 18px;
   position: relative;
   z-index: 1;
   }
   .story-ch__h em {
   font-family: 'Instrument Serif', Georgia, serif;
   font-style: italic;
   font-weight: 400;
   color: var(--brand);
   }
   .story-ch p {
   font-size: 15.5px;
   color: var(--ink-2);
   line-height: 1.75;
   margin: 0;
   position: relative;
   z-index: 1;
   max-width: 560px;
   }
   .story-ch p strong { color: var(--ink-1); font-weight: 600; }
   
   /* Right-aligned chapter — asymmetry */
   .story-ch--flip { text-align: right; }
   .story-ch--flip .story-ch__num { left: auto; right: -20px; }
   .story-ch--flip p { margin-left: auto; }
   html[dir="rtl"] .story-ch--flip { text-align: left; }
   html[dir="rtl"] .story-ch--flip .story-ch__num { right: auto; left: -20px; }
   html[dir="rtl"] .story-ch--flip p { margin-left: 0; margin-right: auto; }
   
   .story-rule {
   border: none;
   border-top: 1px solid var(--line);
   margin: clamp(40px, 6vh, 64px) 0;
   }
   
   /* ---- Team photo — cinematic banner ---- */
   .story-photo {
   padding: clamp(48px, 8vh, 80px) 24px 0;
   max-width: 1100px;
   margin: 0 auto;
   }
   .story-photo__frame {
   position: relative;
   border-radius: 16px;
   overflow: hidden;
   aspect-ratio: 2.4 / 1;
   box-shadow:
       0 24px 80px -12px rgba(0, 0, 0, 0.18),
       0 0 0 1px rgba(0, 0, 0, 0.04);
   }
   [data-theme="dark"] .story-photo__frame {
   box-shadow:
       0 24px 80px -12px rgba(0, 0, 0, 0.5),
       0 0 0 1px rgba(255, 255, 255, 0.06);
   }
   .story-photo__img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 25%;
   display: block;
   filter: saturate(1.08) contrast(1.02);
   transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
   }
   .story-photo__frame:hover .story-photo__img {
   transform: scale(1.035);
   }
   .story-photo__overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(
       160deg,
       transparent 0%,
       transparent 40%,
       rgba(10, 12, 20, 0.55) 85%,
       rgba(10, 12, 20, 0.72) 100%
   );
   display: flex;
   align-items: flex-end;
   justify-content: flex-end;
   padding: clamp(20px, 4vw, 40px);
   }
   .story-photo__caption {
   text-align: right;
   }
   .story-photo__tag {
   display: inline-block;
   background: var(--brand, #4A6CF7);
   color: #fff;
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.12em;
   padding: 4px 12px;
   border-radius: 100px;
   margin-bottom: 8px;
   }
   .story-photo__text {
   color: #fff;
   font-family: 'Instrument Serif', Georgia, serif;
   font-style: italic;
   font-size: clamp(14px, 2vw, 18px);
   font-weight: 400;
   line-height: 1.5;
   margin: 0;
   text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
   }
   .story-photo__grain {
   position: absolute;
   inset: 0;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
   background-size: 200px 200px;
   pointer-events: none;
   mix-blend-mode: overlay;
   border-radius: 16px;
   }
   [data-theme="dark"] .story-photo__grain {
   opacity: 0.07;
   }
   @media (max-width: 768px) {
   .story-photo__frame {
       aspect-ratio: 16 / 9;
       border-radius: 12px;
   }
   .story-photo__grain { border-radius: 12px; }
   }
   @media (max-width: 480px) {
   .story-photo {
       padding-left: 16px;
       padding-right: 16px;
   }
   .story-photo__frame {
       aspect-ratio: 3 / 2;
       border-radius: 8px;
   }
   .story-photo__grain { border-radius: 8px; }
   .story-photo__tag { font-size: 9px; padding: 3px 10px; }
   }
   
   /* ---- Mission — brand-color pull quote ---- */
   .story-mission {
   background: var(--brand, #f06543);
   background-image: linear-gradient(135deg, var(--brand, #f06543) 0%, var(--brand-strong, #c4421f) 100%);
   padding: clamp(72px, 12vh, 130px) 0;
   position: relative;
   overflow: hidden;
   }
   .story-mission__inner {
   max-width: 820px;
   margin: 0 auto;
   padding: 0 24px;
   text-align: center;
   position: relative;
   }
   .story-mission__mark {
   font-family: 'Instrument Serif', Georgia, serif;
   font-size: clamp(120px, 20vw, 240px);
   line-height: 0.5;
   color: rgba(255,255,255,0.10);
   position: absolute;
   top: -0.1em;
   left: 50%;
   transform: translateX(-50%);
   pointer-events: none;
   user-select: none;
   }
   .story-mission__q {
   font-family: 'Instrument Serif', Georgia, serif;
   font-size: clamp(24px, 4vw, 44px);
   font-style: italic;
   font-weight: 400;
   line-height: 1.35;
   color: #fff;
   margin: 0;
   padding: 0;
   border: none;
   position: relative;
   z-index: 1;
   }
   .story-mission__q em {
   font-style: italic;
   text-decoration: underline;
   text-decoration-thickness: 2px;
   text-underline-offset: 4px;
   text-decoration-color: rgba(255,255,255,0.35);
   }
   
   /* ---- Values — editorial numbered list ---- */
   .story-values {
   padding: clamp(72px, 12vh, 140px) 0;
   }
   .story-values__inner {
   max-width: 640px;
   margin: 0 auto;
   padding: 0 24px;
   }
   .story-values__h {
   font-family: 'Poppins', sans-serif;
   font-size: clamp(30px, 5vw, 46px);
   font-weight: 700;
   letter-spacing: -0.03em;
   color: var(--ink-1);
   margin: 0 0 10px;
   text-align: center;
   line-height: 1.15;
   }
   .story-values__h em {
   font-family: 'Instrument Serif', Georgia, serif;
   font-style: italic;
   font-weight: 400;
   }
   .story-values__sub {
   font-size: 15px;
   color: var(--ink-3);
   text-align: center;
   margin: 0 0 48px;
   line-height: 1.5;
   }
   .story-val {
   display: grid;
   grid-template-columns: 40px 1fr;
   gap: 16px;
   padding: 24px 0;
   border-top: 1px solid var(--line);
   }
   .story-val:last-child { border-bottom: 1px solid var(--line); }
   .story-val__n {
   font-family: 'Poppins', sans-serif;
   font-size: 12px;
   font-weight: 700;
   color: var(--brand);
   padding-top: 4px;
   letter-spacing: 0.03em;
   }
   .story-val h3 {
   font-size: 16px;
   font-weight: 700;
   color: var(--shell-icon);
   margin: 0 0 6px;
   letter-spacing: -0.01em;
   }
   .story-val p {
   font-size: 14.5px;
   color: var(--ink-2);
   line-height: 1.65;
   margin: 0;
   }
   
   /* ---- Scroll reveal ---- */
   .story-reveal {
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
               transform 0.7s cubic-bezier(0.16,1,0.3,1);
   }
   .story-reveal.is-visible {
   opacity: 1;
   transform: none;
   }
   .story-reveal--d1 { transition-delay: 0.12s; }
   .story-reveal--d2 { transition-delay: 0.24s; }
   .story-reveal--d3 { transition-delay: 0.36s; }
   @media (prefers-reduced-motion: reduce) {
   .story-reveal { opacity: 1; transform: none; transition: none; }
   }
   
   /* ---- Responsive ---- */
   @media (max-width: 768px) {
   .story-ch--flip { text-align: left; }
   .story-ch--flip .story-ch__num { left: -10px; right: auto; }
   .story-ch--flip p { margin-left: 0; }
   .story-ch__num { font-size: clamp(64px, 20vw, 110px); left: -10px; }
   .story-strip__inner { gap: 8px; flex-wrap: wrap; }
   .story-strip__sep { display: none; }
   .story-strip__stat { padding: 8px clamp(12px, 4vw, 24px); }
   }
   @media (max-width: 480px) {
   .story-hero { padding: 80px 0 64px; }
   .story-strip__stat { flex-direction: column; gap: 2px; text-align: center; padding: 8px 12px; }
   .story-strip__stat strong { font-size: 22px; }
   }
   
   /* ============================================================
   CAREERS PAGE
   ============================================================ */
   
   /* Perks grid */
   .career-perks {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   max-width: 1000px;
   margin: 0 auto;
   }
   .career-perk {
   background: var(--bg-1);
   border: 1px solid var(--line);
   border-radius: var(--radius-lg);
   padding: 28px 24px;
   transition: border-color .2s, transform .2s;
   }
   .career-perk:hover {
   border-color: var(--brand);
   transform: translateY(-2px);
   }
   .career-perk__icon {
   width: 48px;
   height: 48px;
   background: var(--brand-soft);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--brand);
   margin-bottom: 16px;
   }
   .career-perk__title {
   font-size: 16px;
   font-weight: 700;
   color: var(--ink-1);
   margin: 0 0 8px;
   }
   .career-perk p {
   font-size: 14px;
   color: var(--ink-2);
   line-height: 1.6;
   margin: 0;
   }
   
   /* Role cards */
   .career-roles {
   display: flex;
   flex-direction: column;
   gap: 16px;
   max-width: 800px;
   margin: 0 auto;
   }
   .career-role {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   background: var(--bg-1);
   border: 1px solid var(--line);
   border-radius: var(--radius-lg);
   padding: 24px 28px;
   transition: border-color .2s, transform .2s;
   }
   .career-role:hover {
   border-color: var(--brand);
   transform: translateY(-1px);
   }
   .career-role__info { flex: 1; min-width: 0; }
   .career-role__title {
   font-size: 18px;
   font-weight: 700;
   color: var(--ink-1);
   margin: 0 0 8px;
   }
   .career-role__meta {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-bottom: 10px;
   }
   .career-role__tag {
   display: inline-block;
   font-size: 11.5px;
   font-weight: 600;
   color: var(--brand);
   background: var(--brand-soft);
   padding: 3px 10px;
   border-radius: 20px;
   text-transform: uppercase;
   letter-spacing: 0.03em;
   }
   .career-role__info p {
   font-size: 14px;
   color: var(--ink-2);
   line-height: 1.6;
   margin: 0;
   }
   .career-role__apply {
   flex-shrink: 0;
   white-space: nowrap;
   }
   
   /* Steps */
   .career-steps {
   display: flex;
   flex-direction: column;
   gap: 24px;
   }
   .career-step {
   display: flex;
   gap: 20px;
   align-items: flex-start;
   }
   .career-step__num {
   flex-shrink: 0;
   width: 36px;
   height: 36px;
   background: var(--brand);
   color: #fff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 15px;
   font-weight: 700;
   margin-top: 2px;
   }
   .career-step__title {
   font-size: 16px;
   font-weight: 700;
   color: var(--ink-1);
   margin: 0 0 4px;
   }
   .career-step p {
   font-size: 14px;
   color: var(--ink-2);
   line-height: 1.6;
   margin: 0;
   }
   
   @media (max-width: 768px) {
   .career-perks { grid-template-columns: 1fr 1fr; }
   .career-role { flex-direction: column; align-items: flex-start; }
   .career-role__apply { align-self: flex-start; }
   }
   @media (max-width: 480px) {
   .career-perks { grid-template-columns: 1fr; }
   }
   
   /* ═══════════════════════════════════════════════════════════════
   Scrollytelling layout — sticky left + flowing right
   ═══════════════════════════════════════════════════════════════ */
   .lp-scrolly {
   display: grid;
   grid-template-columns: 0.42fr 0.58fr;
   gap: 3.5rem;
   align-items: start;
   }
   .lp-scrolly__sticky {
   padding-right: 1rem;
   }
   /* JS applies .is-stuck with fixed positioning as a fallback for sticky */
   .lp-scrolly__sticky.is-stuck {
   position: fixed;
   }
   .lp-scrolly__sticky.is-bottom {
   position: absolute;
   bottom: 0;
   }
   /* The grid cell needs relative positioning for the absolute bottom state */
   .lp-scrolly__left-col {
   position: relative;
   }
   .lp-scrolly__sticky .lp-h2 {
   text-align: left;
   }
   .lp-scrolly__sub {
   font-size: 15px;
   line-height: 1.65;
   color: var(--ink-2);
   margin: 12px 0 0;
   }
   .lp-scrolly__highlight {
   margin-top: 20px;
   padding: 16px 20px;
   background: var(--bg-2);
   border-left: 3px solid var(--brand);
   border-radius: 0 10px 10px 0;
   font-size: 14px;
   line-height: 1.6;
   color: var(--ink-2);
   }
   .lp[data-platform] .lp-scrolly__highlight {
   border-left-color: var(--plat);
   }
   .lp-scrolly__footnote {
   margin-top: 16px;
   font-size: 13.5px;
   line-height: 1.6;
   color: var(--ink-3);
   }
   .lp-scrolly__cta {
   margin-top: 24px;
   display: inline-flex;
   }
   
   /* ── Right column: flowing content ── */
   .lp-scrolly__flow {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
   }
   
   /* ── Numbered step cards (How it works) ── */
   .lp-scrolly__card {
   position: relative;
   background: var(--bg-2);
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 28px 28px 24px;
   transition: border-color .2s, box-shadow .2s, transform .2s;
   }
   .lp-scrolly__card:hover {
   border-color: var(--brand);
   box-shadow: 0 8px 32px rgba(0,0,0,0.06);
   transform: translateY(-2px);
   }
   .lp[data-platform] .lp-scrolly__card:hover {
   border-color: var(--plat);
   }
   .lp-scrolly__num {
   display: inline-block;
   font-size: 42px;
   font-weight: 800;
   line-height: 1;
   letter-spacing: -0.04em;
   color: var(--brand);
   opacity: 0.18;
   position: absolute;
   top: 16px;
   right: 24px;
   pointer-events: none;
   }
   .lp[data-platform] .lp-scrolly__num {
   color: var(--plat);
   }
   .lp-scrolly__icon {
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 8px;
   background: var(--brand-soft);
   color: var(--brand);
   margin-bottom: 14px;
   flex-shrink: 0;
   }
   .lp[data-platform] .lp-scrolly__icon {
   background: var(--plat-soft);
   color: var(--plat);
   }
   .lp-scrolly__icon svg {
   width: 20px;
   height: 20px;
   }
   .lp-scrolly__card-title {
   font-size: 16px;
   font-weight: 700;
   color: var(--ink-1);
   margin: 0 0 8px;
   line-height: 1.3;
   }
   .lp-scrolly__card-desc {
   font-size: 14px;
   line-height: 1.6;
   color: var(--ink-2);
   margin: 0;
   }
   
   /* ── Content groups (What is / Why use) ── */
   .lp-scrolly__group {
   margin-bottom: 1rem;
   }
   .lp-scrolly__group-title {
   font-size: 15px;
   font-weight: 700;
   color: var(--ink-1);
   text-transform: uppercase;
   letter-spacing: 0.06em;
   margin: 0 0 16px;
   padding-bottom: 10px;
   border-bottom: 2px solid var(--line);
   }
   .lp[data-platform] .lp-scrolly__group-title {
   border-bottom-color: var(--plat);
   }
   .lp-scrolly__stack {
   display: flex;
   flex-direction: column;
   gap: 12px;
   }
   .lp-scrolly__fact {
   background: var(--bg-2);
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 16px 20px;
   transition: border-color .15s, transform .15s;
   }
   .lp-scrolly__fact:hover {
   border-color: var(--brand);
   transform: translateX(4px);
   }
   .lp[data-platform] .lp-scrolly__fact:hover {
   border-color: var(--plat);
   }
   .lp-scrolly__fact-title {
   font-size: 14px;
   font-weight: 600;
   color: var(--ink-1);
   margin-bottom: 6px;
   line-height: 1.35;
   }
   .lp-scrolly__fact p {
   font-size: 13.5px;
   color: var(--ink-3);
   line-height: 1.55;
   margin: 0;
   }
   
   /* ── Guide links ── */
   .lp-scrolly__guides {
   display: flex;
   flex-direction: column;
   gap: 8px;
   }
   .lp-scrolly__guide-link {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 12px 16px;
   background: var(--bg-2);
   border: 1px solid var(--line);
   border-radius: 8px;
   font-size: 14px;
   font-weight: 500;
   color: var(--ink-1);
   text-decoration: none;
   transition: border-color .15s, transform .15s, color .15s;
   }
   .lp-scrolly__guide-link svg {
   flex-shrink: 0;
   color: var(--ink-3);
   transition: color .15s;
   }
   .lp-scrolly__guide-link:hover {
   border-color: var(--brand);
   color: var(--brand);
   transform: translateX(4px);
   text-decoration: none;
   }
   .lp[data-platform] .lp-scrolly__guide-link:hover {
   border-color: var(--plat);
   color: var(--plat);
   }
   .lp-scrolly__guide-link:hover svg {
   color: var(--brand);
   }
   .lp[data-platform] .lp-scrolly__guide-link:hover svg {
   color: var(--plat);
   }
   
   /* ── Deep variant (content section with more right-side content) ── */
   .lp-scrolly--deep {
   gap: 4rem;
   }
   .lp-scrolly--deep .lp-scrolly__flow {
   gap: 2.5rem;
   }
   
   /* ── Responsive: scrollytelling ── */
   @media (max-width: 900px) {
   .lp-scrolly {
       grid-template-columns: 1fr;
       gap: 2rem;
   }
   .lp-scrolly__sticky {
       position: static;
       padding-right: 0;
   }
   .lp-scrolly__sticky .lp-h2 {
       text-align: center;
   }
   .lp-scrolly__sub {
       text-align: center;
   }
   .lp-scrolly__cta {
       display: flex;
       justify-content: center;
   }
   .lp-scrolly__highlight {
       text-align: center;
       border-left: none;
       border-top: 3px solid var(--brand);
       border-radius: 0 0 10px 10px;
   }
   .lp[data-platform] .lp-scrolly__highlight {
       border-top-color: var(--plat);
       border-left-color: transparent;
   }
   .lp-scrolly__footnote {
       text-align: center;
   }
   }
   @media (max-width: 600px) {
   .lp-scrolly__card {
       padding: 20px 18px 18px;
   }
   .lp-scrolly__num {
       font-size: 32px;
       top: 12px;
       right: 16px;
   }
   }
   
   /* ============================================================
   TEAM / SPECIALISTS SECTION
   ============================================================ */
   .lp-team {
   position: relative;
   overflow: hidden;
   background: var(--bg-5) !important;
   border-top: none !important;
   border-bottom: none !important;
   }
   
   .lp-team__grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 20px;
   margin-top: 40px;
   list-style: none;
   padding: 0;
   }
   .lp-team__card {
   position: relative;
   border-radius: var(--radius-lg);
   overflow: hidden;
   aspect-ratio: 3 / 4;
   cursor: default;
   }
   .lp-team__photo {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   border-radius: var(--radius-lg);
   filter: grayscale(0.15);
   transition: filter var(--dur-slow) ease, transform var(--dur-slow) var(--ease-out-expo);
   }
   .lp-team__card:hover .lp-team__photo {
   filter: grayscale(0);
   transform: scale(1.04);
   }
   .lp-team__overlay {
   position: absolute;
   inset: 0;
   border-radius: var(--radius-lg);
   background: linear-gradient(0deg, rgba(15,20,25,0.85) 0%, rgba(15,20,25,0.3) 40%, transparent 60%);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   align-items: flex-start;
   padding: 20px 16px 16px;
   transition: background var(--dur-slow) ease;
   }
   .lp-team__card:hover .lp-team__overlay {
   background: linear-gradient(0deg, rgba(15,20,25,0.92) 0%, rgba(15,20,25,0.5) 50%, rgba(15,20,25,0.2) 70%);
   }
   .lp-team__meta {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 5px;
   width: 100%;
   min-height: 52px;
   justify-content: flex-end;
   }
   .lp-team__name {
   color: #fff;
   font-family: 'Poppins', 'Inter', sans-serif;
   font-size: 16px;
   font-weight: 700;
   line-height: 1.25;
   margin: 0;
   }
   .lp-team__role {
   color: rgba(255,255,255,0.65);
   font-size: 12px;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   margin: 0;
   }
   .lp-team__bio {
   color: rgba(255,255,255,0.75);
   font-size: 12px;
   line-height: 1.5;
   margin-top: 0;
   max-height: 0;
   opacity: 0;
   overflow: hidden;
   transition: max-height var(--dur-slow) var(--ease-out-expo), opacity var(--dur-normal) ease;
   }
   .lp-team__card:hover .lp-team__bio {
   max-height: 80px;
   opacity: 1;
   margin-top: 10px;
   }
   .lp-team__socials {
   display: flex;
   gap: 10px;
   margin-top: 0;
   list-style: none;
   padding: 0;
   max-height: 0;
   opacity: 0;
   overflow: hidden;
   transition: max-height var(--dur-slow) var(--ease-out-expo) 0.05s, opacity var(--dur-normal) ease 0.05s;
   }
   .lp-team__card:hover .lp-team__socials {
   max-height: 40px;
   opacity: 1;
   margin-top: 10px;
   }
   .lp-team__socials a {
   color: rgba(255,255,255,0.7);
   font-size: 14px;
   transition: color var(--dur-fast) ease;
   }
   .lp-team__socials a:hover {
   color: var(--brand);
   }
   
   /* Support bar below team grid */
   .lp-team__support {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: var(--bg-1);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 10px 14px;
   margin-top: 32px;
   max-width: 460px;
   margin-left: auto;
   margin-right: auto;
   }
   .lp-team__support--link {
   text-decoration: none;
   transition: border-color var(--dur-fast) ease, box-shadow var(--dur-normal) var(--ease-out-expo);
   }
   .lp-team__support--link:hover {
   border-color: var(--brand);
   box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 255,107,53), 0.15);
   text-decoration: none;
   }
   [data-theme="dark"] .lp-team__support {
   background: var(--bg-2);
   border-color: var(--line);
   }
   .lp-team__support-left {
   display: flex;
   align-items: center;
   gap: 12px;
   }
   .lp-team__support-avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid var(--brand);
   }
   .lp-team__support-dot {
   width: 10px;
   height: 10px;
   background: var(--green);
   border-radius: 50%;
   border: 2px solid var(--bg-1);
   position: absolute;
   bottom: -1px;
   right: -1px;
   }
   [data-theme="dark"] .lp-team__support-dot {
   border-color: var(--bg-2);
   }
   .lp-team__support-wrap {
   position: relative;
   flex-shrink: 0;
   }
   .lp-team__support-label {
   font-size: 13px;
   font-weight: 600;
   color: var(--ink-1);
   }
   .lp-team__support-btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 8px 18px;
   border-radius: var(--radius-sm);
   background: var(--brand);
   color: #fff;
   font-size: 13px;
   font-weight: 600;
   border: none;
   cursor: pointer;
   transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
   text-decoration: none;
   }
   .lp-team__support-btn:hover {
   background: var(--brand-2);
   color: #fff;
   transform: translateY(-2px);
   text-decoration: none;
   }
   
   .lp-team__glow {
   display: none;
   }
   
   /* Responsive */
   @media (max-width: 1080px) {
   .lp-team__grid {
       grid-template-columns: repeat(3, 1fr);
   }
   }
   @media (max-width: 760px) {
   .lp-team__grid {
       grid-template-columns: repeat(2, 1fr);
       gap: 14px;
   }
   .lp-team__bio { display: none; }
   .lp-team__support { max-width: 100%; }
   }
   @media (max-width: 600px) {
   .lp-team__grid {
       grid-template-columns: 1fr 1fr;
       gap: 10px;
   }
   .lp-team__name { font-size: 15px; }
   .lp-team__meta { min-height: 46px; }
   .lp-team__overlay { padding: 14px 12px 12px; }
   }
   
   /* ─── Hero video thumbnail ─── */
   .lp-video-thumb {
   position: relative;
   display: block;
   width: 100%;
   padding: 0;
   border: 0;
   background: none;
   cursor: pointer;
   border-radius: 12px;
   overflow: hidden;
   }
   .lp-video-thumb::after {
   content: '';
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.10);
   border-radius: 12px;
   pointer-events: none;
   transition: background var(--dur-normal) ease;
   z-index: 1;
   }
   .lp-video-thumb:hover::after {
   background: rgba(255, 255, 255, 0.22);
   }
   .lp-video-thumb__img {
   display: block;
   width: 100%;
   height: auto;
   border-radius: 12px;
   transition: transform 0.3s ease;
   }
   .lp-video-thumb:hover .lp-video-thumb__img { transform: scale(1.02); }
   .lp-video-play {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 12px;
   z-index: 1;
   }
   .lp-video-play svg {
   color: #fff;
   width: 70px;
   height: 70px;
   filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
   }
   .lp-video-thumb:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
   
   /* ─── Video player inside existing lp-video-modal__player ─── */
   .lp-video-modal__player video {
   width: 100%;
   height: 100%;
   display: block;
   background: #000;
   }
   
   /* ═══════════════════════════════════════════════════════
   ECOSYSTEM PLATFORM CAROUSEL (section after sign-in bar)
   ═══════════════════════════════════════════════════════ */
   .lp-ecosystem {
   position: relative;
   overflow-x: visible;
   }
   .lp-ecosystem__track {
   display: block;
   transition: none;
   will-change: auto;
   }
   .lp-ecosystem__slide {
   min-width: auto;
   flex-shrink: 0;
   display: none;
   }
   .lp-ecosystem__slide:first-child {
   display: block;
   }
   
   /* ── Card grids ── */
   .lp-pcards {
   display: grid;
   }
   .lp-pcards--featured {
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-bottom: 20px;
   }
   @media (min-width: 1100px) {
   .lp-pcards--featured {
       grid-template-columns: minmax(220px, 1fr) minmax(275px, 1.55fr) minmax(220px, 1fr);
       margin-bottom: 40px;
   }
   .lp-pcards--secondary {
       gap: 18px;
       justify-content: center;
       margin-top: 16px;
   }
   .lp-pcards--secondary .lp-pcard {
       max-width: 220px;
   }
   }
   .lp-pcards--secondary {
   grid-template-columns: repeat(7, 1fr);
   gap: 12px;
   }
   
   /* ── Base card ── */
   .lp-pcard {
   text-decoration: none;
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
   align-self: start;
   transition: transform 0.22s ease;
   }
   .lp-pcard:hover {
   transform: translateY(-4px);
   }
   .lp-pcard__body {
   background: var(--bg-1);
   border-radius: 16px;
   filter: drop-shadow(0 2px 16px rgba(26,26,46,0.07));
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   padding: 48px 20px 26px;
   gap: 4px;
   position: relative;
   overflow: hidden;
   margin-top: -36px;
   transition: filter 0.22s ease;
   }
   .lp-pcard:hover .lp-pcard__body {
   filter: drop-shadow(0 8px 36px rgba(26,26,46,0.13));
   }
   .lp-pcards--secondary .lp-pcard__body {
   padding: 42px 10px 16px;
   border-radius: 12px;
   margin-top: -32px;
   }
   
   /* ── Icon circle ── */
   .lp-pcard__icon {
   width: 72px;
   height: 72px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   position: relative;
   z-index: 1;
   border: 3px solid #fff;
   /* Neutral fallback shadow; per-platform rules below provide colored, bottom-offset shadows */
   box-shadow: 0 8px 28px rgba(26,26,46,0.10);
   }
   .lp-pcard__icon svg {
   width: 36px;
   height: 36px;
   fill: currentColor;
   }
   .lp-plogo--tg svg {
   width: 100%;
   height: 100%;
   }
   .lp-pcards--secondary .lp-pcard__icon {
   width: 72px;
   height: 72px;
   }
   .lp-pcards--secondary .lp-pcard__icon svg {
   width: 26px;
   height: 26px;
   }
   
   /* Per-platform colored shadows (subtle, offset downward for "under" look) */
   .lp-plogo--tg { box-shadow: 0 10px 26px rgba(37,183,230,0.24); }
   .lp-plogo--x { box-shadow: 0 10px 26px rgba(0,0,0,0.30); }
   .lp-plogo--ig { box-shadow: 0 10px 26px rgba(225,48,108,0.24); }
   .lp-plogo--yt { box-shadow: 0 12px 34px rgba(255,59,48,0.26); }
   .lp-plogo--fb { box-shadow: 0 12px 34px rgba(24,119,242,0.26); }
   .lp-plogo--tt { box-shadow: 0 10px 26px rgba(0,0,0,0.30); }
   .lp-plogo--tw { box-shadow: 0 10px 26px rgba(145,70,255,0.30); }
   .lp-plogo--sp { box-shadow: 0 12px 34px rgba(29,185,84,0.26); }
   .lp-plogo--dc { box-shadow: 0 12px 34px rgba(88,101,242,0.26); }
   .lp-plogo--rd { box-shadow: 0 12px 34px rgba(255,69,0,0.26); }
   .lp-plogo--wa { box-shadow: 0 12px 34px rgba(37,211,102,0.26); }
   .lp-plogo--th { box-shadow: 0 10px 26px rgba(0,0,0,0.30); }
   .lp-plogo--bl { box-shadow: 0 12px 34px rgba(255,120,0,0.22); }
   .lp-plogo--vk { box-shadow: 0 12px 34px rgba(0,123,255,0.22); }
   .lp-plogo--rd { box-shadow: 0 12px 34px rgba(255,69,0,0.26); }
   
   /* Slightly stronger shadow for featured card icons */
   .lp-pcards--featured .lp-pcard__icon { box-shadow: 0 16px 42px rgba(26,26,46,0.12); }
   .lp-pcards--featured .lp-plogo--ig { box-shadow: 0 14px 30px rgba(225,48,108,0.32); }
   .lp-pcards--featured .lp-plogo--tg { box-shadow: 0 14px 30px rgba(37,183,230,0.30); }
   .lp-pcards--featured .lp-plogo--tt { box-shadow: 0 14px 30px rgba(0,0,0,0.34); }
   .lp-pcards--featured .lp-plogo--tw { box-shadow: 0 14px 30px rgba(145,70,255,0.34); }
   
   /* ── Card text ── */
   .lp-pcard__name {
   font-size: 16px;
   font-weight: 700;
   color: var(--ink-1);
   line-height: 1.2;
   margin-bottom: 2px;
   }
   .lp-pcards--secondary .lp-pcard__name {
   font-size: 16px;
   }
   .lp-pcard__count {
   font-size: 12px;
   color: var(--ink-3);
   }
   .lp-pcards--secondary .lp-pcard__count {
   font-size: 11px;
   }
   .lp-pcard__price {
   margin-top: 8px;
   font-size: 13px;
   color: var(--ink-3);
   line-height: 1;
   }
   .lp-pcards--secondary .lp-pcard__price {
   font-size: 11px;
   margin-top: 5px;
   }
   .lp-pcard__amount {
   font-weight: 700;
   color: #22c55e;
   font-size: 14px;
   }
   .lp-pcards--secondary .lp-pcard__amount {
   font-size: 12px;
   }
   
   /* ── Main Provider ribbon ── */
   .lp-pcard__ribbon {
   position: absolute;
   top: 16px;
   right: -26px;
   width: 110px;
   background: linear-gradient(135deg, #2dd4bf, #06b6d4);
   color: #fff;
   font-size: 6px;
   font-weight: 800;
   text-align: center;
   padding: 5px 0;
   transform: rotate(45deg);
   letter-spacing: 0.07em;
   text-transform: uppercase;
   pointer-events: none;
   z-index: 1;
   }
   
   /* ── Carousel dot navigation ── */
   .lp-ecosystem__dots {
   display: none;
   justify-content: center;
   align-items: center;
   gap: 8px;
   margin-top: 28px;
   }
   .lp-ecosystem__dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   border: none;
   padding: 0;
   background: var(--line);
   cursor: pointer;
   transition: background 0.2s ease, transform 0.2s ease;
   }
   .lp-ecosystem__dot.is-active {
   background: #f06543;
   transform: scale(1.25);
   }
   
   /* ── New platform logo colors ── */
   .lp-plogo--dc  { background: #5865F2; color: #fff; }
   .lp-plogo--th  { background: #000; color: #fff; }
   .lp-plogo--li  { background: #0A66C2; color: #fff; }
   .lp-plogo--sn  { background: #FFFC00; color: #222; }
   .lp-plogo--pi  { background: #E60023; color: #fff; }
   .lp-plogo--rd  { background: #FF4500; color: #fff; }
   .lp-plogo--wa  { background: #25D366; color: #fff; }
   .lp-plogo--sc  { background: #FF3300; color: #fff; }
   .lp-plogo--vk  { background: #0077FF; color: #fff; }
   .lp-plogo--ru  { background: #85C742; color: #fff; }
   .lp-plogo--kk  { background: #53FC18; color: #111; }
   .lp-plogo--ok  { background: #f7931e; color: #fff; }
   .lp-plogo--am  { background: linear-gradient(135deg, #fc5c7d, #6a3093); color: #fff; }
   .lp-plogo--dz  { background: #FF0092; color: #fff; }
   .lp-plogo--au  { background: #FF4B00; color: #fff; }
   .lp-plogo--rn  { background: #E21B1B; color: #fff; }
   .lp-plogo--bc  { background: #1DA0C3; color: #fff; }
   .lp-plogo--mc  { background: #5000FF; color: #fff; }
   .lp-plogo--lf  { background: #D51007; color: #fff; }
   .lp-plogo--dm  { background: #0050DC; color: #fff; }
   .lp-plogo--vm  { background: #1AB7EA; color: #fff; }
   .lp-plogo--lk  { background: linear-gradient(135deg, #ff5c00, #ff9900); color: #fff; }
   .lp-plogo--bl  { background: linear-gradient(135deg, #19e698, #00b4d8); color: #fff; }
   .lp-plogo--ch  { background: #f0ebe1; color: #333; }
   .lp-plogo--tm  { background: #35465C; color: #fff; }
   .lp-plogo--qu  { background: #B92B27; color: #fff; }
   .lp-plogo--mdm { background: #000; color: #fff; }
   .lp-plogo--tr  { background: linear-gradient(135deg, #FF4400, #FF6600); color: #fff; }
   .lp-plogo--mw  { background: #3A9CDD; color: #fff; }
   .lp-plogo--pd  { background: linear-gradient(135deg, #00b4f0, #005acd); color: #fff; }
   .lp-plogo--bs  { background: linear-gradient(135deg, #ff6b35, #f7c59f); color: #fff; }
   .lp-ecosystem__mobile-action {
      display: none;
   }
   
   /* ── Responsive ── */
   @media (max-width: 1100px) {
   .lp-pcards--secondary { grid-template-columns: repeat(4, 1fr); }
   }
   @media (max-width: 768px) {
   .lp-pcards--featured  { grid-template-columns: repeat(2, 1fr); }
   .lp-pcards--secondary { grid-template-columns: repeat(4, 1fr); }
   .lp-ecosystem .lp-pcards--featured > .lp-pcard:nth-child(2) { order: -1; }
        .lp-ecosystem__track,
      .lp-ecosystem__dots {
         display: none !important;
      }
        .lp-ecosystem__mobile-action {
         display: flex !important;
         justify-content: center;
         margin-top: 24px;
      }
   
      .lp-ecosystem__mobile-action .lp-cta--gradient {
         margin: 0 !important;
         width: 100%;
         max-width: 280px;
         justify-content: center;
      }
   }
   @media (max-width: 480px) {
   .lp-pcards--featured  { grid-template-columns: 1fr; }
   .lp-pcards--secondary { grid-template-columns: repeat(3, 1fr); }
   }
   
   /* GOALS VERTICAL TAB SECTION */
   .lp-goals {
   max-width: 800px;
   margin: 40px auto 0;
   display: flex;
   align-items: flex-start;
   gap: 0;
   }
   .lp-goals__tabs {
   flex: 0 0 220px;
   display: flex;
   flex-direction: column;
   border-right: 1.5px solid var(--line);
   }
   .lp-goals__tab {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 16px 24px 16px 0;
   background: none;
   border: none;
   cursor: pointer;
   text-align: left;
   width: 100%;
   transition: color 0.2s ease;
   }
   .lp-goals__tab-icon {
   width: 28px;
   height: 28px;
   flex-shrink: 0;
   color: var(--line-3);
   transition: color 0.2s ease;
   }
   .lp-goals__tab.is-active .lp-goals__tab-icon {
   color: #f06543;
   }
   .lp-goals__tab-label {
   font-size: 14px;
   font-weight: 600;
   color: var(--ink-3);
   line-height: 1.3;
   transition: color 0.2s ease;
   }
   .lp-goals__tab.is-active .lp-goals__tab-label {
   
   color: var(--ink-1);
   }
   .lp-goals__panels {
   flex: 1;
   padding-left: 48px;
   min-height: 180px;
   }
   .lp-goals__panel {
   display: none;
   }
   .lp-goals__panel.is-active {
   display: block;
   }
   .lp-goals__panel-title {
   font-size: 24px;
   font-weight: 600;
   background: linear-gradient(90deg, #7277FF 0%, #53B9FF 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   margin-bottom: 16px;
   line-height: 1.3;
   }
   .lp-goals__panel-body {
      font-size: 20px;
      color: var(--ink-2);
      line-height: 1.75;
   }
   
   .lp-goals-mobile {
      display: none;
   }
   
   @media (max-width: 640px) {
      .lp-goals {
         display: none !important;
      }
   
      .lp-goals-mobile {
         display: block;
         width: 100%;
         margin-top: 24px;
      }

      .lp-goals-mobile__track {
         display: flex;
         gap: 16px;
         overflow-x: auto;
         scroll-snap-type: x mandatory;
         scroll-behavior: smooth;
         padding: 4px 16px 24px;
         scrollbar-width: none; /* Hide scrollbar Firefox */
      }

      .lp-goals-mobile__track::-webkit-scrollbar {
         display: none; /* Hide scrollbar Chrome/Safari/Webkit */
      }
   
        .lp-goals-mobile__card {
         flex: 0 0 100%;
         scroll-snap-align: start;
         background: rgba(255, 255, 255, 0.3);
         border: 1px solid rgba(255, 255, 255, 1.0);
         border-radius: 8px;
         padding: 15px 20px;
         box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.03);
         display: flex;
         flex-direction: column;
         align-items: center;
         text-align: center;
         box-sizing: border-box;
         gap: 30px;
         transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
      }
   
      [data-theme="dark"] .lp-goals-mobile__card {
         background: rgba(255, 255, 255, 0.03);
         border: 1px solid rgba(255, 255, 255, 0.08);
         box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
      }
   
      .lp-goals-mobile__card-icon {
         width: 48px;
         height: 48px;
         color: #000000;
         transition: color 0.3s ease;
      }
   
      [data-theme="dark"] .lp-goals-mobile__card-icon {
         color: #ffffff;
      }
   
      .lp-goals-mobile__card.is-active .lp-goals-mobile__card-icon {
         color: #f06543 !important;
      }
   
      .lp-goals-mobile__card-title {
         font-family: 'Poppins', sans-serif;
         font-size: 22px;
         font-weight: 600;
         background: linear-gradient(90deg, #7277FF 0%, #53B9FF 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
         margin: 0;
         line-height: 30px;
      }
   
      .lp-goals-mobile__card-body {
         font-size: 20px;
         color: var(--ink-2);
         line-height: 36px;
         margin: 0;
      }
   
      .lp-goals-mobile__dots {
         display: flex;
         justify-content: center;
         align-items: center;
         gap: 8px;
         margin-top: 16px;
      }
   
      .lp-goals-mobile__dot {
         width: 8px;
         height: 8px;
         border-radius: 50%;
         border: none;
         padding: 0;
         background: var(--line);
         cursor: pointer;
         transition: background 0.2s ease, transform 0.2s ease;
      }
   
      .lp-goals-mobile__dot.is-active {
         background: #f06543;
         transform: scale(1.25);
      }
   }
   
   /* WHY RELIABLE GROWTH SECTION */
   .lp-why-section {
   background-color: var(--bg-1);
   background-image: repeating-linear-gradient(
       -45deg,
       transparent,
       transparent 18px,
       rgba(0, 0, 0, 0.028) 18px,
       rgba(0, 0, 0, 0.028) 19px
   );
   }
   [data-theme="dark"] .lp-why-section {
   background-image: repeating-linear-gradient(
       -45deg,
       transparent,
       transparent 18px,
       rgba(255, 255, 255, 0.04) 18px,
       rgba(255, 255, 255, 0.04) 19px
   );
   }
   .lp-why-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0 40px;
   margin-top: 52px;
   }
   .lp-why-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   }
   .lp-why-card__icon-wrap {
   width: 64px;
   height: 64px;
   flex-shrink: 0;
   }
   .lp-why-card__img {
   width: 64px;
   height: 64px;
   display: block;
   object-fit: contain;
   }
   .lp-why-card__title {
   font-size: 16px;
   font-weight: 600;
   color: var(--ink-1);
   margin-bottom: 12px;
   line-height: 1.3;
   }
   .lp-why-card__body {
   font-size: 14px;
   color: var(--ink-3);
   line-height: 1.7;
   }
   @media (max-width: 900px) {
   .lp-why-grid {
       grid-template-columns: repeat(2, 1fr);
       gap: 40px 32px;
   }
   }
   @media (max-width: 480px) {
   .lp-why-grid {
       grid-template-columns: 1fr;
       gap: 36px 0;
   }
   }
   
   /* ---- lp-works-section ---- */
   .lp-works-grid {
   display: grid;
   grid-template-columns: 1fr 56px 1fr 56px 1fr;
   align-items: start;
   gap: 0;
   margin-top: 52px;
   }
   .lp-works-step {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: 30px;
   }
   .lp-works-step__icon {
   width: 64px;
   height: 64px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 16px;
   flex-shrink: 0;
   }
   .lp-works-step__svg {
   width: 24px;
   height: 24px;
   color: #f06543;
   }
   .lp-works-step__num {
   font-size: 40px;
   font-weight: 600;
   color: var(--ink-4);
   line-height: 1;
   margin-bottom: 4px;
   letter-spacing: -2px;
   user-select: none;
   }
   .lp-works-step__title {
   font-size: 16px;
   font-weight: 600;
   color: var(--ink-1);
   margin-bottom: 10px;
   line-height: 1.3;
   }
   .lp-works-step__body {
   font-size: 14px;
   color: var(--ink-2);
   line-height: 1.7;
   margin-bottom: 10px;
   }
   .lp-works-cta {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
   font-weight: 700;
   color: #f06543;
   text-decoration: none;
   margin-bottom: 24px;
   transition: opacity 0.2s;
   cursor: pointer;
   }
   .lp-works-cta:hover {
   opacity: 0.8;
   }
   .lp-works-cta svg {
   width: 14px;
   height: 14px;
   flex-shrink: 0;
   }
   /* arrow column */
   .lp-works-arrow {
   display: flex;
   align-items: flex-start;
   justify-content: center;
   padding-top: 56px;
   color: #f06543;
   }
   .lp-works-arrow svg {
   width: 16px;
   height: 37px;
   }
   /* form */
   .lp-works-form-wrap {
   padding-left: 30px;
   padding-right: 30px;
   width: 100%;
   }
   @media (max-width: 768px) {
   .lp-works-form-wrap {
       padding-left: 16px;
       padding-right: 16px;
   }
   }
   @media (max-width: 480px) {
   .lp-works-form-wrap {
       padding-left: 12px;
       padding-right: 12px;
   }
   }
   .lp-works-form {
   display: flex;
   flex-direction: column;
   gap: 10px;
   width: 100%;
   }
   .lp-works-input {
   height: 48px;
   width: 100%;
   box-sizing: border-box;
   background: #f5f5f5;
   border: 1px solid #dbdbdb;
   border-radius: 12px;
   padding: 0 16px;
   font-size: 14px;
   color: var(--ink-1);
   outline: none;
   transition: border-color 0.2s;
   }
   .lp-works-input:focus {
   border-color: #f06543;
   }
   [data-theme="dark"] .lp-works-input {
   background: rgba(255, 255, 255, 0.06);
   border-color: var(--line);
   color: var(--ink-1);
   }
   .lp-works-submit {
   height: 48px;
   width: 100%;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   background: linear-gradient(90deg, #ff6255, #ff8d64);
   color: #fff;
   font-size: 15px;
   font-weight: 700;
   border: none;
   border-radius: 12px;
   cursor: pointer;
   transition: opacity 0.2s;
   text-decoration: none;
   }
   .lp-works-submit:hover {
   opacity: 0.88;
   }
   .lp-works-submit svg {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
   }
   /* payments grid */
   .lp-works-payments {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
   width: 100%;
   }
   .lp-works-payment {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 6px;
   background: var(--bg-1);
   border: 1px solid var(--line);
   box-shadow: 0px 0px 20px 0px #0000000d;
   border-radius: 8px;
   padding: 18px 12px;
   font-size: 13px;
   font-weight: 600;
   color: var(--ink-1);
   min-height: 100px;
   text-align: center;
   }
   .lp-works-payment svg {
   display: block;
   }
   .lp-works-visa {
   font-size: 18px;
   font-weight: 800;
   font-style: italic;
   color: #1a1f71;
   letter-spacing: -0.5px;
   }
   [data-theme="dark"] .lp-works-visa {
   color: #a5b4fc;
   }
   [data-theme="dark"] .lp-works-payment__img--invert {
   filter: brightness(0) invert(1);
   }
   .lp-works-payment--apple {
   flex-direction: row;
   gap: 4px;
   font-size: 15px;
   font-weight: 600;
   }
   .lp-works-payment--more {
   font-size: 12px;
   color: var(--ink-3);
   font-weight: 500;
   }
   /* platforms grid */
   .lp-works-platforms {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   width: 100%;
   }
   .lp-works-platform {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
   padding: 20px 10px;
   }
   .lp-works-platform--dim {
   opacity: 0.4;
   }
   .lp-works-picon {
   width: 24px;
   height: 24px;
   display: inline-block;
   flex-shrink: 0;
   object-fit: contain;
   }
   .lp-works-pname {
   font-size: 11px;
   color: var(--ink-3);
   text-align: center;
   line-height: 1.2;
   }
   /* responsive */
   
   @media (max-width: 1200px) {
   .lp-works-grid {
       grid-template-columns: 1fr 1fr;
       gap: 0;
   }
   .lp-works-grid .lp-works-arrow {
       display: none;
   }
   .lp-works-grid .lp-works-step:last-child {
       grid-column: 1 / -1;
       justify-self: center;
       width: 50%;
   }
   }
   
   @media (max-width: 768px) {
   .lp-works-grid {
       grid-template-columns: 1fr;
       gap: 40px 0;
   }
   .lp-works-arrow {
       display: none;
   }
   .lp-works-step {
       border-top: 1px solid var(--line);
       padding: 20px;
       padding-top: 32px;
   }
   .lp-works-step:first-child {
       border-top: none;
       padding-top: 0;
   }
   .lp-works-grid .lp-works-step:last-child {
       grid-column: auto;
       justify-self: auto;
       width: auto;
   }
   .lp-works-platform {
       padding: 20px 4px;
   }
   }
   @media (max-width: 480px) {
   .lp-works-step {
       padding: 12px;
       padding-top: 24px;
   }
   .lp-works-step:first-child {
       padding-top: 0;
   }
   }
   
   /* ---- lp-onedash-section ---- */
   .lp-onedash-section {
   background: linear-gradient(180deg, #7277FF 0%, #53B9FF 100%);
   padding-top: 80px;
   padding-bottom: 60px;
   overflow: hidden;
   }
   .lp-onedash {
   display: flex;
   align-items: center;
   gap: 48px;
   }
   .lp-onedash__text {
   flex: 0 0 620px;
   max-width: 620px;
   padding-bottom: 80px;
   }
   .lp-onedash__h {
   font-size: clamp(36px, 5vw, 48px);
   font-weight: 600;
   color: #fff;
   line-height: 1.7;
   margin: 0 0 24px;
   letter-spacing: -1.5px;
   }
   .lp-onedash__hl {
   display: inline-block;
   background: linear-gradient(90deg, #ff6255, #ff8d64);
   border-radius: 6px;
   padding: 0 10px 4px;
   line-height: 1.4;
   }
   .lp-onedash__body {
   font-size: 16px;
   color: rgba(255, 255, 255, 0.82);
   line-height: 1.7;
   margin: 0 0 32px;
   }
   .lp-onedash__chips {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   }
   .lp-onedash__chip {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: rgba(255, 255, 255, 0.12);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 8px;
   padding: 4px 8px;
   font-size: 14px;
   font-weight: 500;
   color: #fff;
   white-space: nowrap;
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   }
   .lp-onedash__chip svg {
   flex-shrink: 0;
   opacity: 0.85;
   }
   .lp-onedash__visual {
   flex: 0 0 50%;
   max-width: 50%;
   min-width: 0;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   perspective: 1200px;
   }
   .lp-onedash__img {
   display: block;
   width: 100%;
   max-width: 660px;
   height: auto;
   border-radius: 16px 16px 0 0;
   box-shadow: 0 -8px 60px rgba(0, 0, 0, 0.25);
   object-fit: cover;
   object-position: top;
   transform: rotateY(-4deg) rotateX(2deg);
   transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
   will-change: transform;
   }
   .lp-onedash__img:hover {
   transform: rotateY(0deg) rotateX(0deg);
   box-shadow:
       0 -8px 60px rgba(0, 0, 0, 0.25),
       0 32px 64px -12px rgba(15, 23, 42, 0.16);
   }
   @media (max-width: 900px) {
   .lp-onedash {
       flex-direction: column;
       gap: 40px;
       align-items: flex-start;
   }
   .lp-onedash__text {
       flex: none;
       max-width: 100%;
       padding-bottom: 0;
   }
   .lp-onedash__visual {
       flex: none;
       width: 100%;
       max-width: 100%;
       justify-content: center;
   }
   .lp-onedash__img {
       border-radius: 12px 12px 0 0;
       transform: none;
   }
   .lp-onedash__img:hover {
       transform: none;
   }
   .lp-onedash-section {
       padding-bottom: 40px;
   }
   }
   @media (max-width: 640px) {
   .lp-onedash__h {
       font-size: 36px;
       letter-spacing: -1px;
   }
   .lp-onedash__chips {
       gap: 8px;
   }
   .lp-onedash__chip {
       font-size: 12px;
       padding: 7px 13px;
   }
   }
   
   /* ── LP REVIEWS SECTION ── */
   .lp-reviews-section {
   background-color: var(--bg-5);
   padding-top: 80px;
   padding-bottom: 80px;
   }
   .lp-reviews-section.lp-reviews-section--top {
      padding-top: 15px;
   }
   .lp-reviews__tabs {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      margin: 0 auto 30px;
   }
   
   .lp-reviews-section .lp-section__head,
   .lp-reviews-section--top .lp-section__head {
      margin-bottom: 30px;
   }
   .lp-reviews__tab {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: var(--bg-1);
   border: 1px solid var(--line);
   border-radius: 12px;
   padding: 12px 24px;
   font-size: 16px;
   font-weight: 600;
   color: var(--ink-1);
   cursor: pointer;
   white-space: nowrap;
   transition: background 0.2s, border-color 0.2s, color 0.2s;
   }
   .lp-reviews__tab svg {
   flex-shrink: 0;
   color: #888888;
   }
   .lp-reviews__tab.is-active {
   background: #3b82f6;
   border-color: #3b82f6;
   color: #fff;
   }
   .lp-reviews__tab.is-active svg {
   color: #fff;
   }
   .lp-reviews__panel {
   display: none;
   }
   .lp-reviews__panel.is-active {
   display: block;
   }
   .lp-reviews__car-wrap {
   overflow: hidden;
   }
   .lp-reviews__car-track {
   display: flex;
   transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
   }
   .lp-reviews__vslide {
   flex: 0 0 100%;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   align-items: start;
   }
   .lp-reviews__vslide--top {
      flex: 0 0 100%;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 16px;
      align-items: start;
   }
   
   .lp-reviews-section--top .lp-reviews__vcard,
   #lp-rtab-video .lp-reviews__vcard,
   #lp-rtab-video-3 .lp-reviews__vcard {
      aspect-ratio: 9 / 16;
      min-height: auto;
   }
   
   .lp-reviews__vcard-play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 2;
   }
   
   .lp-reviews__vcard-play svg {
      width: 95px;
      height: 95px;
      color: #ffffff;
      opacity: 0.6;
      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
      transition: transform 0.2s, opacity 0.2s;
   }
   
   .lp-reviews__vcard:hover .lp-reviews__vcard-play svg {
      opacity: 0.85;
      transform: scale(1.08);
   }
   
   .lp-reviews__vcard {
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      min-height: 220px;
      aspect-ratio: 4 / 3;
      cursor: pointer;
   }
   .lp-reviews__vcard::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.22);
      opacity: 0;
      transition: opacity var(--dur-normal) ease;
      pointer-events: none;
      z-index: 1;
   }
   .lp-reviews__vcard:hover::after {
      opacity: 1;
   }
   .lp-reviews__vcard-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.2) 40%, transparent 70%);
   z-index: 0;
   transition: opacity var(--dur-normal) ease;
   }
   .lp-reviews__vcard:hover .lp-reviews__vcard-overlay {
   opacity: 0.72;
   }
   .lp-reviews__vcard-date {
   position: absolute;
   top: 12px;
   left: 12px;
   display: flex;
   align-items: center;
   gap: 5px;
   color: #fff;
   font-weight: 600;
   font-size: 10px;
   padding: 4px 8px;
   border-radius: 6px;
   z-index: 2;
   }
   .lp-reviews__vcard-footer {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 12px 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   z-index: 2;
   }
   .lp-reviews__vcard-user {
   display: flex;
   align-items: center;
   gap: 10px;
   }
   .lp-reviews__vcard-avatar {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   border: 2px solid rgba(255,255,255,0.4);
   display: block;
   object-fit: cover;
   flex-shrink: 0;
   background: rgba(255,255,255,0.2);
   }
   .lp-reviews__vcard-name {
   font-size: 13px;
   font-weight: 700;
   color: #fff;
   display: block;
   line-height: 1.2;
   }
   .lp-reviews__vcard-role {
   font-size: 11px;
   color: rgba(255,255,255,0.7);
   display: block;
   }
   .lp-reviews__vcard-stars {
   display: none;
   }
   .lp-reviews__wslide {
   flex: 0 0 100%;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
   align-items: start;
   }
   .lp-reviews__rcard {
      background: rgba(255, 255, 255, 0.4) !important;
      border: 1px solid #ffffff !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
      border-radius: 8px !important;
      padding: 30px 20px !important;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto;
      column-gap: 20px !important;
      row-gap: 10px;
   }
   .lp-reviews__rcard-stars {
   grid-column: 1;
   grid-row: 1 / 3;
   display: flex;
   flex-direction: column;
   gap: 3px;
   align-self: start;
   }
   .lp-reviews__rcard-head {
   grid-column: 2;
   grid-row: 1;
   display: flex;
   align-items: center;
   gap: 10px;
   }
   .lp-reviews__rcard-avatar {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   display: block;
   object-fit: cover;
   flex-shrink: 0;
   border: 1px solid #FFFFFF;
   box-shadow: 0px 0px 20px 0px #3344664D;
   }
   .lp-reviews__rcard-avatar--initial {
   background: -webkit-linear-gradient(left, #7277FF 0%, #53B9FF 100%);
   background: linear-gradient(90deg, #7277FF 0%, #53B9FF 100%);
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   font-size: 24px;
   font-weight: 700;
   color: #fff;
   }
   .lp-reviews__rcard-meta {
   flex: 1;
   min-width: 0;
   }
   .lp-reviews__rcard-name {
   font-size: 14px;
   font-weight: 700;
   color: var(--ink-1);
   display: block;
   }
   .lp-reviews__rcard-role {
   font-size: 12px;
   color: var(--ink-3);
   display: block;
   }
   .lp-reviews__rcard-body {
   grid-column: 2;
   grid-row: 2;
   font-size: 14px;
   color: var(--ink-1);
   line-height: 1.65;
   margin: 0;
   }
   .lp-reviews__dots {
   display: flex;
   justify-content: center;
   gap: 8px;
   margin-top: 28px;
   }
   .lp-reviews__dots:not(:empty) {
   display: flex !important;
   visibility: visible !important;
   opacity: 1 !important;
   }
   .lp-reviews__dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--line);
   border: none;
   cursor: pointer;
   padding: 0;
   transition: background 0.2s, transform 0.2s;
   }
   .lp-reviews__dot.is-active {
   background: #f06543;
   transform: scale(1.3);
   }
   .lp-reviews__subtabs {
   display: flex;
   max-width: 530px;
   margin: 0 auto 32px;
   background: var(--bg-6);
   border: 1px solid var(--line-4);
   box-shadow: 0px 0px 20px 0px #00000008;
   border-radius: 10px;
   padding: 0px 14px;
   gap: 4px;
   }
   .lp-reviews__subtab {
   flex: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 7px;
   padding: 10px 16px;
   background: none;
   border: none;
   border-bottom: 3px solid transparent;
   font-size: 14px;
   font-weight: 700;
   color: var(--ink-2);
   cursor: pointer;
   white-space: nowrap;
   transition: color 0.2s, background 0.2s, border-color 0.2s;
   }
   .lp-reviews__subtab svg {
   flex-shrink: 0;
   }
   .lp-reviews__subtab.is-active {
   border-bottom-color: #3b82f6;
   }
   .lp-reviews__subpanel {
   display: none;
   }
   .lp-reviews__subpanel.is-active {
   display: block;
   }
   @media (max-width: 900px) {
   .lp-reviews__vslide {
       grid-template-columns: repeat(2, 1fr);
   }
        .lp-reviews__vslide--top {
         grid-template-columns: repeat(2, 1fr) !important;
      }
   .lp-reviews__wslide {
       grid-template-columns: repeat(2, 1fr);
   }
   }
   @media (max-width: 640px) {
   .lp-reviews-section {
       padding-top: 56px;
       padding-bottom: 56px;
   }
   .lp-reviews__tabs {
       gap: 8px;
       margin-bottom: 32px;
   }
   .lp-reviews__tab {
       padding: 10px 16px;
       font-size: 14px;
   }
   .lp-reviews__vslide {
       grid-template-columns: 1fr;
   }

   .lp-reviews__car-wrap:has(.lp-reviews__wslide) {
       overflow-x: auto;
       overflow-y: visible;
       -webkit-overflow-scrolling: touch;
       scroll-snap-type: x mandatory;
       scroll-padding-inline: 0;
       padding: 4px 0 24px;
       scrollbar-width: none;
   }

   .lp-reviews__car-wrap:has(.lp-reviews__wslide)::-webkit-scrollbar {
       display: none;
   }

   .lp-reviews__car-wrap:has(.lp-reviews__wslide) .lp-reviews__car-track {
       transform: none !important;
       transition: none;
   }

   .lp-reviews__car-wrap:has(.lp-reviews__wslide) .lp-reviews__wslide {
       display: flex;
       flex-direction: row;
       flex-wrap: nowrap;
       flex: 0 0 auto;
       width: max-content;
       gap: 14px;
       grid-template-columns: unset;
   }

   .lp-reviews__car-wrap:has(.lp-reviews__wslide) .lp-reviews__rcard {
       flex: 0 0 min(85vw, 320px);
       scroll-snap-align: start;
   }

   .lp-reviews__dots {
       display: flex !important;
       margin-top: 12px;
   }

   .lp-reviews__subtabs {
       flex-wrap: wrap;
       max-width: 100%;
   }
   .lp-reviews__subtab {
       padding: 8px 12px;
       font-size: 13px;
   }
   }
   
   /* ── LP CTA2 SECTION ── */
   .lp-cta2-section {
   background: linear-gradient(180deg, #7277FF 0%, #53B9FF 100%);
   padding-top: 80px;
   padding-bottom: 80px;
   text-align: center;
   }
   .lp-cta2 {
   max-width: 680px;
   margin: 0 auto;
   }
   .lp-cta2__h {
   font-size: clamp(28px, 4vw, 36px);
   font-weight: 600;
   color: #fff;
   line-height: 1.2;
   margin: 0 0 16px;
   letter-spacing: -1px;
   }
   .lp-cta2__sub {
   font-size: 16px;
   color: rgba(255,255,255,0.82);
   line-height: 1.65;
   margin: 0 0 40px;
   }
   .lp-cta2__bar {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 16px;
   flex-wrap: wrap;
   }
   .lp-cta2__bar .lp-cta--gradient {
   margin: 0;
   padding: 0 24px;
   height: 50px;
   gap: 8px;
   }
   .lp-cta2__bar .lp-cta--ghost-white {
   height: 50px;
   padding: 0 24px;
   }
   .lp-cta--ghost-white {
   background: transparent;
   color: #fff;
   border: 1.5px solid rgba(255,255,255,0.55);
   border-radius: 8px;
   }
   .lp-cta--ghost-white:hover {
   background: rgba(255,255,255,0.12);
   border-color: rgba(255,255,255,0.85);
   color: #fff;
   text-decoration: none;
   }
   @media (max-width: 640px) {
   .lp-cta2-section {
       padding-top: 56px;
       padding-bottom: 56px;
   }
   .lp-cta2__bar {
       flex-direction: column;
       align-items: stretch;
   }
   .lp-cta2__bar .lp-cta {
       justify-content: center;
   }
   }
   
   /* ════════════════════════════════════════════════════════════════
   Dashboard shell — grouped sidebar + identity topbar
   Single source of truth: glass surfaces + coral/green Figma tokens.
   Layered over the base .sidebar / .topbar structural rules above.
   ════════════════════════════════════════════════════════════════ */
   
   /* ── Surfaces: page bg + glassmorphism ── */
   .app { background: var(--shell-bg); }
   .sidebar {
   background: var(--glass-side);
   border-right: 1px solid var(--glass-border);
   box-shadow: var(--shadow-side);
   -webkit-backdrop-filter: blur(14px);
   backdrop-filter: blur(14px);
   }
   .sidebar::-webkit-scrollbar { display: none; }
   .topbar {
      background: var(--glass-top);
      border-bottom: 1px solid var(--glass-border);
      box-shadow: var(--shadow-top);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      gap: 14px;
   }
   
   /* ── Sidebar head: brand + tagline + collapse toggle ── */
   .sidebar-head {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 16px 4px;
      border-bottom: 0;
   }
   .sidebar-brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      height: auto;
      padding: 0;
      border: 0;
      text-align: center;
   }
   .sidebar-brand img { max-height: 59px; }
   .sidebar-brand .brand-logo-combo { flex-direction: column; gap: 6px; }
   .sidebar-brand .brand-logo-icon { height: 59px; width: auto; }
   .sidebar-brand .brand-logo-text {
   display: inline-block;
   height: auto; width: auto;
   font-family: 'Poppins','Inter',sans-serif;
   font-weight: 500; font-size: 20px; line-height: 1;
   color: var(--shell-coral); letter-spacing: .3px;
   }
   .sidebar-brand .brand-logo-text .blue-part { color: var(--brand); }
   .sidebar-tagline { font-size: 10px; font-weight: 700; color: var(--shell-icon); }
   .sidebar-collapse-btn {
   position: absolute;
   top: 12px;
   inset-inline-end: 10px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 26px; height: 26px;
   border: 1px solid var(--line);
   border-radius: 4px;
   background: var(--bg-1);
   color: var(--ink-3);
   cursor: pointer;
   padding: 0;
   transition: background .12s, color .12s, border-color .12s;
   }
   .sidebar-collapse-btn:hover { background: var(--bg-2); color: var(--ink-1); border-color: var(--ink-4); }
   .sidebar-collapse-btn svg { width: 42px; height: 42px; transition: transform .2s; }
   
   /* ── Grouped nav ── */
   .sidebar-group { margin-bottom: 6px; }
   .sidebar-group-head {
   display: flex;
   align-items: center;
   gap: 3px;
   width: 100%;
   padding: 15px 0 5px;
   background: none;
   border: 0;
   cursor: pointer;
   text-align: start;
   }
   .sidebar-group-title {
   font-family: 'Poppins', 'Inter', sans-serif;
   font-weight: 500;
   font-size: 14px;
   color: var(--shell-title);
   letter-spacing: .1px;
   }
   .sidebar-group-caret {
   width: 13px; height: 13px;
   color: var(--shell-coral);
   flex-shrink: 0;
   transition: transform .2s var(--ease-out-expo);
   }
   .sidebar-group.is-collapsed .sidebar-group-caret { transform: rotate(-90deg); }
   .sidebar-group-items {
   display: flex;
   flex-direction: column;
   gap: 4px;
   overflow: hidden;
   }
   .sidebar-group.is-collapsed .sidebar-group-items { display: none; }
   .sidebar-group-items .sidebar-item {
   padding: 5px 5px 3px 18px;
   color: var(--shell-item);
   font-family: 'Poppins','Inter',sans-serif;
   font-weight: 400; font-size: 14px;
   border-radius: 8px;
   }
   .sidebar-group-items .sidebar-item svg.mi { width: 16px; height: 16px; opacity: .9; }
   .sidebar-group-items .sidebar-item:hover { background: rgba(255,255,255,.55); color: var(--shell-title); }
   [data-theme="dark"] .sidebar-group-items .sidebar-item:hover { background: rgba(255,255,255,.06); }
   .sidebar-group-items .sidebar-item.active { color: var(--accent); background:none;}
   .sidebar-group-items .sidebar-item.active svg {
      color:var(--shell-item);
   }
   
   /* ── Sidebar footer: language row + full-bleed Telegram CTA ── */
   .sidebar-foot {
   margin-top: auto;
   padding: 12px;
   border-top: 0;
   display: flex;
   flex-direction: column;
   gap: 10px;
   }
   .sidebar-lang { position: relative; }
   .sidebar-lang-btn {
   display: flex;
   align-items: center;
   gap: 6px;
   width: 100%;
   height: 34px;
   padding: 0 10px;
   border: 0;
   border-radius: var(--radius);
   background: transparent;
   color: var(--shell-item);
   font-family: 'Inter', sans-serif;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   transition: background .12s, border-color .12s;
   }
   .sidebar-lang-btn:hover { background: rgba(255,255,255,.55); }
   [data-theme="dark"] .sidebar-lang-btn:hover { background: rgba(255,255,255,.06); }
   img.sidebar-lang-flag {
   width: 20px;
   height: 14px;
   border-radius: 3px;
   object-fit: cover;
   flex-shrink: 0;
   box-shadow: 0 0 0 1px rgba(51,68,102,.10), 0 1px 3px rgba(51,68,102,.18);
   }
   .sidebar-lang-flag--globe { font-size: 16px; line-height: 1; flex-shrink: 0; }
   .sidebar-lang-name { flex: 1; text-align: start; }
   .sidebar-lang-caret { width: 14px; height: 14px; color: var(--shell-icon); flex-shrink: 0; }
   /* Footer dropdown opens upward */
   .sidebar-lang .dropdown-menu {
   display: none !important;
   top: auto;
   bottom: calc(100% + 6px);
   left: 0;
   right: 0;
   margin: 0;
   max-height: 280px;
   overflow-y: auto;
   }
   .sidebar-lang.open .dropdown-menu { display: block !important; }
   .sidebar-lang .dropdown-menu > li { display: list-item !important; }
   .sidebar-lang .dropdown-menu > li > a {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13.5px;
   }
   .sidebar-telegram {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   height: 42px;
   margin: 4px -12px -12px;
   border-radius: 0;
   background: var(--shell-tg);
   box-shadow: 0 10px 20px rgba(42,160,219,.30);
   color: #fff;
   font-family: 'Poppins','Inter',sans-serif;
   font-size: 14px;
   font-weight: 500;
   transition: background .15s, transform .15s;
   }
   .sidebar-telegram:hover { background: #2491c8; color: #fff; transform: none; text-decoration: none; }
   .sidebar-telegram svg { width: 18px; height: 18px; flex-shrink: 0; }
   
   /* ── Topbar: user identity (left) ── */
   .topbar-user { position: relative; flex-shrink: 0; }
   .topbar-user-btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 4px 8px;
      border: 0;
      background: none;
      border-radius: 999px;
      cursor: pointer;
      transition: background .12s;
   }
   .topbar-user-btn:hover { background: var(--bg-2); }
   .topbar-avatar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px; height: 48px;
      border-radius: 50%;
      border: 1px solid var(--glass-border);
      box-shadow: 0 0 20px rgba(51,68,102,.30);
      background: linear-gradient(135deg, var(--brand), var(--brand-3));
      color: #fff;
      font-weight: 700;
      font-size: 15px;
      flex-shrink: 0;
      letter-spacing: .3px;
   }
   img.topbar-avatar { object-fit: cover; background: var(--bg-3); }
   .topbar-user-meta {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
      line-height: 1.1;
      text-align: start;
      min-width: 0;
   }
   .topbar-user-namerow { display: flex; align-items: center; gap: 5px; }
   .topbar-user-name {
   font-family: 'Poppins','Inter',sans-serif;
   font-weight: 600;
   font-size: 14px;
   line-height: 1.3;
   color: var(--shell-title);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 180px;
   }
   .topbar-user-level { font-size: 10px; line-height: 1; color: var(--shell-icon); }
   .topbar-user-level .accent-text { font-weight: 600; }
   .topbar-user-caret { width: 14px; height: 14px; color: var(--shell-icon); flex-shrink: 0; }
   .topbar-user .dropdown-menu { left: 0; right: auto; min-width: 190px; }
   .topbar-user.open .dropdown-menu { display: block; }
   
   /* ── Topbar: right-side icons ── */
   .topbar-icons { gap: 6px; }
   .topbar-icons .topbar-icon-btn { color: var(--shell-item); }
   .topbar-icons .topbar-icon-btn:hover { color: var(--shell-title); background: rgba(255,255,255,.55); }
   [data-theme="dark"] .topbar-icons .topbar-icon-btn:hover { background: rgba(255,255,255,.06); }
   .topbar-icons .topbar-icon-btn svg { width: 22px; height: 22px; }
   
   /* ── Topbar: wallet group (icon + green pill + currency) ── */
   .topbar-wallet { display: inline-flex; align-items: center; gap: 6px; }
   .topbar-wallet-ic { width: 24px; height: 24px; color: var(--shell-item); flex-shrink: 0; }
   .topbar-balance-pill {
      display: inline-flex;
      align-items: center;
      gap: 0;
      height: 32px;
      padding: 0 10px;
      border-radius: 8px;
      background: var(--shell-green-soft);
      border: 1px solid var(--shell-green-soft);
      color: var(--shell-green);
      font-size: 14px;
      font-weight: 500;
      white-space: nowrap;
   }
   .topbar-balance-pill .topbar-balance-amount {
      display: inline !important;
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 14px;
      color: var(--shell-green);
   }
   .topbar-currency-btn {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   height: 32px;
   padding: 0 2px;
   border: 0;
   border-radius: 8px;
   background: transparent;
   color: var(--shell-item);
   font-family: 'Inter', sans-serif;
   font-size: 14px;
   font-weight: 400;
   cursor: pointer;
   transition: background .12s, border-color .12s;
   }
   .topbar-currency-btn:hover { background: transparent; color: var(--shell-title); }
   .topbar-currency-btn svg { width: 13px; height: 13px; color: var(--shell-icon); flex-shrink: 0; }
   .topbar-wallet .dropdown-currencies { display: none !important; }
   
   /* ── Rail collapse (desktop only) ── */
   @media (min-width: 992px) {
      .app.is-rail { grid-template-columns: var(--sidebar-rail-w) 1fr; }
      .app.is-rail .sidebar { width: var(--sidebar-rail-w); }
      .app.is-rail .app-main { max-width: calc(100vw - var(--sidebar-rail-w)); }
      .app.is-rail .topbar { left: var(--sidebar-rail-w); }
      .app.is-rail .sidebar-label,
      .app.is-rail .sidebar-tagline,
      .app.is-rail .sidebar-group-head,
      .app.is-rail .sidebar-lang-name,
      .app.is-rail .sidebar-lang-caret,
      .app.is-rail .sidebar-lang-flag,
      .app.is-rail .brand-logo-text,
      .app.is-rail .sidebar-telegram span { display: none; }
      .app.is-rail .sidebar-brand .brand-logo-icon { height: 32px; margin-top: 32px; }
      .app.is-rail .sidebar-head { padding: 16px 10px 14px; }
      .app.is-rail .sidebar-nav { padding: 10px 12px; }
      .app.is-rail .sidebar-item { justify-content: center; padding: 10px 0; }
      .app.is-rail .sidebar-lang-btn { justify-content: center; padding: 0; }
      .app.is-rail .sidebar-collapse-btn svg { transform: rotate(180deg); }
   }
   
   /* ── Mobile: opaque drawer + topbar, tightened spacing ── */
   @media (max-width: 991px) {
       .sidebar {
           background: var(--bg-1);
           -webkit-backdrop-filter: none;
           backdrop-filter: none;
           box-shadow: 2px 0 12px rgba(0,0,0,0.08);
       }
       /* Sidebar is an overlay drawer on mobile — topbar spans full width */
       .topbar { background: var(--bg-1); gap: 10px; left: 0; padding-left:12px; padding-right:12px; }
       .sidebar-nav { padding: 8px 15px 12px; }
       /* Rail collapse is desktop-only — hide the toggle in the mobile drawer */
       .sidebar-collapse-btn { display: none; }
   }
   @media (max-width: 639px) {
   
       .topbar { gap: 6px; padding-left: 8px; padding-right: 8px; }
       .topbar-icons { gap: 2px; }
       .topbar-wallet { gap: 2px; }
       .topbar-wallet-ic { display: none; }   /* balance still shown in the green pill */
       .topbar-user-btn { padding: 4px 8px 4px 12px; }
       .topbar-user-name { max-width: 84px; }
       .topbar-user-meta {display:none;}
       .topbar-user-caret { display: none; }
       .topbar-balance-pill {padding: 0 5px;}
       .topbar-icons .topbar-icon-btn svg { width: 20px; height: 20px; }
       .topbar-currency-btn { padding: 0 6px 0 8px; }
   }
   @media (max-width: 360px) {
       .topbar-user-btn { padding: 4px 8px 4px 0; }
       .topbar-wallet {gap:0;}
   }
   
   /* ============================================================
   PORTED FROM RETIRED STYLESHEET — DO NOT DROP
   Originally lived in aedutt/07ytwby33oy49a96.css (now removed
   from Perfect Panel). Re-homed here so signup.twig (auth-split
   layout) and neworder.twig (service-desc-box) keep rendering.
   ============================================================ */
   
   /* ─── /signup hero: split layout (form left, brand visual right) ─── */
   .auth-split {
   display: grid;
   grid-template-columns: 1fr 1.05fr;
   min-height: calc(100vh - 64px);
   background: var(--bg-1);
   margin: -32px -16px;
   }
   .auth-split__form {
   padding: 40px 56px;
   display: flex;
   flex-direction: column;
   overflow: auto;
   background: var(--bg-1);
   }
   .auth-split__brand {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   color: var(--shell-icon);
   font-weight: 600;
   font-size: 16px;
   letter-spacing: -0.02em;
   text-decoration: none;
   }
   .auth-split__brand:hover { color: var(--ink-1); text-decoration: none; }
   .auth-split__body {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   max-width: 400px;
   width: 100%;
   margin: 0 auto;
   padding: 32px 0;
   }
   .auth-lede {
   font-size: 14px;
   color: var(--ink-2);
   margin: 0 0 28px;
   }
   .auth-foot {
   margin-top: 20px;
   font-size: 13px;
   color: var(--ink-2);
   text-align: center;
   }
   .auth-foot a { color: var(--brand); font-weight: 500; }
   .auth-trust-row {
   display: flex;
   gap: 18px;
   font-size: 11px;
   color: var(--ink-3);
   margin-top: 24px;
   flex-wrap: wrap;
   }
   .auth-trust-item { display: inline-flex; align-items: center; gap: 5px; }
   
   /* Right panel — brand visual */
   .auth-split__visual {
   background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, #6d4ada 100%);
   position: relative;
   overflow: hidden;
   padding: 48px;
   display: flex;
   flex-direction: column;
   color: #fff;
   }
   .auth-split__grid {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   opacity: 0.18;
   pointer-events: none;
   }
   .auth-split__eyebrow {
   position: relative;
   z-index: 1;
   font-size: 12px;
   opacity: 0.7;
   font-weight: 500;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   }
   .auth-split__visual-body { position: relative; z-index: 1; margin-top: auto; }
   .auth-quote {
   font-size: 32px;
   font-weight: 600;
   letter-spacing: -0.025em;
   line-height: 1.18;
   margin: 0 0 24px;
   max-width: 460px;
   color: #fff;
   }
   .auth-author { display: flex; align-items: center; gap: 12px; }
   .auth-author__avatar {
   width: 40px; height: 40px;
   border-radius: 50%;
   background: rgba(255,255,255,0.2);
   display: grid;
   place-items: center;
   font-weight: 600;
   font-size: 13px;
   }
   .auth-author__name { font-size: 14px; font-weight: 600; }
   .auth-author__role { font-size: 12px; opacity: 0.75; }
   .auth-stats-row {
   margin-top: 36px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
   padding-top: 24px;
   border-top: 1px solid rgba(255,255,255,0.2);
   }
   .auth-stat-num {
   font-size: 24px;
   font-weight: 600;
   letter-spacing: -0.02em;
   color: #fff;
   }
   .auth-stat-lbl { font-size: 11px; opacity: 0.75; margin-top: 2px; }
   
   /* Mobile: stack and hide visual */
   @media (max-width: 860px) {
   .auth-split { grid-template-columns: 1fr; min-height: auto; margin: -32px -16px 0; }
   .auth-split__form { padding: 32px 24px; min-height: 100vh; }
   .auth-split__visual { display: none; }
   }
   
   /* ─── /neworder service description card ─── */
   .service-desc-box {
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 12px 14px;
   background: var(--bg-2);
   color: var(--ink-2);
   font-size: 13.5px;
   line-height: 1.55;
   }
   
   /* Custom Brand Colors for Social Platform Chips (Optimized) */
   .pulse-platform-chip,
   .svc-platform-tab {
       --plat-color: var(--brand-3);
       --plat-bg: var(--brand-3);
       --plat-text: #ffffff;
       --plat-shadow: rgba(96, 158, 255, 0.35);
       --plat-hover-bg: var(--bg-2);
   }
   
   .pulse-platform-chip[data-pulse-platform="telegram"],
   .svc-platform-tab[data-filter-platform="telegram" i],
   .lp-calc2__plat[data-platform="telegram"]  { --plat-color: #24A1DE; --plat-bg: #24A1DE; --plat-shadow: rgba(36, 161, 222, 0.35); --plat-hover-bg: rgba(36, 161, 222, 0.05); }
   
   .pulse-platform-chip[data-pulse-platform="instagram"],
   .svc-platform-tab[data-filter-platform="instagram" i],
   .lp-calc2__plat[data-platform="instagram"] { --plat-color: #E1306C; --plat-bg: linear-gradient(135deg, #833AB4 0%, #C13584 50%, #E1306C 100%); --plat-shadow: rgba(225, 48, 108, 0.35); --plat-hover-bg: rgba(225, 48, 108, 0.05); }
   
   .pulse-platform-chip[data-pulse-platform="tiktok"],
   .svc-platform-tab[data-filter-platform="tiktok" i],
   .lp-calc2__plat[data-platform="tiktok"]    { --plat-color: #FE2C55; --plat-bg: #FE2C55; --plat-shadow: rgba(254, 44, 85, 0.35); --plat-hover-bg: rgba(254, 44, 85, 0.05); }
   
   .pulse-platform-chip[data-pulse-platform="youtube"],
   .svc-platform-tab[data-filter-platform="youtube" i],
   .lp-calc2__plat[data-platform="youtube"]   { --plat-color: #FF0000; --plat-bg: #FF0000; --plat-shadow: rgba(255, 0, 0, 0.35); --plat-hover-bg: rgba(255, 0, 0, 0.05); }
   
   .pulse-platform-chip[data-pulse-platform="twitter"],
   .svc-platform-tab[data-filter-platform="twitter" i],
   .lp-calc2__plat[data-platform="twitter"]   { --plat-color: #000000; --plat-bg: #000000; --plat-shadow: rgba(0, 0, 0, 0.25); --plat-hover-bg: rgba(0, 0, 0, 0.05); }
   
   .pulse-platform-chip[data-pulse-platform="facebook"],
   .svc-platform-tab[data-filter-platform="facebook" i],
   .lp-calc2__plat[data-platform="facebook"]  { --plat-color: #1877F2; --plat-bg: #1877F2; --plat-shadow: rgba(24, 119, 242, 0.35); --plat-hover-bg: rgba(24, 119, 242, 0.05); }
   
   .pulse-platform-chip[data-pulse-platform="website"],
   .svc-platform-tab[data-filter-platform="website" i]   { --plat-color: #0ea5e9; --plat-bg: #0ea5e9; --plat-shadow: rgba(14, 165, 233, 0.35); --plat-hover-bg: rgba(14, 165, 233, 0.05); }
   
   .pulse-platform-chip[data-pulse-platform="linkedin"],
   .svc-platform-tab[data-filter-platform="linkedin" i]  { --plat-color: #0077B5; --plat-bg: #0077B5; --plat-shadow: rgba(0, 119, 181, 0.35); --plat-hover-bg: rgba(0, 119, 181, 0.05); }
   
   .pulse-platform-chip[data-pulse-platform="discord"],
   .svc-platform-tab[data-filter-platform="discord" i],
   .lp-calc2__plat[data-platform="discord"]   { --plat-color: #5865F2; --plat-bg: #5865F2; --plat-shadow: rgba(88, 101, 242, 0.35); --plat-hover-bg: rgba(88, 101, 242, 0.05); }
   
   .pulse-platform-chip[data-pulse-platform="twitch"],
   .svc-platform-tab[data-filter-platform="twitch" i],
   .lp-calc2__plat[data-platform="twitch"]    { --plat-color: #9146FF; --plat-bg: #9146FF; --plat-shadow: rgba(145, 70, 255, 0.35); --plat-hover-bg: rgba(145, 70, 255, 0.05); }
   
   .pulse-platform-chip[data-pulse-platform="google"],
   .svc-platform-tab[data-filter-platform="google" i],
   .lp-calc2__plat[data-platform="google"]    { --plat-color: #4285F4; --plat-bg: #4285F4; --plat-shadow: rgba(66, 133, 244, 0.35); --plat-hover-bg: rgba(66, 133, 244, 0.05); }
   
   .pulse-platform-chip[data-pulse-platform="snapchat"],
   .svc-platform-tab[data-filter-platform="snapchat" i]  { --plat-color: #e0c200; --plat-bg: #FFFC00; --plat-text: #000000; --plat-shadow: rgba(255, 220, 0, 0.4); --plat-hover-bg: rgba(224, 194, 0, 0.08); }
   
   .pulse-platform-chip[data-pulse-platform="spotify"],
   .svc-platform-tab[data-filter-platform="spotify" i],
   .lp-calc2__plat[data-platform="spotify"]   { --plat-color: #1DB954; --plat-bg: #1DB954; --plat-shadow: rgba(29, 185, 84, 0.35); --plat-hover-bg: rgba(29, 185, 84, 0.05); }
   
   .pulse-platform-chip[data-pulse-platform="threads"],
   .svc-platform-tab[data-filter-platform="threads" i]   { --plat-color: #000000; --plat-bg: #000000; --plat-shadow: rgba(0, 0, 0, 0.25); --plat-hover-bg: rgba(0, 0, 0, 0.05); }
   
   .pulse-platform-chip[data-pulse-platform="reviews"],
   .svc-platform-tab[data-filter-platform="reviews" i]   { --plat-color: #ffb703; --plat-bg: #ffb703; --plat-shadow: rgba(255, 183, 3, 0.35); --plat-hover-bg: rgba(255, 183, 3, 0.05); }
   
   .pulse-platform-chip[data-pulse-platform="favorite"],
   .svc-platform-tab[data-filter-platform="favorite" i]  { --plat-color: #f1c40f; --plat-bg: #f1c40f; --plat-shadow: rgba(241, 196, 15, 0.35); --plat-hover-bg: rgba(241, 196, 15, 0.05); }
   
   /* Keep favorite icon yellow in unselected state */
   .pulse-platform-chip[data-pulse-platform="favorite"]:not(.is-active) .platform-icon,
   .svc-platform-tab[data-filter-platform="favorite" i]:not(.svc-platform-tab--active) svg {
       color: #f1c40f;
   }
   
   .pulse-platform-chip[data-pulse-platform="all"],
   .svc-platform-tab[data-filter-platform="all" i]       { --plat-color: #498CE8; --plat-bg: #498CE8; --plat-shadow: rgba(73, 140, 232, 0.35); --plat-hover-bg: rgba(73, 140, 232, 0.05); }
   
   .pulse-platform-chip[data-pulse-platform="other"],
   .svc-platform-tab[data-filter-platform="other" i],
   .svc-platform-tab[data-filter-platform="__other__" i] { --plat-color: #64748b; --plat-bg: #64748b; --plat-shadow: rgba(100, 116, 139, 0.35); --plat-hover-bg: rgba(100, 116, 139, 0.05); }
   
   .svc-platform-tab[data-filter-platform="pinterest" i] { --plat-color: #E60023; --plat-bg: #E60023; --plat-shadow: rgba(230, 0, 35, 0.35); --plat-hover-bg: rgba(230, 0, 35, 0.05); }
   
   /* Google icon — inherit default grey; brand blue on hover/active via --plat-color */
   .pulse-platform-chip[data-pulse-platform="google"] svg path,
   .svc-platform-tab[data-filter-platform="google" i] svg path,
   .lp-calc2__plat[data-platform="google"] svg path {
      fill: currentColor !important;
   }
   
   /* Dark mode variations */
   [data-theme="dark"] .pulse-platform-chip[data-pulse-platform="twitter"],
   [data-theme="dark"] .svc-platform-tab[data-filter-platform="twitter" i],
   [data-theme="dark"] .lp-calc2__plat[data-platform="twitter"] { --plat-color: #ffffff; --plat-bg: #ffffff; --plat-text: #000000; --plat-shadow: rgba(255, 255, 255, 0.25); --plat-hover-bg: rgba(255, 255, 255, 0.08); }
   
   [data-theme="dark"] .pulse-platform-chip[data-pulse-platform="threads"],
   [data-theme="dark"] .svc-platform-tab[data-filter-platform="threads" i] { --plat-color: #ffffff; --plat-bg: #ffffff; --plat-text: #000000; --plat-shadow: rgba(255, 255, 255, 0.25); --plat-hover-bg: rgba(255, 255, 255, 0.08); }
   
   /* Dynamic Selector Application */
   .pulse-platform-chip:not(.is-active):not(.is-coming-soon):hover,
   .svc-platform-tab:not(.svc-platform-tab--active):hover {
       border-color: var(--plat-color);
       color: var(--plat-color);
       background: var(--plat-hover-bg);
   }
   .pulse-platform-chip:not(.is-active):not(.is-coming-soon):hover .platform-icon,
   .svc-platform-tab:not(.svc-platform-tab--active):hover svg {
       color: var(--plat-color);
   }
   
   .pulse-platform-chip.is-active,
   .svc-platform-tab--active {
       border-color: var(--plat-color) !important;
       background: var(--plat-bg) !important;
       box-shadow: 0 4px 15px 0 var(--plat-shadow) !important;
   }
   .pulse-platform-chip.is-active .platform-name,
   .pulse-platform-chip.is-active .platform-icon,
   .svc-platform-tab--active span,
   .svc-platform-tab--active svg {
       color: var(--plat-text) !important;
   }
   
   /* Mobile-only Watch Video Card */
   .lp-mobile-video-card {
       display: none; /* Hidden on desktop */
   }
   
   @media (max-width: 1080px) {
       .lp-hero__visual {
           display: none !important; /* Hide large desktop video on mobile */
       }
       
       .lp-mobile-video-card {
           display: flex;
           align-items: center;
           width: 100%;
           max-width: 480px;
           height: 54px; /* Figma: height 54px */
           margin: 20px auto;
           padding: 0; /* Figma: padding 0 */
           padding-inline-end: 20px;
           background: rgba(255, 255, 255, 0.35) !important; /* Frosted white blurry glass with visible background */
           backdrop-filter: blur(20px) !important;
           -webkit-backdrop-filter: blur(20px) !important;
           border: 1px solid rgba(255, 255, 255, 0.9) !important; /* Figma: Stroke FFFFFF 100%, weight 1 inside */
           border-radius: 8px !important; /* Figma: corner radius 8 */
           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important; /* Figma: Shadow 0-20 */
           cursor: pointer;
           text-align: start;
           position: relative;
           overflow: hidden; /* Figma: clip content checked */
           gap: 10px !important; /* Figma: Gap 10 */
           transition: transform 0.15s, box-shadow 0.15s;
       }
       
       .lp-mobile-video-card::after {
           content: none !important;
           display: none !important;
       }
       
       /* Dark mode support */
       [data-theme="dark"] .lp-mobile-video-card {
           background: rgba(255, 255, 255, 0.12) !important; /* White blurry glass on dark mode */
           border-color: rgba(255, 255, 255, 0.2) !important;
           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
       }
       [data-theme="dark"] .lp-mobile-video-card__title {
           color: #f8fafc;
       }
       [data-theme="dark"] .lp-mobile-video-card__number {
         filter: invert(1);
       }
       
       .lp-mobile-video-card:hover,
       .lp-mobile-video-card:focus {
           transform: translateY(-1px);
           box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08) !important;
           outline: none;
       }
       
       .lp-mobile-video-card__thumb-container {
           position: relative;
           width: 90px; /* Figma: Width 90 */
           height: 54px; /* Figma: Height 54 */
           border-radius: 8px; /* Figma: corner radius 8 */
           overflow: hidden;
           flex-shrink: 0;
       }
       
       /* Figma: Image 10% black overlay */
       .lp-mobile-video-card__thumb-container::after {
           content: "";
           position: absolute;
           inset: 0;
           background: rgba(0, 0, 0, 0.1);
           pointer-events: none;
       }
       
       .lp-mobile-video-card__img {
           width: 100%;
           height: 100%;
           object-fit: cover;
       }
       
       .lp-mobile-video-card__play-btn {
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           width: 32px;
           height: 32px;
           background: transparent !important;
           border-radius: 0 !important;
           box-shadow: none !important;
           display: flex;
           align-items: center;
           justify-content: center;
           color: #ffffff !important;
           z-index: 2;
       }
       
       .lp-mobile-video-card__play-btn svg {
           width: 32px;
           height: 32px;
           margin-inline-start: 2px;
           filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
       }
       
       .lp-mobile-video-card__content {
           display: flex;
           align-items: center;
           justify-content: space-between;
           flex-grow: 1;
           position: relative;
           z-index: 1;
       }
       
       .lp-mobile-video-card__title {
           font-family: 'Poppins', 'Inter', sans-serif;
           font-size: 14px;
           font-weight: 600;
           color: #262626;
       }
       
       .lp-mobile-video-card__number {
           font-family: 'Poppins', sans-serif;
           font-size: 48px;
           font-weight: 700;
           color: rgba(38, 38, 38, 0.05);
           line-height: 1;
           position: absolute;
           inset-inline-end: 0;
           top: 50%;
           transform: translateY(-50%);
           pointer-events: none;
           user-select: none;
       }
   }
   
   @media (max-width: 760px) {
       .lp-mobile-video-card {
           width: calc(100% - 80px) !important;
           max-width: none !important;
       }
   }

   /* ── Dark mode: sign-in landing — Reviews & Calculator ── */
   [data-theme="dark"] .lp-calc2 {
      background: rgba(26, 29, 46, 0.82) !important;
      border-color: rgba(255, 255, 255, 0.1) !important;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35) !important;
   }

   [data-theme="dark"] .lp-calc2__label {
      color: var(--shell-title);
   }

   [data-theme="dark"] .lp-calc2__label span {
      color: var(--shell-item);
   }

   [data-theme="dark"] .lp-calc2__plat:not(.is-active) {
      background: var(--bg-1) !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
   }

   [data-theme="dark"] .lp-calc2__plat:hover:not(.is-active) {
      background: rgba(255, 255, 255, 0.08) !important;
      border-color: var(--plat-color) !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28) !important;
   }

   [data-theme="dark"] .lp-calc2__svc-pill:not(.is-active) {
      background: var(--bg-1);
      border-color: rgba(255, 255, 255, 0.12);
      color: var(--shell-title);
   }

   [data-theme="dark"] .lp-calc2__svc-pill:hover:not(.is-active) {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.18);
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
   }

   [data-theme="dark"] .lp-calc2__result {
      background: rgba(15, 22, 41, 0.65) !important;
      border-color: rgba(255, 255, 255, 0.1) !important;
      border-left-color: var(--calc-accent) !important;
      border-right-color: var(--calc-accent) !important;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28) !important;
   }

   [data-theme="dark"] .lp-calc2__arrow {
      background: var(--bg-3);
      border-color: rgba(255, 255, 255, 0.12);
      color: var(--shell-title);
   }

   [data-theme="dark"] .lp-calc2__arrow:hover {
      border-color: rgba(255, 255, 255, 0.22);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
   }

   [data-theme="dark"] .lp-calc2__badges {
      color: var(--shell-item);
   }

   [data-theme="dark"] .lp-calc2__slider::-webkit-slider-thumb {
      border-color: var(--bg-1);
   }

   [data-theme="dark"] .lp-calc2__slider::-moz-range-thumb {
      border-color: var(--bg-1);
   }

   [data-theme="dark"] .lp-reviews-section {
      background-color: var(--bg-2);
   }

   [data-theme="dark"] .lp-reviews__rcard {
      background: rgba(26, 29, 46, 0.88) !important;
      border-color: rgba(255, 255, 255, 0.1) !important;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
   }

   [data-theme="dark"] .lp-reviews__rcard-avatar {
      border-color: rgba(255, 255, 255, 0.15);
   }

   [data-theme="dark"] .lp-reviews__tab:not(.is-active) {
      background: var(--bg-1);
      border-color: rgba(255, 255, 255, 0.1);
   }

   [data-theme="dark"] .lp-reviews__tab:not(.is-active) svg {
      color: var(--shell-icon);
   }

   [data-theme="dark"] .lp-reviews__subtabs {
      background: var(--bg-1);
      border-color: rgba(255, 255, 255, 0.1);
      box-shadow: none;
   }

   [data-theme="dark"] .lp-reviews__subtab:not(.is-active) {
      color: var(--shell-item);
   }

   [data-theme="dark"] .lp-reviews__vcard::after {
      background: rgba(0, 0, 0, 0.35);
   }

   [data-theme="dark"] #pricing {
      background: var(--bg-2) !important;
   }

   #lp-reviews {
      padding-bottom: 56px !important;
   }
   #lp-reviews-3 {
      display: none !important;
   }
   #pricing {
      background: var(--bg-5) !important;
      border-top: none !important;
      padding-top: 0 !important;
   }
   @media (max-width: 600px) {
      #pricing {
         padding-top: 56px !important;
      }
   }
   @media (min-width: 601px) {
      #lp-reviews {
         padding-bottom: 88px !important;
      }
      #pricing {
         padding-top: 40px !important;
      }
   }