/* =====================================================
   SYSTEMS PAGE — EXCHANGE UI STYLES
   Shell (header/footer) handled by assets/site.css
   Pro Max — consolidated, single source of truth
===================================================== */

/* ── Design Tokens ── */
:root {
  --sys-bg0:#030508;--sys-bg1:#05070d;--sys-bg2:#080b14;--sys-bg3:#0b0f1a;
  --sys-surf:rgba(255,255,255,0.022);--sys-surf2:rgba(255,255,255,0.04);
  --sys-b0:rgba(255,255,255,0.04);--sys-b1:rgba(255,255,255,0.08);
  --sys-b2:rgba(255,255,255,0.13);--sys-b3:rgba(255,255,255,0.2);
  --sys-au:#b89a50;--sys-au2:#d4b870;
  --sys-au-dim:rgba(184,154,80,0.08);--sys-au-glow:rgba(184,154,80,0.18);
  --sys-t0:#f0ece4;--sys-t1:#c8c4bc;--sys-t2:#8a867e;--sys-t3:#5a5650;--sys-t4:#363230;
  --sys-sg:#3a7a5e;--sys-sa:#8a5e20;--sys-sr:#7a3028;
  --sys-sg-dim:rgba(58,122,94,0.12);--sys-sa-dim:rgba(138,94,32,0.12);--sys-sr-dim:rgba(122,48,40,0.12);
  --sys-ease:cubic-bezier(0.4,0,0.2,1);
  --sys-r2:3px;--sys-r3:6px;--sys-r4:10px;
  --sys-hdr:70px;
  --bg0:var(--sys-bg0);--bg1:var(--sys-bg1);--bg2:var(--sys-bg2);--bg3:var(--sys-bg3);
  --bg4:#0f1420;--bg5:#131926;
  --surf:var(--sys-surf);--surf2:var(--sys-surf2);--surf3:rgba(255,255,255,0.06);
  --b0:var(--sys-b0);--b1:var(--sys-b1);--b2:var(--sys-b2);--b3:var(--sys-b3);
  --au:var(--sys-au);--au2:var(--sys-au2);
  --au-dim:var(--sys-au-dim);--au-glow:var(--sys-au-glow);
  --t0:var(--sys-t0);--t1:var(--sys-t1);--t2:var(--sys-t2);--t3:var(--sys-t3);--t4:var(--sys-t4);
  --sg:var(--sys-sg);--sa:var(--sys-sa);--sr:var(--sys-sr);
  --sg-dim:var(--sys-sg-dim);--sa-dim:var(--sys-sa-dim);--sr-dim:var(--sys-sr-dim);
  --ease:var(--sys-ease);--ease-o:cubic-bezier(0,0,0.2,1);--ease-i:cubic-bezier(0.4,0,1,1);
  --r2:var(--sys-r2);--r3:var(--sys-r3);--r4:var(--sys-r4);--r5:16px;
  --hdr:var(--sys-hdr);
}

/* ── Page ── */
body[data-page="systems"]{background:var(--bg1);}
body[data-page="systems"]::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 50% 40% at 80% 15%,rgba(184,154,80,0.05) 0%,transparent 55%),
    radial-gradient(ellipse 40% 50% at 10% 85%,rgba(36,80,128,0.04) 0%,transparent 50%);
  animation:ambient 25s ease-in-out infinite alternate;
}
@keyframes ambient{0%{opacity:.7}100%{opacity:1}}
@keyframes bgDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
body.panel-open{overflow:hidden;}
body.modal-open{overflow:hidden;}

/* ── Background Layers ── */
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(to right,rgba(255,255,255,0.016) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,0.016) 1px,transparent 1px);background-size:88px 88px;mask-image:radial-gradient(ellipse 100% 100% at 50% 0%,black 20%,transparent 80%);}
.vignette{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 120% 120% at 50% 50%,transparent 40%,rgba(3,5,8,0.5) 100%);}

/* ── Layout ── */
.z1{position:relative;z-index:1;}
.z2{position:relative;z-index:2;}
.wrap{max-width:1480px;margin:0 auto;padding:0 44px;}
.serif{font-family:'Cormorant Garamond',Georgia,serif;}
.systems-page{padding-top:var(--sys-hdr);}

/* ── Section Skeleton ── */
.c-section{padding:clamp(52px,6vw,88px) 0;}
.c-section-sm{padding:clamp(40px,5vw,72px) 0;}
.s-sep{border-top:1px solid var(--b0);}

/* ── Section Typography ── */
.s-eye{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--t4);margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.s-eye::before{content:'';width:22px;height:1px;background:var(--au);}
.s-h{font-family:'Cormorant Garamond',serif;font-size:clamp(36px,5vw,68px);font-weight:400;line-height:1.05;color:var(--t0);margin-bottom:18px;}
.s-h em{font-style:italic;color:var(--au);}
.s-sub{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;color:var(--t2);line-height:1.7;max-width:560px;}

/* ── Scroll Reveal ── */
.sr{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.sr.visible{opacity:1;transform:none;}
.sr-d1{transition-delay:.12s;}

/* ── Keyframes ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(58,122,94,.6)}50%{opacity:.5;box-shadow:0 0 0 3px rgba(58,122,94,0)}}
@keyframes priceShimmer{0%{background-position:400% 0}100%{background-position:-200% 0}}

/* ═══════════════════════════════
   SYSTEMS HERO — ATMOSPHERIC BACKGROUND INTEGRATION
═══════════════════════════════ */

/* ── Section shell ── */
.systems-hero{
  position:relative;
  min-height:clamp(620px,78vh,860px);
  overflow:hidden;
  background:#05070B;
  display:flex;
  align-items:center;
}

/* ── Full-bleed background image layer ── */
.systems-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.systems-hero-bg img{
  position:absolute;
  top:0;
  right:0;
  width:72vw;
  height:100%;
  object-fit:cover;
  object-position:center right;
  opacity:0.78;
  filter:saturate(0.9) contrast(1.08) brightness(0.72);
  pointer-events:none;
  user-select:none;
  display:block;
  transition:transform 7s ease, opacity 1.2s ease;
}
.systems-hero:hover .systems-hero-bg img{
  transform:scale(1.04);
  opacity:0.84;
}

/* ── Seamless multi-layer overlay: blends image into dark page ── */
.systems-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      #05070B 0%,
      rgba(5,7,11,0.98) 24%,
      rgba(5,7,11,0.78) 42%,
      rgba(5,7,11,0.34) 62%,
      rgba(5,7,11,0.08) 84%,
      rgba(5,7,11,0.22) 100%
    ),
    linear-gradient(180deg,
      rgba(5,7,11,0.98) 0%,
      transparent 22%,
      transparent 72%,
      #05070B 100%
    ),
    radial-gradient(circle at 78% 45%,
      rgba(212,176,94,0.10),
      transparent 38%
    );
}

/* ── Subtle gold grid in the image zone ── */
.systems-hero-overlay::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(212,176,94,0.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(212,176,94,0.022) 1px,transparent 1px);
  background-size:100px 100px;
  opacity:0.28;
  mask-image:radial-gradient(circle at 72% 50%,black 0%,transparent 65%);
  -webkit-mask-image:radial-gradient(circle at 72% 50%,black 0%,transparent 65%);
}

/* ── Content wrapper sits above both layers ── */
.systems-hero-content{
  position:relative;
  z-index:2;
  width:100%;
  padding:clamp(52px,7vh,88px) 0;
}

