:root {
  --primary:       #800000;
  --primary-dark:  #5c0000;
  --primary-light: #a52a2a;
  --secondary:     #f5e6e6;
  --accent:        #ffd700;
  --dark:          #1a1a1a;
  --gray:          #6b7280;
  --light:         #f8f8f8;
}

.cl-hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0d0505;
  padding-top: 80px; 
}
.cl-hero-bg {
  position: absolute;
  inset: 0;
  background: url('../img/clubs-banner.webp') center/cover no-repeat;
  filter: brightness(0.3) saturate(1.2);
  transform: scale(1.05);
  animation: clHeroZoom 22s ease-in-out infinite alternate;
}
@keyframes clHeroZoom { from{transform:scale(1.05)} to{transform:scale(1.12)} }
.cl-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(128,0,0,0.65) 0%, rgba(13,5,5,0.92) 100%);
}
.cl-hero-particles { position:absolute;inset:0;overflow:hidden;pointer-events:none; }
.cl-particle {
  position:absolute;width:3px;height:3px;
  background:rgba(255,215,0,0.6);border-radius:50%;
  animation:clFloat linear infinite;
}
@keyframes clFloat {
  0%  {transform:translateY(100vh) rotate(0deg);opacity:0}
  10% {opacity:0.8}
  90% {opacity:0.5}
  100%{transform:translateY(-20px) rotate(720deg);opacity:0}
}
.cl-hero-content {
  position:relative;z-index:10;text-align:center;
  color:#fff;padding:0 1.5rem;max-width:900px;
}
.cl-hero-badge {
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(255,215,0,0.12);border:1px solid rgba(255,215,0,0.4);
  color:#ffd700;padding:.45rem 1.4rem;border-radius:50px;
  font-size:.78rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  margin-bottom:1.5rem;backdrop-filter:blur(10px);
  opacity:0;animation:clFadeUp .8s ease forwards .2s;
}
.cl-hero-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(2.8rem,8vw,5.5rem);font-weight:700;line-height:1.1;
  margin-bottom:1.25rem;opacity:0;animation:clFadeUp .8s ease forwards .4s;
}
.cl-hero-title span {
  background:linear-gradient(135deg,#fff 0%,#ffd700 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.cl-hero-desc {
  font-size:clamp(1rem,2vw,1.2rem);color:rgba(255,255,255,.82);
  max-width:600px;margin:0 auto 2.5rem;line-height:1.8;
  opacity:0;animation:clFadeUp .8s ease forwards .6s;
}
.cl-hero-stats {
  display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;
  opacity:0;animation:clFadeUp .8s ease forwards .8s;
}
.cl-hero-stat {
  text-align:center;padding:.9rem 1.4rem;
  background:rgba(255,255,255,.07);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.14);border-radius:14px;min-width:105px;
}
.cl-hero-stat-num {
  font-family:'Playfair Display',serif;font-size:1.9rem;
  font-weight:700;color:#ffd700;line-height:1;
}
.cl-hero-stat-label {
  font-size:.72rem;color:rgba(255,255,255,.65);
  text-transform:uppercase;letter-spacing:1px;margin-top:.3rem;
}
.cl-scroll-hint {
  position:absolute;bottom:1.25rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  color:rgba(255,255,255,.45);font-size:.68rem;letter-spacing:2px;
  text-transform:uppercase;animation:clBounce 2s infinite;z-index:100;
}
.cl-scroll-hint::after {
  content:'';width:1px;height:30px;
  background:linear-gradient(to bottom,rgba(255,255,255,.45),transparent);
}
@keyframes clFadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes clBounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-7px)} }

.cl-section-label {
  display:inline-block;font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:3px;
  color:var(--primary);background:var(--secondary);
  padding:.4rem 1.2rem;border-radius:30px;margin-bottom:1rem;
}
.cl-section-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,5vw,3rem);font-weight:700;
  color:var(--dark);line-height:1.2;margin-bottom:1.25rem;
}
.cl-section-title span { color:var(--primary); }
.cl-section-sub { font-size:1.05rem;color:var(--gray);max-width:580px;margin:0 auto;line-height:1.8; }

.cl-stats-strip {
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
  padding:3.5rem 0;
}
.cl-stat-num {
  font-family:'Playfair Display',serif;
  font-size:clamp(2.5rem,5vw,3.5rem);font-weight:700;color:#ffd700;line-height:1;
}
.cl-stat-lbl {
  font-size:.82rem;color:rgba(255,255,255,.72);
  text-transform:uppercase;letter-spacing:2px;margin-top:.4rem;
}

