/* Minimalist, responsive stylesheet with glassy card + full-bleed hero background */
:root{
  --bg:#ffffff; --fg:#111827; --muted:#e6eef0; --muted-text:#6b7280; --accent:#0ea5a4;
  --max-width:900px; --gap:24px;
  --hero: url('assets/aa.webp'); /* Replace with a suitable JPG/PNG for best results */
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;color:var(--fg);font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial}
/* Full-page background image */
body{
  background-image: linear-gradient(rgba(4,6,8,0.28), rgba(4,6,8,0.28)), var(--hero);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* Centered glassy card */
main.center{max-width:var(--max-width);margin:6vh auto;padding:36px;}
.card{
  background: rgba(255,255,255,0.66);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.45);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.4);
}
.brand h1{font-size:1.6rem;margin:0 0 6px}
.brand .tag{color:var(--muted-text);margin:0}
.about{margin-top:20px;font-size:1rem;color:var(--muted-text)}
.foot{margin-top:32px;color:var(--muted-text);font-size:0.85rem;text-align:center}

/* Responsive adjustments */
@media(min-width:800px){
  .brand h1{font-size:2rem}
  .card{padding:36px}
}

/* Small tweak for links */
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}