/* ── Copy column: constrained left ── */
.systems-hero-copy{
  position:relative;
  z-index:2;
  max-width:640px;
}
.hero-label{
  display:flex;align-items:center;gap:10px;
  font-family:'DM Mono',monospace;
  font-size:.60rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(212,176,94,.68);
  margin-bottom:14px;
  opacity:0;animation:fadeUp .4s var(--ease) forwards .02s;
}
.hero-label::before{content:'';width:20px;height:1px;background:rgba(212,176,94,.44);flex-shrink:0;}
.systems-hero-copy h1{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(3.2rem,5.4vw,6.4rem);
  line-height:0.90;letter-spacing:-0.032em;font-weight:400;
  color:var(--t0);margin:0 0 18px;
  opacity:0;animation:fadeUp .5s var(--ease) forwards .08s;
}
.systems-hero-copy h1 em{color:#D4B05E;font-style:italic;}
.hero-copy{
  font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:1rem;line-height:1.58;
  color:rgba(245,241,232,0.62);
  max-width:540px;margin-bottom:24px;
  opacity:0;animation:fadeUp .5s var(--ease) forwards .15s;
}
.hero-actions{
  display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px;
  opacity:0;animation:fadeUp .5s var(--ease) forwards .22s;
}
.hero-metrics{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;padding-top:16px;
  border-top:1px solid rgba(212,176,94,0.13);
  max-width:560px;
  opacity:0;animation:fadeUp .5s var(--ease) forwards .30s;
}
.hero-metric-val{
  font-family:'Cormorant Garamond',serif;
  font-size:20px;font-weight:400;color:var(--t0);line-height:1;
}
.hero-metric-key{font-size:7px;letter-spacing:.13em;color:var(--t4);text-transform:uppercase;margin-top:3px;}

/* ═══════════════════════════════
   BUTTON VARIANTS
═══════════════════════════════ */
.btn-light{background:var(--t0);color:var(--bg0);font-weight:600;}
.btn-light:hover{background:#fff;box-shadow:0 8px 28px rgba(240,236,228,.12);}
.btn-line{background:transparent;border:1px solid var(--b2);color:var(--t1);}
.btn-line:hover{border-color:var(--b3);}
.btn-au{background:var(--au);color:var(--bg0);font-weight:600;}
.btn-au:hover{background:var(--au2);box-shadow:0 8px 24px var(--au-glow);}
.btn-ghost{background:transparent;border:1px solid var(--b0);color:var(--t2);}
.btn-ghost:hover{border-color:var(--b1);color:var(--t1);}
.btn-sm{padding:6px 14px;font-size:10px;}
.btn-lg{padding:14px 30px;font-size:12px;border-radius:var(--r3);}
.btn-block{width:100%;justify-content:center;}

/* ═══════════════════════════════
   UNIFIED PANEL SYSTEM (filter only)
═══════════════════════════════ */
.panels-backdrop{position:fixed;inset:0;z-index:9997;background:rgba(3,5,8,0.65);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity 260ms ease;}
.panels-backdrop.is-visible{opacity:1;pointer-events:auto;}

/* ═══════════════════════════════
   BASKET DRAWER — premium glass
═══════════════════════════════ */

/* Overlay */
.basket-overlay{
  position:fixed;inset:0;z-index:9980;
  background:
    radial-gradient(circle at 72% 42%,rgba(212,176,94,0.08),transparent 34%),
    rgba(0,0,0,0.56);
  backdrop-filter:blur(12px) saturate(115%);
  -webkit-backdrop-filter:blur(12px) saturate(115%);
  opacity:0;pointer-events:none;
  transition:opacity 340ms ease;
}
body.basket-open .basket-overlay{opacity:1;pointer-events:auto;}
body.basket-open{overflow:hidden;}

/* Drawer panel */
.basket-drawer{
  position:fixed;top:0;right:0;z-index:9990;
  width:min(500px,100vw);
  height:100dvh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:
    radial-gradient(circle at 18% 10%,rgba(212,176,94,0.11),transparent 36%),
    linear-gradient(158deg,rgba(11,14,22,0.86),rgba(5,7,11,0.96));
  border-left:1px solid rgba(212,176,94,0.20);
  box-shadow:-34px 0 100px rgba(0,0,0,0.62),inset 1px 0 0 rgba(255,255,255,0.046);
  backdrop-filter:blur(28px) saturate(140%);
  -webkit-backdrop-filter:blur(28px) saturate(140%);
  transform:translateX(105%);opacity:0;pointer-events:none;
  transition:transform 440ms cubic-bezier(.22,1,.36,1),opacity 280ms ease;
  will-change:transform,opacity;
  overflow:hidden;
}
body.basket-open .basket-drawer{transform:translateX(0);opacity:1;pointer-events:auto;}

/* Glass sweep on open */
.basket-drawer::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:10;
  background:linear-gradient(118deg,transparent 18%,rgba(255,255,255,0.055),transparent 82%);
  opacity:0;transform:translateX(-90%);
}
body.basket-open .basket-drawer::before{animation:basketGlassSweep 900ms ease 180ms forwards;}
@keyframes basketGlassSweep{
  0%  {opacity:0;transform:translateX(-90%);}
  35% {opacity:1;}
  100%{opacity:0;transform:translateX(90%);}
}

/* Top edge glow line */
.basket-drawer::after{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,176,94,0.42),transparent);
  pointer-events:none;z-index:10;
}

/* Header */
.basket-drawer-header{
  position:relative;z-index:2;
  padding:28px 28px 22px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  border-bottom:1px solid rgba(212,176,94,0.13);
  flex-shrink:0;
}
.basket-drawer-label{
  font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(212,176,94,0.68);margin-bottom:8px;
}
.basket-drawer-title{
  font-family:'Cormorant Garamond',serif;font-size:2.1rem;font-weight:400;
  line-height:.95;letter-spacing:-.032em;color:#F5F1E8;margin:0;
}
.basket-close{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(212,176,94,0.20);
  background:linear-gradient(145deg,rgba(255,255,255,0.048),rgba(255,255,255,0.012));
  color:rgba(245,241,232,0.65);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform 220ms ease,border-color 220ms ease,color 220ms ease,box-shadow 220ms ease;
}
.basket-close:hover{
  transform:rotate(90deg) scale(1.06);
  border-color:rgba(212,176,94,0.46);color:#F5F1E8;
  box-shadow:0 0 20px rgba(212,176,94,0.12);
}

/* Scrollable body */
.basket-drawer-body{
  position:relative;z-index:2;
  min-height:0;overflow-y:auto;
  padding:22px 28px;
  scrollbar-width:thin;scrollbar-color:rgba(212,176,94,0.26) transparent;
}
.basket-drawer-body::-webkit-scrollbar{width:4px;}
.basket-drawer-body::-webkit-scrollbar-track{background:transparent;}
.basket-drawer-body::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:linear-gradient(180deg,transparent,rgba(212,176,94,0.32),transparent);
}

/* Hidden utility — ensures [hidden] wins over display:flex */
.basket-drawer [hidden]{display:none !important;}

/* Empty state */
.basket-empty-state{
  padding:40px 0;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.basket-empty-state svg{opacity:.5;}
.basket-empty-state p{font-size:.88rem;color:rgba(245,241,232,0.42);line-height:1.55;margin:0;max-width:260px;}
.basket-empty-state p:first-of-type{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:rgba(245,241,232,0.58);}

/* Item rows */
.basket-items{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;}
.basket-item{
  display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start;
  padding:16px 18px;
  border-radius:16px;
  border:1px solid rgba(212,176,94,0.12);
  background:linear-gradient(145deg,rgba(255,255,255,0.042),rgba(255,255,255,0.010));
  box-shadow:0 8px 32px rgba(0,0,0,0.24),inset 0 1px 0 rgba(255,255,255,0.035);
  animation:basketItemIn 400ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes basketItemIn{
  from{opacity:0;transform:translateX(18px);}
  to  {opacity:1;transform:translateX(0);}
}
.basket-item-kicker{
  font-family:'DM Mono',monospace;font-size:.54rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(212,176,94,0.60);margin:0 0 5px;
}
.basket-item-title{
  font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:400;
  line-height:1.05;color:#F5F1E8;margin:0 0 4px;
}
.basket-item-license{
  font-size:.78rem;color:rgba(245,241,232,0.36);margin:0;
}
.basket-item-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0;}
.basket-item-price{
  font-family:'DM Mono',monospace;font-size:.72rem;letter-spacing:.08em;
  color:#D4B05E;white-space:nowrap;margin:0;
}
.basket-remove{
  width:28px;height:28px;border:0;border-radius:50%;
  background:rgba(255,255,255,0.04);
  color:rgba(245,241,232,0.38);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background 180ms,color 180ms;
}
.basket-remove:hover{background:rgba(248,113,113,0.14);color:rgba(248,113,113,0.85);}

/* Compatibility card */
.basket-compat-card{
  padding:18px;border-radius:16px;margin-bottom:12px;
  border:1px solid rgba(212,176,94,0.13);
  background:linear-gradient(145deg,rgba(255,255,255,0.035),rgba(255,255,255,0.008));
}
.basket-compat-topline{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  font-family:'DM Mono',monospace;font-size:.60rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(245,241,232,0.48);margin-bottom:14px;
}
.basket-compat-topline strong{color:rgba(110,231,183,0.84);font-size:.82rem;}
.basket-compat-meter{
  height:5px;border-radius:999px;background:rgba(255,255,255,0.06);overflow:hidden;
}
.basket-compat-meter span{
  display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,rgba(110,231,183,0.86),rgba(212,176,94,0.72));
  box-shadow:0 0 14px rgba(212,176,94,0.16);
  transition:width .64s cubic-bezier(.22,1,.36,1);
}
.basket-compat-warn{
  margin:12px 0 0;font-size:.80rem;line-height:1.55;
  color:rgba(248,113,113,0.72);
}

/* Summary card */
.basket-summary-card{
  padding:18px;border-radius:16px;
  border:1px solid rgba(212,176,94,0.13);
  background:linear-gradient(145deg,rgba(255,255,255,0.035),rgba(255,255,255,0.008));
}
.basket-summary-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-family:'DM Mono',monospace;font-size:.60rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(245,241,232,0.48);margin-bottom:8px;
}
.basket-summary-row strong{
  font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:400;
  letter-spacing:-.02em;color:#D4B05E;
}
.basket-summary-card>p{font-size:.80rem;color:rgba(245,241,232,0.36);margin:0;line-height:1.55;}

/* Footer */
.basket-drawer-footer{
  position:relative;z-index:2;
  padding:20px 28px 28px;
  display:grid;gap:10px;
  border-top:1px solid rgba(212,176,94,0.13);
  background:linear-gradient(180deg,rgba(5,7,11,0.62),rgba(5,7,11,0.94));
  flex-shrink:0;
}
.basket-drawer-footer .btn{width:100%;justify-content:center;min-height:50px;}

