/* ===== Resumo: base mínima + hero link-in-bio em desktop e mobile ===== */
:root{
  --text:#f4f7ff;
  --glass-bg: color-mix(in srgb, #0b0f16 36%, transparent);
  --glass-border: #ffffff55;
  --blue-1:#0400ff;
  --blue-2:#4ce3f7;
  --maxw: 540px;
}

*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0;
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background:#0b0f16;
}

/* ===== HERO ===== */
.hero{
  position:relative;
  height:100vh; min-height:100vh; overflow:hidden;
}
@supports (height: 100dvh){
  .hero{ height:100dvh; min-height:100dvh; }
}

/* BG recebe as camadas do slideshow via JS */
.hero__bg{
  position:absolute; inset:0; overflow:hidden;
  /* Fallback caso JS não rode */
  background:#0b0f16 center/cover no-repeat;
  filter:saturate(112%) brightness(.98);
}
.hero__bg img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06);
  transition: opacity .7s ease, transform 6s linear;
  /* blur global (mesmo visual do mobile no desktop) */
  filter: blur(3px) saturate(112%) brightness(.98);
}

/* Conteúdo centralizado (vertical + horizontal) */
.hero__overlay{
  position:relative; z-index:2; height:100%;
  display:grid; place-items:center; padding:20px;
}
.hero__content{
  display:grid; gap:12px; text-align:center; width:100%;
  max-width:var(--maxw);
}

/* Tipografia */
.eyebrow{
  font-size:13px; letter-spacing:.20em; opacity:.95;
}
.title{
  margin:0;
  font-weight:900;
  line-height:1.03;
  letter-spacing:-.02em;
  font-size: clamp(34px, 10.5vw, 48px);
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* Botões */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:58px; width:100%;
  font-weight:800; font-size:1rem; letter-spacing:.2px;
  border-radius:999px; border:1px solid transparent;
  text-decoration:none; color:#fff;
}
.btn--glass{
  border-color:var(--glass-border);
  background:var(--glass-bg);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 8px 24px rgba(0,0,0,.24);
}
.actions{ display:grid; grid-template-columns:1fr; gap:12px; }

.btn--primary{
  background-image: linear-gradient(30deg, var(--blue-1), var(--blue-2));
  transition: background-size .25s ease, transform .15s ease, box-shadow .15s ease;
  background-size: 100% auto;
  border: none;
}
.btn--primary:hover{
  background-size: 200% auto;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(4,0,255,.28);
}

/* Em aparelhos um pouco mais largos na vertical, pode ficar 2 colunas */
@media (min-width: 400px) and (orientation: portrait){
  .actions{ grid-template-columns: 1fr 1fr; }
}