/* ================= BASE ================= */

html, body {
  height: 100%;
}

body{
  margin:0;
  overflow-x:hidden;
  background:#07080b;
  color:#e9e9ea;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ================= BACKGROUND ================= */

.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
  background:
    radial-gradient(1200px 900px at 20% 18%, rgba(255, 187, 74, 0.10), transparent 55%),
    radial-gradient(1000px 800px at 78% 25%, rgba(80, 140, 255, 0.08), transparent 58%),
    radial-gradient(900px 700px at 45% 70%, rgba(110, 180, 140, 0.06), transparent 60%),
    linear-gradient(180deg, #06070a 0%, #07080b 55%, #05060a 100%);
}

.bg::before{
  content:"";
  position:absolute;
  inset:-12%;
  background:
    radial-gradient(900px 700px at 18% 42%, rgba(80,110,70,0.10), transparent 60%),
    radial-gradient(800px 600px at 40% 62%, rgba(55,85,65,0.10), transparent 62%),
    radial-gradient(900px 700px at 72% 58%, rgba(40,75,60,0.10), transparent 65%),
    radial-gradient(700px 520px at 55% 40%, rgba(20,30,25,0.55), transparent 70%),
    radial-gradient(1200px 900px at 50% 45%, rgba(255,255,255,0.035), transparent 62%);
  filter: blur(18px) saturate(110%);
  opacity:1;
  transform: translateZ(0);
}

.bg::after{
  content:"";
  position:absolute;
  inset:-10%;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,210,120,0.28) 0 1px, transparent 2px),
    radial-gradient(circle at 32% 68%, rgba(255,200,120,0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 40%, rgba(255,215,140,0.22) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 72%, rgba(255,200,110,0.16) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 28%, rgba(255,225,150,0.20) 0 1px, transparent 2px);
  opacity:0.35;
  filter: blur(0.3px);
  animation: bgSparkle 18s ease-in-out infinite;
  transform: translateZ(0);
}

@keyframes bgSparkle{
  0%{ transform: translate3d(0,0,0); opacity:0.28; }
  50%{ transform: translate3d(-1.2%,0.8%,0); opacity:0.40; }
  100%{ transform: translate3d(0,0,0); opacity:0.30; }
}

@media (prefers-reduced-motion: reduce){
  .bg::after{ animation:none; }
}

/* ================= HERO ================= */

.hero{
  min-height: calc(100vh - 94px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:16px 0 10px;
  gap:18px;
  text-align:center;
}

.hut{
  width:min(1180px, 96vw);
  height:min(70vh, 740px);
  object-fit:contain;
  display:block;
  pointer-events:none;
  animation: float 6.5s ease-in-out infinite;
}

@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

.cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  width:100%;
}

/* ================= BUTTON ================= */

.btn{
  appearance:none;
  border:1px solid rgba(214,178,106,.55);
  background:rgba(0,0,0,.18);
  color:#fff;
  font-weight:750;
  letter-spacing:.2px;
  padding:14px 26px;
  border-radius:999px;
  min-width:280px;
  cursor:pointer;
  position:relative;
}

/* ================= MOBILE CLEAN FIX ================= */

@media (max-width: 720px){

  .hero{
    min-height: calc(100dvh - 94px);
    padding-bottom: 24px;
  }

  .hut{
    height: 42vh;
    max-height: 340px;
  }

  .cta{
    transform: translateY(-18px);
  }

  .btn{
    min-width: 240px;
    padding: 12px 22px;
  }

}