:root {
  --background: #fff;
  --text: #171717;
  --primary: #155c37;
  --accent: #e5dc00;
  --icon: #fff;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; min-height: 100%; background: var(--background); }
body { font-family: Montserrat, "Century Gothic", "Avenir Next", Arial, sans-serif; }
.page { position: relative; width: 100%; min-height: 100svh; overflow: hidden; background: var(--background); }
.composition { position: absolute; width: min(100vw, 177.7778svh); aspect-ratio: 16 / 9; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.brand-logo { position: absolute; left: 38.18%; top: 31.25%; width: 23.65%; height: 9.6%; object-fit: contain; }
.countdown { position: absolute; left: 38.05%; top: 46.5%; width: 23.9%; height: 7%; display: flex; align-items: flex-start; justify-content: space-between; color: var(--primary); }
.time-unit { width: 20%; display: flex; flex-direction: column; align-items: center; }
.time-unit span { font-size: clamp(16px, 2.65vw, 49px); line-height: 1; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.time-unit small { margin-top: 13px; font-size: clamp(5px, .63vw, 12px); font-weight: 300; letter-spacing: .01em; }
.separator { color: var(--accent); font-size: clamp(16px, 2.3vw, 39px); line-height: .9; }
.coming-soon { position: absolute; left: 40%; top: 58.2%; width: 20%; margin: 0; text-align: center; color: var(--text); font-weight: 400; font-size: clamp(12px, 1.72vw, 32px); line-height: 1.2; white-space: nowrap; }
.social-links { position: absolute; left: 43.75%; top: 72.05%; width: 12.5%; display: flex; justify-content: space-between; }
.social-link { width: 20%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 22%; background: var(--accent); color: var(--icon); text-decoration: none; }
.social-link svg { display: block; width: 100%; height: 100%; color: var(--icon); fill: currentColor; }
.social-link[aria-disabled="true"] { cursor: default; }
.social-link:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
@media (orientation: portrait) {
  .composition { width: min(100vw, 56.25svh); aspect-ratio: 9 / 16; }
  .brand-logo { left: 19.08%; top: 34.28%; width: 61.84%; height: 7.95%; }
  .countdown { left: 17.4%; top: 47.1%; width: 65.2%; height: 6%; }
  .time-unit { width: 19%; }
  .time-unit span { font-size: clamp(20px, 6.6vw, 58px); }
  .time-unit small { margin-top: 14px; font-size: clamp(8px, 1.65vw, 15px); }
  .separator { font-size: clamp(20px, 4vw, 36px); }
  .coming-soon { left: 18%; top: 56.55%; width: 64%; font-size: clamp(20px, 4.45vw, 42px); }
  .social-links { left: 33.6%; top: 81.2%; width: 33.4%; }
  .social-link { width: 21%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }