:root {
	font-family: "Avenir Next", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	background: #faf4e8;
	color: #2a2320;
	--night: #10222b;
	--night-soft: #173640;
	--parchment: #faf4e8;
	--paper: #fffdf9;
	--ink: #2a2320;
	--muted: #6d625c;
	--gold: #c27b1f;
	--gold-bright: #f2c56f;
	--gold-tint: #f6e7c8;
	--jade: #2f765b;
	--line: rgba(72, 53, 43, 0.13);
	--shadow: 0 24px 70px rgba(35, 27, 23, 0.09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { margin: 0; overflow-x: hidden; background: var(--parchment); color: var(--ink); }
body,
button,
input,
select { font: inherit; }
a { color: inherit; }

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 70px;
	padding: 10px clamp(20px, 6vw, 88px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(16, 34, 43, 0.95);
	box-shadow: 0 10px 30px rgba(5, 18, 24, 0.16);
	color: white;
	backdrop-filter: blur(12px);
}

.brand {
	font-size: 1.35rem;
	font-weight: 850;
	letter-spacing: -0.045em;
	text-decoration: none;
}

.brand span { color: var(--gold-bright); }
nav { display: flex; align-items: center; gap: clamp(6px, 1.6vw, 22px); }
nav a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 10px 12px;
	border-radius: 999px;
	font-size: 0.87rem;
	font-weight: 720;
	text-decoration: none;
}
nav a:not(.nav-play):hover { background: rgba(255, 255, 255, 0.1); }
.nav-play {
	padding-inline: 20px;
	background: var(--gold-bright);
	box-shadow: 0 7px 20px rgba(0, 0, 0, 0.2);
	color: var(--night);
}
.nav-play:hover { background: #ffda8e; transform: translateY(-1px); }

.hero {
	position: relative;
	min-height: min(850px, calc(100svh - 70px));
	display: grid;
	align-items: center;
	padding: 82px clamp(22px, 7vw, 108px) 64px;
	isolation: isolate;
	color: white;
}

.hero-art,
.hero-shade { position: absolute; inset: 0; }
.hero-art {
	z-index: -2;
	background: url("/media/sgalpha-login-v1.png") center 34% / cover no-repeat;
}
.hero-shade {
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(8, 27, 34, 0.96) 0%, rgba(8, 27, 34, 0.72) 46%, rgba(8, 27, 34, 0.18) 78%),
		linear-gradient(0deg, rgba(16, 34, 43, 0.9) 0%, transparent 42%);
}
.hero-content { width: min(760px, 100%); }

.eyebrow {
	width: fit-content;
	margin: 0 0 18px;
	padding: 7px 12px;
	border-radius: 999px;
	background: var(--gold-tint);
	color: #7c4b0e;
	font-size: 0.8rem;
	font-weight: 760;
}
.eyebrow.dark { background: rgba(242, 197, 111, 0.18); color: #ffe2a8; }
.status-dot {
	width: 7px;
	height: 7px;
	display: inline-block;
	margin-right: 7px;
	border-radius: 50%;
	background: #75d8a3;
	box-shadow: 0 0 0 4px rgba(117, 216, 163, 0.13);
}

h1,
h2 {
	margin: 0;
	font-weight: 780;
	letter-spacing: -0.055em;
	line-height: 0.98;
}
h1 { font-size: clamp(3.5rem, 7vw, 6.3rem); }
h1 em { color: var(--gold-bright); font-style: normal; font-weight: 780; }
h2 { font-size: clamp(2.7rem, 5vw, 4.9rem); }
h2 em { color: var(--gold-bright); font-style: normal; font-weight: 780; }
.hero-copy {
	max-width: 680px;
	margin: 28px 0 0;
	color: #e9f1ec;
	font-size: clamp(1.05rem, 2vw, 1.24rem);
	line-height: 1.65;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.button {
	min-height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 25px;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 800;
	text-decoration: none;
	transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--gold-bright); box-shadow: 0 9px 25px rgba(194, 123, 31, 0.35); color: var(--night); }
.button.primary:hover { background: #ffda8e; box-shadow: 0 12px 30px rgba(194, 123, 31, 0.45); }
.button.secondary { border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.16); color: white; }
.button.secondary:hover { background: rgba(255, 255, 255, 0.23); }

.server-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
}
.server-facts li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.17);
	border-radius: 14px;
	background: rgba(10, 31, 38, 0.75);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.13);
}
.server-facts strong { color: var(--gold-bright); font-size: 1.32rem; font-weight: 850; }
.server-facts span { color: #dce9e3; font-size: 0.78rem; font-weight: 730; }
.facts-caption { margin: 14px 0 0; color: #bfcfc8; font-size: 0.84rem; }

.origin,
.rates,
.world,
.registration,
.policies,
.support,
.policy-main { padding: clamp(78px, 9vw, 130px) clamp(22px, 7vw, 108px); }

.trust-bar {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0 clamp(22px, 7vw, 108px);
	background: rgba(16, 34, 43, 0.14);
	list-style: none;
}
.trust-bar li {
	min-height: 116px;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 14px;
	align-content: center;
	padding: 24px clamp(18px, 2.5vw, 32px);
	background: #fffdf9;
}
.trust-bar li > span { grid-row: 1 / 3; color: var(--gold); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.08em; }
.trust-bar strong { color: var(--night); font-size: 0.92rem; }
.trust-bar small { margin-top: 4px; color: var(--muted); font-size: 0.75rem; line-height: 1.4; }

.origin {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr);
	gap: clamp(55px, 8vw, 130px);
	align-items: center;
	background:
		radial-gradient(circle at 80% 20%, rgba(242, 197, 111, 0.2), transparent 28%),
		var(--parchment);
}
.origin-copy { max-width: 760px; }
.origin-copy h2 { color: var(--night); }
.origin-copy > p:not(.eyebrow, .signature) { max-width: 700px; color: var(--muted); font-size: 1rem; line-height: 1.75; }
.origin-copy .origin-lead { margin-top: 30px; color: var(--ink); font-size: clamp(1.08rem, 2vw, 1.28rem); font-weight: 650; }
.signature { display: flex; align-items: center; gap: 12px; margin: 30px 0 0; }
.signature strong { color: var(--night); }
.signature span { padding-left: 12px; border-left: 1px solid var(--line); color: var(--muted); font-size: 0.82rem; }
.origin-card {
	padding: clamp(28px, 4vw, 48px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 26px;
	background:
		linear-gradient(145deg, rgba(47, 118, 91, 0.16), transparent 45%),
		var(--night);
	box-shadow: 0 32px 80px rgba(16, 34, 43, 0.22);
	color: white;
}
.origin-card-label { margin: 0; color: var(--gold-bright); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.origin-card blockquote { margin: 42px 0 46px; font-size: clamp(1.7rem, 3vw, 2.35rem); font-weight: 720; letter-spacing: -0.035em; line-height: 1.2; }
.origin-card dl { display: grid; gap: 0; margin: 0; }
.origin-card dl > div { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.origin-card dt { color: #aebeb8; font-size: 0.78rem; }
.origin-card dd { margin: 0; color: #f5f8f6; font-size: 0.82rem; font-weight: 720; text-align: right; }
.rates {
	display: grid;
	grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.55fr);
	gap: clamp(45px, 7vw, 110px);
	background:
		radial-gradient(circle at 18% 20%, rgba(47, 118, 91, 0.28), transparent 32%),
		linear-gradient(135deg, #10222b, #173640);
	color: white;
}
.rates-intro > p:last-child { max-width: 530px; color: #c8d8d1; font-size: 1.02rem; line-height: 1.7; }
.rate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; }
.rate-grid > div {
	min-height: 190px;
	padding: clamp(22px, 2.7vw, 30px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.075);
	box-shadow: 0 18px 45px rgba(2, 15, 20, 0.18);
}
.rate-grid > .featured { border-color: rgba(242, 197, 111, 0.38); background: linear-gradient(145deg, rgba(242, 197, 111, 0.18), rgba(255, 255, 255, 0.08)); }
.rate-grid dt { color: #c6d8d0; font-size: 0.76rem; font-weight: 820; letter-spacing: 0.03em; text-transform: uppercase; }
.rate-grid .rate-value { margin: 17px 0 10px; color: var(--gold-bright); font-size: clamp(2.3rem, 4vw, 3.4rem); font-weight: 820; letter-spacing: -0.05em; line-height: 0.9; }
.rate-grid .rate-note { margin: 0; color: #dbe7e2; font-size: 0.87rem; line-height: 1.5; }
.world {
	display: grid;
	grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.65fr);
	gap: clamp(45px, 7vw, 110px);
	background: var(--parchment);
}
.section-intro > p:not(.eyebrow) { max-width: 510px; color: var(--muted); font-size: 1.02rem; line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-grid article,
.policy-grid article {
	padding: clamp(24px, 3vw, 34px);
	border: 1px solid var(--line);
	border-radius: 18px;
	background: var(--paper);
	box-shadow: 0 18px 50px rgba(62, 45, 35, 0.08);
}
.feature-kicker { margin: 0; color: var(--jade); font-size: 0.78rem; font-weight: 800; }
.feature-grid h3,
.policy-grid h3,
.form-heading h3 {
	margin: 55px 0 14px;
	font-size: 1.45rem;
	font-weight: 760;
	letter-spacing: -0.035em;
	line-height: 1.15;
}
.feature-grid p:last-child,
.policy-grid p { margin: 0; color: var(--muted); line-height: 1.65; }

.registration {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(350px, 0.76fr);
	gap: clamp(50px, 8vw, 120px);
	background: #f0e3cb;
}
.registration-lead { max-width: 610px; color: #655b54; font-size: 1.05rem; line-height: 1.7; }
.invite-steps { display: grid; gap: 17px; margin: 34px 0 0; padding: 0; list-style: none; }
.invite-steps li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; }
.invite-steps li > span {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--jade);
	color: white;
	font-weight: 850;
}
.invite-steps strong { display: block; margin-top: 4px; }
.invite-steps p { margin: 4px 0 0; color: #6c6058; line-height: 1.55; }
.reassurance { margin-top: 30px; padding: 20px 22px; border-radius: 15px; background: rgba(255, 253, 249, 0.68); }
.reassurance p { margin: 6px 0 0; color: #675b53; line-height: 1.55; }

.registration-form {
	display: grid;
	align-self: start;
	gap: 10px;
	padding: clamp(25px, 4vw, 40px);
	border: 1px solid var(--line);
	border-radius: 20px;
	background: var(--paper);
	box-shadow: 0 26px 70px rgba(72, 48, 30, 0.14);
}
.form-heading { margin-bottom: 10px; }
.form-heading .eyebrow { margin-bottom: 12px; }
.form-heading h3 { margin: 0; font-size: 2rem; }
.registration-form > label:not(.acceptance) { margin-top: 8px; font-size: 0.84rem; font-weight: 780; }
.registration-form input[type="text"],
.registration-form select {
	width: 100%;
	min-height: 50px;
	padding: 12px 14px;
	border: 1px solid rgba(72, 53, 43, 0.25);
	border-radius: 12px;
	background: white;
	color: var(--ink);
	font-size: 1rem;
}
.registration-form small,
.form-footnote,
.human-check { color: #766b64; font-size: 0.79rem; line-height: 1.5; }
.acceptance { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; margin: 15px 0; color: #514842; font-size: 0.88rem; line-height: 1.55; }
.acceptance input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--jade); }
.acceptance a { color: #1f654d; font-weight: 750; }
.human-check { margin: 0; font-weight: 700; }
.registration-form button {
	min-height: 52px;
	margin-top: 10px;
	border: 0;
	border-radius: 999px;
	background: var(--night);
	box-shadow: 0 9px 22px rgba(16, 34, 43, 0.2);
	color: white;
	font-weight: 820;
	cursor: pointer;
}
.registration-form button:hover { background: var(--night-soft); }
.form-footnote { margin: 6px 0 0; text-align: center; }

.policies {
	display: grid;
	grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
	gap: clamp(45px, 7vw, 110px);
	background: #fffaf1;
}
.policy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.policy-grid h3 { margin-top: 0; }
.policy-grid a { display: inline-flex; margin-top: 24px; color: var(--jade); font-weight: 800; text-decoration: none; }
.policy-grid a:hover { text-decoration: underline; }

.support {
	background:
		radial-gradient(circle at 15% 12%, rgba(47, 118, 91, 0.32), transparent 32%),
		linear-gradient(135deg, #0d2027, #163841);
	color: white;
}
.support-copy {
	display: grid;
	grid-template-columns: minmax(280px, 0.85fr) minmax(350px, 1fr);
	column-gap: clamp(50px, 8vw, 130px);
	align-items: end;
}
.support-copy .eyebrow { grid-column: 1; }
.support-copy h2 { grid-column: 1; }
.support-copy > p:not(.eyebrow) { grid-column: 2; grid-row: 1 / 3; margin: 0 0 8px; color: #cbdad4; font-size: 1.02rem; line-height: 1.75; }
.support-status {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 13px;
	width: fit-content;
	margin-top: 44px;
	padding: 15px 18px;
	border: 1px solid rgba(242, 197, 111, 0.24);
	border-radius: 14px;
	background: rgba(242, 197, 111, 0.09);
}
.support-status > span { grid-row: 1 / 3; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 0 5px rgba(242, 197, 111, 0.11); }
.support-status strong { font-size: 0.86rem; }
.support-status small { margin-top: 2px; color: #b7c8c1; font-size: 0.75rem; }
.support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.support-grid article { padding: 28px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px; background: rgba(255, 255, 255, 0.055); }
.support-grid article > span { color: var(--gold-bright); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.08em; }
.support-grid h3 { margin: 42px 0 10px; font-size: 1.15rem; letter-spacing: -0.025em; }
.support-grid p { margin: 0; color: #b8cac3; font-size: 0.86rem; line-height: 1.65; }
.social-panel {
	display: flex;
	justify-content: space-between;
	gap: 40px;
	align-items: center;
	margin-top: 18px;
	padding: clamp(26px, 4vw, 42px);
	border-radius: 20px;
	background: var(--paper);
	color: var(--ink);
}
.social-kicker { margin: 0; color: var(--jade); font-size: 0.75rem; font-weight: 820; letter-spacing: 0.06em; text-transform: uppercase; }
.social-panel h3 { margin: 8px 0 6px; font-size: 1.45rem; letter-spacing: -0.035em; }
.social-panel p:last-child { margin: 0; color: var(--muted); font-size: 0.86rem; }
.social-links { display: flex; flex-wrap: wrap; gap: 10px; }
.social-link {
	min-width: 165px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 13px;
	background: #f7f2e9;
	color: #554c46;
}
.social-link svg { width: 24px; height: 24px; fill: var(--jade); }
.social-link > span { display: grid; }
.social-link strong { font-size: 0.82rem; }
.social-link small { margin-top: 2px; color: var(--muted); font-size: 0.7rem; }

footer {
	display: flex;
	justify-content: space-between;
	gap: 30px;
	padding: 42px clamp(22px, 7vw, 108px);
	background: var(--night);
	color: #c5d2cc;
}
footer > div { display: grid; gap: 12px; }
footer p { max-width: 680px; margin: 0; font-size: 0.8rem; }
footer nav a { color: #dce7e2; }
.legal-line { color: #879b92; }

.policy-page { min-height: 100vh; background: var(--parchment); }
.policy-main { width: min(900px, 100%); margin: 0 auto; }
.policy-main .back-link { display: inline-flex; margin-bottom: 28px; color: var(--jade); font-weight: 800; text-decoration: none; }
.policy-main h1 { max-width: 760px; color: var(--night); font-size: clamp(3rem, 7vw, 5.5rem); }
.policy-updated { margin: 18px 0 45px; color: var(--muted); }
.policy-content { padding: clamp(26px, 5vw, 52px); border: 1px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: 0 20px 55px rgba(62, 45, 35, 0.08); }
.policy-content h2 { margin: 38px 0 12px; color: var(--night); font-size: 1.65rem; letter-spacing: -0.015em; }
.policy-content h2:first-child { margin-top: 0; }
.policy-content p,
.policy-content li { color: #554c46; line-height: 1.72; }
.policy-content ul { padding-left: 1.25rem; }
.policy-content a { color: var(--jade); font-weight: 720; }
.policy-note { padding: 16px 18px; border-radius: 13px; background: var(--gold-tint); }

.result-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--night); }
.result-card { width: min(650px, 100%); padding: clamp(28px, 6vw, 52px); border-radius: 20px; background: var(--paper); box-shadow: 0 28px 90px rgba(0, 0, 0, 0.35); }
.result-card h1 { color: var(--night); font-size: clamp(2.4rem, 7vw, 4.6rem); }
.result-card > p { color: var(--muted); line-height: 1.65; }
.credential { display: grid; gap: 12px; margin: 28px 0; }
.credential p { margin: 0; }
.credential strong { display: block; margin-bottom: 6px; color: var(--ink); }
.credential code { display: block; padding: 14px; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 10px; background: #f4eee4; color: var(--ink); font-size: 1rem; }
.result-card .warning { color: #8b540e; font-weight: 800; }
.result-card .button { margin-top: 18px; }

.registration-form input:focus-visible,
.registration-form select:focus-visible,
.registration-form button:focus-visible,
a:focus-visible { outline: 3px solid #4d9c7e; outline-offset: 3px; }

@media (max-width: 1000px) {
	.rates,
	.origin,
	.world,
	.registration,
	.policies { grid-template-columns: 1fr; }
	.support-copy { grid-template-columns: 1fr; align-items: start; }
	.support-copy > p:not(.eyebrow) { grid-column: 1; grid-row: auto; margin-top: 28px; }
	.support-grid { grid-template-columns: 1fr; }
	.social-panel { align-items: flex-start; flex-direction: column; }
	.feature-grid { grid-template-columns: 1fr; }
	.feature-grid h3 { margin-top: 32px; }
}

@media (max-width: 760px) {
	.site-header { padding-inline: 16px; }
	.site-header nav { gap: 2px; }
	.site-header nav a { padding-inline: 10px; font-size: 0.8rem; }
	.nav-story,
	.nav-rates,
	.nav-community { display: none; }
	.hero { min-height: calc(100svh - 70px); padding: 58px 20px 50px; }
	.hero-art { background-position: 60% center; }
	.hero-shade { background: linear-gradient(90deg, rgba(8, 27, 34, 0.94), rgba(8, 27, 34, 0.52)), linear-gradient(0deg, rgba(16, 34, 43, 0.86), transparent 58%); }
	.server-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.server-facts li { display: grid; gap: 2px; }
	.rates,
	.origin,
	.world,
	.registration,
	.policies,
	.support,
	.policy-main { padding-inline: 20px; }
	.trust-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 20px; }
	.trust-bar li { min-height: 105px; padding: 19px 16px; }
	.origin-card { border-radius: 20px; }
	.policy-grid { grid-template-columns: 1fr; }
	footer { flex-direction: column; }
	footer nav { flex-wrap: wrap; }
}

@media (max-width: 620px) {
	.rate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rate-grid > div { min-height: 170px; }
}

@media (max-width: 420px) {
	.brand { font-size: 1.35rem; }
	.site-header nav a { padding-inline: 8px; }
	.nav-play { padding-inline: 13px !important; }
	h1 { font-size: 3.25rem; }
	.trust-bar { grid-template-columns: 1fr; }
	.social-links,
	.social-link { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after { scroll-behavior: auto !important; transition: none !important; }
}