:root{
  --bg:#0b0d10;
  --panel:#0f1318;
  --text:#eef2f7;
  --muted:#9aa4b2;
  --accent:#f59e0b;
  --border:#1f2937;
  --pill:#11161c;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:radial-gradient(1000px 600px at 75% -10%, #1a2330 0%, #0b0d10 60%); color:var(--text); font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", sans-serif}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.wrap{min-height:100%; display:grid; grid-template-rows:auto 1fr auto}
header{padding:1.1rem 0; border-bottom:1px solid rgba(255,255,255,.06)}
.container{width:min(960px,92%); margin-inline:auto}
.row{display:flex; align-items:center; justify-content:center}
.logo img{height:60px}
.pill{display:inline-flex; align-items:center; gap:.5rem; background:var(--pill); color:var(--muted); padding:.4rem .7rem; border:1px solid var(--border); border-radius:999px; font-size:.85rem; margin-left:1rem}

.hero{display:grid; gap:1.2rem; padding:clamp(2rem, 8vw, 5rem) 0; text-align:center}
.title{font-family:"Playfair Display", serif; font-size:clamp(2rem,5vw,3rem); line-height:1.1; margin:0}
.lead{color:var(--muted); max-width:60ch; margin-inline:auto}

.timer{display:grid; grid-template-columns:repeat(4, minmax(110px, 1fr)); gap:.8rem; margin:1.2rem auto; max-width:600px}
.slot{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:1rem; padding:1rem; text-align:center}
.num{font-size:clamp(1.8rem, 6vw, 3rem); font-weight:700; letter-spacing:.5px}
.lab{color:var(--muted); font-size:.85rem}

.panel{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border:1px solid var(--border); border-radius:1rem; padding:1rem; max-width:600px; margin-inline:auto}
.nl{display:flex; gap:.6rem; flex-wrap:wrap}
.nl input{flex:1; min-width:220px; background:#0b0f14; color:var(--text); border:1px solid var(--border); border-radius:.8rem; padding:.9rem; outline:none}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; background:var(--accent); color:#111; border:none; font-weight:700; padding:.9rem 1.1rem; border-radius:.8rem; cursor:pointer}
.btn:focus{outline:2px solid #fff3; outline-offset:2px}

.social{display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin-top:1rem}
.sbtn{display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--border); background:transparent; color:var(--text); padding:.6rem .8rem; border-radius:.8rem}
.sbtn:hover{background:#0f1318}

footer{padding:1.2rem 0; border-top:1px solid rgba(255,255,255,.06); color:var(--muted); text-align:center}

@media (max-width:720px){
  .timer{grid-template-columns:repeat(2, minmax(120px, 1fr))}
}