:root{
  --bg:#0b1220;
  --card: rgba(255,255,255,0.08);
  --card2: rgba(255,255,255,0.12);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.72);
  --brand:#1ec9a5;
  --brand2:#4da3ff;
  --shadow: 0 18px 60px rgba(0,0,0,0.45);
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#061021 0%, #070b12 100%);color:var(--text);font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 18px}
.nav{
  position:sticky;top:0;z-index:30;
  backdrop-filter: blur(14px);
  background: rgba(5,10,18,0.62);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:42px;height:42px}
.brand .title{display:flex;flex-direction:column;line-height:1.1}
.brand .title strong{font-size:15px;letter-spacing:0.6px}
.brand .title span{font-size:12px;color:var(--muted)}
.links{display:flex;align-items:center;gap:18px}
.links a{padding:10px 10px;border-radius:12px;color:var(--muted)}
.links a.active, .links a:hover{background:rgba(255,255,255,0.08);color:var(--text)}
.menu-btn{display:none;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.06);color:var(--text);padding:10px 12px;border-radius:12px}
.hero{
  position:relative;overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,0.10);
}
.hero-bg{
  position:absolute;inset:0;
  background-image:url('../img/pack-cyclists.jpg');
  background-size:cover;background-position:center;
  filter:saturate(1.05) contrast(1.05);
  transform:scale(1.03);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background: radial-gradient(60% 60% at 20% 20%, rgba(77,163,255,0.18) 0%, rgba(0,0,0,0) 65%),
              radial-gradient(70% 70% at 80% 30%, rgba(30,201,165,0.16) 0%, rgba(0,0,0,0) 60%),
              linear-gradient(180deg, rgba(6,16,33,0.35) 0%, rgba(6,16,33,0.86) 60%, rgba(6,16,33,0.98) 100%);
}
.hero-inner{position:relative;padding:64px 0 34px}
.kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid rgba(255,255,255,0.16);border-radius:999px;background:rgba(255,255,255,0.06);color:var(--muted);font-size:13px}
.dot{width:8px;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand2))}
.hero h1{margin:14px 0 10px;font-size:44px;letter-spacing:-0.8px}
.hero p{margin:0;color:var(--muted);font-size:16px;max-width:70ch;line-height:1.6}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,0.16);background:rgba(255,255,255,0.06)}
.btn.primary{background:linear-gradient(90deg,rgba(30,201,165,0.92),rgba(77,163,255,0.92));border-color:transparent;color:#05101f;font-weight:700}
.btn:hover{transform:translateY(-1px)}
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.section{padding:34px 0}
.section h2{margin:0 0 10px;font-size:26px;letter-spacing:-0.4px}
.section p.lead{margin:0 0 16px;color:var(--muted);line-height:1.7}
.card{
  border:1px solid rgba(255,255,255,0.12);
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05));
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card .pad{padding:18px}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted);line-height:1.6}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.badge{font-size:12px;color:rgba(255,255,255,0.82);border:1px solid rgba(255,255,255,0.14);padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.06)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px 10px;border-bottom:1px solid rgba(255,255,255,0.10);text-align:left;vertical-align:top}
.table th{color:rgba(255,255,255,0.80);font-weight:600;font-size:13px}
.table td{color:rgba(255,255,255,0.90)}
.footer{padding:26px 0;color:var(--muted);border-top:1px solid rgba(255,255,255,0.10)}
.footer a{color:rgba(255,255,255,0.86);text-decoration:underline}
.banner{
  position:relative;overflow:hidden;
  background-image:url('../img/sunrise-bicycle.jpg');
  background-size:cover;background-position:center;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--radius);
}
.banner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(6,16,33,0.92) 0%, rgba(6,16,33,0.72) 55%, rgba(6,16,33,0.40) 100%);
}
.banner .pad{position:relative;padding:18px}
.avatar{width:54px;height:54px;border-radius:16px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.row{display:flex;gap:14px;align-items:center}
.small{font-size:13px;color:var(--muted)}
.search{
  display:flex;gap:10px;flex-wrap:wrap;
  padding:12px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  margin:14px 0 0;
}
.search input{
  flex:1;min-width:220px;
  background:transparent;border:1px solid rgba(255,255,255,0.12);color:var(--text);
  padding:12px 12px;border-radius:14px;outline:none;
}
.search select{
  background:transparent;border:1px solid rgba(255,255,255,0.12);color:var(--text);
  padding:12px 12px;border-radius:14px;outline:none;
}
@media (max-width: 880px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .hero h1{font-size:36px}
  .links{display:none}
  .menu-btn{display:inline-flex}
  .links.open{display:flex;position:absolute;left:0;right:0;top:64px;flex-direction:column;gap:0;background:rgba(5,10,18,0.92);border-bottom:1px solid rgba(255,255,255,0.10);padding:10px 18px}
  .links.open a{width:100%}
}


.notice{padding:12px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.04);color:rgba(255,255,255,.86)}


