html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: system-ui, sans-serif;
  color: #1f2937;
  background-color: #fde047;

  background-image:
    radial-gradient(1600px 900px at 5% 10%, rgba(255,255,255,0.6), rgba(255,255,255,0) 70%),

    radial-gradient(30px 30px at 12% 22%, rgba(0,0,0,0.08) 0 60%, rgba(0,0,0,0) 61%),
    radial-gradient(40px 40px at 33% 35%, rgba(0,0,0,0.07) 0 60%, rgba(0,0,0,0) 61%),
    radial-gradient(26px 26px at 50% 20%, rgba(0,0,0,0.08) 0 60%, rgba(0,0,0,0) 61%),
    radial-gradient(35px 35px at 65% 30%, rgba(0,0,0,0.07) 0 60%, rgba(0,0,0,0) 61%),
    radial-gradient(28px 28px at 80% 18%, rgba(0,0,0,0.08) 0 60%, rgba(0,0,0,0) 61%),
    radial-gradient(24px 24px at 75% 46%, rgba(0,0,0,0.07) 0 60%, rgba(0,0,0,0) 61%),
    radial-gradient(32px 32px at 18% 60%, rgba(0,0,0,0.07) 0 60%, rgba(0,0,0,0) 61%),
    radial-gradient(22px 22px at 42% 68%, rgba(0,0,0,0.06) 0 60%, rgba(0,0,0,0) 61%),
    radial-gradient(30px 30px at 77% 73%, rgba(0,0,0,0.07) 0 60%, rgba(0,0,0,0) 61%),
    radial-gradient(26px 26px at 60% 85%, rgba(0,0,0,0.06) 0 60%, rgba(0,0,0,0) 61%),
    radial-gradient(34px 34px at 10% 80%, rgba(0,0,0,0.07) 0 60%, rgba(0,0,0,0) 61%),
    radial-gradient(20px 20px at 90% 55%, rgba(0,0,0,0.08) 0 60%, rgba(0,0,0,0) 61%),
    radial-gradient(28px 28px at 55% 40%, rgba(0,0,0,0.07) 0 60%, rgba(0,0,0,0) 61%),
    radial-gradient(36px 36px at 35% 90%, rgba(0,0,0,0.08) 0 60%, rgba(0,0,0,0) 61%);

  background-repeat: no-repeat, repeat;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

.container { max-width: 1100px; margin: 0 auto; padding: 2rem; }
h1 { font-size: 3rem; font-weight: 900; margin-bottom: 0.5rem; }
h2 { font-size: 2rem; font-weight: 900; margin: 2rem 0 1rem; }

.subtitle { font-size:1.25rem; font-weight:600; }
.intro { max-width:600px; margin-top:1rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #111827;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  margin: 0.25rem;
}

.card {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(202,138,4,0.3);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
}

.card img {
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }

@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

.links {
  margin-top:0.5rem;
  display:flex;
  flex-direction:column;
  gap:0.25rem;
}

footer {
  border-top: 1px solid rgba(202,138,4,0.3);
  background: rgba(253,224,71,0.3);
  padding: 2rem;
  text-align: center;
  font-size: 0.9rem;
}

a.link { color: #78350f; text-decoration: none; }
a.link:hover { text-decoration: underline; }