/* Responsive */
@media(max-width:680px){
  .basket-drawer{width:100vw;}
  .basket-drawer-header,.basket-drawer-body,.basket-drawer-footer{padding-left:18px;padding-right:18px;}
}
.systems-panel{position:fixed;top:0;height:100%;width:min(420px,92vw);background:#07090e;border:1px solid rgba(212,176,94,0.14);z-index:9998;display:flex;flex-direction:column;overflow:hidden;transition:transform 300ms cubic-bezier(.22,1,.36,1);}
.systems-panel--left{left:0;transform:translateX(-100%);}
.systems-panel--right{right:0;transform:translateX(100%);}
.systems-panel.is-open{transform:translateX(0);}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid rgba(212,176,94,0.12);flex-shrink:0;}
.panel-title{font-family:'DM Mono',monospace;font-size:0.68rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(212,176,94,0.80);}
.panel-close{width:32px;height:32px;border-radius:50%;border:1px solid rgba(212,176,94,0.16);background:transparent;color:rgba(245,241,232,0.55);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .18s,color .18s;flex-shrink:0;}
.panel-close:hover{border-color:rgba(212,176,94,0.42);color:rgba(245,241,232,0.92);}
.panel-body{overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:rgba(212,176,94,0.12) transparent;}
.panel-body::-webkit-scrollbar{width:3px;}
.panel-body::-webkit-scrollbar-thumb{background:rgba(212,176,94,0.14);}

/* ═══════════════════════════════
   EXCHANGE CONTROL BAR
═══════════════════════════════ */
.xctrl-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:stretch;background:var(--bg2);border-top:1px solid var(--b0);border-bottom:1px solid var(--b0);min-height:44px;}
.xctrl-btn{display:inline-flex;align-items:center;gap:8px;padding:0 20px;background:transparent;border:none;border-right:1px solid var(--b0);font-family:'DM Mono',monospace;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(212,176,94,0.65);cursor:pointer;white-space:nowrap;transition:color .18s,background .18s;flex-shrink:0;}
.xctrl-btn:hover,.xctrl-btn.is-active{color:rgba(212,176,94,1);background:rgba(212,176,94,0.04);}
.xctrl-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0;}
.xctrl-btn--basket{border-right:none;border-left:1px solid var(--b0);}
.xctrl-basket-count{display:none;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:rgba(212,176,94,0.20);color:rgba(212,176,94,0.95);font-size:9px;}
.xctrl-basket-count.has-items{display:inline-flex;}
.xctrl-tabs{display:flex;overflow-x:auto;scrollbar-width:none;align-items:stretch;}
.xctrl-tabs::-webkit-scrollbar{display:none;}
.xctrl-right{display:flex;align-items:stretch;border-left:1px solid var(--b0);}
.xctrl-sort{display:flex;align-items:stretch;}
.xctrl-count{display:flex;align-items:center;padding:0 16px;font-size:9px;color:var(--t4);letter-spacing:.08em;white-space:nowrap;border-left:1px solid var(--b0);border-right:1px solid var(--b0);}
/* ── Exchange section: premium institutional base ── */
#exchange{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 8%,rgba(212,176,94,0.07),transparent 36%),
    radial-gradient(circle at 82% 62%,rgba(212,176,94,0.04),transparent 44%),
    linear-gradient(180deg,#05070B 0%,#06080F 44%,#04060A 100%);
}
/* animated background drift — ultra-subtle, zero distraction */
#exchange::after{
  content:'';
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,0.018),transparent 40%),
    radial-gradient(circle at 70% 80%,rgba(255,255,255,0.012),transparent 40%);
  animation:bgDrift 18s ease-in-out infinite;
  pointer-events:none;
}
/* ensure control bar and chips stay above the pseudo-elements */
#exchange .xctrl-bar,
#exchange .active-chips{position:relative;z-index:2;}

/* product grid: clean gap layout, no 1px separator trick */
.xgrid{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:16px;
  padding:24px 24px 40px;
  background:transparent;
}
/* stage lighting under the card grid */
.xgrid::before{
  content:'';
  position:absolute;
  top:5%;left:50%;
  transform:translateX(-50%);
  width:75%;height:65%;
  background:radial-gradient(ellipse at center,rgba(212,176,94,0.08),transparent 70%);
  filter:blur(90px);
  pointer-events:none;
  z-index:0;
}

/* ═══════════════════════════════
   CARD ACTION BUTTONS
═══════════════════════════════ */
.btn-card-preview{padding:9px 14px;border-radius:var(--r2);border:1px solid rgba(212,176,94,0.16);background:transparent;color:rgba(245,241,232,0.60);font-family:'DM Mono',monospace;font-size:8.5px;letter-spacing:.10em;text-transform:uppercase;cursor:pointer;transition:border-color .18s,color .18s,background .18s;white-space:nowrap;width:100%;}
.btn-card-preview:hover{border-color:rgba(212,176,94,0.45);color:rgba(212,176,94,0.92);background:rgba(212,176,94,0.05);}
.btn-card-add{padding:9px 14px;border-radius:var(--r2);border:1px solid rgba(212,176,94,0.32);background:rgba(212,176,94,0.08);color:rgba(212,176,94,0.82);font-family:'DM Mono',monospace;font-size:8.5px;letter-spacing:.10em;text-transform:uppercase;cursor:pointer;transition:border-color .20s,color .20s,background .20s;white-space:nowrap;width:100%;}
.btn-card-add:hover{border-color:rgba(212,176,94,0.60);background:rgba(212,176,94,0.16);color:#D4B05E;}
.btn-card-add.is-active{border-color:rgba(77,173,118,0.42);background:rgba(77,173,118,0.09);color:rgba(77,173,118,0.88);}
.btn-card-add.is-active:hover{background:rgba(77,173,118,0.17);}
.card-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px;}

/* ═══════════════════════════════
   FILTER PANEL INNER
═══════════════════════════════ */
.fp-hdr{padding:22px 22px 16px;border-bottom:1px solid var(--b0);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg2);z-index:2;}
.fp-hdr-title{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--t3);}
.fp-hdr-close{font-size:14px;color:var(--t4);cursor:pointer;line-height:1;transition:color .18s;}
.fp-hdr-close:hover{color:var(--t2);}
.fp-chips-section{padding:18px 22px;border-bottom:1px solid var(--b0);}
.fp-section-lbl{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--t4);margin-bottom:14px;display:flex;align-items:center;gap:7px;}
.fp-section-lbl::after{content:'';flex:1;height:1px;background:var(--b0);}
.range-wrap{margin-bottom:8px;}
.range-row{font-size:10px;color:var(--t2);display:flex;justify-content:space-between;margin-bottom:6px;}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;border-radius:1px;background:var(--b1);outline:none;cursor:pointer;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--t0);border:2px solid var(--bg2);cursor:pointer;}
.fp-pills{display:flex;flex-wrap:wrap;gap:5px;}
.fp-pill{padding:4px 11px;border-radius:20px;border:1px solid var(--b0);font-size:10px;color:var(--t3);cursor:pointer;transition:all .18s var(--ease);background:transparent;font-family:'DM Mono',monospace;}
.fp-pill:hover{border-color:var(--b1);color:var(--t2);}
.fp-pill.on{border-color:rgba(184,154,80,.4);color:var(--au);background:var(--au-dim);}
.active-chips{display:flex;flex-wrap:wrap;gap:5px;padding:12px 22px;border-bottom:1px solid var(--b0);}
.a-chip{display:flex;align-items:center;gap:5px;padding:3px 9px;border-radius:2px;border:1px solid var(--b1);background:var(--surf);font-size:9px;color:var(--t2);letter-spacing:.04em;}
.a-chip-x{cursor:pointer;color:var(--t4);font-size:13px;line-height:1;transition:color .15s;}
.a-chip-x:hover{color:var(--sr);}
.sort-tabs{display:flex;gap:0;flex-shrink:0;}
.sort-tab{padding:0 16px;height:42px;font-size:10px;letter-spacing:.09em;color:var(--t3);cursor:pointer;transition:all .2s;background:transparent;border:none;border-bottom:2px solid transparent;font-family:'DM Mono',monospace;white-space:nowrap;}
.sort-tab:hover{color:var(--t1);}
.sort-tab.on{color:var(--t0);border-bottom-color:var(--b2);}
.mode-toggle{display:flex;align-items:center;gap:8px;padding:0 16px;font-size:10px;color:var(--t3);flex-shrink:0;}
.mode-rail{width:34px;height:18px;border-radius:9px;background:var(--b1);position:relative;cursor:pointer;transition:background .22s;}
.mode-rail.on{background:var(--au-dim);border:1px solid rgba(184,154,80,.3);}
.mode-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--t2);transition:transform .22s var(--ease),background .22s;}
.mode-rail.on .mode-knob{transform:translateX(16px);background:var(--au);}

