/* =========================================================================
   FRESHCONNECTPANEL — DESIGN SYSTEM
   File kept as bootstrap.css to preserve PerfectPanel's <link> reference.
   Content is a full replacement: CSS custom properties + component classes
   compatible with existing Twig markup (container, row, col-md-*, navbar,
   form-group, form-control, btn, well, alert, badge, dropdown, collapse).
   ========================================================================= */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap');

/* ---- Design tokens ---- */
:root{
  --bg:            #F5F7FC;
  --surface:       #FFFFFF;
  --surface-2:     #EEF1FA;
  --text:          #12173A;
  --text-muted:    #666C8C;
  --border:        rgba(18,23,58,.09);
  --primary:       #0328D1;
  --primary-dark:  #021F9E;
  --primary-ink:   #FFFFFF;
  --accent:        #0328D1;
  --alt:           #56BAFF;
  --success:       #17B89C;
  --cta:           #FF6B4A;
  --danger:        #E5484D;
  --shadow-sm:     0 1px 2px rgba(18,23,58,.06);
  --shadow-md:     0 8px 24px rgba(18,23,58,.10);
  --shadow-lg:     0 24px 60px rgba(18,23,58,.16);
  --radius-sm:     10px;
  --radius-md:     16px;
  --radius-lg:     24px;
  --font-display:  'Poppins', sans-serif;
  --font-body:     'Poppins', sans-serif;
  --font-mono:     'Poppins', sans-serif;
  --ease:          cubic-bezier(.22,.9,.25,1);
  --dur-fast:      .18s;
  --dur-med:       .45s;
  --dur-slow:      .9s;
}

[data-theme="dark"]{
  --bg:            #0A0D1F;
  --surface:       #12162E;
  --surface-2:     #191E3B;
  --text:          #F1F2F9;
  --text-muted:    #9497B8;
  --border:        rgba(255,255,255,.08);
  --primary:       #56BAFF;
  --primary-dark:  #2E8FE0;
  --primary-ink:   #0328D1;
  --accent:        #56BAFF;
  --alt:           #0328D1;
  --shadow-sm:     0 1px 2px rgba(0,0,0,.3);
  --shadow-md:     0 8px 24px rgba(0,0,0,.4);
  --shadow-lg:     0 24px 60px rgba(0,0,0,.55);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior:auto !important; }
}

/* ---- Reset ---- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
  overflow-x:hidden; width:100%;
}
h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); font-weight:600; line-height:1.1; margin:0 0 .5em; letter-spacing:-.01em; }
p{ margin:0 0 1em; color:var(--text-muted); }
a{ color:var(--primary); text-decoration:none; transition:color var(--dur-fast) var(--ease); }
a:hover{ color:var(--primary-dark); }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* ---- Layout grid (Bootstrap-3-class-compatible) ---- */
.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; }

@media (max-width:600px){
  .container{ padding:0 14px; }
  .well{ padding:22px !important; }
  .guide-block{ padding:20px !important; }
  .page-header{ padding:24px 0 18px; }
}
.container-fluid{ width:100%; padding:0 24px; }
.row{ display:flex; flex-wrap:wrap; margin:0 -12px; }
.row > [class*="col-"]{ padding:0 12px; }
[class^="col-md-"]{ flex:0 0 auto; width:100%; }
@media (min-width:768px){
  .col-md-1{width:8.333%} .col-md-2{width:16.667%} .col-md-3{width:25%}
  .col-md-4{width:33.333%} .col-md-5{width:41.667%} .col-md-6{width:50%}
  .col-md-7{width:58.333%} .col-md-8{width:66.667%} .col-md-9{width:75%}
  .col-md-10{width:83.333%} .col-md-11{width:91.667%} .col-md-12{width:100%}
  .col-md-offset-2{margin-left:16.667%}
  .text-md-right{ text-align:right; }
}
.hidden{ display:none !important; }

/* ---- Navbar ---- */
body{ padding-top:14px; }
.navbar{
  background:var(--surface); border:1px solid var(--border);
  padding:0 12px; position:sticky; top:12px; z-index:100;
  border-radius:28px; box-shadow:var(--shadow-lg);
  width:calc(100% - 24px); max-width:1180px; margin:0 auto 14px;
  transition:background var(--dur-med) var(--ease);
}
.navbar .container{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  max-width:none; padding:0 8px;
}
.navbar-brand{ font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--text); display:flex; align-items:center; gap:9px; white-space:nowrap; flex:0 0 auto; }
.navbar-brand img{ height:100px; width:auto; max-width:none; flex-shrink:0; }
@media (max-width:900px){ .navbar-brand img{ height:64px; } }
@media (max-width:520px){ .navbar-brand img{ height:48px; } }
.logo-dark{ display:none; }
[data-theme="dark"] .logo-light{ display:none; }
[data-theme="dark"] .logo-dark{ display:block; }
.navbar-nav{ list-style:none; display:flex; gap:2px; margin:0; padding:0; align-items:center; white-space:nowrap; }
.navbar-nav > li > a{
  display:flex; align-items:center; gap:6px; padding:8px 13px; border-radius:9px;
  color:var(--text-muted); font-weight:500; font-size:14px;
}
.navbar-nav > li.active > a{ color:var(--primary-ink); background:var(--primary); font-weight:600; }
.navbar-nav > li > a:hover{ color:var(--text); }
/* Same specificity as the rule above (2 classes + 2 elements each), so
   without this the generic hover rule wins on source order and overrides
   just the text color on the active (blue-background) item — leaving
   near-black text (--text) on a blue pill in light mode, which is the
   low-contrast "black text on hover" bug. Keep the active item's ink color
   through hover explicitly. */
.navbar-nav > li.active > a:hover{ color:var(--primary-ink); }

