* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;
}

:root {
  --bg0: #071226;
  --bg1: #091a34;

  --text: #eaf2ff;
  --muted: rgba(234, 242, 255, 0.78);

  --blue: #0f68ea;
  --blue-hi: #2f86ff;
  --blue-lo: #0b49b7;
  --cyan: #63d7ff;

  --ring: rgba(255, 255, 255, 0.92);
  --ring-soft: rgba(255, 255, 255, 0.55);

  --shadow: 0 14px 40px rgba(0, 0, 0, 0.42);
  --shadow-tight: 0 10px 24px rgba(0, 0, 0, 0.38);
  --radius: 18px;
}

html {
  color-scheme: dark;
}

body {
  font-family: "Lexend", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 20% 0%, rgba(47, 134, 255, 0.25), transparent 60%),
    radial-gradient(900px 600px at 85% 8%, rgba(99, 215, 255, 0.18), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  color: var(--text);
}

h1, h2, h3, .page-title {
  font-family: "Sora", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: -0.02em;
}

p {
  color: var(--muted);
}

/* If text sits on a blue/gradient panel, keep it white for readability */
.about-text,
.highlight-card,
.contact-bubble,
.donation-info,
.sponsor-open,
.sponsor-text {
  color: #ffffff;
  border-radius: var(--radius);
  overflow: hidden; /* keep gradient sheen clipped to rounded corners */
}

.about-text p,
.highlight-card p,
.contact-bubble p,
.donation-info p,
.sponsor-open p,
.sponsor-text p,
.donation-info li,
.sponsor-open li,
.sponsor-text li {
  color: rgba(255, 255, 255, 0.92);
}

.about-text a,
.highlight-card a,
.contact-bubble a,
.donation-info a,
.sponsor-open a,
.sponsor-text a {
  color: #ffffff;
}

/* Links: keep readable, add a clean hover */
a {
  color: var(--text);
  text-underline-offset: 3px;
  text-decoration-color: rgba(99, 215, 255, 0.55);
}

a:hover {
  text-decoration-color: rgba(255, 255, 255, 0.92);
}

/* 3D “blue box” system: applies broadly without changing layout/padding */
.card,
.panel,
.content-box,
.section-box,
.hero-card,
.sponsor-box,
.about-box,
.info-box,
.primary-box,
.feature {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 18%, rgba(0, 0, 0, 0) 45%),
    radial-gradient(900px 420px at 18% 12%, rgba(99, 215, 255, 0.20), transparent 55%),
    linear-gradient(135deg, var(--blue-hi), var(--blue) 40%, var(--blue-lo));
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow);
  position: relative;
}

/* Top edge sheen + subtle inner depth */
.card::before,
.panel::before,
.content-box::before,
.section-box::before,
.hero-card::before,
.sponsor-box::before,
.about-box::before,
.info-box::before,
.primary-box::before,
.feature::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 38%),
    radial-gradient(650px 260px at 12% 8%, rgba(255, 255, 255, 0.14), transparent 52%);
  opacity: 0.9;
}

.card::after,
.panel::after,
.content-box::after,
.section-box::after,
.hero-card::after,
.sponsor-box::after,
.about-box::after,
.info-box::after,
.primary-box::after,
.feature::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), inset 0 -18px 30px rgba(0, 0, 0, 0.25);
  opacity: 0.9;
}

/* Hover outline: crisp, readable, not neon */
.card:hover,
.panel:hover,
.content-box:hover,
.section-box:hover,
.hero-card:hover,
.sponsor-box:hover,
.about-box:hover,
.info-box:hover,
.primary-box:hover,
.feature:hover {
  box-shadow: 0 0 0 2px var(--ring), var(--shadow);
}

.card:focus-within,
.panel:focus-within,
.content-box:focus-within,
.section-box:focus-within,
.hero-card:focus-within,
.sponsor-box:focus-within,
.about-box:focus-within,
.info-box:focus-within,
.primary-box:focus-within,
.feature:focus-within {
  box-shadow: 0 0 0 3px var(--ring-soft), 0 0 0 1px rgba(0, 0, 0, 0.25), var(--shadow);
}