/* ===== Improved contrast for hero sections with image backdrops ===== */
.hero{
  position: relative;
  color: #ffffff;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.30),
      rgba(0,0,0,0.18) 45%,
      rgba(0,0,0,0.38)
    );
  z-index:0;
}

.hero > *{
  position: relative;
  z-index:1;
}

.hero h1,
.hero p,
.hero .kicker{
  text-shadow:
    0 2px 4px rgba(0,0,0,0.65),
    0 6px 18px rgba(0,0,0,0.55);
}

.kicker{
  background: rgba(0,0,0,0.45);
  border-color: rgba(255,255,255,0.35);
}


/* ===== Hero image system ===== */
.hero{
  position: relative;
  min-height: 320px;
  padding: 48px 28px;
  border-radius: 20px;
  overflow: hidden;
}

.hero-image{
  background-size: cover;
  background-position: center;
}

.hero-dark::before{
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.70),
    rgba(0,0,0,0.45) 40%,
    rgba(0,0,0,0.75)
  );
}

.hero-light::before{
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.30) 40%,
    rgba(0,0,0,0.60)
  );
}

/* ===== Badges ===== */
.badges{
  display:flex;
  gap:12px;
  margin-top:16px;
  flex-wrap:wrap;
}

.badge-img{
  height:48px;
  background:rgba(255,255,255,0.9);
  padding:6px 10px;
  border-radius:10px;
}


/* ===== Hero with per-page background image ===== */
.hero{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
}
.hero[data-bg]{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero .hero-inner{
  background: linear-gradient(
    to bottom,
    rgba(10,14,25,0.40),
    rgba(10,14,25,0.28)
  );
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

/* default overlay (medium) */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.62),
      rgba(0,0,0,0.42) 40%,
      rgba(0,0,0,0.68)
    );
  z-index:0;
}

/* stronger overlay for bright images */
.hero.hero-contrast-strong::before{
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.78),
      rgba(0,0,0,0.58) 40%,
      rgba(0,0,0,0.82)
    );
}
/* lighter overlay for already-dark images */
.hero.hero-contrast-soft::before{
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.55),
      rgba(0,0,0,0.35) 45%,
      rgba(0,0,0,0.62)
    );
}

.hero > *{ position: relative; z-index: 1; }
.hero h1, .hero p, .hero .kicker{
  text-shadow: 0 2px 4px rgba(0,0,0,0.65), 0 10px 26px rgba(0,0,0,0.55);
}

.hero .badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
  align-items:center;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(0,0,0,0.35);
  text-decoration:none;
  color: rgba(255,255,255,0.92);
  font-size: 12px;
}
.chip:hover{ background: rgba(0,0,0,0.48); border-color: rgba(255,255,255,0.36); }
.chip .dot{
  width:10px;height:10px;border-radius:99px;
  background: rgba(255,255,255,0.9);
  opacity: 0.85;
}
.chip.secondary{
  background: rgba(255,255,255,0.10);
  border-color: rgba(122,162,255,0.55);
}
@media (min-width: 900px){
  .hero{ min-height: 380px; }
  .hero .hero-inner{ padding: 34px 30px; }
}


/* ===== Rider badges & indicators ===== */
.rider-card{
  position: relative;
  cursor: pointer;
}
.rider-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 12px;
}
.sr-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.badge-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.26);
  font-size: 12px;
  color: rgba(255,255,255,0.92);
}
.badge-pill strong{font-weight:700}
.indicators{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.indicator{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(122,162,255,0.45);
  background: rgba(122,162,255,0.14);
  font-size: 12px;
}
.indicator.off{
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75);
}
.indicator .mini{
  width:10px;height:10px;border-radius:99px;background: rgba(255,255,255,0.9);opacity:.8;
}

