:root{
  --bg:#0B0B0B; --bg2:#141018; --fg:#F2EEF8; --fg2:#9A93A8;
  --roxo:#6A00FF; --roxo-esc:#3D008F; --ouro:#D4AF37; --linha:rgba(212,175,55,.28);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100dvh; background:linear-gradient(180deg,#0B0B0B 0%,#0B0B0B 58%,#1a0733 100%);
  color:var(--fg); font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  display:flex; align-items:center; justify-content:center;
  padding:max(24px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom));
}
.wrap{width:100%; max-width:420px; text-align:center}
.logo{
  width:min(260px,72vw); height:auto; display:block; margin:0 auto 18px;
  border-radius:22px; border:1px solid var(--linha);
  box-shadow:0 10px 34px rgba(106,0,255,.22);
}
h1{margin:0 0 6px; font-size:26px; font-weight:800; letter-spacing:.4px}
.gold{color:var(--ouro)}
.sub{margin:0 0 26px; color:var(--fg2); font-size:14px}
.cta{
  display:block; padding:16px 20px; border-radius:14px; text-decoration:none;
  font-weight:800; font-size:15px; letter-spacing:.6px; color:#fff;
  background:linear-gradient(135deg,var(--roxo-esc) 0%,var(--roxo) 55%,var(--ouro) 100%);
  box-shadow:0 8px 26px rgba(106,0,255,.35);
}
.cta:active{transform:translateY(1px)}
.install{
  margin:26px 0 0; padding:16px 18px; text-align:left;
  background:var(--bg2); border:1px solid rgba(255,255,255,.06); border-radius:14px;
}
.install h2{margin:0 0 8px; font-size:13px; font-weight:700; color:var(--ouro); letter-spacing:.4px; text-transform:uppercase}
.install ol{margin:0; padding-left:18px; color:var(--fg2); font-size:13px}
.install li{margin:4px 0}
.install b{color:var(--fg)}
.env{margin:20px 0 0; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--fg2); opacity:.75}
@media (max-width:360px){ h1{font-size:22px} .cta{font-size:14px} }