/* Buttons / nav links (if present) */
.btn,
button,
input[type="submit"],
.nav a {
  font-family: inherit;
}

/* Keep headings readable (no gradient text), but add a tiny accent rule if used */
.accent-underline {
  position: relative;
}

.accent-underline::after {
  content: "";
  display: block;
  height: 3px;
  width: 64px;
  border-radius: 999px;
  margin-top: 10px;
  background: linear-gradient(90deg, rgba(99, 215, 255, 0.95), rgba(47, 134, 255, 0.25));
}

/* keyboard accessibility */
*:focus-visible {
  outline: 3px solid rgba(147, 197, 253, 0.55);
  outline-offset: 3px;
}

.site-header {
  background: linear-gradient(90deg, rgba(15, 104, 234, 0.98), rgba(59, 130, 246, 0.9));
  padding: 1.25rem 2rem; /* increased header padding for more space */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.logo-lockup {
  display: flex;
  align-items: center;
  gap: 1rem; /* slightly larger gap between logo and name */
}

.logo-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 0.75rem;
  background: #0f68ea;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 3px rgba(15, 104, 234, 0.4);
}

.site-logo {
  height: 44px;
  width: auto;
  display: block;
}

nav a {
  color: #e5e7eb;
  margin-left: 1.25rem; /* more spacing between nav items */
  text-decoration: none;
  font-weight: 500;
  padding: 0.35rem 0.55rem;
  border-radius: 10px;
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.sponsor-packet-link {
  color: #ffffff; /* purple that's easier to read on dark backgrounds */
  text-decoration: underline;
  font-weight: 600;
}

.sponsor-packet-link:hover,
.sponsor-packet-link:focus {
  color: #ffffff;
  text-decoration: none;
}

.social-buttons {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.social-btn {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  color: white;
}

.social-btn.youtube {
  background: #FF0000; /* YouTube red */
}

.social-btn.instagram {
  background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af); /* Instagram gradient */
}

.social-btn:focus-visible {
  outline: 3px solid rgba(255,255,255,0.18);
  outline-offset: 3px;
}

nav a:hover {
  color: #ffffff;
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}

main {
  /* don't add huge side margins; keep it similar to what you had */
  padding: 1.5rem;
  margin: 0;
  min-height: 100vh; /* Ensure it fills the full viewport height */
}

.hero {
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(34, 211, 238, 0.22), transparent 65%),
    linear-gradient(135deg, rgba(15, 104, 234, 0.98), rgba(59, 130, 246, 0.86));
  padding: 2rem;
  border-radius: var(--radius);
  margin-bottom: 10.5rem; /* increased gap below hero (3x) */
  box-shadow: 0 25px 50px rgba(15, 23, 42, 0.9);
  min-height: 560px; /* give the hero a solid presence so the image displays prominently */
  border: 1px solid rgba(255,255,255,0.14);
}

/* Make "blue boxes" feel more premium without changing layout */
.about-text,
.highlight-card,
.contact-bubble,
.donation-info,
.sponsor-open,
.sponsor-text {
  background:
    radial-gradient(700px 420px at 0% 0%, rgba(34, 211, 238, 0.16), transparent 62%),
    linear-gradient(135deg, rgba(15, 104, 234, 0.92), rgba(37, 99, 235, 0.84));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: var(--shadow-soft);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

/* Crisp white outline on hover (your request) */
.about-text:hover,
.highlight-card:hover,
.contact-bubble:hover,
.donation-info:hover,
.sponsor-open:hover,
.sponsor-text:hover {
  border-color: var(--ring);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .hero-split {
    grid-template-columns: 1fr;
  }
}

.hero-visual {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  height: 100%;
}

/* generic hero image style (used on home) */
.hero-image {
  width: 100%;
  height: 100%;
  max-width: none;
  background:
    radial-gradient(700px 420px at 0% 0%, rgba(34, 211, 238, 0.14), transparent 62%),
    linear-gradient(135deg, rgba(15, 104, 234, 0.90), rgba(37, 99, 235, 0.82));
  border-radius: 0.9rem;
  overflow: hidden; /* ensure the image can crop to shape */
  display: flex;
  align-items: stretch;
  justify-content: center;
  color: #e5e7eb;
  text-align: center;
}

.hero-image span {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
}

.hero-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* crop nicely to fill the area */
  object-position: center;
  border-radius: 0.75rem;
}