/* ===== Modal ===== */
.modal{
  position: fixed;
  inset: 0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 1000;
}
.modal.open{ display:flex; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.66);
  backdrop-filter: blur(6px);
}
.modal-card{
  position: relative;
  width: min(920px, 96vw);
  max-height: min(86vh, 860px);
  overflow:auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(16,22,40,0.92);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.modal-header{
  display:flex;
  gap:16px;
  padding: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.modal-avatar{
  width:72px;height:72px;border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  overflow:hidden;
  flex: 0 0 auto;
}
.modal-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.modal-title h2{margin:0 0 4px; font-size: 20px}
.modal-title p{margin:0; color: rgba(255,255,255,0.75)}
.modal-body{ padding: 18px; }
.modal-close{
  position:absolute;
  top: 14px;
  right: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.9);
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
}
.modal-close:hover{ background: rgba(0,0,0,0.38); }

.history{
  margin-top: 14px;
  display:grid;
  gap: 12px;
}
.history .season{
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  padding: 12px;
}
.history .season h3{
  margin:0 0 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.86);
  letter-spacing: .2px;
}
.history ul{ margin:0; padding-left: 18px; color: rgba(255,255,255,0.78); }
.history li{ margin: 6px 0; }


/* ===== Extra contrast for hero taglines / quotes ===== */
.hero-quote{
  display:inline-block;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background:
    linear-gradient(
      to right,
      rgba(0,0,0,0.78),
      rgba(0,0,0,0.62)
    );
  border: 1px solid rgba(255,255,255,0.28);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: .2px;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.75),
    0 10px 28px rgba(0,0,0,0.65);
}


/* ===== Subtle stats strip ===== */
.stats-strip{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.stat{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.24);
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  letter-spacing: .2px;
}
.stat .dot{
  width:10px; height:10px; border-radius:99px;
  background: rgba(255,255,255,0.9);
  opacity: .85;
}


/* ===== Hero content readability refinement ===== */
.hero .lead{
  color: rgba(255,255,255,0.95);
  max-width: 60ch;
}
.hero h1, .hero h2{
  color: rgba(255,255,255,0.98);
}

/* Chips and CTAs inside hero */
.hero .chip{
  background: rgba(0,0,0,0.38);
  border-color: rgba(255,255,255,0.32);
}
.hero .btn{
  background: rgba(122,162,255,0.20);
  border-color: rgba(122,162,255,0.45);
}
.hero .btn:hover{
  background: rgba(122,162,255,0.30);
}


/* Extra contrast for stats strip on hero */
.hero .stats-strip .stat{
  background: rgba(0,0,0,0.42);
  border-color: rgba(255,255,255,0.32);
}


/* ===== FINAL HERO OVERRIDES (stabilize banner styling) ===== */
/* We keep a single, predictable hero system: background-image on <section class="hero"> */
.hero{
  margin-top: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  overflow: hidden;
  min-height: 360px;
  padding: 0 !important; /* avoid conflicting hero padding rules */
  color: rgba(255,255,255,0.95);
}
.hero.hero-image{
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* Disable legacy background layer to prevent double overlays */
.hero .hero-bg{ display:none !important; }

/* Single overlay for readability */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.42) 45%,
    rgba(0,0,0,0.70) 100%
  );
  z-index:0;
}
.hero > *{ position: relative; z-index:1; }

/* Remove any glass panel stacking; keep content clean */
.hero .hero-inner{
  padding: 68px 0 40px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.hero .kicker{
  background: rgba(0,0,0,0.35) !important;
  border-color: rgba(255,255,255,0.28) !important;
}
.hero h1{ color: rgba(255,255,255,0.98) !important; }
.hero p{ color: rgba(255,255,255,0.88) !important; max-width: 70ch; }
.hero .btn{ background: rgba(0,0,0,0.28) !important; border-color: rgba(255,255,255,0.22) !important; }
.hero .btn.primary{ background: linear-gradient(90deg,rgba(30,201,165,0.92),rgba(77,163,255,0.92)) !important; border-color: transparent !important; }

@media (max-width: 880px){
  .hero{ min-height: 320px; }
  .hero .hero-inner{ padding: 54px 0 34px !important; }
  .hero h1{ font-size: 34px; }
}


/* ===== Banner interaction fix: overlays must not intercept clicks ===== */
.hero::before,
.hero::after,
.hero-bg{
  pointer-events: none !important;
}