/*
  ZX Studios — Cinematic theme layer
  Inspired by modern immersive game UI: restrained neon, frosted surfaces,
  scanline texture, deeper hierarchy and motion-friendly interaction states.
*/

:root{
  --bg:#05070a;
  --bg-2:#080b10;
  --surface:#0b0f15;
  --surface-2:#10161e;
  --surface-3:#151d27;
  --surface-glass:rgba(11,15,21,.74);
  --line:rgba(255,255,255,.075);
  --line-strong:rgba(255,255,255,.135);
  --text:#f4f7fb;
  --muted:#8b96a8;
  --muted-2:#677285;
  --accent:#ff4f78;
  --accent-2:#ff9554;
  --accent-rgb:255,79,120;
  --accent-2-rgb:255,149,84;
  --good:#63e6a5;
  --danger:#ff6174;
  --warning:#ffc45b;
  --max:1280px;
  --radius:16px;
  --radius-lg:26px;
  --shadow:0 32px 90px rgba(0,0,0,.48);
  --shadow-soft:0 18px 54px rgba(0,0,0,.28);
  --glow:0 0 52px rgba(var(--accent-rgb),.15);
}

html[data-theme="ion"]{
  --accent:#39b9ff;
  --accent-2:#63f0c8;
  --accent-rgb:57,185,255;
  --accent-2-rgb:99,240,200;
  --good:#63f0c8;
}

html[data-theme="ultraviolet"]{
  --accent:#8f7cff;
  --accent-2:#d966ff;
  --accent-rgb:143,124,255;
  --accent-2-rgb:217,102,255;
  --good:#76e7b2;
}

*{scrollbar-color:rgba(var(--accent-rgb),.42) rgba(255,255,255,.035)}
*::selection{background:rgba(var(--accent-rgb),.30);color:#fff}
html{background:var(--bg)}
body{
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 72% -12%,rgba(var(--accent-rgb),.13),transparent 62%),
    radial-gradient(720px 420px at 10% 22%,rgba(var(--accent-2-rgb),.055),transparent 66%),
    linear-gradient(180deg,#05070a 0%,#070a0e 46%,#05070a 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:-.006em;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.24;
  background-image:
    linear-gradient(rgba(255,255,255,.021) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.12) 72%,transparent);
}

body:after{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.08;
  background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(255,255,255,.035) 3px 4px);
  mix-blend-mode:soft-light;
}

.container{width:min(calc(100% - 48px),var(--max))}

/* Navigation */
.nav-wrap{
  top:0;
  border-bottom:1px solid rgba(255,255,255,.065);
  background:linear-gradient(180deg,rgba(5,7,10,.91),rgba(5,7,10,.76));
  backdrop-filter:blur(26px) saturate(145%);
  -webkit-backdrop-filter:blur(26px) saturate(145%);
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.nav-wrap.nav-scrolled{
  background:rgba(5,7,10,.94);
  border-bottom-color:rgba(255,255,255,.09);
  box-shadow:0 14px 42px rgba(0,0,0,.28);
}
.nav{height:78px}
.brand{gap:12px;font-size:16px;font-weight:900;letter-spacing:-.035em;text-transform:uppercase}
.brand-mark{
  width:38px;height:38px;border-radius:10px;
  position:relative;overflow:hidden;
  color:#fff;
  background:
    linear-gradient(135deg,rgba(255,255,255,.18),transparent 46%),
    linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 0 0 1px rgba(255,255,255,.13) inset,0 12px 32px rgba(var(--accent-rgb),.18);
}
.brand-mark:after{content:"";position:absolute;inset:2px;border:1px solid rgba(255,255,255,.16);border-radius:8px;pointer-events:none}
.nav-links{gap:6px;color:#8e99aa;font-size:12px;font-weight:750}
.nav-links a{position:relative;padding:9px 11px;border-radius:9px;transition:color .18s ease,background .18s ease}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.035)}
.nav-links a.active{color:#fff;background:rgba(var(--accent-rgb),.08)}
.nav-links a.active:after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:1px;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 10px rgba(var(--accent-rgb),.55)}
.nav-actions{gap:8px}