@media (max-width: 768px) {
  .hero {
    min-height: 360px;
  }
  .hero-photo {
    object-position: top center; /* show useful detail on narrow screens */
    border-radius: 0.6rem;
  }
}


/* hero badges removed; the team photo now fills the left column */

.hero-content h2 {
  font-size: 2.6rem;
  margin-bottom: 0.75rem;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  color: #bfdbfe;
  margin-bottom: 0.5rem;
}

.hero-content p {
  margin-bottom: 0.75rem;
  color: #e5e7eb;
  font-size: 1.05rem;
}

.primary-button {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: #0f68ea;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 15px 35px rgba(15, 104, 234, 0.35);
  border: 2px solid rgba(255,255,255,0.14); /* subtle outline so button reads on dark backgrounds */
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.primary-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(15, 104, 234, 0.42);
}

.primary-button:focus-visible {
  outline: 3px solid rgba(15, 104, 234, 0.25);
  outline-offset: 4px;
}

.primary-button:hover {
  filter: brightness(1.05);
}

.cta-button {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  background: #0f68ea;
  color: #ffffff;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(15, 104, 234, 0.25);
  border: 2px solid rgba(255,255,255,0.14);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.cta-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(15, 104, 234, 0.32);
}

.cta-button:focus-visible {
  outline: 3px solid rgba(15, 104, 234, 0.25);
  outline-offset: 4px;
}

.highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 3.75rem; /* extra spacing from hero (3x) */
}

.highlight-card {
  /* background handled by the shared premium panel gradient above */
  border-radius: 0.9rem;
  padding: 1.25rem 1.3rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.highlight-card h3 {
  margin-bottom: 0.4rem;
  color: #e5e7eb;
}

.highlight-card p {
  color: #cbd5f5;
}

section h3, main h2 {
  margin: 1.5rem 0 0.75rem;
}

.sponsor-list li,
.social-list li {
  margin-bottom: 0.4rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 480px;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  font-size: 0.95rem;
}

.contact-form input,
.contact-form textarea {
  margin-top: 0.25rem;
  padding: 0.5rem;
  border-radius: 0.35rem;
  border: 1px solid #374151;
  background: #020617;
  color: #f9fafb;
}

.contact-form button {
  margin-top: 0.5rem;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: none;
  background: #4b5563;
  color: #e5e7eb;
  font-weight: 600;
}

.form-note {
  font-size: 0.8rem;
  color: #9ca3af;
}

.site-footer {
  border-top: 1px solid #1f2933;
  margin-top: 2rem;
  padding: 1rem 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: #9ca3af;
}

.about-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start; /* keep content top-aligned so text doesn't stretch */
  gap: 2rem;
  margin-bottom: 2rem;
}

