/* ========== Star Loterias — Home (index.css) ==========
   Mobile-first, sem dependências externas, focado em responsividade.
   Se seu app.css já define variáveis, usamos; senão, caímos nos fallbacks. */

:root{
  --bg:        #0b1020;
  --panel:     #121833;
  --panel-2:   #0f1530;
  --border:    #27314f;
  --muted:     #98a2b3;
  --text:      #e6ecff;
  --primary:   #6ea8ff;
  --accent:    #22c55e;
  --danger:    #ef4444;
  --radius:    16px;
  --shadow:    0 10px 30px rgba(0,0,0,.25);
}

/* Reseta pequenas diferenças */
*{box-sizing:border-box}
body{background:var(--bg); color:var(--text)}

/* Utilitários e blocos genéricos */
.section{max-width:1120px; margin:0 auto; padding:40px 20px}
.section-tight{padding-top:24px; padding-bottom:24px}
.section-title{text-align:center; font-size:1.6rem; margin:0 0 6px}
.section-sub{text-align:center; color:var(--muted); margin:0 0 12px}
.text-center{text-align:center}

.card{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}

/* GRID responsivo elegante */
.grid{display:grid; gap:16px}
.grid-3{grid-template-columns:1fr}
@media (min-width: 880px){ .grid-3{grid-template-columns:repeat(3,1fr)} }

/* BOTÕES — aproveita classes do seu app.css; aqui só reforço CTA */
.btn-cta{font-weight:800; padding:.9rem 1.2rem;}

/* ===== HERO estrelado ===== */
.hero{
  position:relative;
  padding:84px 20px 46px;
  overflow:hidden;
  border-bottom:1px solid var(--border);
}
.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(1000px 400px at 80% -20%, rgba(110,168,255,.25), transparent 55%),
    radial-gradient(800px 300px at 15% -10%, rgba(34,197,94,.18), transparent 60%),
    linear-gradient(180deg, rgba(10,16,32,.2), rgba(10,16,32,0));
  pointer-events:none;
}
/* estrelas (leve e performático) */
.hero__bg::before, .hero__bg::after{
  content:""; position:absolute; inset:-50%;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.7px 1.7px at 70% 40%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.4px 1.4px at 40% 70%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.2px 1.2px at 85% 20%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.2px 1.2px at 10% 80%, rgba(255,255,255,.6), transparent 60%);
  opacity:.35; filter:drop-shadow(0 0 8px rgba(255,255,255,.25));
  animation: drift 28s linear infinite;
}
.hero__bg::after{ animation-duration: 38s; opacity:.25; }
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2%,1%,0) scale(1.02)}
  100%{transform:translate3d(0,0,0) scale(1)}
}

.hero__inner{max-width:1120px; margin:0 auto; text-align:center; position:relative;}
.hero__kicker{display:inline-flex; margin-bottom:12px}
.hero__title{font-size:clamp(1.9rem, 2.8vw + 1rem, 3.1rem); line-height:1.1; margin:0 0 10px}
.fx-grad{background: linear-gradient(90deg, #7bd3ff, #5b7cfa 45%, #22c55e); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero__sub{max-width:780px; margin:0 auto 16px; color:var(--muted)}
.hero__cta{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:12px}
.hero__trust{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px; color:#c0c7d6}
.hero__trust span{background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:999px; padding:.4rem .6rem}

/* ===== Features ===== */
.feature{text-align:left}
.feature__icon{font-size:1.5rem; margin-bottom:8px}

/* ===== Chips de loterias ===== */
.chips{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  background: rgba(255,255,255,.04);
  border:1px solid var(--border);
  padding:.5rem .7rem; border-radius:999px; text-decoration:none; color:var(--text);
}
.chip:hover{transform:translateY(-1px); transition:.15s ease}

/* ===== Steps ===== */
.steps__grid{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width: 880px){ .steps__grid{grid-template-columns:repeat(3,1fr)} }
.step{position:relative; padding-left:54px}
.step__num{
  position:absolute; left:14px; top:16px;
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--primary); color:#fff; font-weight:800;
}

/* ===== Pricing ===== */
.pricing{display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));}
.price__head h3{margin:0 0 4px}
.price__value{margin:8px 0 12px}
.price__money{font-size:1.6rem; font-weight:900}
.price__per{color:var(--muted); margin-left:6px}
.price__cta{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.price__bullets{list-style:none; padding:0; margin:12px 0 0; color:var(--muted)}
.price__bullets li{margin:6px 0}

/* ===== Depoimentos ===== */
.quote p{margin:0 0 8px}
.quote footer{color:var(--muted)}

/* ===== CTA final ===== */
.cta{padding-top:24px; padding-bottom:56px}
.cta__box{text-align:center}