:root{
	--bg: #0f1722;
	--bg-deep: #09111b;
	--panel: rgba(9, 17, 27, 0.72);
	--panel-strong: rgba(10, 18, 29, 0.84);
	--line: rgba(255, 255, 255, 0.14);
	--text: #f6f0e6;
	--muted: rgba(246, 240, 230, 0.72);
	--accent: #d9b36c;
	--accent-soft: rgba(217, 179, 108, 0.14);
	--shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
}

html{
	box-sizing: border-box;
	font-size: 100%;
	min-height: 100%;
	scroll-behavior: smooth;
}

*,
*::before,
*::after{
	box-sizing: inherit;
}

body{
	position: relative;
	height: 100vh;
	margin: 0;
	padding: 20px;
	overflow: hidden;
	background:
		linear-gradient(135deg, rgba(15, 23, 34, 0.92), rgba(9, 17, 27, 0.82)),
		url("../images/countdown-7-1600x900.jpg") center center / cover no-repeat;
	color: var(--text);
	font-family: "Manrope", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body::before,
body::after{
	content: "";
	position: fixed;
	z-index: 0;
	border-radius: 36px;
	pointer-events: none;
	opacity: 0.36;
	filter: blur(10px);
	background-size: cover;
	background-position: center;
	box-shadow: 0 20px 80px rgba(0, 0, 0, 0.28);
}

body::before{
	--drift-rotate: 6deg;
	--drift-rotate-mid: 3deg;
	top: 5vh;
	right: 3vw;
	width: 24vw;
	height: 32vh;
	background-image:
		linear-gradient(180deg, rgba(9, 17, 27, 0.12), rgba(9, 17, 27, 0.5)),
		url("../images/countdown-5-1600x900.jpg");
	transform: rotate(6deg);
	animation: drift 18s ease-in-out infinite;
}

body::after{
	--drift-rotate: -8deg;
	--drift-rotate-mid: -4deg;
	bottom: 2vh;
	left: 2vw;
	width: 20vw;
	height: 28vh;
	background-image:
		linear-gradient(180deg, rgba(9, 17, 27, 0.15), rgba(9, 17, 27, 0.55)),
		url("../images/countdown-3-1600x900.jpg");
	transform: rotate(-8deg);
	animation: drift 20s ease-in-out infinite reverse;
}

h1,
h2,
p{
	margin: 0;
	color: #f6f6f6;
}

a{
	color: inherit;
	text-decoration: none;
}

.page-shell{
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
	gap: 24px;
	align-items: stretch;
	height: calc(100vh - 40px);
	padding: 24px 32px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: linear-gradient(145deg, rgba(9, 17, 27, 0.64), rgba(9, 17, 27, 0.34));
	box-shadow: var(--shadow);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	overflow: hidden;
}

.page-shell::before{
	content: "";
	position: absolute;
	inset: 12px;
	border: 1px solid rgba(217, 179, 108, 0.12);
	pointer-events: none;
}

.hero-panel,
.info-panel{
	position: relative;
	display: flex;
	flex-direction: column;
}

.hero-panel{
	justify-content: center;
	padding: 8px 0;
}

.eyebrow{
	text-transform: uppercase;
	letter-spacing: 0.24em;
}

.eyebrow{
	margin-bottom: 14px;
	color: var(--accent);
	font-size: 0.7rem;
	font-weight: 700;
}

.domain-badge{
	display: inline-flex;
	align-items: center;
	width: fit-content;
	margin-bottom: 16px;
	padding: 10px 14px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.03);
	color: rgba(246, 240, 230, 0.62);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.headline-wrap{
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
}

.brand-mark img{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border: 1px solid rgba(217, 179, 108, 0.32);
	border-radius: 5px;	
	color: var(--accent);
	font-family: "Cormorant Garamond", serif;
	font-size: 1.7rem;
	font-weight: 700;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.headline-copy{
	display: flex;
	flex-direction: column;
	gap: 12px;
}

h1{
	max-width: 7.8ch;
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(3rem, 5.8vw, 4.9rem);
	font-weight: 600;
	line-height: 0.88;
	letter-spacing: -0.04em;
	color: #d9b36c;
}

.lead{
	max-width: 620px;
	margin-bottom: 0;
	font-size: clamp(0.98rem, 1.6vw, 1.18rem);
	line-height: 1.6;
	color: rgba(246, 240, 230, 0.92);
}

.countdown-block{
	position: relative;
	margin-bottom: 18px;
	padding: 18px 18px 16px;
	border: 1px solid rgba(217, 179, 108, 0.2);
	border-radius: 28px;
	background:
		linear-gradient(135deg, rgba(11, 18, 29, 0.88), rgba(11, 18, 29, 0.58)),
		url("../images/countdown-6-1600x900.jpg") center center / cover no-repeat;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 50px rgba(0, 0, 0, 0.2);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	overflow: hidden;
}

.countdown-block::before{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(217, 179, 108, 0.08), rgba(217, 179, 108, 0) 45%);
	pointer-events: none;
}

.countdown-label,
.countdown-note{
	color: var(--muted);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.countdown-label{
	position: relative;
	z-index: 1;
	margin-bottom: 12px;
}

.countdown-footer{
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
}

.countdown-note{
	margin: 0;
	letter-spacing: 0.12em;
	color: rgba(246, 240, 230, 0.62);
}

.countdown-status{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: rgba(246, 240, 230, 0.82);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.status-dot{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 0 rgba(217, 179, 108, 0.45);
	animation: pulse 2.4s infinite;
}

.tag-row{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.launch-tag{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.03);
	color: rgba(246, 240, 230, 0.82);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.launch-tag:hover{
	transform: translateY(-2px);
	border-color: rgba(217, 179, 108, 0.35);
	background: rgba(217, 179, 108, 0.12);
}

#normal-countdown{
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

#normal-countdown .time-sec{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 88px;
	min-height: 88px;
	padding: 12px 8px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

#normal-countdown .time-sec:hover{
	transform: translateY(-4px);
	border-color: rgba(217, 179, 108, 0.28);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 24px rgba(0, 0, 0, 0.18);
}

#normal-countdown .time-sec .main-time{
	margin: 0;
	color: var(--accent);
	font-family: "Cormorant Garamond", serif;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
}

#normal-countdown .time-sec span{
	margin-top: 6px;
	color: rgba(246, 240, 230, 0.72);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.visual-panel{
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	gap: 14px;
	min-height: 0;
}

.visual-card,
.stack-card{
	position: relative;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 28px;
	overflow: hidden;
	background-color: rgba(9, 17, 27, 0.52);
	box-shadow: var(--shadow);
	transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.visual-card::before,
.stack-card::before{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(5, 12, 20, 0.1), rgba(5, 12, 20, 0.72));
}

.visual-card::after,
.stack-card::after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(217, 179, 108, 0.12), transparent 45%);
	mix-blend-mode: screen;
	opacity: 0.75;
}

