/* the eng home hero (design #4), taken from eng css/ui.min.css + dark.min.css for the Korean site's banner (kr/hero.js) */
#index-hero {
	position: relative; overflow: hidden; border-radius: 8px;
	height: clamp(220px, 34vw, 320px); display: flex; align-items: center; justify-content: center;
	
	background: linear-gradient(120deg, #1a0f33, #4a1270, #0f2f55, #2b0b46, #1a0f33);
	background-size: 300% 300%; animation: hero-shift 18s ease-in-out infinite;
	color: #fff; text-align: center;
}
#index-hero .hero-bg { position: absolute; inset: 0; pointer-events: none; }
#index-hero .hero-eq {
	position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
	display: flex; align-items: flex-end; gap: 4px; padding: 0 8px; opacity: .35;
}
#index-hero .hero-eq i {
	flex: 1; height: 100%; border-radius: 3px 3px 0 0; transform-origin: bottom;
	background: linear-gradient(to top, #ff3d7f, #ffb300 60%, #ffe066);
	animation: hero-eq 0.8s ease-in-out infinite alternate;
	animation-delay: calc(var(--i) * -97ms);   
}
#index-hero .hero-eq i:nth-child(3n)   { animation-duration: 0.9s; }
#index-hero .hero-eq i:nth-child(4n+1) { animation-duration: 1.2s; }
#index-hero .hero-eq i:nth-child(5n+2) { animation-duration: 0.7s; }
#index-hero .hero-notes b {
	position: absolute; bottom: -40px; left: var(--x); font-size: 28px; font-weight: normal; color: rgba(255,255,255,.55);
	animation: hero-note var(--t) linear var(--d) infinite; opacity: 0;
}
#index-hero .hero-text { position: relative; padding: 24px 20px; max-width: 100%; box-sizing: border-box; }
#index-hero h2 {
	margin: 0 0 12px; font: bold clamp(22px, 5vw, 46px)/1.15 Arial, Helvetica, sans-serif; white-space: normal; overflow-wrap: break-word;
	color: #ffd600; text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
#index-hero p { white-space: normal; margin: 0; font-size: clamp(15px, 2.6vw, 24px); line-height: 1.45; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
@media (prefers-reduced-motion: reduce) {
#index-hero, #index-hero .hero-eq i, #index-hero .hero-notes b { animation: none; }
#index-hero .hero-eq i { transform: scaleY(.4); }
}
#index-hero.hero-v1 .hero-waves, #index-hero.hero-v1 .hero-rings { display: none; }
#index-hero:not(.hero-v3) .hero-grid, #index-hero:not(.hero-v3) .hero-glow, #index-hero:not(.hero-v3):not(.hero-v4) .hero-spectrum { display: none; }
#index-hero:not(.hero-v4) .hero-aurora, #index-hero:not(.hero-v4) .hero-beams, #index-hero:not(.hero-v4) .hero-sparks { display: none; }
#index-hero.hero-v4 .hero-eq, #index-hero.hero-v4 .hero-notes, #index-hero.hero-v4 .hero-waves, #index-hero.hero-v4 .hero-rings { display: none; }
#index-hero.hero-v3 .hero-eq, #index-hero.hero-v3 .hero-notes, #index-hero.hero-v3 .hero-waves, #index-hero.hero-v3 .hero-rings { display: none; }
#index-hero.hero-v2 .hero-eq, #index-hero.hero-v2 .hero-notes { display: none; }
#index-hero.hero-v2 {
	background: linear-gradient(120deg, #06283d, #1b1464, #0b3d5c, #2a0f5c, #06283d);
	background-size: 300% 300%;
}
#index-hero .hero-waves { position: absolute; inset: 0; }
#index-hero .hero-wave { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; animation: hero-wave 14s linear infinite; }
#index-hero .hero-wave.w1 { fill: rgba(0, 229, 255, .22); animation-duration: 11s; }
#index-hero .hero-wave.w2 { fill: rgba(124, 77, 255, .28); animation-duration: 16s; animation-direction: reverse; }
#index-hero .hero-wave.w3 { fill: rgba(255, 64, 129, .22); animation-duration: 22s; }
#index-hero .hero-rings { position: absolute; left: 50%; top: 45%; width: 0; height: 0; }
#index-hero .hero-rings span {
	position: absolute; left: -150px; top: -150px; width: 300px; height: 300px; border-radius: 50%;
	border: 2px solid rgba(0, 229, 255, .45); opacity: 0; animation: hero-ring 6s ease-out infinite;
}
#index-hero .hero-rings span:nth-child(2) { animation-delay: 2s; border-color: rgba(124, 77, 255, .45); }
#index-hero .hero-rings span:nth-child(3) { animation-delay: 4s; border-color: rgba(255, 64, 129, .40); }
@media (prefers-reduced-motion: reduce) {
#index-hero .hero-wave, #index-hero .hero-rings span { animation: none; }
#index-hero .hero-rings span:first-child { opacity: .5; transform: scale(1); }
}
#index-hero.hero-v3 { background: #0b0d12; animation: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
#index-hero .hero-grid {
	position: absolute; inset: 0;
	background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
	                  linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size: 40px 40px;
	-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
	        mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
