/* Base */
:root{
  --bg:#ffffff;
  --fg:#111111;
  --muted:#555555;
  --accent:#111111;
  --ring:rgba(0,0,0,0.12);
  --shadow:0 10px 30px rgba(0,0,0,0.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg);
  background: radial-gradient(1200px 600px at 50% -10%, rgba(0,0,0,0.05), transparent 60%) var(--bg);
}

/* Layout */
.wrap{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:56px 20px;
  gap:16px;
}

/* Branding */
.logo{
  width:min(240px,55vw);
  height:auto;
  margin-bottom:8px;
}

.title{
  font-size: clamp(28px, 5vw, 46px);
  line-height:1.15;
  font-weight:700;
  letter-spacing:0.02em;
  margin:6px 0 0;
}

.tag{
  margin:6px 0 0;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-size: clamp(12px, 2.2vw, 14px);
  color:var(--muted);
}

.sub{
  margin:10px 0 22px;
  font-size: clamp(14px, 2.8vw, 16px);
  color:var(--muted);
}

/* Optional notify form (commented in HTML) */
.notify{
  display:flex;
  gap:10px;
  margin-top:6px;
  box-shadow: var(--shadow);
  padding:8px;
  border-radius:12px;
  background:#fff;
}
.notify input{
  flex:1;
  min-width:220px;
  border:1px solid var(--ring);
  padding:12px 14px;
  border-radius:10px;
  font-size:14px;
  outline:none;
}
.notify input:focus{ box-shadow:0 0 0 4px rgba(0,0,0,0.06) }
.notify button{
  border:0;
  padding:12px 18px;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.notify button:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,0.12);
}

/* Social links (fill later) */
.socials{
  display:flex;
  gap:16px;
  margin-top:8px;
}
.socials a{
  text-decoration:none;
  color:var(--fg);
  font-weight:500;
  border-bottom:1px solid transparent;
}
.socials a:hover{ border-bottom:1px solid var(--fg) }

/* Footer */
.foot{
  margin-top:36px;
  font-size:12px;
  color:var(--muted);
  opacity:.9;
}

/* Motion */
.fade-in{
  animation:fade .6s ease-out both, lift .7s ease-out both;
}
@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes lift{ from{transform:translateY(8px)} to{transform:translateY(0)} }

/* Responsive polish */
@media (max-width: 480px){
  .wrap{ padding:48px 16px }
  .notify{ width:100%; padding:6px }
  .notify input{ min-width:0 }
}