/* ---- base ---- */
:root{
  --bg-desktop:#fffbe8;
  --bg-mobile:#ffffef;
  --text:#102016;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg-desktop);
  color: var(--text);
}

.wrap{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2rem;
  padding:2rem 1rem 3rem;
}

.hero-img{
  width:min(1100px, 92vw);
  height:auto;
  display:block;
  margin-inline:auto;
  user-select:none;
}

/* buttons */
.btns{
  width:min(1100px, 92vw);
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:1rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.95rem 1.2rem;
  border-radius:14px;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.2px;
  border:2px solid rgba(0,0,0,.06);
  transition: transform .12s ease, filter .2s ease, opacity .2s ease;
  color:#fff;
}

/* brand-ish colors (semplici e leggibili) */
.insta{
  background: linear-gradient(135deg,#f58529,#feda77,#dd2a7b,#8134af,#515bd4);
}
.kick{  background:#05ce78; color:#072a1b; }
.tiktok{ background:#000; }

/* effetti */
.btn:hover{ transform: translateY(-1px); filter:brightness(1.05); }
.btn:active{ transform: translateY(0); }

/* ---- mobile portrait ---- */
@media (max-width:767px) and (orientation: portrait){
  body{ background: var(--bg-mobile); }
  .btns{
    grid-template-columns: 1fr;
  }
  .btn{
    padding:1rem 1.2rem;
    font-size:1.05rem;
  }
}

/* opzionale: mobile landscape (tablet/phone orizzontale) mantiene layout a 3 */