.val-music-bot{position:relative}
.val-music-bot::after,.val-music-bot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:plus-lighter}
.val-music-bot::after{background:repeating-linear-gradient(0deg,rgba(255,45,94,.18) 0 2px,transparent 2px 4px);filter:blur(2px)}
.val-music-bot::before{background:linear-gradient(125deg,rgba(255,45,94,.25),rgba(41,182,255,.15));mix-blend-mode:screen;transform:translate(0,0)}
.val-music-bot:hover::after{animation:mbScan 1.2s steps(2,end) infinite;opacity:.6}
.val-music-bot:hover::before{animation:mbShift 3.2s cubic-bezier(.22,.8,.3,1) infinite alternate;opacity:.35}
@keyframes mbScan{0%{transform:translateY(-2px)}50%{transform:translateY(2px)}100%{transform:translateY(-2px)}}
@keyframes mbShift{0%{transform:translate(0,0) skewX(0deg)}100%{transform:translate(-6px,4px) skewX(2.5deg)}}
@media (prefers-reduced-motion: reduce){
	.val-music-bot:hover::after,.val-music-bot:hover::before,.val-music-bot .val-title::after{animation:none !important}
}
body.home-exp-active::before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 50% 30%,rgba(0,0,0,.0) 0%,rgba(0,0,0,.35) 70%,rgba(0,0,0,.55) 100%);pointer-events:none;z-index:1}
/* Global smoke background */
.hx-global-smoke{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hx-global-smoke .hx-smoke-canvas,.hx-global-smoke .hx-smoke-fg{position:absolute;inset:0}
body.home-exp-active main{position:relative;z-index:2}
/* Home Experimental Page Styles (restored) */
:root{--hx-bg:#050507;--hx-fg:#f1f5f9;--hx-muted:#94a3b8;--hx-accent:#ef4444;--hx-radius:22px;--hx-grid-max:1220px}
body.home-exp-active{background:var(--hx-bg);color:var(--hx-fg)}
.home-exp-shell{display:block}
.hxp-debug{position:fixed;bottom:8px;right:8px;font:12px/1.3 system-ui;background:#111;padding:6px 10px;border-radius:8px;color:#ccc;z-index:4000}

/* Global TV filter overlay */
/* Intensified TV effect */
.hx-tv-filter{position:fixed;inset:0;pointer-events:none;z-index:1;mix-blend-mode:overlay;background:
	linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.18)),
	repeating-linear-gradient(0deg,rgba(255,255,255,.11) 0 1px,rgba(0,0,0,0) 1px 3px),
	repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0 2px,rgba(0,0,0,0) 2px 4px);
opacity:.72;animation:hxScan 4.2s linear infinite}
.hx-tv-filter::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.0) 0%,rgba(255,255,255,.22) 48%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.22) 52%,rgba(255,255,255,.0) 100%);height:80px;width:100%;animation:hxScanline 4s linear infinite;pointer-events:none;mix-blend-mode:plus-lighter;opacity:.65}
.hx-tv-filter::after{content:"";position:absolute;inset:0;pointer-events:none;background:
	linear-gradient(180deg,rgba(0,0,0,.0) 0%,rgba(0,0,0,.7) 100%),
	repeating-linear-gradient(0deg,rgba(255,45,94,.065) 0 2px,rgba(41,182,255,.055) 2px 4px,rgba(0,0,0,0) 4px 6px),
	radial-gradient(circle at 15% 25%,rgba(255,45,94,.08),transparent 60%),
	radial-gradient(circle at 85% 75%,rgba(41,182,255,.07),transparent 65%);
mix-blend-mode:plus-lighter;opacity:.42;animation:hxTvFlicker 3.8s steps(2,end) infinite, hxChromaShift 6.5s ease-in-out infinite}
@keyframes hxChromaShift{0%,100%{filter:none}50%{filter:contrast(1.05) saturate(1.1) hue-rotate(4deg)}}
@keyframes hxTvFlicker{0%,96%,100%{opacity:.35;filter:brightness(1) contrast(1)}50%{opacity:.45;filter:brightness(1.08) contrast(1.05)}}
@keyframes hxScan{0%{background-position:0 0,0 0}100%{background-position:0 0,0 400px}}
@keyframes hxScanline{0%{transform:translateY(-100%)}100%{transform:translateY(calc(100vh + 80px))}}

