/* INFOWEBS — site styles
   Dark and light themes share one set of tokens. Theme = system setting,
   unless the visitor picks one with the header toggle (html[data-theme]). */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/public-sans-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- tokens: dark (default) ---------- */
:root {
  color-scheme: dark;
  --bg-0: #040A15;
  --bg-1: #07111F;
  --bg-2: #0A1729;
  --surface: #0E1D33;
  --surface-2: #132641;
  --card-a: #0E1D33;
  --card-b: #0A1729;
  --card-soft: rgba(19, 38, 65, 0.45);
  --line: rgba(148, 178, 214, 0.13);
  --line-strong: rgba(148, 178, 214, 0.26);
  --grid-line: rgba(148, 178, 214, 0.07);
  --text: #E8EFF8;
  --text-2: #B4C3D6;
  --text-3: #7F93AE;
  --accent: #2DD4C8;
  --accent-2: #14B8AC;
  --accent-text: #2DD4C8;
  --accent-hover: #7CEFE6;
  --accent-soft: rgba(45, 212, 200, 0.08);
  --accent-line: rgba(45, 212, 200, 0.32);
  --accent-glow: rgba(45, 212, 200, 0.35);
  --glow-a: rgba(45, 212, 200, 0.16);
  --glow-b: rgba(56, 120, 255, 0.16);
  --on-accent: #03151A;
  --h-grad-a: #FFFFFF;
  --h-grad-b: #A9C1DD;
  --header-bg: rgba(5, 12, 24, 0.9);
  --node-fill: #0D1B30;
  --node-stroke: rgba(148, 178, 214, 0.34);
  --core-fill: #0B3D45;
  --core-text: #FFFFFF;
  --core-sub: #8FE3DC;
  --input-bg: rgba(4, 10, 21, 0.6);
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.75);
  --shadow-panel: 0 40px 100px -30px rgba(0, 0, 0, 0.9);
  --spot: rgba(45, 212, 200, 0.12);
  --map-filter: invert(0.9) hue-rotate(180deg) saturate(0.6) brightness(0.95);
  --fx-dot: 120, 230, 222;
  --fx-line: 90, 170, 210;
  --ok: #5EE6A8;
  --warn: #F5C451;
  --danger: #FF8A80;
  --wa: #13A456;

  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.5625rem;
  --fs-xl: clamp(1.9rem, 1.2rem + 2vw, 2.75rem);
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(72px, 10vw, 136px);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --header-h: 72px;
}

/* ---------- tokens: light ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg-0: #F3F6FA; --bg-1: #FFFFFF; --bg-2: #F6F8FB; --surface: #FFFFFF; --surface-2: #EEF3F8;
    --card-a: #FFFFFF; --card-b: #F8FAFD; --card-soft: #F7FAFC;
    --line: rgba(15, 40, 80, 0.10); --line-strong: rgba(15, 40, 80, 0.18); --grid-line: rgba(15, 40, 80, 0.06);
    --text: #0A1628; --text-2: #3D4F66; --text-3: #66788F;
    --accent: #12B5AA; --accent-2: #0B9A90; --accent-text: #08776F; --accent-hover: #065C56;
    --accent-soft: rgba(18, 181, 170, 0.08); --accent-line: rgba(11, 154, 144, 0.32); --accent-glow: rgba(18, 181, 170, 0.28);
    --glow-a: rgba(18, 181, 170, 0.14); --glow-b: rgba(56, 120, 255, 0.10);
    --on-accent: #FFFFFF; --h-grad-a: #0A1628; --h-grad-b: #2E5078;
    --header-bg: rgba(255, 255, 255, 0.92);
    --node-fill: #FFFFFF; --node-stroke: rgba(15, 40, 80, 0.25); --core-fill: #E3FAF7; --core-text: #064E4A; --core-sub: #0B7C74;
    --input-bg: #FFFFFF;
    --shadow: 0 24px 50px -28px rgba(15, 40, 80, 0.35); --shadow-panel: 0 40px 80px -40px rgba(15, 40, 80, 0.4);
    --spot: rgba(18, 181, 170, 0.09); --map-filter: none;
    --fx-dot: 11, 154, 144; --fx-line: 40, 90, 140;
    --ok: #0A8A55; --warn: #8A5A00; --danger: #C0362C;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg-0: #F3F6FA; --bg-1: #FFFFFF; --bg-2: #F6F8FB; --surface: #FFFFFF; --surface-2: #EEF3F8;
  --card-a: #FFFFFF; --card-b: #F8FAFD; --card-soft: #F7FAFC;
  --line: rgba(15, 40, 80, 0.10); --line-strong: rgba(15, 40, 80, 0.18); --grid-line: rgba(15, 40, 80, 0.06);
  --text: #0A1628; --text-2: #3D4F66; --text-3: #66788F;
  --accent: #12B5AA; --accent-2: #0B9A90; --accent-text: #08776F; --accent-hover: #065C56;
  --accent-soft: rgba(18, 181, 170, 0.08); --accent-line: rgba(11, 154, 144, 0.32); --accent-glow: rgba(18, 181, 170, 0.28);
  --glow-a: rgba(18, 181, 170, 0.14); --glow-b: rgba(56, 120, 255, 0.10);
  --on-accent: #FFFFFF; --h-grad-a: #0A1628; --h-grad-b: #2E5078;
  --header-bg: rgba(255, 255, 255, 0.92);
  --node-fill: #FFFFFF; --node-stroke: rgba(15, 40, 80, 0.25); --core-fill: #E3FAF7; --core-text: #064E4A; --core-sub: #0B7C74;
  --input-bg: #FFFFFF;
  --shadow: 0 24px 50px -28px rgba(15, 40, 80, 0.35); --shadow-panel: 0 40px 80px -40px rgba(15, 40, 80, 0.4);
  --spot: rgba(18, 181, 170, 0.09); --map-filter: none;
  --fx-dot: 11, 154, 144; --fx-line: 40, 90, 140;
  --ok: #0A8A55; --warn: #8A5A00; --danger: #C0362C;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); background: var(--bg-1); }
body {
  margin: 0; font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.65;
  color: var(--text-2); background: var(--bg-1);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  transition: background-color .3s ease, color .3s ease;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent-text); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
h1, h2, h3, h4 {
  font-family: var(--font-display); font-stretch: 108%; font-weight: 650; line-height: 1.1;
  letter-spacing: -0.015em; color: var(--text); margin: 0 0 0.5em; text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.2rem); letter-spacing: -0.025em; }
h2 { font-size: var(--fs-xl); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-md); line-height: 1.25; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul { margin: 0; padding: 0; }
strong { color: var(--text); }
::selection { background: var(--accent-glow); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600; }
.skip-link:focus { top: 12px; color: var(--on-accent); }
.placeholder { color: var(--warn); background: rgba(245, 196, 81, 0.12); padding: 0 4px; border-radius: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { position: relative; padding: var(--section) 0; background: var(--bg-1); }
.section-grey { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-navy {
  background: radial-gradient(900px 400px at 85% 0%, var(--glow-a), transparent 70%), radial-gradient(700px 400px at 0% 100%, var(--glow-b), transparent 70%), var(--bg-0);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden;
}
.lede { font-size: var(--fs-md); line-height: 1.6; color: var(--text-2); max-width: 62ch; }
.measure { max-width: 66ch; }
.section-head { max-width: 780px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head p { color: var(--text-2); max-width: 62ch; font-size: 1.125rem; }

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 13px 24px; font: 600 1rem/1.2 var(--font-body);
  border-radius: 999px; border: 1px solid transparent; text-decoration: none; cursor: pointer; overflow: hidden;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.btn-sm { min-height: 42px; padding: 9px 18px; font-size: 0.9375rem; }
.btn-primary, .btn-accent {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, white), var(--accent-2));
  color: var(--on-accent);
  box-shadow: 0 0 0 1px var(--accent-line), 0 10px 30px -8px var(--accent-glow);
}
.btn-primary::after, .btn-accent::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.btn-primary:hover::after, .btn-accent:hover::after { left: 120%; }
.btn-primary:hover, .btn-accent:hover { color: var(--on-accent); box-shadow: 0 0 0 1px var(--accent), 0 14px 40px -6px var(--accent-glow); transform: translateY(-2px); }
.btn-secondary, .btn-ghost-light { background: var(--accent-soft); color: var(--text); border-color: var(--line-strong); }
.btn-secondary:hover, .btn-ghost-light:hover { color: var(--text); border-color: var(--accent-line); transform: translateY(-2px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn[disabled]::after { display: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: #17B85F; color: #fff; transform: translateY(-2px); }
.btn-wa svg { flex-shrink: 0; }
.wa-row { display: flex; flex-wrap: wrap; gap: 10px; }
.text-link { font-weight: 600; color: var(--accent-text); text-decoration: none; border-bottom: 1px solid var(--accent-line); padding-bottom: 2px; }
.text-link:hover { color: var(--accent-hover); border-color: currentColor; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); border-bottom: 1px solid var(--line); transition: background-color .3s ease; }
.header-inner { display: flex; align-items: center; height: var(--header-h); gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); flex-shrink: 0; margin-right: auto; }
.brand:hover { color: var(--text); }
.brandmark { width: 34px; height: 34px; filter: drop-shadow(0 0 10px var(--accent-glow)); }
.brandmark rect { fill: #10284A; stroke: var(--accent-line); stroke-width: 1; }
.brand-name { font: 700 1.0625rem/1 var(--font-display); font-stretch: 118%; letter-spacing: 0.02em; white-space: nowrap; }
.brand-name span { font-weight: 450; color: var(--accent-text); }
.header-tools { display: flex; align-items: center; gap: 10px; }
.theme-toggle {
  display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line-strong); background: var(--accent-soft); color: var(--text); cursor: pointer;
  transition: border-color .2s ease, transform .4s ease;
}
.theme-toggle:hover { border-color: var(--accent); transform: rotate(25deg); }
.theme-toggle .i-sun { display: none; }
.theme-toggle .i-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}

.site-nav { display: flex; align-items: center; gap: 20px; }
.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-list a { display: block; padding: 8px 14px; font-size: 0.9688rem; font-weight: 500; color: var(--text-2); text-decoration: none; border-radius: 999px; }
.nav-list a:hover { color: var(--text); background: var(--accent-soft); }
.nav-list a[aria-current="page"] { color: var(--text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.has-sub { position: relative; display: flex; align-items: center; }
.has-sub > a { padding-right: 6px; }
.sub-toggle { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--text-3); cursor: pointer; border-radius: 6px; }
.sub-toggle:hover { color: var(--text); }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.sub-list { position: absolute; top: calc(100% + 12px); left: 0; min-width: 300px; list-style: none; padding: 8px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); display: none; }
.has-sub.open .sub-list { display: block; animation: drop .2s ease-out; }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.sub-list a { padding: 11px 14px; border-radius: var(--radius-sm); }
.sub-list a[aria-current="page"] { box-shadow: none; }

.nav-toggle { display: none; align-items: center; gap: 10px; min-height: 42px; padding: 8px 12px; border: 1px solid var(--line-strong); background: var(--accent-soft); border-radius: var(--radius-sm); font: 600 0.9375rem var(--font-body); color: var(--text); cursor: pointer; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: transform .2s ease; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; flex-direction: column; align-items: stretch; gap: 20px; padding: 20px var(--gutter) 32px; background: var(--bg-1); overflow-y: auto; display: none; }
  .site-nav.open { display: flex; animation: drop .2s ease-out; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid var(--line); }
  .nav-list a { padding: 15px 4px; font-size: 1.0625rem; border-radius: 0; }
  .nav-list a:hover { background: none; }
  .nav-list a[aria-current="page"] { background: none; box-shadow: inset 3px 0 0 var(--accent); padding-left: 14px; }
  .has-sub { flex-wrap: wrap; }
  .has-sub > a { flex: 1; }
  .sub-toggle { width: 44px; height: 44px; }
  .sub-list { position: static; width: 100%; min-width: 0; border: 0; box-shadow: none; padding: 0 0 10px 12px; background: none; }
  .sub-list a { padding: 10px 4px; font-size: 1rem; color: var(--text-3); }
  .nav-cta { width: 100%; }
  body.nav-open { overflow: hidden; }
}

/* ---------- FX canvas (network particles) ---------- */
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- hero (home) ---------- */
.hero { position: relative; overflow: hidden; background: var(--bg-0); border-bottom: 1px solid var(--line); }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 520px at 78% 38%, var(--glow-a), transparent 70%), radial-gradient(800px 600px at 10% 0%, var(--glow-b), transparent 70%);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 80%);
}
.hero::after {
  /* light that follows the cursor */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(500px circle at var(--gx, 70%) var(--gy, 30%), var(--glow-a), transparent 60%);
  transition: background .1s linear;
}
.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 64px); align-items: center;
  padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(48px, 6vw, 80px);
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; padding: 7px 14px 7px 10px;
  border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-soft);
  font: 600 0.9063rem/1 var(--font-body); color: var(--accent-text);
}
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); flex-shrink: 0; }
.hero h1, .page-hero h1 {
  background: linear-gradient(100deg, var(--h-grad-a) 0%, var(--h-grad-a) 40%, var(--accent) 50%, var(--h-grad-a) 60%, var(--h-grad-b) 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero h1 { font-size: clamp(2.5rem, 1.3rem + 3.4vw, 4.1rem); line-height: 1.04; margin-bottom: 26px; max-width: 16ch; }
.hero .lede { margin-bottom: 36px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 34px; list-style: none; color: var(--text-3); font-size: 0.9375rem; }
.hero-points li { display: flex; align-items: center; gap: 8px; }
.hero-points li::before { content: ""; width: 14px; height: 8px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg) translateY(-2px); }

.hero-panel {
  position: relative; margin: 0; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--card-a), var(--card-b));
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-panel), 0 0 120px -40px var(--accent-glow);
  overflow: hidden;
}
.hero-panel::before {
  /* rotating light around the panel edge */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, var(--accent) 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.panel-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 0.875rem; color: var(--text-3); }
.panel-bar strong { font-weight: 600; }
.panel-status { display: inline-flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 600; }
.panel-status .live-dot { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.panel-body { padding: 18px 18px 12px; }
.hero-panel figcaption { padding: 0 20px 18px; font-size: 0.875rem; color: var(--text-3); }

/* topology diagram */
.topo { width: 100%; height: auto; overflow: visible; }
.topo .link { fill: none; stroke: var(--node-stroke); stroke-width: 1.5; }
.topo .link-strong { stroke: var(--accent); stroke-width: 2; }
.topo .link-cloud { stroke-dasharray: 5 5; stroke: var(--accent-line); }
.topo .node rect { fill: var(--node-fill); stroke: var(--node-stroke); stroke-width: 1.2; }
.topo .node text { font: 600 12.5px var(--font-body); fill: var(--text); }
.topo .node .sub { font-weight: 400; font-size: 10.5px; fill: var(--text-3); }
.topo .node-accent rect { stroke: var(--accent); }
.topo .node-core rect { fill: var(--core-fill); stroke: var(--accent); stroke-width: 1.5; }
.topo .node-core text { fill: var(--core-text); }
.topo .node-core .sub { fill: var(--core-sub); }
.topo .zone { fill: var(--accent-soft); stroke: var(--node-stroke); stroke-dasharray: 3 4; }
.topo .zone-label { font: 500 10.5px var(--font-body); fill: var(--text-3); }
.topo .pulse { fill: var(--accent); }

/* capability strip */
.cap-strip { position: relative; z-index: 1; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--bg-2) 80%, transparent); margin-bottom: clamp(40px, 5vw, 64px); overflow: hidden; }
.cap-strip li + li { border-left: 1px solid var(--line); }
.cap-strip a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 18px; text-decoration: none; color: var(--text); font-weight: 600; font-size: 0.9375rem; line-height: 1.3; transition: background-color .2s ease; }
.cap-strip a:hover { background: var(--accent-soft); color: var(--text); }
.cap-strip svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--accent-text); transition: transform .3s ease; }
.cap-strip a:hover svg { transform: scale(1.18) rotate(-6deg); }

/* technology marquee */
.marquee { position: relative; display: flex; overflow: hidden; gap: 0; padding: 20px 0; background: var(--bg-1); border-bottom: 1px solid var(--line); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; flex-shrink: 0; gap: 14px; padding-right: 14px; list-style: none; animation: marquee 50s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track li { flex-shrink: 0; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card-soft); color: var(--text-2); font-size: 0.9375rem; font-weight: 500; white-space: nowrap; }
.marquee-track li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); vertical-align: middle; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ---------- page hero (inner pages) ---------- */
.page-hero {
  position: relative; overflow: hidden;
  background: radial-gradient(700px 400px at 85% 30%, var(--glow-a), transparent 70%), radial-gradient(700px 500px at 0% 0%, var(--glow-b), transparent 70%), var(--bg-0);
  border-bottom: 1px solid var(--line);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 20%, transparent 75%);
}
.page-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(48px, 7vw, 96px); }
.page-hero-inner.single { grid-template-columns: minmax(0, 1fr); }
.page-hero h1 { font-size: clamp(2.2rem, 1.3rem + 3vw, 3.6rem); max-width: 20ch; }
.page-hero .lede { margin-bottom: 30px; }
.breadcrumb { margin-bottom: 22px; font-size: var(--fs-sm); color: var(--text-3); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.breadcrumb a { color: var(--text-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-text); }
.schematic-wrap { position: relative; padding: 22px; border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--card-a), var(--card-b)); border: 1px solid var(--line-strong); box-shadow: var(--shadow-panel), 0 0 100px -40px var(--accent-glow); }
.schematic { width: 100%; height: auto; }
.schematic .ln { fill: none; stroke: var(--node-stroke); stroke-width: 1.6; stroke-dasharray: 5 6; animation: flow 1.4s linear infinite; }
.schematic .ln-strong { stroke: var(--accent); stroke-width: 2; }
.schematic .box { fill: var(--node-fill); stroke: var(--node-stroke); stroke-width: 1.2; }
.schematic .box-dark { fill: var(--core-fill); stroke: var(--accent); stroke-width: 1.5; }
.schematic .box-accent { fill: var(--node-fill); stroke: var(--accent); stroke-width: 1.5; }
.schematic text { font: 600 12px var(--font-body); fill: var(--text); }
.schematic .t-light { fill: var(--core-text); }
.schematic .t-sub { font-weight: 400; font-size: 10.5px; fill: var(--text-3); }
.schematic .t-sub-light { font-weight: 400; font-size: 10.5px; fill: var(--core-sub); }
.schematic .dot, .schematic .led { fill: var(--accent); animation: blink 2s ease-in-out infinite; }
@keyframes flow { to { stroke-dashoffset: -22; } }

/* ---------- animated service icons (orb) ---------- */
.orb {
  position: relative; display: grid; place-items: center; flex-shrink: 0;
  width: 84px; height: 84px; margin-bottom: 24px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft) 0 60%, transparent 61%);
  color: var(--accent-text);
}
.orb::before {
  /* spinning arc */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 55%, var(--accent) 85%, transparent 100%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  animation: spin 3.5s linear infinite;
}
.orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--accent-line); }
.orb .ai { width: 52px; height: 52px; position: relative; z-index: 1; }
.ai { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ai .flow { stroke-dasharray: 3 5; animation: flow 1.1s linear infinite; }
.ai .ring { transform-box: fill-box; transform-origin: center; stroke-width: 1.6; opacity: 0; animation: ring 2.6s ease-out infinite; }
.ai .ring.r2 { animation-delay: 1.3s; }
.ai .led { fill: var(--accent); stroke: none; animation: blink 1.8s ease-in-out infinite; }
.ai .led.d2 { animation-delay: .6s; }
.ai .led.d3 { animation-delay: 1.2s; }
.ai .bar { stroke-dasharray: 19; animation: bar 2.4s ease-in-out infinite; }
.ai .bar.d2 { animation-delay: .4s; }
.ai .bar.d3 { animation-delay: .8s; }
.ai .packet { fill: var(--accent); stroke: none; }
.ai .float { animation: float 3.2s ease-in-out infinite; }
.ai .up { animation: up 1.8s ease-in-out infinite; }
.ai .down { animation: down 1.8s ease-in-out infinite; animation-delay: .9s; }
.ai .pan { transform-box: view-box; transform-origin: 12px 40px; animation: pan 4s ease-in-out infinite alternate; }
.ai .cone { fill: var(--accent); stroke: none; opacity: .22; animation: blink 2s ease-in-out infinite; }
.ai .rec { fill: #FF5C5C; }
.ai .scan { stroke: var(--accent); stroke-width: 1.6; opacity: .7; animation: scan 2.6s ease-in-out infinite; }
.ai .draw { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw 2.6s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ring { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes bar { 0% { stroke-dashoffset: 19; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -19; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes up { 0% { transform: translateY(4px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-6px); opacity: 0; } }
@keyframes down { 0% { transform: translateY(-6px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(4px); opacity: 0; } }
@keyframes pan { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes scan { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .8; } 85% { opacity: .8; } 100% { transform: translateY(19px); opacity: 0; } }
@keyframes draw { 0% { stroke-dashoffset: 30; } 45%, 75% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -30; } }

/* ---------- cursor spotlight on cards ---------- */
.spot { position: relative; isolation: isolate; }
.spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 65%);
  opacity: 0; transition: opacity .3s ease;
}
.spot:hover::after { opacity: 1; }

/* ---------- scroll reveal (only when JS is running) ---------- */
html.fx .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--rd, 0s); }
html.fx .rv.in { opacity: 1; transform: none; }

/* ---------- service grid (home) ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; list-style: none; }
.svc-item {
  display: flex; flex-direction: column; height: 100%;
  padding: clamp(26px, 3vw, 34px); text-decoration: none; color: inherit;
  background: linear-gradient(180deg, var(--card-a), var(--card-b));
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
a.svc-item:hover { border-color: var(--accent-line); transform: translateY(-5px); box-shadow: var(--shadow), 0 0 50px -20px var(--accent-glow); color: inherit; }
a.svc-item:hover .orb::before { animation-duration: 1.2s; }
.svc-item h3 { margin-bottom: 10px; }
.svc-item p { color: var(--text-2); font-size: 1rem; margin-bottom: 22px; }
.svc-item .svc-more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 600; color: var(--accent-text); }
.svc-item .svc-more span { border-bottom: 1px solid var(--accent-line); padding-bottom: 2px; }
.svc-item .svc-more::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s ease; }
a.svc-item:hover .svc-more::after { transform: translateX(4px) rotate(45deg); }

/* ---------- why us ---------- */
.why-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.why-grid > div:first-child { position: sticky; top: calc(var(--header-h) + 40px); }
.why-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; list-style: none; }
.why-list li { padding: 26px; border-radius: var(--radius); background: var(--card-soft); border: 1px solid var(--line); transition: border-color .25s ease, transform .25s ease; }
.why-list li:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.why-list h3 { font-size: 1.125rem; margin-bottom: 10px; display: flex; gap: 12px; align-items: baseline; }
.why-list h3::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent); transform: translateY(-2px); }
.why-list p { color: var(--text-2); font-size: 1rem; margin: 0; }

/* ---------- refurbishment pipeline ---------- */
.refurb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.refurb-panel { position: relative; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--card-a), var(--card-b)); border: 1px solid var(--line-strong); box-shadow: 0 0 100px -50px var(--accent-glow); }
.pipeline { list-style: none; counter-reset: stage; position: relative; }
.pipeline li { counter-increment: stage; position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding-bottom: 26px; }
.pipeline li:last-child { padding-bottom: 0; }
.pipeline li::before { content: counter(stage); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--accent-line); background: var(--surface); font: 650 0.9375rem var(--font-display); color: var(--accent-text); position: relative; z-index: 1; }
.pipeline li:not(:last-child)::after { content: ""; position: absolute; left: 21.5px; top: 44px; bottom: 0; width: 1px; background: linear-gradient(var(--accent), var(--accent-soft)); }
.pipeline li:last-child::before { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 20px var(--accent-glow); }
.pipeline h3 { font-size: 1.0625rem; margin: 10px 0 4px; }
.pipeline p { margin: 0; color: var(--text-2); font-size: 0.9688rem; }
.pipeline .packet-run { position: absolute; left: 18px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); z-index: 2; animation: run 4s ease-in-out infinite; }
@keyframes run { 0% { top: 18px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% - 26px); opacity: 0; } }