.cl-overview {
  padding:clamp(4rem,10vw,8rem) 0;
  background:#fff;
}
.cl-overview-text {
  font-size:1.05rem;color:var(--gray);line-height:1.9;margin-bottom:1.5rem;
}

.cl-explorer {
  padding:clamp(3rem,8vw,6rem) 0;
  background:var(--light);
}
.cl-search-wrap {
  position:relative;max-width:600px;margin:0 auto 2rem;
}
.cl-search-wrap i {
  position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);
  color:var(--primary);font-size:1.1rem;pointer-events:none;
}
.cl-search-wrap input {
  width:100%;padding:.9rem 1.25rem .9rem 3.2rem;
  border:2px solid rgba(128,0,0,.12);border-radius:50px;
  font-size:1rem;background:#fff;
  transition:border-color .3s,box-shadow .3s;outline:none;
}
.cl-search-wrap input:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(128,0,0,.08);
}
.cl-filter-group {
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-bottom:3rem;
}
.cl-filter-btn {
  padding:.5rem 1.4rem;border-radius:50px;
  border:2px solid rgba(128,0,0,.12);background:#fff;
  color:var(--dark);font-weight:600;font-size:.88rem;
  cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);
}
.cl-filter-btn:hover {
  border-color:var(--primary);color:var(--primary);transform:translateY(-2px);
}
.cl-filter-btn.active {
  background:var(--primary);color:#fff;border-color:var(--primary);
  box-shadow:0 6px 20px rgba(128,0,0,.25);
}

.cl-card {
  background:#fff;border-radius:22px;overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 30px rgba(0,0,0,.06);
  transition:all .4s cubic-bezier(.175,.885,.32,1.275);
  height:100%;display:flex;flex-direction:column;
  position:relative;
}
.cl-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  opacity:0;transition:opacity .3s;
}
.cl-card:hover { transform:translateY(-10px) scale(1.01); box-shadow:0 25px 60px rgba(128,0,0,.14); }
.cl-card:hover::before { opacity:1; }
.cl-card-img {
  height:200px;overflow:hidden;position:relative;
}
.cl-card-img img {
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;display:block;
}
.cl-card:hover .cl-card-img img { transform:scale(1.08); }
.cl-card-body { padding:1.5rem;flex:1;display:flex;flex-direction:column; }
.cl-card-tags { display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem; }
.cl-tag {
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
  padding:.25rem .8rem;border-radius:50px;
  background:var(--secondary);color:var(--primary);
  border:1px solid rgba(128,0,0,.12);
}
.cl-card-title {
  font-family:'Playfair Display',serif;font-size:1.3rem;
  font-weight:700;color:var(--dark);margin-bottom:.75rem;
}
.cl-card-stats {
  display:flex;justify-content:space-between;
  background:rgba(128,0,0,.03);border-radius:12px;
  padding:.75rem .5rem;margin-bottom:1rem;
}
.cl-stat-item { text-align:center;flex:1; }
.cl-stat-item .num {
  font-size:1.3rem;font-weight:800;color:var(--primary);line-height:1;
}
.cl-stat-item .lbl { font-size:.68rem;color:var(--gray);text-transform:uppercase;letter-spacing:.8px;margin-top:.2rem; }
.cl-card-desc {
  font-size:.92rem;color:#555;line-height:1.7;margin-bottom:1rem;flex:1;
}
.cl-card-leaders { border-top:1px dashed #e5e5e5;padding-top:.9rem;margin-bottom:1rem; }
.cl-leader-row {
  display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem;font-size:.82rem;color:var(--gray);
}
.cl-leader-dot {
  width:22px;height:22px;background:var(--primary);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.65rem;flex-shrink:0;
}
.cl-card-action { margin-top:auto; }
.cl-learn-btn {
  display:block;text-align:center;background:var(--primary);color:#fff;
  padding:.65rem 1.5rem;border-radius:50px;font-weight:700;font-size:.88rem;
  text-decoration:none;transition:all .3s ease;
  box-shadow:0 4px 15px rgba(128,0,0,.25);
}
.cl-learn-btn:hover {
  background:var(--primary-dark);color:#fff;
  transform:translateY(-2px);box-shadow:0 8px 25px rgba(128,0,0,.35);
}

.cl-join {
  padding:clamp(4rem,10vw,8rem) 0;
  background:#fff;
}
.cl-timeline { position:relative;padding-left:24px; }
.cl-timeline::before {
  content:'';position:absolute;left:0;top:10px;bottom:10px;
  width:2px;background:linear-gradient(to bottom,var(--primary),rgba(128,0,0,.1));
  border-radius:2px;
}
.cl-step { position:relative;margin-bottom:2rem; }
.cl-step::after {
  content:'';position:absolute;left:-30px;top:22px;
  width:10px;height:10px;background:var(--primary);
  border-radius:50%;border:2px solid #fff;z-index:1;
}
.cl-step-card {
  background:rgba(255,255,255,.8);backdrop-filter:blur(10px);
  border:1px solid rgba(128,0,0,.06);border-radius:20px;
  padding:1.5rem;transition:all .4s ease;
  box-shadow:0 6px 25px rgba(0,0,0,.04);
}
.cl-step-card:hover {
  transform:translateX(8px);background:#fff;
  box-shadow:0 12px 35px rgba(128,0,0,.08);
  border-color:rgba(128,0,0,.15);
}
.cl-step-card.active { border-left:5px solid var(--primary); }
.cl-step-header { display:flex;align-items:center;gap:1rem;margin-bottom:.75rem; }
.cl-step-num {
  width:44px;height:44px;background:var(--primary);color:#fff;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1rem;flex-shrink:0;
  box-shadow:0 5px 15px rgba(128,0,0,.3);
}
.cl-step-title { font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;color:var(--dark);margin:0; }
.cl-step-desc { font-size:.92rem;color:var(--gray);line-height:1.7;margin:0; }
.cl-join-img-wrap {
  position:relative;border-radius:24px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.12);
}
.cl-join-img-wrap img { width:100%;display:block;transition:transform .6s ease; }
.cl-join-img-wrap:hover img { transform:scale(1.03); }
.cl-join-badge {
  position:absolute;top:1.5rem;right:1.5rem;
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  padding:.75rem 1.25rem;border-radius:50px;
  display:flex;align-items:center;gap:.5rem;
  font-weight:700;color:var(--primary);font-size:.9rem;
  box-shadow:0 8px 25px rgba(0,0,0,.1);
  animation:clBadgeFloat 4s ease-in-out infinite;
}
@keyframes clBadgeFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

