/* Cosmic v3 — deep navy, gold accents, real stars */
*{box-sizing:border-box}
html,body{height:100%}
:root{
  --ink:#070a13;
  --navy:#0c1223;
  --panel:#0d1326cc;
  --gold:#e6c46a;
  --gold-2:#ffd166;
  --accent:#6bbdd1;
  --text:#e9eeff;
  --muted:#b9c6f0;
}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--ink);
}
.bg{position:fixed; inset:0; z-index:-2}
.bg img{width:120%; max-width:none; position:absolute; left:-10%; top:-5%; filter: brightness(1) contrast(1.1) saturate(1.1)}
.wrap{max-width:1024px; margin:0 auto; padding:24px 16px 56px}
.nav{display:flex; justify-content:center; margin:6px 0 10px}
.brand{display:flex; gap:10px; align-items:center; font-weight:700; letter-spacing:.3px}
.logo{width:28px; height:28px}
.name strong{color:var(--gold-2); font-family:'Cinzel',serif}
.card{
  border:1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(13,19,38,0.75), rgba(9,13,24,0.55));
  backdrop-filter: blur(10px);
  border-radius:22px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}
.hero{text-align:center; padding:28px 18px}
.hero h1{font-family:'Cinzel',serif; line-height:1.15; margin:8px 0 12px}
.lead{font-size: clamp(1.5rem, 2.1rem + 1vw, 2.6rem); color:#eef2ff}
.debut{font-size: clamp(1.8rem, 2.4rem + 1.3vw, 3.2rem); color:var(--gold-2); letter-spacing:.6px}
.sub{opacity:.92; margin:0 auto 14px; max-width:720px; line-height:1.6}
.form{display:grid; grid-template-columns:1fr auto; gap:10px; max-width:560px; margin:10px auto 6px}
.form input{
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:14px; padding:14px 16px; color:#fff; outline:none;
}
.form input::placeholder{color:#c7d2f2}
.form button{
  border:0; border-radius:14px; padding:14px 18px; font-weight:800; letter-spacing:.4px; cursor:pointer;
  background: linear-gradient(135deg, var(--gold-2), #ffe29a);
  color:#08101e; transition: transform .08s ease, filter .2s ease
}
.form button:hover{filter:brightness(1.06)}
.form button:active{transform:translateY(1px)}
.note{color:var(--muted); font-size:.95rem; margin:8px 0 2px}
.features{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:18px 0 10px}
.features .f{padding:16px; border-radius:16px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10)}
.features h3{margin:0 0 6px; font-family:'Cinzel',serif; color:var(--gold-2); font-size:1.1rem}
.features p{margin:0; color:#dfe7ff; opacity:.9; line-height:1.55}
.footer{text-align:center; color:var(--muted); margin-top:22px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
@media (max-width:760px){ .features{grid-template-columns:1fr} }