:root {
  --green-dark: #1a4a2e;
  --green-mid: #2d7a4f;
  --green-light: #74c69d;
  --white: #f8f9f5;
  --black: #1a1a1a;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--green-dark);
  color: var(--white);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  position: relative;
}

/* Golf course SVG background */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700' preserveAspectRatio='xMidYMid slice'%3E%3C!-- Sky --%3E%3Crect width='1200' height='700' fill='%2387CEAB'/%3E%3C!-- Distant hills --%3E%3Cellipse cx='200' cy='420' rx='320' ry='120' fill='%232d6e42'/%3E%3Cellipse cx='700' cy='440' rx='400' ry='110' fill='%23358048'/%3E%3Cellipse cx='1100' cy='430' rx='300' ry='100' fill='%232d6e42'/%3E%3C!-- Fairway ground --%3E%3Cellipse cx='600' cy='700' rx='750' ry='220' fill='%2340a060'/%3E%3C!-- Fairway highlight --%3E%3Cellipse cx='500' cy='660' rx='380' ry='80' fill='%2348b86d'/%3E%3C!-- Sand bunker --%3E%3Cellipse cx='820' cy='590' rx='80' ry='28' fill='%23e8d9a0'/%3E%3C!-- Rough left --%3E%3Cellipse cx='80' cy='630' rx='160' ry='60' fill='%23357a46'/%3E%3C!-- Rough right --%3E%3Cellipse cx='1140' cy='620' rx='180' ry='70' fill='%23357a46'/%3E%3C!-- Trees left --%3E%3Ccircle cx='90' cy='470' r='55' fill='%231e5c30'/%3E%3Ccircle cx='145' cy='490' r='45' fill='%23246635'/%3E%3Ccircle cx='40' cy='500' r='38' fill='%231e5c30'/%3E%3C!-- Trees right --%3E%3Ccircle cx='1110' cy='460' r='60' fill='%231e5c30'/%3E%3Ccircle cx='1060' cy='480' r='48' fill='%23246635'/%3E%3Ccircle cx='1160' cy='485' r='42' fill='%231e5c30'/%3E%3C!-- Green (putting surface) --%3E%3Cellipse cx='600' cy='530' rx='110' ry='45' fill='%2355c97a'/%3E%3C!-- Flag pole --%3E%3Cline x1='600' y1='490' x2='600' y2='390' stroke='%23c0c0c0' stroke-width='3'/%3E%3C!-- Flag --%3E%3Cpolygon points='600,390 638,405 600,420' fill='%23e63030'/%3E%3C!-- Hole shadow --%3E%3Cellipse cx='601' cy='492' rx='9' ry='4' fill='%23111' opacity='0.5'/%3E%3C!-- Water hazard --%3E%3Cellipse cx='350' cy='570' rx='95' ry='30' fill='%234a90b8' opacity='0.7'/%3E%3Cellipse cx='350' cy='568' rx='90' ry='24' fill='%2362aad4' opacity='0.5'/%3E%3C!-- Clouds --%3E%3Cellipse cx='250' cy='120' rx='100' ry='35' fill='white' opacity='0.5'/%3E%3Cellipse cx='310' cy='108' rx='70' ry='28' fill='white' opacity='0.5'/%3E%3Cellipse cx='190' cy='115' rx='65' ry='25' fill='white' opacity='0.45'/%3E%3Cellipse cx='900' cy='90' rx='110' ry='32' fill='white' opacity='0.45'/%3E%3Cellipse cx='970' cy='78' rx='75' ry='26' fill='white' opacity='0.45'/%3E%3Cellipse cx='840' cy='85' rx='60' ry='22' fill='white' opacity='0.4'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center bottom;
  opacity: 0.18;
  z-index: 0;
}

/* Subtle gradient overlay to preserve readability */
body::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(26, 74, 46, 0.55) 0%, rgba(26, 74, 46, 0.85) 100%);
  z-index: 1;
}

.container {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
  max-width: 640px;
}

.logo {
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--white);
  line-height: 1;
}

.logo span {
  color: var(--green-light);
}

.divider {
  width: 48px;
  height: 3px;
  background: var(--green-light);
  margin: 1.75rem auto;
  border-radius: 2px;
}

.tagline {
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(248, 249, 245, 0.75);
  margin-bottom: 1rem;
}

footer {
  position: fixed;
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 2;
}

footer a {
  font-size: 0.78rem;
  color: rgba(212, 160, 23, 0.65);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: color 0.2s;
}

footer a:hover {
  color: rgba(212, 160, 23, 1);
}

@media (max-width: 768px) {
  footer a {
    color: rgba(212, 160, 23, 1);
  }
}

.coming-soon {
  display: inline-block;
  font-size: clamp(0.7rem, 2vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green-light);
  border: 1px solid rgba(76, 175, 120, 0.4);
  padding: 0.45em 1.1em;
  border-radius: 2em;
  margin-top: 1.5rem;
}