/* HERO */
/* Use JS-updated --vh to avoid iOS toolbar 100vh jump */
.hexp-hero{position:relative;height:calc(var(--vh, 1vh) * 100);min-height:calc(var(--vh, 1vh) * 100);display:flex;align-items:center;padding:80px 0 120px;overflow:hidden;background:transparent;will-change:opacity;z-index:2;opacity:var(--hero-opacity,1);--hero-collapse:0px;margin-bottom:calc(var(--hero-collapse) * -1)}
/* Prefer stable small/large viewport units when supported */
@supports (height: 100svh){
	.hexp-hero{height:100svh;min-height:100svh}
}
@supports (height: 100dvh){
	.hexp-hero{height:100dvh;min-height:100dvh}
}
/* Disable smooth scroll on this page to prevent auto-glide jumps */
html{scroll-behavior:auto}
body.admin-bar .hexp-hero{height:calc((var(--vh, 1vh) * 100) - 32px);min-height:calc((var(--vh, 1vh) * 100) - 32px)}
.home-exp-active body{overscroll-behavior-y:contain}
.hexp-hero .inner{width:100%;max-width:var(--hx-grid-max);margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:60px;padding:0 32px;position:relative;z-index:2}
@media (max-width:980px){.hexp-hero .inner{grid-template-columns:1fr;gap:42px;padding:0 24px}}
@media (max-width:600px){.hexp-hero .inner{gap:36px;padding:0 20px}}
.hero-copy{display:flex;flex-direction:column;gap:24px}
@media (max-width:600px){.hero-copy{gap:18px}}
.hero-title{font-size:clamp(38px,6vw,66px);line-height:1.02;font-weight:800;letter-spacing:-.03em;margin:0;color:#fff;position:relative}
@media (max-width:600px){.hero-title{font-size:clamp(32px,9vw,48px);line-height:1.05}}
/* When split into chars, re-apply gradient at span level so text remains visible */
.hero-title.split-active .char{background:linear-gradient(180deg,#fff,#d7d7d7);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero-tag{font-size:clamp(16px,1.4vw,22px);max-width:600px;margin:0;color:var(--hx-muted)}
@media (max-width:600px){.hero-tag{font-size:clamp(14px,3.8vw,18px);line-height:1.5}}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px}
@media (max-width:600px){.hero-ctas{gap:10px;width:100%}.hero-ctas .btn{flex:1 1 auto;justify-content:center;min-width:140px}}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;padding:14px 22px;border-radius:14px;border:1px solid #222;background:#111;color:#e2e8f0;transition:background .3s ease,transform .3s ease}
@media (max-width:600px){.btn{padding:12px 18px;font-size:14px}}
.btn.primary{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}
.btn.ghost{background:#101010}
.btn.admin-tools{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border-color:#6d28d9;position:relative}
.btn.admin-tools:hover{background:linear-gradient(135deg,#7c3aed,#6d28d9)}
.btn.admin-tools .admin-badge{display:inline-flex;align-items:center;justify-content:center;background:#ef4444;color:#fff;font-size:11px;font-weight:800;padding:2px 7px;border-radius:10px;margin-left:6px;line-height:1;min-width:20px}
.btn:hover{transform:translateY(-3px)}
.hero-subnote{font-size:14px;color:#64748b}
/* Reveal animation base */
.reveal{opacity:0;transform:translateY(34px) scale(.98);will-change:opacity,transform;transition:opacity .9s cubic-bezier(.22,.8,.3,1),transform .9s cubic-bezier(.22,.8,.3,1)}
.reveal.reveal-in{opacity:1;transform:translateY(0) scale(1)}

/* Line split animations */
.hero-title .line, .hero-tag .line{display:block;overflow:hidden;opacity:1}
.hero-title .char, .hero-tag .char{display:inline-block;transform:translateY(110%) rotate(4deg) scale(.96);opacity:0;transition:transform .55s cubic-bezier(.22,.8,.3,1),opacity .55s cubic-bezier(.22,.8,.3,1)}
.hero-title .char.space, .hero-tag .char.space{width:.45em;transform:none !important;opacity:1 !important}
.hero-title.lines-ready .char, .hero-tag.lines-ready .char{transform:translateY(0) rotate(0deg) scale(1);opacity:1}
.hero-title .char:nth-child(odd), .hero-tag .char:nth-child(odd){transition-duration:.85s}
.hero-title .char:nth-child(even), .hero-tag .char:nth-child(even){transition-duration:.75s}


/* Visual frame inspired by review UI */
.hero-visual{position:relative;width:100%;display:flex;align-items:center;justify-content:center}
.visual-frame{width:100%;max-width:640px;background:#0d0f12;border:1px solid #1f242a;border-radius:18px;padding:0;box-shadow:0 30px 60px -20px #000;display:flex;flex-direction:column;overflow:hidden;position:relative}
@media (max-width:600px){.visual-frame{border-radius:14px;max-width:100%}}
.vf-topbar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#10151b;border-bottom:1px solid #1e242a;font-size:13px;color:#94a3b8;font-weight:600;letter-spacing:.02em}
@media (max-width:600px){.vf-topbar{padding:8px 12px;font-size:12px;gap:6px}}
.vf-topbar .dot{width:12px;height:12px;border-radius:50%;background:#1e293b;display:inline-block;position:relative}
@media (max-width:600px){.vf-topbar .dot{width:10px;height:10px}}
.vf-topbar .dot.red{background:#ef4444}
.vf-topbar .dot.amber{background:#f59e0b}
.vf-topbar .dot.green{background:#22c55e}
.vf-stage{position:relative;aspect-ratio:16/9;background:#000;display:flex;align-items:center;justify-content:center}
.vf-stage .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mock-video{position:relative;width:100%;height:100%;background:radial-gradient(circle at 50% 50%,#1e293b,#0f172a)}
.mv-overlay{position:absolute;bottom:10px;right:14px;background:rgba(15,23,42,.7);padding:6px 10px;border-radius:14px;font-size:12px;color:#cbd5e1;font-weight:600;backdrop-filter:blur(6px)}
@media (max-width:600px){.mv-overlay{bottom:8px;right:10px;padding:5px 8px;font-size:11px;border-radius:10px}}
.vf-timeline{padding:12px 16px;background:#10151b;border-top:1px solid #1e242a}
@media (max-width:600px){.vf-timeline{padding:10px 12px}}
.vf-timeline .bar{position:relative;width:100%;height:6px;background:#1e293b;border-radius:4px;overflow:hidden}
@media (max-width:600px){.vf-timeline .bar{height:5px}}
.vf-timeline .bar span{display:block;height:100%;background:linear-gradient(90deg,#ef4444,#dc2626);border-radius:inherit}

/* Values section and product wheel removed for rebuild */

/* Discord */
.hexp-discord{padding:140px 0 160px;background:linear-gradient(180deg,#0a0d12 0,#050507 100%);position:relative}
.hexp-discord .inner{max-width:var(--hx-grid-max);margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center;padding:0 32px}
@media (max-width:1100px){.hexp-discord .inner{grid-template-columns:1fr;gap:48px;padding:0 24px}}
.d-copy .sec-title{margin:0 0 18px}
.d-copy .d-tag{margin:0 0 22px;color:var(--hx-muted);max-width:560px;font-size:17px;line-height:1.55}
.d-embed iframe{width:100%;max-width:420px;height:480px}

/* VALUES SECTION - Button Grid */
.hexp-values{padding:80px 0 0;position:relative;z-index:2;background:transparent}
.vals-grid{max-width:var(--hx-grid-max);margin:0 auto;padding:0 32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
@media (max-width:980px){.vals-grid{padding:0 24px;grid-template-columns:1fr;gap:20px}}
@media (max-width:600px){.vals-grid{padding:0 20px;gap:16px}}

/* VALUE CARDS - Styled as interactive buttons */
.val-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px 26px;background:rgba(18,18,22,.75);border:1px solid rgba(255,255,255,.08);border-radius:22px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .35s cubic-bezier(.22,.8,.3,1);cursor:pointer;text-decoration:none;overflow:hidden}
.val-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,0) 55%);opacity:0;transition:opacity .45s;pointer-events:none}
.val-card:hover{transform:translateY(-6px);border-color:rgba(239,68,68,.45);box-shadow:0 16px 48px -16px rgba(239,68,68,.35)}
.val-card:hover::before{opacity:.28}
.val-card:active{transform:translateY(-3px) scale(.98)}
/* Mobile: enable tap hover effect */
@media (max-width:980px){
	.val-card:active{transform:translateY(-4px) scale(.99);border-color:rgba(239,68,68,.35)}
	.val-card:active::before{opacity:.22}
}
@media (max-width:600px){
	.val-card{padding:22px 20px;gap:10px;border-radius:18px}
}

/* Card header with title + status */
.val-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.val-title{font-size:1.35rem;font-weight:700;margin:0;color:#fff;letter-spacing:-.02em}
.val-copy{font-size:.95rem;line-height:1.45;color:var(--hx-muted);margin:0;flex-grow:1}
.val-link{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;font-weight:600;color:#ef4444;text-decoration:none;align-self:flex-start;margin-top:8px;transition:gap .3s}
.val-link:hover{gap:10px}

/* Service status indicator */
.svc-status{display:inline-flex;align-items:center;gap:7px;font-size:.75rem;font-weight:600;color:#9ca3af;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap}
.svc-status .dot{width:8px;height:8px;border-radius:50%;background:#6d6d70;transition:background .4s,box-shadow .4s;flex-shrink:0}
.svc-status.online .dot{background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.6);animation:statusPulse 2s ease-in-out infinite}
.svc-status.offline .dot{background:#dc2626}
.svc-status.checking .dot{background:#f59e0b;animation:statusBlink .8s ease-in-out infinite}
.svc-status.beta .dot{background:#f59e0b;box-shadow:0 0 8px rgba(245,158,11,.5);animation:statusPulse 2s ease-in-out infinite}
.svc-status.glitchy .dot{background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.6);animation:glitchDot 2.4s steps(4,end) infinite}
.svc-status .label{transition:color .3s;font-family:'Courier New',monospace;min-width:120px;text-align:left}
.svc-status.online .label{color:#22c55e}
.svc-status.offline .label{color:#dc2626}
.svc-status.checking .label{color:#f59e0b}
.svc-status.beta .label{color:#f59e0b;text-transform:none;letter-spacing:.5px}
.svc-status.members .label{color:#5865f2;text-transform:none;font-family:inherit}
.svc-status.members .dot{background:#5865f2;box-shadow:0 0 8px rgba(88,101,242,.5);animation:statusPulse 2.5s ease-in-out infinite}
.svc-status.glitchy .label{color:#22c55e;animation:glitchText 2.8s steps(3,end) infinite;text-transform:none}

/* Typing cursor for beta status */
.svc-status.beta .label::after{content:'_';animation:cursorBlink 1s step-end infinite;margin-left:1px}

@keyframes statusPulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes statusBlink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}

/* Glitchy music bot animations - chaotic CRT style like home-v2 badge */
.svc-status.glitchy .dot{animation:glitchDotFlash 2.8s steps(1,end) infinite,glitchFlicker 3.6s steps(1,end) infinite}
.svc-status.glitchy .label{
	position:relative;
	display:inline-block;
	will-change:transform,filter,clip-path;
	animation:glitchMaster 3.2s steps(1,end) infinite;
}

/* RGB split layers like home-v2 */
.svc-status.glitchy .label::before,
.svc-status.glitchy .label::after{
	content:attr(data-text);
	position:absolute;
	inset:0;
	pointer-events:none;
	mix-blend-mode:screen;
	opacity:0;
}

.svc-status.glitchy .label::before{
	color:#29b6ff;
	animation:glitchCyan 3.2s steps(1,end) infinite;
}

.svc-status.glitchy .label::after{
	color:#ff2d5e;
	animation:glitchPink 3.2s steps(1,end) infinite;
}

/* Master text layer - random transforms */
@keyframes glitchMaster{
	0%, 82%, 100%{ transform:none; filter:none; opacity:1 }
	83%{ transform:skewX(2deg) translateY(-1px); filter:blur(.2px); opacity:.97 }
	84%{ transform:skewX(-2.2deg) translateY(1px) translateX(1.5px); filter:none; opacity:1 }
	85%{ transform:translateX(-2.5px) skewY(1.4deg) scale(1.02); filter:blur(.25px); opacity:.95 }
	86%{ transform:translateX(2.8px) skewY(-1.6deg) scale(.98); filter:none; opacity:1 }
	87%{ transform:skewX(1.8deg) translateX(-1.2px); filter:blur(.15px); opacity:.98 }
}

/* Cyan layer - slice and shift */
@keyframes glitchCyan{
	0%, 82%, 100%{ clip-path:inset(0 0 0 0); transform:none; opacity:0 }
	83%{ clip-path:inset(0 0 68% 0); transform:translate(-4px,-1.5px); opacity:.9 }
	84%{ clip-path:inset(48% 0 0 0); transform:translate(-1.8px,1.2px); opacity:.85 }
	85%{ clip-path:inset(22% 0 44% 0); transform:translate(-3.5px,0); opacity:.9 }
	86%{ clip-path:inset(0 0 0 0); transform:translate(-1.5px,0); opacity:.8 }
	87%{ clip-path:inset(12% 0 52% 0); transform:translate(-4.2px,.8px); opacity:.9 }
}

/* Pink layer - opposite slice and shift */
@keyframes glitchPink{
	0%, 82%, 100%{ clip-path:inset(0 0 0 0); transform:none; opacity:0 }
	83%{ clip-path:inset(58% 0 0 0); transform:translate(4.2px,1px); opacity:.85 }
	84%{ clip-path:inset(0 0 64% 0); transform:translate(2px,-1.4px); opacity:.9 }
	85%{ clip-path:inset(16% 0 28% 0); transform:translate(3.8px,0); opacity:.85 }
	86%{ clip-path:inset(0 0 0 0); transform:translate(1.8px,0); opacity:.8 }
	87%{ clip-path:inset(8% 0 46% 0); transform:translate(4.5px,-.6px); opacity:.9 }
}

/* Dot flashing - mostly stable green with occasional gray flickers */
@keyframes glitchDotFlash{
	0%,85%{background:#22c55e;box-shadow:0 0 14px rgba(34,197,94,.95);opacity:1;transform:scale(1)}
	86%,87%{background:#64748b;box-shadow:0 0 6px rgba(100,116,139,.5);opacity:.45;transform:scale(1.2)}
	88%,94%{background:#22c55e;box-shadow:0 0 14px rgba(34,197,94,.95);opacity:1;transform:scale(1)}
	95%,96%{background:#94a3b8;box-shadow:0 0 8px rgba(148,163,184,.6);opacity:.5;transform:scale(.9)}
	97%,100%{background:#22c55e;box-shadow:0 0 14px rgba(34,197,94,.95);opacity:1;transform:scale(1)}
}

@keyframes glitchFlicker{
	0%,90%{opacity:1}
	91%,92%{opacity:.4}
	93%,95%{opacity:1}
	96%,97%{opacity:.55}
	98%,100%{opacity:1}
}

/* Keep dot flashing between online/offline states - FAST */
@keyframes glitchDotFlash{
	0%,40%{background:#22c55e;box-shadow:0 0 16px rgba(34,197,94,1);opacity:1;transform:scale(1)}
	41%,45%{background:#64748b;box-shadow:0 0 4px rgba(100,116,139,.4);opacity:.3;transform:scale(1.4)}
	46%,55%{background:#22c55e;box-shadow:0 0 16px rgba(34,197,94,1);opacity:1;transform:scale(1)}
	56%,60%{background:#94a3b8;box-shadow:0 0 8px rgba(148,163,184,.6);opacity:.5;transform:scale(.8)}
	61%,75%{background:#22c55e;box-shadow:0 0 16px rgba(34,197,94,1);opacity:1;transform:scale(1)}
	76%,80%{background:#64748b;box-shadow:0 0 6px rgba(100,116,139,.5);opacity:.4;transform:scale(1.3)}
	81%,100%{background:#22c55e;box-shadow:0 0 16px rgba(34,197,94,1);opacity:1;transform:scale(1)}
}

@keyframes glitchFlicker{
	0%,60%{opacity:1}
	61%,65%{opacity:.2}
	66%,70%{opacity:1}
	71%,75%{opacity:.4}
	76%,100%{opacity:1}
}

/* CRT-style distortion with AGGRESSIVE chromatic aberration positioning */
@keyframes glitchCRTDistort{
	0%,30%{transform:translate(0,0) skewX(0deg);filter:blur(0)}
	31%,35%{transform:translate(-6px,1px) skewX(-8deg);filter:blur(.8px)}
	36%,40%{transform:translate(7px,-1px) skewX(9deg);filter:blur(1px)}
	41%,45%{transform:translate(-4px,0) skewX(-5deg);filter:blur(.6px)}
	46%,50%{transform:translate(0,0) skewX(0deg);filter:blur(0)}
	51%,55%{transform:translate(5px,-.8px) skewX(7deg);filter:blur(.7px)}
	56%,60%{transform:translate(-7px,1px) skewX(-10deg);filter:blur(1.2px)}
	61%,70%{transform:translate(0,0) skewX(0deg);filter:blur(0)}
	71%,75%{transform:translate(6px,0) skewX(8deg);filter:blur(.9px)}
	76%,80%{transform:translate(-5px,-.5px) skewX(-7deg);filter:blur(.8px)}
	81%,100%{transform:translate(0,0) skewX(0deg);filter:blur(0)}
}

/* Glitchy music bot animations */
@keyframes glitchDot{
	0%,20%{background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.6);opacity:1}
	21%,24%{background:#f59e0b;box-shadow:0 0 8px rgba(245,158,11,.5);opacity:.7}
	25%,45%{background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.6);opacity:1}
	46%,48%{background:#dc2626;box-shadow:0 0 8px rgba(220,38,38,.5);opacity:.6}
	49%,70%{background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.6);opacity:1}
	71%,73%{background:#f59e0b;box-shadow:0 0 8px rgba(245,158,11,.5);opacity:.8}
	74%,100%{background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.6);opacity:1}
}
@keyframes glitchText{
	0%,22%{color:#22c55e;transform:translateX(0)}
	23%,24%{color:#f59e0b;transform:translateX(-1px)}
	25%,47%{color:#22c55e;transform:translateX(0)}
	48%,49%{color:#dc2626;transform:translateX(1px)}
	50%,72%{color:#22c55e;transform:translateX(0)}
	73%,74%{color:#f59e0b;transform:translateX(-0.5px)}
	75%,100%{color:#22c55e;transform:translateX(0)}
}

/* Gradients & ambient */
.hero-gradient{position:absolute;inset:0;background:radial-gradient(circle at 65% 40%, rgba(255,0,0,.28), transparent 60%),radial-gradient(circle at 10% 70%, rgba(255,0,0,.22), transparent 65%);opacity:.75;mix-blend-mode:plus-lighter;pointer-events:none}
.hexp-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,7,0) 0%,rgba(5,5,7,.55) 82%,rgba(5,5,7,.75) 100%);pointer-events:none;z-index:1}

/* Interactive smoke layers */
.hx-smoke-layer{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;z-index:0;pointer-events:none;min-height:100%}
.hx-smoke-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;filter:blur(48px) saturate(1.2) brightness(.95);opacity:.75;mix-blend-mode:plus-lighter;transition:filter .6s ease, opacity .6s ease}
.hx-smoke-fg{position:absolute;inset:-16%;background:
	radial-gradient(circle at 28% 38%, rgba(255,0,0,.16), transparent 60%),
	radial-gradient(circle at 78% 60%, rgba(255,0,0,.13), transparent 68%),
	radial-gradient(circle at 55% 24%, rgba(255,0,0,.09), transparent 66%),
	radial-gradient(circle at 42% 72%, rgba(255,0,0,.075), transparent 70%),
	radial-gradient(circle at 50% 95%, rgba(255,0,0,.14), transparent 72%),
	radial-gradient(circle at 85% 90%, rgba(255,0,0,.07), transparent 68%);
mix-blend-mode:plus-lighter;animation:hxSmokeDrift 34s ease-in-out infinite alternate;opacity:.35;filter:blur(44px) saturate(.98)}
@keyframes hxSmokeDrift{0%{transform:translate3d(-4%,2%,0) scale(1)}50%{transform:translate3d(3%, -3%,0) scale(1.04)}100%{transform:translate3d(-2%,4%,0) scale(1.02)}}

/* Mobile motion & flash mitigation */
/* Mobile now allowed to animate (lighter animation speed) */
@media (max-width:780px){
	.hx-smoke-fg{animation-duration:48s;filter:blur(50px) saturate(.95);opacity:.30}
	/* On mobile, avoid collapsing the hero height to prevent any snap/jump */
	.hexp-hero{margin-bottom:0;--hero-collapse:0px}
}
/* iOS hard stop for motion (Safari still may render subtle composite changes) */
.is-ios .hx-smoke-canvas{display:none !important}
.is-ios .hx-smoke-fg{animation:none !important}
.is-ios.force-anim-allow .hx-smoke-canvas{display:block !important}
.is-ios.force-anim-allow .hx-smoke-fg{animation:hxSmokeDrift 36s ease-in-out infinite alternate !important}
@media (prefers-reduced-motion: reduce){
	.hx-smoke-fg{animation:none}
	.hx-smoke-canvas{opacity:.5}
}

/* value card reveal removed */

/* Responsive tweaks */
@media (max-width:780px){
	.hero-title{font-size:clamp(34px,9vw,60px)}
	.hexp-discord{padding:100px 0 120px}
	/* Mobile performance reductions */
	.hx-tv-filter{animation:none;opacity:.28}
	.val-card::before{display:none}
	.val-card:hover{transform:none}
}