@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap');
body{margin:0;background:#050505;color:#f5ecdf;font-family:Inter,sans-serif;height:100vh;display:grid;place-items:center;overflow:hidden}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.05;background-image:radial-gradient(rgba(255,255,255,.5) .7px,transparent 1px);background-size:3px 3px}
.hero{text-align:center;padding:24px}
.logo{width:min(280px,65vw);filter:drop-shadow(0 0 28px rgba(38,216,231,.25));animation:breathe 2.5s ease-in-out infinite alternate}
@keyframes breathe{from{transform:scale(.98);opacity:.85}to{transform:scale(1);opacity:1}}
.tag{text-transform:uppercase;letter-spacing:.35em;color:#25d8e7;font-size:10px;margin:22px 0}
h1{font:400 clamp(42px,8vw,84px) Georgia,serif;margin:10px 0}
.copy{color:#b8afa4;margin-bottom:40px}
form{display:flex;max-width:520px;margin:auto;border-bottom:1px solid rgba(37,216,231,.45)}
input{flex:1;background:transparent;border:0;color:#f5ecdf;padding:16px 0;outline:none}
input::placeholder{color:#8f867d}
button{background:none;border:0;color:#25d8e7;text-transform:uppercase;letter-spacing:.2em;cursor:pointer}
footer{position:fixed;bottom:24px;left:0;right:0;text-align:center;color:#7f786f;font-size:11px}