.icon-btn,.btn{
  min-height:42px;
  border-radius:10px;
  border-color:rgba(255,255,255,.085);
  background:rgba(255,255,255,.035);
  color:#f3f6fb;
  box-shadow:none;
  font-size:12px;
  font-weight:800;
  letter-spacing:-.01em;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease;
}
.icon-btn:hover,.btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.062);border-color:rgba(255,255,255,.16);box-shadow:0 10px 28px rgba(0,0,0,.22)}
.btn.primary{
  border-color:rgba(var(--accent-rgb),.48);
  background:linear-gradient(120deg,rgba(var(--accent-rgb),.95),rgba(var(--accent-2-rgb),.94));
  color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
  box-shadow:0 12px 34px rgba(var(--accent-rgb),.18),inset 0 1px 0 rgba(255,255,255,.2);
}
.btn.primary:hover{border-color:rgba(255,255,255,.24);background:linear-gradient(120deg,var(--accent),var(--accent-2));box-shadow:0 18px 44px rgba(var(--accent-rgb),.25)}
.btn.ghost{background:rgba(255,255,255,.018)}
.cart-count{background:var(--accent);border-color:#07090c;box-shadow:0 0 14px rgba(var(--accent-rgb),.45)}

.theme-picker{position:relative;display:flex;align-items:center}
.theme-picker-toggle{width:42px;padding:0;color:#adb6c4}
.theme-picker-toggle svg{width:16px;height:16px}
.theme-picker-popover{
  position:absolute;right:0;top:calc(100% + 12px);width:224px;padding:10px;
  display:grid;gap:6px;
  border:1px solid rgba(255,255,255,.095);border-radius:14px;
  background:rgba(8,11,16,.96);backdrop-filter:blur(22px);
  box-shadow:0 22px 66px rgba(0,0,0,.48);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;
  transition:.18s ease;z-index:100;
}
.theme-picker.open .theme-picker-popover{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.theme-picker-title{padding:7px 9px 4px;color:#677285;font-size:9px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.theme-option{width:100%;min-height:43px;display:flex;align-items:center;gap:10px;padding:0 9px;border:1px solid transparent;border-radius:9px;background:transparent;color:#b8c0cc;text-align:left;font-size:11px;font-weight:800;cursor:pointer}
.theme-option:hover{background:rgba(255,255,255,.04);color:#fff}
.theme-option.active{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.045);color:#fff}
.theme-swatch{width:28px;height:18px;border-radius:6px;border:1px solid rgba(255,255,255,.15);box-shadow:inset 0 1px rgba(255,255,255,.15)}
.theme-swatch.afterglow{background:linear-gradient(120deg,#ff4f78,#ff9554)}
.theme-swatch.ion{background:linear-gradient(120deg,#39b9ff,#63f0c8)}
.theme-swatch.ultraviolet{background:linear-gradient(120deg,#8f7cff,#d966ff)}
.theme-option-copy{display:flex;flex-direction:column;gap:1px}
.theme-option-copy small{font-size:8px;color:#697487;font-weight:700}

/* Promo rail */
.discount-promo-bar,.discount-topbar{background:linear-gradient(90deg,rgba(var(--accent-rgb),.12),rgba(7,10,14,.97) 26%,rgba(7,10,14,.97) 74%,rgba(var(--accent-2-rgb),.10));border-bottom:1px solid rgba(255,255,255,.06)}
.discount-ticker-dot,.discount-promo-bar .discount-ticker-dot{background:var(--accent);box-shadow:0 0 14px rgba(var(--accent-rgb),.7)}

/* Home hero */
.hero.hero-premium{
  min-height:calc(100vh - 78px);
  display:flex;
  align-items:center;
  padding:84px 0 88px;
  text-align:left;
  isolation:isolate;
}
.hero.hero-premium:before{
  width:760px;height:760px;left:auto;right:-260px;top:-220px;transform:none;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.15),rgba(var(--accent-rgb),.035) 42%,transparent 70%);
  filter:blur(8px);opacity:1;
}
.hero.hero-premium:after{
  content:"ZX";
  position:absolute;
  right:-1vw;bottom:-11vw;z-index:-1;
  font-size:min(34vw,520px);line-height:.8;font-weight:1000;letter-spacing:-.10em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.025);
  transform:rotate(-4deg);pointer-events:none;
}
.hero-ambient{filter:blur(100px)!important;opacity:.78!important}
.hero-ambient-one{background:rgba(var(--accent-rgb),.20)!important}
.hero-ambient-two{background:rgba(var(--accent-2-rgb),.12)!important}
.hero-grid{display:grid!important;grid-template-columns:minmax(0,1.02fr) minmax(480px,.98fr)!important;gap:76px!important;align-items:center!important}
.hero-copy{max-width:720px}
.eyebrow,.section-kicker,.account-kicker{
  border:0;background:transparent;padding:0;border-radius:0;
  color:rgba(var(--accent-rgb),.96);font-size:10px;font-weight:950;letter-spacing:.16em;text-transform:uppercase;
}
.eyebrow{margin-bottom:25px}
.eyebrow:before{content:"";width:28px;height:1px;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 10px rgba(var(--accent-rgb),.6)}
.eyebrow .dot{display:none}
.hero h1{
  max-width:760px;margin:0 0 26px;text-align:left;
  font-size:clamp(54px,6.3vw,92px);line-height:.92;letter-spacing:-.065em;font-weight:900;
}
.hero h1 span{background:linear-gradient(100deg,#fff 0%,#fff 18%,var(--accent) 58%,var(--accent-2) 94%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:610px;margin:0;color:#919cad;font-size:16px;line-height:1.75}
.hero-actions{justify-content:flex-start;margin-top:34px;gap:10px}
.btn-lg{min-height:50px;padding:0 19px;border-radius:11px}
.btn-arrow{transition:transform .18s ease}.btn:hover .btn-arrow{transform:translateX(3px)}
.hero-proof{justify-content:flex-start;margin-top:34px;gap:20px;color:#687386;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.proof-icon{width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background:rgba(var(--accent-rgb),.09);border:1px solid rgba(var(--accent-rgb),.22);color:var(--accent);font-style:normal;font-size:9px}

.hero-visual{perspective:1200px}
.visual-glow{background:radial-gradient(circle,rgba(var(--accent-rgb),.20),transparent 62%)!important;filter:blur(30px)!important}
.showcase-window{
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.11)!important;border-radius:22px!important;
  background:linear-gradient(150deg,rgba(18,24,32,.88),rgba(7,10,14,.94))!important;
  box-shadow:0 40px 110px rgba(0,0,0,.5),0 0 0 1px rgba(var(--accent-rgb),.035) inset,var(--glow)!important;
}
.showcase-window:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.055),transparent 18%,transparent 78%,rgba(var(--accent-rgb),.045));mix-blend-mode:screen}
.showcase-top{border-bottom:1px solid rgba(255,255,255,.065)!important;background:rgba(255,255,255,.018)!important}
.window-dots span{background:#3a434e!important}.window-dots span:first-child{background:var(--accent)!important;box-shadow:0 0 10px rgba(var(--accent-rgb),.5)}
.showcase-status{color:#727e90!important}.showcase-status span{background:var(--good)!important;box-shadow:0 0 10px rgba(99,230,165,.5)!important}
.showcase-kicker{color:var(--accent)!important}
.showcase-heading strong{font-size:27px!important;letter-spacing:-.04em!important}
.showcase-heading p{color:#7f8a9c!important}
.showcase-row{border-color:rgba(255,255,255,.06)!important;background:rgba(255,255,255,.018)!important}
.showcase-row:hover{border-color:rgba(var(--accent-rgb),.18)!important;background:rgba(var(--accent-rgb),.025)!important}
.showcase-icon{border-color:rgba(var(--accent-rgb),.20)!important;background:rgba(var(--accent-rgb),.06)!important;color:var(--accent)!important}
.showcase-check{color:var(--good)!important}
.floating-chip{border-color:rgba(255,255,255,.09)!important;background:rgba(8,11,15,.84)!important;color:#9ca7b7!important;backdrop-filter:blur(15px)!important;box-shadow:0 14px 40px rgba(0,0,0,.28)!important}
.floating-chip span{background:var(--good)!important;box-shadow:0 0 10px rgba(99,230,165,.55)!important}

.trust-rail{border-color:rgba(255,255,255,.06)!important;background:rgba(255,255,255,.012)!important}
.trust-label{color:#5f6a7a!important;text-transform:uppercase;letter-spacing:.12em;font-size:9px!important;font-weight:900!important}
.trust-pills span{border-color:rgba(255,255,255,.06)!important;background:rgba(255,255,255,.018)!important;color:#778295!important}

/* Shared sections */
.section{padding:96px 0}
.section-head h2,.zx-faq-intro h2{letter-spacing:-.055em;font-weight:900;color:#f6f8fb}
.section-head p,.zx-faq-intro p{color:#818c9d}
.section-kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:10px}
.section-kicker:before{content:"";width:18px;height:1px;background:var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),.6)}

.zx-featured-section{
  padding:112px 0 120px!important;
  border-color:rgba(255,255,255,.05)!important;
  background:
    radial-gradient(800px 420px at 50% 0,rgba(var(--accent-rgb),.075),transparent 72%),
    linear-gradient(180deg,rgba(255,255,255,.01),transparent 22%,transparent 80%,rgba(255,255,255,.01))!important;
}
.zx-featured-section:before{opacity:.16!important;background-size:88px 88px!important}
.zx-marquee-edge-left{background:linear-gradient(90deg,var(--bg),rgba(5,7,10,.86) 34%,transparent)!important}
.zx-marquee-edge-right{background:linear-gradient(270deg,var(--bg),rgba(5,7,10,.86) 34%,transparent)!important}
.zx-featured-card,.product-card{
  border-color:rgba(255,255,255,.07)!important;
  background:linear-gradient(155deg,rgba(16,21,29,.9),rgba(8,11,16,.95))!important;
  box-shadow:0 16px 52px rgba(0,0,0,.22)!important;
}
.zx-featured-card:hover,.product-card:hover{
  transform:translateY(-7px)!important;
  border-color:rgba(var(--accent-rgb),.24)!important;
  box-shadow:0 30px 78px rgba(0,0,0,.42),0 0 0 1px rgba(var(--accent-rgb),.045) inset!important;
}
.zx-featured-image,.product-image{background:radial-gradient(circle at 22% 24%,rgba(var(--accent-rgb),.22),transparent 38%),linear-gradient(145deg,#121821,#06080c)!important}
.zx-featured-image:after,.product-image:after{background:linear-gradient(transparent,rgba(5,7,10,.82))!important}
.zx-featured-badge,.badge{border-color:rgba(255,255,255,.1)!important;background:rgba(5,7,10,.72)!important;color:#e9edf4!important}
.zx-featured-category,.product-category{color:var(--accent)!important}
.zx-featured-version{color:#626e80!important}
.zx-featured-card h3 a:hover{color:#fff!important}
.zx-featured-copy,.product-card p{color:#818c9d!important}
.zx-featured-chips span{border-color:rgba(255,255,255,.06)!important;background:rgba(255,255,255,.018)!important;color:#748093!important}
.zx-featured-bottom{border-color:rgba(255,255,255,.055)!important}
.zx-featured-price small{color:var(--accent)!important}
.zx-featured-foot{color:#5f6b7d!important}.zx-featured-foot i{background:var(--accent)!important;box-shadow:0 0 12px rgba(var(--accent-rgb),.55)!important}

.zx-home-faq{padding:116px 0 126px!important;border-color:rgba(255,255,255,.05)!important;background:radial-gradient(720px 420px at 15% 28%,rgba(var(--accent-rgb),.055),transparent 70%),#05070a!important}
.zx-faq-list details{border-color:rgba(255,255,255,.065)!important;background:linear-gradient(145deg,rgba(14,19,26,.85),rgba(7,10,14,.92))!important}
.zx-faq-list details:hover,.zx-faq-list details[open]{border-color:rgba(var(--accent-rgb),.22)!important}
.zx-faq-list details[open]{background:linear-gradient(145deg,rgba(17,23,31,.94),rgba(8,11,16,.97))!important}
.zx-faq-list summary{color:#edf1f6!important}
.zx-faq-list summary i{background:rgba(255,255,255,.022)!important;color:var(--accent)!important;border-color:rgba(255,255,255,.07)!important}
.zx-faq-list details[open] summary i{background:rgba(var(--accent-rgb),.08)!important}
.zx-faq-answer p{color:#818c9d!important}.zx-faq-answer a{color:var(--accent)!important}

/* Inner-page hero */
.page-hero.premium-page-hero{
  position:relative;overflow:hidden;
  padding:92px 0 54px;
  border-bottom:1px solid rgba(255,255,255,.055);
  background:
    radial-gradient(660px 300px at 18% 0,rgba(var(--accent-rgb),.105),transparent 72%),
    linear-gradient(180deg,rgba(255,255,255,.012),transparent);
}
.page-hero.premium-page-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:88px 100%;opacity:.18;mask-image:linear-gradient(90deg,#000,transparent 74%)}
.page-hero h1{font-size:clamp(42px,5vw,66px);letter-spacing:-.06em;font-weight:900}
.page-hero p{color:#8590a2;line-height:1.75}
.page-hero-meta{color:#687486!important}.page-hero-meta i{background:var(--accent)!important;box-shadow:0 0 12px rgba(var(--accent-rgb),.55)!important}

/* Store */
.store-section{padding-top:42px!important}
.store-control-panel{
  padding:14px!important;margin-bottom:26px!important;
  border:1px solid rgba(255,255,255,.065)!important;border-radius:15px!important;
  background:rgba(10,14,19,.62)!important;backdrop-filter:blur(14px);
  box-shadow:0 18px 50px rgba(0,0,0,.16)!important;
}
.category-row{margin:0!important}
.chip{background:transparent!important;border-color:transparent!important;color:#768295!important;border-radius:8px!important}
.chip:hover{background:rgba(255,255,255,.035)!important;border-color:rgba(255,255,255,.06)!important;color:#fff!important}
.chip.active{background:rgba(var(--accent-rgb),.09)!important;border-color:rgba(var(--accent-rgb),.18)!important;color:#fff!important}
.search input,.select{height:44px!important;border-color:rgba(255,255,255,.07)!important;background:rgba(255,255,255,.025)!important;color:#eef2f7!important;border-radius:9px!important}
.search input:focus,.select:focus{border-color:rgba(var(--accent-rgb),.45)!important;box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08)!important}
.premium-product-grid{gap:16px!important}
.product-card{border-radius:15px!important;overflow:hidden}
.product-body{padding:18px!important}.product-card h3{font-size:18px!important}.price{font-size:15px!important}

/* Product detail / cart / account shared cards */
.product-gallery,.detail-card,.summary,.cart-item,.customer-auth-card,.customer-order-card,.order-card,.lookup-card{
  border-color:rgba(255,255,255,.07)!important;
  background:linear-gradient(150deg,rgba(15,20,28,.88),rgba(7,10,14,.94))!important;
  box-shadow:0 18px 56px rgba(0,0,0,.20)!important;
}
.product-gallery,.detail-card{border-radius:18px!important}
.detail-card{backdrop-filter:blur(14px)}
.detail-card .price-big{color:#fff}
.list-block{border-color:rgba(255,255,255,.06)!important}.check-list li:before{color:var(--accent)!important}
.cart-item{border-radius:14px!important}.cart-thumb{background:radial-gradient(circle at 20% 20%,rgba(var(--accent-rgb),.18),transparent 36%),linear-gradient(145deg,#111720,#07090d)!important}
.qty button{background:rgba(255,255,255,.03)!important;border-color:rgba(255,255,255,.07)!important}.qty button:hover{border-color:rgba(var(--accent-rgb),.3)!important}
.customer-form input,.lookup-form input,.checkout-form input,.checkout-form select{
  border-color:rgba(255,255,255,.075)!important;background:rgba(255,255,255,.025)!important;color:#f0f3f7!important;
}
.customer-form input:focus,.lookup-form input:focus,.checkout-form input:focus,.checkout-form select:focus{border-color:rgba(var(--accent-rgb),.46)!important;box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08)!important}

/* Documentation and legal pages inherit the same surface language */
.docs-shell,.docs-layout,.legal-card{--docs-accent:var(--accent)}
.docs-sidebar,.docs-content,.docs-card,.docs-product-card,.code-block,.docs-api-row,.docs-config-row,.docs-event-group{
  border-color:rgba(255,255,255,.065)!important;
}
.docs-product-card,.docs-card,.docs-sidebar{background:linear-gradient(150deg,rgba(14,19,26,.82),rgba(7,10,14,.9))!important}
.docs-product-card:hover{border-color:rgba(var(--accent-rgb),.20)!important}
.docs-product-icon{border-color:rgba(var(--accent-rgb),.2)!important;background:rgba(var(--accent-rgb),.07)!important;color:var(--accent)!important}
.docs-product-open,.docs-back-link{color:var(--accent)!important}
.docs-nav a.active,.docs-nav a:hover{color:#fff!important;background:rgba(var(--accent-rgb),.07)!important;border-color:rgba(var(--accent-rgb),.14)!important}

/* Footer */
.footer{
  border-top:1px solid rgba(255,255,255,.06)!important;
  background:
    radial-gradient(680px 300px at 12% 0,rgba(var(--accent-rgb),.055),transparent 75%),
    #05070a!important;
}
.footer h4{color:#dce1e8!important;font-size:10px!important;letter-spacing:.12em!important;text-transform:uppercase}
.footer a,.footer p,.footer-bottom{color:#667285!important}.footer a:hover{color:#fff!important}
.footer-bottom{border-color:rgba(255,255,255,.05)!important}

/* Toast / misc */
.toast{background:rgba(9,12,17,.94)!important;border-color:rgba(255,255,255,.10)!important;backdrop-filter:blur(18px)!important;box-shadow:0 18px 50px rgba(0,0,0,.40)!important}
.loader{border-color:rgba(255,255,255,.08)!important;border-top-color:var(--accent)!important}

@media(max-width:1080px){
  .hero-grid{grid-template-columns:1fr 430px!important;gap:44px!important}
  .hero h1{font-size:clamp(50px,7vw,76px)}
  .theme-picker{display:none}
}

@media(max-width:860px){
  .container{width:min(calc(100% - 32px),var(--max))}
  .nav{height:70px}
  .hero.hero-premium{min-height:auto;padding:76px 0 72px}
  .hero-grid{grid-template-columns:1fr!important;gap:56px!important}
  .hero-copy{max-width:760px}
  .hero h1{max-width:680px}
  .hero-visual{max-width:620px;width:100%}
  .nav-links{background:rgba(7,10,14,.98)!important;border-color:rgba(255,255,255,.08)!important;backdrop-filter:blur(22px)}
  .nav-links a{padding:12px 14px}
}

@media(max-width:620px){
  body:after{opacity:.045}
  .container{width:min(calc(100% - 24px),var(--max))}
  .hero.hero-premium{padding:58px 0 58px}
  .hero h1{font-size:clamp(44px,14vw,64px);line-height:.94}
  .hero p{font-size:14px}
  .hero-proof{gap:12px 16px;margin-top:28px}
  .hero-proof span{font-size:9px}
  .floating-chip{display:none!important}
  .showcase-heading strong{font-size:23px!important}
  .section{padding:72px 0}
  .zx-featured-section{padding:78px 0 86px!important}
  .zx-home-faq{padding:82px 0 88px!important}
  .page-hero.premium-page-hero{padding:70px 0 42px}
  .page-hero h1{font-size:44px}
  .store-control-panel{padding:10px!important}
  .store-tools{flex-direction:column}.select{width:100%!important}
}

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

/* =========================================================
   ZX BLACK / WHITE / CYAN — fixed brand palette
   Cyan sampled from the supplied reference: #01B1C8
   ========================================================= */
:root,
html[data-theme="afterglow"],
html[data-theme="ion"],
html[data-theme="ultraviolet"],
html[data-theme="cyan"]{
  --bg:#020304;
  --bg-2:#050708;
  --surface:#080b0d;
  --surface-2:#0b1012;
  --surface-3:#101719;
  --surface-glass:rgba(5,8,10,.82);
  --line:rgba(255,255,255,.075);
  --line-strong:rgba(255,255,255,.14);
  --text:#ffffff;
  --muted:#9aa6aa;
  --muted-2:#657277;
  --accent:#01b1c8;
  --accent-2:#01b1c8;
  --accent-rgb:1,177,200;
  --accent-2-rgb:1,177,200;
  --good:#01b1c8;
  --warning:#ffffff;
  --glow:0 0 58px rgba(1,177,200,.14);
}

body{
  color:#fff;
  background:
    radial-gradient(900px 540px at 78% -10%,rgba(1,177,200,.105),transparent 64%),
    radial-gradient(700px 450px at -8% 42%,rgba(1,177,200,.04),transparent 68%),
    #020304;
}
body:before{opacity:.17;background-size:96px 96px}
body:after{opacity:.045}

.nav-wrap,
.nav-wrap.nav-scrolled{
  background:rgba(2,3,4,.88);
  border-bottom-color:rgba(255,255,255,.07);
}
.nav-wrap.nav-scrolled{box-shadow:0 18px 54px rgba(0,0,0,.42)}
.brand-mark{
  color:#001014;
  background:#01b1c8;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 0 30px rgba(1,177,200,.18);
}
.brand-mark:after{border-color:rgba(0,0,0,.18)}
.nav-links{color:#8b969a}
.nav-links a:hover{background:rgba(255,255,255,.04)}
.nav-links a.active{background:rgba(1,177,200,.09);color:#fff}
.nav-links a.active:after{background:#01b1c8;box-shadow:0 0 12px rgba(1,177,200,.7)}

.btn.primary{
  color:#001014;
  border-color:#01b1c8;
  background:#01b1c8;
  text-shadow:none;
  box-shadow:0 12px 34px rgba(1,177,200,.16),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn.primary:hover{
  color:#001014;
  border-color:#30d2e5;
  background:#30d2e5;
  box-shadow:0 18px 48px rgba(1,177,200,.24);
}
.btn.ghost,.icon-btn{background:rgba(255,255,255,.025)}
.btn.ghost:hover,.icon-btn:hover{border-color:rgba(1,177,200,.28);background:rgba(1,177,200,.06)}
.cart-count{color:#001014;background:#01b1c8;border-color:#020304}
.theme-picker{display:none!important}

.discount-promo-bar,.discount-topbar{
  background:linear-gradient(90deg,rgba(1,177,200,.09),rgba(2,3,4,.98) 32%,rgba(2,3,4,.98) 68%,rgba(1,177,200,.09));
}

.hero.hero-premium:before{
  background:radial-gradient(circle,rgba(1,177,200,.13),rgba(1,177,200,.025) 45%,transparent 72%);
}
.hero.hero-premium:after{-webkit-text-stroke-color:rgba(255,255,255,.022)}
.hero-ambient-one{background:rgba(1,177,200,.14)!important}
.hero-ambient-two{background:rgba(1,177,200,.055)!important}
.eyebrow,.section-kicker,.account-kicker{color:#01b1c8}
.eyebrow:before{background:#01b1c8;box-shadow:0 0 12px rgba(1,177,200,.65)}
.hero h1 span{
  background:linear-gradient(100deg,#fff 0%,#fff 36%,#01b1c8 78%,#01b1c8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{color:#9aa5aa}
.hero-proof{color:#728085}
.proof-icon{background:rgba(1,177,200,.08);border-color:rgba(1,177,200,.22);color:#01b1c8}

.showcase-window{
  border-color:rgba(255,255,255,.09)!important;
  background:linear-gradient(150deg,rgba(10,14,16,.96),rgba(2,4,5,.985))!important;
  box-shadow:0 44px 120px rgba(0,0,0,.62),0 0 0 1px rgba(1,177,200,.025) inset,0 0 60px rgba(1,177,200,.075)!important;
}
.showcase-window:after{background:linear-gradient(120deg,rgba(255,255,255,.045),transparent 20%,transparent 78%,rgba(1,177,200,.035))}
.showcase-status span,.showcase-check,.floating-chip span{background:#01b1c8!important;color:#01b1c8!important;box-shadow:0 0 12px rgba(1,177,200,.55)!important}
.showcase-kicker,.showcase-icon{color:#01b1c8!important}
.showcase-icon{border-color:rgba(1,177,200,.18)!important;background:rgba(1,177,200,.055)!important}

.zx-featured-section{
  background:radial-gradient(850px 450px at 50% 0,rgba(1,177,200,.055),transparent 72%),#020304!important;
}
.zx-featured-card,.product-card,
.product-gallery,.detail-card,.summary,.cart-item,.customer-auth-card,.customer-order-card,.order-card,.lookup-card,
.docs-product-card,.docs-card,.docs-sidebar,.zx-faq-list details{
  background:linear-gradient(155deg,rgba(11,16,18,.95),rgba(3,5,6,.98))!important;
  border-color:rgba(255,255,255,.07)!important;
}
.zx-featured-card:hover,.product-card:hover,
.zx-faq-list details:hover,.zx-faq-list details[open],.docs-product-card:hover{
  border-color:rgba(1,177,200,.25)!important;
}
.zx-featured-image,.product-image,.cart-thumb{
  background:radial-gradient(circle at 22% 22%,rgba(1,177,200,.16),transparent 36%),linear-gradient(145deg,#0d1315,#020304)!important;
}
.zx-featured-category,.product-category,.zx-featured-price small,.docs-product-open,.docs-back-link,.check-list li:before{color:#01b1c8!important}
.zx-featured-foot i,.page-hero-meta i{background:#01b1c8!important;box-shadow:0 0 12px rgba(1,177,200,.55)!important}

.zx-home-faq,.footer{
  background:radial-gradient(760px 400px at 14% 16%,rgba(1,177,200,.04),transparent 72%),#020304!important;
}
.page-hero.premium-page-hero{
  background:radial-gradient(700px 320px at 18% 0,rgba(1,177,200,.085),transparent 72%),#020304;
}
.store-control-panel{background:rgba(5,8,9,.78)!important}
.chip.active{background:rgba(1,177,200,.09)!important;border-color:rgba(1,177,200,.22)!important;color:#fff!important}
.search input:focus,.select:focus,.customer-form input:focus,.lookup-form input:focus,.checkout-form input:focus,.checkout-form select:focus{
  border-color:rgba(1,177,200,.50)!important;box-shadow:0 0 0 3px rgba(1,177,200,.09)!important;
}
.docs-product-icon{border-color:rgba(1,177,200,.22)!important;background:rgba(1,177,200,.065)!important;color:#01b1c8!important}
.docs-nav a.active,.docs-nav a:hover{background:rgba(1,177,200,.07)!important;border-color:rgba(1,177,200,.16)!important}
.loader{border-top-color:#01b1c8!important}
a{accent-color:#01b1c8}

@media(max-width:860px){
  .nav-links{background:rgba(2,3,4,.985)!important}
}