.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::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}}

/* 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:48px;padding:0 20px}}
.hero-copy{display:flex;flex-direction:column;gap:24px}
.hero-title{font-size:clamp(38px,6vw,66px);line-height:1.02;font-weight:800;letter-spacing:-.03em;margin:0;color:#fff;position:relative}
/* 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)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px}
.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}
.btn.primary{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}
.btn.ghost{background:#101010}
.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}
.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}
.vf-topbar .dot{width:12px;height:12px;border-radius:50%;background:#1e293b;display:inline-block;position:relative}
.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}
.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)}
.vf-timeline{padding:12px 16px;background:#10151b;border-top:1px solid #1e242a}
.vf-timeline .bar{position:relative;width:100%;height:6px;background:#1e293b;border-radius:4px;overflow:hidden}
.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}

/* Gradients & ambient */
.hero-gradient{position:absolute;inset:0;background:radial-gradient(circle at 65% 40%, rgba(239,68,68,.28), transparent 60%),radial-gradient(circle at 10% 70%, rgba(220,38,38,.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(239,48,48,.16), transparent 60%),
	radial-gradient(circle at 78% 60%, rgba(220,38,38,.13), transparent 68%),
	radial-gradient(circle at 55% 24%, rgba(239,38,38,.09), transparent 66%),
	radial-gradient(circle at 42% 72%, rgba(220,30,30,.075), transparent 70%),
	radial-gradient(circle at 50% 95%, rgba(200,30,30,.14), transparent 72%),
	radial-gradient(circle at 85% 90%, rgba(239,45,45,.07), transparent 68%);
mix-blend-mode:plus-lighter;animation:hxSmokeDrift 34s ease-in-out infinite alternate;opacity:.50;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:.46}
	/* 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}
}