/* ---------- service pages ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; list-style: none; }
.feature-grid li { padding: 26px 28px; border-radius: var(--radius); background: linear-gradient(180deg, var(--card-a), var(--card-b)); border: 1px solid var(--line); transition: border-color .25s ease, transform .25s ease; }
.feature-grid li:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.feature-grid h3 { font-size: 1.125rem; margin-bottom: 8px; padding-left: 18px; position: relative; }
.feature-grid h3::before { content: ""; position: absolute; left: 0; top: .42em; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.feature-grid p { margin: 0; color: var(--text-2); font-size: 1rem; }
.split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.split-head p { color: var(--text-2); }
.check-list { list-style: none; display: grid; gap: 10px; }
.check-list li { padding: 16px 20px 16px 52px; border-radius: var(--radius-sm); background: var(--card-soft); border: 1px solid var(--line); transition: border-color .25s ease, transform .25s ease; }
.check-list li:hover { border-color: var(--accent-line); transform: translateX(4px); }
.check-list li::before { content: ""; position: absolute; left: 20px; top: 22px; width: 14px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.check-list li { position: relative; }
.check-list strong { display: block; color: var(--text); font-weight: 600; }
.check-list span { display: block; color: var(--text-2); font-size: 0.9688rem; margin-top: 2px; }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; counter-reset: step; position: relative; }
.steps li { counter-increment: step; padding: 26px; border-radius: var(--radius); background: var(--card-soft); border: 1px solid var(--line); transition: border-color .25s ease, transform .25s ease; }
.steps li:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.steps li::before {
  content: "0" counter(step); display: block; margin-bottom: 16px; font: 700 2.2rem/1 var(--font-display); font-stretch: 112%;
  background: linear-gradient(180deg, var(--accent), var(--accent-soft)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.steps h3 { font-size: 1.125rem; margin-bottom: 8px; }
.steps p { color: var(--text-2); font-size: 0.9688rem; margin: 0; }

.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; }
.related a { display: block; height: 100%; padding: 24px 26px; border-radius: var(--radius); text-decoration: none; color: var(--text); background: linear-gradient(180deg, var(--card-a), var(--card-b)); border: 1px solid var(--line); transition: border-color .25s ease, transform .25s ease; }
.related a:hover { border-color: var(--accent-line); transform: translateY(-3px); color: var(--text); }
.related strong { display: block; font: 650 1.0625rem/1.3 var(--font-display); font-stretch: 108%; margin-bottom: 6px; }
.related span { color: var(--text-2); font-size: 0.9375rem; }

.svc-detail { display: grid; grid-template-columns: 96px minmax(0, .9fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 40px); padding: clamp(28px, 4vw, 44px); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--card-a), var(--card-b)); border: 1px solid var(--line); transition: border-color .25s ease; }
.svc-detail:hover { border-color: var(--accent-line); }
.svc-detail + .svc-detail { margin-top: 18px; }
.svc-detail .orb { margin: 0; }
.svc-detail h2 { font-size: var(--fs-lg); }
.svc-detail p { color: var(--text-2); }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; align-content: flex-start; }
.tag-list li { padding: 8px 14px; border-radius: 999px; font-size: 0.9375rem; color: var(--text); background: var(--accent-soft); border: 1px solid var(--accent-line); transition: background-color .2s ease, transform .2s ease; }
.tag-list li:hover { background: var(--accent-glow); transform: translateY(-2px); }

.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; }
.principles li { padding: 28px; border-radius: var(--radius); background: var(--card-soft); border: 1px solid var(--line); border-top: 2px solid var(--accent); transition: transform .25s ease; }
.principles li:hover { transform: translateY(-3px); }
.principles h3 { font-size: 1.1875rem; }
.principles p { color: var(--text-2); font-size: 1rem; margin: 0; }
.note-box { padding: 28px 32px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.note-box p:last-child { margin-bottom: 0; }

/* ---------- leadership ---------- */
.team-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 900px; }
.team-profile { display: inline-block; margin-top: 10px; font-weight: 600; color: var(--accent); text-decoration: none; }
.team-profile:hover { text-decoration: underline; }
.profile-photo img { display: block; width: 100%; max-width: 340px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; margin-inline: auto; }
.partner-card img { display: block; width: 100%; max-width: 340px; height: auto; border-radius: 16px; }
.team-card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 44px 28px 32px; border-radius: var(--radius-lg);
  background: radial-gradient(400px 220px at 50% 0%, var(--glow-a), transparent 70%), linear-gradient(180deg, var(--card-a), var(--card-b));
  border: 1px solid var(--line); overflow: hidden;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.team-card:hover { border-color: var(--accent-line); transform: translateY(-6px); box-shadow: var(--shadow), 0 0 60px -20px var(--accent-glow); }
.avatar { position: relative; width: 190px; height: 190px; margin-bottom: 26px; }
.avatar img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 4px solid var(--bg-1); background: var(--surface-2); transition: transform .4s ease; }
.team-card:hover .avatar img { transform: scale(1.04); }
.avatar-ring { position: absolute; inset: -8px; z-index: 1; border-radius: 50%; background: conic-gradient(from 0deg, var(--accent), transparent 30%, transparent 50%, #3B82F6 75%, var(--accent)); animation: spin 6s linear infinite; filter: drop-shadow(0 0 12px var(--accent-glow)); }
.avatar-orbit { position: absolute; inset: -22px; z-index: 0; border-radius: 50%; border: 1px dashed var(--accent-line); animation: spin 18s linear infinite reverse; }
.avatar-orbit i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); top: -5px; left: calc(50% - 5px); }
.avatar-orbit i + i { top: auto; bottom: -4px; width: 7px; height: 7px; left: calc(50% - 3.5px); background: #3B82F6; box-shadow: 0 0 12px #3B82F6; }
.team-card:hover .avatar-ring { animation-duration: 2s; }
.team-body h3 { font-size: 1.5rem; margin-bottom: 4px; }
.team-role { display: inline-block; color: var(--accent-text); font-weight: 600; margin-bottom: 14px; }
.team-detail { display: grid; gap: 2px; margin: 0 0 20px; font-size: 0.9375rem; color: var(--text-3); overflow-wrap: anywhere; }
.team-actions { display: flex; justify-content: center; gap: 10px; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--accent-soft); color: var(--text); transition: transform .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease; }
.icon-btn:hover { transform: translateY(-3px); border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.icon-btn.icon-wa:hover { background: var(--wa); border-color: var(--wa); color: #fff; }

/* ---------- CTA band ---------- */
.cta-band { padding: clamp(56px, 8vw, 104px) 0; background: var(--bg-1); }
.cta-inner {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 32px 64px; align-items: center;
  padding: clamp(36px, 6vw, 72px); border-radius: var(--radius-lg);
  background: radial-gradient(600px 300px at 100% 0%, var(--glow-a), transparent 70%), radial-gradient(600px 300px at 0% 100%, var(--glow-b), transparent 70%), linear-gradient(180deg, var(--card-a), var(--card-b));
  border: 1px solid var(--accent-line); box-shadow: 0 0 120px -40px var(--accent-glow);
}
.cta-inner > * { position: relative; z-index: 1; }
.cta-inner > .fx-canvas { position: absolute; z-index: 0; opacity: .7; }
.wrap.cta-inner { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--wrap) - 2 * var(--gutter)); }
.cta-band h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem); margin-bottom: 14px; }
.cta-band p { max-width: 56ch; margin: 0; color: var(--text-2); }
.cta-actions { display: flex; flex-direction: column; gap: 12px; }
.cta-actions .wa-row { flex-direction: column; }

/* ---------- contact ---------- */
.contact-strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.contact-dl { margin: 0; display: grid; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card-soft); padding: 4px 20px; }
.contact-dl > div { display: grid; grid-template-columns: 100px 1fr; gap: 16px; padding: 14px 0; }
.contact-dl > div + div { border-top: 1px solid var(--line); }
.contact-dl dt { color: var(--text-3); font-size: 0.9375rem; }
.contact-dl dd { margin: 0; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.contact-dl a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--accent-line); }
.contact-dl a:hover { color: var(--accent-text); }
.people-dl { margin: 14px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.person-contact { padding: 18px 20px; border-radius: var(--radius); background: var(--card-soft); border: 1px solid var(--line); transition: border-color .25s ease; }
.person-contact:hover { border-color: var(--accent-line); }
.person-contact dt { font: 650 1.0625rem/1.3 var(--font-display); font-stretch: 108%; color: var(--text); }
.person-contact dt span { display: block; font: 500 0.875rem/1.4 var(--font-body); color: var(--accent-text); margin-top: 3px; }
.person-contact dd { margin: 12px 0 0; display: grid; gap: 3px; font-size: 0.9688rem; overflow-wrap: anywhere; }
.person-contact a { color: var(--text-2); text-decoration: none; }
.person-contact a:hover { color: var(--accent-text); }
.aside-block .people-dl { grid-template-columns: minmax(0, 1fr); }

.contact-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.form-card { padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--card-a), var(--card-b)); border: 1px solid var(--line-strong); box-shadow: var(--shadow), 0 0 120px -50px var(--accent-glow); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 0.9375rem; color: var(--text); }
.field .opt { font-weight: 400; color: var(--text-3); }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 15px; font: 400 1rem/1.4 var(--font-body); color: var(--text); background: var(--input-bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); transition: border-color .15s ease, box-shadow .15s ease; }
.field select option { background: var(--surface); color: var(--text); }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 20px -6px var(--accent-glow); }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: 0.875rem; margin: 0; }
.field-error:empty { display: none; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-consent { font-size: 0.875rem; color: var(--text-3); margin: 0; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 10px; }
.form-status { padding: 14px 16px; border-radius: var(--radius-sm); font-size: 0.9688rem; margin-top: 20px; }
.form-status:empty { display: none; }
.form-status.is-ok { background: rgba(94, 230, 168, 0.1); color: var(--ok); border: 1px solid rgba(94, 230, 168, 0.35); }
.form-status.is-error { background: rgba(255, 138, 128, 0.1); color: var(--danger); border: 1px solid rgba(255, 138, 128, 0.35); }
.form-status.is-info { background: rgba(245, 196, 81, 0.1); color: var(--warn); border: 1px solid rgba(245, 196, 81, 0.35); }
.aside-block + .aside-block { margin-top: 44px; }
.aside-block h2 { font-size: var(--fs-md); margin-bottom: 16px; }
.aside-block .pipeline li { grid-template-columns: 40px 1fr; }
.aside-block .pipeline li::before { width: 40px; height: 40px; }
.aside-block .pipeline li:not(:last-child)::after { left: 19.5px; top: 40px; }
.map-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface); }
.map-frame iframe { display: block; width: 100%; height: clamp(300px, 45vw, 460px); border: 0; filter: var(--map-filter); }

/* ---------- footer ---------- */
.site-footer { position: relative; background: var(--bg-0); color: var(--text-3); font-size: 0.9688rem; border-top: 1px solid var(--line); }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-top: 72px; padding-bottom: 52px; }
.footer-tagline { color: var(--text); font-weight: 600; margin: 20px 0 8px; }
.footer-note { max-width: 34ch; }
.footer-head { font: 600 0.9375rem var(--font-body); color: var(--text); margin-bottom: 16px; letter-spacing: 0; }
.footer-col ul { list-style: none; display: grid; gap: 9px; }
.footer-col a { color: var(--text-2); text-decoration: none; transition: color .2s ease, padding .2s ease; }
.footer-col a:hover { color: var(--accent-text); padding-left: 4px; }
.footer-addr { margin: 0; }
.footer-addr a { color: var(--text-2); text-decoration: none; }
.site-footer .people-dl { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 16px; }
.site-footer .person-contact { padding: 0; border: 0; background: none; }
.site-footer .person-contact dt { font-size: 0.9688rem; }
.site-footer .person-contact dd { margin-top: 4px; font-size: 0.9063rem; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 22px; padding-bottom: 30px; border-top: 1px solid var(--line); font-size: 0.875rem; }
.footer-base p { margin: 0; }

/* ---------- WhatsApp floating button ---------- */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px 0 15px; background: var(--wa); color: #fff; border-radius: 999px; text-decoration: none; font-weight: 600; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.5); }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--wa); animation: wa-ping 2.4s ease-out infinite; pointer-events: none; }
@keyframes wa-ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
.wa-float:hover { background: #17B85F; color: #fff; }
.wa-float-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 40; }
.wa-float-wrap .wa-float { position: relative; cursor: pointer; list-style: none; }
.wa-float-wrap .wa-float::-webkit-details-marker { display: none; }
.wa-float-wrap[open] .wa-float::before { display: none; }
.wa-menu { position: absolute; right: 0; bottom: calc(100% + 10px); width: 270px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; animation: drop .2s ease-out; }
.wa-menu p { margin: 6px 10px; font-size: 0.875rem; color: var(--text-3); }
.wa-menu a { display: block; padding: 11px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); }
.wa-menu a:hover { background: var(--accent-soft); color: var(--text); }
.wa-menu strong { display: block; font-weight: 600; }
.wa-menu span { display: block; font-size: 0.875rem; color: var(--text-3); }

.notfound { padding: clamp(96px, 14vw, 180px) 0; background: radial-gradient(600px 400px at 50% 0%, var(--glow-a), transparent 70%), var(--bg-0); }