/* ═══════════════════════════════
   PRODUCT CARDS
═══════════════════════════════ */
.c-card{
  position:relative;z-index:2;
  background:linear-gradient(180deg,rgba(10,13,20,0.94),rgba(6,8,14,0.97));
  border:1px solid rgba(212,176,94,0.10);
  border-radius:4px;
  padding:26px 26px 22px;
  cursor:pointer;
  transition:background .32s var(--ease),box-shadow .32s,transform .32s var(--ease),border-color .32s;
  transform-style:preserve-3d;
  overflow:hidden;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.c-card::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(145deg,rgba(255,255,255,.032) 0%,transparent 55%);
  opacity:0;transition:opacity .32s;
}
.c-card:hover{
  background:linear-gradient(180deg,rgba(13,16,26,0.97),rgba(8,11,18,0.99));
  border-color:rgba(212,176,94,0.22);
  transform:translateY(-3px) perspective(900px) rotateX(.4deg);
  box-shadow:0 18px 52px rgba(0,0,0,.60),0 0 0 1px rgba(212,176,94,0.08),0 0 30px rgba(212,176,94,0.04);
  z-index:2;
}
.c-card:hover::before{opacity:1;}
.c-card.locked{cursor:default;}
.c-card.locked .c-card__inner{filter:blur(3.5px);pointer-events:none;user-select:none;}
.c-card.locked::after{content:'';position:absolute;inset:0;z-index:2;background:rgba(3,5,8,.6);}
.c-card__lock{display:none;position:absolute;inset:0;z-index:3;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:28px;}
.c-card.locked .c-card__lock{display:flex;}
.lock-ring{width:46px;height:46px;border-radius:50%;border:1px solid var(--b1);background:var(--bg3);display:flex;align-items:center;justify-content:center;color:var(--t2);}
.lock-ring svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5;}
.lock-t{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--t1);}
.lock-s{font-size:10px;color:var(--t4);line-height:1.65;max-width:190px;}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;}
.card-meta{font-size:9px;letter-spacing:.18em;color:var(--t4);text-transform:uppercase;margin-bottom:5px;}
.card-name{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:400;color:var(--t0);line-height:1;}
.card-stability{font-size:10px;color:var(--sg);display:flex;align-items:center;gap:5px;flex-shrink:0;}
.card-stability::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--sg);flex-shrink:0;animation:blink 3s ease-in-out infinite;}
.card-rule{height:1px;background:var(--b0);margin-bottom:20px;position:relative;overflow:hidden;}
.card-rule::after{content:'';position:absolute;top:0;left:-120%;width:120%;height:100%;background:linear-gradient(to right,transparent,rgba(184,154,80,.5),transparent);transition:left .7s var(--ease-o);}
.c-card:hover .card-rule::after{left:120%;}
.card-chart{height:52px;margin-bottom:20px;position:relative;overflow:hidden;}
.card-chart svg{width:100%;height:100%;}
.chart-line{stroke-dasharray:2000;stroke-dashoffset:2000;transition:stroke-dashoffset 1.4s var(--ease-o);}
.chart-fill{opacity:0;transition:opacity .9s var(--ease) .35s;}
.c-card:hover .chart-line{stroke-dashoffset:0;}
.c-card:hover .chart-fill{opacity:1;}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px;}
.cg-key{font-size:8px;letter-spacing:.12em;color:var(--t4);text-transform:uppercase;margin-bottom:3px;}
.cg-val{font-size:12px;color:var(--t2);transition:color .22s;}
.c-card:hover .cg-val{color:var(--t1);}
.cg-val.sg{color:var(--sg);}
.cg-val.sa{color:var(--sa);}
.cg-val.sr{color:var(--sr);}
.card-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px;}
.c-tag{padding:3px 10px;border-radius:20px;border:1px solid var(--b0);font-size:9px;color:var(--t4);letter-spacing:.05em;transition:all .2s var(--ease);}
.c-card:hover .c-tag{border-color:var(--b1);color:var(--t3);}
.card-deploy{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--b0);border-radius:var(--r2);background:var(--surf);font-size:10px;color:var(--t4);margin-bottom:16px;transition:border-color .22s;}
.c-card:hover .card-deploy{border-color:var(--b1);}
.deploy-svg{width:13px;height:13px;flex-shrink:0;stroke:var(--t4);fill:none;stroke-width:1.5;}
.card-proof{font-size:10px;color:var(--t4);margin-bottom:18px;opacity:0;transform:translateY(5px);transition:opacity .38s var(--ease) .1s,transform .38s var(--ease) .1s;}
.c-card:hover .card-proof{opacity:1;transform:translateY(0);}
.card-price-row{padding-top:14px;border-top:1px solid var(--b0);}
.price-amt{font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:400;color:var(--t0);line-height:1;position:relative;display:inline-block;}
.price-shimmer{position:absolute;inset:0;overflow:hidden;background:linear-gradient(108deg,transparent 38%,rgba(184,154,80,.14) 50%,transparent 62%);background-size:300% 100%;animation:priceShimmer 5s ease-in-out infinite;}
.price-label{font-size:9px;color:var(--t4);margin-top:4px;letter-spacing:.06em;}
.price-note{font-size:9px;color:var(--t3);margin-top:2px;}
.c-grid{display:grid;}
.c-grid.list .c-card{border-bottom:1px solid var(--b0);}
.c-grid.tiles{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}

/* ═══════════════════════════════
   HOW IT WORKS — compact
═══════════════════════════════ */
#how-it-works.c-section{padding:28px 0 30px;}
#how-it-works .s-eye{margin-bottom:6px;font-size:.58rem;letter-spacing:.18em;}
#how-it-works .s-h{font-size:clamp(1.9rem,3vw,2.6rem);line-height:.95;margin-bottom:8px;}
#how-it-works .s-sub{font-size:.85rem;line-height:1.45;margin-bottom:18px;max-width:520px;}
.hiw-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px;}
.hiw-connector{display:none;}
.hiw-node{padding:14px 16px;background:var(--bg2);border:1px solid var(--b0);border-radius:8px;min-height:auto;transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);}
.hiw-node:hover{border-color:rgba(184,154,80,.35);background:var(--bg3);transform:translateY(-2px);}
.hiw-num{width:22px;height:22px;border-radius:50%;border:1px solid rgba(184,154,80,.3);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:11px;color:var(--au);margin-bottom:8px;}
.hiw-title{font-family:'Cormorant Garamond',serif;font-size:1.05rem;color:var(--t0);margin-bottom:4px;line-height:1.1;}
.hiw-desc{font-size:.72rem;color:var(--t3);line-height:1.4;}

/* ═══════════════════════════════
   BASKET PANEL INNER
═══════════════════════════════ */
.bp-hdr-title{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--t3);}
.bp-empty{padding:40px 22px;text-align:center;color:var(--t4);font-size:11px;line-height:1.8;}
.bp-total{padding:18px 22px;border-top:1px solid var(--b0);background:var(--bg3);}
.bp-total-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;}
.bp-total-label{font-size:9px;letter-spacing:.12em;color:var(--t4);text-transform:uppercase;}
.bp-total-amount{font-family:'Cormorant Garamond',serif;font-size:28px;color:var(--t0);}
.bp-actions{padding:14px 22px;display:flex;flex-direction:column;gap:8px;}
.bp-item{padding:14px 22px;border-bottom:1px solid var(--b0);display:flex;gap:12px;align-items:flex-start;}
.bp-item-name{font-size:11px;color:var(--t1);margin-bottom:4px;}
.bp-item-price{font-size:10px;color:var(--au);}
.bp-item-remove{font-size:13px;color:var(--t4);cursor:pointer;line-height:1;flex-shrink:0;padding:2px;transition:color .18s;}
.bp-item-remove:hover{color:var(--sr);}
.compatibility-row{padding:12px 22px;border-bottom:1px solid var(--b0);}
.compat-label{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--t4);margin-bottom:8px;}
.compat-bars{display:flex;flex-direction:column;gap:6px;}
.compat-bar-wrap{display:flex;align-items:center;gap:8px;}
.compat-bar-lbl{font-size:9px;color:var(--t3);width:80px;flex-shrink:0;}
.compat-bar-track{flex:1;height:3px;background:var(--b0);border-radius:2px;overflow:hidden;}
.compat-bar-fill{height:100%;border-radius:2px;background:var(--sg);transition:width .6s var(--ease);}

/* ═══════════════════════════════
   ALLOCATOR DECISION SECTION
═══════════════════════════════ */
.allocator-decision-section{
  position:relative;z-index:1;
  padding:34px 0 42px;
  border-top:1px solid rgba(212,176,94,0.08);
  border-bottom:1px solid rgba(212,176,94,0.08);
  background:
    radial-gradient(circle at 78% 18%,rgba(212,176,94,0.06),transparent 32%),
    linear-gradient(180deg,rgba(5,7,11,0.98),rgba(8,11,20,0.92));
}

/* ── Profile subsection header ── */
#profiles{margin-bottom:30px;}
#profiles .s-eye,
#case-studies .s-eye{margin-bottom:6px;font-size:.58rem;letter-spacing:.18em;}
#profiles .s-h{font-size:clamp(2rem,3.4vw,3.4rem);line-height:.95;margin-bottom:8px;}
#profiles .s-sub{font-size:.86rem;line-height:1.45;max-width:640px;margin-bottom:16px;}

