:root{
  --bg:#000;
  --fg:#fff;
  --muted:#a3a3a3;
  --pink:#FE2C55;   /* tom inspirado */
  --cyan:#25F4EE;   /* tom inspirado */
  --card:#0d0d0d;
  --card2:#111;
  --border:#1f1f1f;
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, 'Apple Color Emoji','Segoe UI Emoji';
  color:var(--fg);
  background:var(--bg);
}

.topbar{
  position:sticky; top:0;
  background:linear-gradient(90deg, rgba(0,0,0,.9), rgba(0,0,0,.6));
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem; border-bottom:1px solid var(--border);
  backdrop-filter: blur(6px);
  z-index:10;
}
.brand{display:flex; align-items:center; gap:.6rem}
.logo{width:28px; height:28px}
.brand-name{font-weight:700; letter-spacing:.2px}

.menu{display:flex; gap:1rem; list-style:none; margin:0; padding:0}
.menu a{color:var(--fg); text-decoration:none; opacity:.9}
.menu a.muted{color:var(--muted); cursor:not-allowed}

.container{max-width:1100px; margin:1.2rem auto; padding:0 1rem}

.card{
  background:linear-gradient(180deg, var(--card), var(--card2));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.hero{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:center;
}
.fake-video{
  aspect-ratio:9/16;
  width:100%;
  border-radius:calc(var(--radius) + 6px);
  background:
    radial-gradient(circle at 15% 10%, rgba(37,244,238,.15), transparent 30%),
    radial-gradient(circle at 85% 90%, rgba(254,44,85,.15), transparent 30%),
    linear-gradient(180deg, #151515, #090909);
  border:1px solid var(--border);
  display:grid; place-items:center;
  position:relative;
  overflow:hidden;
}
.play{
  width:68px; height:68px;
  border-radius:999px; background:#000c;
  border:1px solid #fff3;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  position:relative;
}
.play::after{
  content:"";
  position:absolute; left:50%; top:50%;
  translate:-40% -50%;
  width:0; height:0;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  border-left:18px solid #fff;
}

.hero-right h1{margin:.2rem 0 .5rem 0; font-size:clamp(1.4rem, 2vw + .6rem, 2rem)}
.subtitle{color:var(--muted); margin:0 0 1rem 0}

.btn{
  display:inline-block;
  padding:.9rem 1.2rem;
  border-radius:14px;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.3px;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
  border:1px solid #ffffff22;
}
.btn-primary{
  background:
    linear-gradient(90deg, var(--pink), var(--cyan));
  color:#000;
  box-shadow: 0 10px 30px rgba(37,244,238,.25), 0 2px 8px rgba(254,44,85,.25);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.99)}

.trust{color:#d1d1d1; margin:.6rem 0 0 0}

.badges{display:flex; gap:.5rem; margin-top:.8rem; flex-wrap:wrap}
.badge{
  padding:.35rem .6rem;
  border-radius:999px;
  font-size:.85rem;
  border:1px solid var(--border);
  background:#0f0f0f;
}
.badge.cyan{outline:1px solid rgba(37,244,238,.3)}
.badge.pink{outline:1px solid rgba(254,44,85,.3)}

.grid{
  margin-top:1rem;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1rem;
}
.info h2{margin:.2rem 0 .6rem 0}
.info ul{padding-left:1.2rem; margin:.4rem 0}
.info li{margin:.25rem 0}

.footer{
  max-width:1100px; margin:1.2rem auto; padding:1rem;
  color:var(--muted); text-align:center;
}

/* Responsivo */
@media (max-width: 900px){
  .hero{grid-template-columns:1fr; gap:1.2rem}
}