html { scroll-behavior: smooth; }
body { background: #0a0a0b; transition: background .3s var(--ease-out); }
/* ===== THEME SYSTEM — site-scoped tokens ===== */
#zonx-site {
--zx-page: #0a0a0b;
--zx-nav: rgba(18,18,21,0.55);
--zx-menu: rgba(18,18,21,0.92);
--zx-panel: rgba(20,20,23,0.5);
--zx-panel-2: rgba(16,16,19,0.55);
--zx-panel-hi: rgba(23,23,26,0.55);
--zx-chip: rgba(20,26,43,0.3);
--zx-footer: rgba(11,11,12,0.6);
--zx-well: linear-gradient(160deg,#131315,#0a0a0b);
--zx-fill: rgba(255,255,255,0.04);
--zx-fill-soft: rgba(255,255,255,0.03);
--zx-fill-strong: rgba(255,255,255,0.05);
--zx-shadow-nav: 0 18px 50px rgba(0,0,0,0.45);
--zx-shadow-float: 0 18px 44px rgba(0,0,0,0.45);
transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
#zonx-site[data-theme="light"] {
--zx-page: #eef1f5;
--zx-nav: rgba(255,255,255,0.55);
--zx-menu: rgba(255,255,255,0.94);
--zx-panel: rgba(255,255,255,0.52);
--zx-panel-2: rgba(255,255,255,0.55);
--zx-panel-hi: rgba(255,255,255,0.62);
--zx-chip: rgba(255,255,255,0.32);
--zx-footer: rgba(255,255,255,0.55);
--zx-well: linear-gradient(160deg,#ffffff,#eef0f5);
--zx-fill: rgba(15,23,42,0.05);
--zx-fill-soft: rgba(15,23,42,0.035);
--zx-fill-strong: rgba(15,23,42,0.07);
--zx-shadow-nav: 0 14px 40px rgba(30,41,59,0.16);
--zx-shadow-float: 0 14px 34px rgba(30,41,59,0.14);
/* design-system token overrides for light */
--text-primary: #11151c;
--text-secondary: #3f4654;
--text-muted: #5f6878;
--text-faint: #98a0ae;
--text-on-glass: #1a1d24;
--glass-edge: rgba(15,23,42,0.08);
--glass-edge-strong: rgba(15,23,42,0.14);
--glass-divider: rgba(15,23,42,0.08);
--glass-inner-light: rgba(255,255,255,0.7);
--surface-hover: rgba(15,23,42,0.04);
--surface-active: rgba(15,23,42,0.07);
--surface-input: rgba(15,23,42,0.045);
--surface-input-focus: rgba(15,23,42,0.07);
--shadow-glass: 0 20px 50px rgba(30,41,59,0.14), 0 6px 16px rgba(30,41,59,0.08), inset 0 1px 0 rgba(255,255,255,0.7);
}
/* theme toggle (pinned nav only) */
.zx-theme-toggle { display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex:none; border-radius:10px; background:var(--surface-input); border:1px solid var(--glass-edge); color:var(--text-secondary); cursor:pointer; transition: border-color .18s var(--ease-out), background .18s var(--ease-out), color .18s var(--ease-out); }
.zx-theme-toggle:hover { border-color:var(--glass-edge-strong); background:var(--surface-hover); color:var(--text-primary); }
.zx-theme-toggle:active { transform: scale(0.96); }
/* wordmark + icon theme swaps */
.zx-wm { height:16px; width:auto; display:block; }
#zonx-site .zx-wm-white { display:none; }
#zonx-site .zx-wm-papaya { display:block; }
#zonx-site .zx-ic-moon { display:none; }
#zonx-site .zx-ic-sun { display:block; }
#zonx-site[data-theme="light"] .zx-ic-sun { display:none; }
#zonx-site[data-theme="light"] .zx-ic-moon { display:block; }
/* light-theme soft colored glows inside featured panels */
#zonx-site[data-theme="light"] .zx-price-panel { box-shadow: var(--shadow-glass), inset 0 0 60px rgba(255,170,113,0.26) !important; }
/* light theme: PR plaque floats above the page on a soft dark shadow */
#zonx-site[data-theme="light"] #zx-sleep-wrap { filter: drop-shadow(0 22px 40px rgba(30,41,59,0.20)); }
#zonx-site[data-theme="light"] .zx-cta-glow { background-image: radial-gradient(50% 60% at 50% 0%, rgba(255,170,113,0.30), transparent 70%), radial-gradient(46% 56% at 16% 102%, rgba(124,116,228,0.22), transparent 72%) !important; }
@keyframes zxWave { 0%,100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
@keyframes zxMarquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes zxFloatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes zxPulseGlow { 0%,100% { opacity: 0.45; } 50% { opacity: 0.9; } }
.zx-navlink { position: relative; color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; padding: 6px 2px; transition: color .18s var(--ease-out); }
.zx-navlink:hover { color: var(--text-primary); }
.zx-navlink::after { content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background: var(--brand-main); transform: scaleX(0); transform-origin:left; transition: transform .22s var(--ease-out); }
.zx-navlink:hover::after { transform: scaleX(1); }
.zx-agent-card { transition: transform .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out); will-change: transform; }
.zx-agent-card:hover { border-color: var(--agent-edge); box-shadow: var(--zx-shadow-float), inset 0 0 50px var(--brand-main-soft); }
.zx-why-card { transition: transform .3s var(--ease-out), border-color .3s var(--ease-out); }
.zx-why-card:hover { transform: translateY(-4px); border-color: var(--glass-edge-strong); }
.zx-faq-item { transition: border-color .2s var(--ease-out); }
.zx-faq-body { overflow: hidden; max-height: 0; transition: max-height .32s var(--ease-out); }
.zx-chev { transition: transform .28s var(--ease-out); }
.zx-model-chip { transition: transform .25s var(--ease-out), background .25s var(--ease-out), color .25s var(--ease-out); }
.zx-model-chip:hover { transform: translateY(-3px); background: var(--brand-main-soft); color: var(--text-primary); }
.zx-cta-btn { transition: transform .14s var(--ease-out), box-shadow .14s var(--ease-out), background .14s var(--ease-out); }
.zx-cta-btn:active { transform: translateY(0.5px) scale(0.99); }
.zx-lang-opt { cursor:pointer; padding: 4px 10px; border-radius: 6px; font-size:12px; font-weight:600; letter-spacing:0.02em; color: var(--text-muted); transition: color .18s, background .18s; }
.zx-lang-opt.is-active { color: var(--brand-main); background: var(--brand-main-soft); box-shadow: inset 0 0 0 1.4px var(--brand-main); }
.zx-slider-track { position: relative; height: 6px; border-radius: 999px; background: var(--surface-active); cursor: pointer; }
.zx-slider-fill { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background: linear-gradient(90deg, var(--brand-main-press), var(--brand-main)); }
.zx-slider-knob { position:absolute; top:50%; width:18px; height:18px; border-radius:999px; background:#fff; transform: translate(-50%,-50%); box-shadow: 0 2px 8px rgba(0,0,0,0.5); cursor:grab; }
.zx-dot { width: 7px; height: 7px; border-radius:999px; background: var(--text-faint); cursor:pointer; transition: background .2s, width .2s; }
.zx-dot.is-active { width: 22px; border-radius: 999px; background: var(--brand-main); }
.zx-skillbar-track { height: 8px; border-radius: 999px; background: var(--surface-active); position: relative; cursor: pointer; overflow: hidden; }
.zx-skillbar-fill { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background: linear-gradient(90deg, rgba(255,170,113,0.25), var(--brand-main)); transition: width .12s linear; }
.zx-plat { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px; border-radius:9px; background:var(--zx-fill); border:1px solid var(--glass-edge); color:var(--text-secondary); font-family:var(--font-ui); font-size:13px; text-decoration:none; cursor:pointer; transition: transform .18s var(--ease-out), background .18s, color .18s, border-color .18s; }
.zx-plat:hover { transform:translateY(-2px); background:var(--brand-main-soft); border-color:var(--agent-edge); color:var(--text-primary); }
.zx-plat:active { transform:translateY(0); }
.zx-dlsel { position:relative; }
.zx-dl-chev { margin-left:1px; color:var(--text-faint); transition: transform .24s var(--ease-out); flex:none; }
.zx-dlsel.is-open .zx-dl-chev { transform: rotate(180deg); color:var(--brand-main); }
.zx-dlsel.is-open > .zx-plat { background:var(--brand-main-soft); border-color:var(--agent-edge); color:var(--text-primary); }
.zx-dl-menu { position:absolute; top:calc(100% + 8px); left:0; min-width:100%; width:max-content; padding:6px; border-radius:12px; background:var(--zx-menu); -webkit-backdrop-filter:blur(28px) saturate(150%); backdrop-filter:blur(28px) saturate(150%); border:1px solid var(--glass-edge-strong); box-shadow:var(--zx-shadow-nav), inset 0 1px 0 var(--glass-inner-light); opacity:0; transform:translateY(-8px) scale(0.98); transform-origin:top left; pointer-events:none; transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); z-index:80; }
.zx-dlsel.is-open .zx-dl-menu { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.zx-dl-item { display:block; padding:9px 13px; border-radius:8px; color:var(--text-secondary); font-size:13px; text-decoration:none; cursor:pointer; white-space:nowrap; transition: background .16s var(--ease-out), color .16s var(--ease-out); }
.zx-dl-item:hover { background:var(--surface-hover); color:var(--text-primary); }
.zx-hire { display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 13px; border-radius:8px; background:var(--brand-main-soft); border:1px solid var(--agent-edge); color:var(--brand-main); font-size:12px; font-weight:600; cursor:pointer; text-decoration:none; transition: background .18s var(--ease-out), color .18s, transform .14s; white-space:nowrap; flex:none; }
.zx-hire:hover { background:var(--brand-main); color:var(--brand-on-accent); transform:translateY(-1px); }
.zx-tag { display:inline-flex; align-items:center; height:25px; padding:0 10px; border-radius:7px; background:var(--zx-fill); border:1px solid var(--glass-edge); color:var(--text-muted); font-size:11px; }
.zx-hero-chip { position:absolute; pointer-events:auto; transition: transform .35s cubic-bezier(0.22,1,0.36,1); will-change:transform; }
.zx-chip-inner { display:inline-flex; align-items:center; gap:9px; padding:10px 15px; border-radius:12px; background:var(--zx-chip); -webkit-backdrop-filter:blur(26px) saturate(150%); backdrop-filter:blur(26px) saturate(150%); border:1px solid var(--glass-edge-strong); box-shadow:var(--zx-shadow-float), inset 0 1px 0 var(--glass-inner-light); font-size:13px; font-weight:500; color:var(--text-primary); white-space:nowrap; }
#zx-floatnav { position:fixed; left:50%; top:16px; z-index:300; opacity:0; pointer-events:none; transform:translateX(-50%) translateY(-22px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
/* language picker lives only in the pinned nav — never in the floating nav */
#zx-floatnav .zx-langsel { display:none !important; }
/* decorative right-edge fade that dissolves the sphere on small screens (pinned to the right edge) */
.zx-sphere-fade { display:none; position:absolute; top:0; bottom:0; right:0; width:40%; background:linear-gradient(90deg, transparent 0%, var(--zx-page) 86%); pointer-events:none; z-index:3; }
/* language dropdown */
.zx-langsel { position:relative; flex:none; }
.zx-lang-btn { display:flex; align-items:center; gap:8px; height:36px; padding:0 11px; border-radius:10px; background:var(--surface-input); border:1px solid var(--glass-edge); color:var(--text-primary); cursor:pointer; font-family:var(--font-ui); transition: border-color .18s var(--ease-out), background .18s var(--ease-out); }
.zx-lang-btn:hover { border-color:var(--glass-edge-strong); background:var(--surface-hover); }
.zx-lang-chev { color:var(--text-muted); flex:none; transition: transform .24s var(--ease-out); }
.zx-langsel.is-open .zx-lang-chev { transform: rotate(180deg); }
.zx-lang-menu { position:absolute; top:calc(100% + 8px); right:0; min-width:210px; padding:6px; border-radius:13px; background:var(--zx-menu); -webkit-backdrop-filter:blur(28px) saturate(150%); backdrop-filter:blur(28px) saturate(150%); border:1px solid var(--glass-edge-strong); box-shadow:var(--zx-shadow-nav), inset 0 1px 0 var(--glass-inner-light); opacity:0; transform:translateY(-8px) scale(0.98); transform-origin:top right; pointer-events:none; transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); z-index:400; }
.zx-langsel.is-open .zx-lang-menu { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.zx-lang-item { display:flex; align-items:center; gap:10px; width:100%; padding:9px 11px; border:none; background:none; border-radius:9px; cursor:pointer; color:var(--text-secondary); font-family:var(--font-ui); font-size:14px; text-align:left; transition: background .16s var(--ease-out), color .16s var(--ease-out); }
.zx-lang-item:hover { background:var(--surface-hover); color:var(--text-primary); }
.zx-lang-item.is-active { color:var(--text-primary); }
.zx-lang-check { margin-left:auto; color:var(--brand-main); opacity:0; flex:none; }
.zx-lang-item.is-active .zx-lang-check { opacity:1; }
/* agent constellation */
.zx-orbit-node { position:absolute; z-index:3; display:flex; flex-direction:column; align-items:center; gap:11px; width:150px; cursor:pointer; transition: transform .3s var(--ease-out); }
.zx-orbit-node:hover { transform: translateY(-4px); }
.zx-avatar-disc { position:relative; border-radius:999px; transition: transform .3s var(--ease-out), filter .3s var(--ease-out); filter: saturate(0.85) brightness(0.86); }
.zx-orbit-node:hover .zx-avatar-disc, .zx-orbit-node.is-active .zx-avatar-disc { filter: saturate(1.08) brightness(1.04); }
.zx-orbit-node.is-active .zx-avatar-disc { transform: scale(1.07); }
.zx-avatar-ring { position:absolute; inset:-7px; border-radius:999px; border:1.5px solid transparent; transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out); pointer-events:none; }
.zx-orbit-node:hover .zx-avatar-ring, .zx-orbit-node.is-active .zx-avatar-ring { border-color: var(--node-color); box-shadow: 0 0 30px -4px var(--node-glow); }
.zx-node-name { font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--text-primary); }
.zx-node-role { font-size:12px; color:var(--text-muted); margin-top:2px; }
.zx-chat-msg { animation: zxMsgIn .4s var(--ease-out) both; }
@keyframes zxMsgIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
@keyframes zxTyping { 0%,60%,100% { transform: translateY(0); opacity:.45; } 30% { transform: translateY(-4px); opacity:1; } }
.zx-conn { animation: zxDash 1.4s linear infinite; }
@keyframes zxDash { to { stroke-dashoffset: -22; } }
/* capabilities board */
.zx-cap-panel { position:relative; border-radius:14px; background:var(--zx-panel-2); -webkit-backdrop-filter:blur(20px) saturate(135%); backdrop-filter:blur(20px) saturate(135%); border:1px solid var(--glass-edge); box-shadow:var(--shadow-glass); }
.zx-cap-label { font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; color:var(--text-muted); white-space:nowrap; }
/* agent selector rows (desktop: vertical list in a panel; ≤979 transforms into a plaque rail) */
#zx-agent-list::-webkit-scrollbar { display:none; }
.zx-agent-row { display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px; border-radius:11px; background:transparent; border:1px solid transparent; cursor:pointer; text-align:left; font-family:var(--font-ui); transition: background .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out); }
.zx-agent-row:hover { background:var(--surface-hover); }
/* mobile logomark + burger menu */
.zx-logo-mark { display:none; }
.zx-burger { display:none; align-items:center; justify-content:center; width:38px; height:38px; flex:none; border-radius:10px; background:var(--surface-input); border:1px solid var(--glass-edge); color:var(--text-primary); cursor:pointer; transition: border-color .18s var(--ease-out), background .18s var(--ease-out); }
.zx-burger:hover { border-color:var(--glass-edge-strong); background:var(--surface-hover); }
.zx-burger:active { transform:scale(0.96); }
#zx-mobile-menu { position:absolute; top:calc(100% - 4px); left:14px; right:14px; z-index:200; padding:9px; border-radius:16px; background:var(--zx-menu); -webkit-backdrop-filter:blur(28px) saturate(150%); backdrop-filter:blur(28px) saturate(150%); border:1px solid var(--glass-edge-strong); box-shadow:var(--zx-shadow-nav), inset 0 1px 0 var(--glass-inner-light); opacity:0; transform:translateY(-12px); pointer-events:none; transition:opacity .22s var(--ease-out), transform .22s var(--ease-out); }
#zx-mobile-menu.is-open { opacity:1; transform:none; pointer-events:auto; }
#zx-mobile-menu a { display:block; padding:12px 14px; border-radius:10px; color:var(--text-secondary); text-decoration:none; font-size:15px; font-weight:500; transition: background .16s var(--ease-out), color .16s var(--ease-out); }
#zx-mobile-menu a:hover { background:var(--surface-hover); color:var(--text-primary); }
#zx-mobile-menu .zx-mm-signin { margin-top:6px; background:var(--brand-main); color:var(--brand-on-accent); font-weight:600; text-align:center; }
#zx-mobile-menu .zx-mm-signin:hover { background:var(--brand-main-press); color:var(--brand-on-accent); }
/* floating-nav burger (large + mobile) */
.zx-fn-burger { display:none; align-items:center; justify-content:center; width:38px; height:38px; flex:none; border-radius:10px; background:var(--surface-input); border:1px solid var(--glass-edge); color:var(--text-primary); cursor:pointer; transition: border-color .18s var(--ease-out), background .18s var(--ease-out); }
.zx-fn-burger:hover { border-color:var(--glass-edge-strong); background:var(--surface-hover); }
.zx-fn-menu { position:absolute; top:calc(100% + 8px); right:0; min-width:200px; padding:7px; border-radius:14px; background:var(--zx-menu); -webkit-backdrop-filter:blur(28px) saturate(150%); backdrop-filter:blur(28px) saturate(150%); border:1px solid var(--glass-edge-strong); box-shadow:var(--zx-shadow-nav), inset 0 1px 0 var(--glass-inner-light); opacity:0; transform:translateY(-10px); pointer-events:none; transition:opacity .2s var(--ease-out), transform .2s var(--ease-out); z-index:320; }
.zx-fn-menu.is-open { opacity:1; transform:none; pointer-events:auto; }
.zx-fn-menu a { display:block; padding:11px 13px; border-radius:9px; color:var(--text-secondary); text-decoration:none; font-size:14px; font-weight:500; transition: background .16s var(--ease-out), color .16s var(--ease-out); }
.zx-fn-menu a:hover { background:var(--surface-hover); color:var(--text-primary); }
.zx-agent-ic { transition: transform .25s var(--ease-out), filter .25s var(--ease-out); filter:saturate(0.9) brightness(0.92); }
.zx-agent-row:hover .zx-agent-ic, .zx-agent-row.is-active .zx-agent-ic { filter:saturate(1.06) brightness(1.06); }
.zx-agent-row.is-active .zx-agent-ic { transform:scale(1.05); }
.zx-agent-arrow { margin-left:auto; flex:none; color:var(--ac); opacity:0; transform:translateX(-5px); transition:opacity .2s var(--ease-out), transform .2s var(--ease-out); }
.zx-agent-row.is-active .zx-agent-arrow { opacity:1; transform:none; }
.zx-agent-desc { display:none; font-size:12.5px; line-height:1.5; color:var(--text-secondary); }
/* ============ RESPONSIVE — 4 breakpoints (each previewed at its minimum width) ============
1) 320–479 mobile · preview 320
2) 480–759 large phone · preview 480
3) 760–979 tablet · preview 760
4) ≥980 desktop · preview 1440 (beyond that only the outer margins grow)
Each range designs its narrowest layout; only the page-edge padding widens across the range. */
/* ---- COMMON ≤979 : agent panel becomes a plaque rail on the page background ---- */
@media (max-width: 979px) {
#zx-capboard { flex-direction:column !important; align-items:stretch !important; gap:18px !important; }
.zx-cap-conn { display:none !important; }
#zx-cap-more { display:none !important; }
#zx-right-col { display:none !important; }
#zx-agents-panel { position:relative !important; width:auto !important; padding:0 !important; background:transparent !important; border:none !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
/* left-edge shadow that fades in once the agent rail is swiped — signals you can scroll back to Atlas (matches the right-edge fade) */
#zx-rail-shadow { display:block !important; position:absolute !important; left:0; top:3px; bottom:14px; width:56px; z-index:5; pointer-events:none; opacity:0; transition:opacity .25s var(--ease-out); background:linear-gradient(90deg, rgba(0,0,0,0.5), rgba(0,0,0,0)); }
#zonx-site[data-theme="light"] #zx-rail-shadow { background:linear-gradient(90deg, rgba(240,242,246,0.96), rgba(240,242,246,0)); }
#zx-agents-head { margin-bottom:13px !important; padding:0 2px !important; }
#zx-agent-list { flex-direction:row !important; gap:14px !important; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 calc(50% - 50vw) !important; padding:5px max(16px, calc(50vw - 596px)) 14px !important; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
#zx-agent-list .zx-agent-row { flex:0 0 auto !important; width:168px !important; min-height:78px !important; padding:13px 15px !important; gap:11px !important; border-radius:13px !important; background:var(--zx-fill-soft) !important; border:1px solid var(--glass-edge) !important; scroll-snap-align:start; }
#zx-agent-list .zx-agent-row:hover { transform:translateY(-2px); }
#zx-agent-list .zx-agent-ic { width:30px !important; height:30px !important; }
#zx-agent-list .zx-agent-row > span:nth-child(2) > span:first-child { font-size:14px !important; }
#zx-agent-list .zx-agent-row > span:nth-child(2) > span:last-child { font-size:11.5px !important; white-space:nowrap; }
#zx-agent-list .zx-agent-desc { display:none !important; }
#zx-agent-list .zx-agent-arrow { display:none !important; }
/* HERO ≤979 : single column — the sphere drops BELOW the text as a decorative,
non-interactive element. It is fixed by its left edge; as the viewport widens
it stays put (more of it shows) while only the fade stays pinned to the right edge. */
.zx-hero-grid { grid-template-columns:1fr !important; gap:0 !important; align-items:start !important; position:relative !important; }
.zx-hero-grid > div:first-child { position:relative !important; z-index:2 !important; }
#zx-hero-chips { display:none !important; }
#zx-backlight2 { display:none !important; }
/* sphere + side fade move BEHIND the hero text as an ambient animation: bg → sphere → fade → text */
.zx-hero-right { position:absolute !important; top:0 !important; bottom:0 !important; left:calc(50% - 50vw) !important; right:auto !important; width:100vw !important; margin:0 !important; z-index:1 !important; overflow:hidden !important; display:block !important; align-items:initial !important; justify-content:initial !important; pointer-events:none !important; }
#zx-sphere { position:absolute !important; top:50% !important; transform:translateY(-50%) !important; right:auto !important; pointer-events:none !important; }
.zx-sphere-fade { display:block !important; }
/* never sleep: hide the inner scroll, reveal only the recent (right-most) green columns */
#zx-contrib { overflow:hidden !important; display:flex !important; justify-content:flex-end !important; }
/* tighter vertical rhythm between sections */
#zonx-site section:not(#top) { padding-top:58px !important; padding-bottom:58px !important; }
}
/* ---- RANGES 1 + 2 : ≤759 — single column, burger nav, sphere bled to the lower-right ---- */
@media (max-width: 759px) {
/* nav → logomark + burger; language stays in this top (pinned) navbar */
header { padding:12px 16px !important; }
header > nav { gap:10px !important; padding:0 14px !important; height:56px !important; }
header .zx-wm { display:none !important; }
header .zx-logo-mark { display:block !important; }
header .zx-nav-center { display:none !important; }
header .zx-navlink[data-i18n="nav_signin"] { display:none !important; }
.zx-burger { display:inline-flex !important; }
/* floating nav → links collapse into a burger; no inline language/divider */
#zx-floatnav .zx-nav-center { display:none !important; }
#zx-floatnav .zx-langsel { display:none !important; }
#zx-floatnav .zx-fn-div { display:none !important; }
#zx-floatnav .zx-fn-burger { display:inline-flex !important; margin-left:auto !important; }
#zx-floatnav { left:14px !important; right:14px !important; transform:none !important; }
#zx-floatnav > div { width:100%; }
#zx-floatnav .zx-cta-btn { height:38px !important; padding:0 16px !important; font-size:13px !important; }
/* hero: text, then the decorative sphere below — fixed left, fades out at the right edge */
.zx-hero-right { min-height:290px !important; }
#zx-sphere { left:120px !important; width:340px !important; height:280px !important; top:35% !important; }
.zx-sphere-fade { width:50% !important; }
#top { padding:28px 16px 4px !important; }
#top h1 { font-size:clamp(33px,8.6vw,44px) !important; max-width:16ch !important; }
#top p { font-size:16px !important; }
#top .zx-cta-btn { height:44px !important; padding:0 20px !important; font-size:14px !important; }
/* download buttons: identical width + height */
.zx-dlgrid { grid-template-columns:1fr 1fr !important; gap:8px !important; max-width:none !important; }
.zx-dlgrid > * { width:100% !important; }
.zx-dlgrid .zx-plat { width:100% !important; height:40px !important; font-size:12px !important; justify-content:center !important; }
.zx-dl-menu { left:0 !important; right:auto !important; }
/* never sleep: PR card bleeds off the left into the dark (same as tablet) */
#zx-sleep-stats { display:none !important; }
#zx-sleep-head { justify-content:flex-end !important; }
#zx-sleep-card { margin-left:-90px !important; border-top-left-radius:0 !important; border-bottom-left-radius:0 !important; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 34%) !important; mask-image:linear-gradient(90deg, transparent 0, #000 34%) !important; }
/* why / footer / calculator single column */
.zx-why-3, .zx-why-2 { grid-template-columns:1fr !important; }
.zx-foot-grid { grid-template-columns:1fr !important; gap:30px !important; }
.zx-price-grid { grid-template-columns:1fr !important; }
/* capabilities: swap — AGENT_RUNTIME frame on top, agents rail beneath (match tablet) */
#zx-runtime-panel { order:1 !important; }
#zx-agents-panel { order:2 !important; }
#zx-agents-head { display:none !important; }
/* agents: Atlas left edge aligns with the AGENT_RUNTIME frame; plaques scroll off to the right */
#zx-agent-list { margin:0 !important; padding:6px 0 12px !important; justify-content:flex-start !important; -webkit-mask-image:linear-gradient(90deg, #000 84%, transparent 100%) !important; mask-image:linear-gradient(90deg, #000 84%, transparent 100%) !important; }
section { padding-left:16px !important; padding-right:16px !important; }
}
/* ---- RANGE 2 only : 480–759 — large phone: wider page + nav padding, 3-up downloads ---- */
@media (min-width: 480px) and (max-width: 759px) {
section { padding-left:26px !important; padding-right:26px !important; }
header { padding:14px 24px !important; }
#zx-floatnav { left:24px !important; right:24px !important; }
/* sphere positioned like tablet — only the left half shows (centre on the frame edge), soft vertical feather; more transparent so it reads as ambient */
#zx-sphere { left:300px !important; width:340px !important; height:340px !important; top:38% !important; opacity:0.6 !important; }
.zx-hero-right { min-height:380px !important; -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%) !important; mask-image:linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%) !important; }
.zx-sphere-fade { display:none !important; }
/* PR plaque floats with a soft shadow beneath it */
#zx-sleep-wrap { filter: drop-shadow(0 16px 30px rgba(0,0,0,0.45)) !important; }
#zonx-site[data-theme="light"] #zx-sleep-wrap { filter: drop-shadow(0 18px 32px rgba(30,41,59,0.22)) !important; }
#zx-sleep-card { margin-left:-130px !important; }
.zx-dlgrid { grid-template-columns:repeat(3,1fr) !important; }
#top h1 { font-size:clamp(40px,7vw,52px) !important; }
}
/* ---- RANGE 3 : 760–979 — tablet ---- */
@media (min-width: 760px) and (max-width: 979px) {
section { padding-left:30px !important; padding-right:30px !important; }
/* pinned nav: small ZONX wordmark (like desktop) + pill matches the content width */
header { padding:14px 30px !important; }
header .zx-wm { display:block !important; height:15px !important; }
header .zx-wm-white { display:none !important; }
header .zx-wm-papaya { display:block !important; }
header .zx-logo-mark { display:none !important; }
header .zx-burger { display:none !important; }
header .zx-nav-center { display:flex !important; gap:18px !important; }
header > nav { gap:14px !important; }
header > nav > div:last-child { gap:8px !important; }
/* hero: single column — sphere sits to the RIGHT of the text (shared ≤979 rules) */
/* hero: push the sphere further right so only ~half shows, cut by the frame edge — no fade, just spinning */
#zx-sphere { left:560px !important; width:420px !important; height:380px !important; }
.zx-hero-right { min-height:380px !important; -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%) !important; mask-image:linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%) !important; }
.zx-sphere-fade { display:none !important; }
#top h1 { font-size:clamp(34px,4.6vw,56px) !important; max-width:20ch !important; }
#top p { font-size:16px !important; max-width:52ch !important; }
#top .zx-cta-btn { height:46px !important; padding:0 24px !important; font-size:15px !important; }
/* download buttons: smaller */
#top .zx-plat { height:32px !important; padding:0 11px !important; font-size:12px !important; }
/* floating nav: full desktop layout (inline links, no burger) — same as desktop */
#zx-floatnav .zx-nav-center { display:flex !important; }
#zx-floatnav .zx-fn-div { display:block !important; }
#zx-floatnav .zx-fn-burger { display:none !important; }
/* capabilities: runtime frame on top, agent selector rail beneath it */
#zx-runtime-panel { order:1 !important; }
#zx-agents-panel { order:2 !important; }
/* agents: only four, so centre the rail and drop the ZONX_AGENTS header */
#zx-agents-head { display:none !important; }
#zx-agent-list { justify-content:center !important; margin:0 !important; padding:5px 2px 12px !important; -webkit-mask-image:none !important; mask-image:none !important; }
#zx-agent-list .zx-agent-row { width:160px !important; }
/* why: 2×2 grid + full-width last card */
#why { display:grid !important; grid-template-columns:1fr 1fr !important; gap:20px !important; }
#why > div:first-child { grid-column:1 / -1 !important; margin:0 auto 20px !important; }
#why > .zx-why-3, #why > .zx-why-2 { display:contents !important; }
#why > .zx-why-2 > .zx-why-card:last-child { grid-column:1 / -1 !important; }
#zx-ambient { background-image: radial-gradient(78% 64% at 98% -14%, rgba(255,170,113,0.20), rgba(255,170,113,0.06) 34%, transparent 72%) !important; }
/* never sleep: stats removed, PR text to the right, panel bleeds off the left into the dark */
#zx-sleep-stats { display:none !important; }
#zx-sleep-head { justify-content:flex-end !important; }
#zx-sleep-card { margin-left:-130px !important; border-top-left-radius:0 !important; border-bottom-left-radius:0 !important; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 30%) !important; mask-image:linear-gradient(90deg, transparent 0, #000 30%) !important; }
/* keep the most recent (May) columns fully inside the card: widen the wrap so the grid no longer overflows it, then right-align */
#zx-contrib { justify-content:flex-end !important; box-sizing:border-box !important; }
#zx-contrib > div { min-width:800px !important; }
/* calculator */
.zx-price-grid { grid-template-columns:1.5fr 1fr !important; gap:18px !important; }
/* floating nav: wider bar — keep every link (incl. “Why zonx?”) on one line */
#zx-floatnav .zx-navlink { white-space:nowrap !important; }
#zx-floatnav .zx-nav-center { flex:none !important; gap:22px !important; }
/* light theme: lift the PR card so it floats above the page (white, soft) */
#zonx-site[data-theme="light"] #zx-sleep-wrap { filter: drop-shadow(0 20px 36px rgba(30,41,59,0.22)) !important; }
}
/* ---- RANGE 1 only : ≤479 — mobile: shrink the PR card ---- */
@media (max-width: 479px) {
#zx-sleep-card { padding:18px 14px 14px !important; margin-left:-50px !important; }
#zx-sleep-card #zx-sleep-head { margin-bottom:12px !important; }
#zx-sleep-card #zx-contrib { zoom:0.84; }
/* PR line: smaller so it fits one row */
#zx-pr-line { font-size:14px !important; }
#zx-pr-num { font-size:18px !important; }
/* calls card: drop the extra action buttons so the first slide fits the frame width */
#zx-call-actions { display:none !important; }
/* hero sphere: exactly half visible (centre on the right edge), raised higher, more transparent; soft radial feather */
#zx-sphere { left:195px !important; width:230px !important; height:230px !important; top:28% !important; opacity:0.6 !important; }
.zx-hero-right { min-height:300px !important; -webkit-mask-image:radial-gradient(74% 82% at 98% 28%, #000 36%, transparent 86%) !important; mask-image:radial-gradient(74% 82% at 98% 28%, #000 36%, transparent 86%) !important; }
.zx-sphere-fade { display:none !important; }
/* PR plaque floats with a soft shadow beneath it */
#zx-sleep-wrap { filter: drop-shadow(0 14px 26px rgba(0,0,0,0.45)) !important; }
#zonx-site[data-theme="light"] #zx-sleep-wrap { filter: drop-shadow(0 16px 28px rgba(30,41,59,0.20)) !important; }
}