/* ── Profile grid ── */
.profiles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;}

/* ── Profile cards ── */
.profile-c{
  position:relative;
  min-height:145px;
  padding:18px 20px;
  border-radius:14px;
  border:1px solid rgba(212,176,94,0.10);
  background:linear-gradient(145deg,rgba(255,255,255,0.035),rgba(255,255,255,0.012));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.015);
  cursor:pointer;
  transition:transform 220ms ease,border-color 220ms ease,background 220ms ease,box-shadow 220ms ease;
}
.profile-c::before{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 20% 0%,rgba(212,176,94,0.10),transparent 36%);
  opacity:0;
  transition:opacity 220ms ease;
  pointer-events:none;
}
.profile-c:hover::before,
.profile-c.active::before{opacity:1;}
.profile-c:hover{
  transform:translateY(-2px);
  border-color:rgba(212,176,94,0.30);
  box-shadow:0 16px 46px rgba(0,0,0,0.30);
}
.profile-c.active{
  border-color:rgba(212,176,94,0.48);
  background:linear-gradient(145deg,rgba(212,176,94,0.08),rgba(255,255,255,0.018));
  box-shadow:0 18px 50px rgba(0,0,0,0.34),inset 0 0 0 1px rgba(212,176,94,0.10);
}
.profile-tag{font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t4);margin-bottom:5px;}
.profile-name{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:#F5F1E8;margin-bottom:6px;line-height:1.1;}
.profile-desc{font-size:.72rem;color:rgba(245,241,232,0.50);line-height:1.4;margin-bottom:10px;}
.profile-tags{display:flex;flex-wrap:wrap;gap:4px;}
.profile-tag-chip{
  padding:3px 8px;border-radius:20px;
  border:1px solid rgba(212,176,94,0.12);
  font-size:.58rem;
  color:rgba(245,241,232,0.46);
  background:rgba(255,255,255,0.018);
}
.profile-c.active .profile-tag-chip{
  color:rgba(212,176,94,0.78);
  border-color:rgba(212,176,94,0.24);
}

/* ── Case studies subsection ── */
#case-studies{padding-top:34px;}
#case-studies .s-h{font-size:clamp(2rem,3.2vw,3.2rem);line-height:.96;margin-bottom:16px;}

/* ── Case study grid ── */
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px;}

/* ── Case study cards ── */
.case-c{
  position:relative;
  padding:20px 22px;
  border-radius:14px;
  border:1px solid rgba(212,176,94,0.10);
  background:linear-gradient(145deg,rgba(255,255,255,0.032),rgba(255,255,255,0.012));
  overflow:hidden;
  transition:transform 220ms ease,border-color 220ms ease,box-shadow 220ms ease;
}
.case-c::after{
  content:'';
  position:absolute;left:22px;right:22px;bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,176,94,0.42),transparent);
  opacity:0.5;
}
.case-c:hover{
  transform:translateY(-2px);
  border-color:rgba(212,176,94,0.30);
  box-shadow:0 16px 46px rgba(0,0,0,0.30);
}
.case-label{font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(212,176,94,0.50);margin-bottom:5px;}
.case-title{font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:#F5F1E8;margin-bottom:7px;line-height:1.12;}
.case-body{font-size:.74rem;color:rgba(245,241,232,0.48);line-height:1.45;margin-bottom:12px;}
.case-outcome{display:flex;gap:30px;padding-top:12px;margin-top:12px;border-top:1px solid rgba(212,176,94,0.08);}
.case-stat-val{font-family:'Cormorant Garamond',serif;font-size:1.6rem;color:#D4B05E;line-height:1;}
.case-stat-key{font-size:.58rem;color:rgba(245,241,232,0.42);line-height:1.25;margin-top:2px;}

/* ═══════════════════════════════
   SYSTEMS NETWORK — compact panel
═══════════════════════════════ */
.systems-network-section{padding:34px 0 38px;overflow:visible;}
.systems-network-header{max-width:720px;margin-bottom:18px;}
.systems-network-header .s-eye{margin-bottom:6px;font-size:.56rem;}
.systems-network-section .s-h,
.systems-network-header .s-h{font-size:clamp(2rem,3.4vw,3.2rem);line-height:.95;margin-bottom:8px;}
.systems-network-section .s-sub,
.systems-network-header .s-sub{font-size:.82rem;line-height:1.42;max-width:560px;}
/* ── Network shell: deep-space institutional container ── */
.systems-network-shell{
  position:relative;
  height:clamp(360px,36vw,470px);
  min-height:360px;
  border:1px solid rgba(212,176,94,.18);
  border-radius:28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 48%,rgba(212,176,94,.13),transparent 28%),
    radial-gradient(circle at 22% 58%,rgba(51,164,115,.08),transparent 24%),
    radial-gradient(circle at 76% 46%,rgba(70,130,210,.09),transparent 25%),
    radial-gradient(circle at 82% 72%,rgba(180,62,62,.07),transparent 24%),
    linear-gradient(180deg,#070A10 0%,#05070B 54%,#030407 100%);
  box-shadow:
    0 34px 110px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 90px rgba(212,176,94,.035);
}
.systems-network-shell::before{
  content:"PORTFOLIO NODE MAP";
  position:absolute;top:16px;left:18px;z-index:5;
  font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.2em;
  color:rgba(212,176,94,.56);pointer-events:none;
}
.systems-network-shell::after{
  content:"Hover nodes to inspect dependency flow";
  position:absolute;bottom:16px;right:18px;z-index:5;
  font-family:'DM Mono',monospace;font-size:.56rem;letter-spacing:.12em;
  color:rgba(245,241,232,.34);pointer-events:none;
}

/* ── Canvas sits above CSS layers, below tooltip + labels ── */
.systems-network-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;cursor:default;
  z-index:2;
}

/* ── Deep-space CSS background layers (all z-index:0) ── */
/* Defensive: no decorative element may ever capture events or show text */
.node-space-layer,
.node-space-layer *,
.node-space-vignette,
.node-space-vignette * {
  pointer-events: none !important;
  user-select:    none !important;
  cursor:         default !important;
}
.node-space-layer:hover::before,
.node-space-layer:hover::after,
.node-space-vignette:hover::before,
.node-space-vignette:hover::after {
  content: none !important;
  display: none !important;
}

.node-space-layer{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:0;
}

.node-space-layer--nebula{
  background:
    radial-gradient(circle at 48% 52%,rgba(212,176,94,.14),transparent 22%),
    radial-gradient(circle at 31% 42%,rgba(56,189,140,.055),transparent 18%),
    radial-gradient(circle at 74% 38%,rgba(59,130,246,.06),transparent 20%),
    radial-gradient(circle at 84% 68%,rgba(248,113,113,.055),transparent 18%);
  filter:blur(18px);
  opacity:.9;
  animation:nebulaDrift 22s ease-in-out infinite alternate;
}

.node-space-layer--particles{
  background-image:
    radial-gradient(circle,rgba(212,176,94,.55) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(245,241,232,.28) 0 1px,transparent 1.5px);
  background-size:92px 92px,137px 137px;
  background-position:0 0,36px 58px;
  opacity:.18;
  animation:particleDrift 34s linear infinite;
}

.node-space-layer--orbits{
  background:
    radial-gradient(ellipse at 50% 52%,transparent 32%,rgba(212,176,94,.11) 32.4%,transparent 33%),
    radial-gradient(ellipse at 50% 52%,transparent 42%,rgba(245,241,232,.055) 42.3%,transparent 42.8%),
    radial-gradient(ellipse at 50% 52%,transparent 52%,rgba(212,176,94,.055) 52.2%,transparent 52.7%);
  transform:rotate(-8deg) scale(1.18);
  opacity:.46;
  animation:orbitBreath 18s ease-in-out infinite alternate;
}

/* Vignette sits ABOVE the canvas to darken edges + add bottom fog */
.node-space-vignette{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:3;
  background:
    radial-gradient(circle at 50% 50%,transparent 28%,rgba(5,7,11,.38) 74%,rgba(5,7,11,.78) 100%),
    linear-gradient(180deg,rgba(5,7,11,.32),transparent 26%,transparent 68%,rgba(5,7,11,.72) 100%);
}

/* ── Space layer keyframes ── */
@keyframes nebulaDrift{
  from{transform:translate3d(-8px,4px,0) scale(1);}
  to  {transform:translate3d(10px,-6px,0) scale(1.04);}
}
@keyframes particleDrift{
  from{background-position:0 0,36px 58px;}
  to  {background-position:240px -180px,-160px 220px;}
}
@keyframes orbitBreath{
  from{transform:rotate(-8deg) scale(1.13);opacity:.32;}
  to  {transform:rotate(-6deg) scale(1.20);opacity:.52;}
}

.network-tooltip{
  position:absolute;z-index:6;
  min-width:220px;max-width:300px;
  padding:12px 14px;
  border:1px solid rgba(212,176,94,0.22);
  border-radius:12px;
  background:rgba(5,7,11,0.92);
  backdrop-filter:blur(16px);
  box-shadow:0 18px 60px rgba(0,0,0,0.5);
  opacity:0;pointer-events:none;
  transform:translateY(10px);
  transition:opacity 180ms ease,transform 180ms ease;
}
.network-tooltip.is-visible{opacity:1;transform:translateY(0);}
.network-tooltip [data-tooltip-role]{display:block;margin-bottom:7px;font-family:'DM Mono',monospace;font-size:0.63rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(212,176,94,0.72);}
.network-tooltip [data-tooltip-name]{display:block;margin-bottom:8px;font-family:'Cormorant Garamond',serif;font-size:1.25rem;line-height:1.1;color:#F5F1E8;}
.network-tooltip [data-tooltip-copy]{margin:0;font-size:.78rem;line-height:1.45;color:rgba(245,241,232,.60);}

/* ═══════════════════════════════
   FAQ — compact
═══════════════════════════════ */
#faq.c-section{padding:36px 0 44px;}
#faq .s-eye{margin-bottom:7px;font-size:.58rem;letter-spacing:.18em;}
#faq .s-h{font-size:clamp(2.1rem,4vw,3.6rem);line-height:.95;margin-bottom:12px;}
#faq .s-sub{font-size:.9rem;line-height:1.5;max-width:560px;margin-bottom:20px;}
.faq-list{margin-top:0;}
.faq-row{border-bottom:1px solid rgba(212,176,94,.10);padding:13px 0;}
.faq-q{font-size:.84rem;line-height:1.35;color:rgba(245,241,232,.72);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:color .2s;}
.faq-q:hover,.faq-row:hover .faq-q{color:#F5F1E8;}
.faq-arrow{font-size:1rem;color:rgba(212,176,94,.45);flex-shrink:0;transition:transform .28s var(--ease);}
.faq-row.open .faq-arrow{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
.faq-row.open .faq-a{max-height:160px;}
.faq-a-inner{padding:8px 0 2px;font-size:.74rem;color:rgba(245,241,232,.50);line-height:1.5;}

/* ═══════════════════════════════
   CTA — compact
═══════════════════════════════ */
.c-cta{position:relative;overflow:visible;padding:38px 0 42px;}
.cta-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 70% 50%,rgba(184,154,80,.05),transparent 65%);}
.cta-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1fr);gap:42px;align-items:center;}
.cta-h{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,3.6vw,3.4rem);font-weight:400;color:var(--t0);line-height:.98;margin-bottom:12px;}
.cta-h em{font-style:italic;color:var(--au);}
.cta-body{font-family:'Cormorant Garamond',serif;font-size:.92rem;font-weight:300;color:var(--t2);line-height:1.5;max-width:520px;}
.cta-right{display:flex;flex-direction:column;gap:10px;}
.cta-qual{font-size:.72rem;color:var(--t3);line-height:1.45;padding:14px 16px;border:1px solid var(--b0);border-radius:var(--r3);margin-bottom:6px;}
.cta-qual strong{display:block;color:var(--t2);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;}
.cta-right .btn,.cta-right a.btn{min-height:46px;padding:12px 18px;font-size:.68rem;}
.cta-foot-note{font-size:.58rem;color:var(--t4);text-align:center;margin-top:4px;}