.about-image {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4; /* Maintain 1080x1440 aspect ratio */
  max-height: 720px; /* Ensure it doesn't exceed a reasonable height */
  min-height: 360px; /* ensure images remain visible and don't collapse */
  background-size: cover;
  background-position: center;
  border-radius: 0.75rem;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.about-text {
  color: #e5e7eb;
  padding: 1rem;
  /* background handled by the shared premium panel gradient above */
  border-radius: 0.75rem;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align content to the top */
  padding-top: 1.5rem; /* Add padding to create space at the top */
  min-height: auto; /* allow natural flow */
}

.about-text h2 {
  font-size: 2.5rem;
  margin-top: 0; /* Ensure the title starts at the very top */
  margin-bottom: 0.5rem;
}

.about-text p {
  font-size: 1.3rem; /* readable body size */
  line-height: 1.6;    /* more breathing room for long paragraphs */
  color: #e6f3ff;     /* slightly brighter for contrast on blue */
}

/* Add visible space between consecutive paragraphs in about text */
.about-text p + p {
  margin-top: 1rem;
}

/* Links block under about text */
.about-links {
  margin-top: 1rem;
}
.about-links h3 {
  margin: 0 0 0.5rem 0;
  color: #e5e7eb;
  font-size: 1.05rem;
}
.external-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.external-links li {
  margin: 0.45rem 0;
}
.external-links a,
.about-text .external-links a:link,
.about-text .external-links a:visited {
  color: #ffffff; /* force white for legibility on blue */
  text-decoration: underline;
  font-weight: 700;
  font-size: 1rem;
}
.about-text .external-links a:hover {
  color: #fff;
}

.sponsor-section {
  display: block; /* simplified layout now the image is removed */
  text-align: center; /* center all text inside sponsor sections */
  margin-bottom: 2.5rem;
}


.sponsor-text {
  color: #e5e7eb;
  padding: 1rem;
  /* background handled by the shared premium panel gradient above */
  border-radius: var(--radius);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  display: block;
  padding: 1.5rem; /* breathing room */
  max-width: none;    /* allow the box to span the full content width */
  width: 100%;
  box-sizing: border-box;
}

.sponsor-text h2 {
  margin-top: 0; /* title at the very top */
  /* responsive heading size (increased) */
  font-size: clamp(1.8rem, 3.2vw + 0.6rem, 3rem);
}

.sponsor-text p,
.sponsor-text ul {
  /* responsive body size: shrinks on smaller viewports so larger blocks fit better */
  font-size: clamp(1.05rem, 1.6vw + 0.45rem, 1.25rem);
  line-height: 1.6;
}

.sponsor-text ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0; /* separate from paragraph */
}
.sponsor-text ul li {
  margin: 0.6rem 0;
  font-size: clamp(1.05rem, 1.6vw + 0.45rem, 1.25rem);
}

/* Center the sections below the main sponsor box and reduce excessive side gaps */
.sponsor-contact .contact-bubble,
.sponsor-open,
.donation-info {
  text-align: center;
  max-width: 980px;
  margin: 1rem auto;
  padding: 1.25rem 1.5rem; /* inside-box breathing room so text doesn't touch edges */
  border-radius: var(--radius);
}

/* Make list markers align with the paragraph text inside the padded .sponsor-text box */
.sponsor-text ul {
  margin: 0.5rem 0 0;
  padding-left: 0; /* remove browser default indent */
  list-style-position: inside; /* put bullets inside the content flow so they line up */
}

.sponsor-text ul li {
  margin: 0.5rem 0;
  padding-left: 0.25rem; /* small spacing so wrapped lines don't touch the marker */
}

.contact-email {
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  font-weight: 700;
  color: #facc15;
  word-break: break-word;
  margin: 0.6rem 0 0.25rem;
}

.contact-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.contact-image {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* push the image to the right side of its column */
  padding-right: 1.5rem; /* small breathing room from the column edge */
}

.contact-image img {
  width: 100%;
  height: auto;
  max-width: 640px;
  border-radius: 1rem;
  display: block;
}

.contact-info h2 {
  margin-top: 0;
  font-size: 2.2rem;
}

.contact-info p {
  font-size: 1rem;
}

@media (max-width: 768px) {
  .contact-section {
    grid-template-columns: 1fr;
  }
  .contact-image img {
    max-width: 100%;
  }
  /* reduce large desktop-only spacing on small screens */
  .hero {
    margin-bottom: 2rem;
  }
  .highlight-grid {
    margin-top: 1rem;
  }
}

/* Stack image above text for about and sponsor sections on narrower screens */
@media (max-width: 900px) {
  .about-section,
  .sponsor-section {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  /* let the images take a sensible height so they don't collapse */
  .about-image,
  .sponsor-image {
    width: 100%;
    aspect-ratio: 3 / 2; /* wider on mobile for better presence */
    max-height: none;
    min-height: 260px;
    background-size: cover; /* ensure background images cover the area */
    background-position: center;
  }

  /* remove desktop-only min-heights on text panels so they flow naturally */
  .about-text,
  .sponsor-text {
    min-height: auto;
    padding-top: 1rem;
  }

  /* ensure the title is near the top and spacing is reduced */
  .about-text h2,
  .sponsor-text h2 {
    margin-top: 0;
  }
}