/* Base / Reset */
:root{
  --bg: #0b0f14;
  --card: #0f1720;
  --muted: #9aa6b2;
  --text: #e6eef8;
  --accent: #5dd4d8;
  --accent-2: #72c6a3;
  --danger: #ff6b6b;
  --radius: 10px;
  --container: 1000px;
  --max-qr: 360px;
  --glass: rgba(255,255,255,0.03);
}

*,
*::before,
*::after { box-sizing: border-box; }

html,body{
  height:100%;
  margin:0;
  padding:0;
  background: linear-gradient(180deg, var(--bg) 0%, #071019 100%);
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  -webkit-tap-highlight-color: transparent;
}

/* Layout container */
.container{
  max-width:var(--container);
  margin:2.25rem auto;
  padding:1.25rem;
}

/* Header */
.site-header{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  padding:1.25rem;
  text-align:center;
  box-shadow: 0 6px 18px rgba(2,6,23,0.5);
}
.site-header h1{
  margin:0;
  font-weight:700;
  letter-spacing:0.04em;
  font-size:1.6rem;
  color:var(--text);
}

/* Hero */
.hero{
  margin:1.25rem 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-img{
  width:100%;
  max-width:900px;
  max-height:420px;
  object-fit:cover;
  border-radius:calc(var(--radius) - 2px);
  display:block;
  box-shadow: 0 10px 30px rgba(2,6,23,0.6);
  border:1px solid rgba(255,255,255,0.03);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
}

/* Quote */
.quote{
  margin:1.5rem 0;
  padding:1rem 1.25rem;
  background: linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.0));
  border-radius:8px;
  border-left:4px solid rgba(93,212,216,0.14);
}
.quote p{
  margin:0;
  font-style:italic;
  color:var(--muted);
  font-size:1.05rem;
}

/* Why / About / Donate sections */
.why,
.about,
.donate{
  margin:1.25rem 0;
  padding:1rem 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.02);
}

.why h3,
.donate h3{
  margin-top:0;
  margin-bottom:0.5rem;
  color:var(--text);
}
.why p,
.about p,
.donate p{
  margin:0;
  color:var(--muted);
  font-size:0.98rem;
}

/* Donate QR and caption */
.donate-qr{
  margin-top:1rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.6rem;
}
.donate-qr .hero-img{
  max-width:var(--max-qr);
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:8px;
  box-shadow: 0 8px 24px rgba(2,6,23,0.55);
}
.donate-caption{
  margin:0;
  color:var(--muted);
  font-size:0.88rem;
  text-align:center;
}
.donate-address{
  margin:0;
  font-size:0.85rem;
  color:var(--text);
  text-align:center;
}
.donate-address code{
  display:inline-block;
  max-width:100%;
  overflow-wrap:anywhere;
  background:var(--glass);
  padding:0.35rem 0.6rem;
  border-radius:6px;
  color:var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
  font-size:0.82rem;
  border:1px solid rgba(255,255,255,0.03);
}

/* Support / Buy Me a Coffee link (made larger and more noticeable) */
.support {
  margin-top:1rem;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  align-items:center;
}
.support .support-text{
  color:var(--muted);
  font-size:0.95rem;
  text-align:center;
}
.bmc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.6rem;
  background: linear-gradient(180deg, rgba(93,212,216,0.18), rgba(114,198,163,0.08));
  color: rgba(2,6,23,0.95);
  color: var(--text);
  padding:0.9rem 1.1rem;
  border-radius:12px;
  font-weight:700;
  font-size:1.05rem;
  text-decoration:none;
  border: 1px solid rgba(93,212,216,0.16);
  box-shadow: 0 12px 32px rgba(8,18,24,0.55);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  min-width:260px;
  text-align:center;
}
.bmc-btn:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(8,18,24,0.65);
  background: linear-gradient(180deg, rgba(93,212,216,0.26), rgba(114,198,163,0.12));
}
.bmc-btn:focus{
  outline:3px solid rgba(93,212,216,0.20);
  outline-offset:3px;
}

/* Download area */
.download{
  display:flex;
  gap:1rem;
  align-items:center;
  margin:1.5rem 0 2rem;
  flex-wrap:wrap;
}
.btn{
  display:inline-block;
  padding:0.7rem 1rem;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  border:1px solid rgba(255,255,255,0.03);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:focus{
  outline:3px solid rgba(93,212,216,0.18);
  outline-offset:2px;
}
.btn.primary{
  background: linear-gradient(180deg, rgba(93,212,216,0.16), rgba(114,198,163,0.06));
  color:var(--text);
  box-shadow: 0 8px 20px rgba(8,18,24,0.6);
  border: 1px solid rgba(93,212,216,0.12);
}
.btn.primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(8,18,24,0.7);
}

/* Meta info next to download */
.meta{
  color:var(--muted);
  font-size:0.9rem;
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.checksum{
  color:var(--muted);
  text-decoration:underline;
}

/* About smaller text */
.about p{
  font-size:0.92rem;
  color:var(--muted);
}

/* Footer */
.site-footer{
  text-align:center;
  padding:1.1rem;
  color:var(--muted);
  border-top:1px solid rgba(255,255,255,0.02);
  background: linear-gradient(180deg, rgba(255,255,255,0.005), rgba(255,255,255,0.01));
}
.site-footer small{font-size:0.85rem;}

/* Utility & Responsiveness */
@media (max-width:900px){
  .container{ padding:1rem; margin:1rem; }
  .download{ flex-direction:column; align-items:stretch; }
  .meta{ justify-content:flex-start; }
  .hero-img{ max-height:300px; }
  .bmc-btn{ width:100%; min-width:0; font-size:1rem; }
}

@media (prefers-reduced-motion: reduce){
  .btn, .hero-img, .bmc-btn { transition: none !important; transform: none !important; }
}

/* Accessibility helpers */
a { color:inherit; cursor:pointer; }
a[target="_blank"]::after {
  content: " (opens in new tab)";
  font-size:0.8em;
  color:var(--muted);
}