.cl-cta {
  padding:clamp(4rem,10vw,7rem) 0;
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
  text-align:center;position:relative;overflow:hidden;
}
.cl-cta::before {
  content:'';position:absolute;top:-40%;right:-8%;
  width:550px;height:550px;background:rgba(255,215,0,.05);
  border-radius:50%;pointer-events:none;
}
.cl-cta-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,5vw,3rem);font-weight:700;color:#fff;margin-bottom:1rem;
}
.cl-cta-desc { color:rgba(255,255,255,.82);font-size:1.1rem;max-width:540px;margin:0 auto 2.5rem;line-height:1.8; }
.cl-cta-btn {
  display:inline-flex;align-items:center;gap:.6rem;
  background:#ffd700;color:#5c0000;padding:1rem 2.5rem;
  border-radius:50px;font-weight:700;font-size:1rem;
  text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.2);
  transition:all .3s ease;
}
.cl-cta-btn:hover { background:#fff;color:var(--primary);transform:translateY(-3px);box-shadow:0 15px 40px rgba(0,0,0,.3); }
.cl-cta-btn-outline {
  display:inline-flex;align-items:center;gap:.6rem;
  background:transparent;color:#fff;padding:1rem 2.5rem;
  border-radius:50px;font-weight:700;font-size:1rem;
  text-decoration:none;border:2px solid rgba(255,255,255,.4);
  transition:all .3s ease;
}
.cl-cta-btn-outline:hover { background:rgba(255,255,255,.1);border-color:#fff;color:#fff;transform:translateY(-3px); }

@media (max-width:1200px) { .cl-hero-stats{gap:1.25rem} }
@media (max-width:992px) {
  .cl-timeline{padding-left:0}
  .cl-timeline::before,.cl-step::after{display:none}
  .cl-step-card:hover{transform:translateY(-4px)}
}
@media (max-width:768px) {
  .cl-hero{min-height:100svh;min-height:100vh;padding:6rem 1rem 3rem}
  .cl-hero-stats{gap:.75rem}
  .cl-hero-stat{min-width:88px;padding:.7rem .9rem}
  .cl-hero-stat-num{font-size:1.5rem}
  .cl-filter-group{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.5rem;scrollbar-width:none}
  .cl-filter-group::-webkit-scrollbar{display:none}
  .cl-filter-btn{white-space:nowrap}
}
@media (max-width:480px) {
  .cl-hero { padding: 5rem 0.75rem 2.5rem; }
  .cl-hero-stats{gap:.5rem}
  .cl-hero-stat{min-width:78px;padding:.6rem .75rem}
  .cl-card-stats .num{font-size:1.1rem}
}