/* ============================================================
   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: rgba(255, 98, 85, 0.1);
   --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: rgba(255,255,255,.3);
   --bg-2: #F8F9FC;
   --bg-3: #EBEBEB;
   --bg-4: #E3E5E5;
   --bg-5: #f2f4f5;
   --bg-6: rgba(255,255,255,.4);
   --green: #22C55E;
   --green-soft: #ECFDF5;
   --amber: #F59E0B;
   --amber-soft: #FEF9E7;
   --red: #EF4444;
   --red-soft: #FEF2F2;
   --blue: #4A6CF7;
   --blue-soft: #B2D9FF;
   --radius: 8px;
   --radius-sm: 4px;
   --radius-lg: 14px;
   --shadow-1: 0 0 20px 0 rgba(51,68,102,.1);
   --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, 58px);
   /* 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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 14px;
   line-height: 1.5;
   color: var(--ink-2);
   background-color: var(--bg-5);
   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(--shell-icon); }

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: 50px; font-size: 16px; padding: 0 13px; }
.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-4);
   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; }
   .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;
}
.qty-control .help-block {
   display: none;
}

/* ── 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: center !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;
}
.select2-selection__text {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   text-align: left;
}

/* 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:300px; max-width:595px;}
#pulse-service-search { box-sizing: border-box; }
.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;
}
/* ── 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(auto-fit, minmax(70px, 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; }
/* More/Less toggle chip + collapsed-row hidden state */
.pulse-platform-chip.is-row-hidden { display: none; }
.platform-more-chip {
   display: flex; flex-direction: column; align-items: center; justify-content: stretch;
   gap: 8px; padding: 10px 6px 12px;
   background: var(--ctrl-bg, #fff);
   border: 1px dashed var(--ink-4);
   border-radius: 8px;
   color: var(--ink-2);
   font-size: 12px; font-weight: 500;
   font-family: inherit;
   cursor: pointer; transition: all .15s;
   min-height: 80px;
   min-width: 0;
   text-align: center;
}
.platform-more-chip:hover { border-color: var(--brand); color: var(--brand); background: var(--bg-2); }
.platform-more-chip .platform-icon { width: 32px; height: 32px; color: inherit; display: inline-flex; align-items: center; justify-content: center; }

/* 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; }
   
@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;
}
.select2-container .select2-selection--single .select2-selection__rendered {
   line-height: 40px !important;
   padding-left: 0 !important;
   padding-right: 15px !important;
   color: var(--ink-1) !important;
   font-size: 14px !important;
   font-weight:400 !important;
}
.select2-container .select2-selection--single .select2-selection__arrow {
   height: 40px !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) ── */
.qty-original-input {
   display: none !important;
}
.qty-control {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 24px;
   padding: 16px 24px;
   background: var(--bg-1);
   border: 1px solid var(--line);
   border-radius: 12px;
}
.qty-display-value {
   font-size: 14px;
   font-weight: 400;
   line-height: 1;
   min-width: 48px;
   width: auto;
   font-variant-numeric: tabular-nums;
   background: none;
   border: none;
   color: var(--ink-1);
   outline: none;
   cursor: text;
   -webkit-appearance: none;
   appearance: none;
   box-shadow:none;
}
.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 auto;
   min-width: 0;
   gap: 10px;
}
.neworder-form #order_quantity input.qty-range,
.qty-range {
   -webkit-appearance: none;
   appearance: none;
   width: 100% !important;
   height: 3px !important;
   padding: 0 !important;
   border: 0 !important;
   border-radius: 3px;
   background: linear-gradient(90deg, #ff6255, #ff8d64);
   outline: none;
   cursor: pointer;
}
.qty-range::-webkit-slider-thumb {
   -webkit-appearance: none; appearance: none;
   width: 16px; height: 16px;
   background: var(--accent);
   border: 2px solid #fff;
   border-radius: 50%;
   cursor: pointer;
   box-shadow: 0 1px 4px rgba(255,98,85,.5);
}
.qty-range::-moz-range-thumb {
   width: 16px; height: 16px;
   background: var(--accent);
   border: 2px solid #fff;
   border-radius: 50%;
   cursor: pointer;
   box-shadow: 0 1px 4px rgba(255,98,85,.5);
}
.qty-ticks {
   position: relative;
   height: 14px;
   font-size: 11px;
   color: var(--ink-3);
   font-variant-numeric: tabular-nums;
}
.qty-ticks span { position: absolute; top: 0; white-space: nowrap; }


/* 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-control {
      flex-direction: column;
      padding: 14px 18px;
   }
   .qty-display-value {
      width:100%;
   }
   .qty-slider-wrap {
      width:100%;
   }
}
@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 {
   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 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-2); 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-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-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 {
   background: #313131;
   box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2);
}
.pay-tile.is-active .pay-tile-name { color: #fff; }
/* Flip monochrome (currentColor) icons to white on the dark active tile */
.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; }