/* ═══════════════════════════════════════════════════════════════
   SYSTEM PRODUCT PANEL — IMMERSIVE INTERFACE
═══════════════════════════════════════════════════════════════ */

/* ── Overlay ── */
.spp-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(2,3,6,0.92);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  opacity:0;pointer-events:none;
  transition:opacity 320ms cubic-bezier(0.22,1,0.36,1);
  display:flex;flex-direction:column;
}
.spp-overlay.is-open{opacity:1;pointer-events:auto;}

/* ── Main Panel ── */
.spp{
  flex:1;min-height:0;
  display:grid;
  grid-template-columns:260px 1fr 380px;
  background:
    radial-gradient(circle at 65% 0%,rgba(212,176,94,0.08),transparent 40%),
    radial-gradient(circle at 10% 80%,rgba(212,176,94,0.04),transparent 30%),
    linear-gradient(180deg,#04060b,#080c14);
  transform:translateY(24px) scale(0.97);
  transition:transform 380ms cubic-bezier(0.22,1,0.36,1);
}
.spp-overlay.is-open .spp{transform:translateY(0) scale(1);}

/* ── LEFT RAIL ── */
.spp-rail{
  display:flex;flex-direction:column;
  background:rgba(5,7,11,0.72);
  border-right:1px solid rgba(212,176,94,0.10);
  overflow:hidden;
}
.spp-rail-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 20px 16px;
  border-bottom:1px solid rgba(212,176,94,0.08);
}
.spp-rail-code{
  font-family:'DM Mono',monospace;font-size:0.60rem;
  letter-spacing:0.24em;text-transform:uppercase;
  color:rgba(212,176,94,0.65);
}
.spp-rail-close{
  width:32px;height:32px;border-radius:8px;
  border:1px solid rgba(255,255,255,0.07);
  background:rgba(255,255,255,0.03);
  color:rgba(245,241,232,0.52);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .16s,color .16s,background .16s;
}
.spp-rail-close:hover{border-color:rgba(212,176,94,0.35);color:#F5F1E8;background:rgba(212,176,94,0.06);}
.spp-rail-close svg{width:16px;height:16px;}

/* ── Nav ── */
.spp-nav{flex:1;display:flex;flex-direction:column;padding:16px 12px;gap:4px;overflow-y:auto;}
.spp-nav-btn{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:10px;
  border:none;background:transparent;
  color:rgba(245,241,232,0.38);
  font-family:'DM Mono',monospace;font-size:0.64rem;letter-spacing:0.14em;text-transform:uppercase;
  cursor:pointer;text-align:left;
  transition:background .18s,color .18s;
  position:relative;
}
.spp-nav-btn svg{width:16px;height:16px;flex-shrink:0;opacity:0.6;transition:opacity .18s;}
.spp-nav-btn:hover{background:rgba(255,255,255,0.04);color:rgba(245,241,232,0.72);}
.spp-nav-btn:hover svg{opacity:0.9;}
.spp-nav-btn.is-active{
  background:rgba(212,176,94,0.06);
  color:rgba(212,176,94,0.92);
  border:1px solid rgba(212,176,94,0.14);
}
.spp-nav-btn.is-active svg{opacity:1;}
.spp-nav-btn.is-active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:60%;border-radius:0 2px 2px 0;
  background:linear-gradient(180deg,#D4B05E,rgba(212,176,94,0.4));
}

/* ── Rail Footer ── */
.spp-rail-footer{
  padding:16px 20px;border-top:1px solid rgba(212,176,94,0.08);
  display:flex;flex-direction:column;gap:10px;
}
.spp-live-pill{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'DM Mono',monospace;font-size:0.56rem;letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(58,200,120,0.75);
}
.spp-live-dot{
  width:6px;height:6px;border-radius:50%;
  background:#3ac878;
  box-shadow:0 0 0 3px rgba(58,200,120,0.15);
  animation:dotPulse 1.8s ease-in-out infinite;
}
.spp-rail-ver{
  font-family:'DM Mono',monospace;font-size:0.58rem;letter-spacing:0.12em;
  color:rgba(245,241,232,0.28);
}

/* ── MAIN CONTENT ── */
/* ── Scroll frame wrapper (grid child) ── */
.spp-scroll-frame{
  position:relative;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* Fade edges — top and bottom of scroll area */
.spp-scroll-frame::before,
.spp-scroll-frame::after{
  content:'';
  position:absolute;
  left:0;right:8px;
  height:44px;
  z-index:8;
  pointer-events:none;
}
.spp-scroll-frame::before{
  top:0;
  background:linear-gradient(180deg,rgba(4,6,11,0.96) 0%,transparent 100%);
}
.spp-scroll-frame::after{
  bottom:0;
  background:linear-gradient(0deg,rgba(4,6,11,0.96) 0%,transparent 100%);
}

/* ── Scroll container (inner) ── */
.spp-main{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:0;
  scroll-behavior:smooth;
  /* prevent fade from covering scrollbar track */
  scrollbar-gutter:auto;
}

/* ── Premium scrollbar ── */
.custom-panel-scroll{
  scrollbar-width:thin;
  scrollbar-color:rgba(212,176,94,0.22) transparent;
}
.custom-panel-scroll::-webkit-scrollbar{
  width:5px;
}
.custom-panel-scroll::-webkit-scrollbar-track{
  background:transparent;
}
.custom-panel-scroll::-webkit-scrollbar-thumb{
  background:linear-gradient(
    180deg,
    transparent 0%,
    rgba(212,176,94,0.22) 30%,
    rgba(212,176,94,0.28) 50%,
    rgba(212,176,94,0.22) 70%,
    transparent 100%
  );
  border-radius:999px;
  transition:background .25s;
}
.custom-panel-scroll::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(
    180deg,
    transparent 0%,
    rgba(212,176,94,0.44) 30%,
    rgba(212,176,94,0.55) 50%,
    rgba(212,176,94,0.44) 70%,
    transparent 100%
  );
}
/* Nearly invisible until hover */
.spp:not(:hover) .custom-panel-scroll::-webkit-scrollbar-thumb{
  background:rgba(212,176,94,0.08);
}
.spp:hover .custom-panel-scroll::-webkit-scrollbar-thumb{
  background:linear-gradient(
    180deg,
    transparent,
    rgba(212,176,94,0.28),
    transparent
  );
}

/* Header */
.spp-header{
  position:sticky;top:0;z-index:10;
  padding:32px 40px 28px;
  background:
    linear-gradient(180deg,rgba(4,6,11,0.98) 0%,rgba(4,6,11,0.85) 100%);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(212,176,94,0.10);
  display:flex;align-items:flex-start;justify-content:space-between;gap:32px;
}
.spp-header-copy{flex:1;min-width:0;}
.spp-role{
  margin:0 0 10px;
  font-family:'DM Mono',monospace;font-size:0.62rem;letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(212,176,94,0.72);
}
.spp-title{
  margin:0 0 12px;
  font-family:'Cormorant Garamond',serif;font-size:clamp(2.4rem,4vw,4.4rem);
  font-weight:400;line-height:0.88;letter-spacing:-0.03em;color:#F5F1E8;
}
.spp-tagline{
  margin:0;font-size:0.94rem;line-height:1.62;
  color:rgba(245,241,232,0.50);max-width:540px;
}

/* Header pills */
.spp-pills{
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0;
}
.spp-pill{
  display:flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:8px;
  border:1px solid rgba(212,176,94,0.16);
  background:rgba(255,255,255,0.022);
  backdrop-filter:blur(10px);
  transition:border-color .2s,background .2s,transform .2s;
  white-space:nowrap;
}
.spp-pill:hover{border-color:rgba(212,176,94,0.35);background:rgba(212,176,94,0.06);transform:translateX(-2px);}
.spp-pill-key{
  font-family:'DM Mono',monospace;font-size:0.56rem;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(212,176,94,0.55);
}
.spp-pill-val{
  font-family:'DM Mono',monospace;font-size:0.70rem;letter-spacing:0.08em;
  color:rgba(245,241,232,0.82);
}

/* Sections */
.spp-section{padding:40px 40px 0;}
.spp-section:last-child{padding-bottom:60px;}
.spp-section-eye{
  font-family:'DM Mono',monospace;font-size:0.58rem;letter-spacing:0.26em;text-transform:uppercase;
  color:rgba(212,176,94,0.65);margin-bottom:24px;
  display:flex;align-items:center;gap:10px;
}
.spp-section-eye::before{content:'';width:24px;height:1px;background:rgba(212,176,94,0.45);}

/* Description */
.spp-desc{
  font-family:'Cormorant Garamond',serif;font-size:1.12rem;line-height:1.76;
  color:rgba(245,241,232,0.62);margin:0 0 32px;max-width:680px;
}

/* Metrics Grid */
.spp-metrics-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:0;
}
.spp-metric-card{
  padding:20px 18px;
  border:1px solid rgba(212,176,94,0.12);border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,0.04),rgba(255,255,255,0.012));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.018),0 8px 24px rgba(0,0,0,0.22);
  transition:border-color .2s,transform .2s;
  position:relative;overflow:hidden;
}
.spp-metric-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,176,94,0.30),transparent);
}
.spp-metric-card:hover{border-color:rgba(212,176,94,0.28);transform:translateY(-2px);}
.spp-metric-key{
  font-family:'DM Mono',monospace;font-size:0.56rem;letter-spacing:0.20em;text-transform:uppercase;
  color:rgba(212,176,94,0.55);margin-bottom:10px;
}
.spp-metric-val{
  font-family:'Cormorant Garamond',serif;font-size:1.65rem;font-weight:400;
  color:#F5F1E8;line-height:1;margin-bottom:6px;
}
.spp-metric-sub{font-size:0.76rem;color:rgba(245,241,232,0.38);}