.navbar-toggle{ display:none; background:none; border:1px solid var(--border); border-radius:8px; padding:8px 10px; cursor:pointer; flex:0 0 auto; }
.navbar-toggle .icon-bar{ display:block; width:20px; height:2px; background:var(--text); margin:4px 0; border-radius:2px; }

/* #navbar is the real Bootstrap .collapse.navbar-collapse wrapper — inline
   flex row on desktop, dropdown panel toggled by .navbar-toggle on mobile.
   Toggling is handled by PerfectPanel's own Bootstrap JS (data-toggle="collapse"),
   not our script.js, to avoid a double-toggle conflict. */
#navbar.collapse{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

@media (max-width:960px){
  .navbar-toggle{ display:block; }
  #navbar.collapse{
    display:none; flex-basis:100%; width:100%; flex-direction:column; align-items:stretch;
    background:var(--surface); border-top:1px solid var(--border); margin-top:12px; padding:12px 4px 16px; gap:4px;
  }
  #navbar.collapse.in{ display:flex; }
  /* Checked against the real bootstrap.js: Collapse.prototype.show/hide both
     do `.removeClass('collapse').addClass('collapsing')` (and the reverse on
     hide removes 'collapse' + 'in' too) — so during the whole height
     animation the element does NOT have the "collapse" class at all, only
     "collapsing". The previous rule here required BOTH ".collapse" and
     ".collapsing" together, which per the real plugin code can never be
     true, so it never matched — that's why the flash was still happening.
     Matching on ".collapsing" alone (no ".collapse" required) is what
     actually applies during the animation. */
  #navbar.collapsing{
    display:flex; flex-basis:100%; width:100%; flex-direction:column; align-items:stretch;
    background:var(--surface); border-top:1px solid var(--border); margin-top:12px; padding:12px 4px 16px; gap:4px;
  }
  .navbar-nav{ flex-direction:column; align-items:stretch; gap:2px; }
  .navbar-nav > li > a{ padding:12px 16px; }
}

/* ---- Theme toggle ---- */
.theme-toggle{
  display:flex; align-items:center; gap:8px; flex:0 0 auto; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border); border-radius:999px;
  padding:6px 14px 6px 6px; font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--text);
  transition:background var(--dur-fast) var(--ease); white-space:nowrap;
}
.theme-toggle .track{
  width:34px; height:18px; border-radius:999px; background:var(--border); position:relative; flex:0 0 auto;
}
.theme-toggle .track::after{
  content:'☀️'; font-size:11px; line-height:14px; position:absolute; top:2px; left:2px; width:14px; height:14px;
  border-radius:50%; background:var(--surface); display:flex; align-items:center; justify-content:center;
  transition:transform var(--dur-fast) var(--ease);
}
[data-theme="dark"] .theme-toggle .track::after{ content:'🌙'; transform:translateX(16px); }
.theme-toggle .tt-label::after{ content:'Light'; }
[data-theme="dark"] .theme-toggle .tt-label::after{ content:'Dark'; }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:15px;
  padding:12px 22px; border-radius:12px; border:1px solid transparent;
  cursor:pointer; transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.btn:active{ transform:translateY(1px) scale(.98); }
