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

.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; }
  .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; }
}

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

/* ---- Force-desktop pages (Services, Orders): 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; }

/* Dropdowns should still open in their normal desktop direction once a page
   is running in force-desktop mode — the earlier "open left on narrow
   screens" override was based on physical device width via a media query,
   which no longer reflects the actual (now desktop-scale) layout here. */
html.force-desktop-view .dropdown > .dropdown-menu{ left:auto; right:0; max-width:none; }

/* ---- 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/Orders. ---- */
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; }
.nav-pills .search{ margin-left:auto; width:280px; max-width:100%; float:none; }
.nav-pills .search .input-group{ width:100%; }
@media (max-width:600px){
  .nav-pills{ flex-direction:column; align-items:stretch; }
  .nav-pills .search{ margin-left:0; width:100%; }
}
.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; }
  .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; }
.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 0; 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. */
.dropdown > .dropdown-menu{
  position:absolute; right:0; 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;
}
.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; }
@media (max-width:600px){
  /* right:0 pushes the menu leftward off-screen when the toggle button sits
     near the left edge on a narrow phone. Anchor to the left instead, and
     cap the width so it can't overflow the viewport either direction. */
  .dropdown > .dropdown-menu{ left:0; right:auto; max-width:calc(100vw - 32px); }
}

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

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