/* Chart blocks */
.spp-chart-block{
  border:1px solid rgba(212,176,94,0.12);border-radius:18px;overflow:hidden;
  background:linear-gradient(145deg,rgba(8,12,20,0.92),rgba(4,6,11,0.96));
  margin-bottom:20px;
}
.spp-chart-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px 12px;
  border-bottom:1px solid rgba(212,176,94,0.08);
}
.spp-chart-lbl{
  font-family:'DM Mono',monospace;font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(212,176,94,0.55);
}
.spp-tc-row{display:flex;gap:4px;}
.spp-tc{
  padding:5px 10px;border-radius:6px;
  border:1px solid rgba(255,255,255,0.06);background:transparent;
  font-family:'DM Mono',monospace;font-size:0.58rem;letter-spacing:0.12em;
  color:rgba(245,241,232,0.38);cursor:pointer;
  transition:all .15s;
}
.spp-tc:hover{border-color:rgba(212,176,94,0.25);color:rgba(245,241,232,0.72);}
.spp-tc.is-active{border-color:rgba(212,176,94,0.40);background:rgba(212,176,94,0.08);color:rgba(212,176,94,0.90);}
.spp-chart-wrap{padding:0;}
.spp-chart-wrap canvas{width:100%;display:block;}
.spp-dd-wrap canvas{display:block;width:100%;}