.visual-card:hover,
.stack-card:hover{
	transform: translateY(-4px) scale(1.01);
	border-color: rgba(217, 179, 108, 0.28);
	box-shadow: 0 28px 60px rgba(0, 0, 0, 0.28);
}

.visual-card-primary{
	min-height: 0;
	background:
		
		url("../images/countdown-2-1000x1000.jpg") center center / cover no-repeat;
	animation: breathe 18s ease-in-out infinite;
}

.visual-copy{
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 22px;
	z-index: 1;
}

.visual-label{
	margin-bottom: 10px;
	color: rgba(217, 179, 108, 0.95);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

h2{
	max-width: 8ch;
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(2rem, 3.4vw, 3.1rem);
	font-weight: 600;
	line-height: 0.98;
}

.visual-stack{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.stack-card{
	min-height: 250px;
}

.stack-card span{
	position: absolute;
	left: 16px;
	bottom: 16px;
	z-index: 1;
	padding: 8px 12px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	background: rgba(9, 17, 27, 0.42);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}


@keyframes pulse{
	0%{
		box-shadow: 0 0 0 0 rgba(217, 179, 108, 0.42);
	}
	70%{
		box-shadow: 0 0 0 12px rgba(217, 179, 108, 0);
	}
	100%{
		box-shadow: 0 0 0 0 rgba(217, 179, 108, 0);
	}
}

@keyframes drift{
	0%, 100%{
		transform: translateY(0) rotate(var(--drift-rotate, 6deg));
	}
	50%{
		transform: translateY(12px) rotate(var(--drift-rotate-mid, 3deg));
	}
}

@keyframes breathe{
	0%, 100%{
		background-position: center center;
	}
	50%{
		background-position: center 46%;
	}
}