#index-hero .hero-glow span {
	position: absolute; width: 60%; height: 140%; top: -20%; border-radius: 50%; filter: blur(40px); opacity: .35;
	background: radial-gradient(circle, rgba(64, 120, 255, .55), transparent 65%);
	animation: hero-glow 16s ease-in-out infinite alternate;
}
#index-hero .hero-glow span:nth-child(2) {
	background: radial-gradient(circle, rgba(212, 175, 55, .35), transparent 65%);
	animation-duration: 22s; animation-direction: alternate-reverse; left: 40%;
}
#index-hero .hero-spectrum {
	position: absolute; left: 6%; right: 6%; top: 50%; height: 64%; transform: translateY(-50%);
	display: flex; align-items: center; gap: 3px; opacity: .22;
}
#index-hero .hero-spectrum i {
	flex: 1; height: calc(var(--h) * 100%); border-radius: 2px;
	background: linear-gradient(to bottom, transparent, #cfd8ff 30%, #ffffff 50%, #cfd8ff 70%, transparent);
	animation: hero-breathe 2.4s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -71ms);
}
#index-hero.hero-v3 h2 { color: #ffffff; letter-spacing: .3px; text-shadow: 0 2px 20px rgba(0,0,0,.8); }
#index-hero h2, #index-hero p { text-wrap: balance; }
#index-hero.hero-v3 h2::after {
	content: ""; display: block; width: 64px; height: 2px; margin: 16px auto 0; background: #d4af37; border-radius: 2px;
}
#index-hero.hero-v3 p { color: #aab2c0; text-shadow: none; }
@media (prefers-reduced-motion: reduce) {
#index-hero .hero-glow span, #index-hero .hero-spectrum i { animation: none; }
}
.about-hero {
	margin: 0 0 18px; padding: 44px 28px; border-radius: 20px; text-align: center; color: #fff;
	background: radial-gradient(ellipse at 50% 120%, rgba(26, 115, 232, .55), transparent 60%), linear-gradient(135deg, #0f1115 0%, #1b1f2a 100%);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.about-hero h1 { margin: 0 0 12px; font-size: 34px; font-weight: bold; color: #fff; }
.about-hero p { max-width: 640px; margin: 0 auto; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .85); }
@media (max-width: 760px) {
.about-hero { padding: 32px 18px; }
.about-hero h1 { font-size: 26px; }
.about-hero p { font-size: 15px; }
}
.apps-hero {
	display: flex; align-items: center; gap: 26px; padding: 30px 30px; border-radius: 20px; color: #fff;
	background: radial-gradient(ellipse at 20% 120%, rgba(217, 48, 37, .55), transparent 60%), linear-gradient(135deg, #0f1115 0%, #1b1f2a 100%);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.apps-hero-text { min-width: 0; }
.apps-hero h1 { margin: 4px 0 8px; font-size: 32px; font-weight: bold; color: #fff; }
.apps-hero p { margin: 0 0 16px; max-width: 560px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .85); }
@media (max-width: 760px) {
.apps-hero { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 18px; }
.apps-hero h1 { font-size: 26px; }
.apps-hero p { font-size: 15px; }
}
.biz-hero {
	padding: 40px 30px; border-radius: 20px; text-align: center; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	background: radial-gradient(ellipse at 80% 120%, rgba(26, 115, 232, .55), transparent 60%), linear-gradient(135deg, #0f1115 0%, #1b1f2a 100%);
}
.biz-hero h1 { margin: 0 0 10px; font-size: 32px; font-weight: bold; color: #fff; }
.biz-hero p { max-width: 600px; margin: 0 auto 20px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .85); }
@media (max-width: 760px) {
.biz-hero { padding: 28px 18px; }
.biz-hero h1 { font-size: 26px; }
}
#store .store-hero {
	margin: 0 0 18px; padding: 32px 26px; border-radius: 20px; text-align: center; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	background: radial-gradient(ellipse at 50% 130%, rgba(26, 115, 232, .55), transparent 60%), linear-gradient(135deg, #0f1115 0%, #1b1f2a 100%);
}
#store .store-hero h1 { margin: 0 0 8px; font-size: 30px; font-weight: bold; color: #fff; }
#store .store-hero p { max-width: 560px; margin: 0 auto; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .85); }
@media (max-width: 760px) {
#store .store-hero { padding: 24px 16px; }
#store .store-hero h1 { font-size: 24px; }
}
#index-hero.hero-v4 { background: radial-gradient(120% 90% at 50% 120%, #120828 0%, #07070e 50%, #030306 100%); animation: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
#index-hero.hero-v4 .hero-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(3,3,6,.7) 0%, rgba(3,3,6,.3) 55%, transparent 80%), radial-gradient(ellipse 100% 100% at 50% 50%, transparent 35%, rgba(0,0,0,.5) 68%, rgba(0,0,0,.92) 100%); box-shadow: inset 0 0 90px 20px rgba(0,0,0,.75); }
#index-hero .hero-aurora span {
	position: absolute; width: 70%; height: 170%; top: -35%; border-radius: 50%; opacity: .32; left: -18%;
	
	background: radial-gradient(closest-side, rgba(0, 212, 255, .66) 0%, rgba(0, 212, 255, .52) 22%, rgba(0, 212, 255, .32) 46%, rgba(0, 212, 255, .14) 70%, rgba(0, 212, 255, .04) 88%, rgba(0, 212, 255, 0) 100%);
	animation: hero-aurora 14s ease-in-out infinite alternate;
}
#index-hero .hero-aurora span:nth-child(2) { left: 26%; background: radial-gradient(closest-side, rgba(140, 60, 255, .75) 0%, rgba(140, 60, 255, .59) 22%, rgba(140, 60, 255, .36) 46%, rgba(140, 60, 255, .16) 70%, rgba(140, 60, 255, .05) 88%, rgba(140, 60, 255, 0) 100%); animation-duration: 18s; animation-direction: alternate-reverse; }
#index-hero .hero-aurora span:nth-child(3) { left: 58%; background: radial-gradient(closest-side, rgba(255, 45, 149, .62) 0%, rgba(255, 45, 149, .49) 22%, rgba(255, 45, 149, .3) 46%, rgba(255, 45, 149, .13) 70%, rgba(255, 45, 149, .04) 88%, rgba(255, 45, 149, 0) 100%); animation-duration: 22s; }
#index-hero .hero-beams span {
	position: absolute; top: -30%; left: 10%; width: 150px; margin-left: -75px; height: 170%; transform-origin: 50% 0;
	background: linear-gradient(to bottom, rgba(120, 220, 255, .30), rgba(120, 220, 255, 0) 72%);
	
	-webkit-mask: linear-gradient(to bottom right, transparent calc(50% - 4px), #000 calc(50% + 4px)) left top / 50% 100% no-repeat,
	              linear-gradient(to bottom left, transparent calc(50% - 4px), #000 calc(50% + 4px)) right top / 50% 100% no-repeat;
	        mask: linear-gradient(to bottom right, transparent calc(50% - 4px), #000 calc(50% + 4px)) left top / 50% 100% no-repeat,
	              linear-gradient(to bottom left, transparent calc(50% - 4px), #000 calc(50% + 4px)) right top / 50% 100% no-repeat;
	animation: hero-beam 9s ease-in-out infinite alternate;
}
#index-hero .hero-beams span:nth-child(2) { left: 30%; background: linear-gradient(to bottom, rgba(170, 120, 255, .28), rgba(170, 120, 255, 0) 72%); animation-duration: 12s; animation-direction: alternate-reverse; animation-delay: -3s; }
#index-hero .hero-beams span:nth-child(3) { left: 50%; width: 120px; margin-left: -60px; background: linear-gradient(to bottom, rgba(220, 230, 255, .20), rgba(220, 230, 255, 0) 65%); animation-duration: 15s; animation-delay: -7s; }
#index-hero .hero-beams span:nth-child(4) { left: 70%; background: linear-gradient(to bottom, rgba(255, 110, 200, .26), rgba(255, 110, 200, 0) 72%); animation-duration: 10s; animation-direction: alternate-reverse; animation-delay: -5s; }
#index-hero .hero-beams span:nth-child(5) { left: 90%; background: linear-gradient(to bottom, rgba(90, 200, 255, .28), rgba(90, 200, 255, 0) 72%); animation-duration: 13s; animation-delay: -2s; }
#index-hero .hero-sparks b {
	position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: #fff;
	box-shadow: 0 0 6px 2px rgba(170, 220, 255, .9), 0 0 14px 4px rgba(140, 60, 255, .45); opacity: 0;
	animation: hero-twinkle var(--t) ease-in-out var(--d) infinite;
}
#index-hero.hero-v4 .hero-spectrum {
	left: 0; right: 0; top: auto; bottom: 0; height: 34%; transform: none; align-items: flex-end; gap: 2px; opacity: .6;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
#index-hero.hero-v4 .hero-spectrum i {
	border-radius: 2px 2px 0 0; transform-origin: 50% 100%;
	background: linear-gradient(to top, #00d4ff, #8c3cff 55%, #ff2d95);
	box-shadow: 0 0 10px rgba(140, 60, 255, .55);
	animation: hero-bounce 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -53ms);
}
#index-hero.hero-v4 h2 {
	
	color: #f2fdff; letter-spacing: .5px;
	text-shadow: 0 0 1px #fff, 0 0 4px rgba(191,246,255,.9), 0 0 9px rgba(63,220,255,.75), 0 0 18px rgba(0,194,255,.55), 0 0 32px rgba(106,77,255,.45), 0 0 48px rgba(155,60,255,.3);
	animation: hero-neon-on 1.8s linear 1 both;
	position: relative;
}
#index-hero.hero-v4 h2[data-text]::before {
	content: attr(data-text); content: attr(data-text) / ""; position: absolute; left: 0; right: 0; top: 0; pointer-events: none;
	color: transparent; text-shadow: 0 0 5px rgba(214,250,255,.45), 0 0 11px rgba(90,228,255,.4), 0 0 22px rgba(0,200,255,.32), 0 0 38px rgba(122,77,255,.28), 0 0 58px rgba(176,60,255,.24);
	opacity: 0; animation: hero-neon-glow 3.6s ease-in-out 1.8s infinite alternate both;
}
#index-hero.hero-v4 h2::after {
	content: ""; display: block; width: 88px; height: 3px; margin: 16px auto 0; border-radius: 3px;
	background: linear-gradient(90deg, #00d4ff, #8c3cff, #ff2d95); box-shadow: 0 0 12px rgba(140, 60, 255, .8);
}
#index-hero.hero-v4 p { color: #d3dcea; text-shadow: 0 0 1px rgba(255,255,255,.5), 0 0 6px rgba(90,215,255,.45), 0 0 16px rgba(110,120,255,.3), 0 1px 8px rgba(0,0,0,.9); }
@media (prefers-reduced-motion: reduce) {
#index-hero .hero-aurora span, #index-hero .hero-beams span, #index-hero .hero-sparks b, #index-hero.hero-v4 .hero-spectrum i, #index-hero.hero-v4 h2, #index-hero.hero-v4 h2[data-text]::before { animation: none; }
#index-hero .hero-sparks b { opacity: .6; }
#index-hero.hero-v4 .hero-spectrum i { transform: scaleY(.6); }
}
#index-hero .hero-analyzer { display: none; }
#index-hero.hero-v4 .hero-analyzer {
	display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 38%;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
#index-hero.hero-v4.has-analyzer .hero-spectrum { display: none; }
@media (max-width: 600px) {
#index-hero.hero-v4 .hero-analyzer { height: 24%; opacity: .8; }
}
#index-hero.hero-off *, #index-hero.hero-off *::before, #index-hero.hero-off *::after { animation-play-state: paused !important; }
@keyframes hero-glow { 0% { transform: translateX(-30%); } 100% { transform: translateX(60%); } }
@keyframes hero-neon-on {
	0%, 8%, 14%, 30%, 36% { color: #3a4452; text-shadow: none; }
	10%, 12%, 32%, 34%, 100% { color: #f2fdff; text-shadow: 0 0 1px #fff, 0 0 4px rgba(191,246,255,.9), 0 0 9px rgba(63,220,255,.75), 0 0 18px rgba(0,194,255,.55), 0 0 32px rgba(106,77,255,.45), 0 0 48px rgba(155,60,255,.3); }
}
@keyframes hero-neon-glow { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hero-twinkle { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes hero-wave { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hero-aurora { 0% { transform: translate(-10%, 4%) scale(1); } 50% { transform: translate(8%, -6%) scale(1.15); } 100% { transform: translate(16%, 3%) scale(.92); } }
@keyframes hero-bounce { 0% { transform: scaleY(.22); } 100% { transform: scaleY(1); } }
@keyframes hero-note {
	0% { transform: translateY(0) rotate(0); opacity: 0; }
	10% { opacity: .9; }
	100% { transform: translateY(-360px) rotate(25deg); opacity: 0; }
}
@keyframes hero-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes hero-beam { 0% { transform: rotate(-32deg); } 100% { transform: rotate(32deg); } }
@keyframes hero-breathe { 0% { transform: scaleY(.35); } 100% { transform: scaleY(1); } }
@keyframes hero-ring { 0% { transform: scale(.25); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes hero-eq { 0% { transform: scaleY(.12); } 40% { transform: scaleY(.55); } 100% { transform: scaleY(.9); } }
:where(html.dark) #index-hero { background: linear-gradient(120deg, #1a0f33, #4a1270, #0f2f55, #2b0b46, #1a0f33); color: #fff; }
:where(html.dark) #index-hero .hero-eq i { background: linear-gradient(to top, #ff3d7f, #ffb300 60%, #ffe066); }
:where(html.dark) #index-hero .hero-notes b { color: rgba(255,255,255,.55); }
:where(html.dark) #index-hero h2 { color: #ffea7a; }
:where(html.dark) #index-hero.hero-v2 { background: linear-gradient(120deg, #06283d, #1b1464, #0b3d5c, #2a0f5c, #06283d); }
:where(html.dark) #index-hero .hero-wave.w1 { fill: rgba(122, 241, 255, 0.22); }
:where(html.dark) #index-hero .hero-wave.w2 { fill: rgba(124, 77, 255, .28); }
:where(html.dark) #index-hero .hero-wave.w3 { fill: rgba(255, 64, 129, .22); }
:where(html.dark) #index-hero .hero-rings span { border: 2px solid rgba(0, 229, 255, .45); }
:where(html.dark) #index-hero .hero-rings span:nth-child(2) { border-color: rgba(124, 77, 255, .45); }
:where(html.dark) #index-hero .hero-rings span:nth-child(3) { border-color: rgba(255, 64, 129, .40); }
:where(html.dark) #index-hero.hero-v3 { background: #0b0d12; box-shadow: inset 0 0 0 1px rgba(56, 56, 56, 0.06); }
:where(html.dark) #index-hero .hero-grid { background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
	                  linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); }
:where(html.dark) #index-hero .hero-glow span { background: radial-gradient(circle, rgba(64, 120, 255, .55), transparent 65%); }
:where(html.dark) #index-hero .hero-glow span:nth-child(2) { background: radial-gradient(circle, rgba(0, 0, 0, 0.35), transparent 65%); }
:where(html.dark) #index-hero .hero-spectrum i { background: linear-gradient(to bottom, transparent, #1a2244 30%, #1c1c1c 50%, #1a2244 70%, transparent); }
:where(html.dark) #index-hero.hero-v3 h2 { color: #ffffff; }
:where(html.dark) #index-hero.hero-v3 h2::after { background: #d4af37; }
:where(html.dark) #index-hero.hero-v3 p { color: #aab2c0; }
:where(html.dark) .about-hero { color: #fff; background: radial-gradient(ellipse at 50% 120%, rgba(26, 115, 232, .55), transparent 60%), linear-gradient(135deg, #0f1115 0%, #1b1f2a 100%); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
:where(html.dark) .about-hero h1 { color: #fff; }
:where(html.dark) .about-hero p { color: rgba(255, 255, 255, .85); }
:where(html.dark) .apps-hero { color: #fff; background: radial-gradient(ellipse at 20% 120%, rgba(217, 48, 37, .55), transparent 60%), linear-gradient(135deg, #0f1115 0%, #1b1f2a 100%); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
:where(html.dark) .apps-hero h1 { color: #fff; }
:where(html.dark) .apps-hero p { color: rgba(255, 255, 255, .85); }
:where(html.dark) .biz-hero { color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); background: radial-gradient(ellipse at 80% 120%, rgba(26, 115, 232, .55), transparent 60%), linear-gradient(135deg, #0f1115 0%, #1b1f2a 100%); }
:where(html.dark) .biz-hero h1 { color: #fff; }
:where(html.dark) .biz-hero p { color: rgba(255, 255, 255, .85); }
:where(html.dark) #store .store-hero { color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); background: radial-gradient(ellipse at 50% 130%, rgba(26, 115, 232, .55), transparent 60%), linear-gradient(135deg, #0f1115 0%, #1b1f2a 100%); }
:where(html.dark) #store .store-hero h1 { color: #fff; }
:where(html.dark) #store .store-hero p { color: rgba(255, 255, 255, .85); }
:where(html.dark) #index-hero.hero-v4 { background: radial-gradient(120% 90% at 50% 120%, #120828 0%, #07070e 50%, #030306 100%); box-shadow: inset 0 0 0 1px rgba(56, 56, 56, 0.07); }
:where(html.dark) #index-hero.hero-v4 .hero-bg::after { background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(3,3,6,.7) 0%, rgba(3,3,6,.3) 55%, transparent 80%), radial-gradient(ellipse 100% 100% at 50% 50%, transparent 35%, rgba(0,0,0,.5) 68%, rgba(0,0,0,.92) 100%); box-shadow: inset 0 0 90px 20px rgba(0,0,0,.75); }
:where(html.dark) #index-hero .hero-aurora span { background: radial-gradient(closest-side, rgba(0, 212, 255, .75), transparent); }
:where(html.dark) #index-hero .hero-aurora span:nth-child(2) { background: radial-gradient(closest-side, rgba(140, 60, 255, .85), transparent); }
:where(html.dark) #index-hero .hero-aurora span:nth-child(3) { background: radial-gradient(closest-side, rgba(255, 45, 149, .7), transparent); }
:where(html.dark) #index-hero .hero-beams span { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(120, 220, 255, 0) 72%); }
:where(html.dark) #index-hero .hero-beams span:nth-child(2) { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.28), rgba(170, 120, 255, 0) 72%); }
:where(html.dark) #index-hero .hero-beams span:nth-child(3) { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(220, 230, 255, 0) 65%); }
:where(html.dark) #index-hero .hero-beams span:nth-child(4) { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.26), rgba(255, 110, 200, 0) 72%); }
:where(html.dark) #index-hero .hero-beams span:nth-child(5) { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.28), rgba(90, 200, 255, 0) 72%); }
:where(html.dark) #index-hero .hero-sparks b { background: #1c1c1c; box-shadow: 0 0 6px 2px rgba(170, 220, 255, .9), 0 0 14px 4px rgba(140, 60, 255, .45); }
:where(html.dark) #index-hero.hero-v4 .hero-spectrum i { background: linear-gradient(to top, #00d4ff, #8c3cff 55%, #ff2d95); box-shadow: 0 0 10px rgba(140, 60, 255, .55); }
:where(html.dark) #index-hero.hero-v4 h2 { color: #f2fdff; }
:where(html.dark) #index-hero.hero-v4 h2::after { background: linear-gradient(90deg, #00d4ff, #8c3cff, #ff2d95); box-shadow: 0 0 12px rgba(140, 60, 255, .8); }
:where(html.dark) #index-hero.hero-v4 p { color: #d3dcea; }