/* KPIs */
.spp-perf-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
.spp-kpi{
  padding:16px;border:1px solid rgba(212,176,94,0.10);border-radius:12px;
  background:rgba(255,255,255,0.020);
}
.spp-kpi-k{font-family:'DM Mono',monospace;font-size:0.56rem;letter-spacing:0.18em;text-transform:uppercase;color:rgba(212,176,94,0.50);margin-bottom:8px;}
.spp-kpi-v{font-family:'Cormorant Garamond',serif;font-size:1.35rem;color:#F5F1E8;}

/* Disclosure */
.spp-disc{
  font-size:0.78rem;line-height:1.72;color:rgba(245,241,232,0.32);
  padding:14px;border:1px solid rgba(180,80,60,0.18);border-radius:10px;
  background:rgba(180,80,60,0.06);margin:0;
}

/* Architecture Flow */
.spp-flow{
  display:flex;align-items:center;gap:0;margin-bottom:28px;
  overflow-x:auto;padding-bottom:8px;
}
.spp-flow-node{
  flex-shrink:0;padding:10px 18px;border-radius:10px;
  border:1px solid rgba(212,176,94,0.14);
  background:rgba(255,255,255,0.025);
  font-family:'DM Mono',monospace;font-size:0.66rem;letter-spacing:0.12em;
  color:rgba(245,241,232,0.70);
  white-space:nowrap;
  transition:border-color .2s,color .2s;
  position:relative;
}
.spp-flow-node.is-self{
  border-color:rgba(212,176,94,0.42);
  background:rgba(212,176,94,0.08);
  color:rgba(212,176,94,0.95);
  font-size:0.72rem;
}
.spp-flow-node:hover:not(.is-self){border-color:rgba(212,176,94,0.25);color:rgba(245,241,232,0.90);}
.spp-flow-arrow{
  flex-shrink:0;width:32px;height:1px;
  background:linear-gradient(90deg,rgba(212,176,94,0.25),rgba(212,176,94,0.50));
  position:relative;
}
.spp-flow-arrow::after{
  content:'';position:absolute;right:-1px;top:50%;transform:translateY(-50%);
  border:4px solid transparent;border-left:6px solid rgba(212,176,94,0.50);
}

/* Architecture Grid */
.spp-arch-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
.spp-arch-card{
  padding:20px;border-radius:14px;
  border:1px solid rgba(212,176,94,0.10);
  background:rgba(255,255,255,0.022);
}
.spp-arch-card-title{
  font-family:'Cormorant Garamond',serif;font-size:1.05rem;font-weight:600;
  color:rgba(245,241,232,0.88);margin-bottom:8px;
}
.spp-arch-card-text{
  font-size:0.85rem;line-height:1.68;color:rgba(245,241,232,0.48);
}

/* Risk Grid */
.spp-risk-grid{display:flex;flex-direction:column;gap:14px;}
.spp-risk-card{
  display:flex;align-items:flex-start;gap:16px;
  padding:18px 20px;border-radius:14px;
  border:1px solid rgba(212,176,94,0.10);
  background:rgba(255,255,255,0.022);
  transition:border-color .2s;
}
.spp-risk-card:hover{border-color:rgba(212,176,94,0.22);}
.spp-risk-icon{
  width:34px;height:34px;flex-shrink:0;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(212,176,94,0.08);border:1px solid rgba(212,176,94,0.14);
  color:rgba(212,176,94,0.75);
}
.spp-risk-icon svg{width:16px;height:16px;}
.spp-risk-text{font-size:0.88rem;line-height:1.65;color:rgba(245,241,232,0.55);}

/* Pricing */
.spp-price-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.spp-price-main{
  grid-column:1/-1;
  padding:32px;border-radius:18px;
  border:1px solid rgba(212,176,94,0.24);
  background:
    radial-gradient(circle at 90% 10%,rgba(212,176,94,0.10),transparent 40%),
    linear-gradient(145deg,rgba(14,18,28,0.92),rgba(6,8,14,0.95));
  position:relative;overflow:hidden;
}
.spp-price-main::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,176,94,0.55),transparent);
}
.spp-price-amt{
  font-family:'Cormorant Garamond',serif;font-size:clamp(2.8rem,5vw,4.4rem);
  font-weight:400;color:#D4B05E;letter-spacing:-0.02em;line-height:1;
  margin-bottom:6px;
}
.spp-price-label{
  font-family:'DM Mono',monospace;font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(245,241,232,0.38);margin-bottom:24px;
}
.spp-price-checks{display:flex;flex-direction:column;gap:10px;}
.spp-price-check{
  display:flex;align-items:center;gap:10px;
  font-size:0.88rem;color:rgba(245,241,232,0.60);
}
.spp-price-check::before{
  content:'';width:16px;height:16px;flex-shrink:0;border-radius:50%;
  background:rgba(58,200,120,0.15);border:1px solid rgba(58,200,120,0.35);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8L6.5 11L12.5 5' stroke='%233ac878' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}
.spp-access-card{
  padding:22px;border-radius:14px;
  border:1px solid rgba(212,176,94,0.10);
  background:rgba(255,255,255,0.022);
}
.spp-access-key{
  font-family:'DM Mono',monospace;font-size:0.58rem;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(212,176,94,0.50);margin-bottom:8px;
}
.spp-access-val{
  font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:400;color:#F5F1E8;
}
.spp-disc-block{
  grid-column:1/-1;padding:16px;border-radius:12px;
  border:1px solid rgba(180,80,60,0.18);background:rgba(180,80,60,0.06);
  font-size:0.80rem;line-height:1.72;color:rgba(245,241,232,0.38);
}

/* ── RIGHT VISUAL FIELD ── */
.spp-visual{
  position:relative;
  background:
    radial-gradient(circle at 50% 40%,rgba(212,176,94,0.06),transparent 55%),
    linear-gradient(180deg,rgba(4,6,11,0.95),#030508);
  /* Base separator — very faint, structure only */
  border-left:1px solid rgba(212,176,94,0.06);
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;overflow:hidden;
}
/* Premium gradient separator line */
.spp-visual::before{
  content:'';
  position:absolute;
  left:-1px;top:36px;bottom:36px;
  width:1px;
  background:linear-gradient(
    180deg,
    transparent 0%,
    rgba(212,176,94,0.22) 20%,
    rgba(245,241,232,0.06) 50%,
    rgba(212,176,94,0.18) 80%,
    transparent 100%
  );
  pointer-events:none;
  z-index:2;
}
/* Left-edge content fade — blends visual into separator */
.spp-visual::after{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:72px;
  background:linear-gradient(90deg,rgba(4,6,11,0.45) 0%,transparent 100%);
  pointer-events:none;
  z-index:1;
}
.spp-orb-wrap{
  position:relative;width:280px;height:280px;
  display:flex;align-items:center;justify-content:center;
}
.spp-orb{width:100%;height:100%;display:block;}
.spp-orb-halo{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(212,176,94,0.12) 0%,transparent 68%);
  animation:haloPulse 3s ease-in-out infinite;
}
@keyframes haloPulse{0%,100%{transform:scale(1);opacity:0.8;}50%{transform:scale(1.08);opacity:1;}}
.spp-vi{
  padding:28px;width:100%;border-top:1px solid rgba(212,176,94,0.08);
  display:flex;flex-direction:column;gap:8px;
}
.spp-vi-code{
  font-family:'DM Mono',monospace;font-size:0.58rem;letter-spacing:0.26em;text-transform:uppercase;
  color:rgba(212,176,94,0.55);
}
.spp-vi-name{
  font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:400;
  color:#F5F1E8;
}
.spp-vi-score{
  font-family:'DM Mono',monospace;font-size:0.72rem;letter-spacing:0.1em;
  color:rgba(245,241,232,0.60);
}
.spp-vi-proof{font-size:0.80rem;color:rgba(245,241,232,0.32);}

/* ── ACTION BAR ── */
.spp-bar{
  flex-shrink:0;height:68px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;
  background:rgba(4,6,11,0.96);
  border-top:1px solid rgba(212,176,94,0.14);
  backdrop-filter:blur(20px);
}
.spp-bar-product{
  display:flex;align-items:center;gap:8px;
  font-family:'DM Mono',monospace;font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(245,241,232,0.50);text-decoration:none;
  border:1px solid rgba(255,255,255,0.07);border-radius:8px;
  padding:9px 16px;
  transition:color .18s,border-color .18s,background .18s;
}
.spp-bar-product:hover{color:rgba(245,241,232,0.85);border-color:rgba(212,176,94,0.30);background:rgba(212,176,94,0.04);}
.spp-bar-right{display:flex;align-items:center;gap:10px;}
.spp-bar-close{
  padding:9px 20px;border-radius:8px;
  border:1px solid rgba(255,255,255,0.08);background:transparent;
  font-family:'DM Mono',monospace;font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(245,241,232,0.45);cursor:pointer;
  transition:border-color .18s,color .18s;
}
.spp-bar-close:hover{border-color:rgba(255,255,255,0.16);color:rgba(245,241,232,0.75);}
.spp-bar-add{
  padding:9px 28px;border-radius:8px;
  border:1px solid rgba(212,176,94,0.50);
  background:linear-gradient(135deg,rgba(212,176,94,0.18),rgba(212,176,94,0.08));
  font-family:'DM Mono',monospace;font-size:0.70rem;letter-spacing:0.12em;text-transform:uppercase;
  color:#D4B05E;cursor:pointer;
  transition:border-color .2s,background .2s,transform .15s,box-shadow .2s;
  box-shadow:0 0 0 1px rgba(212,176,94,0.08) inset;
}
.spp-bar-add:hover{
  border-color:rgba(212,176,94,0.80);
  background:linear-gradient(135deg,rgba(212,176,94,0.28),rgba(212,176,94,0.14));
  transform:translateY(-1px);
  box-shadow:0 4px 20px rgba(212,176,94,0.20),0 0 0 1px rgba(212,176,94,0.20) inset;
}
.spp-bar-add.is-active{
  background:rgba(58,200,120,0.12);border-color:rgba(58,200,120,0.40);
  color:rgba(58,200,120,0.90);
}

/* ═══════════════════════════════
   RESPONSIVE
═══════════════════════════════ */
@media(max-width:1100px){
  .profiles-grid{grid-template-columns:repeat(2,1fr);}
  .cta-grid{grid-template-columns:1fr;}
}
@media(max-width:1200px){
  .spp{grid-template-columns:240px 1fr 320px;}
}
@media(max-width:1000px){
  .spp{grid-template-columns:220px 1fr;grid-template-rows:1fr;}
  .spp-visual{display:none;}
  .spp-metrics-grid{grid-template-columns:repeat(2,1fr);}
  .spp-price-layout{grid-template-columns:1fr;}
  .spp-price-main{grid-column:auto;}
}
@media(max-width:720px){
  .spp{grid-template-columns:1fr;}
  .spp-rail{display:none;}
  .spp-metrics-grid{grid-template-columns:repeat(2,1fr);}
  .spp-header{padding:20px;}
  .spp-section{padding:28px 20px 0;}
  .spp-arch-grid{grid-template-columns:1fr;}
  .spp-perf-kpis{grid-template-columns:repeat(2,1fr);}
  .spp-bar{padding:0 16px;}
  .spp-bar-product span,
  .spp-bar-product svg:first-child{display:none;}
}
@media(max-width:980px){
  .systems-hero{min-height:auto;}
  .systems-hero-content{padding:90px 0 72px;}
  .systems-hero-bg img{
    width:100%;
    opacity:0.32;
    object-position:center;
  }
  .systems-hero-overlay{
    background:
      linear-gradient(180deg,
        rgba(5,7,11,0.94) 0%,
        rgba(5,7,11,0.78) 42%,
        #05070B 100%
      );
  }
  .systems-hero-overlay::after{display:none;}
  .allocator-decision-section{padding:28px 0 34px;}
  .profiles-grid{grid-template-columns:1fr;}
  .case-grid{grid-template-columns:1fr;}
  .hiw-flow{grid-template-columns:1fr;}
  #faq.c-section{padding:32px 0 38px;}
  .cta-grid{grid-template-columns:1fr;gap:24px;}
  .c-cta{padding:34px 0 38px;}
}
@media(max-width:768px){
  .wrap{padding:0 16px;}
  .systems-hero-content{padding:72px 0 56px;}
  .systems-hero-bg img{opacity:0.22;}
  .systems-hero-copy h1{font-size:2.8rem;line-height:.94;}
  .hero-actions{flex-direction:column;gap:8px;}
  .hero-metrics{grid-template-columns:1fr 1fr;gap:12px;}
  .hiw-flow{flex-direction:column;}
  .systems-panel{width:100%;}
  .xctrl-bar{grid-template-columns:auto 1fr;}
  .xctrl-btn--basket{display:none;}
  .xgrid{grid-template-columns:1fr;padding:16px 16px 32px;gap:12px;}
}
@media(max-width:760px){
  .systems-network-section{padding:28px 0 34px;}
  .systems-network-shell{height:390px;min-height:390px;border-radius:20px;}
  .systems-network-shell::after{display:none;}
  .network-tooltip{min-width:180px;max-width:calc(100vw - 48px);}
  .node-space-layer--particles{opacity:.10;}
  .node-space-layer--orbits{opacity:.28;}
}