.btn-primary{
  background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 82%, #fff 18%), var(--primary));
  color:var(--primary-ink); font-weight:700; border-bottom:3px solid var(--primary-dark);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 3px rgba(0,0,0,.18),
    0 6px 14px -4px color-mix(in srgb, var(--primary) 55%, transparent);
}
.btn-primary:hover{
  background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 90%, #fff 10%), var(--primary-dark));
  color:var(--primary-ink); transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 3px rgba(0,0,0,.2),
    0 10px 20px -4px color-mix(in srgb, var(--primary) 60%, transparent);
}
.btn-primary:active{
  transform:translateY(2px) scale(.98); border-bottom-width:1px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.25);
}
.btn-cta{ background:var(--cta); color:#fff; }
.btn-cta:hover{ filter:brightness(1.07); transform:translateY(-1px); color:#fff; }
.btn-block{ display:flex; width:100%; }

/* ---- Forms ---- */
.form-group{ margin-bottom:18px; }
.control-label{ display:block; font-size:13.5px; font-weight:600; color:var(--text-muted); margin-bottom:6px; }
.form-control{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font-size:15px; font-family:var(--font-body);
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-control:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(91,95,239,.15); }
.form-inline{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.forgot-password{ float:right; font-size:13px; }
.form-group__password{ overflow:hidden; }
.pull-right-middle{ font-size:14px; color:var(--text-muted); }
.pull-right{ float:right; }
.text-center{ text-align:center; }
.text-right{ text-align:right; }
.help-block{ font-size:12.5px; color:var(--text-muted); margin-top:6px; }
.nowrap{ white-space:nowrap; }

/* ---- Checkbox ---- */
.checkbox{ margin:4px 0 18px; }
.checkbox label{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--text-muted); font-weight:400; cursor:pointer; }
.checkbox input[type="checkbox"]{ margin-top:3px; width:16px; height:16px; accent-color:var(--primary); flex:0 0 auto; cursor:pointer; }
.checkbox a{ font-weight:600; }

/* ---- Simple auth page (signup, reset-password, etc.) ---- */
.auth-page{ position:relative; min-height:calc(100vh - 220px); display:flex; align-items:center; padding:48px 24px; overflow:hidden; }
.auth-card-wrap{ position:relative; z-index:1; max-width:480px; width:100%; margin:0 auto; }
.auth-card-wrap .eyebrow{ display:flex; margin:0 auto 16px; width:fit-content; }
.auth-card-wrap h1{ text-align:center; font-size:clamp(26px,4vw,34px); margin-bottom:8px; }
.auth-card-wrap .auth-sub{ text-align:center; margin-bottom:28px; }

/* =========================================================================
   SHARED APP CHROME — page headers, tables, dropdown/nav-pills, code blocks
   Used across services, API, and every authenticated dashboard page.
   ========================================================================= */
.page-header{ padding:36px 0 28px; }
.page-header h1{ font-size:clamp(24px,3.4vw,32px); margin-bottom:6px; }
.page-header p{ margin:0; }

.well.well-float{ padding:24px; overflow-x:auto; }
@media (max-width:600px){ .well.well-float{ padding:12px; } }

.table{ width:100%; border-collapse:collapse; font-size:14px; }
@media (max-width:900px){
  /* This table has too many columns to usefully reflow on a phone — instead
     of squeezing every column unreadable, keep it at a real desktop width
     and let .well-float's overflow-x:auto handle horizontal scrolling. */
  #service-table{ min-width:760px; }
}

/* REVERTED: table-layout:fixed here previously broke the table outright —
   with several of the th's conditional (favorite-star column, average-time
   column) the real column count varies per account/site config, so the
   "split the remaining width evenly among unspecified columns" behavior of
   fixed layout squeezed the nowrap Rate/Min/Max/Avg-time headers into cells
   too narrow to hold them, and since nowrap text isn't clipped by default it
   visibly overlapped the neighboring columns. Back to table-layout:auto
   (the default — not re-declared) and instead just capping the one column
   that was actually causing the post-load reflow (service name, which
   PerfectPanel's own search/filter plugin modifies after init) with a hard
   max-width, so that cell alone can't grow the table after the fact without
   having to hand-size every other column. */
#service-table td.service-name, #service-table th.width-service-name{
  max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---- Global scale-down: the design reads slightly large overall. Using
   `zoom` (well-supported: Chrome, Safari, Edge, Firefox 126+) rather than
   transform:scale, since transform doesn't affect layout flow and would
   need extra width/height compensation to avoid clipping or stray gaps. ---- */
html{ zoom:0.85; }

/* ---- Force-desktop pages: Services only (Orders was moved off this in
   layout.twig's URL-detection script — a wide table + real mobile layout is
   what's wanted there now, not a scaled-down desktop canvas). Instead of the
   earlier viewport-meta-width trick (unreliable — many mobile browsers
   don't auto-scale to fit and just crop the wider layout instead), this
   computes the exact zoom ratio needed to fit a 1024px-wide desktop layout
   into whatever the real device width is, so nothing is ever cropped. This
   REPLACES (doesn't stack with) the 0.7 global zoom above, since it's a
   more specific rule targeting the same property. */
html.force-desktop-view{ zoom:calc(100vw / 1024px); }
html.force-desktop-view body{ min-width:1024px; }
/* No dropdown-direction override here anymore — the sitewide default below
   is now left:0 (open rightward, toward the middle of the screen) for
   exactly this reason: forcing right:0 here made the filter dropdown's menu
   open leftward off the edge of the screen when its toggle button sits near
   the left of the row, which is what every "dropdown opens off to the side"
   report has actually been. */

/* ---- Compact pages (Updates): tighter type + padding so wide tabular
   content has more room to breathe on narrow screens, without forcing full
   desktop-scale like Services. ---- */
html.compact-page .table{ font-size:12.5px; }
html.compact-page .table th, html.compact-page .table td{ padding:8px 6px; }
@media (max-width:600px){
  html.compact-page .container{ padding:0 8px; }
  html.compact-page .well-float{ padding:14px; }
}
.table th{
  text-align:left; font-weight:600; color:var(--text-muted); font-size:12.5px;
  text-transform:uppercase; letter-spacing:.03em; padding:10px 12px; border-bottom:2px solid var(--border);
  white-space:nowrap;
}
.table td{ padding:12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.table tbody tr:hover{ background:var(--surface-2); }
.table tr[data-filter-table-category-id] td[colspan]{
  background:var(--surface-2); color:var(--primary); font-weight:700; padding:10px 12px; border-bottom:1px solid var(--border);
}

.nav-pills{ list-style:none; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:0; margin:0 0 16px; }
/* Search fills whatever row space is left after the filter button(s) to its
   left, spanning to the right edge — not a fixed box. flex:1 with a
   min-width lets it grow to fill the row and still shrink/wrap to its own
   line if the row genuinely can't fit it next to the filter button(s). */
.nav-pills .search{ flex:1 1 240px; min-width:200px; float:none; }
.nav-pills .search .input-group{ width:100%; }
@media (max-width:600px){
  /* Scoped away from html.force-desktop-view (Services): CSS `zoom` does
     not change what @media width queries evaluate against — they still
     check the real device viewport, not the post-zoom visual size — so
     without this guard, this stacking rule fires even on a "desktop scale"
     page, stretching each <li> (and the .dropdown filter button inside it)
     to the full row width, which is what was pushing the filter dropdown's
     menu out from under its button. */
  html:not(.force-desktop-view) .nav-pills{ flex-direction:column; align-items:stretch; }
}
.input-group{ display:flex; align-items:stretch; }
.input-group .form-control{ border-top-right-radius:0; border-bottom-right-radius:0; flex:1; min-width:0; }
.input-group-btn{ display:flex; }
.input-group-btn .btn{ border-top-left-radius:0; border-bottom-left-radius:0; padding:0 18px; height:auto; }
.btn-default{ background:var(--primary); color:var(--primary-ink); border:1px solid var(--primary); }
.btn-default:hover{ background:var(--primary-dark); color:var(--primary-ink); }
.btn-xs{ padding:5px 10px; font-size:12px; border-radius:8px; }

.dropdown-toggle .caret{ margin-left:4px; }

pre, code{ font-family:var(--font-mono); }
pre{
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
  padding:16px; overflow-x:auto; font-size:13px; line-height:1.6;
}
code{ background:var(--surface-2); padding:2px 6px; border-radius:6px; font-size:13px; }
pre code{ background:none; padding:0; }

/* ---- Dashboard stat cards (new order landing page) ---- */
.dash-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:28px; }
.dash-stats-4col{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .dash-stats-4col{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .dash-stats-4col{ grid-template-columns:1fr; } }

.app-download-banner{
  background:linear-gradient(135deg,var(--primary),#8B5FEF); border-radius:var(--radius-lg);
  padding:36px 28px; text-align:center; color:#fff; margin-top:8px;
}
.app-download-banner .app-download-icon{ font-size:32px; margin-bottom:10px; }
.app-download-banner h3{ color:#fff; font-size:19px; margin:0 0 8px; }
.app-download-banner p{ color:rgba(255,255,255,.85); font-size:14px; max-width:420px; margin:0 auto 20px; }
.app-download-banner .btn{ background:#fff; color:var(--primary-dark); }
.dash-stat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:20px; display:flex; align-items:center; gap:14px;
}
.dash-stat-icon{
  width:42px; height:42px; border-radius:10px; background:rgba(3,40,209,.1); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 auto;
}
.dash-stat-card b{ font-size:16px; display:block; }
.dash-stat-card span{ font-size:12.5px; color:var(--text-muted); }
.dash-stat-card a{ font-weight:600; }

.dash-video-wrap{ border-radius:16px; overflow:hidden; margin:0 0 20px; position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.dash-video-wrap iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; display:block; }
.dash-app-download{ text-align:center; margin:0 0 28px; }

/* ---- Tab interface: Dashboard / Place Order (same page, feels separate) ---- */
.page-tabs{ display:flex; gap:8px; border-bottom:1px solid var(--border); margin-bottom:0; }
.page-tab{
  padding:12px 22px; font-weight:700; font-size:14.5px; color:var(--text-muted); cursor:pointer;
  border-bottom:3px solid transparent; margin-bottom:-1px; transition:color var(--dur-fast) var(--ease);
}
.page-tab:hover{ color:var(--text); }
.page-tab.active{ color:var(--primary); border-bottom-color:var(--primary); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

.guide-block{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px; margin-bottom:20px; }
.guide-block .highlight{ color:var(--primary); font-weight:600; }

.guide-steps{ display:flex; flex-direction:column; gap:12px; }
.guide-step{ display:flex; gap:14px; align-items:flex-start; padding:14px 16px; background:var(--surface-2); border-radius:12px; }
.guide-step-icon{ width:30px; height:30px; border-radius:8px; background:rgba(3,40,209,.12); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex:0 0 auto; }
.guide-step p{ margin:0; font-size:14px; line-height:1.6; color:var(--text); }
.guide-tip{ display:flex; gap:12px; align-items:center; background:rgba(23,184,156,.08); border-radius:12px; padding:14px 18px; margin-top:8px; }
.guide-tip p{ margin:0; font-size:13.5px; color:var(--text); }

.update-card{
  display:flex; align-items:center; gap:16px; background:linear-gradient(135deg,var(--primary),#8B5FEF);
  border-radius:var(--radius-lg); padding:26px 28px; color:#fff;
}
.update-card .update-badge{ background:rgba(255,255,255,.2); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:5px 12px; border-radius:999px; display:inline-block; margin-bottom:8px; }
.update-card h3{ color:#fff; font-size:18px; margin:0 0 6px; }
.update-card p{ color:rgba(255,255,255,.85); margin:0 0 14px; font-size:14px; }
.update-card .btn{ background:#fff; color:var(--primary-dark); }
.update-card .update-links{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---- Restyle PerfectPanel's visual-builder dashboard widget (New Order page
   stat cards) to match our design system. This targets the builder's own
   class names directly — it doesn't touch how the widget gets its live data
   (Explorer tier, discount %, balance, active services), only how it looks. ---- */
.totals-block__card{
  background:var(--surface) !important; border:1px solid var(--border) !important;
  border-radius:var(--radius-md) !important; box-shadow:none !important;
  padding:20px !important; display:flex !important; align-items:center !important; gap:14px !important;
}
.totals-block__icon-preview{
  background:rgba(3,40,209,.1) !important; border-radius:10px !important;
  width:42px !important; height:42px !important; min-width:42px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
.totals-block__icon{ color:var(--primary) !important; font-size:18px !important; }
.totals-block__count-value{ color:var(--text) !important; font-size:16px !important; font-family:var(--font-display) !important; }
.totals-block__card-name, .totals-block__card-name p{ color:var(--text-muted) !important; font-size:12.5px !important; margin:0 !important; }
.totals-block__card-name a{ color:var(--primary) !important; font-weight:600 !important; }
.col-ed-elements{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important; gap:16px !important; }

/* ---- Contact page: platform cards ---- */
.contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.contact-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:24px; display:flex; flex-direction:column; gap:10px;
}
.contact-card .contact-icon{
  width:44px; height:44px; border-radius:10px; background:rgba(3,40,209,.1); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
.contact-card h4{ font-size:16px; margin:0; }
.contact-card p{ font-size:14px; margin:0; flex:1; }
.contact-card a.btn{ align-self:flex-start; padding:8px 16px; font-size:13.5px; }

/* ---- Modal ---- */
.modal{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; background:rgba(10,13,31,.55); padding:20px; }
.modal.in, .modal.show{ display:flex; }
.modal-dialog{ width:100%; max-width:520px; }
.modal-content{ background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; }
.modal-header{ padding:18px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-title{ font-size:17px; margin:0; }
.modal-body{ padding:22px; }
.modal .close{ background:none; border:none; font-size:20px; color:var(--text-muted); cursor:pointer; }

/* ---- Ticket thread ---- */
.titcket-title{ font-size:19px; font-weight:700; margin-bottom:20px; }
.ticket-message-block{ margin-bottom:18px; }
.ticket-message{
  background:var(--surface-2); border-radius:16px; padding:16px 18px; display:inline-block; max-width:100%;
}
.ticket-message-right .ticket-message{ background:var(--primary); color:var(--primary-ink); border-bottom-right-radius:4px; }
.ticket-message-left .ticket-message{ border-bottom-left-radius:4px; }
.ticket-message-right .ticket-message a{ color:var(--primary-ink); text-decoration:underline; }
.ticket-message .message{ font-size:14.5px; line-height:1.55; white-space:pre-wrap; }
.ticket-message-block .info{ margin-top:6px; font-size:12.5px; color:var(--text-muted); }
.ticket-message-block .info strong{ color:var(--text); }
.ticket-message-block .text-right{ text-align:right; }
.panel-border-top{ border-top:1px solid var(--border); padding-top:20px; margin-top:8px; }

/* =========================================================================
   AUTHENTICATED APP SHELL — persistent sidebar (desktop) + drawer (mobile)
   ========================================================================= */
.app-shell{ display:flex; align-items:flex-start; }
.app-sidebar{
  width:260px; flex:0 0 260px; position:sticky; top:0; align-self:flex-start; height:100vh;
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:20px 16px; z-index:80;
}
.app-sidebar-brand{ display:block; margin-bottom:20px; padding:0 6px; }
.app-sidebar-brand img{ height:52px; width:auto; }
.app-sidebar-nav{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; }
.app-sidebar-nav li a{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px; color:var(--text-muted); font-weight:500; font-size:14.5px; }
.app-sidebar-nav li a:hover{ background:var(--surface-2); color:var(--text); }
.app-sidebar-nav li.active a{ background:var(--primary); color:var(--primary-ink); font-weight:600; }
.app-sidebar-nav .navbar-icon{ width:18px; text-align:center; flex:0 0 auto; }
.app-sidebar-footer{ padding-top:14px; border-top:1px solid var(--border); margin-top:12px; }
.app-sidebar-footer .theme-toggle{ width:100%; justify-content:center; }

.app-main{ flex:1; min-width:0; }
.app-topbar-desktop{
  display:flex; justify-content:flex-end; align-items:center; padding:16px 28px; border-bottom:1px solid var(--border);
  gap:10px; position:sticky; top:0; z-index:70; background:var(--surface);
}
.app-account-menu{ list-style:none; display:flex; align-items:center; gap:6px; margin:0; padding:0; }
.app-account-menu li a{ font-size:14px; font-weight:600; color:var(--text); padding:8px 14px; border-radius:10px; display:flex; align-items:center; gap:6px; }
.app-account-menu li a:hover{ background:var(--surface-2); }
.app-content{ padding:28px; }

.app-topbar-mobile{ display:none; }
.app-drawer{ display:none; }

@media (max-width:960px){
  .app-sidebar{ display:none; }
  .app-topbar-desktop{ display:none; }
  .app-topbar-mobile{
    display:flex; align-items:center; justify-content:space-between; padding:10px 16px; gap:12px;
    background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100;
  }
  .app-topbar-mobile .navbar-brand img{ height:44px; }
  .app-drawer.in{ display:block; }
  /* Same transient-collapsing gap as #navbar above (see comment there) —
     covered here too since the dashboard drawer uses the same real
     Bootstrap collapse toggle. */
  .app-drawer.collapsing{ display:block; background:var(--surface); border-bottom:1px solid var(--border); padding:14px 16px 18px; }
  .app-drawer{ background:var(--surface); border-bottom:1px solid var(--border); padding:14px 16px 18px; }
  .app-drawer ul{ list-style:none; margin:0 0 14px; padding:0; }
  .app-drawer li a{ display:flex; align-items:center; gap:10px; padding:10px 8px; font-weight:500; color:var(--text); border-radius:8px; }
  .app-drawer li.active a{ color:var(--primary-ink); background:var(--primary); font-weight:700; }
  .app-content{ padding:20px 16px; }
}

/* ---- Blog list ---- */
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:24px; align-items:stretch; margin-bottom:48px; }
.well.blog-card{
  padding:0; overflow:hidden; display:flex; flex-direction:column; height:100%;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.blog-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.blog-card img{ width:100%; height:180px; object-fit:cover; }
.blog-card .blog-card-body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.blog-card h4{ font-size:17px; margin-bottom:10px; line-height:1.35; }
.blog-card .blog-card-body > div{ color:var(--text-muted); font-size:14px; margin-bottom:16px; flex:1; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.blog-card .btn{ align-self:flex-start; }

/* ---- Pagination ---- */
.pagination{ list-style:none; display:flex; gap:6px; padding:0; margin:24px 0 40px; justify-content:center; }
.pagination li a{
  display:flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px;
  border-radius:10px; border:1px solid var(--border); color:var(--text); font-weight:600; font-size:14px;
}
.pagination li a:hover{ background:var(--surface-2); }
.pagination li.active a{ background:var(--primary); color:var(--primary-ink); border-color:var(--primary); }

/* ---- Well / card ---- */
.well{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:36px; box-shadow:var(--shadow-md); margin-bottom:22px;
}
.well:last-child{ margin-bottom:0; }

/* ---- Alerts ---- */
.alert{ padding:14px 18px; border-radius:12px; margin-bottom:18px; font-size:14.5px; position:relative; }
.alert-danger{ background:rgba(229,72,77,.1); color:#E5484D; border:1px solid rgba(229,72,77,.25); }
.alert-success{ background:rgba(23,184,156,.1); color:#0E8C77; border:1px solid rgba(23,184,156,.25); }
.alert .close{ position:absolute; right:14px; top:10px; background:none; border:none; font-size:18px; color:inherit; cursor:pointer; opacity:.6; }
.alert .close:hover{ opacity:1; }

/* ---- Badge / caret / dropdown ---- */
.badge{ background:var(--surface-2); color:var(--text); font-family:var(--font-mono); font-size:13px; padding:4px 10px; border-radius:999px; }
.dropdown-currencies .dropdown-toggle{ display:flex; align-items:center; gap:8px; }
.dropdown-currencies .badge{ background:var(--primary); color:var(--primary-ink); font-weight:700; padding:8px 16px; }
.dropdown-currencies .caret{ color:var(--primary); }
.app-drawer .dropdown-currencies .badge{ width:100%; justify-content:center; display:flex; }
.caret{ display:inline-block; width:0; height:0; margin-left:5px; border:4px solid transparent; border-top-color:currentColor; vertical-align:middle; }
.dropdown{ position:relative; }
/* Scoped to .dropdown (my own currency/account menus) specifically — NOT a
   bare .dropdown-menu selector. PerfectPanel's category/service search
   plugin (data-select="true") also generates elements with a generic
   "dropdown-menu" class; an unscoped rule here was overriding its own
   compact mobile styling, causing the oversized, poorly-spaced rows. */
/* Default anchor is left:0 (menu opens rightward from the button) — every
   filter/type dropdown on the site (services category, orders status,
   updates type) has its toggle button at the LEFT of its row, so opening
   rightward keeps the menu on-screen. right:0 (opening leftward) is only
   correct for a toggle that sits at the right edge of the screen, which is
   just the account/currency menu in the desktop topbar — that gets its own
   override right below instead of being the sitewide default. */
.dropdown > .dropdown-menu{
  position:absolute; left:0; right:auto; top:calc(100% + 8px); min-width:180px; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); padding:8px;
  list-style:none; display:none; z-index:200; max-height:320px; overflow-y:auto;
  max-width:calc(100vw - 32px);
}
.dropdown.open > .dropdown-menu{ display:block; }
.dropdown > .dropdown-menu li a{ display:block; padding:8px 12px; border-radius:8px; color:var(--text); font-size:14px; }
.dropdown > .dropdown-menu li a:hover{ background:var(--surface-2); }
.dropdown > .dropdown-menu li.active a{ background:var(--primary); color:var(--primary-ink); font-weight:700; }
/* The one dropdown that genuinely sits at the right edge of the screen:
   the account/currency menu in the desktop authenticated topbar
   (.app-topbar-desktop is justify-content:flex-end and only shown above the
   960px breakpoint — its mobile-drawer equivalent is at the left already,
   so it uses the default). Opening rightward there would run off the right
   edge, so it keeps the old leftward-opening behavior. */
.app-topbar-desktop .dropdown > .dropdown-menu{ left:auto; right:0; }

/* ---- PerfectPanel's category/service picker plugin ----
   I don't control its internal class names, but I DO control these exact
   container IDs (added via data-select-container in neworder.twig), so
   styling is targeted there instead of guessing the plugin's own classes —
   which is what broke last time this was "fixed". */
#select-category-container, #select-service-container{ position:relative; z-index:50; }
#select-category-container ul, #select-service-container ul,
#select-category-container [class*="dropdown"], #select-service-container [class*="dropdown"]{
  background:var(--surface) !important; border:1px solid var(--border) !important;
  border-radius:12px !important; box-shadow:var(--shadow-lg) !important;
  max-height:320px; overflow-y:auto; z-index:250 !important;
}
#select-category-container li, #select-service-container li,
#select-category-container li a, #select-service-container li a{
  display:flex !important; align-items:center !important; gap:8px !important;
  font-size:13px !important; padding:8px 10px !important; line-height:1.3 !important;
}
#select-category-container img, #select-service-container img,
#select-category-container li > span:first-child, #select-service-container li > span:first-child{
  flex:0 0 auto; width:18px; height:18px; object-fit:contain;
}

/* =========================================================================
   HOMEPAGE / SIGN-IN — hero, benefits, stats
   ========================================================================= */
.hero{ position:relative; padding:64px 0 56px; overflow:hidden; }
.hero-blob{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; pointer-events:none; z-index:0;
  transition:transform .05s linear;
}
.hero-blob.b1{ width:420px; height:420px; background:var(--primary); top:40px; right:-120px; }
.hero-blob.b2{ width:320px; height:320px; background:var(--accent); bottom:-140px; left:-80px; opacity:.22; }
[data-theme="dark"] .hero-blob{ opacity:.25; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; position:relative; z-index:1; }
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero{ padding:20px 0 32px; }
  .hero-blob.b1{ width:260px; height:260px; top:-40px; right:-90px; opacity:.22; }
  .hero-blob.b2{ width:200px; height:200px; }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--primary); background:rgba(91,95,239,.1);
  padding:7px 14px; border-radius:999px; margin-bottom:14px;
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse-dot 1.8s infinite; }
@keyframes pulse-dot{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(1.4);} }

.hero h1{ font-size:clamp(34px,4.6vw,54px); margin-bottom:.25em; }
.hero h1 .accent{ color:var(--primary); }
.hero-copy{ text-align:left; }
.hero-sub{ font-size:17px; max-width:480px; margin:0 0 16px; text-align:justify; text-align-last:left; }

.pulse-wrap{ position:relative; height:110px; margin:8px 0 18px; overflow:visible; }
.pulse-wrap--mobile{ display:none; }
@media (max-width:900px){
  .pulse-wrap--desktop{ display:none; }
  .pulse-wrap--mobile{ display:block; margin:18px 0 0; height:100px; }
}
.pulse-wrap svg{ width:100%; height:100%; overflow:visible; }
.pulse-line{ fill:none; stroke:var(--primary); stroke-width:2.5; stroke-linecap:round; }
.pulse-fill{ opacity:.15; }
.pulse-dot{ fill:var(--alt); }
.pulse-flow{ fill:none; stroke:var(--alt); stroke-width:3; stroke-linecap:round; stroke-dasharray:6 26; animation:pulse-flow 2.2s linear infinite; opacity:.95; }
@keyframes pulse-flow{ to{ stroke-dashoffset:-64; } }

/* ---- Floating platform icons along the pulse graph ---- */
.pulse-icon{
  position:absolute; width:58px; height:58px; border-radius:50%;
  box-shadow:var(--shadow-md); background-color:var(--surface);
  background-repeat:no-repeat; background-size:210%; background-position:center 15%;
  animation:pulse-float 3.4s ease-in-out infinite; z-index:2;
}
@keyframes pulse-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

.trust-stats{ display:flex; gap:32px; flex-wrap:wrap; }
.trust-stat b{ font-family:var(--font-mono); font-size:22px; display:block; color:var(--text); }
.trust-stat span{ font-size:12.5px; color:var(--text-muted); }

.login-card{ position:relative; perspective:1000px; }
.login-card .well{ padding:32px; transition:transform .12s ease-out, box-shadow var(--dur-fast) var(--ease); transform-style:preserve-3d; will-change:transform; }

.benefits{ padding:76px 0; }
.benefits-head{ text-align:center; max-width:560px; margin:0 auto 48px; }
.benefit-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; }
.benefit-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:26px; box-shadow:var(--shadow-sm);
  opacity:0; transform:translateY(44px) scale(.94); filter:blur(6px);
  transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.benefit-card.is-visible{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
.benefit-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-6px) scale(1.01); }
.benefit-grid .benefit-card:nth-child(1){ transition-delay:0s; }
.benefit-grid .benefit-card:nth-child(2){ transition-delay:.08s; }
.benefit-grid .benefit-card:nth-child(3){ transition-delay:.16s; }
.benefit-grid .benefit-card:nth-child(4){ transition-delay:.24s; }
.benefit-icon{
  width:44px; height:44px; border-radius:12px; background:rgba(91,95,239,.1); color:var(--primary);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:19px;
}
.benefit-card h3{ font-size:17px; margin-bottom:6px; }
.benefit-card p{ font-size:14.5px; margin:0; }

.stats-bar{
  background:var(--text); color:#fff; border-radius:var(--radius-lg); padding:36px 24px;
  display:flex; justify-content:space-around; flex-wrap:wrap; gap:24px; margin:0 24px;
}
[data-theme="dark"] .stats-bar{ background:var(--surface-2); }
.stats-bar .stat b{ font-family:var(--font-mono); font-size:26px; display:block; }
.stats-bar .stat span{ font-size:12.5px; opacity:.7; }

[data-reveal]{ opacity:0; transform:translateY(36px) scale(.97); filter:blur(4px); transition:opacity .75s var(--ease), transform .75s var(--ease), filter .75s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }

/* ---- Why choose us (icon row) ---- */
.why-us{ padding:76px 0; }
.why-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0; border-top:1px solid var(--border); border-left:1px solid var(--border); }
.why-item{ padding:32px 26px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); text-align:center; }
.why-item .why-icon{ font-size:24px; margin-bottom:14px; }
.why-item h4{ font-size:15px; margin-bottom:6px; }
.why-item p{ font-size:13.5px; margin:0; }

/* ---- Figures panel ---- */
.figures{ padding:0 0 76px; }
.figures-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:44px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; box-shadow:var(--shadow-md);
}
@media (max-width:800px){ .figures-card{ grid-template-columns:1fr; } }
.figures-list{ display:flex; flex-direction:column; gap:16px; }
.figures-row{ display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--surface-2); border-radius:12px; }
.figures-row .fnum{ font-family:var(--font-mono); font-weight:700; font-size:18px; color:var(--primary); }
.figures-row .flabel{ font-size:13px; color:var(--text-muted); }

/* ---- How it works ---- */
.how-it-works{ padding:76px 0; }
.steps-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.step-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:26px;
  position:relative; overflow:hidden;
}
.step-card .step-num{
  font-family:var(--font-mono); font-size:12px; color:var(--primary); background:rgba(91,95,239,.1);
  display:inline-block; padding:3px 10px; border-radius:999px; margin-bottom:14px; font-weight:600;
}
.step-card h4{ font-size:16px; margin-bottom:6px; }
.step-card p{ font-size:13.5px; margin:0; }

