:root {
  color-scheme: light;
  --index-font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --index-color-bg: #f7f2ea;
  --index-color-ink: #28222d;
  --index-color-muted: #625967;
  --index-color-footer: #756b78;
  --index-color-accent: #8a3e5d;
  --index-color-border: #ffffffb8;
  --index-color-pill: #ffffffa8;
  --index-color-shadow: #493b4b1c;
  --index-color-shadow-hover: #493b4b2e;
  --index-gradient-sky: radial-gradient(circle at 85% 10%, #dbe7ef 0, transparent 34%), radial-gradient(circle at 10% 90%, #ead8df 0, transparent 36%), var(--index-color-bg);
  --index-gradient-girls: linear-gradient(145deg, #f4e5e5, #e9dce9);
  --index-gradient-boys: linear-gradient(145deg, #dfe9ec, #dce4da);
  --index-gradient-itgb: linear-gradient(145deg, #f2e4df, #e1e6ec);
  --index-page-max: 1320px;
  --index-page-padding: 48px 24px;
  --index-grid-gap: 18px;
  --index-grid-top: 42px;
  --index-card-min-height: 300px;
  --index-card-padding: 28px;
  --index-card-radius: 28px;
  --index-card-shadow: 0 24px 70px var(--index-color-shadow);
  --index-card-shadow-hover: 0 28px 80px var(--index-color-shadow-hover);
  --index-card-transition: transform .2s ease, box-shadow .2s ease;
  --index-copy-max: 680px;
  --index-heading-max: 760px;
  --index-heading-size: clamp(2.5rem, 7vw, 5.8rem);
  --index-card-heading-max: 420px;
  --index-card-heading-size: clamp(1.85rem, 3vw, 3rem);
  --index-footer-top: 24px;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: var(--index-page-padding); background: var(--index-gradient-sky); color: var(--index-color-ink); font-family: var(--index-font-sans); }
main { width: min(var(--index-page-max), 100%); }
.eyebrow { color: var(--index-color-accent); font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
h1 { max-width: var(--index-heading-max); margin: 14px 0 12px; font-size: var(--index-heading-size); line-height: .95; letter-spacing: -.05em; }
.intro { max-width: var(--index-copy-max); color: var(--index-color-muted); font-size: 1.06rem; line-height: 1.6; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--index-grid-gap); margin-top: var(--index-grid-top); }
.card { min-height: var(--index-card-min-height); display: flex; flex-direction: column; justify-content: space-between; color: inherit; text-decoration: none; padding: var(--index-card-padding); border: 1px solid var(--index-color-border); border-radius: var(--index-card-radius); box-shadow: var(--index-card-shadow); transition: var(--index-card-transition); }
.card:hover { transform: translateY(-4px); box-shadow: var(--index-card-shadow-hover); }
.girls { background: var(--index-gradient-girls); }
.boys { background: var(--index-gradient-boys); }
.itgb { background: var(--index-gradient-itgb); }
.card small { font-weight: 800; letter-spacing: .13em; text-transform: uppercase; opacity: .62; }
.card h2 { max-width: var(--index-card-heading-max); margin: 0; font-size: var(--index-card-heading-size); line-height: 1; letter-spacing: -.035em; }
.card span { width: fit-content; padding: 10px 15px; border-radius: 999px; background: var(--index-color-pill); font-size: .86rem; font-weight: 700; }
footer { margin-top: var(--index-footer-top); color: var(--index-color-footer); font-size: .82rem; }
@media (max-width: 980px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grid { grid-template-columns: 1fr; } .card { min-height: 250px; } }