/* 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-2); 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-4);
   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; line-height: 1.6; color: rgba(255,255,255,0.95); }

.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 ─── */
.tk-actions { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
.tk-btn {
   display: inline-flex; align-items: center; justify-content: center; gap: 8px;
   height: 50px; border-radius: 8px; border: 0; cursor: pointer;
   font-size: 15px; font-weight: 600; text-decoration: none; color: #fff;
}
.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-2); 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: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-services__price--green { color: #00bf7f; font-weight: 700; }
.lp-services__cta--outline {
   background: transparent;
   color: var(--ink-1);
   border: 1px solid #888;
   border-radius: 8px;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-weight: 700;
   font-size: 13px;
   padding: 8px 18px;
}
.lp-services__cta--outline:hover {
   background: var(--bg-2);
   color: var(--ink-1);
   border-color: #555;
   box-shadow: none;
   transform: none;
   text-decoration: none;
}
.lp-services__cta-arrow {
   color: var(--accent);
   margin-left: 4px;
}
@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); }
.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);
}

/* 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;
}

.lp-signinbar__alert {
   margin: 0 0 16px;
}
.lp-signinbar__row {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
}
.lp-signinbar__input {
   flex: 1;
   min-width: 200px;
   height: 48px;
   padding: 0 30px;
   background: #f5f5f5;
   border: 1px solid #dbdbdb;
   border-radius: 12px;
   font-size: 14px;
   color: var(--ink-1);
   outline: none;
   transition: border-color var(--dur-fast) ease,
               box-shadow var(--dur-normal) var(--ease-out-expo);
}
.lp-signinbar__input::placeholder { color: #888; }
.lp-signinbar__input:focus {
   border-color: var(--brand);
   box-shadow: 0 0 0 3px rgba(255,98,85,0.1);
}

/* 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__input { min-width: 0; width: 100%; box-sizing: border-box; flex: none; }
   .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__bottom .lp-container { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 14px; padding-bottom: 14px; }
   .lp-footer__payments { flex-wrap: wrap; }
   .lp-footer__social-icon {
      width: 40px;
      height: 40px;
    }
}
@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-more-chip { padding: 10px 6px; min-height: 70px; font-size: 11px; }
   .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::placeholder {
color: var(--ink-3);
}
[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(135deg, #f06543, #f5874e);
--calc-plat-active: #2AA0DB;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 36px 32px 28px;
box-shadow: var(--shadow-2);
}
.lp-calc2__step {
margin-bottom: 28px;
}
.lp-calc2__step:last-of-type { margin-bottom: 24px; }
.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;
gap: 8px;
}
.lp-calc2__arrow {
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: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: 2px 0;
}
.lp-calc2__carousel-track {
display: flex;
gap: 10px;
transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
will-change: transform;
}
.lp-calc2__plat {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
width: calc((100% - 50px) / 6);
min-width: 80px;
padding: 16px 6px 14px;
border: 2px solid var(--line);
border-radius: var(--radius);
background: var(--bg-1);
color: var(--ink-2);
cursor: pointer;
transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}
.lp-calc2__plat:hover {
border-color: var(--calc-plat-active);
color: var(--calc-plat-active);
}
.lp-calc2__plat.is-active {
background: var(--calc-plat-active);
border-color: var(--calc-plat-active);
color: #fff;
}
.lp-calc2__plat-icon {
width: 26px;
height: 26px;
flex-shrink: 0;
}
.lp-calc2__plat-name {
font-size: 11px;
font-weight: 600;
white-space: nowrap;
line-height: 1.2;
}

/* 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;
padding: 9px 20px;
border: 1.5px solid var(--line);
border-radius: 999px;
background: var(--bg-1);
color: var(--ink-2);
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, color 0.15s;
line-height: 1.3;
}
.lp-calc2__svc-pill:hover {
border-color: var(--brand);
color: var(--brand);
}
.lp-calc2__svc-pill.is-active {
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: 22px 28px;
background: var(--bg-2);
border-left: 4px solid var(--calc-accent);
border-radius: var(--radius);
margin-bottom: 20px;
}
.lp-calc2__result-left {
display: flex;
flex-direction: column;
gap: 4px;
}
.lp-calc2__result-top {
display: flex;
align-items: baseline;
gap: 10px;
}
.lp-calc2__result-price {
font-family: 'Plus Jakarta Sans', var(--ff-base);
font-size: 30px;
font-weight: 800;
color: var(--brand);
line-height: 1;
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;
gap: 6px;
justify-content: center;
padding: 14px 32px;
border-radius: var(--radius);
background: var(--calc-accent-gradient);
color: #fff;
font-size: 15px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
box-shadow: 0 4px 14px rgba(240,101,67,0.25);
}
.lp-calc2__cta:hover {
opacity: 0.92;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(240,101,67,0.35);
color: #fff;
text-decoration: none;
}

/* 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: 600px) {
.lp-calc2 { padding: 24px 16px 20px; }
.lp-calc2__plat { width: calc((100% - 20px) / 3); min-width: 72px; padding: 12px 4px; }
.lp-calc2__qty-display { font-size: 26px; }
.lp-calc2__result {
    flex-direction: column;
    text-align: center;
    padding: 16px;
}
.lp-calc2__result-left { align-items: center; }
.lp-calc2__result-top { justify-content: center; }
.lp-calc2__cta { width: 100%; padding: 14px; }
.lp-calc2__arrow { width: 30px; height: 30px; }
}
@media (max-width: 400px) {
.lp-calc2__plat { width: calc((100% - 10px) / 2); }
.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;
}

.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;
padding: 20px 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__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-top: 4px;
}
.lp-team__bio {
color: rgba(255,255,255,0.75);
font-size: 12px;
line-height: 1.5;
margin-top: 10px;
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;
}
.lp-team__socials {
display: flex;
gap: 10px;
margin-top: 10px;
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;
}
.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;
}

/* Decorative glow behind team grid */
.lp-team__glow {
position: absolute;
width: 50%;
height: 300px;
bottom: -80px;
left: 25%;
background: radial-gradient(ellipse, rgba(240,101,67,0.08) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
[data-theme="dark"] .lp-team__glow {
background: radial-gradient(ellipse, rgba(240,101,67,0.12) 0%, transparent 70%);
}

/* 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__overlay { padding: 14px 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;
}
.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: clip;
}
.lp-ecosystem__track {
display: flex;
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}
.lp-ecosystem__slide {
min-width: 100%;
flex-shrink: 0;
}

/* ── Card grids ── */
.lp-pcards {
display: grid;
}
.lp-pcards--featured {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 20px;
}
.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;
box-shadow: 0 0 20px 6px rgba(168,85,247,0.18);
}
.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;
}

