/* StormPlus — modern neon */
:root {
	--bg: #05060d;
	--bg-soft: #0a0c18;
	--ink: #e8ecff;
	--ink-dim: #9aa3c7;
	--cyan: #35f0ff;
	--magenta: #ff2fd0;
	--violet: #8b5cf6;
	--lime: #b8ff3c;
	--line: rgba(140, 160, 255, .16);
	--glass: rgba(255, 255, 255, .035);
	--radius: 18px;
	--maxw: 1180px;
	--font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Microsoft YaHei", "Noto Sans SC", sans-serif;
	--mono: "Cascadia Code", "JetBrains Mono", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	background:
		radial-gradient(60% 45% at 15% 0%, rgba(53, 240, 255, .16), transparent 65%),
		radial-gradient(55% 45% at 90% 10%, rgba(255, 47, 208, .15), transparent 65%),
		radial-gradient(70% 60% at 50% 105%, rgba(139, 92, 246, .18), transparent 60%);
	pointer-events: none;
	z-index: -2;
}

#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .55; }

.aurora {
	position: fixed;
	inset: -20% -10% auto -10%;
	height: 70vh;
	background: conic-gradient(from 210deg at 50% 50%, rgba(53, 240, 255, .1), rgba(255, 47, 208, .12), rgba(184, 255, 60, .07), rgba(53, 240, 255, .1));
	filter: blur(90px);
	opacity: .5;
	animation: spin 28s linear infinite;
	pointer-events: none;
	z-index: -2;
}

@keyframes spin { to { transform: rotate(360deg); } }

a { color: inherit; text-decoration: none; }
code {
	font-family: var(--mono);
	font-size: .88em;
	padding: .12em .45em;
	border-radius: 6px;
	background: rgba(53, 240, 255, .1);
	border: 1px solid rgba(53, 240, 255, .22);
	color: #b9f6ff;
}

/* nav */
.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 18px 24px;
}

.nav::after {
	content: "";
	position: absolute;
	inset: 0;
	backdrop-filter: blur(14px);
	background: linear-gradient(180deg, rgba(5, 6, 13, .88), rgba(5, 6, 13, .35));
	border-bottom: 1px solid transparent;
	transition: border-color .3s;
	z-index: -1;
}

.nav.scrolled::after { border-bottom-color: var(--line); }

.brand { display: flex; align-items: center; gap: 10px; }

.mark {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: linear-gradient(145deg, rgba(53, 240, 255, .22), rgba(255, 47, 208, .22));
	border: 1px solid rgba(53, 240, 255, .4);
	box-shadow: 0 0 18px rgba(53, 240, 255, .35), inset 0 0 12px rgba(255, 47, 208, .3);
}
.mark svg { width: 20px; height: 20px; fill: var(--cyan); filter: drop-shadow(0 0 6px var(--cyan)); }

.brand-text { font-weight: 700; font-size: 1.12rem; letter-spacing: .02em; }
.brand-text em {
	font-style: normal;
	background: linear-gradient(90deg, var(--cyan), var(--magenta));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 0 22px rgba(255, 47, 208, .45);
}

.links { display: flex; gap: 6px; margin-left: 8px; }
.links a {
	padding: 8px 14px;
	border-radius: 10px;
	font-size: .95rem;
	color: var(--ink-dim);
	transition: color .2s, background .2s, box-shadow .2s;
}
.links a:hover { color: var(--ink); background: var(--glass); }
.links a.active {
	color: #d9feff;
	background: rgba(53, 240, 255, .1);
	box-shadow: inset 0 0 0 1px rgba(53, 240, 255, .35), 0 0 20px rgba(53, 240, 255, .18);
}

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.lang {
	font: inherit;
	font-size: .88rem;
	letter-spacing: .06em;
	color: var(--ink-dim);
	background: var(--glass);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 7px 12px;
	cursor: pointer;
	transition: color .2s, border-color .2s, box-shadow .2s;
}
.lang:hover { color: var(--ink); border-color: rgba(53, 240, 255, .5); box-shadow: 0 0 16px rgba(53, 240, 255, .2); }
.lang .sep { opacity: .35; margin: 0 4px; }
.lang-zh, .lang-en { opacity: .4; transition: opacity .2s; }
html[data-lang="zh"] .lang-zh, html:not([data-lang]) .lang-zh, html[data-lang="en"] .lang-en { opacity: 1; color: var(--cyan); }

/* buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 999px;
	font-weight: 650;
	font-size: 1rem;
	letter-spacing: .01em;
	border: 1px solid transparent;
	transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, background .25s, color .25s;
	will-change: transform;
}
.btn-sm { padding: 9px 18px; font-size: .9rem; }
.btn-lg { padding: 18px 40px; font-size: 1.1rem; }

.btn-primary {
	color: #041016;
	background: linear-gradient(100deg, var(--cyan), #7df 45%, var(--magenta) 130%);
	box-shadow: 0 0 0 1px rgba(53, 240, 255, .5), 0 14px 40px -12px rgba(53, 240, 255, .6), 0 0 34px -6px rgba(255, 47, 208, .55);
}
.btn-primary:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 0 0 1px rgba(53, 240, 255, .8), 0 20px 52px -12px rgba(53, 240, 255, .75), 0 0 60px -6px rgba(255, 47, 208, .7); }

.btn-ghost { color: var(--ink); background: var(--glass); border-color: var(--line); }
.btn-ghost:hover { border-color: rgba(255, 47, 208, .55); box-shadow: 0 0 26px -6px rgba(255, 47, 208, .5); transform: translateY(-2px); }

.arrow { transition: transform .25s; }
.btn:hover .arrow { transform: translateX(5px); }

/* hero */
.hero {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: clamp(60px, 12vh, 130px) 24px 90px;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 22px;
	padding: 7px 15px 7px 12px;
	border-radius: 999px;
	border: 1px solid rgba(53, 240, 255, .3);
	background: rgba(53, 240, 255, .07);
	color: #a8f4ff;
	font-size: .84rem;
	letter-spacing: .08em;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.75); } }

.title { margin: 0; font-weight: 800; letter-spacing: -.02em; line-height: 1.06; }
.title .line { display: block; font-size: clamp(2.3rem, 7.2vw, 4.6rem); }
.title .glow {
	background: linear-gradient(92deg, var(--cyan) 5%, #9de9ff 32%, var(--magenta) 78%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 0 26px rgba(53, 240, 255, .35));
	animation: flicker 7s infinite;
}
@keyframes flicker {
	0%, 92%, 100% { opacity: 1; }
	93% { opacity: .55; }
	94% { opacity: 1; }
	96% { opacity: .7; }
	97% { opacity: 1; }
}

.sub { max-width: 640px; margin: 26px 0 34px; font-size: 1.08rem; color: var(--ink-dim); }

.cta { display: flex; flex-wrap: wrap; gap: 14px; }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 46px 0 0; padding: 0; }
.chips li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 12px 18px;
	border-radius: 14px;
	background: var(--glass);
	border: 1px solid var(--line);
	transition: border-color .25s, transform .25s;
}
.chips li:hover { border-color: rgba(53, 240, 255, .45); transform: translateY(-2px); }
.chips b { font-family: var(--mono); font-size: 1.15rem; color: var(--cyan); text-shadow: 0 0 14px rgba(53, 240, 255, .6); }
.chips span { font-size: .86rem; color: var(--ink-dim); }

/* sections */
.block { max-width: var(--maxw); margin: 0 auto; padding: 70px 24px; }

.h2 {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 8px;
	font-size: clamp(1.7rem, 3.6vw, 2.5rem);
	font-weight: 750;
	letter-spacing: -.01em;
}
.h2.center { justify-content: center; }
.idx { font-family: var(--mono); font-size: .85rem; color: var(--magenta); text-shadow: 0 0 14px rgba(255, 47, 208, .7); }

.lead { margin: 0 0 40px; color: var(--ink-dim); max-width: 620px; }
.lead.center { margin-inline: auto; text-align: center; }

/* feature grid */
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
}

.card {
	position: relative;
	padding: 26px 24px 28px;
	border-radius: var(--radius);
	background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
	border: 1px solid var(--line);
	overflow: hidden;
	transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s;
}
.card::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(130deg, rgba(53, 240, 255, .6), transparent 40%, rgba(255, 47, 208, .55));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity .3s;
	pointer-events: none;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .9), 0 0 44px -18px rgba(53, 240, 255, .5); }
.card:hover::before { opacity: 1; }

.ico {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
	border-radius: 12px;
	background: rgba(53, 240, 255, .1);
	border: 1px solid rgba(53, 240, 255, .28);
}
.ico svg { width: 22px; height: 22px; fill: none; stroke: var(--cyan); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(53, 240, 255, .8)); }

.card h3 { margin: 0 0 8px; font-size: 1.12rem; letter-spacing: .01em; }
.card p { margin: 0; font-size: .94rem; color: var(--ink-dim); }

/* why rows */
.rows { display: grid; gap: 14px; }
.row {
	display: flex;
	gap: 20px;
	padding: 24px 26px;
	border-radius: var(--radius);
	background: var(--glass);
	border: 1px solid var(--line);
	transition: border-color .3s, background .3s;
}
.row:hover { border-color: rgba(255, 47, 208, .35); background: rgba(255, 255, 255, .055); }
.num {
	flex: 0 0 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	font-family: var(--mono);
	font-weight: 700;
	color: #ffd8f6;
	background: linear-gradient(150deg, rgba(255, 47, 208, .3), rgba(139, 92, 246, .3));
	border: 1px solid rgba(255, 47, 208, .4);
	box-shadow: 0 0 22px -6px rgba(255, 47, 208, .8);
}
.row h3 { margin: 4px 0 8px; font-size: 1.15rem; }
.row p { margin: 0; color: var(--ink-dim); font-size: .96rem; }