/* ---- Comparison table ---- */
.compare{ padding:76px 0; }
.compare-list{ display:flex; flex-direction:column; gap:12px; max-width:760px; margin:0 auto; }
.compare-row{
  display:grid; grid-template-columns:1.3fr 1fr; gap:16px; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px 24px;
}
@media (max-width:640px){ .compare-row{ grid-template-columns:1fr; } }
.compare-feature h4{ font-size:15px; margin-bottom:4px; }
.compare-feature p{ font-size:13px; margin:0; }
.compare-vs{ display:flex; gap:18px; }
.compare-pill{ flex:1; display:flex; align-items:center; gap:8px; font-size:13px; padding:8px 12px; border-radius:10px; }
.compare-pill.us{ background:rgba(23,184,156,.1); color:#0E8C77; font-weight:600; }
.compare-pill.them{ background:rgba(229,72,77,.08); color:var(--text-muted); }

/* Real comparison graphics supplied by the client (replaces the earlier
   hand-written .compare-row text rows — client wants the actual images,
   not a custom-built table) */
.compare-images{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.compare-images img{
  width:100%; display:block; border-radius:var(--radius-md); border:1px solid var(--border);
  background:var(--surface); box-shadow:var(--shadow-md);
}

/* ---- Platform grid ---- */
.platforms{ padding:76px 0; }
.platform-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; }
.platform-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:22px; text-align:center; transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  display:flex; flex-direction:column; height:100%;
}
.platform-card .platform-cta{ margin-top:auto; padding-top:12px; }
.platform-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.platform-emoji{ font-size:28px; margin-bottom:10px; }
.platform-card h4{ font-size:14.5px; margin-bottom:4px; }
.platform-card span{ font-family:var(--font-mono); font-size:12.5px; color:var(--primary); }

