/* ============================================================
   EpicHost — Signature theme (archived design: _archive/mockups/21-signature.php)
   Loaded AFTER style.css. Self-contained mockup CSS + aggressive
   compatibility overrides for the legacy class names emitted by
   includes/header.php, includes/footer.php, includes/product-page.php,
   includes/plan-card.php, dashboard/*, and the cart / checkout pages.
   ============================================================ */

/* ====== THEME TOKENS ====== */
:root,
[data-theme="light"]{
  --bg:#FAFAF7;
  --surface:#FFFFFF;
  --surface-2:#F5F4EF;
  --surface-3:#EFEEE8;
  --ink:#0F172A;
  --ink-2:#1E293B;
  --mute:#64748B;
  --mute-2:#94A3B8;
  --line:#E7E5DE;
  --line-2:#F1EFE9;
  --red:#C42A2B;
  --red-2:#A82122;
  --red-c:#FFE1E4;
  --red-d:#7A1620;
  --sage:#D4E4C2;  --sage-d:#3F6B22;
  --sky:#C9DEEF;   --sky-d:#1E4E7A;
  --peach:#FBDDB8; --peach-d:#7A4B0F;
  --lav:#D7C9EE;   --lav-d:#4A2D88;
  --shadow-sm:0 1px 2px rgba(15,23,42,0.04),0 1px 3px 1px rgba(15,23,42,0.04);
  --shadow:0 1px 2px rgba(15,23,42,0.04),0 8px 24px -8px rgba(15,23,42,0.08);
  --shadow-lg:0 1px 2px rgba(15,23,42,0.04),0 24px 60px -16px rgba(15,23,42,0.14);
  --grid:rgba(15,23,42,0.04);

  /* Legacy token remap so old style.css references inherit Signature look. */
  --primary:#C42A2B;
  --primary-dark:#A82122;
  --primary-light:#FFE1E4;
  --secondary:#1E4E7A;
  --accent:#C42A2B;
  --dark:#0F172A;
  --dark-2:#1E293B;
  --light:#FAFAF7;
  --gray:#64748B;
  --gray-light:#F5F4EF;
  --gray-dark:#1E293B;
  --text-primary:#0F172A;
  --text-secondary:#1E293B;
  --text:#0F172A;
  --text-light:#475569;
  --text-muted:#64748B;
  --border:#E7E5DE;
  --border-light:#F1EFE9;
  --bg-light:#FAFAF7;
  --bg-card:#FFFFFF;
  --bg-section:#F5F4EF;
  --gradient-primary:linear-gradient(135deg,#C42A2B,#A82122);
  --gradient-secondary:linear-gradient(135deg,#1E4E7A,#0F172A);
  --gradient-accent:linear-gradient(135deg,#C42A2B,#7A1620);
  --shadow-soft:var(--shadow-sm);
  --shadow-glow:0 8px 32px rgba(196,42,43,0.18);
}

[data-theme="dark"]{
  --bg:#0A0B10;
  --surface:#14161E;
  --surface-2:#1B1E28;
  --surface-3:#23262F;
  --ink:#F4F5F8;
  --ink-2:#D5D8E0;
  --mute:#8B91A1;
  --mute-2:#6B7286;
  --line:#262934;
  --line-2:#1A1D26;
  --red:#FF5A6E;
  --red-2:#FF3D54;
  --red-c:#3A1820;
  --red-d:#FFB4BD;
  --sage:#2A3D1F;  --sage-d:#B6D89A;
  --sky:#1E3850;   --sky-d:#9DC7E8;
  --peach:#3D2D14; --peach-d:#F2C188;
  --lav:#2E2447;   --lav-d:#C8B6F0;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.4),0 1px 3px rgba(0,0,0,0.3);
  --shadow:0 1px 2px rgba(0,0,0,0.4),0 12px 32px -8px rgba(0,0,0,0.5);
  --shadow-lg:0 1px 2px rgba(0,0,0,0.5),0 32px 70px -16px rgba(0,0,0,0.65);
  --grid:rgba(255,255,255,0.04);

  --primary:#FF5A6E;
  --primary-dark:#FF3D54;
  --primary-light:#3A1820;
  --secondary:#9DC7E8;
  --accent:#FF5A6E;
  --dark:#F4F5F8;
  --light:#0A0B10;
  --text-primary:#F4F5F8;
  --text-secondary:#D5D8E0;
  --text-muted:#8B91A1;
  --border:#262934;
  --border-light:#1A1D26;
  --bg-light:#0A0B10;
  --bg-card:#14161E;
  --bg-section:#1B1E28;
  --gradient-primary:linear-gradient(135deg,#FF5A6E,#FF3D54);
  --gradient-secondary:linear-gradient(135deg,#1E3850,#0A0B10);
  --gradient-accent:linear-gradient(135deg,#FF5A6E,#FFB4BD);
  --shadow-soft:var(--shadow-sm);
  --shadow-glow:0 8px 32px rgba(255,90,110,0.25);
}

/* If a user has never toggled, honour system preference. */
@media (prefers-color-scheme: dark){
  html:not([data-theme]) {
    --bg:#0A0B10; --surface:#14161E; --ink:#F4F5F8; --mute:#8B91A1;
    --line:#262934; --red:#FF5A6E; --red-c:#3A1820; --primary:#FF5A6E;
    --text-primary:#F4F5F8; --text-muted:#8B91A1; --border:#262934;
    --bg-card:#14161E; --bg-section:#1B1E28; --bg-light:#0A0B10; --light:#0A0B10;
    --dark:#F4F5F8;
  }
}

/* ====== BASE ====== */
html,body{
  background:var(--bg)!important;
  color:var(--ink)!important;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'cv11','ss01';
  overflow-x:clip; /* prevent fixed-positioned mobile drawer from creating horizontal scroll */
}
body{transition:background-color .4s ease,color .4s ease}
*,*::before,*::after{transition:background-color .35s ease,border-color .35s ease,color .25s ease}
a{color:inherit}
.serif{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}
.mono{font-family:'JetBrains Mono','SF Mono',Consolas,monospace}

/* Hide preloader instantly — it just delays first paint with no value here. */
.preloader{display:none!important}

/* ====== GLOBAL DECOR (grid + glow orbs) ====== */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,#000 30%,transparent 80%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,#000 30%,transparent 80%);
}
.glow{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;opacity:.7;animation:sigDrift 22s ease-in-out infinite}
.glow.g1{width:520px;height:520px;background:radial-gradient(circle,var(--red-c),transparent 70%);top:-120px;left:-80px}
.glow.g2{width:480px;height:480px;background:radial-gradient(circle,var(--lav),transparent 70%);top:30%;right:-100px;animation-delay:-7s}
.glow.g3{width:440px;height:440px;background:radial-gradient(circle,var(--sky),transparent 70%);bottom:-100px;left:35%;animation-delay:-14s}
[data-theme="dark"] .glow{opacity:.4}
@keyframes sigDrift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,-30px) scale(1.08)}66%{transform:translate(-40px,40px) scale(.95)}}
@keyframes sigPulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes sigFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes sigFloatGentle{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 8px))}}
@keyframes sigFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes sigLscroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes sigDraw{to{stroke-dashoffset:0}}

/* Keep semantic surfaces above the decor. */
nav,header,section,footer,main,.container,.statusbar{position:relative;z-index:1}

/* ====== CONTAINER ====== */
.container{max-width:1240px;margin:0 auto;padding:0 24px;width:100%}

/* ====== TYPOGRAPHY ====== */
h1,h2,h3,h4,h5,h6{color:var(--ink);letter-spacing:-0.02em;line-height:1.1;font-weight:700}
h1{font-size:clamp(36px,5.5vw,72px);letter-spacing:-0.035em;line-height:0.98}
h2{font-size:clamp(28px,4.2vw,48px);letter-spacing:-0.03em;line-height:1.05}
h3{font-size:clamp(20px,2.4vw,28px)}
h4{font-size:18px}
em.serif,.serif em,h1 em,h2 em,h3 em,.hero-title em,.section-title em{
  font-family:'Instrument Serif',serif!important;
  font-style:italic;
  font-weight:400;
  color:var(--red);
  letter-spacing:-0.02em;
}
p{color:var(--ink-2)}

/* ====== BUTTONS (mockup + legacy aliases) ====== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:999px;
  font:inherit;font-weight:600;font-size:14px;
  cursor:pointer;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);
  transition:transform .15s ease,box-shadow .2s ease,background-color .2s,border-color .2s,color .2s;
  text-decoration:none;white-space:nowrap;line-height:1;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:var(--mute-2)}
.btn-red,.btn-primary{
  background:var(--red)!important;color:#fff!important;border-color:var(--red)!important;
  box-shadow:0 4px 14px -4px rgba(196,42,43,0.45),inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-red:hover,.btn-primary:hover{
  background:var(--red-2)!important;border-color:var(--red-2)!important;
  box-shadow:0 8px 24px -4px rgba(196,42,43,0.55);
}
.btn-ink{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-ink:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn-tonal{background:var(--lav);color:var(--lav-d);border-color:transparent;font-weight:600}
.btn-outline,.btn-secondary{background:transparent!important;color:var(--ink)!important;border-color:var(--line)!important}
.btn-outline:hover,.btn-secondary:hover{background:var(--surface-2)!important;border-color:var(--mute-2)!important}
.btn-lg{padding:14px 26px;font-size:15px}
.btn-sm{padding:8px 14px;font-size:13px}
.btn-block{display:flex;width:100%}
.btn i{font-size:.85em}

/* ====== NAVBAR — pill-style (mockup .nav-pill) on legacy .navbar ====== */
.navbar{
  padding:18px 0!important;position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 80%,transparent)!important;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:0!important;border-bottom:1px solid transparent!important;
  transition:border-color .3s;
  box-shadow:none!important;
}
.navbar.scrolled{border-bottom-color:var(--line)!important}
.navbar > .container{
  display:flex;align-items:center;gap:8px;
  padding:6px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:var(--shadow-sm);
  max-width:1240px;
}
.navbar-brand{
  display:flex;align-items:center;gap:10px;
  padding:0 14px 0 6px;
  font-weight:700;font-size:16px;letter-spacing:-0.01em;
  color:var(--ink)!important;
  text-decoration:none;
  margin:0!important;
}
.navbar-brand .logo-icon{
  width:30px;height:30px;border-radius:14px 7px 14px 7px;
  background:var(--red)!important;
  display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:13px;
  box-shadow:0 4px 12px -3px rgba(196,42,43,0.5),inset 0 1px 0 rgba(255,255,255,0.25);
}
.navbar-brand .logo-icon i{color:#fff;font-size:14px}

.navbar-nav{
  display:flex;gap:2px;flex:1;justify-content:center;align-items:center;
  list-style:none;margin:0;padding:0;
}
.navbar-nav > li{position:relative;list-style:none}
.navbar-nav > li > a{
  padding:9px 14px;border-radius:999px;
  font-size:14px;font-weight:500;color:var(--ink-2)!important;
  display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;transition:.15s;
}
.navbar-nav > li > a:hover{background:var(--surface-2)}
.navbar-nav > li > a.active{background:var(--red-c)!important;color:var(--red-d)!important;font-weight:600}
.navbar-nav .dropdown-arrow{font-size:9px;opacity:.6}

/* Hide drawer-only items on desktop (they're shown on mobile by the legacy CSS) */
.nav-drawer-header,.nav-drawer-account,.nav-quickgrid,.nav-section-label,.nav-mobile-footer{display:none!important}
@media(max-width:991px){
  /* Desktop nav becomes a slide-in drawer (positioning + transform come from
     style.css's @media (max-width:991px) block). The signature.css desktop
     `.navbar-nav{display:flex;flex:1;justify-content:center}` rule above
     still applies but is harmless once the drawer is translated off-screen. */
  .nav-drawer-header,.nav-drawer-account,.nav-quickgrid,.nav-section-label,.nav-mobile-footer{display:revert!important}
}

/* Mega dropdown — restyle to clean white card (DESKTOP ONLY).
   On mobile (≤991px) style.css converts this into an inline accordion;
   keeping min-width:480px below that breakpoint causes horizontal
   overflow inside the slide-in drawer. */
@media (min-width: 992px){
  .mega-dropdown{
    position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);
    background:var(--surface)!important;border:1px solid var(--line)!important;
    border-radius:20px!important;
    box-shadow:var(--shadow-lg)!important;
    padding:20px!important;min-width:480px;
    opacity:0;pointer-events:none;visibility:hidden;
    transition:.2s;
  }
  .has-dropdown:hover .mega-dropdown,
  .has-dropdown.is-open .mega-dropdown{opacity:1;pointer-events:auto;visibility:visible;transform:translateX(-50%) translateY(0)}
  /* Bridge area so cursor can travel from the trigger to the panel without closing */
  .has-dropdown::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;pointer-events:none}
  .has-dropdown:hover::after,.has-dropdown.is-open::after{pointer-events:auto}
}
.mega-dropdown-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.mega-col h5.mega-heading{
  font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--mute)!important;margin:0 0 10px;
  display:flex;align-items:center;gap:8px;
}
.mega-col h5.mega-heading i{color:var(--red)}
.mega-link{
  display:block;padding:8px 12px;border-radius:10px;
  font-size:13.5px;font-weight:500;color:var(--ink-2)!important;
  text-decoration:none;transition:.15s;
}
.mega-link:hover{background:var(--surface-2);color:var(--red)!important}

/* Navbar right side */
.navbar-actions{display:flex;align-items:center;gap:6px}
.navbar-actions .btn{padding:8px 16px;font-size:13px}

/* Cart pill button */
.cart-btn{position:relative;padding:8px 12px!important;overflow:visible!important}
.cart-btn .fa-shopping-cart{font-size:14px;line-height:1}
.cart-badge{
  position:absolute;top:-6px;right:-6px;
  min-width:18px;height:18px;border-radius:999px;
  background:var(--red);color:#fff;font-size:10px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 5px;line-height:1;letter-spacing:0;
  box-shadow:0 0 0 2px var(--surface,#fff);
  pointer-events:none;
}
@keyframes sigCartPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.cart-badge.pulse{animation:sigCartPulse .6s ease-in-out 2}
.cart-badge[hidden]{display:none}
.notif-bell{
  position:relative;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink-2);
  border:1px solid var(--line);background:var(--surface);
}
.notif-bell:hover{color:var(--red);border-color:var(--mute-2)}
.notif-badge{
  position:absolute;top:-4px;right:-4px;
  min-width:18px;height:18px;border-radius:999px;
  background:var(--red);color:#fff;font-size:10px;font-weight:700;
  display:grid;place-items:center;padding:0 5px;line-height:1;
}

/* Currency switcher */
.currency-switcher{position:relative}
.currency-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:999px;
  color:var(--ink);font-size:13px;font-weight:600;
  cursor:pointer;font-family:inherit;
}
.currency-btn:hover{background:var(--surface-3)}
.currency-btn i{font-size:9px;opacity:.6}
.currency-dropdown{
  position:absolute;right:0;top:calc(100% + 8px);
  background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:6px;
  box-shadow:var(--shadow-lg);min-width:140px;
  opacity:0;pointer-events:none;visibility:hidden;transition:.15s;
  z-index:60;
}
.currency-switcher.open .currency-dropdown,
.currency-dropdown.open{opacity:1;pointer-events:auto;visibility:visible}
.currency-option{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:8px 12px;border:0;background:transparent;
  font:inherit;color:var(--ink);cursor:pointer;border-radius:10px;font-size:13px;
}
.currency-option:hover,.currency-option.active{background:var(--surface-2);color:var(--red)}

/* ── Theme toggle (new clean design — single 36×36 button, animated sun↔moon)
   Works with EITHER markup:
     <button class="theme-toggle"><span class="th-sun">☀</span><span class="th-moon">🌙</span></button>
     <div class="theme-toggle"><div class="theme-toggle-knob"></div></div>  (legacy fallback)
   Picks the lit icon based on [data-theme] on <html>. */
