*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --orange: #CD6632;
  --grey:   #888888;
  --dark:   #0a0a0a;
  --light:  #e8e8e8;
}
html, body { width: 100%; height: 100%; }
body {
  background-color: var(--dark);
  color: var(--light);
  font-family: 'Outfit', sans-serif;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100vh; overflow: hidden; position: relative;
}
body::before {
  content: '';
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(205,102,50,0.08) 0%, transparent 70%);
  pointer-events: none;
  animation: glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,100% { opacity:0.6; transform:translate(-50%,-60%) scale(1); }
  50%      { opacity:1;   transform:translate(-50%,-60%) scale(1.15); }
}

.bg-path {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none; opacity: 0.04;
}

.container {
  display: flex; flex-direction: column;
  align-items: center; gap: 2.5rem;
  z-index: 10; text-align: center; padding: 2rem;
}

.logo-wrap {
  opacity: 0;
  animation: logoReveal 1s cubic-bezier(0.22,1,0.36,1) 0.5s forwards;
}
.logo-wrap img {
  width: clamp(280px,50vw,500px); height: auto;
  animation: logoFloat 5s ease-in-out 1.5s infinite;
  filter: drop-shadow(0 0 30px rgba(205,102,50,0.25));
}
@keyframes logoReveal {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes logoFloat {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-12px); }
}

.divider {
  width: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  animation: dividerGrow 1.2s cubic-bezier(0.22,1,0.36,1) 1.2s forwards;
}
@keyframes dividerGrow { to { width: clamp(200px,40vw,400px); } }

.headline {
  opacity: 0;
  animation: fadeUp 0.9s cubic-bezier(0.22,1,0.36,1) 1.5s forwards;
}
.headline h1 {
  font-size: clamp(2.8rem,8vw,5.5rem);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1;
}
.headline h1 span { color: var(--orange); }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

.road-anim {
  opacity: 0;
  animation: fadeUp 0.9s ease 2s forwards;
  width: clamp(200px,40vw,360px);
}
.road-anim img {
  width: 100%; height: auto; display: block;
}

.contact {
  opacity: 0;
  animation: fadeUp 0.9s ease 2.4s forwards;
  font-size: clamp(0.78rem,2vw,0.9rem);
  color: var(--grey); font-weight: 300; letter-spacing: 0.08em;
}
.contact a {
  color: var(--orange); text-decoration: none; transition: opacity 0.2s;
}
.contact a:hover { opacity: 0.7; }

.pin-icon {
  position: fixed; bottom: -20px; left: 50%;
  transform: translateX(-50%);
  opacity: 0.03; width: 300px; pointer-events: none;
}