:root{
  --bg:#0b0f14;
  --accent:#ff5f71;
  --muted:#9aa3ad;
  --text:#e6eef3;
  --radius:14px;
  --max-width:920px;
  --transition:260ms cubic-bezier(.2,.8,.2,1);
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(255,95,113,0.035), transparent 10%),
    radial-gradient(900px 600px at 90% 90%, rgba(0,209,255,0.02), transparent 10%),
    var(--bg);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
  animation: pageFade 700ms ease-out both;
}

/* page + card animations */
@keyframes pageFade { from {opacity:0; transform:translateY(10px)} to {opacity:1; transform:none} }
@keyframes cardLift { from {opacity:0; transform:translateY(40px) scale(.995)} to {opacity:1; transform:none} }
@keyframes logoPop { from{transform:scale(.9);opacity:0} to{transform:none;opacity:1} }
@keyframes beat { 0%{transform:scaleY(.35)}50%{transform:scaleY(1)}100%{transform:scaleY(.35)} }
@keyframes modalIn { from{opacity:0; transform:translateY(10px) scale(.995)} to{opacity:1; transform:none} }

.card{
  width:100%;
  max-width:var(--max-width);
  background:linear-gradient(180deg,rgba(255,255,255,0.015),rgba(255,255,255,0.01));
  border-radius:calc(var(--radius) + 4px);
  padding:46px;
  box-shadow:0 14px 38px rgba(2,6,12,0.7);
  border:1px solid rgba(255,255,255,0.03);
  display:grid;
  grid-template-columns:1fr 360px;
  gap:34px;
  align-items:center;
  transform-origin:center;
  animation: cardLift 850ms cubic-bezier(.2,.9,.2,1) both;
}
@media(max-width:880px){ .card{grid-template-columns:1fr;padding:34px} .panel--right{order:2} }

.brand{display:flex;gap:20px;align-items:flex-start}
.logo-wrap{
  min-width:76px;min-height:76px;display:flex;align-items:center;justify-content:center;border-radius:12px;padding:12px;
  background:rgba(255,255,255,0.01);border:1px solid rgba(255,255,255,0.03);box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  transform-origin:center; animation: logoPop 700ms ease-out both;
}
.logo{width:48px;height:48px;display:block}

.title{font-size:20px;font-weight:700;margin-bottom:6px;color:var(--text)}
.subtitle{color:var(--muted);font-size:13px;margin-bottom:12px}
.headline{font-size:28px;font-weight:700;margin:8px 0;color:var(--text);line-height:1.06}
.blurb{color:var(--muted);font-size:15px;margin-bottom:20px;max-width:60ch}

.actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border-radius:999px;
  background:linear-gradient(180deg,var(--accent),#cc3c54);color:white;font-weight:600;font-size:13px;text-decoration:none;border:none;cursor:pointer;
  box-shadow:0 10px 28px rgba(255,95,113,0.12);transition:transform var(--transition),box-shadow var(--transition);
}
.btn:hover{ transform:translateY(-4px); box-shadow:0 20px 48px rgba(255,95,113,0.16) }

.eq{display:flex;gap:6px;align-items:flex-end;height:40px;margin-top:18px}
.eq span{width:6px;background:linear-gradient(180deg,var(--accent), rgba(255,255,255,0.06));border-radius:4px;animation:beat 1200ms infinite ease-in-out;transform-origin:bottom}
.eq span:nth-child(1){animation-delay:0ms;height:16px}
.eq span:nth-child(2){animation-delay:120ms;height:26px}
.eq span:nth-child(3){animation-delay:240ms;height:36px}
.eq span:nth-child(4){animation-delay:360ms;height:22px}
.eq span:nth-child(5){animation-delay:480ms;height:30px}

.panel{
  background:linear-gradient(180deg,rgba(255,255,255,0.007),rgba(255,255,255,0.01));
  border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:12px;border:1px solid rgba(255,255,255,0.02);
}
.panel h3{margin:0;font-size:14px;color:var(--muted);font-weight:600}
.notify-cta{display:flex;gap:12px;align-items:center}
.socials{display:flex;gap:10px;margin-top:12px;align-items:center}
.socials a{width:44px;height:44px;display:grid;place-items:center;border-radius:10px;border:1px solid rgba(255,255,255,0.03);text-decoration:none;color:var(--muted);transition:all var(--transition)}
.socials a:hover{transform:translateY(-6px); color:var(--accent); background:rgba(255,255,255,0.01); box-shadow:0 12px 30px rgba(2,6,12,0.45)}
.meta{margin-top:auto;font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:6px;align-items:flex-start}

/* uniform svg sizing & small tiktok nudge so all icons appear identical in weight/height */
.socials a svg { display:block; width:18px; height:18px; }
.socials a.tiktok svg { transform: translateY(0.6px) scale(1.16); transform-origin: center; }

/* Modal (CSS-only with :target + animation) */
.modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:linear-gradient(rgba(3,6,8,0.6), rgba(3,6,8,0.72)); z-index:60; padding:28px;
}
.modal:target{ display:flex; animation: modalIn 260ms cubic-bezier(.2,.9,.2,1) both; }
.modal-panel{
  width:100%; max-width:520px; background: var(--bg); border-radius:12px; padding:22px;
  border:1px solid rgba(255,255,255,0.03); box-shadow:0 22px 60px rgba(2,6,12,0.75);
}
.modal-panel h4{ margin:0 0 6px 0; font-size:18px; color:var(--text) }
.modal-panel p{ margin:0 0 12px 0; color:var(--muted) }

.field{ display:flex; gap:10px; background:rgba(255,255,255,0.015); padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,0.02) }
.field input{ flex:1; background:transparent; border:0; color:var(--text); font-size:14px; outline:none }
.close{ margin-left:auto; color:var(--muted); text-decoration:none; padding:6px 8px; border-radius:8px; border:1px solid rgba(255,255,255,0.02) }
.close:hover{ color:var(--text); background:rgba(255,255,255,0.01) }

/* small screens */
@media (max-width:520px){
  .headline{font-size:22px}
  .logo-wrap{min-width:64px;min-height:64px}
  .panel{padding:14px}
  .modal-panel{padding:16px}
}

/* accessibility focus */
a:focus, button:focus, input:focus { outline:3px solid rgba(255,95,113,0.16); outline-offset:3px; border-radius:8px }