/* Zeus Conquer visual system */
html {
 --z-accent:#91b7ff;--z-rgb:145,183,255;--z-detail:#ffd483;--z-detail-rgb:255,212,131;
 --z-page:#080f20;--z-card:#111d34;--z-soft:#1b2b47;--z-line:#344767;
 --z-ink:#f6f8ff;--z-muted:#bdc9df;--z-button:#0c1830;
 --z-radius:24px 6px;--z-heading:'Chakra Petch','Tajawal',sans-serif;
}
html[data-theme="light"] {
 --z-accent:#244fa5;--z-rgb:36,79,165;--z-detail:#845108;--z-detail-rgb:132,81,8;
 --z-page:#eef3ff;--z-card:#fff;--z-soft:#e0e9fa;--z-line:#bccae4;
 --z-ink:#101d37;--z-muted:#475776;
}
html[data-zues-palette="ember"] {--z-accent:#ff9aab;--z-rgb:255,154,171;--z-detail:#ffc493;--z-detail-rgb:255,196,147}
html[data-theme="light"][data-zues-palette="ember"] {--z-accent:#9b2346;--z-rgb:155,35,70;--z-detail:#8b441c;--z-detail-rgb:139,68,28}
html[data-zues-palette="aurora"] {--z-accent:#c6afff;--z-rgb:198,175,255;--z-detail:#80ecce;--z-detail-rgb:128,236,206}
html[data-theme="light"][data-zues-palette="aurora"] {--z-accent:#6036a8;--z-rgb:96,54,168;--z-detail:#056c56;--z-detail-rgb:5,108,86}
html[data-zues-shape="rounded"] {--z-radius:22px}
html[data-zues-shape="square"] {--z-radius:3px}
html[data-zues-type="clean"] {--z-heading:'Inter','Tajawal',sans-serif}
html[data-zues-type="tajawal"],html[lang="ar"] {--z-heading:'Tajawal','Inter',sans-serif;--font-body:'Tajawal','Inter',sans-serif}
html[data-zues-palette] {
 --font-heading:var(--z-heading);--neon-purple:var(--z-accent);--neon-purple-rgb:var(--z-rgb);
 --neon-cyan:var(--z-detail);--neon-cyan-rgb:var(--z-detail-rgb);--neon-pink:var(--z-detail);
 --bg-dark:var(--z-page);--panel-bg:var(--z-card);--surface:var(--z-card);--surface-soft:var(--z-soft);
 --ink:var(--z-ink);--text-muted:var(--z-muted);--text-white-50:var(--z-muted);--border-color:var(--z-line);
 --p-gradient:linear-gradient(115deg,var(--z-accent),var(--z-detail));
}
html .cyber-nav {position:sticky!important;top:0}
html .cyber-panel,html[data-theme="light"] .cyber-panel,html .package-card,html .stats-card {border-radius:var(--z-radius)}
html .btn-cyber,html .btn-cyber-v2,html .btn-neon {
 background:var(--p-gradient);color:var(--z-page)!important;border-radius:var(--z-radius);
 transition:transform .24s,box-shadow .24s,filter .24s;
}
html .btn-cyber-purple {color:var(--z-ink)!important}
html .btn-cyber-danger {color:#fff!important}
.zues-mark {
 display:inline-grid;place-items:center;width:42px;height:42px;border-radius:14px 4px;
 color:var(--z-page);background:var(--p-gradient);font:bold 30px/1 system-ui;
}
.zues-eyebrow {color:var(--z-detail);font-size:.77rem;font-weight:800;letter-spacing:.16em}
html .hero-protocol {isolation:isolate;background:var(--z-page);min-height:0!important}
html .hero-protocol .min-vh-100 {min-height:clamp(540px,75vh,800px)!important}
html .hero-protocol .container-fluid {max-width:1440px}
html .hero-overlay,html[data-theme="light"] .hero-overlay {display:none}
.zues-sky {
 position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(ellipse at 76% 43%,rgba(var(--z-rgb),.26),transparent 43%),radial-gradient(ellipse at 97% 7%,rgba(var(--z-detail-rgb),.16),transparent 48%);
}
.zues-sky::after {
 content:'';position:absolute;inset:0;opacity:.45;
 background:linear-gradient(125deg,transparent 48%,rgba(var(--z-rgb),.16) 49%,transparent 61%);
 animation:zues-sweep 13s ease-in-out infinite alternate;
}
@keyframes zues-sweep {from{transform:translateX(-9%)}to{transform:translateX(9%)}}
html .hero-title-wrapper::before {content:'ZEUS CONQUER / THE STORM REALM';color:var(--z-detail)}
html .cyber-glitch-title {font-size:clamp(3rem,7.7vw,8rem)!important;line-height:.98!important;max-width:9ch}
html .arena-emblem {width:min(85%,430px)}
.zues-bolt {width:41%;fill:var(--z-detail);filter:drop-shadow(0 0 26px rgba(var(--z-detail-rgb),.45));animation:arena-float 7s ease-in-out infinite}
html .stats-card {border-top-color:var(--z-accent)!important}
@media (max-width:991px) {
 html .hero-protocol .p-5 {padding:3.5rem 1.5rem!important}
 html .cyber-glitch-title {font-size:clamp(3rem,11vw,6rem)!important}
}
html[data-zues-motion="calm"] *,html[data-zues-motion="calm"] *::before,html[data-zues-motion="calm"] *::after {animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.zues-sky::after,.zues-bolt {animation:none!important}}

/* Storm arena */
.storm-hero {position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--z-line);background:radial-gradient(ellipse at 85% 35%,rgba(var(--z-rgb),.24),transparent 55%),var(--z-page)}
.storm-halo {position:absolute;inset:-35% -20%;pointer-events:none;background:linear-gradient(118deg,transparent 50%,rgba(var(--z-rgb),.13) 50.3%,transparent 59%,rgba(var(--z-detail-rgb),.16) 59.4%,transparent 70%);animation:storm-drift 12s ease-in-out infinite alternate}
.storm-stage {position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;padding-block:clamp(38px,7vw,104px) 32px;align-items:center}
.storm-intro {animation:storm-enter .62s ease-out both}
.storm-kicker {color:var(--z-detail);font-weight:800;letter-spacing:.18em;font-size:.75rem}
.storm-intro h1 {font-size:clamp(3.5rem,9vw,8rem);line-height:.86;letter-spacing:-.065em;font-weight:800;margin:22px 0;color:var(--z-ink)}
.storm-intro strong {display:block;color:var(--z-accent)}
.storm-lead {color:var(--z-muted);font-size:1.12rem;margin:28px 0}
.storm-actions {display:flex;flex-wrap:wrap;gap:12px}
.storm-button {display:inline-flex;gap:12px;align-items:center;justify-content:center;min-height:54px;padding:12px 22px;background:var(--z-card);color:var(--z-ink);text-decoration:none;border:1px solid var(--z-line);border-radius:var(--z-radius);font-weight:750;transition:transform .18s,box-shadow .18s,filter .18s}
.storm-primary {background:var(--p-gradient);color:var(--z-page);border-color:transparent}
.storm-button:hover {color:var(--z-ink);border-color:var(--z-accent)}
.storm-primary:hover {color:var(--z-page)}
.storm-art {position:relative;display:grid;place-items:center;justify-self:center;width:min(100%,440px);aspect-ratio:1;animation:storm-enter .75s .12s both}
.storm-orbit {position:absolute;inset:4%;border:1px solid var(--z-line);border-radius:50%;border-top:3px solid var(--z-accent);border-bottom:3px solid var(--z-detail);animation:arena-orbit 25s linear infinite}
.storm-orbit::after {content:'';position:absolute;inset:8%;border:1px dashed var(--z-line);border-radius:50%}
.storm-sigil {width:62%;aspect-ratio:1;display:grid;place-items:center;background:var(--p-gradient);clip-path:polygon(50% 0,96% 27%,96% 73%,50% 100%,4% 73%,4% 27%);position:relative;animation:arena-float 6s ease-in-out infinite}
.storm-sigil::before {content:'';position:absolute;inset:3px;background:linear-gradient(160deg,var(--z-soft),var(--z-card));clip-path:inherit}
.storm-sigil svg {position:relative;width:38%;fill:var(--z-detail);filter:drop-shadow(0 0 18px rgba(var(--z-detail-rgb),.38))}
.storm-stats {grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;background:var(--z-line);border:1px solid var(--z-line);border-radius:var(--z-radius);overflow:hidden}
.storm-stats div {background:var(--z-card);padding:16px clamp(10px,3vw,36px)}
.storm-stats dt {font-size:.75rem;color:var(--z-muted);overflow-wrap:anywhere}
.storm-stats dd {font-size:clamp(1.4rem,4vw,2.6rem);color:var(--z-accent);margin:0;font-weight:800;font-variant-numeric:tabular-nums}
.storm-page .cyber-panel {transition:transform .22s,box-shadow .22s,border-color .22s}
@media(hover:hover) {
 .storm-button:hover {transform:translateY(-4px);box-shadow:0 12px 30px rgba(var(--z-rgb),.25)}
 .storm-page .cyber-panel:hover {box-shadow:0 16px 42px rgba(var(--z-rgb),.17)}
}
html .storm-button:active,html .btn-cyber:active,html .btn-neon:active,html .btn-cyber-v2:active {transform:scale(.96);filter:brightness(.91)}
html .storm-logout:hover {color:var(--z-ink)!important;box-shadow:inset 3px 0 var(--z-detail)}
.storm-auth {background:radial-gradient(ellipse at 50% 45%,rgba(var(--z-rgb),.15),transparent 68%)}
.storm-auth .cyber-panel {box-shadow:0 22px 80px rgba(var(--z-rgb),.14);animation:storm-enter .5s ease-out both}
.storm-auth .icon-box {transform:rotate(-5deg);border-radius:var(--z-radius)!important}
.storm-page .form-control:focus {border-color:var(--z-accent);box-shadow:0 0 0 3px rgba(var(--z-rgb),.20)}
@keyframes storm-enter {from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes storm-drift {from{transform:translateX(-5%)}to{transform:translateX(5%)}}
@media(max-width:767px){
 .storm-stage {grid-template-columns:1fr;gap:24px}
 .storm-art {width:min(55%,220px);grid-row:2}
 .storm-intro h1 {font-size:clamp(3.15rem,13vw,5.25rem)}
 .storm-actions .storm-button {flex:1 1 160px}
}
html[data-zues-motion="calm"] .storm-button:hover {transform:none}
@media(prefers-reduced-motion:reduce){.storm-button:hover {transform:none}}