/* ---- Marquee (testimonials + payment partners) ---- */
.marquee-section{ padding:76px 0; overflow:hidden; }
.marquee-track{ display:flex; gap:20px; width:max-content; animation:marquee 32s linear infinite; }
.marquee-section:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.testimonial-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:22px; width:280px; flex:0 0 auto; box-shadow:var(--shadow-sm);
}
.testimonial-card p{ font-size:14px; margin-bottom:14px; }
.testimonial-card .who{ font-size:12.5px; font-weight:600; color:var(--text); }
.payment-strip{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
.payment-chip{
  font-family:var(--font-mono); font-size:12.5px; padding:8px 16px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted);
}

/* ---- Pillars (We help grow your social presence) ---- */
.pillars{ padding:76px 0; }
.pillar-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; }
.pillar-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:30px;
}
.pillar-num{
  width:38px; height:38px; border-radius:10px; background:rgba(91,95,239,.1); color:var(--primary);
  font-family:var(--font-mono); font-weight:700; display:flex; align-items:center; justify-content:center;
  margin-bottom:16px; font-size:15px;
}
.pillar-card h4{ font-size:17px; margin-bottom:8px; }
.pillar-card p{ font-size:14px; margin:0; }

/* ---- Promo banner ---- */
.promo{ padding:0 0 76px; }
.promo-card{
  background:linear-gradient(135deg,var(--primary),#8B5FEF); border-radius:var(--radius-lg);
  padding:44px; color:#fff; position:relative; overflow:hidden;
  display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; text-align:left;
}
.promo-card h2{ color:#fff; font-size:clamp(22px,3vw,32px); max-width:640px; margin:0 0 12px; text-align:left; }
.promo-card p{ color:rgba(255,255,255,.85); max-width:480px; margin:0 0 26px; text-align:left; }
.promo-card .btn{
  background:linear-gradient(180deg,#ffffff,#eef0f7); color:var(--primary-dark); font-weight:700;
  border-bottom:3px solid #cfd3e6;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -2px 3px rgba(0,0,0,.06),
    0 8px 18px -4px rgba(0,0,0,.3);
}
.promo-card .btn:hover{
  background:linear-gradient(180deg,#ffffff,#ffffff); color:var(--primary-dark); transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -2px 3px rgba(0,0,0,.08),
    0 12px 24px -4px rgba(0,0,0,.35);
}
.promo-card .btn:active{
  transform:translateY(2px) scale(.98); border-bottom-width:1px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
}
.promo-card img{ width:100%; height:auto; border-radius:16px; }
@media (max-width:760px){
  .promo-card{ grid-template-columns:1fr; padding:28px; text-align:center; }
  .promo-card h2, .promo-card p{ text-align:center; margin-left:auto; margin-right:auto; }
  .promo-card img{ max-width:320px; margin:0 auto; }
}

/* ---- FAQ accordion ---- */
.faq{ padding:76px 0; }
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.faq-q{
  width:100%; text-align:left; background:none; border:none; padding:20px 24px; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-family:var(--font-body); font-weight:600; font-size:15px; color:var(--text);
}
.faq-q .faq-plus{ font-size:20px; color:var(--primary); transition:transform var(--dur-fast) var(--ease); flex:0 0 auto; }
.faq-item.open .faq-q .faq-plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height var(--dur-med) var(--ease); }
.faq-a-inner{ padding:0 24px 20px; font-size:14px; color:var(--text-muted); }
.faq-item.open .faq-a{ max-height:400px; }

/* ---- Admin-managed raw-HTML content blocks (authText, addfunds, newOrderText) ----
   These come from the admin panel as raw HTML with the OLD theme's hardcoded inline
   colors baked in, which don't adapt to dark mode since inline styles beat our CSS
   variables. This neutralizes the worst offenders (hardcoded blues, highlight boxes)
   without stripping genuinely semantic colors like warning red/orange. */
.raw-admin-content{ line-height:1.7; }
.raw-admin-content [style*="color: blue" i],
.raw-admin-content [style*="color:blue" i],
.raw-admin-content [style*="color: #0000" i],
.raw-admin-content a{ color:var(--primary) !important; }
.raw-admin-content [style*="background" i]{
  background:var(--surface-2) !important; color:var(--text) !important;
  padding:12px 16px; border-radius:10px; display:inline-block;
}
.raw-admin-content strong{ color:inherit; }
.raw-admin-content mark{ background:var(--surface-2) !important; color:var(--text) !important; padding:2px 6px; border-radius:4px; }

/* ---- Footer ---- */
.site-footer{ padding:64px 0 40px; text-align:center; border-top:1px solid var(--border); }
.site-footer img{ height:100px; margin:0 auto 22px; }
.site-footer p{ max-width:640px; margin:0 auto 28px; font-size:14px; }
.footer-links{ display:flex; flex-wrap:wrap; gap:28px; justify-content:center; margin-bottom:28px; }
.footer-links a{ font-size:14px; color:var(--text-muted); font-weight:500; }
.footer-links a:hover{ color:var(--primary); }
.footer-copy{ font-size:12.5px; color:var(--text-muted); }