/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }

/* ── Hero gradient ── */
.hero-gradient {
  background: linear-gradient(135deg, #020617 0%, #0f172a 30%, #134e4a 65%, #0d9488 100%);
}

/* ── Geometric shapes ── */
.geo {
  position: absolute;
  opacity: 0.12;
  pointer-events: none;
}
.geo-1 {
  width: 320px; height: 320px;
  background: #2dd4bf;
  border-radius: 50%;
  top: -60px; left: -80px;
}
.geo-2 {
  width: 200px; height: 200px;
  background: #5eead4;
  top: 20%; right: 5%;
  transform: rotate(45deg);
  border-radius: 24px;
  opacity: 0.08;
}
.geo-3 {
  width: 140px; height: 140px;
  background: #99f6e4;
  border-radius: 50%;
  bottom: 15%; left: 15%;
  opacity: 0.1;
}
.geo-4 {
  width: 80px; height: 80px;
  background: #14b8a6;
  top: 40%; left: 5%;
  transform: rotate(30deg);
  border-radius: 16px;
  opacity: 0.15;
}
.geo-5 {
  width: 240px; height: 240px;
  background: #0f766e;
  border-radius: 50%;
  bottom: -40px; right: 10%;
  opacity: 0.08;
}
.geo-6 {
  width: 100px; height: 100px;
  background: #2dd4bf;
  top: 15%; right: 20%;
  transform: rotate(60deg);
  border-radius: 20px;
  opacity: 0.06;
}

/* ── Hero photos ── */
.hero-photo {
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
  border: 3px solid rgba(255,255,255,0.1);
}
.hero-photo-1 {
  transform: rotate(-4deg);
}
.hero-photo-2 {
  transform: rotate(3deg);
}

/* ── Hero scrim ── */
.hero-scrim {
  background: radial-gradient(ellipse at center, rgba(2,6,23,0.3) 0%, rgba(2,6,23,0.7) 100%);
}

/* ── Scroll indicator ── */
.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.scroll-dot {
  width: 4px;
  height: 20px;
  background: rgba(255,255,255,0.4);
  border-radius: 4px;
  animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(8px); opacity: 1; }
}

/* ── Marquee ── */
.marquee-track {
  animation: marquee 30s linear infinite;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Scroll reveal ── */
.scroll-reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
  }
  .scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Navbar scroll state ── */
#navbar.scrolled {
  background: rgba(2,6,23,0.9);
  backdrop-blur-md;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* ── CTA shapes ── */
.cta-shape {
  position: absolute;
  pointer-events: none;
}
.cta-shape-1 {
  width: 400px; height: 400px;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
  top: -150px; left: -100px;
}
.cta-shape-2 {
  width: 250px; height: 250px;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
  bottom: -80px; right: 10%;
}
.cta-shape-3 {
  width: 120px; height: 120px;
  background: rgba(255,255,255,0.06);
  border-radius: 24px;
  top: 20%; right: 5%;
  transform: rotate(45deg);
}

/* ── Mobile menu transition ── */
#mobile-menu {
  animation: slideDown 0.25s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Form ── */
.form-input {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #1e293b;
  background: #f8fafc;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.form-input:focus {
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.1);
  background: #fff;
}
.form-input::placeholder { color: #94a3b8; }
.form-textarea {
  resize: vertical;
  min-height: 100px;
}
.form-success {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  background: #f0fdfa;
  border: 1.5px solid #99f6e4;
  border-radius: 12px;
  color: #0f766e;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
}
.form-success.show {
  display: flex;
}