:root {
  --yellow: #ffd400;
  --muted: rgba(255, 255, 255, .50);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }

body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
}

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 650px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 56%, rgba(255, 212, 0, .11) 0%, rgba(255, 212, 0, .045) 24%, transparent 49%),
    radial-gradient(ellipse at 50% 82%, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .035) 27%, transparent 58%),
    #000;
}

.logo {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: clamp(2px, .8vh, 10px);
  width: clamp(430px, 34vw, 560px);
  max-width: 82vw;
  transform: translateX(-50%);
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, .92));
}

.coming-text {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 52.5%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding-left: clamp(.75rem, 2.5vw, 2rem);
  white-space: nowrap;
  font-size: clamp(1.55rem, 2.55vw, 2.55rem);
  line-height: 1;
  letter-spacing: clamp(.9rem, 2.65vw, 2.15rem);
  font-weight: 900;
  color: rgba(255, 255, 255, .38);
  text-shadow: 0 1px 0 rgba(255,255,255,.20), 0 13px 24px rgba(255,255,255,.08);
}

.tyre-stage {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(58px, 9.1vh, 76px);
  width: clamp(540px, 43vw, 680px);
  height: clamp(150px, 15.9vw, 218px);
  transform: translateX(-50%);
  overflow: hidden;
}

.tyre {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: auto;
  max-width: none;
  transform: translateX(-50%);
  display: block;
  filter: contrast(1.05) brightness(1.02) drop-shadow(0 0 34px rgba(255,255,255,.10));
}

.footer {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: clamp(22px, 4.3vh, 42px);
  transform: translateX(-50%);
  width: min(980px, calc(100vw - 30px));
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px clamp(17px, 2.2vw, 30px);
  font-size: clamp(.57rem, .68vw, .74rem);
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}

.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: var(--yellow); }

@media (max-width: 768px) {
  body { overflow-y: auto; }
  .hero { min-height: 720px; }
  .logo { top: 35px; width: min(92vw, 440px); }
  .coming-text { top: 50%; letter-spacing: .55rem; padding-left: .55rem; font-size: 1.25rem; }
  .tyre-stage { width: 88vw; height: 160px; bottom: 88px; }
  .footer { bottom: 20px; line-height: 1.55; }
}

@media (max-height: 760px) and (min-width: 769px) {
  .hero { min-height: 600px; }
  .logo { top: 0; width: clamp(390px, 33vw, 520px); }
  .coming-text { top: 52%; }
  .tyre-stage { width: clamp(500px, 42vw, 620px); height: clamp(140px, 15vw, 190px); bottom: 60px; }
  .footer { bottom: 25px; }
}