:root{
  --bg:#000;
  --fg:#fff;
  --muted:#bdbdbd;
  --accent:#e0d4ff;
  --card:#111;
  --primary:#ffffff;
  --btn:#8a7ab8;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;min-height:100%}
.container{max-width:980px;margin:0 auto;padding:20px}
.header{display:flex;align-items:center;justify-content:space-between;gap:12px}
h1{font-size:2rem;margin:0}
.card{background:var(--card);border:1px solid #222;border-radius:16px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.35);margin:16px 0}
.grid{display:grid;gap:16px}
@media(min-width:800px){.grid{grid-template-columns:repeat(3,1fr)}}
.small{font-size:.92rem;color:var(--muted)}
label{display:block;margin:10px 0 6px}
input,select,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #333;background:#0c0c0c;color:#fff;font-size:1rem}
button{padding:12px 16px;border-radius:12px;border:0;background:var(--btn);color:var(--fg);font-weight:600;cursor:pointer}
button:disabled{opacity:.6;cursor:not-allowed}
.hero{padding:26px 20px;background:linear-gradient(180deg,#0d0d0d, #030303);border-radius:18px;border:1px solid #1b1b1b}
.hero h2{margin:0 0 8px}
.footer{color:#888;padding:40px 0;text-align:center;font-size:.9rem}
.tarotistas{display:flex;gap:12px;flex-wrap:wrap}
.tarotista{flex:1 1 180px;background:#0d0d0d;border:1px solid #222;border-radius:16px;padding:12px;display:flex;gap:12px;align-items:center}
.tarotista img{width:64px;height:64px;border-radius:12px;object-fit:cover}
.badge{display:inline-block;padding:4px 8px;border:1px solid #2a2a2a;border-radius:999px;font-size:.8rem;color:#cfcfcf}
.price{font-weight:700}
.link{color:#b9a5ff;text-decoration:none}
hr{border:0;border-top:1px solid #222;margin:24px 0}
textarea{min-height:140px}

/* Starry background */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(2px 2px at 20% 30%, #ffffff88 50%, transparent 51%) repeat,
    radial-gradient(1.5px 1.5px at 70% 60%, #ffffff66 50%, transparent 51%) repeat,
    radial-gradient(1px 1px at 40% 80%, #ffffff55 50%, transparent 51%) repeat;
  background-size: 300px 300px, 240px 240px, 200px 200px;
  opacity:.5;
}

/* Hero */
.hero--big{
  padding:48px 28px;
  background:linear-gradient(180deg, rgba(20,20,32,.8), rgba(6,6,10,.9));
  border:1px solid #23232f;
  border-radius:20px;
}
.hero h1{
  font-size:2.2rem; margin:0 0 10px;
}
.hero p.lead{
  font-size:1.05rem; color:#d9d9ff; margin:0 0 16px;
}
.btns{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
.btn{display:inline-block; padding:12px 16px; border-radius:12px; background:var(--btn); color:#fff; font-weight:700; text-decoration:none}
.btn.secondary{background:#1e1e2e; border:1px solid #2a2a3a}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px}
.kpi{background:#0f0f19; border:1px solid #23233a; border-radius:14px; padding:12px; text-align:center}
.kpi strong{font-size:1.2rem; display:block}

/* How it works */
.steps{display:grid; gap:12px}
@media(min-width:800px){ .steps{ grid-template-columns:repeat(3,1fr)} }
.step{background:#0e0e16; border:1px solid #222235; border-radius:16px; padding:16px}
.step h4{margin:0 0 6px}

/* Services block */
.services .card h3{display:flex; align-items:baseline; gap:8px; justify-content:space-between}
.actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.badge.free{background:#0f3410; color:#baffc2; border-color:#1f4a21}

.testi{font-style:italic; color:#cfcfec}

/* Twinkling star layers */
@keyframes twinkleA { 0%,100%{opacity:.35} 50%{opacity:.65} }
@keyframes twinkleB { 0%,100%{opacity:.25} 50%{opacity:.55} }
@keyframes twinkleC { 0%,100%{opacity:.20} 50%{opacity:.50} }

body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(2px 2px at 20% 30%, #ffffff88 50%, transparent 51%) repeat,
    radial-gradient(1.5px 1.5px at 70% 60%, #ffffff66 50%, transparent 51%) repeat,
    radial-gradient(1px 1px at 40% 80%, #ffffff55 50%, transparent 51%) repeat;
  background-size: 300px 300px, 240px 240px, 200px 200px;
  animation: twinkleA 6s ease-in-out infinite;
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(2px 2px at 10% 70%, #ffffff77 50%, transparent 51%) repeat,
    radial-gradient(1.5px 1.5px at 80% 20%, #ffffff55 50%, transparent 51%) repeat;
  background-size: 260px 260px, 220px 220px;
  animation: twinkleB 7.5s ease-in-out infinite;
  opacity:.4;
}

.paynote{display:block; font-size:.86rem; color:#cfcfec; margin-top:4px}
.paynote:before{content:"🔒 "; opacity:.9}