:root{
  --bg: #0f0f0f;
  --foreground: #ffffff;
  --muted: #bdbdbd;
  --accent: #7c5cff;
}

*{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:var(--bg);
  color:var(--foreground);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:2rem;
}

.card{
  text-align:center;
  max-width:900px;
  width:100%;
}

.title{
  margin:0;
  font-size:clamp(2.5rem, 7vw, 6rem);
  line-height:0.95;
  font-weight:800;
  letter-spacing:-0.02em;
  display:inline-block;
  padding:0.2em 0.4em;
  position:relative;
  /* gradient text */
  background: linear-gradient(90deg, var(--foreground) 10%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* subtle text pulse (brightness) */
  animation: textPulse 2.6s ease-in-out infinite;
}

/* Glow/pulse effect using pseudo element */
.title::after{
  content:"";
  position:absolute;
  inset:0;
  left:0;
  right:0;
  z-index:-1;
  border-radius:6px;
  filter:blur(18px);
  opacity:0.18;
  background:linear-gradient(90deg,var(--accent),#00d4ff 60%);
  transform:scale(0.98);
  animation: pulse 2.6s ease-in-out infinite;
}

.date{
  display:block;
  margin-top:1rem;
  font-weight:600;
  color:var(--foreground);
  opacity:0.9;
  font-size:1.125rem;
}

.lead{
  margin-top:1rem;
  color:var(--muted);
  font-size:clamp(1rem,2.2vw,1.25rem);
  max-width:55ch;
  margin-left:auto;
  margin-right:auto;
}

@keyframes pulse{
  0%{ transform:scale(0.96); opacity:0.14; filter:blur(14px);} 
  50%{ transform:scale(1.06); opacity:0.28; filter:blur(20px);} 
  100%{ transform:scale(0.96); opacity:0.14; filter:blur(14px);} 
}

@keyframes textPulse{
  0%{ filter:brightness(1); text-shadow:0 0 0 rgba(0,0,0,0);} 
  50%{ filter:brightness(1.12); text-shadow:0 6px 30px rgba(124,92,255,0.08);} 
  100%{ filter:brightness(1); text-shadow:0 0 0 rgba(0,0,0,0);} 
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .title::after{ animation:none; opacity:0.12; }
}

/* Small screens adjustments */
@media (max-width:480px){
  .lead{ font-size:1rem; }
  .date{ font-size:1rem; }
}