.theme-toggle{
  --tt-bg: var(--surface-2);
  --tt-bg-hover: color-mix(in srgb, var(--red) 8%, var(--surface-2));
  --tt-icon: var(--ink);
  width:38px;height:38px;border-radius:50%;
  background:var(--tt-bg);border:1px solid var(--line);
  position:relative;cursor:pointer;flex-shrink:0;display:inline-flex;
  align-items:center;justify-content:center;padding:0;
  transition:background .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease;
  overflow:hidden;
}
.theme-toggle:hover{background:var(--tt-bg-hover);transform:translateY(-1px);box-shadow:0 4px 12px -4px rgba(196,42,43,.25)}
.theme-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(196,42,43,.35)}
/* Icons (both rendered, only one visible per theme) */
.theme-toggle > i,
.theme-toggle .th-sun,
.theme-toggle .th-moon{
  position:absolute;font-size:15px;line-height:1;color:var(--tt-icon);
  transition:opacity .35s cubic-bezier(0.34,1.56,0.64,1),
             transform .35s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events:none;
}
.theme-toggle > i.sun,.theme-toggle .th-sun{color:#F59E0B}
.theme-toggle > i.moon,.theme-toggle .th-moon{color:#A5D8FF}
/* Default (no theme attr) = light */
.theme-toggle > i.sun,.theme-toggle .th-sun{opacity:1;transform:rotate(0deg) scale(1)}
.theme-toggle > i.moon,.theme-toggle .th-moon{opacity:0;transform:rotate(-90deg) scale(.4)}
[data-theme="dark"] .theme-toggle > i.sun,
[data-theme="dark"] .theme-toggle .th-sun{opacity:0;transform:rotate(90deg) scale(.4)}
[data-theme="dark"] .theme-toggle > i.moon,
[data-theme="dark"] .theme-toggle .th-moon{opacity:1;transform:rotate(0deg) scale(1)}
[data-theme="dark"] .theme-toggle{background:#1f1f24;border-color:#3a3a40}
[data-theme="dark"] .theme-toggle:hover{background:#2a2a30;box-shadow:0 4px 12px -4px rgba(165,216,252,.18)}
/* Legacy pill markup (.theme-toggle-knob child) — still supported on public nav */
.theme-toggle.theme-toggle--pill,
.theme-toggle:has(> .theme-toggle-knob){
  width:54px;height:30px;border-radius:999px;overflow:visible;
}
.theme-toggle .theme-toggle-knob{
  position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,#FFD466 0%,#F59E0B 100%);
  box-shadow:0 2px 6px rgba(245,158,11,.45);
  transition:.35s cubic-bezier(0.34,1.56,0.64,1);z-index:2;
}
[data-theme="dark"] .theme-toggle .theme-toggle-knob{
  transform:translateX(24px);
  background:linear-gradient(135deg,#E2EBF5 0%,#A5D8FF 100%);
  box-shadow:0 2px 6px rgba(165,216,252,.4),inset -3px -2px 0 0 #94A3B8;
}

/* Hamburger */
.navbar-toggle{
  display:none;background:transparent;border:0;cursor:pointer;
  padding:8px;border-radius:10px;
}
@media(max-width:991px){.navbar-toggle{display:inline-flex}}
.navbar-toggle .hamburger{display:inline-flex;flex-direction:column;gap:4px;width:22px}
.navbar-toggle .hamburger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:.2s}

/* Skip link */
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg);
  padding:10px 16px;border-radius:0 0 12px 12px;z-index:200;font-weight:600;
}
.skip-link:focus{left:24px}

/* ====== HERO BUILDING BLOCKS (mockup .hero + legacy .page-hero/.hero-section) ====== */
.hero,.hero-section,.page-hero{
  padding:80px 0 60px!important;
  position:relative;
  background:transparent!important;
  overflow:visible!important;
}
.hero-section::before,.page-hero::before{display:none!important}
.page-hero .container,.hero-section .container,.hero .container{position:relative;z-index:2}

/* Legacy hero orbs — keep but tint to brand red */
.hero-orb{filter:blur(80px);opacity:.45}
.hero-orb-1{background:radial-gradient(circle,var(--red-c),transparent 70%)!important}
.hero-orb-2{background:radial-gradient(circle,var(--lav),transparent 70%)!important}

.hero-pill,.badge,.badge-accent,.eyebrow,.sig-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:999px;
  background:var(--red-c);color:var(--red-d);
  border:1px solid transparent;
  font-size:12px;font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;
  margin-bottom:18px;text-decoration:none;
}
.hero-pill{background:var(--surface);color:var(--mute);border:1px solid var(--line);box-shadow:var(--shadow-sm);text-transform:none;letter-spacing:0;font-weight:500}
.hero-pill b{background:var(--red-c);color:var(--red-d);padding:3px 9px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase}
.hero-pill .dot{width:7px;height:7px;border-radius:50%;background:#16A34A;box-shadow:0 0 8px #16A34A;animation:sigPulse 2s infinite}
.eyebrow.lav,.sig-eyebrow.lav{background:var(--lav);color:var(--lav-d)}
.eyebrow.sage,.sig-eyebrow.sage{background:var(--sage);color:var(--sage-d)}
.eyebrow.peach,.sig-eyebrow.peach{background:var(--peach);color:var(--peach-d)}
.eyebrow.sky,.sig-eyebrow.sky{background:var(--sky);color:var(--sky-d)}

.hero-title,h1.h{font-size:clamp(40px,6.5vw,84px);font-weight:700;letter-spacing:-0.035em;line-height:0.98;margin-bottom:20px;color:var(--ink);max-width:980px}
.hero-title em,h1.h em{font-style:italic;font-family:'Instrument Serif',serif;font-weight:400;color:var(--red);letter-spacing:-0.02em}
.hero-subtitle,.lede{font-size:18px;color:var(--mute);max-width:580px;line-height:1.6;margin-bottom:32px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.proof{display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:var(--mute);align-items:center}
.proof span{display:inline-flex;align-items:center;gap:7px}
.proof span i{color:#16A34A;font-size:11px}

.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
@media(max-width:1100px){.hero-grid{grid-template-columns:1fr;gap:36px}}

/* Floating hero tiles */
.hero-tiles{position:relative;height:520px;animation:sigFadeUp .8s ease both}
.tile{position:absolute;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);padding:22px;animation:sigFloat 8s ease-in-out infinite}
.tile:nth-child(2){animation-delay:-2s}.tile:nth-child(3){animation-delay:-4s}.tile:nth-child(4){animation-delay:-6s}
.tile .ic{width:42px;height:42px;border-radius:14px 7px 14px 7px;display:grid;place-items:center;font-size:17px;margin-bottom:14px}
.tile h4{font-size:13px;font-weight:600;color:var(--mute);letter-spacing:0.04em;text-transform:uppercase;margin-bottom:4px}
.tile .v{font-size:30px;font-weight:700;letter-spacing:-0.025em;color:var(--ink);line-height:1;font-feature-settings:'tnum'}
.tile .v small{font-size:14px;font-weight:500;color:var(--mute);margin-left:2px}
.tile .s{font-size:11px;color:#16A34A;margin-top:6px;font-weight:600}
[data-theme="dark"] .tile .s{color:#86EFAC}
.tile.t1{top:0;left:0;width:240px;border-radius:28px;background:var(--lav)}
.tile.t1 .ic{background:rgba(255,255,255,0.5);color:var(--lav-d)}
.tile.t1 h4,.tile.t1 .v,.tile.t1 .s{color:var(--lav-d)}
.tile.t1 .s{opacity:.75}
.tile.t2{top:30px;right:0;width:220px;border-radius:28px;background:var(--peach)}
.tile.t2 .ic{background:rgba(255,255,255,0.55);color:var(--peach-d)}
.tile.t2 h4,.tile.t2 .v,.tile.t2 .s{color:var(--peach-d)}
.tile.t2 .s{opacity:.75}
.tile.t3{bottom:80px;left:30px;width:240px;border-radius:28px;background:var(--sage)}
.tile.t3 .ic{background:rgba(255,255,255,0.55);color:var(--sage-d)}
.tile.t3 h4,.tile.t3 .v,.tile.t3 .s{color:var(--sage-d)}
.tile.t3 .s{opacity:.8}
.tile.t4{bottom:20px;right:20px;width:240px;border-radius:28px;background:var(--sky)}
.tile.t4 .ic{background:rgba(255,255,255,0.55);color:var(--sky-d)}
.tile.t4 h4,.tile.t4 .v,.tile.t4 .s{color:var(--sky-d)}
.tile.t4 .s{opacity:.8}
.tile.center{top:50%;left:50%;transform:translate(-50%,-50%);width:200px;border-radius:24px;background:var(--surface);text-align:center;animation:sigFloatGentle 4s ease-in-out infinite}
.tile.center .ic{margin:0 auto 12px;background:var(--red);color:#fff;width:54px;height:54px;font-size:22px;border-radius:18px 9px 18px 9px;box-shadow:0 8px 24px -6px rgba(196,42,43,0.5)}
.tile.center h4{color:var(--ink);letter-spacing:-0.01em;font-size:14px;font-weight:600;text-transform:none}
.tile.center p{font-size:11px;color:var(--mute);margin-top:4px}
@media(max-width:1100px){
  .hero-tiles{height:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  .tile,.tile.center{position:static;width:auto;transform:none;animation:none}
  .tile.center{grid-column:span 2}
}
@media(max-width:540px){.hero-tiles{grid-template-columns:1fr}.tile.center{grid-column:span 1}}

/* ====== STATUS BAR ====== */
.statusbar{padding:18px 0;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.stat-row{display:flex;gap:28px;align-items:center;justify-content:center;font-size:12.5px;color:var(--mute);flex-wrap:wrap;font-family:'JetBrains Mono',monospace}
.stat-row b{color:var(--ink);font-weight:600}
.stat-row .liv{display:inline-flex;align-items:center;gap:6px;color:#16A34A;font-weight:600}
.stat-row .liv .d{width:6px;height:6px;border-radius:50%;background:#16A34A;animation:sigPulse 2s infinite;box-shadow:0 0 8px #16A34A}
[data-theme="dark"] .stat-row .liv{color:#86EFAC}

/* ====== SECTIONS ====== */
section.block,.section,section[class*="-section"]{padding:96px 0!important;position:relative}
section.block + section.block,section.block[style*="padding-top:0"]{padding-top:0!important}
.sec-head,.section-header{max-width:720px;margin-bottom:48px}
.sec-head.center,.section-header.center,.section-header{text-align:left}
.sec-head.center,.section-header.text-center{text-align:center;margin-left:auto;margin-right:auto}
.section-label{font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--red);padding:6px 14px;border-radius:999px;background:var(--red-c);display:inline-flex;align-items:center;gap:8px;margin-bottom:14px}
.section-title,h2.h{font-size:clamp(32px,5vw,56px);font-weight:700;letter-spacing:-0.03em;line-height:1.05;margin-bottom:14px;color:var(--ink)}
.section-title em,h2.h em,.text-gradient{font-style:italic;font-family:'Instrument Serif',serif;font-weight:400;color:var(--red);background:none!important;-webkit-text-fill-color:var(--red)!important}
.section-desc,.sec-sub{color:var(--mute);font-size:17px;max-width:580px;line-height:1.55}
.section-desc.centered,.sec-sub.center{margin-left:auto;margin-right:auto;text-align:center}

/* ====== APP WINDOW (dashboard preview) ====== */
.app-window{max-width:1100px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg)}
.app-bar{display:flex;align-items:center;padding:12px 18px;background:var(--surface-2);border-bottom:1px solid var(--line);gap:8px}
.app-bar .dots{display:flex;gap:6px}
.app-bar .dots span{width:11px;height:11px;border-radius:50%}
.app-bar .dots span:nth-child(1){background:#FF5F57}.app-bar .dots span:nth-child(2){background:#FEBC2E}.app-bar .dots span:nth-child(3){background:#28C840}
.app-bar .url{flex:1;text-align:center;font-size:12px;color:var(--mute);font-family:'JetBrains Mono',monospace}
.app-bar .url b{color:var(--ink);font-weight:600}
.app-body{display:grid;grid-template-columns:220px 1fr;min-height:420px}
@media(max-width:760px){.app-body{grid-template-columns:1fr}.app-side{display:none}}
.app-side{padding:22px 14px;background:var(--surface);border-right:1px solid var(--line)}
.app-side h5{font-size:10.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--mute);margin:0 10px 12px}
.app-side a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;font-size:13.5px;color:var(--ink-2);font-weight:500;margin-bottom:2px;cursor:pointer;text-decoration:none}
.app-side a i{width:14px;font-size:12px;color:var(--mute-2)}
.app-side a:hover{background:var(--surface-2)}
.app-side a.active{background:var(--red-c);color:var(--red-d);font-weight:600}
.app-side a.active i{color:var(--red-d)}
.app-side .badge{margin-left:auto;font-size:10px;color:var(--mute);font-family:'JetBrains Mono',monospace;background:transparent;padding:0;text-transform:none;letter-spacing:0}
.app-main{padding:26px;background:var(--surface)}
.app-main h3{font-size:20px;font-weight:700;letter-spacing:-0.015em;margin-bottom:4px;color:var(--ink)}
.app-main .ms{font-size:13.5px;color:var(--mute);margin-bottom:20px}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
@media(max-width:580px){.kpi-row{grid-template-columns:repeat(2,1fr)}}
.kpi-cell{padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;transition:.2s}
.kpi-cell:hover{border-color:var(--mute-2);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.kpi-cell .lab{font-size:11px;font-weight:600;color:var(--mute);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px}
.kpi-cell .val{font-size:24px;font-weight:700;letter-spacing:-0.02em;color:var(--ink);line-height:1;font-feature-settings:'tnum'}
.kpi-cell .val small{font-size:12px;font-weight:500;color:var(--mute);margin-left:2px}
.kpi-cell .delta{font-size:11px;font-weight:600;color:#16A34A;margin-top:6px;display:inline-flex;align-items:center;gap:4px}
[data-theme="dark"] .kpi-cell .delta{color:#86EFAC}
.kpi-cell .delta.bad{color:var(--red)}
.app-chart{height:160px;background:linear-gradient(180deg,var(--red-c),transparent);border:1px solid var(--line);border-radius:14px;padding:16px;position:relative;overflow:hidden;margin-bottom:18px}
[data-theme="dark"] .app-chart{background:linear-gradient(180deg,rgba(255,90,110,0.08),transparent)}
.app-chart .lab{font-size:11px;font-weight:600;color:var(--mute);text-transform:uppercase;letter-spacing:0.06em}
.app-chart svg{position:absolute;inset:auto 0 0 0;width:100%;height:110px}
.chart-line{stroke-dasharray:1000;stroke-dashoffset:1000;animation:sigDraw 2.2s ease-out .3s forwards}
.activity-row{display:grid;grid-template-columns:32px 1fr auto;gap:12px;padding:10px 12px;border-radius:10px;align-items:center;font-size:13px}
.activity-row:hover{background:var(--surface-2)}
.activity-row .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;background:var(--red)}
.activity-row .av.sage{background:var(--sage-d)}.activity-row .av.sky{background:var(--sky-d)}.activity-row .av.lav{background:var(--lav-d)}.activity-row .av.peach{background:var(--peach-d)}
.activity-row b{font-weight:600;color:var(--ink)}
.activity-row .when{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--mute)}

/* ====== PRODUCT CARDS (.prod) ====== */
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1000px){.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.products{grid-template-columns:1fr}}
.prod{padding:28px;border-radius:28px;background:var(--surface);border:1px solid var(--line);cursor:pointer;transition:.25s;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.prod:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.prod .ic{width:56px;height:56px;border-radius:18px 9px 18px 9px;display:grid;place-items:center;font-size:22px;margin-bottom:24px;transition:.3s}
.prod:hover .ic{transform:scale(1.08) rotate(-4deg)}
.prod:nth-child(1) .ic{background:var(--lav);color:var(--lav-d)}
.prod:nth-child(2) .ic{background:var(--peach);color:var(--peach-d)}
.prod:nth-child(3) .ic{background:var(--sage);color:var(--sage-d)}
.prod:nth-child(4) .ic{background:var(--sky);color:var(--sky-d)}
.prod h3{font-size:20px;font-weight:700;letter-spacing:-0.015em;margin-bottom:8px;color:var(--ink)}
.prod p{font-size:13.5px;color:var(--mute);line-height:1.55;margin-bottom:20px;min-height:64px}
.prod .price{display:flex;align-items:baseline;gap:6px;margin-bottom:6px;margin-top:auto}
.prod .price b{font-size:26px;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.prod .price small{font-size:13px;color:var(--mute);font-weight:500}
.prod .link{font-size:13px;color:var(--red);font-weight:600;display:inline-flex;align-items:center;gap:6px;margin-top:14px;transition:.2s}
.prod:hover .link{gap:10px}

/* ====== BENTO FEATURES ====== */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(180px,auto);gap:14px}
@media(max-width:1000px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.bento{grid-template-columns:1fr}}
.cell{padding:28px;border-radius:24px;background:var(--surface);border:1px solid var(--line);position:relative;overflow:hidden;transition:.25s;box-shadow:var(--shadow-sm)}
.cell:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.cell .ic{width:46px;height:46px;border-radius:14px 7px 14px 7px;display:grid;place-items:center;font-size:18px;margin-bottom:18px;color:var(--red);background:var(--red-c)}
.cell h4{font-size:18px;font-weight:700;letter-spacing:-0.01em;margin-bottom:6px;color:var(--ink)}
.cell p{font-size:13.5px;color:var(--mute);line-height:1.6}
.b1{grid-column:span 3;grid-row:span 2}
.b2{grid-column:span 3}
.b3,.b4,.b5{grid-column:span 2}
.b6{grid-column:span 6}
@media(max-width:1000px){.b1,.b2,.b3,.b4,.b5,.b6{grid-column:span 2;grid-row:auto}}
@media(max-width:540px){.b1,.b2,.b3,.b4,.b5,.b6{grid-column:span 1}}
.b1{background:var(--lav);border-color:transparent;color:var(--lav-d)}
.b1 .ic{background:rgba(255,255,255,0.55);color:var(--lav-d)}
.b1 h4,.b1 p{color:var(--lav-d)}.b1 p{opacity:.85}
.b6{background:var(--ink);color:var(--bg);border-color:transparent;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:32px 40px}
.b6 h4{color:#fff;font-size:24px;letter-spacing:-0.02em;margin:0;flex:1;min-width:200px}
.b6 .ic{background:rgba(255,255,255,0.1);color:#fff}
[data-theme="dark"] .b6{background:var(--surface-3)}
.cell-svg{position:absolute;inset:auto -20px -20px auto;width:160px;height:160px;opacity:.35;pointer-events:none;color:var(--lav-d)}

/* ====== DOMAIN BAND ====== */
.dband{background:linear-gradient(135deg,var(--lav),var(--peach),var(--sky));border-radius:36px;padding:64px 56px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative;overflow:hidden}
[data-theme="dark"] .dband{background:linear-gradient(135deg,var(--surface-2),var(--lav),var(--surface-2));border:1px solid var(--line)}
@media(max-width:900px){.dband{grid-template-columns:1fr;padding:40px 28px}}
.dband::before{content:'';position:absolute;top:-50%;right:-10%;width:60%;height:200%;background:radial-gradient(ellipse,rgba(255,255,255,0.4),transparent 60%);pointer-events:none}
[data-theme="dark"] .dband::before{display:none}
.dband > *{position:relative}
.dband h2{font-size:clamp(28px,4vw,44px);font-weight:700;letter-spacing:-0.025em;line-height:1.05;color:var(--ink);margin-bottom:10px}
.dband h2 em{color:var(--red)}
.dband p{font-size:15px;color:var(--ink-2);margin-bottom:24px}
.dsearch{background:var(--surface);border-radius:999px;padding:8px 8px 8px 22px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 28px rgba(15,23,42,0.12);border:1px solid var(--line)}
.dsearch i{color:var(--mute-2);font-size:14px}
.dsearch input{flex:1;min-width:0;border:0;background:0;font:inherit;font-size:15px;color:var(--ink);outline:none;padding:8px 0}
.tlds{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.tlds .t{padding:6px 14px;background:var(--surface);color:var(--ink-2);font-size:12px;font-weight:600;border-radius:999px;border:1px solid var(--line);display:inline-flex;align-items:center;gap:6px}
.tlds .t b{color:var(--red);font-weight:700}
.dcard{background:var(--surface);border-radius:28px;padding:28px;box-shadow:0 12px 36px rgba(15,23,42,0.14);border:1px solid var(--line);max-width:340px;margin:0 auto}
.dcard .lab{font-size:12px;color:var(--mute);font-weight:600;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px}
.dcard .name{font-size:30px;font-weight:700;letter-spacing:-0.025em;color:var(--ink);margin-bottom:6px;font-family:'Instrument Serif',serif;font-style:italic}
.dcard .name b{color:var(--red);font-style:normal;font-family:'Inter',sans-serif}
.dcard .meta{font-size:13px;color:var(--mute);margin-bottom:18px}
.dcard .row{display:flex;gap:10px;align-items:center}
.dcard .chip-ok{flex:1;padding:9px;text-align:center;background:var(--sage);color:var(--sage-d);border-radius:14px 7px 14px 7px;font-size:13px;font-weight:600}
.dcard .chip-add{padding:9px 18px;background:var(--red);color:#fff;border-radius:14px 7px 14px 7px;font-size:13px;font-weight:600;cursor:pointer}

/* ====== PRICING (mockup .plan + legacy .pricing-card .pricing-grid) ====== */
.pricing,.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* When 4 cards are present, render 4-up on wide screens. We detect via :has() —
   browser support is ~92%; older browsers gracefully keep the 3-col layout. */
.pricing-grid:has(.pricing-card:nth-child(4)):not(:has(.pricing-card:nth-child(5))){
  grid-template-columns:repeat(4,1fr);
}
@media(max-width:1100px){
  .pricing-grid:has(.pricing-card:nth-child(4)):not(:has(.pricing-card:nth-child(5))){grid-template-columns:repeat(3,1fr)}
}
@media(max-width:980px){
  .pricing-grid:has(.pricing-card:nth-child(4)):not(:has(.pricing-card:nth-child(5))){grid-template-columns:repeat(2,1fr)}
}
/* For 6, 7, or 8 cards (eg VPS sizes), render 4-up so we get a clean 2×4 grid. */
.pricing-grid:has(.pricing-card:nth-child(6)){grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.pricing-grid:has(.pricing-card:nth-child(6)){grid-template-columns:repeat(3,1fr)}}
@media(max-width:980px){.pricing-grid:has(.pricing-card:nth-child(6)){grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.pricing,.pricing-grid{grid-template-columns:1fr}}
.plan,.pricing-card{
  padding:34px 30px!important;background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:28px!important;position:relative;transition:.25s;box-shadow:var(--shadow-sm)!important;
  display:flex!important;flex-direction:column;min-width:0;min-height:600px;
}
.plan:hover,.pricing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)!important}
.plan.featured,.pricing-card.featured{
  border-color:var(--red)!important;
  background:linear-gradient(180deg,var(--red-c) 0%,var(--surface) 30%)!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 12%,transparent),0 24px 60px -16px rgba(196,42,43,0.25)!important;
}
.plan-pill,.pricing-popular{
  position:absolute;top:-12px;left:24px;right:auto;
  background:var(--red)!important;color:#fff!important;
  padding:5px 14px;border-radius:999px;font-size:11px;font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;
  box-shadow:0 6px 16px -4px rgba(196,42,43,0.5);
}
.plan-name,.pricing-card-name{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:4px}
.pricing-card-header h3,.plan-header h3{color:var(--ink)!important;font-size:18px;font-weight:700;letter-spacing:-0.015em;margin:0 0 4px}
.pricing-card-header p,.plan-header p{color:var(--mute)!important;font-size:13.5px;margin:0 0 16px}
.plan-tag,.pricing-card-tag{font-size:13.5px;color:var(--mute);margin-bottom:22px}
.plan-price,.pricing-amount{font-size:54px;font-weight:700;color:var(--ink);letter-spacing:-0.035em;line-height:1;font-feature-settings:'tnum';display:flex;align-items:baseline;gap:4px}
.plan-price small,.pricing-period{font-size:14px;color:var(--mute);font-weight:500}
.pricing-currency{font-size:22px;color:var(--mute);font-weight:600;margin-right:2px}
.pricing-value{font-size:54px;font-weight:700;color:var(--ink);letter-spacing:-0.035em;line-height:1}
/* Meta row under the price — tenure pill + promo strike. Lives OUTSIDE the
   baseline flex .pricing-amount row so long labels wrap inside the card.
   (.plan-term itself is styled below near line ~1766.) */
.pricing-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px;min-height:26px;font-size:13px;color:var(--mute)}
.pricing-meta .plan-term{margin-left:0}
.pricing-was{color:var(--mute-2);font-size:13px}
.pricing-promo-flag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:var(--sage);color:#16A34A;font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
[data-theme="dark"] .pricing-promo-flag{color:var(--sage-d)}
.plan-strike{font-size:13px;color:var(--mute);margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.plan-strike s{color:var(--mute-2)}
.plan-strike b{color:#16A34A;font-weight:700;padding:2px 8px;background:var(--sage);border-radius:999px;font-size:11px}
[data-theme="dark"] .plan-strike b{color:var(--sage-d)}
.plan-renew{font-size:11.5px;color:var(--mute);margin-top:8px;font-family:'JetBrains Mono',monospace}
.plan-cta{display:block;width:100%;padding:13px;text-align:center;font-weight:600;font-size:14px;border-radius:14px;margin:24px 0;background:var(--surface-2);color:var(--ink);border:1px solid var(--line);cursor:pointer;font-family:inherit;transition:.2s;text-decoration:none}
.plan-cta:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.plan.featured .plan-cta,.pricing-card.featured .btn-primary{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 6px 18px -4px rgba(196,42,43,0.4)}
.plan ul,.pricing-features{list-style:none;padding-top:20px;border-top:1px solid var(--line);margin:0}
.plan li,.pricing-features li{font-size:13.5px;padding:7px 0;display:flex;gap:10px;color:var(--ink-2);align-items:flex-start;list-style:none}
.plan li i,.pricing-features li i{color:#16A34A;font-size:11px;margin-top:5px;flex-shrink:0}
[data-theme="dark"] .plan li i,[data-theme="dark"] .pricing-features li i{color:#86EFAC}
.plan li b,.pricing-features li b{color:var(--ink);font-weight:600}
.pricing-card-header{padding-bottom:0;margin-bottom:0}
.pricing-card .btn{margin-top:18px}

/* ====== TESTIMONIALS ====== */
.testi{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.testi{grid-template-columns:1fr}}
.tcard{padding:30px;border-radius:28px;border:1px solid var(--line);display:flex;flex-direction:column;gap:18px;transition:.25s;background:var(--surface);box-shadow:var(--shadow-sm)}
.tcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.tcard:nth-child(1){background:var(--lav);border-color:transparent}
.tcard:nth-child(1) q,.tcard:nth-child(1) b{color:var(--lav-d)}
.tcard:nth-child(2){border-color:var(--red);box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 8%,transparent),var(--shadow)}
.tcard:nth-child(3){background:var(--sage);border-color:transparent}
.tcard:nth-child(3) q,.tcard:nth-child(3) b{color:var(--sage-d)}
.tcard .stars{color:#F59E0B;font-size:14px;letter-spacing:2px}
.tcard q{font-size:15.5px;line-height:1.6;font-weight:500;color:var(--ink);quotes:none}
.tcard .who{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
.tcard .av{width:42px;height:42px;border-radius:18px 9px 18px 9px;background:var(--surface);display:grid;place-items:center;font-weight:700;font-size:14px;color:var(--ink);border:1px solid var(--line);overflow:hidden}
.tcard .av img{width:100%;height:100%;object-fit:cover}
.tcard .who b{display:block;font-size:14px;font-weight:700;letter-spacing:-0.01em}
.tcard .who small{font-size:12px;color:var(--mute);display:block;margin-top:2px}
.tcard:nth-child(1) .who small{color:var(--lav-d);opacity:.7}
.tcard:nth-child(3) .who small{color:var(--sage-d);opacity:.7}

/* ====== FAQ ====== */
.faq{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:20px;transition:.2s;box-shadow:var(--shadow-sm);overflow:hidden}
.faq details[open]{background:var(--red-c);border-color:transparent}
[data-theme="dark"] .faq details[open]{background:var(--surface-2);border-color:var(--red)}
.faq summary{padding:20px 26px;cursor:pointer;font-weight:600;font-size:16px;display:flex;align-items:center;gap:14px;list-style:none;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i.q{width:32px;height:32px;border-radius:14px 7px 14px 7px;background:var(--red-c);color:var(--red);display:grid;place-items:center;font-size:13px;flex-shrink:0}
.faq details[open] summary i.q{background:var(--surface);color:var(--red)}
.faq summary i.chev{margin-left:auto;font-size:14px;color:var(--mute);transition:.25s}
.faq details[open] summary i.chev{transform:rotate(180deg);color:var(--red)}
.faq .ans{padding:0 26px 22px 72px;font-size:14.5px;color:var(--ink-2);line-height:1.65}

/* ====== CTA BAND ====== */
.cta-band{background:var(--ink);color:var(--bg);border-radius:36px;padding:72px 56px;text-align:center;position:relative;overflow:hidden;box-shadow:0 30px 80px -16px rgba(15,23,42,0.3)}
[data-theme="dark"] .cta-band{background:linear-gradient(135deg,var(--surface-2),var(--surface));border:1px solid var(--line)}
.cta-band::before{content:'';position:absolute;inset:-50%;background:radial-gradient(circle at 30% 30%,rgba(196,42,43,0.35),transparent 40%),radial-gradient(circle at 70% 80%,rgba(215,201,238,0.25),transparent 40%);filter:blur(40px);pointer-events:none;animation:sigDrift 18s ease-in-out infinite}
.cta-band > *{position:relative}
.cta-band h2{font-size:clamp(36px,5vw,60px);font-weight:700;letter-spacing:-0.03em;line-height:1.05;margin-bottom:16px;color:#fff}
[data-theme="dark"] .cta-band h2{color:var(--ink)}
.cta-band h2 em{font-style:italic;font-family:'Instrument Serif',serif;font-weight:400;color:#FFB4BD}
.cta-band p{font-size:17px;color:rgba(255,255,255,0.75);max-width:560px;margin:0 auto 28px}
[data-theme="dark"] .cta-band p{color:var(--mute)}
.cta-band .btn-outline{background:rgba(255,255,255,0.1)!important;color:#fff!important;border-color:rgba(255,255,255,0.18)!important}

/* ====== LOGOS STRIP ====== */
.logos{padding:36px 0;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.logos .lab{font-size:11.5px;font-weight:600;color:var(--mute);text-align:center;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:18px}
.logos-track{display:flex;gap:56px;width:max-content;will-change:transform;animation:sigLscroll 40s linear infinite;white-space:nowrap;align-items:center;font-weight:700;font-size:19px;color:var(--mute-2)}
.logos-track span{display:inline-flex;align-items:center;gap:10px;opacity:.65;transition:.2s}
.logos-track span:hover{opacity:1;color:var(--ink)}
.logos-track i{color:var(--red);font-size:18px}

/* ====== FORMS (legacy .form-input / .form-group + auth pages) ====== */
.form-group{margin-bottom:16px}
.form-label,label{font-size:13px;font-weight:600;color:var(--ink);display:block;margin-bottom:6px}
.form-input,.form-control,input[type="text"]:not(.dsearch input):not(.cart-input-mini),
input[type="email"],input[type="password"],input[type="tel"],input[type="number"],
input[type="search"],input[type="url"],textarea,select{
  width:100%;padding:12px 16px!important;border-radius:14px!important;
  border:1px solid var(--line)!important;background:var(--surface)!important;
  color:var(--ink)!important;font:inherit;font-size:14px;
  transition:border-color .15s,box-shadow .15s;
}
/* Restore left padding for icon-wrapped inputs (overrides padding shorthand above). */
.input-icon-wrap > input:not(.x):not(.y),
.input-icon-wrap > input[type="text"]:not(.x):not(.y),
.input-icon-wrap > input[type="email"]:not(.x):not(.y),
.input-icon-wrap > input[type="password"]:not(.x):not(.y),
.input-icon-wrap > input[type="tel"]:not(.x):not(.y),
.input-icon-wrap > input[type="number"]:not(.x):not(.y),
.input-icon-wrap > input[type="search"]:not(.x):not(.y),
.input-icon-wrap > input[type="url"]:not(.x):not(.y),
.input-icon-wrap > .form-input:not(.x):not(.y),
.input-icon-wrap > .form-control:not(.x):not(.y){
  padding-left:44px!important;
}
.form-input:focus,.form-control:focus,input:focus,textarea:focus,select:focus{
  outline:none!important;border-color:var(--red)!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 12%,transparent)!important;
}
textarea{min-height:120px;resize:vertical}

/* Auth pages */
.auth-section{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:80px 20px 40px}
.auth-card,.auth-section .glass-card{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:28px!important;box-shadow:var(--shadow-lg)!important;backdrop-filter:none!important;padding:40px!important;max-width:480px;margin:0 auto;width:100%}
/* Restore normal glass-card surface site-wide (without auth max-width) */
.glass-card{background:var(--surface)!important;border:1px solid var(--line)!important;backdrop-filter:none!important}
.auth-header{margin-bottom:24px}
.auth-header h1,.auth-header h2{font-size:28px;margin-bottom:8px}
.auth-footer-text{font-size:14px;color:var(--mute);text-align:center;margin-top:18px}
.auth-footer-text a{color:var(--red);font-weight:600}

/* Alerts */
.alert{padding:12px 16px;border-radius:14px;font-size:14px;font-weight:500;margin-bottom:14px;display:flex;align-items:flex-start;gap:10px}
.alert-success{background:var(--sage);color:var(--sage-d);border:1px solid var(--sage-d)}
.alert-error,.alert-danger{background:var(--red-c);color:var(--red-d);border:1px solid var(--red)}
.alert-info{background:var(--sky);color:var(--sky-d);border:1px solid var(--sky-d)}
.alert-warning{background:var(--peach);color:var(--peach-d);border:1px solid var(--peach-d)}

/* ====== LEGACY FEATURE / SERVICE CARDS ====== */
.feature-card,.service-card,.benefit-card{
  background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:24px!important;padding:28px!important;
  box-shadow:var(--shadow-sm)!important;transition:.25s!important;
  color:var(--ink)!important;
}
.feature-card:hover,.service-card:hover,.benefit-card:hover{
  transform:translateY(-3px);box-shadow:var(--shadow-lg)!important;
}
.feature-icon,.service-icon,.benefit-icon{
  width:46px;height:46px;border-radius:14px 7px 14px 7px;
  display:inline-grid;place-items:center;font-size:18px;
  color:var(--red);background:var(--red-c);
  margin-bottom:18px;
}
.feature-card h3,.service-card h3,.feature-card h4,.service-card h4{font-size:18px;font-weight:700;margin-bottom:6px}
.feature-card p,.service-card p{font-size:13.5px;color:var(--mute);line-height:1.6;margin:0}

/* ====== FOOTER (legacy .footer / .footer-grid) ====== */
.footer{
  padding:80px 0 40px!important;border-top:1px solid var(--line)!important;
  margin-top:60px!important;background:var(--surface)!important;
  color:var(--ink)!important;
  position:relative;
}
.footer::before,.footer::after{display:none!important}
.footer-grid{
  display:grid;grid-template-columns:1.6fr repeat(5,1fr);
  gap:32px;margin-bottom:48px;
}
@media(max-width:1100px){.footer-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:700px){.footer-grid{grid-template-columns:1fr 1fr}}
.footer-brand p{font-size:13px;color:var(--mute);margin-top:14px;max-width:320px;line-height:1.65}
.footer-column h4{
  font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ink)!important;margin-bottom:16px;
}
.footer-column ul,.footer-links{list-style:none;margin:0;padding:0}
.footer-column li,.footer-links li{margin-bottom:10px;list-style:none}
.footer-column a,.footer-links a{font-size:14px;color:var(--mute)!important;text-decoration:none;transition:.15s}
.footer-column a:hover,.footer-links a:hover{color:var(--red)!important}
.footer-social{display:flex;gap:10px;margin-top:14px}
.footer-social a{
  width:34px;height:34px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--mute)!important;transition:.15s;
}
.footer-social a:hover{background:var(--red);color:#fff!important;border-color:var(--red);transform:translateY(-2px)}
.footer-bottom{
  padding-top:32px;border-top:1px solid var(--line);
  font-size:13px;color:var(--mute);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center;
}
.footer-bottom-links{display:flex;gap:18px}
.footer-bottom-links a{color:var(--mute)!important;font-size:13px}
.footer-bottom-links a:hover{color:var(--red)!important}

/* ====== MISC LEGACY ====== */
.scroll-progress{height:2px;background:var(--red);position:fixed;top:0;left:0;z-index:200;transition:width .1s}
.reveal{opacity:1;transform:none}  /* scroll-reveal.js is decorative — never hide content */
.reveal.is-visible{opacity:1;transform:none}
.text-gradient{
  background:linear-gradient(135deg,var(--red),var(--red-d));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* Dashboard sidebar/links inherit token colours via :root remap. */
.dashboard-wrapper,.dashboard-main,.dashboard-content{background:var(--bg)!important;color:var(--ink)!important}
.dashboard-sidebar,.dashboard-card,.widget,.metric-card,.stat-card{
  background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:20px!important;color:var(--ink)!important;
}
.dashboard-sidebar a,.sidebar-link{color:var(--ink-2)!important}
.dashboard-sidebar a.active,.sidebar-link.active{background:var(--red-c)!important;color:var(--red-d)!important}

/* Cart and checkout — let layout classes stay but force surface tokens */
.cart-layout,.cart-items,.cart-summary,.checkout-layout,.checkout-card,
.cart-line,.cart-empty,.order-summary{
  background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:20px!important;color:var(--ink)!important;
}
.cart-line{margin-bottom:12px;padding:18px!important}
.cart-summary{padding:24px!important}

/* Reduced motion — calm interaction transitions + instant scroll, and stop the
   large marquee/glow loops. We deliberately do NOT globally freeze keyframe
   animations (no `*{animation-duration:0.01ms}`): the site's gentle signature
   motion (floating hero card + chips, blinking status LEDs, radar pings) stays
   alive so the page never looks frozen. Genuinely large/vestibular motion
   (spins, orbits, parallax, blob drift) is suppressed per-section below. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
  .glow,.tile,.logos-track,.cta-band::before{animation:none!important}
}

/* =============================================================
   DASHBOARD (user + admin) — mockup parity overlay
   Targets existing .dashboard-layout / .dashboard-content / etc.
============================================================= */

/* layout shell */
.dashboard-layout{
  display:grid!important;
  grid-template-columns:248px 1fr!important;
  gap:24px!important;
  align-items:start!important;
  max-width:1400px;margin:0 auto;
}
@media(max-width:820px){
  .dashboard-layout{grid-template-columns:1fr!important;gap:14px!important}
  .dashboard-sidebar,.dashboard-sidebar.glass-card{position:static!important;top:auto!important}
}
@media(max-width:1100px) and (min-width:821px){
  .dashboard-layout{grid-template-columns:210px 1fr!important;gap:18px!important}
}
.page-section:has(.dashboard-layout){padding-top:96px!important;padding-bottom:60px!important;background:var(--bg)!important}
.page-section:has(.dashboard-layout) > .container{max-width:1400px;padding-left:18px;padding-right:18px}

/* sidebar */
.dashboard-sidebar,.dashboard-sidebar.glass-card{
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  padding:16px 12px!important;
  box-shadow:var(--shadow-sm)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  position:sticky;top:96px;
  display:flex;flex-direction:column;gap:4px;
}
.dash-sidebar-user{
  display:flex!important;align-items:center;gap:10px;
  padding:8px 10px 16px!important;
  border-bottom:1px solid var(--line)!important;
  margin-bottom:10px!important;
}
.dash-sidebar-user strong{font-weight:600;font-size:14px;color:var(--ink);display:block;line-height:1.25;letter-spacing:-0.01em}
.dash-sidebar-user .text-muted{color:var(--mute)!important;font-size:11px!important;font-family:'JetBrains Mono',monospace}
.dash-avatar{
  width:36px!important;height:36px!important;
  border-radius:14px 7px 14px 7px!important;
  background:var(--red)!important;
  display:grid!important;place-items:center;
  color:#fff!important;font-weight:700;font-size:14px;
  box-shadow:0 4px 12px -3px rgba(196,42,43,0.5),inset 0 1px 0 rgba(255,255,255,0.25);
}
.dash-avatar i{color:#fff;font-size:14px}

.dash-nav{display:flex;flex-direction:column;gap:2px}
.dash-nav-link,.dash-nav a{
  display:flex!important;align-items:center;gap:10px;
  padding:9px 12px!important;
  border-radius:10px!important;
  font-size:13.5px;font-weight:500;
  color:var(--ink-2)!important;
  border:0!important;background:transparent!important;
  text-decoration:none;
  transition:background .15s,color .15s;
}
.dash-nav-link i,.dash-nav a i{width:16px;color:var(--mute-2);font-size:13px;text-align:center}
.dash-nav-link:hover,.dash-nav a:hover{background:var(--surface-2)!important;color:var(--ink)!important}
.dash-nav-link.active,.dash-nav a.active{
  background:var(--red-c)!important;
  color:var(--red-d)!important;
  font-weight:600;
}
.dash-nav-link.active i,.dash-nav a.active i{color:var(--red-d)}

/* main content panel */
.dashboard-content{
  background:transparent!important;
  padding:0!important;
}
.dashboard-header{
  background:linear-gradient(135deg,var(--red-c),var(--lav))!important;
  border-radius:24px!important;
  padding:28px 32px!important;
  margin-bottom:22px!important;
  position:relative;overflow:hidden;
  border:1px solid var(--line)!important;
}
[data-theme="dark"] .dashboard-header{background:linear-gradient(135deg,var(--surface-2),var(--lav))!important}
.dashboard-header::before{
  content:'';position:absolute;top:-50%;right:-10%;width:60%;height:200%;
  background:radial-gradient(ellipse,rgba(255,255,255,0.35),transparent 60%);
  pointer-events:none;
}
[data-theme="dark"] .dashboard-header::before{display:none}
.dashboard-header > *{position:relative;z-index:1}
.dashboard-header h1{
  font-size:30px!important;font-weight:700!important;
  letter-spacing:-0.025em!important;color:var(--ink)!important;
  margin-bottom:4px!important;line-height:1.15;
}
.dashboard-header h1 em{font-style:italic;font-family:'Instrument Serif',serif;font-weight:400;color:var(--red)}
.dashboard-header p,.dashboard-header .text-muted{
  color:var(--ink-2)!important;
  font-family:'JetBrains Mono',monospace;font-size:13px;
}

/* KPI stat cards */
.dash-stats-grid{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:14px!important;
  margin-bottom:22px!important;
}
@media(max-width:1100px){.dash-stats-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:540px){.dash-stats-grid{grid-template-columns:1fr!important}}
.dash-stat-card,.dash-stat-card.glass-card{
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  padding:22px!important;
  box-shadow:var(--shadow-sm)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  position:relative;overflow:hidden;
  display:flex!important;align-items:flex-start;gap:14px;
  transition:transform .2s,box-shadow .2s;
}
.dash-stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)!important}
.dash-stat-icon{
  width:42px!important;height:42px!important;
  border-radius:14px 7px 14px 7px!important;
  display:grid!important;place-items:center;
  font-size:17px;flex-shrink:0;
}
.dash-stats-grid > .dash-stat-card:nth-child(1) .dash-stat-icon{background:var(--sage)!important;color:var(--sage-d)!important}
.dash-stats-grid > .dash-stat-card:nth-child(2) .dash-stat-icon{background:var(--sky)!important;color:var(--sky-d)!important}
.dash-stats-grid > .dash-stat-card:nth-child(3) .dash-stat-icon{background:var(--peach)!important;color:var(--peach-d)!important}
.dash-stats-grid > .dash-stat-card:nth-child(4) .dash-stat-icon{background:var(--lav)!important;color:var(--lav-d)!important}
.dash-stat-value{
  font-size:26px!important;font-weight:700!important;
  letter-spacing:-0.025em!important;
  color:var(--ink)!important;line-height:1.1;
  font-feature-settings:'tnum';
}
.dash-stat-label{
  font-size:11.5px!important;font-weight:600!important;
  color:var(--mute)!important;
  text-transform:uppercase;letter-spacing:0.06em;
  margin-top:6px;
}

/* content cards (override .glass-card inside dashboard) */
.dashboard-content .glass-card,
.dashboard-content > .glass-card{
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  padding:24px!important;
  box-shadow:var(--shadow-sm)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  color:var(--ink)!important;
  max-width:none!important;margin:0 0 16px!important;width:auto!important;
}
.dashboard-content h3{
  font-size:15px!important;font-weight:700!important;
  letter-spacing:-0.005em!important;
  color:var(--ink)!important;
  margin:0;
}
.dashboard-content > h1,
.dashboard-content > div > h1{
  font-size:28px!important;font-weight:700!important;
  letter-spacing:-0.025em!important;
  color:var(--ink)!important;
  margin:0 0 4px!important;
}
.dashboard-content > div > h1 em,
.dashboard-content h1 em{
  font-style:italic;font-family:'Instrument Serif',serif;
  font-weight:400;color:var(--red);
}

/* tables */
.dash-table-wrap{overflow-x:auto;margin:0!important}
.dash-table{
  width:100%;border-collapse:collapse;font-size:13px;color:var(--ink);
}
.dash-table thead th{
  text-align:left;
  font-size:10.5px!important;font-weight:600!important;
  color:var(--mute)!important;
  text-transform:uppercase;letter-spacing:0.06em;
  padding:8px 10px!important;
  border-bottom:1px solid var(--line)!important;
  font-family:'JetBrains Mono',monospace;
  background:transparent!important;
}
.dash-table tbody td{
  padding:12px 10px!important;
  border-bottom:1px solid var(--line-2)!important;
  color:var(--ink)!important;
  background:transparent!important;
}
.dash-table tbody tr:last-child td{border-bottom:0!important}
.dash-table tbody tr:hover{background:var(--surface-2)!important}
.dash-table tbody tr:hover td{background:transparent!important}
.dash-table .pricing-value,.dash-table .num{font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--ink)}
.dash-table a{color:var(--red);font-weight:500}
.dash-table a:hover{text-decoration:underline}

/* status badges (re-skin) */
.status-badge{
  display:inline-flex!important;align-items:center;gap:5px;
  padding:3px 10px!important;
  border-radius:999px!important;
  font-size:10.5px!important;font-weight:600!important;
  text-transform:capitalize;letter-spacing:0;
  border:0!important;
}
.status-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.status-active,.status-paid,.status-completed,.status-success{background:var(--sage)!important;color:var(--sage-d)!important}
.status-pending,.status-processing,.status-due{background:var(--peach)!important;color:var(--peach-d)!important}
.status-failed,.status-cancelled,.status-refunded{background:var(--red-c)!important;color:var(--red-d)!important}
.status-suspended,.status-inactive,.status-expired{background:var(--surface-2)!important;color:var(--mute)!important}

/* btn-sm sizing inside dashboard */
.dashboard-content .btn-sm{padding:6px 12px!important;font-size:12px!important;border-radius:8px!important}

/* admin-specific: hidden sidebar in admin (admin has its own shell) */
body.admin-page .dashboard-layout{display:block!important}


/* ── status.php — Operational dots / labels should be sage, not red ───── */
.status-dot.green{background:var(--sage-d)!important;box-shadow:0 0 8px color-mix(in srgb,var(--sage-d) 50%,transparent)!important}
.status-dot.yellow{background:#D97706!important;box-shadow:0 0 8px rgba(217,119,6,0.45)!important}
.status-dot.red{background:var(--red)!important;box-shadow:0 0 8px color-mix(in srgb,var(--red) 50%,transparent)!important}
/* Status row label color (style.css inline color comes from $sc['color']) */
.status-indicator + .status-row-meta,.status-row .status-label{color:var(--sage-d)!important}

/* ── Generic .feature-grid (used across many marketing pages) ─────────── */
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%}
.feature-grid.feature-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.feature-grid.feature-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.feature-grid,.feature-grid.feature-grid-4{grid-template-columns:1fr}}
.feature-card{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:20px!important;padding:26px!important;box-shadow:var(--shadow-sm)!important;backdrop-filter:none!important;color:var(--ink)!important;display:flex;flex-direction:column;gap:10px;transition:.2s}
.feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)!important}
.feature-card > i,.feature-card .feature-icon{font-size:18px;color:var(--red);width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;background:var(--red-c);border-radius:14px 7px 14px 7px;flex-shrink:0;margin-bottom:4px}
.feature-card h3{font-size:15px!important;font-weight:700!important;color:var(--ink)!important;margin:0;letter-spacing:-0.005em}
.feature-card p{color:var(--mute)!important;font-size:13.5px;line-height:1.55;margin:0}

/* Section header above a feature-grid centers when .centered or default */
.section-header{text-align:center;margin:0 auto 40px;max-width:760px}
.section-header.left,.section-header[style*="text-align:left"]{text-align:left;margin-left:0}
.section-title{font-size:clamp(28px,3.5vw,42px);font-weight:700;letter-spacing:-0.03em;color:var(--ink);margin:0 0 12px;line-height:1.05}
.section-title .text-gradient,.section-title em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:500;color:var(--red);background:none;-webkit-text-fill-color:var(--red)}
.section-desc{color:var(--mute);font-size:16px;line-height:1.6;margin:0 auto}
.section-desc.centered{text-align:center}

/* Page-hero (sub-page heroes) center alignment */
.page-hero{padding:96px 0 56px;background:var(--bg);position:relative;overflow:hidden}
.page-hero .page-hero-content{text-align:center;max-width:820px;margin:0 auto}
.page-hero .badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:var(--red-c)!important;color:var(--red-d)!important;font-size:11.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:18px}
.page-hero .hero-title{font-size:clamp(40px,5.5vw,64px);font-weight:700;letter-spacing:-0.03em;color:var(--ink);margin:0 0 16px;line-height:1.02}
.page-hero .hero-title .text-gradient{font-family:'Instrument Serif',serif;font-style:italic;font-weight:500;color:var(--red);background:none;-webkit-text-fill-color:var(--red);letter-spacing:-0.01em}
.page-hero .hero-subtitle{font-size:17px;color:var(--mute);line-height:1.55;max-width:640px;margin:0 auto}
.page-hero .hero-orb{display:none}

/* ====== Animated product hero (split layout + orbiting scene) ====== */
.page-hero--split{padding:84px 0 60px}
.page-hero--split .page-hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.page-hero--split .page-hero-content{text-align:left;max-width:600px;margin:0}
.page-hero--split .page-hero-content .hero-subtitle{margin:0}
.page-hero--split .page-hero-content .badge{margin-bottom:18px}
.phero-scene{position:relative;width:min(100%,440px);aspect-ratio:1;margin:0 auto;justify-self:center;--phero-accent:var(--red)}
.hero-scene-glow{position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--phero-accent) 24%,transparent),transparent 66%);filter:blur(8px);animation:heroGlow 6s ease-in-out infinite}
.hero-ring{position:absolute;border-radius:50%;border:1px solid var(--line)}
.hero-ring-1{inset:1%;opacity:.6}
.hero-ring-2{inset:15%;border-style:dashed;border-color:color-mix(in srgb,var(--phero-accent) 34%,transparent);animation:heroSpin 30s linear infinite}
.hero-ring-3{inset:30%;opacity:.5}
.hero-core{position:absolute;top:50%;left:50%;width:106px;height:106px;margin:-53px 0 0 -53px;border-radius:28px;display:grid;place-items:center;background:var(--surface);border:1px solid color-mix(in srgb,var(--phero-accent) 26%,var(--line));box-shadow:var(--shadow-md),0 0 0 6px color-mix(in srgb,var(--phero-accent) 8%,transparent);animation:heroFloat 5s ease-in-out infinite;z-index:3}
.hero-core i{font-size:42px;line-height:1;color:var(--phero-accent)!important;-webkit-text-fill-color:var(--phero-accent)}
.hero-orbit{position:absolute;inset:0;border-radius:50%}
.hero-orbit-a{animation:heroSpin 24s linear infinite}
.hero-orbit-b{inset:15%;animation:heroSpinRev 19s linear infinite}
.hero-sat{position:absolute;width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.hero-sat i{font-size:20px;color:var(--ink)}
.hero-sat-1{top:-27px;left:50%;margin-left:-27px;animation:heroSpinRev 24s linear infinite}
.hero-sat-2{bottom:-27px;left:50%;margin-left:-27px;animation:heroSpinRev 24s linear infinite}
.hero-sat-3{top:50%;left:-27px;margin-top:-27px;animation:heroSpin 19s linear infinite}
.hero-sat-4{top:50%;right:-27px;margin-top:-27px;animation:heroSpin 19s linear infinite}
.hero-spark{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--phero-accent);opacity:.5;animation:heroSpark 7s ease-in-out infinite}
.hero-spark-1{top:10%;left:6%}
.hero-spark-2{bottom:12%;right:8%;background:var(--lav,#a78bfa);animation-delay:1.6s}
.hero-spark-3{top:42%;right:2%;animation-delay:3.2s}
@keyframes heroSpin{to{transform:rotate(360deg)}}
@keyframes heroSpinRev{to{transform:rotate(-360deg)}}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes heroGlow{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.82;transform:scale(1.06)}}
@keyframes heroSpark{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-15px);opacity:.7}}
/* Per-product hero accent variants — each category gets its own colourway so
   pages no longer share an identical hero (feedback: more creativity). */
.phero-scene--cloud{--phero-accent:#2563EB}
.phero-scene--vps{--phero-accent:#7C3AED}
.phero-scene--dedicated{--phero-accent:#0891B2}
.phero-scene--reseller{--phero-accent:#0D9488}
.phero-scene--wordpress{--phero-accent:#2D6CDF}
.phero-scene--email{--phero-accent:#EA580C}
.phero-scene--ssl{--phero-accent:#16A34A}
.phero-scene--security{--phero-accent:#15803D}
.phero-scene--domain{--phero-accent:var(--red)}
@media(max-width:900px){
  .page-hero--split .page-hero-inner{grid-template-columns:1fr;gap:18px}
  .page-hero--split .page-hero-content{text-align:center;max-width:680px;margin:0 auto}
  .page-hero--split .page-hero-content .badge{margin-left:auto;margin-right:auto}
  .page-hero--split .page-hero-content .hero-subtitle{margin:0 auto}
  .phero-scene{width:min(78vw,320px)}
}
@media(prefers-reduced-motion:reduce){
  /* Reduced motion = no large rotation/translation (vestibular triggers), but
     keep a gentle in-place "breathing" glow + soft float so the hero never
     looks frozen/broken for these visitors. */
  .hero-orbit,.hero-ring-2{animation:none!important}
  .hero-sat{animation:none!important}
  .hero-core{animation:heroFloatSoft 8s ease-in-out infinite!important}
  .hero-scene-glow{animation:heroGlow 7s ease-in-out infinite!important}
  .hero-spark{animation:heroSparkSoft 5s ease-in-out infinite!important}
}
@keyframes heroFloatSoft{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes heroSparkSoft{0%,100%{opacity:.3}50%{opacity:.65}}

/* FAQ items — .faq-item / .faq-list */
.faq-list{display:flex;flex-direction:column;gap:10px;max-width:820px;margin:0 auto}
.faq-item,details.faq-item{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:16px!important;padding:18px 22px!important;color:var(--ink)!important;transition:.15s}
.faq-item summary{cursor:pointer;font-weight:600;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:15px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-family:'JetBrains Mono',monospace;color:var(--red);font-size:18px;line-height:1;transition:.2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{color:var(--mute);font-size:14px;line-height:1.6;margin:12px 0 0}
.faq-item[open]{box-shadow:var(--shadow-sm)!important}

/* === Phase R4: cross-page fixes === */
/* About-page KPIs and similar metric cards (style.css used var(--white)) */
.why-metric-value{color:var(--ink)!important}
.why-metric-label{color:var(--mute)!important}
/* CTA cards on marketing pages */
.cta-card h2,.cta-card h3,.cta-card .cta-title{color:var(--ink)!important}
.cta-card p,.cta-card .cta-desc{color:var(--mute)!important}
/* Legal pages list items */
.legal-content li,.legal-content p{color:var(--ink)!important;opacity:.85}

/* Contact + other pages with button-style FAQ (style.css used var(--white)) */
.faq-question{color:var(--ink)!important}
.faq-question span{color:var(--ink)!important}
.faq-question i{color:var(--mute)!important}
.contact-info-item h4{color:var(--ink)!important}
.contact-info-item p{color:var(--mute)!important}
/* Icon background squircles on contact-info-item */
.contact-info-icon{background:var(--red-c)!important;color:var(--red)!important;border-radius:14px 7px 14px 7px!important;width:42px!important;height:42px!important;display:flex!important;align-items:center!important;justify-content:center!important}

/* ------------------------------------------------------------------ */
/* Utility strip (rotating promo + currency + language)               */
/* ------------------------------------------------------------------ */
.utility-strip{
  background:linear-gradient(90deg, var(--red-c,#FFE1E4) 0%, #FFEFE0 100%);
  color:var(--red-d,#7A1620);
  font-size:12.5px;
  border-bottom:1px solid rgba(196,42,43,.18);
  position:relative;z-index:55;
}
.utility-strip-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:32px;padding:4px 0;
}
.utility-promos{position:relative;flex:1;min-height:20px;overflow:hidden}
.utility-promo{
  position:absolute;inset:0;display:flex;align-items:center;gap:8px;
  opacity:0;transform:translateY(6px);transition:opacity .4s ease, transform .4s ease;
  font-weight:500;letter-spacing:.01em;white-space:nowrap;
}
.utility-promo .fa-bolt{color:var(--red,#C42A2B)}
.utility-promo.is-active{opacity:1;transform:translateY(0);position:relative;inset:auto}
.utility-actions{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.utility-label{font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;opacity:.7;margin-right:4px}
.utility-currency,.utility-lang{display:inline-flex;align-items:center;gap:2px}
.utility-currency-btn,.utility-lang-btn{
  background:transparent;border:0;padding:4px 8px;border-radius:6px;
  color:var(--red-d,#7A1620);font-size:11px;font-weight:600;
  cursor:pointer;transition:background .15s, color .15s;
  font-family:inherit;letter-spacing:.03em;
}
.utility-currency-btn:hover,.utility-lang-btn:hover{background:rgba(196,42,43,.12)}
.utility-currency-btn.is-active,.utility-lang-btn.is-active{
  background:var(--red,#C42A2B);color:#fff;
}
[data-theme="dark"] .utility-strip{
  background:linear-gradient(90deg, rgba(196,42,43,.22) 0%, rgba(196,42,43,.14) 100%);
  color:#FFE1E4;border-bottom-color:rgba(255,225,228,.12);
}
[data-theme="dark"] .utility-currency-btn,
[data-theme="dark"] .utility-lang-btn{color:#FFE1E4}
[data-theme="dark"] .utility-currency-btn:hover,
[data-theme="dark"] .utility-lang-btn:hover{background:rgba(255,225,228,.12)}
@media (max-width:820px){
  .utility-strip{display:none}
}
/* tiny pulse helper used by cart add */
@keyframes sigBadgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}

/* Hook into existing currency JS which toggles .active */
.utility-currency-btn.active{background:var(--red,#C42A2B)!important;color:#fff!important}

/* App-window header strip — replaces the fake browser address bar */
.app-window .app-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 16px;background:linear-gradient(180deg, var(--surface,#fff), var(--bg,#FAFAF7));border-bottom:1px solid var(--line,#E7E5DE);border-radius:16px 16px 0 0}
.app-bar-left{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--ink,#0F172A)}
.app-bar-title{font-weight:600;letter-spacing:.01em}
.app-bar-tabs{display:inline-flex;gap:4px}
.app-bar-tab{font-size:12px;font-weight:500;color:var(--mute,#64748B);padding:6px 12px;border-radius:8px;cursor:default}
.app-bar-tab.is-active{background:var(--red-c,#FFE1E4);color:var(--red-d,#7A1620)}

/* ============================================================
 * Production hardening — checkout + cart mobile (≤768px)
 * (added 2026-05-18 final readiness pass)
 * ============================================================ */
@media (max-width: 768px){
  .checkout-layout,
  .cart-layout{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .checkout-summary,
  .order-summary,
  .cart-summary{
    min-width: 100% !important;
    position: static !important;
  }
  .pricing-grid,
  .plan-grid{
    grid-template-columns: 1fr !important;
  }
  .products{ grid-template-columns: 1fr 1fr !important; gap:12px !important; }
  .bento{ grid-template-columns: 1fr 1fr !important; }
  .hero-section,.page-hero{ padding: 32px 16px !important; }
  .hero-title,.section-title{ font-size: clamp(28px, 7vw, 40px) !important; }
  .form-grid{ grid-template-columns: 1fr !important; gap: 14px !important; }
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
@media (max-width: 540px){
  .products{ grid-template-columns: 1fr !important; }
  .bento{ grid-template-columns: 1fr !important; }
  .hero-tiles{ display:none !important; }
}

/* Safe-area for notched devices */
@supports (padding: max(0px)) {
  .navbar { padding-top: max(0px, env(safe-area-inset-top)) !important; }
  .footer { padding-bottom: max(20px, env(safe-area-inset-bottom)) !important; }
}

/* Touch target hardening — every interactive button ≥ 40px tall on touch */
@media (hover: none) and (pointer: coarse){
  .btn, .btn-red, .btn-primary, .btn-secondary,
  button[type="submit"], .nav-link, .navbar-toggler { min-height: 44px !important; }
}

/* ===== Plan grid primitives (used by email.php and others) ===== */
.plan-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;
  max-width: 1180px;
  margin: 24px auto 0;
}
.plan-grid.plan-grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); max-width: 1280px; }
.plan-grid.plan-grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 880px; }
@media (max-width: 1100px){ .plan-grid.plan-grid-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px){
  .plan-grid{ grid-template-columns: 1fr 1fr; gap:16px; }
}
@media (max-width: 640px){
  .plan-grid, .plan-grid.plan-grid-2, .plan-grid.plan-grid-4{ grid-template-columns: 1fr; }
}
.plan-card{
  position: relative;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #E5E7EB);
  border-radius: 20px;
  padding: 28px 24px 24px;
  display:flex; flex-direction:column;
  box-shadow: 0 1px 0 rgba(15,23,42,.02), 0 12px 28px -22px rgba(15,23,42,.18);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.plan-card:hover{
  transform: translateY(-3px);
  border-color: var(--red-c, #FBD3D4);
  box-shadow: 0 1px 0 rgba(15,23,42,.02), 0 22px 40px -22px rgba(196,42,43,.22);
}
.plan-card.plan-card-featured{
  border-color: var(--red, #C42A2B);
  background: linear-gradient(180deg, #fff 0%, #FFF6F6 100%);
  box-shadow: 0 1px 0 rgba(15,23,42,.02), 0 22px 40px -22px rgba(196,42,43,.32);
}
.plan-card .plan-badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background: var(--red, #C42A2B); color:#fff; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding: 6px 14px; border-radius: 999px;
  box-shadow: 0 6px 18px -6px rgba(196,42,43,.55);
}
.plan-card-head{ margin-bottom: 14px; }
.plan-card .plan-name{ font-size: 1.18rem; font-weight: 700; color: var(--text, #0F172A); margin: 0 0 6px; }
.plan-card .plan-tagline{ color: var(--text-light, #475569); font-size: .9rem; line-height: 1.5; margin:0; }
.plan-card .plan-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; padding: 6px 0 4px; border-top: 1px solid var(--line,#EEF1F5); margin-top: 6px; padding-top: 16px; }
.plan-card .price-from{ font-size: .78rem; color: var(--text-light,#64748B); text-transform: uppercase; letter-spacing:.06em; }
.plan-card .price-amount{ font-size: 1.85rem; font-weight: 800; color: var(--text, #0F172A); letter-spacing:-.02em; line-height: 1; }
.plan-card .price-cycle{ font-size: .82rem; color: var(--text-light,#64748B); }
.plan-card .plan-features{ list-style:none; padding:0; margin: 14px 0 18px; display:flex; flex-direction:column; gap:8px; }
.plan-card .plan-features li{ display:flex; align-items:flex-start; gap:8px; font-size:.92rem; color: var(--text, #0F172A); line-height:1.45; }
.plan-card .plan-features li i{ color: var(--sage-d, #15803D); margin-top:3px; font-size:.85rem; flex-shrink:0; }
.plan-card .btn-full{ margin-top: auto; width:100%; justify-content:center; }
[data-theme="dark"] .plan-card{ background: var(--surface, #131826); border-color: var(--line, #1E293B); }
[data-theme="dark"] .plan-card.plan-card-featured{ background: linear-gradient(180deg, #1A1F2E 0%, #251618 100%); }
[data-theme="dark"] .plan-card .plan-name,
[data-theme="dark"] .plan-card .price-amount,
[data-theme="dark"] .plan-card .plan-features li{ color: var(--text, #E2E8F0); }
[data-theme="dark"] .plan-card .plan-tagline,
[data-theme="dark"] .plan-card .price-from,
[data-theme="dark"] .plan-card .price-cycle{ color: var(--text-light, #94A3B8); }

/* ===== Nav dropdown UX (hover delay + smoother transitions, R8d) ===== */
@media (min-width: 901px){
  .has-dropdown > a{ padding-bottom: 14px; }
  .has-dropdown .mega-dropdown{
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .2s !important;
    padding-top: 6px !important;
  }
  /* Eliminate hover-gap between the trigger and dropdown so cursor traversal doesn't close it */
  .has-dropdown .mega-dropdown::before{
    content:""; position:absolute; left:0; right:0; top:-10px; height:10px; background:transparent;
  }
  .has-dropdown:hover .mega-dropdown,
  .has-dropdown.is-hovered .mega-dropdown,
  .has-dropdown.open .mega-dropdown{
    transition: opacity .18s ease, transform .18s ease, visibility 0s !important;
  }
  /* 200ms close-grace: keep visible while hovering parent OR dropdown panel */
  .has-dropdown:not(:hover):not(.is-hovered):not(.open) .mega-dropdown{
    transition-delay: 0s, 0s, .2s !important;
  }
}

/* ===== Public-site notification popover (R8j) ===== */
.notif-wrap{position:relative;display:inline-block}
.notif-pop{
  position:absolute; right:0; top:calc(100% + 10px); z-index:1500;
  width:360px; max-width:calc(100vw - 32px);
  background:var(--surface,#fff); border:1px solid var(--line,#E5E7EB);
  border-radius:16px; box-shadow:0 12px 40px rgba(15,23,42,.18);
  overflow:hidden;
}
.notif-pop[hidden]{display:none}
.notif-pop-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--line,#E5E7EB);
  background:var(--surface-2, #FAFAFA);
}
.notif-pop-head b{font-size:14px; color:var(--ink,#0F172A); font-weight:700}
.notif-pop-all{font-size:12px; color:var(--red,#C42A2B); font-weight:600; text-decoration:none}
.notif-pop-all:hover{text-decoration:underline}
.notif-pop-list{max-height:420px; overflow-y:auto}
.notif-pop-item{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 16px; border-bottom:1px solid var(--line,#F1F5F9);
  text-decoration:none; color:var(--ink,#0F172A); transition:background .15s;
}
.notif-pop-item:hover{background:var(--surface-2,#FAFAFA)}
.notif-pop-item.unread{background:rgba(196,42,43,.04)}
.notif-pop-item .npi-ic{
  flex:0 0 32px; width:32px; height:32px; border-radius:14px 7px 14px 7px;
  background:var(--peach,#FFE8DA); color:var(--red,#C42A2B);
  display:flex; align-items:center; justify-content:center; font-size:13px;
}
.notif-pop-item .npi-body{flex:1; min-width:0}
.notif-pop-item .npi-title{font-size:13px; font-weight:600; color:var(--ink,#0F172A); margin:0 0 2px; line-height:1.3}
.notif-pop-item .npi-meta{font-size:11px; color:var(--mute,#64748B); line-height:1.4}
.notif-pop-empty{padding:32px 16px; text-align:center; color:var(--mute,#64748B); font-size:13px}
.notif-pop-empty i{display:block; font-size:24px; margin-bottom:8px; opacity:.6}
[data-theme="dark"] .notif-pop{background:#1c1c1f; border-color:#2e2e33}
[data-theme="dark"] .notif-pop-head{background:#15151a; border-color:#2e2e33}
[data-theme="dark"] .notif-pop-item{border-color:#26262b; color:#E5E7EB}
[data-theme="dark"] .notif-pop-item:hover{background:#26262b}
[data-theme="dark"] .notif-pop-item.unread{background:rgba(196,42,43,.12)}

/* ===== Hero orbital SVG (S3.1) ===== */
.tile.center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px!important}
.hero-orbit{width:100%;max-width:200px;height:auto;display:block}
.hero-orbit .ring{transform-origin:100px 100px;animation:heroRingPulse 4s ease-in-out infinite}
.hero-orbit .ring.r2{animation-delay:.6s}
.hero-orbit .ring.r3{animation-delay:1.2s}
.hero-orbit .orb-halo{transform-origin:100px 100px;animation:heroHalo 3s ease-in-out infinite}
.hero-orbit .orbit{transform-origin:100px 100px;animation:heroOrbit 8s linear infinite}
.hero-orbit .orbit.o1{animation-duration:11s}
.hero-orbit .orbit.o2{animation-duration:8s;animation-direction:reverse}
.hero-orbit .orbit.o3{animation-duration:6s}
.hero-orbit .orb-core{transform-origin:100px 100px;animation:heroCoreFloat 4s ease-in-out infinite}
@keyframes heroRingPulse{0%,100%{opacity:.4;stroke-width:1}50%{opacity:1;stroke-width:1.8}}
@keyframes heroHalo{0%,100%{transform:scale(.9);opacity:.4}50%{transform:scale(1.15);opacity:.7}}
@keyframes heroOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes heroCoreFloat{0%,100%{transform:translate(80px,80px)}50%{transform:translate(80px,76px)}}
@media (prefers-reduced-motion: reduce){
  .hero-orbit .ring,.hero-orbit .orb-halo,.hero-orbit .orbit,.hero-orbit .orb-core{animation:none}
}

/* ── Product page polish: trust chips strip ───────────────────────── */
.product-trust-chips{padding-top:0!important;padding-bottom:0!important;margin-top:-20px}
.trust-chip-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:14px 0}
.trust-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;background:var(--surface,#fff);border:1px solid var(--line,#E5E7EB);border-radius:999px;font-size:13px;font-weight:600;color:var(--text,#0F172A);box-shadow:0 1px 2px rgba(15,23,42,.04)}
.trust-chip i{color:var(--red,#C42A2B);font-size:13px}
[data-theme="dark"] .trust-chip{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);color:#E5E7EB}

/* ── Product intro (lede + 3 quick-win features), above the plan grid ── */
.product-intro-section{padding:36px 0 24px}
.product-intro-lede{max-width:880px;margin:0 auto 32px;text-align:center;font-size:1.05rem;line-height:1.7;color:var(--text,#0F172A)}
.product-intro-lede p{margin:0;color:inherit}
[data-theme="dark"] .product-intro-lede{color:#D1D5DB}
.product-intro-features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1100px;margin:0 auto}
.product-intro-feature{padding:22px;border:1px solid var(--line,#E5E7EB);border-radius:18px;background:var(--surface,#fff);transition:transform .2s,box-shadow .2s}
.product-intro-feature:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(15,23,42,.08)}
.product-intro-feature-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(196,42,43,.08);color:var(--red,#C42A2B);font-size:18px;margin-bottom:12px}
.product-intro-feature h3{margin:0 0 6px;font-size:1.05rem;font-weight:700;color:var(--text,#0F172A)}
.product-intro-feature p{margin:0;font-size:.92rem;line-height:1.55;color:var(--text-muted,#64748B)}
[data-theme="dark"] .product-intro-feature{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .product-intro-feature h3{color:#F3F4F6}
[data-theme="dark"] .product-intro-feature p{color:#94A3B8}
@media (max-width:720px){.product-intro-features{grid-template-columns:1fr}}

/* ── Under-the-hood specs (3-column) ── */
.product-specs-section{background:linear-gradient(180deg,transparent 0,rgba(196,42,43,.025) 100%)}
.product-specs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1180px;margin:0 auto}
.product-specs-col{padding:24px;border:1px solid var(--line,#E5E7EB);border-radius:18px;background:var(--surface,#fff)}
.product-specs-col-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line,#E5E7EB)}
.product-specs-col-head i{width:36px;height:36px;border-radius:10px;background:rgba(196,42,43,.08);color:var(--red,#C42A2B);display:flex;align-items:center;justify-content:center;font-size:15px}
.product-specs-col-head h3{margin:0;font-size:1rem;font-weight:700;color:var(--text,#0F172A)}
.product-specs-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.product-specs-list li{display:flex;align-items:flex-start;gap:10px;font-size:.93rem;line-height:1.5;color:var(--text,#0F172A)}
.product-specs-list li i{color:#22c55e;font-size:11px;margin-top:5px;flex:0 0 11px}
.product-specs-list li span{flex:1}
[data-theme="dark"] .product-specs-col{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .product-specs-col-head{border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .product-specs-col-head h3{color:#F3F4F6}
[data-theme="dark"] .product-specs-list li{color:#D1D5DB}
@media (max-width:900px){.product-specs-grid{grid-template-columns:1fr}}

/* === Phase U: domains.php TLD table contrast (light + dark) === */
.tld-dot{color:var(--red,#C42A2B)!important}
.tld-desc{color:var(--mute,#64748B)!important}
.tld-col-price{color:var(--ink,#0F172A)!important}
.tld-col-price strong{color:var(--ink,#0F172A)!important}
.tld-table-header{
  background:var(--surface-2,rgba(196,42,43,0.06))!important;
  color:var(--mute)!important;
  border-bottom:1px solid var(--line,var(--border))!important;
}
.tld-table-row{border-bottom:1px solid var(--line-2,var(--border-light))!important}
.tld-table-row:hover{background:var(--surface-2,rgba(196,42,43,0.04))!important}
[data-theme="dark"] .tld-dot{color:var(--red,#FF5A6E)!important}
[data-theme="dark"] .tld-col-price,
[data-theme="dark"] .tld-col-price strong{color:var(--ink,#F4F5F8)!important}

/* TLD pill prices in hero strip */
.tld-pill .price{color:var(--ink)!important;font-weight:600}

/* === Phase U: auth-form icon-input alignment === */
.input-icon-wrap{position:relative}
.input-icon-wrap > i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--mute);font-size:14px;pointer-events:none;z-index:2}
.input-icon-wrap > input,
.input-icon-wrap > .form-input,
.input-icon-wrap > input[type="email"],
.input-icon-wrap > input[type="password"],
.input-icon-wrap > input[type="tel"],
.input-icon-wrap > input[type="text"]{padding-left:44px!important}
/* "Forgot password?" + terms / privacy links contrast on auth pages */
.forgot-password,.auth-card a,.auth-form a,.terms-link{color:var(--red)!important;font-weight:600}
.forgot-password:hover,.auth-card a:hover,.auth-form a:hover,.terms-link:hover{color:var(--primary-dark,var(--red))!important;text-decoration:underline}

/* === Phase U: account menu dropdown (header) === */
.account-menu{position:relative}
.account-menu-btn{display:inline-flex;align-items:center;gap:8px}
.account-avatar{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-weight:700;font-size:11px;letter-spacing:.02em}
.account-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu-pop{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:220px;background:var(--surface,#fff);
  border:1px solid var(--line,var(--border));
  border-radius:14px;box-shadow:var(--shadow-lg);
  padding:6px;z-index:60;
}
.account-menu-pop[hidden]{display:none!important}
.account-menu-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:10px;
  color:var(--ink,var(--text-primary))!important;
  font-size:13.5px;font-weight:500;text-decoration:none!important;
  transition:background .15s ease;
}
.account-menu-item i{width:16px;color:var(--mute);font-size:13px}
.account-menu-item:hover{background:var(--surface-2,rgba(196,42,43,0.06))}
.account-menu-item-primary{color:var(--red,#C42A2B)!important;font-weight:600}
.account-menu-item-primary i{color:var(--red,#C42A2B)}
.account-menu-item-danger{color:var(--red,#C42A2B)!important}
.account-menu-sep{height:1px;background:var(--line,var(--border));margin:4px 0}
[data-theme="dark"] .account-menu-pop{background:var(--surface,#14161E)}

/* Hide name label on tablets to fit; on mobile the navbar-actions collapse anyway */
@media (max-width: 980px){
  .account-name{display:none}
}

/* === Phase U: pricing grid centering when last row underflows === */
.pricing-grid{justify-content:center;justify-items:stretch}
/* When 4 cards on 3-col fallback (1100-1200px range), center the orphan */
.pricing-grid:has(.pricing-card:nth-child(4)):not(:has(.pricing-card:nth-child(5))) .pricing-card{justify-self:center;width:100%;max-width:340px}
@media(min-width:1101px){
  .pricing-grid:has(.pricing-card:nth-child(4)):not(:has(.pricing-card:nth-child(5))) .pricing-card{max-width:none}
}
/* Region/variant toggle pills should align horizontally and stay centered */
.region-toggle,.variant-tabs{display:flex!important;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px}
.region-toggle-btn{padding:.45rem .9rem!important;font-weight:600}
.region-flag{border:1px solid rgba(0,0,0,.08);border-radius:2px;flex-shrink:0}
[data-theme="dark"] .region-flag{border-color:rgba(255,255,255,.12)}

/* === Phase U: U3 theme toggle polish + U20 dashboard/admin header gap === */
/* When data-theme is unset (initial paint before JS), default to light state */
html:not([data-theme]) .theme-toggle .theme-toggle-knob{transform:translateX(0)}
.theme-toggle{outline:none}
.theme-toggle:focus-visible{box-shadow:0 0 0 3px rgba(196,42,43,.35)}

/* Dashboard topbar: even gap, vertical centering, prevent overflow */
body.dash-shell .topbar,
body.admin-shell .topbar{align-items:center!important;min-height:60px}
body.dash-shell .tb-act,
body.admin-shell .tb-act{align-items:center;gap:10px}
body.dash-shell .tb-ic,
body.admin-shell .tb-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  color:var(--mute);background:var(--surface);
  border:1px solid var(--line);position:relative;
}
body.dash-shell .tb-ic:hover,
body.admin-shell .tb-ic:hover{color:var(--red);background:var(--surface-2)}
body.dash-shell .tb-ic .pip,
body.admin-shell .tb-ic .pip{position:absolute;top:6px;right:6px;width:7px;height:7px;background:var(--red);border-radius:50%;border:2px solid var(--surface)}
body.dash-shell .theme-toggle,
body.admin-shell .theme-toggle{margin-right:2px}

/* ── U5 stat count-up + U6 domain card animation (Phase U / 2026-05-18) ── */
.hero-tiles .tile .v .cnum{display:inline-block;font-variant-numeric:tabular-nums;}
.hero-tiles .tile .v .csfx{font-size:.55em;margin-left:2px;opacity:.85;}

.dcard-anim{position:relative;overflow:hidden;}
.dcard-anim .dcard-globe{position:absolute;top:18px;right:18px;opacity:.65;pointer-events:none;}
.dcard-anim .name{position:relative;}
.dcard-anim .cur{display:inline-block;margin-left:2px;color:var(--red,#FF3144);font-weight:400;animation:dcardCaret 1s steps(2) infinite;}
@keyframes dcardCaret{50%{opacity:0;}}
.dcard-anim .chip-ok i.fa-spinner{margin-right:4px;}
.dcard-anim .chip-ok.ok i.fa-spinner{display:none;}
.dcard-anim .chip-ok.ok::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;margin-right:6px;color:#16a34a;}
.dcard-anim .chip-ok.ok{color:#16a34a;}
.dcard-anim .dcard-spark{position:absolute;inset:0;pointer-events:none;}
.dcard-anim .dcard-spark span{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--red,#FF3144);opacity:0;}
.dcard-anim .dcard-spark span:nth-child(1){top:30%;left:20%;animation:dcardSpark 3.6s ease-in-out infinite;animation-delay:0s;}
.dcard-anim .dcard-spark span:nth-child(2){top:60%;left:75%;animation:dcardSpark 3.6s ease-in-out infinite;animation-delay:.8s;background:#FFB37A;}
.dcard-anim .dcard-spark span:nth-child(3){top:80%;left:30%;animation:dcardSpark 3.6s ease-in-out infinite;animation-delay:1.6s;background:#7DD3C0;}
.dcard-anim .dcard-spark span:nth-child(4){top:20%;left:60%;animation:dcardSpark 3.6s ease-in-out infinite;animation-delay:2.4s;}
@keyframes dcardSpark{0%{opacity:0;transform:translateY(0) scale(.6);}30%{opacity:.9;}100%{opacity:0;transform:translateY(-24px) scale(1.2);}}
@media (prefers-reduced-motion:reduce){
  .dcard-anim .cur,.dcard-anim .dcard-spark span,.dcard-anim .dcard-globe circle{animation:none;}
}

/* ── U8 Fundamentals bento polish (Phase U / 2026-05-18) ── */
.bento .cell{position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;}
.bento .cell::after{content:"";position:absolute;inset:auto -40% -40% auto;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(255,49,68,.18) 0%,transparent 65%);opacity:0;transition:opacity .35s,transform .8s ease-out;pointer-events:none;z-index:0;}
.bento .cell:hover{transform:translateY(-4px);box-shadow:0 22px 50px -22px rgba(255,49,68,.35);border-color:rgba(255,49,68,.35);}
.bento .cell:hover::after{opacity:1;transform:scale(1.15);}
.bento .cell .ic{position:relative;z-index:1;transition:transform .35s cubic-bezier(.2,.8,.2,1),color .35s;}
.bento .cell:hover .ic{transform:rotate(-8deg) scale(1.08);color:var(--red,#FF3144);}
.bento .cell h4,.bento .cell p,.bento .cell a,.bento .cell .cell-svg{position:relative;z-index:1;}

/* Per-cell animated accent strokes */
.bento .b1 .cell-svg circle{transform-origin:100px 100px;animation:bentoSpin 24s linear infinite;opacity:.16;}
.bento .b1 .cell-svg circle:nth-child(2){animation-duration:32s;animation-direction:reverse;}
.bento .b1 .cell-svg circle:nth-child(3){animation-duration:18s;}
.bento .b1 .cell-svg circle:nth-child(4){animation-duration:12s;animation-direction:reverse;}
@keyframes bentoSpin{to{transform:rotate(360deg);}}

/* Inject animated dotted accent into every cell via pseudo */
.bento .cell::before{content:"";position:absolute;top:14px;right:14px;width:48px;height:48px;border-radius:50%;background:
  radial-gradient(circle 1.5px at 6px 6px, rgba(255,49,68,.45) 99%, transparent),
  radial-gradient(circle 1.5px at 18px 6px, rgba(255,49,68,.30) 99%, transparent),
  radial-gradient(circle 1.5px at 6px 18px, rgba(255,49,68,.30) 99%, transparent),
  radial-gradient(circle 1.5px at 18px 18px, rgba(255,49,68,.20) 99%, transparent);
  opacity:.5;transition:opacity .35s,transform .8s;}
.bento .cell:hover::before{opacity:.95;transform:translate(-6px,6px) rotate(45deg);}
.bento .b6::before,.bento .b6::after{display:none;} /* CTA cell already busy */

/* Subtle border shimmer on hover */
.bento .cell{background-clip:padding-box;}
@media (prefers-reduced-motion:reduce){
  .bento .cell,.bento .cell .ic,.bento .b1 .cell-svg circle{animation:none;transition:none;}
  .bento .cell:hover{transform:none;}
}

/* about.php — 6-up stat grid responsive collapse */
@media(max-width:1100px){.stats-grid-6{grid-template-columns:repeat(3,minmax(0,1fr))!important;}}
@media(max-width:640px){.stats-grid-6{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}

/* ====== HERO ART (replaces the 4 KPI tiles + orbit) ====== */
.hero-art{position:relative;min-height:520px;display:flex;align-items:center;justify-content:center;animation:sigFadeUp .8s ease both;overflow:clip}
.hero-art-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;z-index:0}
.hero-art-blob--red{width:340px;height:340px;background:radial-gradient(circle,#C42A2B 0%,transparent 70%);top:-40px;left:-20px;opacity:.35;animation:hsBlob 14s ease-in-out infinite}
.hero-art-blob--sage{width:300px;height:300px;background:radial-gradient(circle,#7DD3C0 0%,transparent 70%);bottom:-30px;right:-10px;opacity:.3;animation:hsBlob 18s ease-in-out -6s infinite}
[data-theme="dark"] .hero-art-blob--red{opacity:.4}
[data-theme="dark"] .hero-art-blob--sage{opacity:.22}
.hero-scene{position:relative;z-index:1;width:100%;max-width:560px;height:auto;display:block;animation:hsFloatScene 9s ease-in-out infinite}

/* sub-element animations on the SVG */
.hs-card{animation:hsFloatA 8s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
.hs-rack{animation:hsFloatB 9s ease-in-out -2s infinite;transform-origin:center;transform-box:fill-box}
.hs-globe{animation:hsFloatA 10s ease-in-out -4s infinite;transform-origin:center;transform-box:fill-box}
.hs-rings ellipse{transform-origin:280px 280px;animation:hsSpin 30s linear infinite}
.hs-rings ellipse:nth-child(2){animation-duration:42s;animation-direction:reverse}

.hs-spark{stroke-dasharray:800;stroke-dashoffset:800;animation:hsDraw 2.4s ease-out .35s forwards}
.hs-spark-dot{animation:hsPulseDot 1.8s ease-in-out infinite}
.hs-led{animation:hsLed 2.4s ease-in-out infinite}
.hs-led-b{animation-delay:.3s}.hs-led-c{animation-delay:.6s}.hs-led-d{animation-delay:.9s}.hs-led-e{animation-delay:1.2s}
.hs-ping{transform-origin:center;transform-box:fill-box;animation:hsPing 2.6s ease-out infinite}
.hs-ping-b{animation-delay:.7s}.hs-ping-c{animation-delay:1.3s}.hs-ping-d{animation-delay:1.9s}
.hs-flow{stroke-dashoffset:0;animation:hsFlow 1.4s linear infinite}

/* Floating decorative chips around the art */
.hero-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:0 12px 28px -10px rgba(15,23,42,.18),0 2px 6px rgba(15,23,42,.05);font-size:12.5px;color:var(--ink);font-weight:500;white-space:nowrap;backdrop-filter:saturate(140%) blur(4px)}
.hero-chip i{font-size:11.5px;color:var(--red)}
.hero-chip b{color:var(--ink);font-weight:700;font-feature-settings:'tnum'}
.hero-chip--uptime{top:8%;left:-8px;animation:hsChipFloat 6s ease-in-out infinite}
.hero-chip--mumbai{top:14%;right:-12px;animation:hsChipFloat 7s ease-in-out -2s infinite}
.hero-chip--tlds{bottom:18%;left:0;animation:hsChipFloat 6.5s ease-in-out -3s infinite}
.hero-chip--tlds i{color:#1F6E54}
.hero-chip--ssl{bottom:11%;right:-4px;animation:hsChipFloat 8s ease-in-out -1s infinite}
.hero-chip--ssl i{color:#3B3B82}
.hero-live{position:absolute;z-index:3;bottom:0;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--mute);box-shadow:0 4px 14px -4px rgba(15,23,42,.15)}
.hero-live-dot{width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:hsLivePulse 2s ease-in-out infinite}

/* Keyframes (namespaced hs*) */
@keyframes hsFloatScene{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes hsFloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes hsFloatB{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes hsBlob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(20px,-15px) scale(1.06)}66%{transform:translate(-15px,12px) scale(.96)}}
@keyframes hsSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes hsDraw{to{stroke-dashoffset:0}}
@keyframes hsPulseDot{0%,100%{r:4;opacity:1}50%{r:6;opacity:.65}}
@keyframes hsLed{0%,60%,100%{opacity:1}30%{opacity:.4}}
@keyframes hsPing{0%{transform:scale(1);opacity:.95}80%{transform:scale(2.8);opacity:0}100%{transform:scale(2.8);opacity:0}}
@keyframes hsFlow{to{stroke-dashoffset:-20}}
@keyframes hsChipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes hsLivePulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* Dark theme tweaks */
[data-theme="dark"] .hero-chip{background:rgba(20,24,36,.85);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .hero-live{background:rgba(20,24,36,.85);border-color:rgba(255,255,255,.08)}

/* Responsive */
@media (max-width:1100px){
  .hero-art{min-height:auto;padding:24px 0}
  .hero-scene{max-width:480px}
  .hero-chip{font-size:11.5px;padding:7px 12px}
}
@media (max-width:640px){
  .hero-scene{max-width:100%}
  .hero-chip--uptime{top:4%;left:0}
  .hero-chip--mumbai{top:4%;right:0}
  .hero-chip--tlds{bottom:8%;left:0}
  .hero-chip--ssl{bottom:8%;right:0}
  .hero-live{bottom:-8px}
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  /* Keep the gentle, small-amplitude motion that makes the hero feel live —
     the floating dashboard card, server rack, globe, the drifting "flying"
     chips, the data-flow line and the status pulses (LEDs, pings, live dot).
     Only suppress the larger vestibular motion: the spinning rings and the
     big blurred blob drift. */
  .hs-rings ellipse,.hero-art-blob--red,.hero-art-blob--sage{animation:none!important}
  .hs-spark{animation:none!important;stroke-dashoffset:0}
  /* kept alive: .hero-scene, .hs-card, .hs-rack, .hs-globe, .hero-chip,
     .hs-flow, .hs-led, .hs-ping, .hs-spark-dot, .hero-live-dot */
}

/* ====== DOMAIN BAND illustration (replaces "yourbusiness.in" dummy card) ====== */
.dcard.dcard-art{background:transparent;border:0;box-shadow:none;padding:0;max-width:480px;width:100%;margin:0 auto;position:relative}
.dcard-scene{width:100%;height:auto;display:block;animation:hsFloatScene 9s ease-in-out infinite}
.dc-glass{transform-origin:232px 208px;transform-box:fill-box;animation:dcGlassFloat 6s ease-in-out infinite}
.dc-check{stroke-dasharray:90;stroke-dashoffset:90;animation:hsDraw 1.4s ease-out .6s forwards}
.dc-globe{transform-origin:210px 190px;transform-box:fill-box;animation:hsSpin 60s linear infinite}
.dc-bubble{transform-origin:center;transform-box:fill-box;animation:dcBubbleFloat 7s ease-in-out infinite}
.dc-bubble-b{animation-delay:-1.5s}
.dc-bubble-c{animation-delay:-3s}
.dc-bubble-d{animation-delay:-4.5s}
.dc-connect path{stroke-dasharray:6 8;stroke-dashoffset:0;animation:dcDash 1.6s linear infinite}
@keyframes dcGlassFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-3deg)}}
@keyframes dcBubbleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes dcDash{to{stroke-dashoffset:-28}}
@media (prefers-reduced-motion: reduce){
  /* Keep the gentle floats (scene, magnifier glass, bubbles); suppress only the
     continuous globe rotation and the dashed connector flow. */
  .dc-globe,.dc-connect path{animation:none!important}
  .dc-check{animation:none!important;stroke-dashoffset:0}
  /* kept alive: .dcard-scene, .dc-glass, .dc-bubble */
}

/* Kill legacy 3px red bar across top of featured pricing card (style.css leftover) */
.pricing-card.featured::before,
.plan.featured::before{content:none!important;display:none!important;background:none!important;height:0!important}

/* Plan term badge: replaces ugly "(billed 3-yr)" default copy */
.plan-term{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--sage);color:var(--sage-d);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-family:'Inter',sans-serif;vertical-align:middle;margin-left:6px}
[data-theme="dark"] .plan-term{background:rgba(125,211,192,.18);color:#7DD3C0}

/* ─── Fundamentals bento card illustrations ─── */
.cell{position:relative;overflow:hidden}
.cell-art{position:absolute;right:-12px;bottom:-8px;width:55%;max-width:280px;height:auto;opacity:.95;pointer-events:none;z-index:0}
.cell .ic,.cell h4,.cell p,.cell .btn{position:relative;z-index:1}
.cell.b1 .cell-art--speed{right:-20px;bottom:-20px;width:62%;opacity:.55}
.cell.b1 .b-speed-bars rect{transform-origin:bottom;animation:bSpeedBar 2.4s ease-in-out infinite}
.cell.b1 .b-speed-bars rect:nth-child(1){animation-delay:0s}
.cell.b1 .b-speed-bars rect:nth-child(2){animation-delay:.15s}
.cell.b1 .b-speed-bars rect:nth-child(3){animation-delay:.3s}
.cell.b1 .b-speed-bars rect:nth-child(4){animation-delay:.45s}
.cell.b1 .b-speed-bars rect:nth-child(5){animation-delay:.6s}
.cell.b1 .b-speed-dot{animation:bSpeedDot 3.2s ease-in-out infinite}
@keyframes bSpeedBar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.7)}}
@keyframes bSpeedDot{0%,100%{transform:translateX(0);opacity:1}50%{transform:translateX(-6px);opacity:.6}}
.cell.b2 .cell-art--backup{opacity:.85}
.cell.b2 .b-restore{transform-origin:110px 30px;animation:bCloudFloat 3.6s ease-in-out infinite}
.cell.b2 .b-cloud-arrow{animation:bCloudArrow 2.4s ease-in-out infinite}
@keyframes bCloudFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes bCloudArrow{0%,100%{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(4px)}}
.cell.b3 .cell-art--cdn{opacity:.7}
.cell.b3 .b-globe{transform-origin:110px 80px;animation:bGlobeSpin 18s linear infinite}
.cell.b3 .b-pings circle{animation:bPing 2.4s ease-out infinite}
.cell.b3 .b-pings circle:nth-child(1){animation-delay:0s}
.cell.b3 .b-pings circle:nth-child(2){animation-delay:.6s}
.cell.b3 .b-pings circle:nth-child(3){animation-delay:1.2s}
.cell.b3 .b-pings circle:nth-child(4){animation-delay:1.8s}
@keyframes bGlobeSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes bPing{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.8);opacity:.3}}
.cell.b4 .cell-art--shield{opacity:.7}
.cell.b4 .b-shield-orbit{transform-origin:110px 80px;animation:bGlobeSpin 22s linear infinite}
.cell.b4 .b-shield-check{stroke-dasharray:80;stroke-dashoffset:0;animation:bCheckDraw 4s ease-in-out infinite}
@keyframes bCheckDraw{0%,100%{stroke-dashoffset:0}40%{stroke-dashoffset:80}60%{stroke-dashoffset:0}}
.cell.b5 .cell-art--term{right:-30px;bottom:-22px;width:65%;opacity:.92}
.cell.b5 .b-term-cursor{animation:bBlink 1.1s steps(2) infinite}
@keyframes bBlink{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .cell .cell-art *{animation:none!important}
}
@media (max-width:900px){
  .cell-art{width:40%;opacity:.5}
  .cell.b5 .cell-art--term{display:none}
}
/* (legacy ::before/::after sun/moon overrides removed — handled by new
   .theme-toggle rules at top of file using .th-sun/.th-moon spans.) */

/* Top utility bar — currency dropdown + theme toggle styling */
.utility-actions .currency-switcher{position:relative}
.utility-actions .currency-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.6);border:1px solid rgba(196,42,43,.25);
  color:var(--red-d,#7A1620);padding:3px 10px;border-radius:999px;
  font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:background .15s,border-color .15s,transform .15s;
}
.utility-actions .currency-btn:hover{background:#fff;border-color:rgba(196,42,43,.5);transform:translateY(-1px)}
.utility-actions .currency-btn .fa-chevron-down{font-size:9px;opacity:.7}
.utility-actions .currency-dropdown{
  position:absolute;top:calc(100% + 6px);right:0;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 32px -8px rgba(0,0,0,.18);
  display:none;flex-direction:column;min-width:120px;padding:6px;z-index:1500;
}
.utility-actions .currency-switcher.open .currency-dropdown,
.utility-actions .currency-switcher:focus-within .currency-dropdown{display:flex}
.utility-actions .currency-dropdown .currency-option{
  padding:8px 12px;border-radius:8px;font-size:13px;
  background:transparent;border:0;text-align:left;color:var(--ink);cursor:pointer;
  font-family:inherit;
}
.utility-actions .currency-dropdown .currency-option:hover{background:var(--surface-2)}
.utility-actions .currency-dropdown .currency-option.active{background:var(--red);color:#fff}
.utility-actions .theme-toggle{
  width:30px;height:30px;border-color:rgba(196,42,43,.25);background:rgba(255,255,255,.6);
}
.utility-actions .theme-toggle > i{font-size:13px}
.utility-actions .theme-toggle:hover{background:#fff}
[data-theme="dark"] .utility-actions .currency-btn{background:rgba(255,255,255,.05);color:#FFE1E4;border-color:rgba(255,225,228,.2)}
[data-theme="dark"] .utility-actions .currency-btn:hover{background:rgba(255,255,255,.1)}
[data-theme="dark"] .utility-actions .currency-dropdown{background:#1a1a1f;border-color:#2a2a30}
[data-theme="dark"] .utility-actions .currency-dropdown .currency-option{color:#e5e7eb}
[data-theme="dark"] .utility-actions .theme-toggle{background:rgba(255,255,255,.05);border-color:rgba(255,225,228,.2)}

/* =====================================================================
   MOBILE DRAWER — clean theme-aware rebuild (signature.css authoritative)
   Overrides legacy style.css drawer rules. Uses --surface/--ink tokens
   so the drawer matches the site theme on both light and dark surfaces.
   ===================================================================== */
@media (max-width: 991px){
  /* Body scroll-lock when drawer is open. Locks both html & body so the
     page underneath doesn't scroll when the user swipes inside the menu. */
  html:has(body.nav-open),
  body.nav-open{
    overflow: hidden !important;
    overscroll-behavior: contain;
  }

  /* === Drawer container: full viewport, theme-aware === */
  .navbar-nav#navbarMenu,
  ul.navbar-nav{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    /* CRITICAL: desktop .navbar-nav sets justify-content:center for the
       horizontal menu. In a column-flex drawer, that centers content
       vertically and pushes items above the viewport when content exceeds
       drawer height (account card ends up at offsetTop:-63). Force start. */
    display: block !important;
    flex-direction: initial !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--surface) !important;
    background-image: none !important;
    border-left: 0 !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    z-index: 2000 !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Hide the drawer's own vertical scrollbar so its 8px gutter doesn't
       expose the page (with its hero band) on the right edge. */
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE/Edge legacy */
    transform: translate3d(100%, 0, 0);
    transition: transform 0.34s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
  }
  .navbar-nav#navbarMenu::-webkit-scrollbar,
  ul.navbar-nav::-webkit-scrollbar{ width: 0 !important; height: 0 !important; display: none !important; }
  .navbar-nav#navbarMenu.open{ transform: translate3d(0,0,0) !important; }

  /* Page header sits behind drawer + overlay just below drawer */
  body.nav-open .navbar{
    z-index: 2010 !important;
    /* CRITICAL: backdrop-filter on .navbar creates a CSS containing block
       which traps any descendant with position:fixed (the drawer!) to the
       navbar's box instead of the viewport. When page is scrolled and menu
       is opened, the drawer ends up off-screen. Disable it while open. */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .nav-overlay{ z-index: 1999 !important; }

  /* === Universal text colour inside drawer === */
  #navbarMenu,
  #navbarMenu a,
  #navbarMenu .navbar-nav-link,
  #navbarMenu .nav-drawer-brand,
  #navbarMenu .nav-tile-label,
  #navbarMenu .nav-mobile-foot-meta a{
    color: var(--ink) !important;
  }
  #navbarMenu .nav-section-label,
  #navbarMenu .muted,
  #navbarMenu .nav-account-meta,
  #navbarMenu .nav-mobile-currency-label,
  #navbarMenu .nav-mobile-foot-meta{
    color: var(--mute) !important;
  }

  /* === Drawer header === */
  #navbarMenu .nav-drawer-header{
    background: var(--surface) !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 18px 20px !important;
    position: sticky; top: 0; z-index: 2;
  }
  #navbarMenu .nav-drawer-close{
    background: var(--surface-2) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    width: 36px; height: 36px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    position: relative;
  }
  #navbarMenu .nav-drawer-close:hover,
  #navbarMenu .nav-drawer-close:focus-visible{
    background: var(--surface-3) !important;
    outline: 2px solid var(--red);
    outline-offset: 2px;
  }

  /* === Account card === */
  #navbarMenu .nav-drawer-account{ padding: 14px 16px 6px !important; }
  #navbarMenu .nav-account-card{
    background: var(--surface-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    color: var(--ink) !important;
    padding: 14px !important;
  }
  #navbarMenu .nav-account-card *{ color: inherit !important; }
  #navbarMenu .nav-account-meta{ color: var(--mute) !important; }

  /* === Quick tiles grid === */
  #navbarMenu .nav-quickgrid{
    background: transparent !important;
    padding: 6px 16px 12px !important;
    gap: 10px !important;
  }
  #navbarMenu .nav-tile{
    background: var(--surface-2) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    border-radius: 14px !important;
    padding: 14px 8px !important;
  }
  #navbarMenu .nav-tile-label{
    color: var(--ink) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }
  #navbarMenu .nav-tile:active{
    background: var(--surface-3) !important;
    transform: scale(0.97);
  }

  /* === Browse / section labels === */
  #navbarMenu .nav-section-label{
    padding: 16px 20px 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* === Accordion rows === */
  #navbarMenu > li.has-dropdown{
    border-top: 1px solid var(--line) !important;
    background: transparent !important;
  }
  #navbarMenu > li.has-dropdown:last-of-type{
    border-bottom: 1px solid var(--line) !important;
  }
  #navbarMenu > li.has-dropdown > .navbar-nav-link,
  #navbarMenu > li.has-dropdown > a{
    background: transparent !important;
    color: var(--ink) !important;
    padding: 16px 20px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
  }
  #navbarMenu > li.has-dropdown.open > .navbar-nav-link,
  #navbarMenu > li.has-dropdown.open > a{
    background: var(--surface-2) !important;
    color: var(--ink) !important;
  }
  #navbarMenu > li.has-dropdown .dropdown-arrow{
    color: var(--mute) !important;
    transition: transform .2s ease;
  }
  #navbarMenu > li.has-dropdown.open .dropdown-arrow{
    transform: rotate(180deg);
    color: var(--ink) !important;
  }

  /* Dropdown panel content */
  #navbarMenu .mega-dropdown,
  #navbarMenu .dropdown-menu{
    background: var(--surface-2) !important;
    color: var(--ink) !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 4px 0 8px !important;
  }
  #navbarMenu .mega-dropdown a,
  #navbarMenu .dropdown-menu a,
  #navbarMenu .mega-link{
    color: var(--ink-2) !important;
    background: transparent !important;
    padding: 12px 24px !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
  }
  #navbarMenu .mega-link:active,
  #navbarMenu .dropdown-menu a:active{
    background: var(--surface-3) !important;
  }
  #navbarMenu .mega-link-icon{ color: var(--red) !important; }

  /* === Mobile footer (currency + theme + meta) === */
  #navbarMenu .nav-mobile-footer{
    background: var(--surface) !important;
    border-top: 1px solid var(--line) !important;
    padding: 14px 20px calc(20px + env(safe-area-inset-bottom)) !important;
  }
  #navbarMenu .nav-mobile-theme{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 0 14px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid var(--line) !important;
  }
  #navbarMenu .nav-mobile-theme-label{
    font-size: 13px; font-weight: 600;
    color: var(--ink) !important;
    display: flex; align-items: center; gap: 10px;
  }
  #navbarMenu .nav-mobile-theme .theme-toggle{
    width: 38px !important; height: 38px !important;
    border-radius: 12px !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
  }

  #navbarMenu .nav-mobile-currency{
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 4px 0 12px;
  }
  #navbarMenu .nav-mobile-currency .currency-segments{
    display: inline-flex; gap: 6px;
  }
  #navbarMenu .nav-mobile-currency .currency-segment{
    background: var(--surface-2) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    font-size: 12px; font-weight: 600;
  }
  #navbarMenu .nav-mobile-currency .currency-segment.active{
    background: var(--red) !important;
    border-color: var(--red) !important;
    color: #fff !important;
  }

  #navbarMenu .nav-mobile-footer .btn-outline{
    background: transparent !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    width: 100% !important;
  }
  #navbarMenu .nav-mobile-foot-meta{
    margin-top: 12px;
    text-align: center;
    font-size: 12px;
  }

  /* Hamburger toggle button stays above drawer while it's open
     (allows the user to tap an alternative close affordance) */
  .navbar-toggle{ z-index: 2001 !important; position: relative; }

  /* ===== Theme-aware mobile-header CART button =====
     style.css hardcodes white text/border on the cart button for dark
     navbars. In light theme the white-on-white renders invisible.
     Make it match the design tokens on whichever theme is active. */
  .navbar-actions .cart-btn{
    background: var(--surface-2) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
  }
  .navbar-actions .cart-btn:hover,
  .navbar-actions .cart-btn:focus-visible{
    background: var(--surface-3, var(--surface-2)) !important;
    border-color: var(--red) !important;
    color: var(--red) !important;
  }
  .navbar-actions .cart-btn .cart-badge{
    /* badge sits on the cart button, so its 2px ring should match the
       cart button's own bg, not a hardcoded dark navbar color. */
    border-color: var(--surface) !important;
  }
  [data-theme="dark"] .navbar-actions .cart-btn{
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: #fff !important;
  }
  [data-theme="dark"] .navbar-actions .cart-btn .cart-badge{
    border-color: #14161E !important;
  }

  /* ===== Page-content overflow guards (any page <=991px) ===== */
  html, body{ overflow-x: clip; }
  .dband{ padding: 32px 20px !important; }
  .dband > *{ min-width: 0 !important; max-width: 100% !important; }
  .dsearch{ max-width: 100% !important; min-width: 0 !important; flex-wrap: wrap; }
  .dsearch input{ min-width: 0 !important; width: 100%; flex: 1 1 140px; }
  .dsearch .btn{ flex: 0 0 auto; }
}
@media (max-width: 480px){
  .dband{ padding: 24px 14px !important; border-radius: 24px !important; }
  .dsearch{ border-radius: 18px !important; padding: 8px 8px 8px 14px !important; }
}

/* ===== Accessibility: tap targets for form-check (login/signup checkboxes) ===== */
.form-check{ min-height: 44px; }
.form-check input[type="checkbox"]{ width: 20px; height: 20px; }
.form-check label{ display: inline-flex; align-items: center; min-height: 44px; padding: 6px 4px; }

/* ============================================================
   Homepage — Live domain-deals strip (status bar)
   ============================================================ */
.promo-strip{gap:12px 12px}
.promo-strip .liv{color:var(--red);font-weight:700;text-transform:none;letter-spacing:0}
.promo-strip .liv .d{background:var(--red);box-shadow:0 0 8px var(--red)}
.promo-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;white-space:nowrap;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}
.promo-chip b{color:var(--red);font-weight:700}
.promo-chip:hover{transform:translateY(-2px);border-color:var(--red);background:var(--red-c);box-shadow:0 8px 20px -10px rgba(196,42,43,.45)}
.promo-chip:hover b{color:var(--red-d)}
.promo-all{display:inline-flex;align-items:center;gap:6px;color:var(--red);font-weight:700;font-size:12px;text-decoration:none;font-family:'JetBrains Mono',monospace}
.promo-all i{transition:transform .18s}
.promo-all:hover i{transform:translateX(3px)}

/* ============================================================
   Homepage — Hero promo banner (under the NEW pill)
   ============================================================ */
.hero-promo{position:relative;display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:7px 16px 7px 7px;border-radius:999px;
  background:linear-gradient(100deg,var(--red),var(--red-2));color:#fff;text-decoration:none;font-size:13.5px;font-weight:500;line-height:1.25;
  box-shadow:0 12px 28px -12px rgba(196,42,43,.6);overflow:hidden;max-width:100%}
.hero-promo-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.22);font-weight:800;font-size:11px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;flex:0 0 auto}
.hero-promo-text{min-width:0}
.hero-promo-text b{font-weight:800}
.hero-promo-go{flex:0 0 auto;transition:transform .2s}
.hero-promo:hover .hero-promo-go{transform:translateX(4px)}
.hero-promo::after{content:"";position:absolute;top:0;left:-60%;width:38%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);animation:heroPromoShine 5.5s ease-in-out infinite;pointer-events:none}
@keyframes heroPromoShine{0%{left:-60%}55%{left:135%}100%{left:135%}}
@media(max-width:520px){.hero-promo{font-size:12.5px;gap:8px;padding-right:14px}}

/* ============================================================
   Homepage — Interactive expanding panels ("Why EpicHost")
   One panel expanded by default; hover/focus expands that panel
   and shrinks the rest. Pure-CSS, keyboard-accessible.
   ============================================================ */
.expand{display:flex;gap:14px;align-items:stretch;min-height:440px}
.exp-panel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:24px;border:1px solid var(--line);
  text-decoration:none;color:var(--ink);background:var(--surface);
  display:flex;flex-direction:column;align-items:flex-start;padding:22px;
  transition:flex-grow .55s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;will-change:flex-grow}
.exp-panel.p1{background:linear-gradient(165deg,var(--peach),var(--surface) 78%)}
.exp-panel.p2{background:linear-gradient(165deg,var(--sky),var(--surface) 78%)}
.exp-panel.p3{background:linear-gradient(165deg,var(--sage),var(--surface) 78%)}
.exp-panel.p4{background:linear-gradient(165deg,var(--lav),var(--surface) 78%)}
.exp-panel.p5{background:linear-gradient(165deg,var(--red-c),var(--surface) 78%)}
/* default-expanded panel, only while the row is idle */
.expand:not(:hover):not(:focus-within) .exp-panel.is-active{flex-grow:4.4}
/* hovered / keyboard-focused panel expands */
.exp-panel:hover,.exp-panel:focus-within{flex-grow:4.4;outline:none}
/* siblings shrink while the row is being interacted with */
.expand:hover .exp-panel:not(:hover),
.expand:focus-within .exp-panel:not(:focus-within){flex-grow:.7}
/* lift the active / hovered panel */
.exp-panel:hover,.exp-panel:focus-within,
.expand:not(:hover):not(:focus-within) .exp-panel.is-active{border-color:transparent;box-shadow:0 26px 60px -26px rgba(15,23,42,.42)}
.exp-panel:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.exp-num{position:absolute;top:18px;right:20px;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--ink);opacity:.3}
.exp-ic{width:46px;height:46px;border-radius:14px 7px 14px 7px;display:grid;place-items:center;font-size:19px;color:var(--red);background:rgba(255,255,255,.6);box-shadow:var(--shadow-sm);flex:0 0 auto}
[data-theme="dark"] .exp-ic{background:rgba(255,255,255,.1)}
/* collapsed vertical label, anchored to the bottom */
.exp-label{writing-mode:vertical-rl;transform:rotate(180deg);margin-top:auto;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;transition:opacity .3s}
/* expanded body, revealed when the panel is active */
.exp-body{position:absolute;left:22px;right:22px;bottom:22px;display:flex;flex-direction:column;gap:10px;max-width:360px;
  opacity:0;transform:translateY(10px);transition:opacity .4s .12s,transform .45s .12s;pointer-events:none}
.exp-title{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.exp-desc{font-size:14px;line-height:1.55;color:var(--ink-2)}
.exp-cta{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;color:var(--red)}
.exp-cta i{transition:transform .2s}
/* reveal body + hide collapsed label on the active/hovered panel */
.expand:not(:hover):not(:focus-within) .exp-panel.is-active .exp-body,
.exp-panel:hover .exp-body,.exp-panel:focus-within .exp-body{opacity:1;transform:none;pointer-events:auto}
.expand:not(:hover):not(:focus-within) .exp-panel.is-active .exp-label,
.exp-panel:hover .exp-label,.exp-panel:focus-within .exp-label{opacity:0}
.expand:not(:hover):not(:focus-within) .exp-panel.is-active .exp-cta i,
.exp-panel:hover .exp-cta i,.exp-panel:focus-within .exp-cta i{transform:translateX(4px)}

/* responsive: stack into readable cards, no collapse */
@media(max-width:860px){
  .expand{flex-direction:column;min-height:0}
  .exp-panel,.expand:hover .exp-panel:not(:hover),.expand:focus-within .exp-panel:not(:focus-within),
  .expand:not(:hover):not(:focus-within) .exp-panel.is-active{flex:0 0 auto}
  .exp-panel{min-height:150px;padding:22px}
  .exp-label{display:none}
  .exp-body{position:static;left:auto;right:auto;bottom:auto;opacity:1;transform:none;pointer-events:auto;max-width:none;margin-top:14px}
  .exp-num{opacity:.4}
}
@media(prefers-reduced-motion:reduce){
  .exp-panel,.exp-body,.exp-cta i,.promo-chip,.hero-promo-go{transition:none}
  .hero-promo::after{display:none}
}

/* ============================================================
   domains.php — search results: themed surfaces, exact-match
   pinning, congrats banner, promo pricing, filters, load-more.
   Loads after style.css so these win in both light & dark.
   ============================================================ */
.domain-results{max-width:760px}

/* Result rows: use theme surfaces (style.css uses dark-glass only) */
.domain-result-item{
  background:var(--surface)!important;border:1px solid var(--line)!important;
  backdrop-filter:none!important;color:var(--ink)}
.domain-result-item:hover{
  background:var(--surface-2,var(--surface))!important;
  border-color:color-mix(in srgb,var(--red) 30%,transparent)!important}
.domain-result-name{color:var(--ink)!important;display:flex;align-items:center;flex-wrap:wrap;gap:2px}
/* Item 8: make the extension clearly legible in both themes */
.domain-result-name .tld{color:var(--red)!important;font-weight:700}

/* Item 9: pinned exact match gets a clear accent */
.domain-result-item.is-exact{
  border-color:color-mix(in srgb,var(--red) 48%,transparent)!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--red) 32%,transparent),0 14px 30px -18px rgba(196,42,43,.5)!important;
  background:color-mix(in srgb,var(--red) 5%,var(--surface))!important}
.domain-exact-tag{
  display:inline-flex;align-items:center;gap:5px;margin-left:10px;padding:2px 9px;border-radius:999px;
  background:var(--red-c);color:var(--red);font-size:10.5px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase}
.domain-exact-tag i{font-size:9px}

/* Item 10: congratulation / status banner */
.domain-congrats{
  display:flex;align-items:flex-start;gap:12px;text-align:left;padding:15px 18px;margin:4px 0 16px;
  border-radius:16px;font-size:14.5px;line-height:1.5;
  background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.domain-congrats i{font-size:19px;margin-top:1px;flex:0 0 auto;color:var(--mute)}
.domain-congrats strong{font-weight:800}
.domain-congrats-name{font-weight:700;color:var(--red)}
.domain-congrats.is-available{
  background:color-mix(in srgb,#16A34A 12%,var(--surface));
  border-color:color-mix(in srgb,#16A34A 32%,transparent)}
.domain-congrats.is-available i{color:#16A34A}
.domain-congrats.is-available .domain-congrats-name{color:#16A34A}
.domain-congrats.is-taken{
  background:var(--red-c);border-color:color-mix(in srgb,var(--red) 28%,transparent)}
.domain-congrats.is-taken i{color:var(--red)}
[data-theme="dark"] .domain-congrats.is-available,
[data-theme="dark"] .domain-congrats.is-available .domain-congrats-name,
[data-theme="dark"] .domain-congrats.is-available i{color:#4ADE80}
[data-theme="dark"] .domain-congrats.is-available .domain-congrats-name{color:#4ADE80}

/* Premium domains: registry-priced, sought-after names (gold treatment) */
.domain-premium-tag{
  display:inline-flex;align-items:center;gap:5px;margin-left:10px;padding:2px 9px;border-radius:999px;
  background:color-mix(in srgb,#F59E0B 18%,transparent);color:#B45309;
  font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.domain-premium-tag i{font-size:9px}
[data-theme="dark"] .domain-premium-tag{color:#FBBF24;background:color-mix(in srgb,#F59E0B 24%,transparent)}
.domain-congrats.is-premium{
  background:color-mix(in srgb,#F59E0B 12%,var(--surface));
  border-color:color-mix(in srgb,#F59E0B 36%,transparent)}
.domain-congrats.is-premium i{color:#D97706}
.domain-congrats.is-premium .domain-congrats-name{color:#B45309}
[data-theme="dark"] .domain-congrats.is-premium i,
[data-theme="dark"] .domain-congrats.is-premium .domain-congrats-name{color:#FBBF24}
.domain-result-item.is-premium{
  border-color:color-mix(in srgb,#F59E0B 38%,transparent);
  background:color-mix(in srgb,#F59E0B 6%,var(--surface))}
.domain-result-price.is-premium .domain-price-now{color:#B45309}
[data-theme="dark"] .domain-result-price.is-premium .domain-price-now{color:#FBBF24}

/* Item 10: filter bar (exact-only + max-price slider) */
.domain-filters{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 20px;
  padding:12px 16px;margin-bottom:16px;border-radius:14px;
  background:var(--surface-2,var(--surface));border:1px solid var(--line)}
.domain-filter-check{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);
  cursor:pointer;user-select:none;font-weight:600}
.domain-filter-check input{width:16px;height:16px;accent-color:var(--red);cursor:pointer}
.domain-filter-price{display:flex;align-items:center;gap:12px;flex:1;min-width:220px;justify-content:flex-end}
.domain-filter-price-label{font-size:13px;color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.domain-filter-price input[type=range]{flex:1;max-width:220px;accent-color:var(--red);cursor:pointer}
.domain-filter-price input[type=range]:disabled{opacity:.45;cursor:not-allowed}

.domain-result-list{display:flex;flex-direction:column;gap:8px}

/* Item 10: promo pricing display (was / now / -X%) */
.domain-result-price{display:inline-flex;align-items:baseline;gap:8px;margin-right:6px;white-space:nowrap}
.domain-price-was{color:var(--mute);font-size:13px;text-decoration:line-through;opacity:.85}
.domain-price-now{color:var(--ink);font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}
.domain-price-per{color:var(--mute);font-weight:500;font-size:12px;margin-left:1px}
.domain-price-off{
  display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;
  background:#16A34A;color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em}

/* Item 10: load-more */
.domain-loadmore-wrap{display:flex;justify-content:center;margin-top:14px}
.domain-loadmore{
  display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
.domain-loadmore:hover{border-color:var(--red);color:var(--red);transform:translateY(-1px)}
.domain-empty{text-align:center;color:var(--mute);padding:24px}

@media(max-width:560px){
  .domain-result-item{flex-direction:column;align-items:flex-start;gap:12px}
  .domain-result-status{width:100%;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .domain-filters{flex-direction:column;align-items:stretch}
  .domain-filter-price{justify-content:space-between}
}
@media(prefers-reduced-motion:reduce){
  .domain-loadmore{transition:none}
}