/* hero */
.hero{ position:relative; min-height:64vh; display:flex; align-items:center; overflow:hidden; }
.hero-image{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition: transform 600ms cubic-bezier(.2,.9,.2,1);
  /* no gradient overlay per request */
}
.hero-overlay{ position:relative; z-index:2; padding:5.0rem 1rem; max-width:var(--hero-max-width); color:white; }
.hero-text{
  font-weight:800; font-size: clamp(2.45rem, 6.8vw, 5.2rem); line-height:0.95; margin:0 0 1rem 0; text-align:left; color: #fff;
  letter-spacing:-0.02em;
  text-shadow: 0 10px 26px rgba(0,0,0,0.45);
}
.hero-sub{ margin-top:0.6rem; color:rgba(255,255,255,0.9); font-weight:500; text-align:left; max-width:46ch; }
.hero-copy{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.4rem;
  padding:2.6rem 2.4rem;
  width:min(100%, 860px);
  min-width: clamp(320px, 62vw, 820px);
  min-height: clamp(240px, 38vw, 380px);
  color:#fff;
  isolation:isolate;
}
.hero-copy::before{
  content:"";
  position:absolute;
  inset:-0.35rem -0.4rem -0.45rem;
  background:
    radial-gradient(118% 110% at 30% 32%, rgba(10,12,16,0.82) 12%, rgba(10,12,16,0.62) 44%, rgba(10,12,16,0.22) 78%, rgba(10,12,16,0) 96%),
    radial-gradient(120% 110% at 80% 20%, rgba(235,0,40,0.16) 12%, rgba(235,0,40,0.08) 55%, rgba(235,0,40,0) 88%);
  border-radius:18px;
  filter: blur(12px);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
          backdrop-filter: blur(12px) saturate(115%);
  opacity:0.72;
  z-index:-1;
  pointer-events:none;
  box-shadow: 0 12px 32px rgba(0,0,0,0.16);
}

/* ensure line reveal animation unaffected */
.line-inner {
  display:inline-block;
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 700ms cubic-bezier(.2,.9,.2,1), opacity 420ms ease;
}
.line-inner.revealed { transform: translateX(0); opacity: 1; }


/* accent span used in typing animation */
.accent{ color:var(--accent); }

/* sponsor band marquee */
.sponsor-band{ margin:2.5rem 0; padding:1rem 0; }
.marquee{ overflow:hidden; position:relative; }
.marquee-track{ display:flex; gap:1.6rem; align-items:center; padding:12px 0; transform:translate3d(0,0,0); will-change:transform; }
.marquee-track .sponsor-logo{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:160px; height:72px; background:var(--surface); border-radius:10px; padding:8px; box-shadow:var(--shadow); transition: transform 220ms ease; overflow:hidden; }
.marquee-track .sponsor-logo img{ max-width:100%; max-height:100%; object-fit:contain; display:block; margin:auto; }

/* Ensure cloned marquee sets lay out logos horizontally */
.marquee-set {
  display: flex;
  gap: 1.6rem;
  align-items: center;
}

/* on hover pause visual */
.marquee:hover .sponsor-logo{ transform: translateY(-4px); }




/* contact & footer
   NOTE: contact form replaced by a modern CTA card (HTML)
*/
.contact{ padding:2.5rem 1rem; background:transparent; border-radius:12px; margin:2rem auto; max-width:900px; }

/* --- FIX: ensure contact section heading aligns with other headings ---
   We specifically target the contact section's h2 to match spacing used across the site.
   This avoids changing other headings globally.
*/
.contact > h2 {
  margin: 0 0 0.85rem 0;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--text);
}

/* contact card */
.contact-card{
  display:flex; flex-direction:column; gap:1rem; padding:1.4rem; border-radius:12px; align-items:flex-start;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,0.04);
}
html[data-theme="dark"] .contact-card{
  border: 1px solid rgba(255,255,255,0.03);
}
.contact-card h3{ margin:0; font-size:1.35rem; }
.contact-card p{ margin:0; color:var(--muted); }

/* Mailto CTA (button-like) */
.contact-card .mailto{
  margin-top:0.6rem; display:inline-flex; gap:.6rem; align-items:center; text-decoration:none; padding:.65rem .9rem; border-radius:10px; font-weight:800;
  background: linear-gradient(90deg,var(--accent), #ff6b3c); color:#fff;
  box-shadow: 0 8px 22px rgba(235,0,40,0.12);
}


/* responsive tweaks */
@media (max-width: 1024px){
  .hero-overlay{ padding:4.2rem 1rem; }
  .hero-copy{
    padding:2.3rem 2.05rem;
    width:min(100%, 760px);
    min-width: clamp(300px, 68vw, 720px);
    min-height: clamp(230px, 42vw, 340px);
  }
}
@media (max-width: 768px){
  .hero{
    min-height:auto;
    aspect-ratio: 16 / 9;
  }
  .hero-overlay{ padding:3.1rem 1rem; }
  .hero-copy{
    padding:1.9rem 1.65rem;
    width:min(100%, 640px);
    min-width: clamp(280px, 80vw, 600px);
    min-height: clamp(220px, 48vw, 320px);
  }
  .hero-copy::before{
    inset:-0.25rem -0.3rem -0.35rem;
    border-radius:14px;
    filter: blur(11px);
  }
  .hero-text{ font-size: clamp(2.6rem, 8vw, 3.8rem); }
  .hero-sub{ font-size:1.05rem; max-width:40ch; }
}
@media (max-width: 520px){
  .hero{ aspect-ratio: 16 / 9; }
  .hero-overlay{ padding:2.5rem .9rem; }
  .hero-copy{
    padding:1.55rem 1.35rem;
    width:100%;
    min-width: 100%;
    min-height: clamp(210px, 52vw, 300px);
  }
}