/* main.css — Fullscreen fit (desktop + phone) */
:root{
  --bg0:#050505; --bg1:#0b0b0b; --bg2:#141414;
  --fg:#f7f7f7;
  --gold1:#fbd38d; --gold2:#f6ad55; --gold3:#f59e0b;
}
*{box-sizing:border-box}
html,body{block-size:100%;}
body{
  margin:0; color:var(--fg);
  background: radial-gradient(60% 55% at 40% 30%, var(--bg2) 0%, var(--bg1) 55%, var(--bg0) 100%);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
}
.hero{
  min-block-size:100svh; /* uses "small viewport height" for mobile toolbars */
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items:center;
  justify-items:start;
  gap: clamp(16px, 4vw, 48px);
  padding-inline: clamp(16px, 6vw, 80px);
  padding-block: clamp(12px, 4vh, 32px);
  max-inline-size: 1400px;
  margin-inline:auto;
}
@media (max-width: 980px){
  .hero{
    grid-template-columns: 1fr;
    justify-items:center;
    text-align:center;
    padding-inline: clamp(16px, 6vw, 40px);
  }
}
.h1{
  margin:0 0 clamp(8px,2vh,12px) 0;
  line-height: .95;
  font-weight: 900;
  font-size: clamp(36px, 9.5vw, 120px); /* scales to fill screen nicely */
  background: linear-gradient(100deg, #fff 0%, var(--gold1) 30%, var(--gold2) 60%, var(--gold3) 85%, #fff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.28));
}
.h2{
  margin:0 0 clamp(16px,3vh,28px) 0;
  font-size: clamp(16px, 2.6vw, 28px);
  opacity:.92;
}
.cta{ display:flex; gap:12px; flex-wrap:wrap }
.btn{
  appearance:none; border:none; cursor:pointer; border-radius:999px;
  padding: clamp(10px,1.6vh,14px) clamp(16px,2.8vw,22px);
  font-weight:700; letter-spacing:.2px;
  background: linear-gradient(90deg, var(--gold2), var(--gold3));
  color:#1a1206; box-shadow: 0 12px 30px rgba(245,158,11,.25), 0 4px 12px rgba(0,0,0,.25);
  transition: transform .15s ease, filter .2s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05) }
.btn.outline{ background:transparent; color:#f3f3f3; border:1px solid rgba(243,243,243,.22) }
.phoneWrap{ display:grid; place-items:center; }
.phone{
  inline-size: min(64vw, 700px);
  block-size:auto; object-fit:contain;
  filter: drop-shadow(0 38px 110px rgba(0,0,0,.7)) drop-shadow(0 10px 28px rgba(0,0,0,.55));
  animation: float 6s ease-in-out infinite;
}
@media (max-width: 980px){
  .phone{ inline-size: min(88vw, 640px) }
}
@media (prefers-reduced-motion: reduce){ .phone{ animation:none } }
@keyframes float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }

/* Make sure no scrollbars appear by accident on short phones */
@supports (height: 100dvh){
  .hero{ min-block-size:100dvh; }
}