/* -------------  THEME VARIABLES  ------------- */
:root{
  --bg-900:#0d1117;
  --bg-800:#161b22;
  --bg-700:#1e2530;
  --text-100:#c9d1d9;
  --accent:#9b59b6;
  --accent-hover:#b983d0;
  --radius:0.75rem;
  --shadow:0 8px 16px rgb(0 0 0 / .25);
  font-family:"Inter",system-ui,Arial,sans-serif;
}

/* -------------  GLOBAL ------------- */
html,body{background:var(--bg-900);color:var(--text-100);}
a, .btn-link{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
.btn-accent{
  background:var(--accent);
  border:none;
  color:#fff;
  padding:.55rem 1.25rem;
  border-radius:var(--radius);
  transition:background .25s;
}
.btn-accent:hover{background:var(--accent-hover)}

/* === LARGER HERO BUTTON & VERTICAL PLACEMENT =================== */
.btn-member{
  padding:.6rem 1.75rem;   /* bigger than 'btn-slim', but still neat */
  font-size:1.05rem;
  font-weight:600;
  top:75%;                 /* <-- 3/4 down the banner */
  transform:translate(-50%,-50%); /* keep perfect centering */
}


/* slim variant used in the hero */
.btn-slim{
  padding: .35rem 1rem;   /* much less horizontal space */
  font-size: .9rem;
}

.section-heading{
  font-size:1.8rem;
  font-weight:600;
  margin-bottom:1.2rem;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.category-heading{
  font-size:1.4rem;
  margin-bottom:1rem;
}

/* -------------  NAV BAR ------------- */
/* ==== NAV BAR LAYOUT ===================================== */
.main-nav{
  /*  bring the bar in from the left & right  */
  width:94%;                  /*  or try 90% / 100%-60px  */
  max-width:1400px;           /*  don’t let it grow forever on 4K screens  */
  margin:.75rem auto;         /*  centres it and gives top/btm breathing-room  */
  border-radius:var(--radius);
  backdrop-filter:blur(8px);
  background:rgba(13,17,23,.85);
  box-shadow:var(--shadow);
  padding-inline:1.25rem;     /*  adds a little inner air  */
}

/* ==== NAV LINKS (make them visible immediately) ========== */
.nav-link{
  color:var(--text-100);      /*  light grey text on dark bg  */
  position:relative;
  margin-inline:.55rem;
  transition:color .25s;
}
.nav-link:hover,
.nav-link:focus{color:#fff;}  /*  brighter on hover  */

/* -------------  HERO ------------- */
/* ── HERO  with dual-gradient fade ───────────────────────── */
/* .hero-banner{
/*   height:400px;                     /* mobile / tablet */
  /* note: three backgrounds, rendered top-to-bottom */
/*   background:
      /* 1. heavy bottom fade  */
/*       linear-gradient(
/*         to bottom,
/*         rgba(13,17,23,0) 55%,       /* transparent halfway down */
/*         rgba(13,17,23,0.98) 100%    /* almost solid at very bottom */
/*       ),
/*       /* 2. light top fade     */
/*       linear-gradient(
/*         to top,
/*         rgba(13,17,23,0) 85%,       /* mostly transparent */
/*         rgba(13,17,23,0.45) 100%    /* gentle darkening at very top */
/*       ),
 /*      /* 3. the actual banner  */
/*       url('/assets/images/banner.jpg') center/cover no-repeat;
/*   position:relative;                /* (already needed for the button)   *//* 
}
/* @media (min-width:992px){           /* desktop / up */
/*   .hero-banner{height:540px;}
/* }

/* === HERO with dual gradients ================================= */
.hero-banner{
  position:relative;
  overflow:hidden;
  height:400px;
}
@media (min-width:992px){ .hero-banner{height:540px;} }

/* The gradient overlay (sits ABOVE every slide) */
.hero-banner::after{
  content:'';
  position:absolute; inset:0;
  background:
    /* heavy bottom fade */  linear-gradient(to bottom,
        rgba(13,17,23,0) 55%, rgba(13,17,23,.92) 100%),
    /* light top fade  */   linear-gradient(to top,
        rgba(13,17,23,0) 85%, rgba(13,17,23,.45) 100%);
  pointer-events:none;
}

/* === SLIDE IMAGES  (cross-fade via opacity) ==================== */
.hero-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1s ease-in-out;
}
.hero-img.active{ opacity:1; }

/* === THE CTA BUTTON  (same as before, but larger & 75% down) === */
.btn-member{
  padding:.6rem 1.75rem;
  font-size:1.05rem; font-weight:600;
  top:75%; transform:translate(-50%,-50%);
}

/* ── ABOUT SECTION ─────────────────────────────────────────── */
.about{
  background:var(--bg-800);
  border-top:1px solid var(--bg-700);
  border-bottom:1px solid var(--bg-700);
}

/* ── BUNDLE CARDS ──────────────────────────────────────────── */
.bundle-card{
  background:var(--bg-900);
  border:1px solid var(--bg-700);
  border-radius:var(--radius);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.bundle-card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:var(--shadow);
  border-color:var(--accent);
}

.bundle-title{
  font-size:1.25rem;
  font-weight:600;
  color:#fff;
}
.bundle-text{
  color:#8b949e;           /* subtle grey */
  line-height:1.45;
}


/* -------------  VIDEO CARDS ------------- */
.video-card{
  background:var(--bg-800);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 0 0 1px var(--bg-700);
  transition:transform .25s, box-shadow .25s;
}
.video-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}
.thumb-wrapper{
  position:relative;
  display:block;
  overflow:hidden;
}
.thumb-wrapper img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  transition:transform .3s;
}
.video-card:hover img{transform:scale(1.05);}
.badge.duration{
  position:absolute;
  right:.5rem;bottom:.5rem;
  background:rgba(0,0,0,.75);
  color:#fff;
  font-size:.75rem;
  padding:.25rem .45rem;
  border-radius:.3rem;
}
.video-card .title{
  font-size:.9rem;
  margin:.65rem .7rem .1rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.video-card .meta{
  font-size:.75rem;
  margin-left:.7rem;
  padding-bottom:.8rem;
  color:#8b949e;
}

.video-grid > .col-6           { flex:0 0 50%;   max-width:50%;  } /* xs */
@media (min-width:768px){ /* md */
  .video-grid > .col-md-4      { flex:0 0 33.333%; max-width:33.333%; }
}
@media (min-width:992px){ /* lg */
  .video-grid > .col-lg-3      { flex:0 0 25%;   max-width:25%;  }
}

/* -------------  FOOTER ------------- */
footer{
  background:var(--bg-700);
  color:#8b949e;
}