.copy {
	margin-top: 14px;
	font: inherit;
	font-size: .86rem;
	padding: 8px 16px;
	border-radius: 999px;
	color: #b8f7ff;
	background: rgba(53, 240, 255, .1);
	border: 1px solid rgba(53, 240, 255, .35);
	cursor: pointer;
	transition: background .2s, box-shadow .2s, transform .2s;
}
.copy:hover { background: rgba(53, 240, 255, .2); box-shadow: 0 0 22px -4px rgba(53, 240, 255, .8); transform: translateY(-1px); }
.copy.done { color: #ddffb0; border-color: rgba(184, 255, 60, .5); background: rgba(184, 255, 60, .14); }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: s; }
.steps li {
	position: relative;
	padding: 22px 24px 22px 78px;
	border-radius: var(--radius);
	background: var(--glass);
	border: 1px solid var(--line);
}
.step-no {
	position: absolute;
	left: 22px;
	top: 20px;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-family: var(--mono);
	font-weight: 700;
	color: #041016;
	background: linear-gradient(140deg, var(--cyan), var(--violet));
	box-shadow: 0 0 24px -4px rgba(53, 240, 255, .9);
}
.steps h3 { margin: 0 0 6px; font-size: 1.08rem; }
.steps p { margin: 0; color: var(--ink-dim); font-size: .95rem; }

.note {
	margin-top: 26px;
	padding: 22px 24px;
	border-radius: var(--radius);
	background: rgba(255, 47, 208, .06);
	border: 1px solid rgba(255, 47, 208, .3);
	box-shadow: inset 0 0 40px -20px rgba(255, 47, 208, .5);
}
.note strong { display: block; margin-bottom: 8px; color: #ffc9ef; letter-spacing: .04em; }
.note p { margin: 0; font-size: .93rem; color: var(--ink-dim); }

/* faq */
.q {
	border-radius: 14px;
	background: var(--glass);
	border: 1px solid var(--line);
	margin-bottom: 10px;
	overflow: hidden;
	transition: border-color .25s;
}
.q[open] { border-color: rgba(53, 240, 255, .45); }
.q summary {
	padding: 17px 52px 17px 22px;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	position: relative;
}
.q summary::-webkit-details-marker { display: none; }
.q summary::after {
	content: "+";
	position: absolute;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--mono);
	font-size: 1.2rem;
	color: var(--cyan);
	transition: transform .25s;
}
.q[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.q p { margin: 0; padding: 0 22px 20px; color: var(--ink-dim); font-size: .95rem; }

/* download band */
.band {
	max-width: var(--maxw);
	margin: 40px auto 0;
	padding: 78px 24px 92px;
	text-align: center;
	position: relative;
}
.band::before {
	content: "";
	position: absolute;
	inset: 10% 4% 6%;
	border-radius: 32px;
	background: radial-gradient(60% 100% at 50% 0%, rgba(53, 240, 255, .12), rgba(255, 47, 208, .1) 60%, transparent 75%);
	border: 1px solid var(--line);
	z-index: -1;
}
.band .h2 { justify-content: center; max-width: 720px; margin-inline: auto; }
.band .btn { margin-top: 8px; }
.fineprint { margin: 22px 0 0; font-size: .85rem; color: var(--ink-dim); letter-spacing: .05em; }

/* footer */
.foot {
	max-width: var(--maxw);
	margin: 40px auto 0;
	padding: 34px 24px 46px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-between;
	border-top: 1px solid var(--line);
}
.foot-left { max-width: 520px; }
.foot-left p { margin: 10px 0 0; font-size: .86rem; color: var(--ink-dim); }
.foot-right { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 18px; font-size: .9rem; }
.foot-right a { color: var(--ink-dim); transition: color .2s, text-shadow .2s; }
.foot-right a:hover { color: var(--cyan); text-shadow: 0 0 14px rgba(53, 240, 255, .8); }
.copy-year { color: var(--ink-dim); font-family: var(--mono); font-size: .82rem; }

/* reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 720px) {
	.links { display: none; }
	.hero { padding-top: 46px; }
	.cta .btn { flex: 1 1 auto; justify-content: center; }
	.row { flex-direction: column; gap: 12px; }
	.steps li { padding-left: 24px; padding-top: 60px; }
	.step-no { top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
	#fx { display: none; }
}