:root{
  --bg:#0b1020; --text:#e5e7eb; --accent:#FDE047; --accent2:#f59e0b; --ring:rgba(253,224,71,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(253,224,71,.08), transparent 60%),
              radial-gradient(900px 500px at 0% 10%, rgba(59,130,246,.08), transparent 60%), var(--bg);
  color:var(--text);
}
.container{width:min(1120px,92%); margin:0 auto}
.hero{min-height:100dvh; display:flex; align-items:center; justify-content:center; text-align:center; position:relative; overflow:hidden; padding:40px 0}
.wrap{max-width:900px}
h1{font-size:clamp(32px,4.5vw,64px); line-height:1.1; margin:0 0 36px; font-weight:800; letter-spacing:.02em}
h1 .brand{color:var(--accent)}
.btn{display:inline-block; appearance:none; border:none; cursor:pointer; font-weight:800; padding:18px 34px;
     border-radius:18px; background:linear-gradient(180deg,var(--accent),var(--accent2)); color:#111;
     box-shadow:0 10px 28px var(--ring); text-decoration:none; font-size:clamp(16px,1.4vw,20px)}
.btn:focus-visible{outline:3px solid var(--ring); outline-offset:3px}
.shape{position:absolute; width:88px; height:88px; opacity:.75; filter:drop-shadow(0 8px 24px rgba(0,0,0,.45)); animation:float var(--dur) ease-in-out infinite}
.shape.s1{top:10%; left:-10px; --dur:7s; transform:rotate(-8deg)}
.shape.s2{top:55%; left:15%; --dur:9s; transform:rotate(18deg)}
.shape.s3{top:5%; right:6%; --dur:6s; transform:rotate(12deg)}
.shape.s4{bottom:4%; right:20%; --dur:8.4s; transform:rotate(-16deg)}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))} 50%{transform:translateY(-14px) rotate(calc(var(--rot,0deg) + 6deg))}}
@media (max-width:640px){.wrap{padding:0 8px} h1{font-size:36px; line-height:1.2}}


/* === Fix: keep floating coins behind text and hide on mobile === */
.hero, .hero .wrap, .hero h1, .hero .btn {
  position: relative;
  z-index: 2;
}

.shape {
  z-index: 0 !important;      /* put under text */
  pointer-events: none;        /* do not intercept taps */
}

/* On small screens, hide decorative coins entirely */
@media (max-width: 640px) {
  .shape { display: none !important; }
}


/* === Typography adjustments === */
.hero h1 {
  font-size: clamp(28px, 3.5vw, 52px);
  margin-bottom: 20px;
}

.hero h2 {
  font-size: clamp(22px, 3vw, 38px);
  margin-bottom: 16px;
  font-weight: 700;
  color: var(--accent);
}

.hero p {
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.5;
  margin-bottom: 32px;
}