/* No Lip Apparel — Splash v2 (Dark) */
:root{
  --bg:#0b0b0f;
  --bg2:#12121a;
  --card:#16161f88;
  --border:#2a2a35;
  --text:#f3f4f6;
  --muted:#a1a1aa;
  --accent:#f3f4f6;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter','Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, #23233a55, transparent 60%),
    radial-gradient(1000px 600px at 110% 10%, #3a233955, transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  display:flex; align-items:center; justify-content:center;
  min-height:100vh;
}

.wrapper{ width:min(980px, 94vw); text-align:center; padding:24px;}

.card{backdrop-filter: blur(6px);
  background: var(--card);
  border:1px solid var(--border);
  border-radius:28px; padding:54px 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
  overflow:hidden;
}

.logo{
  width:min(520px, 100%);
  height:auto; display:block; margin:0 auto 18px;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.3));
}

h1{ font-size: clamp(30px, 5vw, 56px); margin: 6px 0 6px; letter-spacing:0.3px; font-weight:600;}
.tagline{ font-size: clamp(22px, 3.5vw, 32px); font-weight:600; margin: 6px 0 10px;}
.sub{ color:var(--muted); margin:0 0 24px; font-size: clamp(14px, 2.4vw, 16px);}

.links{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

.btn{
  appearance:none; border:none; cursor:pointer; text-decoration:none;
  background:var(--accent); color:#0b0b0f; padding:12px 18px;
  border-radius:999px; font-weight:600; transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px) scale(.99); }
.btn.outline{ background:transparent; color:var(--text); border:1px solid var(--border); box-shadow:none; }

footer{ color:var(--muted); margin-top:16px; font-size:13px;}


/* Mobile tightening */
@media (max-width: 480px){
  .card{ padding: 32px 16px 40px; }
  .logo{ width: 100%; }
}