@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------- motion that runs on load (one orchestrated hero sequence) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .page-hero h1 { animation: shine 2.4s .3s ease-out both; }
  @keyframes shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
  .hero-panel::before { animation: edge 6s linear infinite; }
  @keyframes edge { to { --ang: 360deg; } }
  .topo.animate .link { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); animation: draw-in 1.1s ease-out forwards; animation-delay: var(--d, 0s); }
  .topo.animate .link-cloud { animation-name: draw-dashed; }
  .topo.animate .node { opacity: 0; animation: appear .45s ease-out forwards; animation-delay: var(--d, 0s); }
  @keyframes draw-in { to { stroke-dashoffset: 0; } }
  @keyframes draw-dashed { 0% { stroke-dasharray: 0 400; } 100% { stroke-dasharray: 5 5; } }
  @keyframes appear { to { opacity: 1; } }
  .live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--accent); animation: ping 2.4s ease-out infinite; }
  .panel-status .live-dot::after { border-color: var(--ok); }
  @keyframes ping { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .cap-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cap-strip li:nth-child(4) { border-left: 0; }
  .cap-strip li:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 980px) {
  .hero-inner, .page-hero-inner, .why-grid, .refurb-grid, .split, .contact-strip, .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .why-grid > div:first-child { position: static; }
  .hero-panel { max-width: 640px; }
  .page-hero-inner .schematic-wrap { max-width: 560px; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related, .principles { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .cta-inner { grid-template-columns: minmax(0, 1fr); }
  .cta-actions, .cta-actions .wa-row { flex-direction: row; flex-wrap: wrap; }
  .svc-detail { grid-template-columns: 84px minmax(0, 1fr); }
  .svc-detail > :last-child { grid-column: 2; }
}
@media (max-width: 640px) {
  :root { --header-h: 64px; }
  body { font-size: 1rem; }
  .brand-name { font-size: 0.9375rem; }
  .brandmark { width: 30px; height: 30px; }
  .header-inner { gap: 10px; }
  .nav-toggle-label { display: none; }
  .svc-grid, .why-list, .feature-grid, .form-grid, .steps, .footer-grid, .people-dl, .team-grid { grid-template-columns: minmax(0, 1fr); }
  .cap-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap-strip li { border-left: 0 !important; border-top: 1px solid var(--line); }
  .cap-strip li:nth-child(-n+2) { border-top: 0; }
  .cap-strip li:nth-child(even) { border-left: 1px solid var(--line) !important; }
  .cap-strip a { padding: 16px 14px; font-size: 0.875rem; }
  .btn-row .btn, .cta-actions .btn, .wa-row .btn { width: 100%; }
  .contact-dl > div { grid-template-columns: 84px 1fr; }
  .svc-detail { grid-template-columns: minmax(0, 1fr); }
  .svc-detail > :last-child { grid-column: auto; }
  .team-grid { max-width: 400px; }
  .avatar { width: 160px; height: 160px; }
  .wa-float span { display: none; }
  .wa-float { padding: 0; width: 54px; height: 54px; justify-content: center; }
  .wa-float-wrap { right: 16px; bottom: 16px; }
  .topo .node .sub, .topo .zone-label { display: none; }
  .topo .node text { font-size: 13.5px; transform: translateY(8px); }
  .page-hero .schematic-wrap { display: none; }
  .panel-bar { padding: 12px 14px; font-size: 0.8125rem; }
  .panel-body { padding: 12px 8px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .ai .ring, .ai .up, .ai .down { opacity: 0; }
  .ai .draw { stroke-dashoffset: 0; }
  .marquee { overflow-x: auto; }
}
@media print {
  .site-header, .site-footer, .wa-float, .wa-float-wrap, .cta-band, .fx-canvas { display: none; }
}

/* =========================================================
   Pricing page: neon blue, violet and purple accents
   ========================================================= */
.page-pricing {
  --neon-blue: #3B82F6;
  --neon-violet: #8B5CF6;
  --neon-purple: #C084FC;
  --neon-pink: #D946EF;
  --neon-grad: linear-gradient(110deg, var(--neon-blue), var(--neon-violet) 50%, var(--neon-pink));
  --neon-soft: rgba(139, 92, 246, 0.10);
  --neon-line: rgba(139, 92, 246, 0.34);
  --neon-glow: rgba(139, 92, 246, 0.45);
  --neon-text: #B9A4FF;
  --spot: rgba(139, 92, 246, 0.14);
  --fx-dot: 167, 139, 250;
  --fx-line: 99, 130, 246;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .page-pricing { --neon-soft: rgba(139, 92, 246, 0.07); --neon-line: rgba(124, 58, 237, 0.28); --neon-glow: rgba(124, 58, 237, 0.25); --neon-text: #6D28D9; --spot: rgba(139, 92, 246, 0.08); --fx-dot: 124, 58, 237; --fx-line: 59, 130, 246; }
}
:root[data-theme="light"] .page-pricing { --neon-soft: rgba(139, 92, 246, 0.07); --neon-line: rgba(124, 58, 237, 0.28); --neon-glow: rgba(124, 58, 237, 0.25); --neon-text: #6D28D9; --spot: rgba(139, 92, 246, 0.08); --fx-dot: 124, 58, 237; --fx-line: 59, 130, 246; }

.pricing-hero {
  background:
    radial-gradient(700px 420px at 15% 10%, rgba(59, 130, 246, 0.22), transparent 70%),
    radial-gradient(700px 420px at 85% 20%, rgba(139, 92, 246, 0.24), transparent 70%),
    radial-gradient(600px 300px at 50% 100%, rgba(217, 70, 239, 0.14), transparent 70%),
    var(--bg-0);
}
.pricing-intro { text-align: center; max-width: 820px; margin: 0 auto; }
.pricing-intro .breadcrumb ol { justify-content: center; }
.pricing-intro h1 { max-width: none; margin-left: auto; margin-right: auto; }
.page-pricing .page-hero h1 {
  background: linear-gradient(100deg, var(--h-grad-a) 0%, var(--h-grad-a) 35%, var(--neon-violet) 50%, var(--neon-blue) 55%, var(--h-grad-a) 65%, var(--h-grad-b) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pricing-intro .lede { margin: 0 auto; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); }
.neon-pill {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 8px 16px 8px 12px; border-radius: 999px;
  border: 1px solid var(--neon-line); background: var(--neon-soft); color: var(--neon-text); font-weight: 600; font-size: 0.9063rem;
}
.neon-pill .live-dot { background: var(--neon-violet); box-shadow: 0 0 10px var(--neon-violet); }
.page-pricing .live-dot::after { border-color: var(--neon-violet); }

.pricing-section { overflow: hidden; padding-top: clamp(56px, 7vw, 96px); }
.neon-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(500px 360px at 18% 30%, rgba(59, 130, 246, 0.16), transparent 70%),
    radial-gradient(560px 400px at 50% 20%, rgba(139, 92, 246, 0.20), transparent 70%),
    radial-gradient(500px 360px at 82% 40%, rgba(217, 70, 239, 0.14), transparent 70%);
}
.price-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; list-style: none; }
.price-card {
  position: relative; display: flex; flex-direction: column;
  padding: 36px 30px 30px; border-radius: 24px;
  background: linear-gradient(180deg, var(--card-a), var(--card-b));
  border: 1px solid var(--neon-line);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.05), 0 30px 70px -40px var(--neon-glow);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease;
}
.price-card:hover { transform: translateY(-8px); border-color: var(--neon-violet); box-shadow: 0 0 0 1px var(--neon-line), 0 40px 90px -30px var(--neon-glow), 0 0 60px -20px rgba(59, 130, 246, 0.4); }
.price-card.popular {
  border-color: transparent; transform: translateY(-14px);
  background:
    radial-gradient(420px 220px at 50% 0%, rgba(139, 92, 246, 0.20), transparent 70%),
    linear-gradient(180deg, var(--card-a), var(--card-b));
  box-shadow: 0 0 80px -20px var(--neon-glow), 0 40px 90px -30px rgba(0, 0, 0, 0.5);
}
.price-card.popular:hover { transform: translateY(-20px); }
.price-card.popular::before {
  /* animated neon border */
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ang, 0deg), var(--neon-blue), var(--neon-violet), var(--neon-pink), var(--neon-violet), var(--neon-blue));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
@media (prefers-reduced-motion: no-preference) {
  .price-card.popular::before { animation: edge 5s linear infinite; }
}
.popular-badge {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  padding: 7px 18px; border-radius: 999px; white-space: nowrap;
  background: var(--neon-grad); color: #fff; font: 700 0.8125rem/1 var(--font-body); letter-spacing: 0.08em;
  box-shadow: 0 8px 26px -6px var(--neon-glow);
}
.price-head { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.price-head h2, .price-head h3 { font-size: 1.375rem; margin-bottom: 14px; padding-right: 48px; }
.price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.price .amount {
  font: 700 clamp(2.4rem, 1.8rem + 1.6vw, 3.1rem)/1 var(--font-display); font-stretch: 105%; letter-spacing: -0.02em;
  background: var(--neon-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.price .per { color: var(--text-3); font-weight: 500; }
.best-for { color: var(--text-2); font-size: 0.9688rem; margin: 0; }
.feature-list { list-style: none; display: grid; gap: 11px; margin-bottom: 24px; }
.feature-list li { position: relative; padding-left: 32px; color: var(--text); font-size: 0.9688rem; line-height: 1.45; }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--neon-soft); border: 1px solid var(--neon-line);
}
.feature-list li::after {
  content: ""; position: absolute; left: 6.5px; top: 6px; width: 7px; height: 4px;
  border-left: 2px solid var(--neon-text); border-bottom: 2px solid var(--neon-text); transform: rotate(-45deg);
}
.delivery { display: flex; gap: 10px; align-items: flex-start; margin: auto 0 22px; padding: 14px 16px; border-radius: 12px; background: var(--neon-soft); border: 1px solid var(--line); font-size: 0.9063rem; color: var(--text-2); }
.delivery svg { flex-shrink: 0; color: var(--neon-text); margin-top: 1px; }
.delivery strong { font-weight: 600; }
.price-card .btn { width: 100%; }
.btn-neon {
  background: var(--neon-grad); color: #fff; background-size: 160% 100%; background-position: 0 0;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.5), 0 12px 34px -10px var(--neon-glow);
  transition: background-position .5s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-neon:hover { color: #fff; background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 0 0 1px var(--neon-violet), 0 16px 44px -8px var(--neon-glow); }
.btn-neon::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-20deg); transition: left .6s ease; }
.btn-neon:hover::after { left: 120%; }
.btn-neon-outline { background: var(--neon-soft); color: var(--text); border-color: var(--neon-line); }
.btn-neon-outline:hover { color: var(--text); border-color: var(--neon-violet); box-shadow: 0 0 30px -8px var(--neon-glow); transform: translateY(-2px); }
.price-footnote { position: relative; max-width: 760px; margin: 40px auto 0; text-align: center; color: var(--text-3); font-size: 0.9375rem; }
.pricing-noscript { text-align: center; margin-top: 24px; }

/* one-time vs recurring */
.charge-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.charge-card { position: relative; padding: 32px; border-radius: 20px; background: linear-gradient(180deg, var(--card-a), var(--card-b)); border: 1px solid var(--line); }
.charge-card.recurring { border-style: dashed; border-color: var(--neon-line); }
.charge-tag { display: inline-block; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; background: var(--neon-grad); }
.charge-card.recurring .charge-tag { background: var(--neon-soft); color: var(--neon-text); border: 1px solid var(--neon-line); }
.charge-card p { color: var(--text-2); margin: 0; }
.charge-price { font: 700 1.75rem/1.1 var(--font-display); color: var(--text) !important; margin-bottom: 10px !important; }
.charge-price span { font: 500 1rem var(--font-body); color: var(--text-3); margin-left: 4px; }

/* add-ons */
.addon-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; }
.addon-grid li { padding: 26px; border-radius: 18px; background: linear-gradient(180deg, var(--card-a), var(--card-b)); border: 1px solid var(--line); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.addon-grid li:hover { transform: translateY(-5px); border-color: var(--neon-line); box-shadow: 0 24px 50px -30px var(--neon-glow); }
.addon-grid h3 { font-size: 1.0625rem; margin-bottom: 10px; }
.addon-price { font: 700 1.375rem/1.2 var(--font-display); margin-bottom: 10px; background: var(--neon-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.addon-price span { font: 500 0.9375rem var(--font-body); }
.addon-grid p:last-child { color: var(--text-2); font-size: 0.9375rem; margin: 0; }
.page-pricing .check-list li::before { border-color: var(--neon-text); }
.page-pricing .check-list li:hover { border-color: var(--neon-line); }

/* FAQ accordion */
.faq-wrap { max-width: 900px; }
.faq { display: grid; gap: 12px; }
.faq details { border-radius: 16px; background: linear-gradient(180deg, var(--card-a), var(--card-b)); border: 1px solid var(--line); transition: border-color .25s ease; }
.faq details[open] { border-color: var(--neon-line); box-shadow: 0 20px 50px -34px var(--neon-glow); }
.faq summary { position: relative; display: block; padding: 20px 56px 20px 24px; cursor: pointer; list-style: none; font: 650 1.0625rem/1.4 var(--font-display); font-stretch: 105%; color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 26px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2px solid var(--neon-text); border-bottom: 2px solid var(--neon-text); transform: rotate(45deg); transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq details p { margin: 0; padding: 0 24px 22px; color: var(--text-2); }
.faq details[open] p { animation: drop .25s ease-out; }

/* CTA band picks up the neon palette on this page */
.page-pricing .cta-inner { border-color: var(--neon-line); background: radial-gradient(600px 300px at 100% 0%, rgba(139, 92, 246, 0.22), transparent 70%), radial-gradient(600px 300px at 0% 100%, rgba(59, 130, 246, 0.2), transparent 70%), linear-gradient(180deg, var(--card-a), var(--card-b)); box-shadow: 0 0 120px -40px var(--neon-glow); }
.page-pricing .cta-inner .btn-accent { background: var(--neon-grad); color: #fff; box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.5), 0 12px 34px -10px var(--neon-glow); }

/* quote dialog */
.quote-dialog {
  width: min(640px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto;
  border: 0; border-radius: 24px; color: var(--text-2);
  background: linear-gradient(180deg, var(--card-a), var(--card-b));
  box-shadow: 0 0 0 1px var(--neon-line), 0 0 100px -20px var(--neon-glow), 0 40px 100px -30px rgba(0, 0, 0, 0.7);
}
.quote-dialog::backdrop { background: rgba(3, 7, 15, 0.72); backdrop-filter: blur(6px); }
.quote-dialog[open] { animation: pop .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.quote-form { padding: clamp(22px, 4vw, 36px); }
.quote-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.quote-kicker { margin: 0 0 6px; color: var(--neon-text); font-weight: 600; font-size: 0.9375rem; }
.quote-top h2 { font-size: 1.625rem; margin: 0 0 4px; }
.quote-price { margin: 0; font: 700 1.125rem var(--font-display); background: var(--neon-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quote-close { display: inline-grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--neon-soft); color: var(--text); cursor: pointer; transition: transform .25s ease, border-color .2s ease; }
.quote-close:hover { transform: rotate(90deg); border-color: var(--neon-violet); }
.quote-form .field input:focus, .quote-form .field select:focus, .quote-form .field textarea:focus { border-color: var(--neon-violet); box-shadow: 0 0 0 3px var(--neon-soft), 0 0 20px -6px var(--neon-glow); }
.quote-form .field textarea { min-height: 120px; }
.quote-form .form-actions { margin-top: 22px; }
.quote-form .form-actions .btn { min-width: 200px; }
.quote-mode { flex: 1; min-width: 200px; }
body.dialog-open { overflow: hidden; }

@media (max-width: 1100px) {
  .price-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; gap: 36px; }
  .price-card.popular { transform: none; order: -1; }
  .price-card.popular:hover { transform: translateY(-8px); }
  .addon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .charge-split, .addon-grid { grid-template-columns: minmax(0, 1fr); }
  .price-card { padding: 34px 22px 24px; }
  .quote-form .form-actions .btn { width: 100%; }
}

/* =========================================================
   Why Choose Us: lime and emerald neon (kept dark in both themes)
   ========================================================= */
.wcu {
  --lime: #A3E635;
  --lime-2: #84CC16;
  --emerald: #10B981;
  --emerald-2: #34D399;
  --g-grad: linear-gradient(110deg, var(--lime), var(--emerald));
  --g-soft: rgba(163, 230, 53, 0.08);
  --g-line: rgba(163, 230, 53, 0.24);
  --g-glow: rgba(132, 204, 22, 0.45);
  --spot: rgba(163, 230, 53, 0.12);
  --fx-dot: 163, 230, 53;
  --fx-line: 16, 185, 129;
  --text: #F4F8F2;
  --text-2: #B7C4B9;
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--section) 0;
  background: #050806;
  color: var(--text-2);
  border-top: 1px solid rgba(163, 230, 53, 0.12);
  border-bottom: 1px solid rgba(163, 230, 53, 0.12);
}
.wcu::before {
  /* thin neon line along the top edge */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--lime), var(--emerald), transparent);
}
.wcu-lights {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(620px 420px at 12% 18%, rgba(163, 230, 53, 0.16), transparent 70%),
    radial-gradient(700px 480px at 88% 30%, rgba(16, 185, 129, 0.18), transparent 70%),
    radial-gradient(800px 360px at 50% 105%, rgba(132, 204, 22, 0.14), transparent 70%),
    radial-gradient(400px 260px at 55% 45%, rgba(52, 211, 153, 0.07), transparent 70%);
}
.wcu .fx-canvas { z-index: -1; opacity: .55; }
.wcu .wrap { position: relative; }
.wcu-head { text-align: center; max-width: 720px; margin: 0 auto clamp(40px, 5vw, 60px); }
.wcu-head .wcu-pill {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 7px 16px 7px 12px;
  border-radius: 999px; border: 1px solid var(--g-line); background: var(--g-soft);
  color: var(--lime); font-weight: 600; font-size: 0.9063rem;
}
.wcu-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime), 0 0 20px var(--g-glow); }
.wcu h2 { color: #FFFFFF; font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.3rem); margin-bottom: 14px; text-shadow: 0 0 40px rgba(163, 230, 53, 0.18); }
.wcu-head p { color: var(--text-2); font-size: 1.125rem; margin: 0; }

.wcu-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; list-style: none; }
.wcu-card {
  position: relative; overflow: hidden;
  padding: 28px 24px 26px; border-radius: 18px;
  background: linear-gradient(180deg, #0D110E, #080B09);
  border: 1px solid var(--g-line);
  box-shadow: inset 0 1px 0 rgba(163, 230, 53, 0.06), 0 20px 40px -28px rgba(0, 0, 0, 0.9);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s ease, box-shadow .35s ease;
}
.wcu-card::before {
  /* light that sweeps across the top edge on hover */
  content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
  opacity: 0; transition: left .7s ease, opacity .3s ease;
}
.wcu-card:hover { transform: translateY(-6px); border-color: rgba(163, 230, 53, 0.55); box-shadow: inset 0 1px 0 rgba(163, 230, 53, 0.12), 0 0 0 1px rgba(163, 230, 53, 0.12), 0 24px 50px -24px var(--g-glow); }
.wcu-card:hover::before { left: 100%; opacity: 1; }
.wcu-icon {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 14px;
  background: radial-gradient(circle at 50% 35%, rgba(163, 230, 53, 0.18), rgba(16, 185, 129, 0.06) 70%);
  border: 1px solid var(--g-line);
  box-shadow: 0 0 24px -8px var(--g-glow);
  transition: transform .35s ease, box-shadow .35s ease;
}
.wcu-icon svg {
  width: 26px; height: 26px; fill: none; stroke: var(--lime); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(163, 230, 53, 0.6));
}
.wcu-card:hover .wcu-icon { transform: scale(1.08) rotate(-4deg); box-shadow: 0 0 34px -6px var(--g-glow); }
.wcu-card h3 { color: #FFFFFF; font-size: 1.125rem; margin-bottom: 8px; transition: color .3s ease; }
.wcu-card:hover h3 { color: var(--lime); }
.wcu-card p { color: var(--text-2); font-size: 0.9688rem; line-height: 1.55; margin: 0; }

.wcu-cta { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 56px); }
.btn-lime {
  background: var(--g-grad); background-size: 160% 100%; color: #04130A; font-weight: 700;
  box-shadow: 0 0 0 1px rgba(163, 230, 53, 0.55), 0 0 30px -6px var(--g-glow), 0 12px 34px -12px rgba(16, 185, 129, 0.6);
  transition: background-position .5s ease, transform .2s ease, box-shadow .25s ease;
}
.btn-lime:hover { color: #04130A; background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 0 0 1px var(--lime), 0 0 46px -4px var(--g-glow), 0 16px 40px -10px rgba(16, 185, 129, 0.7); }
.btn-lime::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: skewX(-20deg); transition: left .6s ease; }
.btn-lime:hover::after { left: 120%; }
.wcu-cta .btn { min-width: 260px; min-height: 54px; font-size: 1.0625rem; }
@media (prefers-reduced-motion: no-preference) {
  .wcu-dot { animation: wcu-pulse 2.4s ease-in-out infinite; }
  @keyframes wcu-pulse { 50% { box-shadow: 0 0 4px var(--lime), 0 0 10px var(--g-glow); } }
}

@media (max-width: 1100px) { .wcu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .wcu-grid { grid-template-columns: minmax(0, 1fr); }
  .wcu-card { padding: 24px 20px; display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; }
  .wcu-icon { margin-bottom: 0; grid-row: span 2; }
  .wcu-cta .btn { width: 100%; min-width: 0; }
}

/* ---------- pricing: six plans, billing selector, comparison ---------- */
html:not(.js) .needs-js { display: none; }
.billing-bar { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: clamp(36px, 5vw, 56px); text-align: center; }
.billing-toggle {
  position: relative; display: inline-grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 5px;
  border-radius: 999px; border: 1px solid var(--neon-line); background: color-mix(in srgb, var(--bg-0) 80%, transparent);
  box-shadow: 0 0 40px -16px var(--neon-glow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.billing-toggle button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 8px 20px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 600 0.9688rem var(--font-body); color: var(--text-2); white-space: nowrap; transition: color .25s ease;
}
.billing-toggle button[aria-checked="true"] { color: #fff; }
.billing-toggle .save { padding: 3px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: var(--neon-soft); color: var(--neon-text); border: 1px solid var(--neon-line); }
.billing-toggle button[aria-checked="true"] .save { background: rgba(255, 255, 255, 0.18); color: #fff; border-color: transparent; }
.billing-thumb {
  position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 3);
  border-radius: 999px; background: var(--neon-grad); box-shadow: 0 6px 24px -6px var(--neon-glow);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.billing-toggle[data-active="1"] .billing-thumb { transform: translateX(100%); }
.billing-toggle[data-active="2"] .billing-thumb { transform: translateX(200%); }
.billing-note { max-width: 640px; margin: 0; font-size: 0.9063rem; color: var(--text-3); }

.tier-head { position: relative; max-width: 760px; margin: 0 0 clamp(36px, 4vw, 48px); }
.tier-head h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); margin-bottom: 8px; }
.tier-head p { margin: 0; color: var(--text-2); }
.tier-pro { margin-top: clamp(72px, 9vw, 112px); padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid var(--neon-line); max-width: none; }
.tier-pro::before { content: ""; position: absolute; top: -1px; left: 0; width: 220px; height: 2px; background: var(--neon-grad); box-shadow: 0 0 16px var(--neon-glow); }
.pro-chip {
  position: absolute; top: 20px; right: 20px; padding: 5px 11px; border-radius: 8px;
  font: 800 0.75rem/1 var(--font-body); letter-spacing: 0.1em; color: #fff;
  background: var(--neon-grad); box-shadow: 0 0 18px -4px var(--neon-glow);
}
.pro-chip-lg { position: static; display: inline-block; margin-bottom: 14px; font-size: 0.8125rem; padding: 6px 12px; }
.price-card { background: linear-gradient(180deg, #100D1A, #0A0912); }
:root[data-theme="light"] .price-card { background: linear-gradient(180deg, var(--card-a), var(--card-b)); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .price-card { background: linear-gradient(180deg, var(--card-a), var(--card-b)); } }
.price-card.ultimate {
  border-color: transparent; transform: translateY(-14px);
  background: radial-gradient(460px 260px at 50% 0%, rgba(192, 132, 252, 0.24), transparent 70%), radial-gradient(360px 200px at 50% 100%, rgba(139, 92, 246, 0.16), transparent 70%), linear-gradient(180deg, #120E20, #0B0914);
  box-shadow: 0 0 100px -20px var(--neon-glow), 0 40px 90px -30px rgba(0, 0, 0, 0.6);
}
:root[data-theme="light"] .price-card.ultimate { background: radial-gradient(460px 260px at 50% 0%, rgba(192, 132, 252, 0.18), transparent 70%), linear-gradient(180deg, var(--card-a), var(--card-b)); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .price-card.ultimate { background: radial-gradient(460px 260px at 50% 0%, rgba(192, 132, 252, 0.18), transparent 70%), linear-gradient(180deg, var(--card-a), var(--card-b)); } }
.price-card.ultimate:hover { transform: translateY(-20px); }
.price-card.ultimate::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--ang, 0deg), var(--neon-purple), var(--neon-violet), #F0ABFC, var(--neon-violet), var(--neon-purple));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
@media (prefers-reduced-motion: no-preference) { .price-card.ultimate::before { animation: edge 4s linear infinite; } }
.ultimate-badge {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(110deg, #7C3AED, #C084FC 50%, #7C3AED); background-size: 200% 100%;
  color: #fff; font: 800 0.8125rem/1 var(--font-body); letter-spacing: 0.16em;
  box-shadow: 0 0 0 1px rgba(240, 171, 252, 0.5), 0 10px 30px -6px var(--neon-glow);
}
.ultimate-badge::before { content: "✦"; font-size: 0.75rem; }
@media (prefers-reduced-motion: no-preference) { .ultimate-badge { animation: badge-shine 4s linear infinite; } @keyframes badge-shine { to { background-position: -200% 0; } } }
.price-card.popular .pro-chip, .price-card.ultimate .pro-chip { top: 24px; }
.price-grid + .tier-head { }
.price-grid { margin-bottom: 0; }

/* recurring maintenance box on each card */
.recurring {
  margin: -6px 0 22px; padding: 14px 16px; border-radius: 14px;
  background: var(--neon-soft); border: 1px dashed var(--neon-line);
}
.recurring.is-static { border-style: dashed; }
.rec-label { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 0.8438rem; font-weight: 600; color: var(--text-2); }
.rec-period { padding: 2px 8px; border-radius: 6px; font-size: 0.75rem; background: var(--neon-grad); color: #fff; }
.rec-amount { margin: 0; font: 700 1.375rem/1.2 var(--font-display); color: var(--text); }
.rec-amount span { font: 500 0.875rem var(--font-body); color: var(--text-3); margin-left: 3px; }
.rec-save { margin: 4px 0 0; font-size: 0.8438rem; color: var(--neon-text); font-weight: 600; }
.rec-fine { margin: 6px 0 0; font-size: 0.8125rem; color: var(--text-3); }
.rec-lines { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 0.8438rem; }
.rec-lines div { display: flex; justify-content: space-between; gap: 12px; }
.rec-lines dt { color: var(--text-3); }
.rec-lines dd { margin: 0; text-align: right; color: var(--text); font-weight: 600; }
.rec-lines small { display: block; font-weight: 400; color: var(--text-3); font-size: 0.75rem; }
.third-party { margin: -8px 0 18px; padding-left: 12px; border-left: 2px solid var(--neon-line); font-size: 0.8438rem; color: var(--text-3); line-height: 1.5; }

/* comparison table */
.pricing-compare { background: var(--bg-1); }
.compare-scroll { overflow-x: auto; border-radius: 20px; border: 1px solid var(--neon-line); background: linear-gradient(180deg, var(--card-a), var(--card-b)); box-shadow: 0 30px 80px -50px var(--neon-glow); }
.compare-scroll:focus-visible { outline-offset: 4px; }
.compare-table { width: 100%; min-width: 980px; border-collapse: separate; border-spacing: 0; font-size: 0.9375rem; }
.compare-table th, .compare-table td { padding: 15px 16px; text-align: center; border-bottom: 1px solid var(--line); vertical-align: middle; }
.compare-table tbody tr:last-child > * { border-bottom: 0; }
.compare-table thead th { position: sticky; top: 0; background: var(--surface); font: 650 1rem/1.25 var(--font-display); color: var(--text); }
.compare-table thead th small { display: block; margin-top: 4px; font: 600 0.8125rem var(--font-body); color: var(--neon-text); }
.compare-table thead th.pro-col span::after { content: " PRO"; font: 800 0.6875rem var(--font-body); letter-spacing: 0.08em; color: var(--neon-purple); vertical-align: 2px; }
.compare-table tbody th { text-align: left; font-weight: 600; color: var(--text); white-space: nowrap; }
.compare-table th:first-child, .compare-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); border-right: 1px solid var(--line); }
.compare-table thead th:first-child { z-index: 2; }
.compare-table td { color: var(--text-2); }
.compare-table td.pro-col { background: rgba(139, 92, 246, 0.04); }
.compare-table tbody tr:hover td, .compare-table tbody tr:hover th { background-color: var(--neon-soft); }
.compare-table .yes { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--neon-grad); color: #fff; font-weight: 800; font-size: 0.8125rem; box-shadow: 0 0 14px -3px var(--neon-glow); }
.compare-table .no { color: var(--text-3); font-size: 1.125rem; }
.compare-foot { margin: 16px 0 0; font-size: 0.8438rem; color: var(--text-3); max-width: 900px; }

.charge-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.charge-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .charge-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .charge-4 { grid-template-columns: minmax(0, 1fr); } }
.charge-card.external { border-color: var(--line-strong); }
.charge-card.external .charge-tag { background: transparent; color: var(--text-2); border: 1px solid var(--line-strong); }
.charge-price span { display: block; margin: 4px 0 0; }

/* quote summary inside the dialog */
.quote-summary { grid-column: 1 / -1; padding: 16px 18px; border-radius: 14px; background: var(--neon-soft); border: 1px solid var(--neon-line); }
.quote-summary:empty { display: none; }
.qs-title { margin: 0 0 8px; font-weight: 700; color: var(--text); font-size: 0.9375rem; }
.quote-summary ul { list-style: none; display: grid; gap: 6px; }
.quote-summary li { display: flex; justify-content: space-between; gap: 16px; font-size: 0.875rem; }
.quote-summary li span { color: var(--text-3); flex-shrink: 0; }
.quote-summary li strong { text-align: right; font-weight: 600; }
.qs-note { margin: 10px 0 0; font-size: 0.8125rem; color: var(--text-3); }
.field select:disabled { opacity: .6; }

@media (max-width: 1100px) {
  .price-card.ultimate { transform: none; }
  .price-card.ultimate:hover { transform: translateY(-8px); }
  .charge-3 { grid-template-columns: minmax(0, 1fr); }
  .tier-head { text-align: center; margin-left: auto; margin-right: auto; }
  .tier-pro::before { left: 50%; transform: translateX(-50%); }
}
@media (max-width: 560px) {
  .billing-toggle { width: 100%; }
  .billing-toggle button { flex-direction: column; gap: 3px; padding: 6px 4px; font-size: 0.875rem; min-height: 56px; }
  .billing-toggle .save { font-size: 0.6875rem; padding: 2px 6px; }
  .billing-thumb { border-radius: 26px; }
  .billing-toggle { border-radius: 30px; }
  .quote-summary li { flex-direction: column; gap: 0; }
  .quote-summary li strong { text-align: left; }
}
.pricing-compare { padding-top: clamp(24px, 4vw, 56px); }
.price { flex-wrap: wrap; row-gap: 4px; }
.price .per { white-space: nowrap; }
.rec-lines dd, .rec-lines small { white-space: nowrap; }
.rec-lines dt { min-width: 0; }

/* =========================================================
   Pricing: BASIC / PRO switch and billing period selector
   ========================================================= */
.pricing-section { transition: background-color .7s ease; }
.pricing-controls { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0 auto clamp(44px, 6vw, 64px); text-align: center; }
.tier-toggle {
  position: relative; display: grid; grid-template-columns: repeat(2, 1fr); width: min(320px, 100%); padding: 6px;
  border-radius: 999px; border: 1px solid var(--neon-line);
  background: color-mix(in srgb, var(--bg-0) 85%, transparent);
  box-shadow: 0 0 40px -16px var(--neon-glow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: box-shadow .5s ease, border-color .5s ease;
}
.tier-toggle button {
  position: relative; z-index: 1; min-height: 52px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 800 1rem/1 var(--font-display); font-stretch: 115%; letter-spacing: 0.16em; color: var(--text-2); transition: color .3s ease;
}
.tier-toggle button[aria-selected="true"] { color: #fff; }
.tier-thumb {
  position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); border-radius: 999px;
  background: var(--neon-grad); box-shadow: 0 6px 24px -6px var(--neon-glow);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), background .5s ease;
}
.tier-toggle[data-active="1"] .tier-thumb { transform: translateX(100%); background: linear-gradient(110deg, #6D28D9, #A855F7 60%, #C084FC); }
.pricing-section.is-pro .tier-toggle { border-color: rgba(192, 132, 252, 0.6); box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.25), 0 0 50px -10px rgba(168, 85, 247, 0.7); }
@media (prefers-reduced-motion: no-preference) {
  .pricing-section.is-pro .tier-toggle { animation: pro-aura 3.2s ease-in-out infinite; }
  @keyframes pro-aura { 50% { box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.4), 0 0 70px -6px rgba(168, 85, 247, 0.85); } }
}

/* billing: three equal options, always centred, indicator slides without resizing */
.billing-toggle { width: min(600px, 100%); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 auto; }
.billing-toggle button { min-width: 0; letter-spacing: 0.08em; font-size: 0.875rem; font-weight: 700; }
.billing-toggle .bt-label { white-space: nowrap; }
.billing-toggle .save { letter-spacing: 0; }
.billing-thumb { width: calc((100% - 10px) / 3); }
.billing-note { margin: 0 auto; }
@media (max-width: 560px) {
  .billing-toggle button { flex-direction: column; gap: 4px; min-height: 60px; font-size: 0.75rem; letter-spacing: 0.04em; padding: 6px 2px; }
}

/* the two ranges share one grid cell, so switching never shifts the page */
.tier-stage { position: relative; }
html.tiers-ready .tier-stage { display: grid; }
html.tiers-ready .tier-panel { grid-area: 1 / 1; }
html.tiers-anim .tier-panel { transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .5s; }
html.tiers-ready .tier-panel:not(.is-active) { opacity: 0; transform: translateY(16px) scale(.985); visibility: hidden; pointer-events: none; }
html.tiers-ready .tier-panel.is-active { opacity: 1; transform: none; visibility: visible; }
html.tiers-anim .tier-panel.is-active { transition-delay: 0s; }
html:not(.tiers-ready) .tier-pro-panel { margin-top: 72px; }
.tier-panel .tier-head { text-align: center; margin-left: auto; margin-right: auto; }
.tier-pro-panel .tier-pro { margin-top: 0; padding-top: 0; border-top: 0; max-width: 760px; }
.tier-pro-panel .tier-pro::before { display: none; }

/* =========================================================
   PRO environment: purple only, kept dark in both themes
   ========================================================= */
.pricing-section.is-pro, .tier-pro-panel {
  --text: #F6F1FF; --text-2: #CFC3E6; --text-3: #A193C0;
  --line: rgba(196, 165, 255, 0.14); --line-strong: rgba(196, 165, 255, 0.28);
  --card-a: #170E2C; --card-b: #0C0718; --surface: #170E2C;
  --bg-0: #07040F;
  --neon-grad: linear-gradient(110deg, #7C3AED, #A855F7 55%, #C084FC);
  --neon-soft: rgba(168, 85, 247, 0.10);
  --neon-line: rgba(168, 85, 247, 0.34);
  --neon-glow: rgba(168, 85, 247, 0.5);
  --neon-text: #D8B4FE;
  --spot: rgba(168, 85, 247, 0.16);
}
.pricing-section.is-pro { background-color: #07040F; }
.pricing-section::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .8s ease;
  background:
    radial-gradient(900px 520px at 50% 8%, rgba(109, 40, 217, 0.38), transparent 70%),
    radial-gradient(600px 460px at 12% 45%, rgba(126, 34, 206, 0.24), transparent 70%),
    radial-gradient(600px 460px at 88% 50%, rgba(147, 51, 234, 0.22), transparent 70%),
    radial-gradient(800px 400px at 50% 100%, rgba(88, 28, 135, 0.35), transparent 70%),
    linear-gradient(180deg, #0B0618, #07040F 40%, #0A0516);
}
.pricing-section.is-pro::after { opacity: 1; }
.pricing-section .neon-glow { transition: opacity .8s ease; }
.pricing-section.is-pro .neon-glow { opacity: 0; }
.pricing-section > .wrap { position: relative; z-index: 1; }
.pricing-section.is-pro .billing-note, .pricing-section.is-pro .price-footnote { color: var(--text-3); }

.tier-pro-panel { position: relative; isolation: isolate; color: var(--text-2); }
.pro-aura { position: absolute; inset: 80px -6% -40px; z-index: -1; pointer-events: none; filter: blur(60px); opacity: .9; }
.pro-aura::before, .pro-aura::after { content: ""; position: absolute; border-radius: 50%; }
.pro-aura::before { width: 46%; height: 60%; left: 4%; top: 10%; background: rgba(124, 58, 237, 0.30); }
.pro-aura::after { width: 50%; height: 70%; right: 0; top: 18%; background: rgba(168, 85, 247, 0.30); }
@media (prefers-reduced-motion: no-preference) {
  .pro-aura::before { animation: drift-a 14s ease-in-out infinite alternate; }
  .pro-aura::after { animation: drift-b 16s ease-in-out infinite alternate; }
  @keyframes drift-a { to { transform: translate(14%, 8%) scale(1.1); } }
  @keyframes drift-b { to { transform: translate(-12%, -6%) scale(.92); } }
}
.tier-pro-panel .tier-head h2 {
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem);
  background: linear-gradient(180deg, #FFFFFF 30%, #D8B4FE); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tier-pro-panel .pro-chip-lg { letter-spacing: 0.2em; padding: 7px 14px; }

/* PRO cards: glass surfaces with purple light */
.pro-grid { align-items: stretch; }
.price-card.pro-card {
  overflow: hidden; transform: none;
  background: linear-gradient(180deg, rgba(46, 22, 92, 0.55), rgba(14, 8, 30, 0.82));
  border: 1px solid rgba(168, 85, 247, 0.30);
  box-shadow: inset 0 1px 0 rgba(216, 180, 254, 0.10), 0 0 50px -24px rgba(168, 85, 247, 0.55), 0 30px 70px -40px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.price-card.pro-card::after {
  /* slow diagonal light sweep */
  content: ""; position: absolute; top: -50%; bottom: -50%; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(216, 180, 254, 0.08), transparent);
  transform: rotate(12deg);
}
@media (prefers-reduced-motion: no-preference) {
  .price-card.pro-card::after { animation: sweep 7s ease-in-out infinite; }
  .price-card.pro-plus::after { animation-delay: 1.4s; }
  .price-card.pro-elite::after { animation-delay: 2.8s; }
  @keyframes sweep { 0%, 55% { left: -60%; } 100% { left: 130%; } }
}
.price-card.pro-card:hover { transform: translateY(-8px); border-color: rgba(192, 132, 252, 0.7); box-shadow: inset 0 1px 0 rgba(216, 180, 254, 0.16), 0 0 80px -20px rgba(168, 85, 247, 0.75), 0 30px 70px -40px rgba(0, 0, 0, 0.8); }
.price-card.pro-plus {
  border-color: rgba(168, 85, 247, 0.55);
  background: radial-gradient(420px 220px at 50% 0%, rgba(147, 51, 234, 0.26), transparent 70%), linear-gradient(180deg, rgba(52, 24, 104, 0.6), rgba(16, 8, 34, 0.85));
  box-shadow: inset 0 1px 0 rgba(216, 180, 254, 0.14), 0 0 80px -22px rgba(168, 85, 247, 0.7), 0 30px 70px -40px rgba(0, 0, 0, 0.8);
}
.price-card.pro-elite {
  border-color: transparent;
  background: radial-gradient(460px 260px at 50% 0%, rgba(168, 85, 247, 0.34), transparent 70%), radial-gradient(360px 220px at 50% 100%, rgba(109, 40, 217, 0.26), transparent 70%), linear-gradient(180deg, rgba(58, 26, 116, 0.65), rgba(18, 8, 38, 0.88));
  box-shadow: inset 0 1px 0 rgba(233, 213, 255, 0.18), 0 0 110px -18px rgba(168, 85, 247, 0.8), 0 30px 70px -40px rgba(0, 0, 0, 0.8);
}
.price-card.pro-elite::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--ang, 0deg), #6D28D9, #C084FC, #E9D5FF, #A855F7, #6D28D9);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
@media (prefers-reduced-motion: no-preference) {
  .price-card.pro-elite::before { animation: edge 5s linear infinite; }
  .price-card.pro-elite { animation: elite-aura 4s ease-in-out infinite; }
  @keyframes elite-aura { 50% { box-shadow: inset 0 1px 0 rgba(233, 213, 255, 0.22), 0 0 140px -14px rgba(168, 85, 247, 0.95), 0 30px 70px -40px rgba(0, 0, 0, 0.8); } }
}
.price-card.pro-elite:hover { transform: translateY(-8px); }
.elite-badge {
  position: absolute; top: 18px; right: 18px; z-index: 3;
  padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  font: 800 0.6875rem/1 var(--font-body); letter-spacing: 0.16em; color: #fff;
  background: linear-gradient(110deg, #6D28D9, #A855F7 50%, #6D28D9); background-size: 200% 100%;
  box-shadow: 0 0 0 1px rgba(233, 213, 255, 0.4), 0 0 24px -4px rgba(168, 85, 247, 0.8);
}
@media (prefers-reduced-motion: no-preference) { .elite-badge { animation: badge-shine 4s linear infinite; } }
.pro-card .price-head h3 { padding-right: 0; }
.pro-elite .price-head h3 { padding-right: 150px; }
.pro-icon {
  display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 18px; border-radius: 14px;
  background: radial-gradient(circle at 50% 30%, rgba(192, 132, 252, 0.3), rgba(109, 40, 217, 0.08) 70%);
  border: 1px solid rgba(192, 132, 252, 0.35); box-shadow: 0 0 28px -8px rgba(168, 85, 247, 0.8);
}
.pro-icon svg { width: 24px; height: 24px; fill: none; stroke: #E9D5FF; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(192, 132, 252, 0.8)); }
.pro-card .price .amount { background: linear-gradient(110deg, #FFFFFF, #E9D5FF 40%, #C084FC); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pro-card .feature-list li { color: var(--text); }
.pro-card .recurring { background: rgba(124, 58, 237, 0.10); border-color: rgba(192, 132, 252, 0.32); }
.pro-card .delivery { background: rgba(124, 58, 237, 0.08); }
.pro-card .btn-neon-outline { background: rgba(124, 58, 237, 0.12); }
.pro-card .btn-neon { background: linear-gradient(110deg, #7C3AED, #A855F7 55%, #C084FC); background-size: 160% 100%; }
.pro-card > :not(.elite-badge) { position: relative; z-index: 1; }

@media (max-width: 1100px) {
  .pro-grid { max-width: 560px; margin: 0 auto; }
  .pro-elite .price-head h3 { padding-right: 0; }
  .elite-badge { position: static; display: inline-block; margin-bottom: 14px; align-self: flex-start; }
}

/* =========================================================
   Pricing refresh: compact controls, purple-only BASIC,
   gold + purple PRO collection
   ========================================================= */
.page-pricing {
  --neon-blue: #7C3AED;
  --neon-violet: #8B5CF6;
  --neon-purple: #C084FC;
  --neon-pink: #A855F7;
  --neon-grad: linear-gradient(110deg, #6D28D9, #8B5CF6 50%, #C084FC);
  --fx-line: 139, 92, 246;
}
.pricing-hero {
  background:
    radial-gradient(700px 420px at 15% 10%, rgba(109, 40, 217, 0.22), transparent 70%),
    radial-gradient(700px 420px at 85% 20%, rgba(139, 92, 246, 0.24), transparent 70%),
    radial-gradient(600px 300px at 50% 100%, rgba(168, 85, 247, 0.14), transparent 70%),
    var(--bg-0);
}
.page-pricing .page-hero h1 {
  background: linear-gradient(100deg, var(--h-grad-a) 0%, var(--h-grad-a) 38%, #A855F7 50%, var(--h-grad-a) 62%, var(--h-grad-b) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.neon-glow {
  background:
    radial-gradient(500px 360px at 18% 30%, rgba(109, 40, 217, 0.16), transparent 70%),
    radial-gradient(560px 400px at 50% 20%, rgba(139, 92, 246, 0.20), transparent 70%),
    radial-gradient(500px 360px at 82% 40%, rgba(168, 85, 247, 0.14), transparent 70%);
}
.price-card { box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.05), 0 30px 70px -40px var(--neon-glow); }
.price-card:hover { box-shadow: 0 0 0 1px var(--neon-line), 0 40px 90px -30px var(--neon-glow), 0 0 60px -20px rgba(139, 92, 246, 0.4); }
.price-card.popular::before { background: conic-gradient(from var(--ang, 0deg), #6D28D9, #8B5CF6, #C084FC, #8B5CF6, #6D28D9); }

/* ---- compact, cleaner toggles ---- */
.pricing-controls { gap: 12px; margin-bottom: clamp(36px, 5vw, 52px); }
.tier-toggle { width: 216px; padding: 4px; box-shadow: 0 0 24px -14px var(--neon-glow); }
.tier-toggle button { min-height: 38px; font-size: 0.8125rem; letter-spacing: 0.14em; }
.tier-thumb { top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); box-shadow: 0 4px 14px -6px var(--neon-glow); }
.billing-wrap { display: grid; justify-items: center; gap: 8px; width: 100%; overflow: hidden; max-height: 120px; opacity: 1; transition: max-height .45s ease, opacity .35s ease, margin .45s ease; }
.pricing-section:not(.is-pro) .billing-wrap { max-height: 0; opacity: 0; margin-top: -12px; }
html:not(.js) .billing-wrap { display: none; }
.billing-toggle { width: min(380px, 100%); padding: 3px; box-shadow: none; }
.billing-toggle button { min-height: 32px; padding: 4px 8px; gap: 6px; font-size: 0.6875rem; letter-spacing: 0.1em; }
.billing-toggle .save { padding: 1px 6px; font-size: 0.625rem; }
.billing-thumb { top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); box-shadow: none; }
.billing-note { font-size: 0.8125rem; max-width: 520px; }
@media (max-width: 560px) {
  .billing-toggle button { flex-direction: column; gap: 2px; min-height: 42px; font-size: 0.625rem; padding: 4px 2px; }
}

/* =========================================================
   PRO collection: black, deep purple and champagne gold
   ========================================================= */
.pricing-section.is-pro, .tier-pro-panel {
  --gold: #E5C37A;
  --gold-light: #F8E6B4;
  --gold-deep: #A9782A;
  --gold-grad: linear-gradient(110deg, #B8862E, #F8E6B4 45%, #E5C37A 60%, #A9782A);
  --lux-line: rgba(229, 195, 122, 0.28);
  --neon-grad: linear-gradient(110deg, #5B21B6, #9333EA 55%, #C084FC);
  --neon-text: #E9D5FF;
}
.pricing-section::after {
  background:
    radial-gradient(900px 480px at 50% 0%, rgba(91, 33, 182, 0.42), transparent 70%),
    radial-gradient(520px 320px at 50% 2%, rgba(229, 195, 122, 0.10), transparent 70%),
    radial-gradient(600px 460px at 8% 55%, rgba(109, 40, 217, 0.22), transparent 70%),
    radial-gradient(600px 460px at 92% 55%, rgba(126, 34, 206, 0.22), transparent 70%),
    linear-gradient(180deg, #0A0613, #050309 45%, #08040F);
}
.pricing-section.is-pro .tier-toggle { border-color: var(--lux-line); box-shadow: 0 0 0 1px rgba(229, 195, 122, 0.12), 0 0 34px -10px rgba(147, 51, 234, 0.7); }
.tier-toggle[data-active="1"] .tier-thumb { background: linear-gradient(110deg, #6D28D9, #9333EA 55%, #B8862E); box-shadow: 0 0 0 1px rgba(229, 195, 122, 0.45), 0 4px 18px -6px rgba(147, 51, 234, 0.8); }
@media (prefers-reduced-motion: no-preference) {
  .pricing-section.is-pro .tier-toggle { animation: lux-aura 3.6s ease-in-out infinite; }
  @keyframes lux-aura { 50% { box-shadow: 0 0 0 1px rgba(229, 195, 122, 0.22), 0 0 48px -6px rgba(147, 51, 234, 0.9); } }
}
.pricing-section.is-pro .billing-toggle { border-color: var(--lux-line); }
.pricing-section.is-pro .billing-thumb { background: linear-gradient(110deg, #5B21B6, #9333EA); box-shadow: inset 0 0 0 1px rgba(229, 195, 122, 0.35); }
.pricing-section.is-pro .billing-toggle .save { color: var(--gold-light); border-color: var(--lux-line); background: rgba(229, 195, 122, 0.08); }

/* header of the PRO collection */
.tier-pro-panel .pro-chip-lg {
  background: transparent; color: var(--gold-light); border: 1px solid var(--lux-line); box-shadow: 0 0 20px -6px rgba(229, 195, 122, 0.45);
  letter-spacing: 0.32em; padding: 7px 12px 7px 16px; border-radius: 999px;
}
.tier-pro-panel .tier-head h2 { background: linear-gradient(180deg, #FFFFFF 20%, var(--gold-light) 70%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.02em; }
.tier-pro-panel .tier-head::after { content: ""; display: block; width: 140px; height: 1px; margin: 22px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.pro-aura::before { background: rgba(91, 33, 182, 0.34); }
.pro-aura::after { background: rgba(147, 51, 234, 0.26); }

/* layout: ELITE as a wide flagship card, PRO AI and PLUS side by side */
.pro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1080px; margin: 0 auto; }
.price-card.pro-card {
  border-radius: 22px; padding: 0 0 28px; overflow: hidden;
  background: linear-gradient(180deg, rgba(22, 12, 38, 0.92), rgba(8, 5, 14, 0.96));
  border: 1px solid var(--lux-line);
  box-shadow: inset 0 1px 0 rgba(248, 230, 180, 0.08), 0 0 60px -30px rgba(147, 51, 234, 0.6), 0 30px 70px -40px rgba(0, 0, 0, 0.9);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.price-card.pro-card:hover { transform: translateY(-6px); border-color: rgba(229, 195, 122, 0.55); box-shadow: inset 0 1px 0 rgba(248, 230, 180, 0.14), 0 0 80px -24px rgba(147, 51, 234, 0.8), 0 30px 70px -40px rgba(0, 0, 0, 0.9); }
.price-card.pro-card::after { background: linear-gradient(100deg, transparent, rgba(248, 230, 180, 0.07), transparent); }
.pro-card > :not(.price-head):not(.elite-badge) { margin-left: 28px; margin-right: 28px; }
.pro-card .price-head {
  position: relative; margin: 0 0 24px; padding: 28px 28px 24px;
  background: radial-gradient(420px 200px at 0% 0%, rgba(147, 51, 234, 0.35), transparent 70%), linear-gradient(135deg, #1E0F3A, #120822 60%, #0B0614);
  border-bottom: 1px solid var(--lux-line);
}
.pro-card .price-head::after { content: ""; position: absolute; left: 28px; right: 28px; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.pro-card .price-head h3 { font-size: 1.25rem; letter-spacing: 0.06em; color: var(--gold-light); margin-bottom: 12px; }
.pro-card .price .amount { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pro-card .price .per { color: #D9C9F2; }
.pro-card .best-for { color: #CFC3E6; }
.pro-icon { border-color: var(--lux-line); background: radial-gradient(circle at 50% 30%, rgba(147, 51, 234, 0.45), rgba(30, 15, 58, 0.6) 70%); box-shadow: 0 0 24px -8px rgba(147, 51, 234, 0.9), inset 0 0 0 1px rgba(248, 230, 180, 0.06); }
.pro-icon svg { stroke: var(--gold-light); filter: drop-shadow(0 0 4px rgba(229, 195, 122, 0.55)); }
.pro-card .recurring { background: rgba(91, 33, 182, 0.14); border: 1px solid rgba(147, 51, 234, 0.35); }
.pro-card .rec-period { background: linear-gradient(110deg, #6D28D9, #9333EA); box-shadow: inset 0 0 0 1px rgba(229, 195, 122, 0.3); }
.pro-card .rec-save { color: var(--gold-light); }
.pro-card .feature-list li::before { width: 9px; height: 9px; top: 6px; left: 4px; border-radius: 1px; transform: rotate(45deg); background: var(--gold-grad); border: 0; box-shadow: 0 0 8px rgba(229, 195, 122, 0.45); }
.pro-card .feature-list li::after { display: none; }
.pro-card .feature-list li { padding-left: 26px; }
.pro-card .third-party { border-left-color: var(--lux-line); }
.pro-card .delivery { background: rgba(229, 195, 122, 0.05); border-color: var(--lux-line); }
.pro-card .delivery svg { color: var(--gold); }
.pro-card .btn-neon-outline { background: transparent; border-color: var(--lux-line); color: var(--gold-light); }
.pro-card .btn-neon-outline:hover { border-color: var(--gold); color: #fff; background: rgba(229, 195, 122, 0.08); box-shadow: 0 0 30px -8px rgba(229, 195, 122, 0.5); }
.pro-card .btn-neon { background: linear-gradient(110deg, #B8862E, #F8E6B4 40%, #E5C37A 60%, #B8862E); background-size: 200% 100%; color: #1A0F02; box-shadow: 0 0 0 1px rgba(248, 230, 180, 0.5), 0 10px 30px -10px rgba(229, 195, 122, 0.6); }
.pro-card .btn-neon:hover { color: #1A0F02; background-position: 100% 0; box-shadow: 0 0 0 1px var(--gold-light), 0 14px 40px -8px rgba(229, 195, 122, 0.7); }
.price-card.pro-plus { border-color: rgba(229, 195, 122, 0.4); }
.price-card.pro-plus .price-head { background: radial-gradient(460px 220px at 0% 0%, rgba(147, 51, 234, 0.5), transparent 70%), linear-gradient(135deg, #251047, #140927 60%, #0B0614); }

/* flagship ELITE card */
.price-card.pro-elite {
  grid-column: 1 / -1; order: -1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 0; padding: 0; align-items: stretch;
  background: linear-gradient(135deg, rgba(30, 12, 58, 0.95), rgba(8, 4, 16, 0.97) 60%);
  border-color: transparent; animation: none;
  box-shadow: 0 0 120px -30px rgba(147, 51, 234, 0.85), 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}
.price-card.pro-elite::before { padding: 1.5px; background: conic-gradient(from var(--ang, 0deg), #5B21B6, #9333EA, #F8E6B4, #E5C37A, #9333EA, #5B21B6); }
@media (prefers-reduced-motion: no-preference) {
  .price-card.pro-elite::before { animation: edge 6s linear infinite; }
  .price-card.pro-elite { animation: lux-elite 4.5s ease-in-out infinite; }
  @keyframes lux-elite { 50% { box-shadow: 0 0 150px -24px rgba(147, 51, 234, 1), 0 40px 90px -40px rgba(0, 0, 0, 0.9); } }
}
.price-card.pro-elite > * { margin: 0; }
.pro-elite .price-head {
  grid-column: 1; grid-row: 1 / span 4; margin: 0; padding: 40px 36px 32px; border-bottom: 0; border-right: 1px solid var(--lux-line);
  background: radial-gradient(520px 320px at 0% 0%, rgba(147, 51, 234, 0.55), transparent 70%), radial-gradient(400px 260px at 100% 100%, rgba(229, 195, 122, 0.10), transparent 70%), linear-gradient(160deg, #2A1150, #150A2A 55%, #0B0614);
}
.pro-elite .price-head::after { display: none; }
.pro-elite .price-head h3 { font-size: 1.6rem; padding-right: 0; }
.pro-elite .price .amount { font-size: clamp(2.8rem, 2rem + 2vw, 3.6rem); }
.pro-elite .recurring { grid-column: 1; grid-row: 5; margin: 0 36px 16px; }
.pro-elite .delivery { grid-column: 1; grid-row: 6; margin: 0 36px 16px; }
.pro-elite .plan-btn { grid-column: 1; grid-row: 7; margin: 0 36px 36px; width: auto; }
.pro-elite .feature-list { grid-column: 2; grid-row: 1 / span 6; align-self: start; margin: 40px 36px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 14px; }
.pro-elite .third-party { grid-column: 2; grid-row: 7; align-self: end; margin: 0 36px 36px; }
.pro-elite .elite-badge {
  top: 22px; right: 22px; color: #1A0F02; letter-spacing: 0.18em;
  background: linear-gradient(110deg, #B8862E, #F8E6B4 45%, #E5C37A 60%, #B8862E); background-size: 200% 100%;
  box-shadow: 0 0 0 1px rgba(248, 230, 180, 0.6), 0 0 26px -4px rgba(229, 195, 122, 0.7);
}
.pro-elite .pro-icon { width: 58px; height: 58px; border-radius: 16px; }
.pro-elite .pro-icon svg { width: 28px; height: 28px; }
.price-card.pro-elite:hover { transform: translateY(-4px); }

@media (max-width: 980px) {
  .pro-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .price-card.pro-elite { display: flex; flex-direction: column; }
  .pro-elite .price-head { border-right: 0; border-bottom: 1px solid var(--lux-line); padding: 56px 28px 26px; }
  .pro-elite .recurring, .pro-elite .delivery, .pro-elite .third-party { margin: 0 28px 18px; }
  .pro-elite .feature-list { order: 2; margin: 24px 28px 18px; grid-template-columns: minmax(0, 1fr); }
  .pro-elite .recurring { order: 1; margin-top: 24px; }
  .pro-elite .third-party { order: 3; }
  .pro-elite .delivery { order: 4; }
  .pro-elite .plan-btn { order: 5; margin: 0 28px 28px; }
  .pro-elite .elite-badge { position: absolute; top: 18px; left: 28px; right: auto; margin: 0; }
}
.billing-toggle { width: min(420px, 100%); }
.billing-toggle button { flex-direction: column; gap: 2px; min-height: 40px; padding: 4px 6px; }
.billing-toggle .save { font-size: 0.5625rem; padding: 0 6px; line-height: 1.5; }
@media (min-width: 981px) {
  .price-card.pro-elite {
    background:
      radial-gradient(520px 360px at 0% 0%, rgba(147, 51, 234, 0.5), transparent 70%),
      radial-gradient(380px 300px at 30% 100%, rgba(229, 195, 122, 0.07), transparent 70%),
      linear-gradient(90deg, transparent calc(44.444% - 1px), rgba(229, 195, 122, 0.3) calc(44.444% - 1px), rgba(229, 195, 122, 0.3) 44.444%, transparent 44.444%),
      linear-gradient(90deg, #22104A 0, #12081F 44.444%, rgba(8, 4, 16, 0.97) 44.444%);
  }
  .pro-elite .price-head { background: none; border-right: 0; }
  .pro-elite .feature-list { margin-top: 84px; }
}

/* choose buttons on add-ons and charge cards */
.addon-grid li, .charge-card { display: flex; flex-direction: column; }
.addon-grid li > p:last-of-type { flex: 1; }
.charge-card > p:last-of-type { flex: 1; }
.addon-btn { margin-top: 18px; width: 100%; }
.charge-card .addon-btn { align-self: flex-start; width: auto; min-width: 180px; }
@media (max-width: 640px) { .charge-card .addon-btn { width: 100%; } }
.charge-card .charge-tag { align-self: flex-start; }

/* leadership: three people, initials when no photo is set */
.team-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 1180px; }
.avatar-initials {
  position: relative; z-index: 2; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  border: 4px solid var(--bg-1); background: radial-gradient(circle at 50% 30%, var(--surface-2), var(--bg-2));
  font: 700 3.4rem/1 var(--font-display); font-stretch: 112%; letter-spacing: 0.02em; color: var(--accent-text);
}

/* service package pages: key facts, server spec, exclusions */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; }
.facts li { display: flex; flex-direction: column; gap: 4px; padding: 24px; border-radius: var(--radius); background: linear-gradient(180deg, var(--card-a), var(--card-b)); border: 1px solid var(--line); }
.fact-label { font-size: 0.875rem; font-weight: 600; color: var(--accent-text); }
.facts strong { font: 700 2rem/1.1 var(--font-display); font-stretch: 108%; color: var(--text); }
.facts span:last-child { color: var(--text-2); font-size: 0.9375rem; }
.os-list li { font-size: 1rem; padding: 10px 16px; }
.timeline li::before { width: 40px; height: 40px; }
.timeline li { grid-template-columns: 40px 1fr; padding-bottom: 20px; }
.timeline li:not(:last-child)::after { left: 19.5px; top: 40px; }
.timeline h3 { margin-top: 8px; }
.timeline p { color: var(--accent-text); font-weight: 600; }
.spec-card { margin-top: 20px; padding: 22px 24px; border-radius: var(--radius); background: var(--card-soft); border: 1px solid var(--accent-line); }
.spec-card h3 { font-size: 1.0625rem; margin-bottom: 12px; }
.spec-list { margin: 0; display: grid; gap: 0; }
.spec-list > div { display: grid; grid-template-columns: 90px 1fr; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.spec-list dt { color: var(--text-3); font-size: 0.9375rem; }
.spec-list dd { margin: 0; color: var(--text); }
.exclusion-list { list-style: none; display: grid; gap: 10px; }
.exclusion-list li { position: relative; padding: 14px 18px 14px 46px; border-radius: var(--radius-sm); background: var(--card-soft); border: 1px solid var(--line); color: var(--text); }
.exclusion-list li::before { content: ""; position: absolute; left: 20px; top: 50%; width: 12px; height: 2px; background: var(--text-3); }
.charge-card .charge-price + .charge-price { margin-top: -4px !important; }
@media (max-width: 980px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .facts { grid-template-columns: minmax(0, 1fr); } }

/* ERPNext packages */
.erp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; align-items: stretch; }
.erp-card { position: relative; display: flex; flex-direction: column; padding: 32px 28px 28px; border-radius: 20px; background: linear-gradient(180deg, var(--card-a), var(--card-b)); border: 1px solid var(--line); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.erp-card:hover { transform: translateY(-5px); border-color: var(--accent-line); box-shadow: var(--shadow), 0 0 50px -20px var(--accent-glow); }
.erp-card.featured { border-color: var(--accent-line); box-shadow: 0 0 70px -28px var(--accent-glow); }
.erp-badge { position: absolute; top: -13px; left: 28px; padding: 6px 14px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 0.8125rem; }
.erp-card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.erp-price { font: 700 2rem/1.1 var(--font-display); font-stretch: 105%; color: var(--accent-text); margin-bottom: 12px; }
.erp-price span { font: 500 0.9375rem var(--font-body); color: var(--text-3); }
.erp-for { color: var(--text-2); font-size: 0.9688rem; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.erp-card .feature-list li::before { background: var(--accent-soft); border-color: var(--accent-line); }
.erp-card .feature-list li::after { border-color: var(--accent-text); }
.erp-card .delivery { margin-top: auto; background: var(--accent-soft); }
.erp-card .plan-link { width: 100%; }
.care-list { margin: 6px 0 18px; }
.care-list li::before { background: var(--accent-soft); border-color: var(--accent-line); }
.care-list li::after { border-color: var(--accent-text); }
.app-grid li p:last-child { flex: none; }
@media (max-width: 1100px) { .erp-grid { grid-template-columns: minmax(0, 1fr); max-width: 600px; margin: 0 auto; } }
.erp-card, .care-list, .page-service .feature-list { --neon-soft: var(--accent-soft); --neon-line: var(--accent-line); --neon-text: var(--accent-text); }
.erp-card .delivery { display: block; }

/* Partner line on service heroes */
.partner-line { margin-top: .9rem; font-size: .95rem; opacity: .85; }
.partner-line strong { color: var(--accent-text); font-weight: 600; }

/* =========================================================
   Visual service pages: icon tiles, animated scenes, journey
   ========================================================= */
.ti { stroke-width: 1.7; }
.ti .flow { stroke-dasharray: 2 2.5; animation: flow9 1.2s linear infinite; }
.ti .draw { stroke-dasharray: 14; stroke-dashoffset: 14; animation: draw14 2.8s ease-in-out infinite; }
.ti .blink { animation: blink 1.8s ease-in-out infinite; }
.ti .blink.d2, .ti .grow.d2, .ti .sl.d2 { animation-delay: .35s; }
.ti .grow.d3, .ti .sl.d3 { animation-delay: .7s; }
.ti .spin { transform-box: fill-box; transform-origin: center; animation: spin 9s linear infinite; }
.ti .grow { transform-box: fill-box; transform-origin: 50% 100%; animation: grow 1.4s ease-in-out infinite alternate; }
.ti .needle { transform-box: view-box; transform-origin: 12px 17px; animation: needle 2.2s ease-in-out infinite alternate; }
.ti .hand { transform-box: view-box; transform-origin: 12px 12px; animation: spin 5s linear infinite; }
.ti .swing { transform-box: view-box; transform-origin: 12px 4px; animation: swing 2.4s ease-in-out infinite; }
.ti .shake { transform-box: fill-box; transform-origin: center; animation: shake 2.4s ease-in-out infinite; }
.ti .drive { animation: drive 2.6s ease-in-out infinite; }
.ti .sl { fill: var(--surface); animation: slide 2.6s ease-in-out infinite alternate; }
.ti .ring { stroke-width: 1.2; }
@keyframes flow9 { to { stroke-dashoffset: -9; } }
@keyframes draw14 { 0% { stroke-dashoffset: 14; } 45%, 75% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -14; } }
@keyframes grow { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
@keyframes needle { from { transform: rotate(-70deg); } to { transform: rotate(20deg); } }
@keyframes swing { 0%, 60%, 100% { transform: rotate(0); } 12% { transform: rotate(14deg); } 24% { transform: rotate(-12deg); } 36% { transform: rotate(8deg); } 48% { transform: rotate(-4deg); } }
@keyframes shake { 0%, 50%, 100% { transform: rotate(0); } 5%, 15%, 25%, 35% { transform: rotate(-9deg); } 10%, 20%, 30%, 40% { transform: rotate(9deg); } }
@keyframes drive { 0%, 100% { transform: translateX(-1px); } 50% { transform: translateX(2px); } }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(5px); } }

/* icon tiles */
.tiles { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tiles.t3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles li { position: relative; padding: 22px 20px 20px; border-radius: var(--radius); background: linear-gradient(180deg, var(--card-a), var(--card-b)); border: 1px solid var(--line); transition: border-color .25s ease, transform .25s ease; }
.tiles li:hover { border-color: var(--accent-line); transform: translateY(-4px); }
.tile-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; margin-bottom: 14px; color: var(--accent-text); background: radial-gradient(circle at 30% 25%, var(--accent-glow), transparent 70%), var(--accent-soft); border: 1px solid var(--accent-line); transition: box-shadow .25s ease, transform .25s ease; }
.tile-ic .ai { width: 28px; height: 28px; }
.tiles li:hover .tile-ic { box-shadow: 0 0 26px -4px var(--accent-glow); transform: scale(1.06); }
.tiles h3 { font-size: 1rem; line-height: 1.3; margin: 0 0 4px; }
.tiles p { margin: 0; font-size: .9063rem; line-height: 1.45; color: var(--text-2); }
.tiles.compact li { display: grid; grid-template-columns: 44px 1fr; gap: 0 14px; align-items: center; padding: 16px 18px; }
.tiles.compact .tile-ic { width: 44px; height: 44px; border-radius: 12px; margin: 0; grid-row: span 2; }
.tiles.compact .tile-ic .ai { width: 24px; height: 24px; }
.tiles.compact h3 { margin: 0; align-self: end; }
.tiles.compact p { align-self: start; }

/* animated scene beside short copy */
.scene { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.scene.flip .scene-art { order: -1; }
.scene .section-head { margin-bottom: 0; }
.scene-art { position: relative; padding: 18px; border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--card-a), var(--card-b)); border: 1px solid var(--line-strong); box-shadow: var(--shadow-panel), 0 0 100px -40px var(--accent-glow); }
.scene-art svg { display: block; width: 100%; height: auto; }
.mini { list-style: none; display: grid; gap: 12px; margin-top: 24px; }
.mini li { display: flex; gap: 12px; align-items: center; font-weight: 600; color: var(--text); }
.mini li .ai { flex: none; width: 34px; height: 34px; padding: 6px; border-radius: 10px; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.mini li small { display: block; font-weight: 400; font-size: .875rem; color: var(--text-2); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chips li { padding: 6px 13px; border-radius: 999px; font-size: .8438rem; font-weight: 600; color: var(--text); background: var(--card-soft); border: 1px solid var(--line-strong); }
.chips li.on { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-soft); }

/* scene svg extras (inside .schematic) */
.schematic .pk { fill: var(--accent); filter: drop-shadow(0 0 4px var(--accent)); }
.schematic .pk2 { fill: #A78BFA; filter: drop-shadow(0 0 4px #A78BFA); }
.schematic .ok { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.schematic .bar-ln { fill: var(--line-strong); }
.schematic .bar-ac { fill: var(--accent); }
.schematic .soft { fill: var(--accent-soft); stroke: var(--accent-line); stroke-width: 1; }
.schematic .ghost { fill: var(--line); }
.schematic .t-acc { fill: var(--accent-text); }
.schematic .t-big { font: 700 20px var(--font-display); fill: var(--text); }
.schematic .t-xs { font-weight: 500; font-size: 9px; fill: var(--text-3); }
.schematic .ico { fill: none; stroke: var(--accent-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.schematic .ico-m { fill: none; stroke: var(--text-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.schematic .pop, .schematic .pop2, .schematic .pop3, .schematic .pop4 { transform-box: fill-box; transform-origin: center; }
.schematic .spin-s { transform-box: fill-box; transform-origin: center; animation: spin 6s linear infinite; }
.schematic .glow { animation: glowp 2.4s ease-in-out infinite; }
.schematic .bob { animation: float 3s ease-in-out infinite; }
.schematic .eq { transform-box: fill-box; transform-origin: 50% 50%; animation: grow 0.9s ease-in-out infinite alternate; }
.schematic .eq:nth-of-type(2n) { animation-delay: .25s; } .schematic .eq:nth-of-type(3n) { animation-delay: .5s; }
.schematic .seq1, .schematic .seq2, .schematic .seq3 { animation: seq 6s infinite; }
.schematic .seq2 { animation-delay: 2s; } .schematic .seq3 { animation-delay: 4s; }
@media (prefers-reduced-motion: no-preference) {
  .schematic .pop { animation: pop 6s ease-in-out infinite; }
  .schematic .pop2 { animation: pop 6s ease-in-out infinite 1.5s; opacity: 0; }
  .schematic .pop3 { animation: pop 6s ease-in-out infinite 3s; opacity: 0; }
  .schematic .pop4 { animation: pop 6s ease-in-out infinite 4.5s; opacity: 0; }
}
@keyframes pop { 0%, 6% { opacity: 0; transform: translateY(8px) scale(.94); } 14%, 78% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes glowp { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes seq { 0%, 30%, 100% { fill: var(--node-fill); } 4%, 26% { fill: var(--accent); } }

/* journey stepper */
.journey { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; position: relative; counter-reset: j; }
.journey::before { content: ""; position: absolute; left: 7%; right: 7%; top: 31px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent-line) 0%, var(--accent) 50%, var(--accent-line) 100%); background-size: 200% 100%; animation: jline 3s linear infinite; }
.journey li { position: relative; text-align: center; counter-increment: j; }
.j-ic { position: relative; z-index: 1; display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 12px; border-radius: 50%; color: var(--accent-text); background: var(--surface); border: 1px solid var(--accent-line); animation: jpulse 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1s); }
.j-ic::after { content: counter(j); position: absolute; top: -3px; right: -3px; width: 21px; height: 21px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 700 .6875rem/21px var(--font-display); text-align: center; }
.j-ic .ai { width: 28px; height: 28px; }
.journey b { display: block; font-size: .9375rem; color: var(--text); }
.journey small { display: block; margin-top: 3px; font-size: .8125rem; line-height: 1.35; color: var(--text-2); }
@keyframes jline { to { background-position: -200% 0; } }
@keyframes jpulse { 0%, 14% { border-color: var(--accent); box-shadow: 0 0 26px -2px var(--accent-glow); transform: scale(1.06); } 22%, 100% { transform: none; } }

@media (max-width: 1080px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .scene { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .scene.flip .scene-art { order: 0; }
  .tiles, .tiles.t3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .journey::before { left: 30px; right: auto; top: 30px; bottom: 30px; width: 2px; height: auto; background: linear-gradient(180deg, var(--accent), var(--accent-line)); animation: none; }
  .journey li { display: grid; grid-template-columns: 62px 1fr; grid-template-rows: auto auto; column-gap: 16px; text-align: left; }
  .j-ic { margin: 0; grid-row: 1 / span 2; }
  .journey b { grid-column: 2; align-self: end; }
  .journey small { grid-column: 2; align-self: start; }
}
@media (max-width: 520px) {
  .tiles li { padding: 16px 14px; }
  .tiles { gap: 10px; }
  .tile-ic { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 10px; }
  .tile-ic .ai { width: 24px; height: 24px; }
  .tiles h3 { font-size: .9375rem; }
  .tiles p { font-size: .8438rem; }
  .tiles.compact { grid-template-columns: minmax(0, 1fr); }
  .scene-art { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ti .draw { stroke-dashoffset: 0; }
  .schematic .pk, .schematic .pk2 { display: none; }
  .schematic .pop2, .schematic .pop3, .schematic .pop4 { opacity: 1; }
}
.schematic .truck-go { animation: truckgo 6s ease-in-out infinite; }
@keyframes truckgo { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 75% { transform: translateX(120px); opacity: 1; } 85%, 100% { transform: translateX(126px); opacity: 0; } }
.schematic .t-btn { font: 700 10px var(--font-body); fill: var(--on-accent); }
.schematic .shake-s { transform-box: fill-box; transform-origin: center; animation: shake 2.4s ease-in-out infinite; }
.schematic .swapA, .schematic .swapB { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .schematic .swapA { animation: swap 6s ease-in-out infinite; }
  .schematic .swapB { animation: swap 6s ease-in-out infinite 3s; opacity: 0; }
  .schematic .swapA.d1 { animation-delay: 1.5s; opacity: 0; }
  .schematic .swapB.d1 { animation-delay: 4.5s; }
}
@keyframes swap { 0% { opacity: 0; transform: translateY(6px); } 6%, 42% { opacity: 1; transform: none; } 48%, 100% { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .schematic .swapB { display: none; } }
.journey, .tiles, .mini, .chips { padding-left: 0; margin-left: 0; }


/* ===== Service pricing and add-on UI (visual only). Scoped to .px-sec sections on five service pages. ===== */
.px-sec { position: relative; isolation: isolate; overflow: hidden; color: var(--text); }
.px-sec > .wrap { position: relative; z-index: 1; }
.px-sec::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.px-sec .erp-card, .px-sec .charge-card { position: relative; min-width: 0; border-radius: 16px; background: linear-gradient(180deg, var(--card-a), var(--card-b)); border: 1px solid var(--line); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.px-sec .erp-card:hover, .px-sec .charge-card:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: 0 24px 50px -30px var(--accent-glow); }
.px-sec .erp-card.featured { border-color: var(--accent-line); box-shadow: 0 0 60px -26px var(--accent-glow); }
.px-sec .erp-price, .px-sec .charge-price { font-variant-numeric: tabular-nums; }
.px-sec .erp-card .plan-link, .px-sec .charge-card .addon-btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 760px) { .px-sec .erp-card, .px-sec .charge-card { padding: 26px 22px; } }

/* A. Automated Windows Deployment: CyberForge */
.px-cyber { --accent-2: #0891B2; --accent: #22D3EE; --accent-text: #67E8F9; --accent-soft: rgba(34, 211, 238, .1); --accent-line: rgba(34, 211, 238, .5); --accent-glow: rgba(34, 211, 238, .35); --on-accent: #031019; --neon-grad: linear-gradient(135deg, #0E7490, #22D3EE); --neon-glow: rgba(34, 211, 238, .4); --text: #E6F7FF; --text-2: #9CC2D6; --text-3: #6A8DA3; --line: rgba(34, 211, 238, .16); --line-strong: rgba(34, 211, 238, .32); --card-a: #0C1B2F; --card-b: #07111F; background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(34, 211, 238, .14), transparent 70%), #050B1A; }
.px-cyber::before { background-image: linear-gradient(rgba(34, 211, 238, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 211, 238, .07) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 90%); mask-image: linear-gradient(180deg, #000 10%, transparent 90%); }
.px-cyber .erp-card, .px-cyber .charge-card { border-radius: 6px; border-color: rgba(34, 211, 238, .32); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .04), 0 0 26px -18px rgba(34, 211, 238, .7); }
.px-cyber .erp-card::before, .px-cyber .charge-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); pointer-events: none; }
.px-cyber .erp-card::after, .px-cyber .charge-card::after { content: ""; position: absolute; top: 16px; right: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .px-cyber .erp-card::after, .px-cyber .charge-card::after { animation: px-ping 2.4s ease-out infinite; }
  @keyframes px-ping { 0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, .55); } 100% { box-shadow: 0 0 0 10px rgba(34, 211, 238, 0); } }
}

/* B. ERPNext Self-Hosting: Nexus */
.px-nexus { --accent-2: #10B981; --accent: #34D399; --accent-text: #6EE7B7; --accent-soft: rgba(52, 211, 153, .1); --accent-line: rgba(52, 211, 153, .4); --accent-glow: rgba(16, 185, 129, .3); --on-accent: #04160F; --neon-grad: linear-gradient(135deg, #047857, #34D399); --neon-glow: rgba(52, 211, 153, .3); --text: #ECFDF5; --text-2: #B7D8C9; --text-3: #7FA595; --line: rgba(110, 231, 183, .14); --line-strong: rgba(110, 231, 183, .28); --card-a: #0F2119; --card-b: #0A170F; background: radial-gradient(ellipse 70% 50% at 85% 0%, rgba(16, 185, 129, .2), transparent 70%), linear-gradient(180deg, #06140F, #0A1A13); }
.px-nexus::before { background-image: radial-gradient(rgba(110, 231, 183, .14) 1px, transparent 1.2px); background-size: 22px 22px; }
.px-nexus .erp-card, .px-nexus .charge-card { border-radius: 12px; border-left: 3px solid var(--accent); }
.px-nexus .erp-card h3, .px-nexus .charge-card h3 { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.px-nexus .erp-card::before, .px-nexus .charge-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 100% 0, rgba(110, 231, 183, .12), transparent 55%); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .px-nexus .erp-card.featured { animation: px-breathe 4s ease-in-out infinite; }
  @keyframes px-breathe { 50% { box-shadow: 0 0 70px -22px rgba(52, 211, 153, .6); } }
}

/* C. Shopify Stores: Commerce Atelier (warm ivory, editorial) */
.px-atelier { --accent-2: #E9836A; --accent: #B5573B; --accent-text: #9C4529; --accent-soft: rgba(181, 87, 59, .1); --accent-line: rgba(181, 87, 59, .32); --accent-glow: rgba(181, 87, 59, .2); --on-accent: #FFF8F2; --neon-grad: linear-gradient(135deg, #B5573B, #E9836A); --neon-glow: rgba(233, 131, 106, .3); --text: #2B2622; --text-2: #5B5048; --text-3: #877A6F; --line: #E4D6C4; --line-strong: #CBBBA6; --card-a: #FFFDF9; --card-b: #FBF4EA; background: linear-gradient(180deg, #F8F2E9, #F1E7D8); }
.px-atelier .erp-card, .px-atelier .charge-card { border-radius: 4px; box-shadow: 0 1px 0 rgba(43, 38, 34, .04), 0 22px 40px -32px rgba(43, 38, 34, .45); }
.px-atelier .erp-card h3, .px-atelier .charge-card h3, .px-atelier .erp-price, .px-atelier .charge-price { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-weight: 600; }
.px-atelier .erp-card h3::after, .px-atelier .charge-card h3::after { content: ""; display: block; width: 40px; height: 2px; margin-top: 12px; background: var(--neon-grad); }
@media (prefers-reduced-motion: no-preference) {
  .px-atelier .erp-card, .px-atelier .charge-card { animation: px-rise .9s cubic-bezier(.2, .7, .2, 1) backwards; }
  .px-atelier .erp-card:nth-child(2), .px-atelier .charge-card:nth-child(2) { animation-delay: .12s; }
  .px-atelier .erp-card:nth-child(3), .px-atelier .charge-card:nth-child(3) { animation-delay: .24s; }
  @keyframes px-rise { from { opacity: 0; transform: translateY(14px); } }
}

/* D. Third-Party Integrations: Orbit Connect (indigo, graphite, orange) */
.px-orbit { --accent-2: #FFB547; --accent: #FF7A1A; --accent-text: #FFB067; --accent-soft: rgba(255, 122, 26, .12); --accent-line: rgba(255, 122, 26, .45); --accent-glow: rgba(255, 122, 26, .3); --on-accent: #1A0B00; --neon-grad: linear-gradient(135deg, #FF7A1A, #FFB547); --neon-glow: rgba(255, 122, 26, .35); --text: #F4F1FF; --text-2: #BDB7DD; --text-3: #837CA8; --line: rgba(150, 130, 255, .16); --line-strong: rgba(150, 130, 255, .3); --card-a: #1C1839; --card-b: #120F27; background: radial-gradient(ellipse 60% 60% at 0% 0%, rgba(99, 102, 241, .25), transparent 70%), linear-gradient(180deg, #110C29, #0D0D17); }
.px-orbit::before { background-image: radial-gradient(circle, rgba(255, 181, 71, .45) 1.3px, transparent 1.8px); background-size: 96px 96px; opacity: .3; }
.px-orbit .erp-card, .px-orbit .charge-card { border-radius: 14px; }
.px-orbit .erp-card::after, .px-orbit .charge-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 14px 14px 0 0; background: linear-gradient(90deg, transparent 35%, var(--accent) 50%, transparent 65%) no-repeat; background-size: 300% 100%; background-position: 50% 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .px-orbit .erp-card::after, .px-orbit .charge-card::after { animation: px-travel 3.2s linear infinite; }
  @keyframes px-travel { from { background-position: 150% 0; } to { background-position: -150% 0; } }
}

/* E. Cloud Calling and IVR: Vox Cloud (burgundy, charcoal, ruby) */
.px-vox { --accent-2: #9F1239; --accent: #E11D48; --accent-text: #FB7185; --accent-soft: rgba(225, 29, 72, .12); --accent-line: rgba(225, 29, 72, .45); --accent-glow: rgba(225, 29, 72, .32); --on-accent: #FFF5F6; --neon-grad: linear-gradient(135deg, #9F1239, #E11D48); --neon-glow: rgba(225, 29, 72, .35); --text: #FFF7F3; --text-2: #DCC9CD; --text-3: #A38D93; --line: rgba(201, 206, 214, .16); --line-strong: rgba(201, 206, 214, .3); --card-a: #2B0F19; --card-b: #1A0A11; background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(225, 29, 72, .2), transparent 70%), linear-gradient(180deg, #24070F, #140A0D); }
.px-vox::before { background-image: repeating-linear-gradient(90deg, rgba(201, 206, 214, .05) 0 1px, transparent 1px 16px); }
.px-vox .erp-card, .px-vox .charge-card { border-radius: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='48' viewBox='0 0 160 48'%3E%3Cpath d='M0 24Q20 4 40 24T80 24T120 24T160 24' fill='none' stroke='%23E11D48' stroke-opacity='.45' stroke-width='1.5'/%3E%3C/svg%3E") 0 100% / 160px 48px repeat-x, linear-gradient(180deg, var(--card-a), var(--card-b)); }
.px-vox .erp-card.featured { box-shadow: 0 0 70px -24px var(--accent-glow); }
@media (prefers-reduced-motion: no-preference) {
  .px-vox .erp-card, .px-vox .charge-card { animation: px-wave 9s linear infinite; }
  @keyframes px-wave { from { background-position: 0 100%, 0 0; } to { background-position: 160px 100%, 0 0; } }
}


/* ===== Whole-page service themes. Each page sets its palette on <body>; the site's token system does the rest. ===== */
body.px-theme-cyber { --bg-0: #030814; --bg-1: #050B1A; --bg-2: #081426; --surface: #0C1B2F; --surface-2: #11243C; --card-a: #0C1B2F; --card-b: #07111F; --card-soft: rgba(12, 27, 47, .6); --line: rgba(34, 211, 238, .14); --line-strong: rgba(34, 211, 238, .3); --grid-line: rgba(34, 211, 238, .07); --text: #E6F7FF; --text-2: #9CC2D6; --text-3: #6A8DA3; --accent: #22D3EE; --accent-2: #0891B2; --accent-text: #67E8F9; --accent-hover: #A5F3FC; --accent-soft: rgba(34, 211, 238, .1); --accent-line: rgba(34, 211, 238, .45); --accent-glow: rgba(34, 211, 238, .35); --glow-a: rgba(34, 211, 238, .16); --glow-b: rgba(59, 130, 246, .14); --on-accent: #031019; --h-grad-a: #FFFFFF; --h-grad-b: #7DD3FC; --header-bg: rgba(3, 8, 20, .9); --node-fill: #0A1A2E; --node-stroke: rgba(34, 211, 238, .35); --core-fill: #0B3A4A; --core-text: #FFFFFF; --core-sub: #A5F3FC; --input-bg: rgba(3, 8, 20, .6); --spot: rgba(34, 211, 238, .12); --fx-dot: 103, 232, 249; --fx-line: 34, 211, 238; background-color: #050B1A; color: var(--text); }
body.px-theme-cyber::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(34, 211, 238, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 211, 238, .06) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
body.px-theme-cyber .btn { border-radius: 6px; }
body.px-theme-cyber .feature-grid li, body.px-theme-cyber .check-list li, body.px-theme-cyber .related a, body.px-theme-cyber .svc-detail, body.px-theme-cyber .schematic-wrap { border-radius: 6px; }
body.px-theme-cyber .feature-grid h3::before { border-radius: 0; transform: rotate(45deg); }

body.px-theme-nexus { --bg-0: #040E0B; --bg-1: #06140F; --bg-2: #0A1A13; --surface: #0F2119; --surface-2: #153024; --card-a: #0F2119; --card-b: #0A170F; --card-soft: rgba(15, 33, 25, .6); --line: rgba(110, 231, 183, .14); --line-strong: rgba(110, 231, 183, .28); --grid-line: rgba(110, 231, 183, .07); --text: #ECFDF5; --text-2: #B7D8C9; --text-3: #7FA595; --accent: #34D399; --accent-2: #10B981; --accent-text: #6EE7B7; --accent-hover: #A7F3D0; --accent-soft: rgba(52, 211, 153, .1); --accent-line: rgba(52, 211, 153, .4); --accent-glow: rgba(16, 185, 129, .3); --glow-a: rgba(16, 185, 129, .15); --glow-b: rgba(20, 184, 166, .1); --on-accent: #04160F; --h-grad-a: #FFFFFF; --h-grad-b: #A7F3D0; --header-bg: rgba(4, 14, 11, .9); --node-fill: #0F2119; --node-stroke: rgba(110, 231, 183, .32); --core-fill: #0B3A2A; --core-text: #FFFFFF; --core-sub: #A7F3D0; --input-bg: rgba(4, 14, 11, .6); --spot: rgba(52, 211, 153, .12); --fx-dot: 110, 231, 183; --fx-line: 52, 211, 153; background-color: #06140F; color: var(--text); }
body.px-theme-nexus::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(110, 231, 183, .13) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%); mask-image: linear-gradient(180deg, #000, transparent 75%); }
body.px-theme-nexus .btn { border-radius: 10px; }
body.px-theme-nexus .feature-grid li, body.px-theme-nexus .related a, body.px-theme-nexus .svc-detail, body.px-theme-nexus .schematic-wrap { border-radius: 12px; }
body.px-theme-nexus .feature-grid li { border-left: 3px solid var(--accent); }
body.px-theme-nexus .facts li { border-radius: 12px; }

body.px-theme-atelier { --bg-0: #F1E7D8; --bg-1: #F8F2E9; --bg-2: #F1E7D8; --surface: #FFFDF9; --surface-2: #F4ECE0; --card-a: #FFFDF9; --card-b: #FBF4EA; --card-soft: #FBF6EE; --line: #E4D6C4; --line-strong: #CBBBA6; --grid-line: rgba(43, 38, 34, .05); --text: #2B2622; --text-2: #5B5048; --text-3: #877A6F; --accent: #B5573B; --accent-2: #E9836A; --accent-text: #9C4529; --accent-hover: #8A3F26; --accent-soft: rgba(181, 87, 59, .1); --accent-line: rgba(181, 87, 59, .32); --accent-glow: rgba(181, 87, 59, .2); --glow-a: rgba(233, 131, 106, .14); --glow-b: rgba(181, 87, 59, .08); --on-accent: #FFF8F2; --h-grad-a: #2B2622; --h-grad-b: #8A5A45; --header-bg: rgba(248, 242, 233, .94); --node-fill: #FFFDF9; --node-stroke: rgba(43, 38, 34, .25); --core-fill: #F7E7DE; --core-text: #2B2622; --core-sub: #9C4529; --input-bg: #FFFDF9; --shadow: 0 22px 40px -30px rgba(43, 38, 34, .4); --shadow-panel: 0 30px 60px -40px rgba(43, 38, 34, .4); --spot: rgba(181, 87, 59, .08); --map-filter: none; --fx-dot: 156, 69, 41; --fx-line: 120, 90, 70; background-color: #F8F2E9; color: var(--text); }
body.px-theme-atelier h1, body.px-theme-atelier h2, body.px-theme-atelier h3 { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-weight: 600; letter-spacing: .005em; }
body.px-theme-atelier .btn { border-radius: 2px; letter-spacing: .02em; }
body.px-theme-atelier .feature-grid li, body.px-theme-atelier .check-list li, body.px-theme-atelier .related a, body.px-theme-atelier .svc-detail, body.px-theme-atelier .schematic-wrap, body.px-theme-atelier .facts li { border-radius: 4px; box-shadow: 0 22px 40px -32px rgba(43, 38, 34, .4); }
body.px-theme-atelier .feature-grid h3::before { border-radius: 50%; background: var(--accent-2); box-shadow: none; }

body.px-theme-orbit { --bg-0: #0A0816; --bg-1: #110C29; --bg-2: #171236; --surface: #1C1839; --surface-2: #241E4A; --card-a: #1C1839; --card-b: #120F27; --card-soft: rgba(28, 24, 57, .6); --line: rgba(150, 130, 255, .16); --line-strong: rgba(150, 130, 255, .3); --grid-line: rgba(150, 130, 255, .07); --text: #F4F1FF; --text-2: #BDB7DD; --text-3: #837CA8; --accent: #FF7A1A; --accent-2: #FFB547; --accent-text: #FFB067; --accent-hover: #FFD08A; --accent-soft: rgba(255, 122, 26, .12); --accent-line: rgba(255, 122, 26, .45); --accent-glow: rgba(255, 122, 26, .3); --glow-a: rgba(99, 102, 241, .2); --glow-b: rgba(255, 122, 26, .1); --on-accent: #1A0B00; --h-grad-a: #FFFFFF; --h-grad-b: #FFC58A; --header-bg: rgba(14, 11, 34, .9); --node-fill: #1C1839; --node-stroke: rgba(255, 181, 71, .32); --core-fill: #3A2410; --core-text: #FFFFFF; --core-sub: #FFD08A; --input-bg: rgba(14, 11, 34, .6); --spot: rgba(255, 122, 26, .12); --fx-dot: 255, 181, 71; --fx-line: 150, 130, 255; background-color: #110C29; color: var(--text); }
body.px-theme-orbit::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, rgba(255, 181, 71, .45) 1.3px, transparent 1.8px); background-size: 96px 96px; opacity: .25; }
body.px-theme-orbit .btn { border-radius: 12px; }
body.px-theme-orbit .feature-grid li, body.px-theme-orbit .check-list li, body.px-theme-orbit .related a, body.px-theme-orbit .svc-detail, body.px-theme-orbit .schematic-wrap, body.px-theme-orbit .facts li { border-radius: 14px; }
body.px-theme-orbit .tag-list li { border-radius: 10px; }

body.px-theme-vox { --bg-0: #140A0D; --bg-1: #1A0A11; --bg-2: #220D16; --surface: #2B0F19; --surface-2: #361422; --card-a: #2B0F19; --card-b: #1A0A11; --card-soft: rgba(43, 15, 25, .6); --line: rgba(201, 206, 214, .16); --line-strong: rgba(201, 206, 214, .3); --grid-line: rgba(201, 206, 214, .06); --text: #FFF7F3; --text-2: #DCC9CD; --text-3: #A38D93; --accent: #E11D48; --accent-2: #9F1239; --accent-text: #FB7185; --accent-hover: #FDA4AF; --accent-soft: rgba(225, 29, 72, .12); --accent-line: rgba(225, 29, 72, .45); --accent-glow: rgba(225, 29, 72, .32); --glow-a: rgba(225, 29, 72, .16); --glow-b: rgba(201, 206, 214, .05); --on-accent: #FFF5F6; --h-grad-a: #FFFFFF; --h-grad-b: #E2C6CC; --header-bg: rgba(20, 10, 13, .9); --node-fill: #2B0F19; --node-stroke: rgba(201, 206, 214, .3); --core-fill: #4A0F20; --core-text: #FFFFFF; --core-sub: #FDA4AF; --input-bg: rgba(20, 10, 13, .6); --spot: rgba(225, 29, 72, .12); --fx-dot: 251, 113, 133; --fx-line: 201, 206, 214; background-color: #1A0A11; color: var(--text); }
body.px-theme-vox::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: repeating-linear-gradient(90deg, rgba(201, 206, 214, .05) 0 1px, transparent 1px 16px); }
body.px-theme-vox .btn { border-radius: 999px; }
body.px-theme-vox .feature-grid li, body.px-theme-vox .check-list li, body.px-theme-vox .related a, body.px-theme-vox .svc-detail, body.px-theme-vox .schematic-wrap, body.px-theme-vox .facts li { border-radius: 18px; }
body.px-theme-vox .tag-list li { border-radius: 999px; }

/* Per-theme section fills let the page background show through, keeping one continuous surface */
body[class*="px-theme-"] .section:not(.px-sec) { background: transparent; }
body[class*="px-theme-"] .section-grey:not(.px-sec) { background: rgba(255, 255, 255, .025); }
body.px-theme-atelier .section-grey:not(.px-sec) { background: rgba(43, 38, 34, .035); }
body[class*="px-theme-"] .site-footer { background: var(--bg-0); }

/* ===== Services themes (Sapphire, Lime, Moss, Aurora, Platinum) and add-on select UI ===== */

body.px-theme-sapphire {
  color-scheme: dark;
  --bg-0: #050B1F; --bg-1: #071331; --bg-2: #0A1A40; --surface: #0E1F4A; --surface-2: #15295C;
  --card-a: #0E1F4A; --card-b: #091838; --line: rgba(96,165,250,.16); --line-strong: rgba(96,165,250,.32); --grid-line: rgba(96,165,250,.07);
  --text: #EAF2FF; --text-2: #AFC4E6; --text-3: #7088B0;
  --accent: #3B82F6; --accent-2: #0EA5E9; --accent-text: #93C5FD; --accent-hover: #BFDBFE;
  --accent-soft: rgba(59,130,246,.12); --accent-line: rgba(96,165,250,.5); --accent-glow: rgba(59,130,246,.35); --glow-a: rgba(59,130,246,.2); --glow-b: rgba(14,165,233,.15);
  --on-accent: #FFFFFF; --h-grad-a: #FFFFFF; --h-grad-b: #93C5FD; --header-bg: rgba(5,11,31,.9);
  --node-fill: #0E1F4A; --node-stroke: rgba(96,165,250,.4); --core-fill: #1E3A8A; --core-text: #FFFFFF; --core-sub: #BFDBFE;
  --input-bg: rgba(5,11,31,.6); --spot: rgba(59,130,246,.12); --fx-dot: 147,197,253; --fx-line: 96,165,250;
  --neon-soft: rgba(59,130,246,.12); --neon-line: rgba(96,165,250,.5); --neon-text: #93C5FD; --neon-grad: linear-gradient(135deg, #0EA5E9, #3B82F6); --neon-glow: rgba(59,130,246,.35);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(59,130,246,.2), transparent 70%), var(--bg-0);
  background-color: #050B1F; color: var(--text);
}
body.px-theme-sapphire::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(147,197,253,.12) 1px, transparent 1.2px); background-size: 28px 28px; opacity: .6; }
body.px-theme-sapphire .section-grey { background: linear-gradient(180deg, var(--bg-1), var(--bg-2)); }


body.px-theme-lime {
  color-scheme: dark;
  --bg-0: #07080A; --bg-1: #0C0E11; --bg-2: #12151A; --surface: #161A20; --surface-2: #1E232B;
  --card-a: #171B21; --card-b: #101318; --line: rgba(163,230,53,.14); --line-strong: rgba(163,230,53,.3); --grid-line: rgba(163,230,53,.05);
  --text: #F4FFE6; --text-2: #C7D4B0; --text-3: #8A9A74;
  --accent: #A3E635; --accent-2: #65A30D; --accent-text: #BEF264; --accent-hover: #D9F99D;
  --accent-soft: rgba(163,230,53,.1); --accent-line: rgba(163,230,53,.45); --accent-glow: rgba(163,230,53,.3); --glow-a: rgba(163,230,53,.12); --glow-b: rgba(101,163,13,.12);
  --on-accent: #101A02; --h-grad-a: #FFFFFF; --h-grad-b: #D9F99D; --header-bg: rgba(7,8,10,.9);
  --node-fill: #161A20; --node-stroke: rgba(163,230,53,.35); --core-fill: #365314; --core-text: #FFFFFF; --core-sub: #D9F99D;
  --input-bg: rgba(7,8,10,.6); --spot: rgba(163,230,53,.1); --fx-dot: 190,242,100; --fx-line: 163,230,53;
  --neon-soft: rgba(163,230,53,.1); --neon-line: rgba(163,230,53,.45); --neon-text: #BEF264; --neon-grad: linear-gradient(135deg, #65A30D, #A3E635); --neon-glow: rgba(163,230,53,.3);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(163,230,53,.12), transparent 70%), var(--bg-0);
  background-color: #07080A; color: var(--text);
}
body.px-theme-lime::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: repeating-linear-gradient(0deg, rgba(163,230,53,.045) 0 1px, transparent 1px 4px); background-size: auto; opacity: .6; }
body.px-theme-lime .section-grey { background: linear-gradient(180deg, var(--bg-1), var(--bg-2)); }


body.px-theme-moss {
  color-scheme: dark;
  --bg-0: #0B0E08; --bg-1: #10140C; --bg-2: #161C10; --surface: #1B2314; --surface-2: #243019;
  --card-a: #1B2314; --card-b: #131A0E; --line: rgba(212,162,76,.15); --line-strong: rgba(212,162,76,.3); --grid-line: rgba(155,181,138,.06);
  --text: #F7F3E8; --text-2: #CFC8B0; --text-3: #8F8A70;
  --accent: #D4A24C; --accent-2: #A67C2E; --accent-text: #E8C27A; --accent-hover: #F5D99B;
  --accent-soft: rgba(212,162,76,.1); --accent-line: rgba(212,162,76,.42); --accent-glow: rgba(212,162,76,.25); --glow-a: rgba(155,181,138,.14); --glow-b: rgba(212,162,76,.1);
  --on-accent: #1A1206; --h-grad-a: #FFFFFF; --h-grad-b: #E8C27A; --header-bg: rgba(11,14,8,.9);
  --node-fill: #1B2314; --node-stroke: rgba(212,162,76,.35); --core-fill: #4A3812; --core-text: #FFFFFF; --core-sub: #F5D99B;
  --input-bg: rgba(11,14,8,.6); --spot: rgba(212,162,76,.1); --fx-dot: 232,194,122; --fx-line: 155,181,138;
  --neon-soft: rgba(212,162,76,.1); --neon-line: rgba(212,162,76,.42); --neon-text: #E8C27A; --neon-grad: linear-gradient(135deg, #A67C2E, #D4A24C); --neon-glow: rgba(212,162,76,.25);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(155,181,138,.14), transparent 70%), var(--bg-0);
  background-color: #0B0E08; color: var(--text);
}
body.px-theme-moss::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle at 20% 20%, rgba(212,162,76,.1), transparent 45%); background-size: auto; opacity: .6; }
body.px-theme-moss .section-grey { background: linear-gradient(180deg, var(--bg-1), var(--bg-2)); }


body.px-theme-aurora {
  color-scheme: dark;
  --bg-0: #0B0718; --bg-1: #120B24; --bg-2: #180F2E; --surface: #1E1438; --surface-2: #2A1D4A;
  --card-a: #1E1438; --card-b: #150C2A; --line: rgba(167,139,250,.16); --line-strong: rgba(167,139,250,.32); --grid-line: rgba(167,139,250,.06);
  --text: #F5F3FF; --text-2: #C9C1E6; --text-3: #8C84B0;
  --accent: #A78BFA; --accent-2: #7C3AED; --accent-text: #C4B5FD; --accent-hover: #DDD6FE;
  --accent-soft: rgba(167,139,250,.12); --accent-line: rgba(167,139,250,.45); --accent-glow: rgba(139,92,246,.32); --glow-a: rgba(139,92,246,.22); --glow-b: rgba(34,211,238,.1);
  --on-accent: #0B0718; --h-grad-a: #FFFFFF; --h-grad-b: #DDD6FE; --header-bg: rgba(11,7,24,.9);
  --node-fill: #1E1438; --node-stroke: rgba(167,139,250,.35); --core-fill: #3B1D7A; --core-text: #FFFFFF; --core-sub: #DDD6FE;
  --input-bg: rgba(11,7,24,.6); --spot: rgba(167,139,250,.12); --fx-dot: 196,181,253; --fx-line: 125,211,252;
  --neon-soft: rgba(167,139,250,.12); --neon-line: rgba(167,139,250,.45); --neon-text: #C4B5FD; --neon-grad: linear-gradient(135deg, #7C3AED, #A78BFA); --neon-glow: rgba(139,92,246,.32);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(139,92,246,.22), transparent 70%), var(--bg-0);
  background-color: #0B0718; color: var(--text);
}
body.px-theme-aurora::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: none; background-size: auto; opacity: 0; }
body.px-theme-aurora .section-grey { background: linear-gradient(180deg, var(--bg-1), var(--bg-2)); }


body.px-theme-platinum {
  color-scheme: dark;
  --bg-0: #07090D; --bg-1: #0C0F15; --bg-2: #11151D; --surface: #151A24; --surface-2: #1D2330;
  --card-a: #151A24; --card-b: #10141C; --line: rgba(203,213,225,.14); --line-strong: rgba(203,213,225,.28); --grid-line: rgba(203,213,225,.05);
  --text: #F8FAFC; --text-2: #CBD5E1; --text-3: #8592A6;
  --accent: #E2E8F0; --accent-2: #94A3B8; --accent-text: #F1F5F9; --accent-hover: #FFFFFF;
  --accent-soft: rgba(226,232,240,.08); --accent-line: rgba(226,232,240,.35); --accent-glow: rgba(203,213,225,.2); --glow-a: rgba(148,163,184,.14); --glow-b: rgba(99,102,241,.08);
  --on-accent: #0B0F17; --h-grad-a: #FFFFFF; --h-grad-b: #CBD5E1; --header-bg: rgba(7,9,13,.9);
  --node-fill: #151A24; --node-stroke: rgba(203,213,225,.3); --core-fill: #334155; --core-text: #FFFFFF; --core-sub: #E2E8F0;
  --input-bg: rgba(7,9,13,.6); --spot: rgba(226,232,240,.08); --fx-dot: 226,232,240; --fx-line: 148,163,184;
  --neon-soft: rgba(226,232,240,.08); --neon-line: rgba(226,232,240,.35); --neon-text: #F1F5F9; --neon-grad: linear-gradient(135deg, #94A3B8, #E2E8F0); --neon-glow: rgba(203,213,225,.2);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(148,163,184,.14), transparent 70%), var(--bg-0);
  background-color: #07090D; color: var(--text);
}
body.px-theme-platinum::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(203,213,225,.04) 1px, transparent 1px); background-size: 60px 60px; opacity: .6; }
body.px-theme-platinum .section-grey { background: linear-gradient(180deg, var(--bg-1), var(--bg-2)); }


/* ===== Light variants for the services themes (Sapphire, Lime, Moss, Aurora, Platinum) ===== */
:root[data-theme="light"] body.px-theme-sapphire {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --bg-0: #F3F7FF; --bg-1: #E9F0FC; --bg-2: #DDE8F9; --surface: #FFFFFF; --surface-2: #EEF4FF;
  --card-a: #FFFFFF; --card-b: #F5F9FF; --line: rgba(37,99,235,.16); --line-strong: rgba(37,99,235,.32); --grid-line: rgba(37,99,235,.07);
  --text: #0B1B3A; --text-2: #3B5278; --text-3: #6B7F9E;
  --accent: #2563EB; --accent-2: #0284C7; --accent-text: #1D4ED8; --accent-hover: #1E40AF;
  --accent-soft: rgba(37,99,235,.16); --accent-line: rgba(37,99,235,.35); --accent-glow: rgba(37,99,235,.16); --glow-a: rgba(37,99,235,.16); --glow-b: rgba(37,99,235,.16);
  --on-accent: #FFFFFF; --h-grad-a: #0B1B3A; --h-grad-b: #2563EB; --header-bg: rgba(243,247,255,.92);
  --input-bg: rgba(255,255,255,.85); --spot: rgba(37,99,235,.16); --fx-dot: 37,99,235; --fx-line: 59,130,246;
  --neon-soft: rgba(37,99,235,.16); --neon-line: rgba(37,99,235,.35); --neon-text: #1D4ED8; --neon-grad: linear-gradient(135deg, #0284C7, #2563EB); --neon-glow: rgba(37,99,235,.16);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(37,99,235,.16), transparent 70%), #F3F7FF;
  background-color: #F3F7FF; color: #0B1B3A;
}
:root[data-theme="light"] body.px-theme-lime {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --bg-0: #F8FBF0; --bg-1: #EEF6DD; --bg-2: #E3F0CB; --surface: #FFFFFF; --surface-2: #F1F8E2;
  --card-a: #FFFFFF; --card-b: #F6FAEC; --line: rgba(77,124,15,.18); --line-strong: rgba(77,124,15,.34); --grid-line: rgba(77,124,15,.06);
  --text: #14210A; --text-2: #3F5230; --text-3: #6B7F58;
  --accent: #4D7C0F; --accent-2: #65A30D; --accent-text: #3F6212; --accent-hover: #365314;
  --accent-soft: rgba(77,124,15,.14); --accent-line: rgba(77,124,15,.35); --accent-glow: rgba(77,124,15,.14); --glow-a: rgba(77,124,15,.14); --glow-b: rgba(77,124,15,.14);
  --on-accent: #FFFFFF; --h-grad-a: #14210A; --h-grad-b: #4D7C0F; --header-bg: rgba(248,251,240,.92);
  --input-bg: rgba(255,255,255,.85); --spot: rgba(77,124,15,.14); --fx-dot: 77,124,15; --fx-line: 101,163,13;
  --neon-soft: rgba(77,124,15,.14); --neon-line: rgba(77,124,15,.35); --neon-text: #3F6212; --neon-grad: linear-gradient(135deg, #65A30D, #4D7C0F); --neon-glow: rgba(77,124,15,.14);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(77,124,15,.14), transparent 70%), #F8FBF0;
  background-color: #F8FBF0; color: #14210A;
}
:root[data-theme="light"] body.px-theme-moss {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --bg-0: #FBF8EE; --bg-1: #F4EEDB; --bg-2: #ECE3C6; --surface: #FFFFFF; --surface-2: #F7F2E2;
  --card-a: #FFFFFF; --card-b: #FBF7EC; --line: rgba(161,98,7,.18); --line-strong: rgba(161,98,7,.34); --grid-line: rgba(133,77,14,.06);
  --text: #2A2110; --text-2: #54482C; --text-3: #857A58;
  --accent: #A16207; --accent-2: #854D0E; --accent-text: #854D0E; --accent-hover: #713F12;
  --accent-soft: rgba(161,98,7,.14); --accent-line: rgba(161,98,7,.35); --accent-glow: rgba(161,98,7,.14); --glow-a: rgba(161,98,7,.14); --glow-b: rgba(161,98,7,.14);
  --on-accent: #FFFFFF; --h-grad-a: #2A2110; --h-grad-b: #A16207; --header-bg: rgba(251,248,238,.92);
  --input-bg: rgba(255,255,255,.85); --spot: rgba(161,98,7,.14); --fx-dot: 161,98,7; --fx-line: 133,77,14;
  --neon-soft: rgba(161,98,7,.14); --neon-line: rgba(161,98,7,.35); --neon-text: #854D0E; --neon-grad: linear-gradient(135deg, #854D0E, #A16207); --neon-glow: rgba(161,98,7,.14);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(161,98,7,.14), transparent 70%), #FBF8EE;
  background-color: #FBF8EE; color: #2A2110;
}
:root[data-theme="light"] body.px-theme-aurora {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --bg-0: #F9F7FF; --bg-1: #F0EBFD; --bg-2: #E6DDFA; --surface: #FFFFFF; --surface-2: #F4EFFE;
  --card-a: #FFFFFF; --card-b: #F8F5FE; --line: rgba(124,58,237,.16); --line-strong: rgba(124,58,237,.32); --grid-line: rgba(124,58,237,.06);
  --text: #1A1033; --text-2: #4A3F6E; --text-3: #7C729E;
  --accent: #7C3AED; --accent-2: #6D28D9; --accent-text: #6D28D9; --accent-hover: #5B21B6;
  --accent-soft: rgba(124,58,237,.14); --accent-line: rgba(124,58,237,.35); --accent-glow: rgba(124,58,237,.14); --glow-a: rgba(124,58,237,.14); --glow-b: rgba(124,58,237,.14);
  --on-accent: #FFFFFF; --h-grad-a: #1A1033; --h-grad-b: #7C3AED; --header-bg: rgba(249,247,255,.92);
  --input-bg: rgba(255,255,255,.85); --spot: rgba(124,58,237,.14); --fx-dot: 124,58,237; --fx-line: 14,165,233;
  --neon-soft: rgba(124,58,237,.14); --neon-line: rgba(124,58,237,.35); --neon-text: #6D28D9; --neon-grad: linear-gradient(135deg, #6D28D9, #7C3AED); --neon-glow: rgba(124,58,237,.14);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124,58,237,.14), transparent 70%), #F9F7FF;
  background-color: #F9F7FF; color: #1A1033;
}
:root[data-theme="light"] body.px-theme-platinum {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --bg-0: #F5F7FA; --bg-1: #EDF1F6; --bg-2: #E2E8F0; --surface: #FFFFFF; --surface-2: #F1F5F9;
  --card-a: #FFFFFF; --card-b: #F7F9FB; --line: rgba(15,23,42,.12); --line-strong: rgba(15,23,42,.26); --grid-line: rgba(15,23,42,.05);
  --text: #0F172A; --text-2: #334155; --text-3: #64748B;
  --accent: #1E293B; --accent-2: #475569; --accent-text: #0F172A; --accent-hover: #000000;
  --accent-soft: rgba(71,85,105,.12); --accent-line: rgba(30,41,59,.3); --accent-glow: rgba(71,85,105,.12); --glow-a: rgba(71,85,105,.12); --glow-b: rgba(71,85,105,.12);
  --on-accent: #FFFFFF; --h-grad-a: #0F172A; --h-grad-b: #1E293B; --header-bg: rgba(245,247,250,.92);
  --input-bg: rgba(255,255,255,.85); --spot: rgba(71,85,105,.12); --fx-dot: 71,85,105; --fx-line: 100,116,139;
  --neon-soft: rgba(71,85,105,.12); --neon-line: rgba(30,41,59,.3); --neon-text: #0F172A; --neon-grad: linear-gradient(135deg, #475569, #1E293B); --neon-glow: rgba(71,85,105,.12);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(71,85,105,.12), transparent 70%), #F5F7FA;
  background-color: #F5F7FA; color: #0F172A;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) body.px-theme-sapphire {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --bg-0: #F3F7FF; --bg-1: #E9F0FC; --bg-2: #DDE8F9; --surface: #FFFFFF; --surface-2: #EEF4FF;
  --card-a: #FFFFFF; --card-b: #F5F9FF; --line: rgba(37,99,235,.16); --line-strong: rgba(37,99,235,.32); --grid-line: rgba(37,99,235,.07);
  --text: #0B1B3A; --text-2: #3B5278; --text-3: #6B7F9E;
  --accent: #2563EB; --accent-2: #0284C7; --accent-text: #1D4ED8; --accent-hover: #1E40AF;
  --accent-soft: rgba(37,99,235,.16); --accent-line: rgba(37,99,235,.35); --accent-glow: rgba(37,99,235,.16); --glow-a: rgba(37,99,235,.16); --glow-b: rgba(37,99,235,.16);
  --on-accent: #FFFFFF; --h-grad-a: #0B1B3A; --h-grad-b: #2563EB; --header-bg: rgba(243,247,255,.92);
  --input-bg: rgba(255,255,255,.85); --spot: rgba(37,99,235,.16); --fx-dot: 37,99,235; --fx-line: 59,130,246;
  --neon-soft: rgba(37,99,235,.16); --neon-line: rgba(37,99,235,.35); --neon-text: #1D4ED8; --neon-grad: linear-gradient(135deg, #0284C7, #2563EB); --neon-glow: rgba(37,99,235,.16);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(37,99,235,.16), transparent 70%), #F3F7FF;
  background-color: #F3F7FF; color: #0B1B3A;
}
:root:not([data-theme="dark"]) body.px-theme-lime {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --bg-0: #F8FBF0; --bg-1: #EEF6DD; --bg-2: #E3F0CB; --surface: #FFFFFF; --surface-2: #F1F8E2;
  --card-a: #FFFFFF; --card-b: #F6FAEC; --line: rgba(77,124,15,.18); --line-strong: rgba(77,124,15,.34); --grid-line: rgba(77,124,15,.06);
  --text: #14210A; --text-2: #3F5230; --text-3: #6B7F58;
  --accent: #4D7C0F; --accent-2: #65A30D; --accent-text: #3F6212; --accent-hover: #365314;
  --accent-soft: rgba(77,124,15,.14); --accent-line: rgba(77,124,15,.35); --accent-glow: rgba(77,124,15,.14); --glow-a: rgba(77,124,15,.14); --glow-b: rgba(77,124,15,.14);
  --on-accent: #FFFFFF; --h-grad-a: #14210A; --h-grad-b: #4D7C0F; --header-bg: rgba(248,251,240,.92);
  --input-bg: rgba(255,255,255,.85); --spot: rgba(77,124,15,.14); --fx-dot: 77,124,15; --fx-line: 101,163,13;
  --neon-soft: rgba(77,124,15,.14); --neon-line: rgba(77,124,15,.35); --neon-text: #3F6212; --neon-grad: linear-gradient(135deg, #65A30D, #4D7C0F); --neon-glow: rgba(77,124,15,.14);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(77,124,15,.14), transparent 70%), #F8FBF0;
  background-color: #F8FBF0; color: #14210A;
}
:root:not([data-theme="dark"]) body.px-theme-moss {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --bg-0: #FBF8EE; --bg-1: #F4EEDB; --bg-2: #ECE3C6; --surface: #FFFFFF; --surface-2: #F7F2E2;
  --card-a: #FFFFFF; --card-b: #FBF7EC; --line: rgba(161,98,7,.18); --line-strong: rgba(161,98,7,.34); --grid-line: rgba(133,77,14,.06);
  --text: #2A2110; --text-2: #54482C; --text-3: #857A58;
  --accent: #A16207; --accent-2: #854D0E; --accent-text: #854D0E; --accent-hover: #713F12;
  --accent-soft: rgba(161,98,7,.14); --accent-line: rgba(161,98,7,.35); --accent-glow: rgba(161,98,7,.14); --glow-a: rgba(161,98,7,.14); --glow-b: rgba(161,98,7,.14);
  --on-accent: #FFFFFF; --h-grad-a: #2A2110; --h-grad-b: #A16207; --header-bg: rgba(251,248,238,.92);
  --input-bg: rgba(255,255,255,.85); --spot: rgba(161,98,7,.14); --fx-dot: 161,98,7; --fx-line: 133,77,14;
  --neon-soft: rgba(161,98,7,.14); --neon-line: rgba(161,98,7,.35); --neon-text: #854D0E; --neon-grad: linear-gradient(135deg, #854D0E, #A16207); --neon-glow: rgba(161,98,7,.14);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(161,98,7,.14), transparent 70%), #FBF8EE;
  background-color: #FBF8EE; color: #2A2110;
}
:root:not([data-theme="dark"]) body.px-theme-aurora {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --bg-0: #F9F7FF; --bg-1: #F0EBFD; --bg-2: #E6DDFA; --surface: #FFFFFF; --surface-2: #F4EFFE;
  --card-a: #FFFFFF; --card-b: #F8F5FE; --line: rgba(124,58,237,.16); --line-strong: rgba(124,58,237,.32); --grid-line: rgba(124,58,237,.06);
  --text: #1A1033; --text-2: #4A3F6E; --text-3: #7C729E;
  --accent: #7C3AED; --accent-2: #6D28D9; --accent-text: #6D28D9; --accent-hover: #5B21B6;
  --accent-soft: rgba(124,58,237,.14); --accent-line: rgba(124,58,237,.35); --accent-glow: rgba(124,58,237,.14); --glow-a: rgba(124,58,237,.14); --glow-b: rgba(124,58,237,.14);
  --on-accent: #FFFFFF; --h-grad-a: #1A1033; --h-grad-b: #7C3AED; --header-bg: rgba(249,247,255,.92);
  --input-bg: rgba(255,255,255,.85); --spot: rgba(124,58,237,.14); --fx-dot: 124,58,237; --fx-line: 14,165,233;
  --neon-soft: rgba(124,58,237,.14); --neon-line: rgba(124,58,237,.35); --neon-text: #6D28D9; --neon-grad: linear-gradient(135deg, #6D28D9, #7C3AED); --neon-glow: rgba(124,58,237,.14);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124,58,237,.14), transparent 70%), #F9F7FF;
  background-color: #F9F7FF; color: #1A1033;
}
:root:not([data-theme="dark"]) body.px-theme-platinum {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --bg-0: #F5F7FA; --bg-1: #EDF1F6; --bg-2: #E2E8F0; --surface: #FFFFFF; --surface-2: #F1F5F9;
  --card-a: #FFFFFF; --card-b: #F7F9FB; --line: rgba(15,23,42,.12); --line-strong: rgba(15,23,42,.26); --grid-line: rgba(15,23,42,.05);
  --text: #0F172A; --text-2: #334155; --text-3: #64748B;
  --accent: #1E293B; --accent-2: #475569; --accent-text: #0F172A; --accent-hover: #000000;
  --accent-soft: rgba(71,85,105,.12); --accent-line: rgba(30,41,59,.3); --accent-glow: rgba(71,85,105,.12); --glow-a: rgba(71,85,105,.12); --glow-b: rgba(71,85,105,.12);
  --on-accent: #FFFFFF; --h-grad-a: #0F172A; --h-grad-b: #1E293B; --header-bg: rgba(245,247,250,.92);
  --input-bg: rgba(255,255,255,.85); --spot: rgba(71,85,105,.12); --fx-dot: 71,85,105; --fx-line: 100,116,139;
  --neon-soft: rgba(71,85,105,.12); --neon-line: rgba(30,41,59,.3); --neon-text: #0F172A; --neon-grad: linear-gradient(135deg, #475569, #1E293B); --neon-glow: rgba(71,85,105,.12);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(71,85,105,.12), transparent 70%), #F5F7FA;
  background-color: #F5F7FA; color: #0F172A;
}
}
body[class*="px-theme-"] .section-grey {}

/* ===== Light variants for the Cyber, Nexus, Orbit and Vox service themes ===== */
:root[data-theme="light"] body.px-theme-cyber {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --bg-0: #F0F9FF; --bg-1: #E4F3FB; --bg-2: #D6ECF7; --surface: #FFFFFF; --surface-2: #EAF6FC;
  --card-a: #FFFFFF; --card-b: #F4FBFF; --line: rgba(8,145,178,.18); --line-strong: rgba(8,145,178,.34); --grid-line: rgba(8,145,178,.07);
  --text: #0B2233; --text-2: #345A70; --text-3: #6B8A9C;
  --accent: #0891B2; --accent-2: #0E7490; --accent-text: #0E7490; --accent-hover: #155E75;
  --accent-soft: rgba(8,145,178,.14); --accent-line: rgba(8,145,178,.35); --accent-glow: rgba(8,145,178,.14); --glow-a: rgba(8,145,178,.14); --glow-b: rgba(8,145,178,.14);
  --on-accent: #FFFFFF; --h-grad-a: #0B2233; --h-grad-b: #0891B2; --header-bg: rgba(240,249,255,.92);
  --input-bg: rgba(255,255,255,.85); --spot: rgba(8,145,178,.14); --fx-dot: 8,145,178; --fx-line: 34,211,238;
  --neon-soft: rgba(8,145,178,.14); --neon-line: rgba(8,145,178,.35); --neon-text: #0E7490; --neon-grad: linear-gradient(135deg, #0E7490, #0891B2); --neon-glow: rgba(8,145,178,.14);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(8,145,178,.14), transparent 70%), #F0F9FF;
  background-color: #F0F9FF; color: #0B2233;
}
:root[data-theme="light"] body.px-theme-nexus {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --bg-0: #F3FBF7; --bg-1: #E7F6EE; --bg-2: #DAF0E5; --surface: #FFFFFF; --surface-2: #EDF9F2;
  --card-a: #FFFFFF; --card-b: #F6FCF9; --line: rgba(5,150,105,.18); --line-strong: rgba(5,150,105,.34); --grid-line: rgba(5,150,105,.06);
  --text: #0B2A1F; --text-2: #3B6252; --text-3: #6A8C7E;
  --accent: #059669; --accent-2: #047857; --accent-text: #047857; --accent-hover: #065F46;
  --accent-soft: rgba(5,150,105,.14); --accent-line: rgba(5,150,105,.35); --accent-glow: rgba(5,150,105,.14); --glow-a: rgba(5,150,105,.14); --glow-b: rgba(5,150,105,.14);
  --on-accent: #FFFFFF; --h-grad-a: #0B2A1F; --h-grad-b: #059669; --header-bg: rgba(243,251,247,.92);
  --input-bg: rgba(255,255,255,.85); --spot: rgba(5,150,105,.14); --fx-dot: 5,150,105; --fx-line: 16,185,129;
  --neon-soft: rgba(5,150,105,.14); --neon-line: rgba(5,150,105,.35); --neon-text: #047857; --neon-grad: linear-gradient(135deg, #047857, #059669); --neon-glow: rgba(5,150,105,.14);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(5,150,105,.14), transparent 70%), #F3FBF7;
  background-color: #F3FBF7; color: #0B2A1F;
}
:root[data-theme="light"] body.px-theme-orbit {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --bg-0: #F7F5FF; --bg-1: #EEEBFB; --bg-2: #E4DFF8; --surface: #FFFFFF; --surface-2: #F2EFFD;
  --card-a: #FFFFFF; --card-b: #F9F8FF; --line: rgba(79,70,229,.16); --line-strong: rgba(79,70,229,.32); --grid-line: rgba(79,70,229,.06);
  --text: #1B1640; --text-2: #4A4380; --text-3: #7A74A6;
  --accent: #EA580C; --accent-2: #F59E0B; --accent-text: #C2410C; --accent-hover: #9A3412;
  --accent-soft: rgba(234,88,12,.12); --accent-line: rgba(234,88,12,.35); --accent-glow: rgba(234,88,12,.12); --glow-a: rgba(234,88,12,.12); --glow-b: rgba(234,88,12,.12);
  --on-accent: #FFFFFF; --h-grad-a: #1B1640; --h-grad-b: #EA580C; --header-bg: rgba(247,245,255,.92);
  --input-bg: rgba(255,255,255,.85); --spot: rgba(234,88,12,.12); --fx-dot: 234,88,12; --fx-line: 79,70,229;
  --neon-soft: rgba(234,88,12,.12); --neon-line: rgba(234,88,12,.35); --neon-text: #C2410C; --neon-grad: linear-gradient(135deg, #F59E0B, #EA580C); --neon-glow: rgba(234,88,12,.12);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(234,88,12,.12), transparent 70%), #F7F5FF;
  background-color: #F7F5FF; color: #1B1640;
}
:root[data-theme="light"] body.px-theme-vox {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --bg-0: #FFF8F7; --bg-1: #FBEEEE; --bg-2: #F6E2E4; --surface: #FFFFFF; --surface-2: #FDF1F2;
  --card-a: #FFFFFF; --card-b: #FFF8F8; --line: rgba(159,18,57,.16); --line-strong: rgba(159,18,57,.3); --grid-line: rgba(100,116,139,.06);
  --text: #2A0A12; --text-2: #6B3643; --text-3: #95707B;
  --accent: #E11D48; --accent-2: #9F1239; --accent-text: #BE123C; --accent-hover: #9F1239;
  --accent-soft: rgba(225,29,72,.12); --accent-line: rgba(225,29,72,.35); --accent-glow: rgba(225,29,72,.12); --glow-a: rgba(225,29,72,.12); --glow-b: rgba(225,29,72,.12);
  --on-accent: #FFFFFF; --h-grad-a: #2A0A12; --h-grad-b: #E11D48; --header-bg: rgba(255,248,247,.92);
  --input-bg: rgba(255,255,255,.85); --spot: rgba(225,29,72,.12); --fx-dot: 225,29,72; --fx-line: 100,116,139;
  --neon-soft: rgba(225,29,72,.12); --neon-line: rgba(225,29,72,.35); --neon-text: #BE123C; --neon-grad: linear-gradient(135deg, #9F1239, #E11D48); --neon-glow: rgba(225,29,72,.12);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(225,29,72,.12), transparent 70%), #FFF8F7;
  background-color: #FFF8F7; color: #2A0A12;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) body.px-theme-cyber {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --bg-0: #F0F9FF; --bg-1: #E4F3FB; --bg-2: #D6ECF7; --surface: #FFFFFF; --surface-2: #EAF6FC;
  --card-a: #FFFFFF; --card-b: #F4FBFF; --line: rgba(8,145,178,.18); --line-strong: rgba(8,145,178,.34); --grid-line: rgba(8,145,178,.07);
  --text: #0B2233; --text-2: #345A70; --text-3: #6B8A9C;
  --accent: #0891B2; --accent-2: #0E7490; --accent-text: #0E7490; --accent-hover: #155E75;
  --accent-soft: rgba(8,145,178,.14); --accent-line: rgba(8,145,178,.35); --accent-glow: rgba(8,145,178,.14); --glow-a: rgba(8,145,178,.14); --glow-b: rgba(8,145,178,.14);
  --on-accent: #FFFFFF; --h-grad-a: #0B2233; --h-grad-b: #0891B2; --header-bg: rgba(240,249,255,.92);
  --input-bg: rgba(255,255,255,.85); --spot: rgba(8,145,178,.14); --fx-dot: 8,145,178; --fx-line: 34,211,238;
  --neon-soft: rgba(8,145,178,.14); --neon-line: rgba(8,145,178,.35); --neon-text: #0E7490; --neon-grad: linear-gradient(135deg, #0E7490, #0891B2); --neon-glow: rgba(8,145,178,.14);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(8,145,178,.14), transparent 70%), #F0F9FF;
  background-color: #F0F9FF; color: #0B2233;
}
:root:not([data-theme="dark"]) body.px-theme-nexus {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --bg-0: #F3FBF7; --bg-1: #E7F6EE; --bg-2: #DAF0E5; --surface: #FFFFFF; --surface-2: #EDF9F2;
  --card-a: #FFFFFF; --card-b: #F6FCF9; --line: rgba(5,150,105,.18); --line-strong: rgba(5,150,105,.34); --grid-line: rgba(5,150,105,.06);
  --text: #0B2A1F; --text-2: #3B6252; --text-3: #6A8C7E;
  --accent: #059669; --accent-2: #047857; --accent-text: #047857; --accent-hover: #065F46;
  --accent-soft: rgba(5,150,105,.14); --accent-line: rgba(5,150,105,.35); --accent-glow: rgba(5,150,105,.14); --glow-a: rgba(5,150,105,.14); --glow-b: rgba(5,150,105,.14);
  --on-accent: #FFFFFF; --h-grad-a: #0B2A1F; --h-grad-b: #059669; --header-bg: rgba(243,251,247,.92);
  --input-bg: rgba(255,255,255,.85); --spot: rgba(5,150,105,.14); --fx-dot: 5,150,105; --fx-line: 16,185,129;
  --neon-soft: rgba(5,150,105,.14); --neon-line: rgba(5,150,105,.35); --neon-text: #047857; --neon-grad: linear-gradient(135deg, #047857, #059669); --neon-glow: rgba(5,150,105,.14);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(5,150,105,.14), transparent 70%), #F3FBF7;
  background-color: #F3FBF7; color: #0B2A1F;
}
:root:not([data-theme="dark"]) body.px-theme-orbit {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --bg-0: #F7F5FF; --bg-1: #EEEBFB; --bg-2: #E4DFF8; --surface: #FFFFFF; --surface-2: #F2EFFD;
  --card-a: #FFFFFF; --card-b: #F9F8FF; --line: rgba(79,70,229,.16); --line-strong: rgba(79,70,229,.32); --grid-line: rgba(79,70,229,.06);
  --text: #1B1640; --text-2: #4A4380; --text-3: #7A74A6;
  --accent: #EA580C; --accent-2: #F59E0B; --accent-text: #C2410C; --accent-hover: #9A3412;
  --accent-soft: rgba(234,88,12,.12); --accent-line: rgba(234,88,12,.35); --accent-glow: rgba(234,88,12,.12); --glow-a: rgba(234,88,12,.12); --glow-b: rgba(234,88,12,.12);
  --on-accent: #FFFFFF; --h-grad-a: #1B1640; --h-grad-b: #EA580C; --header-bg: rgba(247,245,255,.92);
  --input-bg: rgba(255,255,255,.85); --spot: rgba(234,88,12,.12); --fx-dot: 234,88,12; --fx-line: 79,70,229;
  --neon-soft: rgba(234,88,12,.12); --neon-line: rgba(234,88,12,.35); --neon-text: #C2410C; --neon-grad: linear-gradient(135deg, #F59E0B, #EA580C); --neon-glow: rgba(234,88,12,.12);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(234,88,12,.12), transparent 70%), #F7F5FF;
  background-color: #F7F5FF; color: #1B1640;
}
:root:not([data-theme="dark"]) body.px-theme-vox {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --bg-0: #FFF8F7; --bg-1: #FBEEEE; --bg-2: #F6E2E4; --surface: #FFFFFF; --surface-2: #FDF1F2;
  --card-a: #FFFFFF; --card-b: #FFF8F8; --line: rgba(159,18,57,.16); --line-strong: rgba(159,18,57,.3); --grid-line: rgba(100,116,139,.06);
  --text: #2A0A12; --text-2: #6B3643; --text-3: #95707B;
  --accent: #E11D48; --accent-2: #9F1239; --accent-text: #BE123C; --accent-hover: #9F1239;
  --accent-soft: rgba(225,29,72,.12); --accent-line: rgba(225,29,72,.35); --accent-glow: rgba(225,29,72,.12); --glow-a: rgba(225,29,72,.12); --glow-b: rgba(225,29,72,.12);
  --on-accent: #FFFFFF; --h-grad-a: #2A0A12; --h-grad-b: #E11D48; --header-bg: rgba(255,248,247,.92);
  --input-bg: rgba(255,255,255,.85); --spot: rgba(225,29,72,.12); --fx-dot: 225,29,72; --fx-line: 100,116,139;
  --neon-soft: rgba(225,29,72,.12); --neon-line: rgba(225,29,72,.35); --neon-text: #BE123C; --neon-grad: linear-gradient(135deg, #9F1239, #E11D48); --neon-glow: rgba(225,29,72,.12);
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(225,29,72,.12), transparent 70%), #FFF8F7;
  background-color: #FFF8F7; color: #2A0A12;
}
}

/* ===== Light variants for the Cyber, Nexus, Orbit and Vox section palettes (pricing and add-on sections) ===== */
:root[data-theme="light"] .px-cyber {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --surface: #FFFFFF; --surface-2: #EAF6FC; --card-a: #FFFFFF; --card-b: #F4FBFF;
  --line: rgba(8,145,178,.18); --line-strong: rgba(8,145,178,.34); --grid-line: rgba(8,145,178,.07);
  --text: #0B2233; --text-2: #345A70; --text-3: #6B8A9C;
  --accent: #0891B2; --accent-2: #0E7490; --accent-text: #0E7490; --accent-hover: #155E75;
  --accent-soft: rgba(8,145,178,.14); --accent-line: rgba(8,145,178,.35); --accent-glow: rgba(8,145,178,.14); --glow-a: rgba(8,145,178,.14); --glow-b: rgba(8,145,178,.14);
  --on-accent: #FFFFFF; --h-grad-a: #0B2233; --h-grad-b: #0891B2;
  --input-bg: rgba(255,255,255,.85); --spot: rgba(8,145,178,.14); --fx-dot: 8,145,178; --fx-line: 34,211,238;
  --neon-soft: rgba(8,145,178,.14); --neon-line: rgba(8,145,178,.35); --neon-text: #0E7490; --neon-grad: linear-gradient(135deg, #0E7490, #0891B2); --neon-glow: rgba(8,145,178,.14);
  --node-fill: #FFFFFF; --core-fill: #0891B2; --core-text: #FFFFFF; --core-sub: #FFFFFF;
  background-color: #F0F9FF; color: #0B2233;
}
:root[data-theme="light"] .px-nexus {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --surface: #FFFFFF; --surface-2: #EDF9F2; --card-a: #FFFFFF; --card-b: #F6FCF9;
  --line: rgba(5,150,105,.18); --line-strong: rgba(5,150,105,.34); --grid-line: rgba(5,150,105,.06);
  --text: #0B2A1F; --text-2: #3B6252; --text-3: #6A8C7E;
  --accent: #059669; --accent-2: #047857; --accent-text: #047857; --accent-hover: #065F46;
  --accent-soft: rgba(5,150,105,.14); --accent-line: rgba(5,150,105,.35); --accent-glow: rgba(5,150,105,.14); --glow-a: rgba(5,150,105,.14); --glow-b: rgba(5,150,105,.14);
  --on-accent: #FFFFFF; --h-grad-a: #0B2A1F; --h-grad-b: #059669;
  --input-bg: rgba(255,255,255,.85); --spot: rgba(5,150,105,.14); --fx-dot: 5,150,105; --fx-line: 16,185,129;
  --neon-soft: rgba(5,150,105,.14); --neon-line: rgba(5,150,105,.35); --neon-text: #047857; --neon-grad: linear-gradient(135deg, #047857, #059669); --neon-glow: rgba(5,150,105,.14);
  --node-fill: #FFFFFF; --core-fill: #059669; --core-text: #FFFFFF; --core-sub: #FFFFFF;
  background-color: #F3FBF7; color: #0B2A1F;
}
:root[data-theme="light"] .px-orbit {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --surface: #FFFFFF; --surface-2: #F2EFFD; --card-a: #FFFFFF; --card-b: #F9F8FF;
  --line: rgba(79,70,229,.16); --line-strong: rgba(79,70,229,.32); --grid-line: rgba(79,70,229,.06);
  --text: #1B1640; --text-2: #4A4380; --text-3: #7A74A6;
  --accent: #EA580C; --accent-2: #F59E0B; --accent-text: #C2410C; --accent-hover: #9A3412;
  --accent-soft: rgba(234,88,12,.12); --accent-line: rgba(234,88,12,.35); --accent-glow: rgba(234,88,12,.12); --glow-a: rgba(234,88,12,.12); --glow-b: rgba(234,88,12,.12);
  --on-accent: #FFFFFF; --h-grad-a: #1B1640; --h-grad-b: #EA580C;
  --input-bg: rgba(255,255,255,.85); --spot: rgba(234,88,12,.12); --fx-dot: 234,88,12; --fx-line: 79,70,229;
  --neon-soft: rgba(234,88,12,.12); --neon-line: rgba(234,88,12,.35); --neon-text: #C2410C; --neon-grad: linear-gradient(135deg, #F59E0B, #EA580C); --neon-glow: rgba(234,88,12,.12);
  --node-fill: #FFFFFF; --core-fill: #EA580C; --core-text: #FFFFFF; --core-sub: #FFFFFF;
  background-color: #F7F5FF; color: #1B1640;
}
:root[data-theme="light"] .px-vox {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --surface: #FFFFFF; --surface-2: #FDF1F2; --card-a: #FFFFFF; --card-b: #FFF8F8;
  --line: rgba(159,18,57,.16); --line-strong: rgba(159,18,57,.3); --grid-line: rgba(100,116,139,.06);
  --text: #2A0A12; --text-2: #6B3643; --text-3: #95707B;
  --accent: #E11D48; --accent-2: #9F1239; --accent-text: #BE123C; --accent-hover: #9F1239;
  --accent-soft: rgba(225,29,72,.12); --accent-line: rgba(225,29,72,.35); --accent-glow: rgba(225,29,72,.12); --glow-a: rgba(225,29,72,.12); --glow-b: rgba(225,29,72,.12);
  --on-accent: #FFFFFF; --h-grad-a: #2A0A12; --h-grad-b: #E11D48;
  --input-bg: rgba(255,255,255,.85); --spot: rgba(225,29,72,.12); --fx-dot: 225,29,72; --fx-line: 100,116,139;
  --neon-soft: rgba(225,29,72,.12); --neon-line: rgba(225,29,72,.35); --neon-text: #BE123C; --neon-grad: linear-gradient(135deg, #9F1239, #E11D48); --neon-glow: rgba(225,29,72,.12);
  --node-fill: #FFFFFF; --core-fill: #E11D48; --core-text: #FFFFFF; --core-sub: #FFFFFF;
  background-color: #FFF8F7; color: #2A0A12;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .px-cyber {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --surface: #FFFFFF; --surface-2: #EAF6FC; --card-a: #FFFFFF; --card-b: #F4FBFF;
  --line: rgba(8,145,178,.18); --line-strong: rgba(8,145,178,.34); --grid-line: rgba(8,145,178,.07);
  --text: #0B2233; --text-2: #345A70; --text-3: #6B8A9C;
  --accent: #0891B2; --accent-2: #0E7490; --accent-text: #0E7490; --accent-hover: #155E75;
  --accent-soft: rgba(8,145,178,.14); --accent-line: rgba(8,145,178,.35); --accent-glow: rgba(8,145,178,.14); --glow-a: rgba(8,145,178,.14); --glow-b: rgba(8,145,178,.14);
  --on-accent: #FFFFFF; --h-grad-a: #0B2233; --h-grad-b: #0891B2;
  --input-bg: rgba(255,255,255,.85); --spot: rgba(8,145,178,.14); --fx-dot: 8,145,178; --fx-line: 34,211,238;
  --neon-soft: rgba(8,145,178,.14); --neon-line: rgba(8,145,178,.35); --neon-text: #0E7490; --neon-grad: linear-gradient(135deg, #0E7490, #0891B2); --neon-glow: rgba(8,145,178,.14);
  --node-fill: #FFFFFF; --core-fill: #0891B2; --core-text: #FFFFFF; --core-sub: #FFFFFF;
  background-color: #F0F9FF; color: #0B2233;
}
:root:not([data-theme="dark"]) .px-nexus {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --surface: #FFFFFF; --surface-2: #EDF9F2; --card-a: #FFFFFF; --card-b: #F6FCF9;
  --line: rgba(5,150,105,.18); --line-strong: rgba(5,150,105,.34); --grid-line: rgba(5,150,105,.06);
  --text: #0B2A1F; --text-2: #3B6252; --text-3: #6A8C7E;
  --accent: #059669; --accent-2: #047857; --accent-text: #047857; --accent-hover: #065F46;
  --accent-soft: rgba(5,150,105,.14); --accent-line: rgba(5,150,105,.35); --accent-glow: rgba(5,150,105,.14); --glow-a: rgba(5,150,105,.14); --glow-b: rgba(5,150,105,.14);
  --on-accent: #FFFFFF; --h-grad-a: #0B2A1F; --h-grad-b: #059669;
  --input-bg: rgba(255,255,255,.85); --spot: rgba(5,150,105,.14); --fx-dot: 5,150,105; --fx-line: 16,185,129;
  --neon-soft: rgba(5,150,105,.14); --neon-line: rgba(5,150,105,.35); --neon-text: #047857; --neon-grad: linear-gradient(135deg, #047857, #059669); --neon-glow: rgba(5,150,105,.14);
  --node-fill: #FFFFFF; --core-fill: #059669; --core-text: #FFFFFF; --core-sub: #FFFFFF;
  background-color: #F3FBF7; color: #0B2A1F;
}
:root:not([data-theme="dark"]) .px-orbit {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --surface: #FFFFFF; --surface-2: #F2EFFD; --card-a: #FFFFFF; --card-b: #F9F8FF;
  --line: rgba(79,70,229,.16); --line-strong: rgba(79,70,229,.32); --grid-line: rgba(79,70,229,.06);
  --text: #1B1640; --text-2: #4A4380; --text-3: #7A74A6;
  --accent: #EA580C; --accent-2: #F59E0B; --accent-text: #C2410C; --accent-hover: #9A3412;
  --accent-soft: rgba(234,88,12,.12); --accent-line: rgba(234,88,12,.35); --accent-glow: rgba(234,88,12,.12); --glow-a: rgba(234,88,12,.12); --glow-b: rgba(234,88,12,.12);
  --on-accent: #FFFFFF; --h-grad-a: #1B1640; --h-grad-b: #EA580C;
  --input-bg: rgba(255,255,255,.85); --spot: rgba(234,88,12,.12); --fx-dot: 234,88,12; --fx-line: 79,70,229;
  --neon-soft: rgba(234,88,12,.12); --neon-line: rgba(234,88,12,.35); --neon-text: #C2410C; --neon-grad: linear-gradient(135deg, #F59E0B, #EA580C); --neon-glow: rgba(234,88,12,.12);
  --node-fill: #FFFFFF; --core-fill: #EA580C; --core-text: #FFFFFF; --core-sub: #FFFFFF;
  background-color: #F7F5FF; color: #1B1640;
}
:root:not([data-theme="dark"]) .px-vox {
  color-scheme: light;
  --card-soft: rgba(255, 255, 255, .7);
  --surface: #FFFFFF; --surface-2: #FDF1F2; --card-a: #FFFFFF; --card-b: #FFF8F8;
  --line: rgba(159,18,57,.16); --line-strong: rgba(159,18,57,.3); --grid-line: rgba(100,116,139,.06);
  --text: #2A0A12; --text-2: #6B3643; --text-3: #95707B;
  --accent: #E11D48; --accent-2: #9F1239; --accent-text: #BE123C; --accent-hover: #9F1239;
  --accent-soft: rgba(225,29,72,.12); --accent-line: rgba(225,29,72,.35); --accent-glow: rgba(225,29,72,.12); --glow-a: rgba(225,29,72,.12); --glow-b: rgba(225,29,72,.12);
  --on-accent: #FFFFFF; --h-grad-a: #2A0A12; --h-grad-b: #E11D48;
  --input-bg: rgba(255,255,255,.85); --spot: rgba(225,29,72,.12); --fx-dot: 225,29,72; --fx-line: 100,116,139;
  --neon-soft: rgba(225,29,72,.12); --neon-line: rgba(225,29,72,.35); --neon-text: #BE123C; --neon-grad: linear-gradient(135deg, #9F1239, #E11D48); --neon-glow: rgba(225,29,72,.12);
  --node-fill: #FFFFFF; --core-fill: #E11D48; --core-text: #FFFFFF; --core-sub: #FFFFFF;
  background-color: #FFF8F7; color: #2A0A12;
}
}

/* ===== Dark variants for the Atelier theme (Shopify page and its pricing/add-on sections) ===== */
:root[data-theme="dark"] body.px-theme-atelier {
  color-scheme: dark;
  --bg-0: #15110E; --bg-1: #1D1814; --bg-2: #251E19; --surface: #2A221C; --surface-2: #332A23;
  --card-a: #2A221C; --card-b: #221B16; --card-soft: rgba(42, 34, 28, .6); --line: rgba(233, 131, 106, .16); --line-strong: rgba(233, 131, 106, .3); --grid-line: rgba(233, 131, 106, .06);
  --text: #F7EFE6; --text-2: #CFC2B4; --text-3: #9A8D80;
  --accent: #E9836A; --accent-2: #B5573B; --accent-text: #F2A08A; --accent-hover: #FFB8A3;
  --accent-soft: rgba(233, 131, 106, .12); --accent-line: rgba(233, 131, 106, .4); --accent-glow: rgba(233, 131, 106, .25); --glow-a: rgba(233, 131, 106, .14); --glow-b: rgba(181, 87, 59, .1);
  --on-accent: #1A110C; --h-grad-a: #FFFFFF; --h-grad-b: #F2A08A; --header-bg: rgba(21, 17, 14, .92);
  --node-fill: #2A221C; --node-stroke: rgba(233, 131, 106, .35); --core-fill: #7A3B2A; --core-text: #FFFFFF; --core-sub: #FBD5C8;
  --input-bg: rgba(21, 17, 14, .6); --shadow: 0 22px 40px -30px rgba(0, 0, 0, .6); --shadow-panel: 0 30px 60px -40px rgba(0, 0, 0, .6);
  --spot: rgba(233, 131, 106, .1); --fx-dot: 242, 160, 138; --fx-line: 233, 131, 106;
  --neon-soft: rgba(233, 131, 106, .12); --neon-line: rgba(233, 131, 106, .4); --neon-text: #F2A08A; --neon-grad: linear-gradient(135deg, #B5573B, #E9836A); --neon-glow: rgba(233, 131, 106, .25);
  background-color: #15110E; color: var(--text);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) body.px-theme-atelier {
  color-scheme: dark;
  --bg-0: #15110E; --bg-1: #1D1814; --bg-2: #251E19; --surface: #2A221C; --surface-2: #332A23;
  --card-a: #2A221C; --card-b: #221B16; --card-soft: rgba(42, 34, 28, .6); --line: rgba(233, 131, 106, .16); --line-strong: rgba(233, 131, 106, .3); --grid-line: rgba(233, 131, 106, .06);
  --text: #F7EFE6; --text-2: #CFC2B4; --text-3: #9A8D80;
  --accent: #E9836A; --accent-2: #B5573B; --accent-text: #F2A08A; --accent-hover: #FFB8A3;
  --accent-soft: rgba(233, 131, 106, .12); --accent-line: rgba(233, 131, 106, .4); --accent-glow: rgba(233, 131, 106, .25); --glow-a: rgba(233, 131, 106, .14); --glow-b: rgba(181, 87, 59, .1);
  --on-accent: #1A110C; --h-grad-a: #FFFFFF; --h-grad-b: #F2A08A; --header-bg: rgba(21, 17, 14, .92);
  --node-fill: #2A221C; --node-stroke: rgba(233, 131, 106, .35); --core-fill: #7A3B2A; --core-text: #FFFFFF; --core-sub: #FBD5C8;
  --input-bg: rgba(21, 17, 14, .6); --shadow: 0 22px 40px -30px rgba(0, 0, 0, .6); --shadow-panel: 0 30px 60px -40px rgba(0, 0, 0, .6);
  --spot: rgba(233, 131, 106, .1); --fx-dot: 242, 160, 138; --fx-line: 233, 131, 106;
  --neon-soft: rgba(233, 131, 106, .12); --neon-line: rgba(233, 131, 106, .4); --neon-text: #F2A08A; --neon-grad: linear-gradient(135deg, #B5573B, #E9836A); --neon-glow: rgba(233, 131, 106, .25);
  background-color: #15110E; color: var(--text);
}
}
:root[data-theme="dark"] .px-atelier {
  color-scheme: dark;
  --text: #F7EFE6; --text-2: #CFC2B4; --text-3: #9A8D80; --line: rgba(233, 131, 106, .16); --line-strong: rgba(233, 131, 106, .3);
  --card-a: #2A221C; --card-b: #221B16; --surface: #2A221C; --surface-2: #332A23; --on-accent: #1A110C;
  --accent: #E9836A; --accent-2: #B5573B; --accent-text: #F2A08A; --accent-soft: rgba(233, 131, 106, .12); --accent-line: rgba(233, 131, 106, .4);
  --neon-grad: linear-gradient(135deg, #B5573B, #E9836A); --neon-text: #F2A08A; --h-grad-a: #FFFFFF; --h-grad-b: #F2A08A;
  background: linear-gradient(180deg, #1D1814, #15110E); color: var(--text);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .px-atelier {
  color-scheme: dark;
  --text: #F7EFE6; --text-2: #CFC2B4; --text-3: #9A8D80; --line: rgba(233, 131, 106, .16); --line-strong: rgba(233, 131, 106, .3);
  --card-a: #2A221C; --card-b: #221B16; --surface: #2A221C; --surface-2: #332A23; --on-accent: #1A110C;
  --accent: #E9836A; --accent-2: #B5573B; --accent-text: #F2A08A; --accent-soft: rgba(233, 131, 106, .12); --accent-line: rgba(233, 131, 106, .4);
  --neon-grad: linear-gradient(135deg, #B5573B, #E9836A); --neon-text: #F2A08A; --h-grad-a: #FFFFFF; --h-grad-b: #F2A08A;
  background: linear-gradient(180deg, #1D1814, #15110E); color: var(--text);
}
}
:root[data-theme="dark"] .px-atelier .erp-card, :root[data-theme="dark"] .px-atelier .charge-card { box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 22px 40px -30px rgba(0,0,0,.7); }

.addon-pick { margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-text); font: 600 0.875rem/1 var(--font-body); cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.addon-pick:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); transform: translateY(-1px); }
.addon-pick[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.addon-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.addon-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; width: min(580px, calc(100% - 32px)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--accent-line); box-shadow: var(--shadow), 0 0 40px -12px var(--accent-glow); color: var(--text); }
.addon-bar[hidden] { display: none; }
.addon-bar p { margin: 0; color: var(--text-2); font-size: 0.9375rem; }
.addon-bar p strong { color: var(--accent-text); }
.addon-bar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.addon-clear { background: none; border: 0; padding: 6px; color: var(--text-2); text-decoration: underline; cursor: pointer; font: inherit; }
.addon-quote { white-space: nowrap; }
@media (max-width: 560px) { .addon-bar { bottom: 12px; flex-direction: column; align-items: stretch; } .addon-bar-actions { justify-content: space-between; } }