:root {
	--oc-coming-blue: #112d67;
	--oc-coming-deep: #061a3d;
	--oc-coming-orange: #dc851c;
	--oc-coming-gold: #f0b642;
	--oc-coming-green: #08733c;
	--oc-coming-red: #c94820;
	--oc-coming-text: #f7f8fb;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--oc-coming-deep); }
body.oc-coming-soon-page {
	min-height: 100vh;
	margin: 0;
	color: var(--oc-coming-text);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background:
		linear-gradient(115deg, rgba(6,26,61,.95), rgba(17,45,103,.87)),
		var(--oc-coming-bg-image, none) center/cover no-repeat fixed,
		radial-gradient(circle at 18% 10%, rgba(220,133,28,.22), transparent 28%),
		radial-gradient(circle at 82% 85%, rgba(8,115,60,.22), transparent 30%),
		#061a3d;
}

.oc-coming-shell {
	position: relative;
	isolation: isolate;
	min-height: 100vh;
	display: grid;
	place-items: center;
	overflow: hidden;
	padding: 42px 20px;
}

.oc-coming-shell::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -3;
	background-image:
		linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
	background-size: 54px 54px;
	mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.oc-coming-orbit {
	position: absolute;
	z-index: -2;
	border-radius: 50%;
	border: 44px solid rgba(255,255,255,.035);
	box-shadow:
		0 0 0 44px rgba(220,133,28,.045),
		0 0 0 88px rgba(8,115,60,.035),
		0 0 0 132px rgba(201,72,32,.025);
}
.oc-coming-orbit--one { width: 430px; height: 430px; right: -180px; top: -130px; }
.oc-coming-orbit--two { width: 360px; height: 360px; left: -170px; bottom: -160px; transform: rotate(28deg); }

.oc-coming-card {
	width: min(920px, 100%);
	padding: clamp(34px, 6vw, 72px);
	border: 1px solid rgba(255,255,255,.13);
	border-radius: 30px;
	text-align: center;
	background: rgba(5,22,52,.72);
	box-shadow: 0 40px 90px rgba(0,0,0,.34);
	backdrop-filter: blur(18px);
}

.oc-coming-brand img {
	display: block;
	width: min(330px, 76vw);
	height: auto;
	margin: 0 auto 35px;
	filter: drop-shadow(0 12px 25px rgba(0,0,0,.24));
}

.oc-coming-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	color: var(--oc-coming-gold);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .18em;
	text-transform: uppercase;
}
.oc-coming-eyebrow::before,
.oc-coming-eyebrow::after { content: ""; width: 28px; height: 2px; background: var(--oc-coming-orange); }

.oc-coming-card h1 {
	max-width: 760px;
	margin: 0 auto;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(43px, 7vw, 78px);
	line-height: .98;
	letter-spacing: -.045em;
	text-wrap: balance;
}

.oc-coming-intro {
	max-width: 690px;
	margin: 24px auto 0;
	color: rgba(255,255,255,.76);
	font-size: clamp(16px, 2.2vw, 20px);
	line-height: 1.65;
}

.oc-countdown {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	max-width: 720px;
	margin: 38px auto 0;
}

.oc-countdown-unit {
	min-height: 130px;
	display: grid;
	place-content: center;
	gap: 7px;
	padding: 20px 12px;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 18px;
	background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
}
.oc-countdown-unit strong {
	color: #fff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(38px, 6vw, 62px);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.oc-countdown-unit span {
	color: var(--oc-coming-gold);
	font-size: 11px;
	font-weight: 850;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.oc-countdown.is-finished { display: block; }
.oc-countdown-finished,
.oc-coming-status {
	max-width: 620px;
	margin: 38px auto 0;
	padding: 20px 24px;
	border: 1px solid rgba(240,182,66,.28);
	border-radius: 16px;
	color: #fff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(24px, 4vw, 38px);
	background: rgba(220,133,28,.12);
}

.oc-launch-date {
	margin: 16px 0 0;
	color: rgba(255,255,255,.58);
	font-size: 13px;
}

.oc-coming-note {
	max-width: 640px;
	margin: 26px auto 0;
	color: rgba(255,255,255,.68);
	line-height: 1.6;
}

.oc-coming-socials {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 24px;
}
.oc-coming-socials:empty { display: none; }
.oc-coming-socials a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 15px;
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 999px;
	color: #fff;
	font-size: 13px;
	font-weight: 750;
	text-decoration: none;
	background: rgba(255,255,255,.055);
	transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.oc-coming-socials a:hover,
.oc-coming-socials a:focus-visible {
	border-color: var(--oc-coming-orange);
	background: rgba(220,133,28,.16);
	transform: translateY(-2px);
}
.oc-coming-socials svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.oc-coming-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 34px;
	padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,.10);
	color: rgba(255,255,255,.45);
	font-size: 12px;
}

@media (max-width: 680px) {
	.oc-coming-shell { padding: 16px; }
	.oc-coming-card { padding: 32px 18px; border-radius: 22px; }
	.oc-coming-brand img { margin-bottom: 26px; }
	.oc-countdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.oc-countdown-unit { min-height: 108px; }
	.oc-coming-foot span[aria-hidden="true"] { display: none; }
	.oc-coming-foot { display: grid; }
}

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