:root {
	--navy-900: #0c1540;
	--navy-700: #1b2a6b;
	--gold: #f2c94c;
	--white: #fff;
	--font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
	min-height: 100vh; min-height: 100dvh;
	display: flex; flex-direction: column;
	font-family: var(--font); color: var(--white);
	background:
		radial-gradient(900px 500px at 85% -10%, rgb(242 201 76 / .16), transparent 60%),
		radial-gradient(800px 600px at -10% 110%, rgb(36 55 138 / .9), transparent 60%),
		linear-gradient(160deg, var(--navy-900), var(--navy-700) 70%, #2a3f9a);
	overflow-x: hidden;
}
.sky { position: fixed; inset: 0; pointer-events: none; contain: strict; }
.sky i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: #fff; box-shadow: 0 0 8px 1px rgb(255 255 255 / .6); animation: twinkle 3.6s ease-in-out var(--d) infinite; }
.comet { position: absolute; top: 18%; left: -15%; width: 180px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold)); transform: rotate(-14deg); animation: comet 10s ease-in 1.5s infinite; opacity: 0; }
@keyframes twinkle { 50% { opacity: .25; } }
@keyframes comet { 0% { opacity: 0; transform: translate(0, 0) rotate(-14deg); } 5% { opacity: 1; } 20% { opacity: 0; transform: translate(130vw, -26vw) rotate(-14deg); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sky i, .comet { animation: none; } .comet { display: none; } }

.page { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 1.25rem; gap: .25rem; }
.logo { margin-bottom: 1.25rem; transition: transform .3s; }
.logo:hover { transform: rotate(-6deg) scale(1.05); }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: .85rem; color: var(--gold); }
h1 { margin: .4rem 0 1.5rem; font-size: clamp(2rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; text-shadow: 0 2px 20px rgb(0 0 0 / .3); }

.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.5rem, 2vw, 1rem); width: min(100%, 640px); }
.countdown div { background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .14); border-radius: 18px; padding: clamp(.9rem, 3vw, 1.5rem) .25rem; }
.countdown strong { display: block; font-size: clamp(2rem, 9vw, 4.4rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--gold); }
.countdown span { display: block; margin-top: .45rem; font-size: clamp(.7rem, 2vw, .9rem); text-transform: uppercase; letter-spacing: .1em; opacity: .75; }

.big { font-size: clamp(1.2rem, 3vw, 1.6rem); max-width: 32em; margin: 0 0 1rem; }
.progress { width: min(100%, 520px); height: 12px; border-radius: 999px; background: rgb(255 255 255 / .12); overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #ffe08a); border-radius: inherit; }
.when { margin: 1.5rem 0 0; font-size: 1.1rem; opacity: .85; }

.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }
.btn { display: inline-flex; align-items: center; padding: .8em 1.5em; border-radius: 999px; font: 650 1rem/1.2 var(--font); text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: transform .15s, background-color .15s; }
.btn:hover { transform: translateY(-1px); }
.btn--accent { background: var(--gold); color: var(--navy-900); }
.btn--ghost { background: rgb(255 255 255 / .06); color: var(--white); border-color: rgb(255 255 255 / .4); }
.btn--ghost:hover { background: rgb(255 255 255 / .14); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.footer { position: relative; text-align: center; padding: 1.25rem; font-size: .85rem; opacity: .65; }
.footer a { color: inherit; }

.toast { position: fixed; bottom: 1.5rem; left: 50%; translate: -50% 0; background: var(--white); color: var(--navy-900); padding: .6rem 1.1rem; border-radius: 999px; font-weight: 600; }