/* ── 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: flex;
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; }

/* ── 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); }
}
@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;
}
@media (max-width: 640px) {
.lp-goals {
    flex-direction: column;
}
.lp-goals__tabs {
    flex: none;
    width: 100%;
    border-right: none;
    border-bottom: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}
.lp-goals__tab {
    flex: 0 0 calc(33.333% - 6px);
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
    gap: 5px;
    border-radius: 8px;
    background: var(--bg-2);
    border: 1.5px solid var(--line);
}
.lp-goals__tab.is-active {
    background: rgba(240, 101, 67, 0.08);
    border-color: #f06543;
}
.lp-goals__tab-label {
    font-size: 11px;
    text-align: center;
}
.lp-goals__panels {
    padding-left: 0;
}
}

/* 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;
}
.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__tabs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin: 40px auto 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__vcard {
position: relative;
border-radius: 16px;
overflow: hidden;
min-height: 220px;
aspect-ratio: 4 / 3;
}
.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%);
}
.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;
}
.lp-reviews__vcard-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
}
.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: flex;
gap: 2px;
background: #00000080;
padding: 2px 4px;
border-radius: 4px;
}
.lp-reviews__wslide {
flex: 0 0 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
align-items: start;
}
.lp-reviews__rcard {
background: var(--bg-6);
border: 1px solid var(--line-4);
box-shadow: 0px 0px 20px 0px #00000008;
border-radius: 12px;
padding: 30px 20px;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
column-gap: 14px;
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__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__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__wslide {
    grid-template-columns: 1fr;
}
.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;
gap: 16px;
flex-wrap: wrap;
}
.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; }

/* ── 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;
}