/* ============================================================
   COMPONENTS — fully fluid responsive
   No pricing, no discount codes
   ============================================================ */

/* ── HERO ── */
.hero {
  background: linear-gradient(145deg,var(--b-50) 0%,#fff 45%,var(--bg-acc) 100%);
  padding: var(--s20) 0;
  position: relative; overflow: hidden;
}
.hero::before {
  content:''; position:absolute; top:-120px; right:-120px;
  width:500px; height:500px;
  background:radial-gradient(circle,rgba(63,174,233,.09) 0%,transparent 65%);
  pointer-events:none;
}
.hero::after {
  content:''; position:absolute; bottom:-100px; left:-80px;
  width:400px; height:400px;
  background:radial-gradient(circle,rgba(97,186,70,.07) 0%,transparent 65%);
  pointer-events:none;
}
.hero-wrap { position:relative; z-index:1; }

/* Hero two-column — collapses to single column at 768px */
.hero .grid-2 { align-items: start; }

.hero-eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(11,146,214,.09); border:1px solid var(--b-200);
  color:var(--b-700); font-size:.77rem; font-weight:700;
  padding:.33rem .9rem; border-radius:var(--r-pill);
  margin-bottom:1.2rem; text-transform:uppercase; letter-spacing:.07em;
}
.hero h1              { margin-bottom:1rem; }
.hero h1 .hl-sky      { color:var(--b-600); }
.hero h1 .hl-acc      { color:var(--g-600); }
.hero-desc            { font-size:clamp(.9rem,1.6vw,1.05rem); color:var(--txt-muted); margin-bottom:2rem; line-height:1.75; max-width:510px; }
.hero-btns            { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.hero-stats           { display:flex; gap:clamp(1.25rem,3vw,2.5rem); flex-wrap:wrap; }
.stat-n               { font-family:var(--font-head); font-size:clamp(1.4rem,2.5vw,1.75rem); font-weight:900; color:var(--b-600); display:block; }
.stat-l               { font-size:.77rem; color:var(--txt-light); }

/* Hero panel */
.hero-panel { background:#fff; border:1px solid var(--b-100); border-radius:var(--r-xl); padding:1.75rem; box-shadow:var(--shd-md); }
.panel-title { font-size:.71rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--n-400); margin-bottom:1rem; }
.trend-row { display:flex; align-items:center; gap:.85rem; padding:.65rem .75rem; border-radius:var(--r-sm); border:1px solid transparent; margin-bottom:.5rem; transition:var(--ease); cursor:pointer; }
.trend-row:hover { background:var(--b-50); border-color:var(--b-100); }
.tr-icon { width:40px; height:40px; border-radius:var(--r-xs); display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0; }
.tr-name { font-size:.83rem; font-weight:600; color:var(--n-800); }
.tr-meta { font-size:.71rem; color:var(--n-400); }
.tr-badge { margin-left:auto; flex-shrink:0; }

/* ── COURSE CARD (no price) ── */
.course-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:var(--ease); display:flex; flex-direction:column; }
.course-card:hover { border-color:var(--b-200); box-shadow:0 14px 44px rgba(11,146,214,.10); transform:translateY(-4px); }
.cc-img  { height:clamp(120px,15vw,158px); display:flex; align-items:center; justify-content:center; font-size:clamp(2rem,4vw,3rem); position:relative; }
.cc-badge { position:absolute; top:12px; left:12px; }
.cc-body { padding:clamp(.9rem,2vw,1.2rem) clamp(1rem,2vw,1.35rem); flex:1; display:flex; flex-direction:column; }
.cc-cat  { font-size:.71rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.38rem; }
.cc-title { font-size:clamp(.88rem,1.4vw,.97rem); font-weight:800; color:var(--n-900); margin-bottom:.5rem; line-height:1.3; }
.cc-desc { font-size:.84rem; color:var(--txt-muted); margin-bottom:.9rem; line-height:1.55; flex:1; }
.cc-meta { display:flex; flex-wrap:wrap; gap:.6rem; font-size:.76rem; color:var(--n-400); margin-bottom:1rem; }
.cc-meta span { display:flex; align-items:center; gap:3px; }
.cc-foot { padding:.9rem clamp(1rem,2vw,1.35rem); border-top:1px solid var(--n-100); background:var(--bg-alt); display:flex; justify-content:flex-end; }

/* ── VIDEO CARD ── */
.video-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; cursor:pointer; transition:var(--ease); }
.video-card:hover { border-color:var(--b-200); box-shadow:var(--shd-md); transform:translateY(-3px); }
.vid-thumb { height:clamp(140px,14vw,162px); display:flex; align-items:center; justify-content:center; position:relative; }
.play-btn  { position:absolute; width:54px; height:54px; background:rgba(255,255,255,.92); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.14); transition:var(--ease); }
.video-card:hover .play-btn { transform:scale(1.1); background:#fff; }
.play-tri  { width:0; height:0; border-style:solid; border-width:9px 0 9px 17px; border-color:transparent transparent transparent var(--b-600); margin-left:3px; }
.vid-body  { padding:1rem clamp(.9rem,2vw,1.15rem); }
.vid-title { font-size:.92rem; font-weight:700; color:var(--n-900); margin-bottom:.28rem; line-height:1.35; }
.vid-meta  { font-size:.76rem; color:var(--n-400); }
.free-pill { display:inline-block; background:var(--b-100); color:var(--b-700); font-size:.64rem; font-weight:700; padding:.1rem .48rem; border-radius:var(--r-pill); margin-left:.4rem; }

/* Upload zone */
.upload-zone { border:2px dashed var(--b-200); border-radius:var(--r-xl); padding:clamp(1.5rem,4vw,2.75rem) 2rem; text-align:center; background:var(--b-50); cursor:pointer; transition:var(--ease); margin-top:2rem; }
.upload-zone:hover { border-color:var(--b-600); background:var(--b-50); }
.upload-icon { font-size:2.5rem; display:block; margin-bottom:.85rem; }
.upload-zone h4 { color:var(--b-700); font-size:1rem; margin-bottom:.4rem; }
.upload-zone p  { color:var(--b-600); font-size:.85rem; margin:0; }
.upload-zone small { color:var(--n-400); font-size:.77rem; }

/* ── BUNDLE SECTION ── */
.bundles-bg { background:linear-gradient(160deg,#0a1f3a 0%,#0f2d4a 50%,#0a1f3a 100%); padding:var(--s20) 0; }
.bundle-card {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-xl); padding:clamp(1.5rem,3vw,2rem);
  color:#fff; transition:var(--ease); display:flex; flex-direction:column;
}
.bundle-card:hover { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.22); transform:translateY(-4px); }
.bundle-card.bc-sky   { border-top:3px solid var(--b-400); }
.bundle-card.bc-acc   { border-top:3px solid var(--g-300); }
.bundle-card.bc-light { border-top:3px solid var(--b-400); }
.bundle-icon { font-size:2.4rem; display:block; margin-bottom:1rem; }
.bundle-card h3 { font-size:1.1rem; font-weight:900; color:#fff; margin-bottom:.6rem; }
.bundle-card > p { font-size:.87rem; opacity:.8; line-height:1.6; margin-bottom:1rem; flex:1; }
.bundle-list { margin-bottom:1.5rem; }
.bundle-list li { display:flex; align-items:flex-start; gap:.5rem; font-size:.83rem; opacity:.88; margin-bottom:.38rem; }
.bundle-list li::before { content:'✓'; font-weight:900; flex-shrink:0; color:var(--g-300); }
.bundle-cta { display:block; text-align:center; padding:.72rem; border-radius:var(--r-sm); font-weight:800; font-size:.9rem; border:2px solid rgba(255,255,255,.28); color:#fff; background:rgba(255,255,255,.1); transition:var(--ease); text-decoration:none; margin-top:auto; }
.bundle-cta:hover { background:rgba(255,255,255,.22); color:#fff; border-color:rgba(255,255,255,.55); }

/* ── CONTACT ── */
.ci-row { display:flex; align-items:flex-start; gap:.9rem; margin-bottom:1.1rem; font-size:.9rem; color:var(--txt-muted); min-width:0; }
.ci-row > div:last-child { min-width:0; flex:1; overflow-wrap:break-word; word-break:break-word; }
.ci-ico { width:40px; height:40px; min-width:40px; background:var(--b-50); border:1px solid var(--b-200); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.ci-lbl { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--n-400); margin-bottom:2px; display:block; }
.form-card { background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); padding:clamp(1.5rem,3vw,2.25rem); box-shadow:var(--shd-sm); }
#formSuccess { display:none; background:var(--b-50); border:1px solid var(--b-200); border-radius:var(--r-sm); padding:1rem 1.25rem; margin-bottom:1.5rem; color:var(--b-700); font-weight:600; }

/* ── ABOUT PAGE ── */
.feat-check { width:28px; height:28px; background:var(--b-600); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.72rem; font-weight:900; flex-shrink:0; margin-top:1px; }
.stat-tile  { border-radius:var(--r-md); padding:1.25rem; text-align:center; }
.stat-tile .n { font-size:clamp(1.4rem,3vw,1.8rem); font-weight:900; }
.stat-tile .l { font-size:.8rem; margin-top:2px; color:var(--txt-muted); }

/* ── FOOTER ── */

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* Tablet 900px — bundles go single column */
@media (max-width:900px) {
  .bundles-bg .grid-3 { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* Tablet 768px */
@media (max-width:768px) {
  .hero .grid-2   { grid-template-columns: 1fr; }
  .hero-panel     { display: none; }   /* hide trend panel on small screens */
  .hero-desc      { max-width: 100%; }
  .footer-grid    { grid-template-columns: 1fr 1fr; }
  .bundles-bg .grid-3 { max-width: 100%; }
}

/* Phone 600px */
@media (max-width:600px) {
  .hero-stats     { gap: 1rem; }
  .ci-row         { gap: .65rem; }
  .ci-ico         { width:38px; height:38px; }
}

/* Small phone 480px */

  .footer-btm     { flex-direction: column; align-items: flex-start; }
  .hero-panel     { display: none; }
  .trend-row .tr-name { font-size: .78rem; }
}

/* ── COURSE CARD IMAGE BAND — title instead of emoji ── */
.cc-img {
  position: relative;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: .75rem 1rem;
}
.cc-img-title {
  font-family: var(--font-head);
  font-size: clamp(.78rem, 1.3vw, .92rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  word-break: break-word;
  max-width: 100%;
  margin-top: auto;
  z-index: 1;
}
/* Badge stays top-left */
.cc-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

/* ── TRENDING PANEL — no icon, left-padded text ── */
.trend-row { padding-left: .85rem; }
.tr-icon   { display: none; }

/* ── BUNDLE CARDS — no top icon ── */
.bundle-icon { display: none; }

/* ── BADGE PILLS — more prominent on course cards ── */
.badge {
  font-size: .72rem !important;
  font-weight: 800 !important;
  padding: .28rem .75rem !important;
  letter-spacing: .07em !important;
  border-radius: var(--r-pill) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
  text-transform: uppercase !important;
}
.badge-hot  { background: #ef4444 !important; color: #fff !important; }
.badge-new  { background: #10b981 !important; color: #fff !important; }
.badge-best { background: #1e96d0 !important; color: #fff !important; }
.badge-acc  { background: var(--g-600) !important; color: #fff !important; }

/* ── CC-IMG-TITLE — course title in the gradient band ── */
.cc-img {
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  padding: .75rem 1rem !important;
}
.cc-img-title {
  font-family: var(--font-head);
  font-size: clamp(.78rem, 1.3vw, .92rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  word-break: break-word;
  max-width: 100%;
  margin-top: auto;
  z-index: 1;
}

/* ── FOOTER GRID — first col wider to give logo more room ── */

/* ══════════════════════════════════════════════════════════
   FOOTER — clean grid layout, logo-matched colours
   ══════════════════════════════════════════════════════════ */

.site-footer {
  background: var(--g-800);
  padding: clamp(3rem,5vw,4.5rem) 0 2rem;
  color: rgba(255,255,255,.7);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(2rem,4vw,3.5rem);
  margin-bottom: 3rem;
  align-items: start;
}

/* Col 1 brand block */
.footer-col-brand {}

.footer-logo-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1rem;
}

.footer-logo-img {
  height: 56px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.footer-brand-name {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.25;
}

.footer-brand-tag {
  font-size: .62rem;
  font-weight: 700;
  color: #61ba46;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 3px;
}

.footer-blurb {
  font-size: .85rem;
  line-height: 1.7;
  color: rgba(255,255,255,.52);
  margin-top: 0;
}

/* Link columns */
.footer-col h4 {
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.footer-col li { margin-bottom: .6rem; }

.footer-col a {
  font-size: .86rem;
  color: rgba(255,255,255,.68);
  transition: var(--ease);
  text-decoration: none;
}

.footer-col a:hover { color: #61ba46; }

/* Bottom bar */
.footer-btm {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
}

.footer-btm p {
  font-size: .82rem;
  color: rgba(255,255,255,.4);
}

.socials { display: flex; gap: .5rem; }

.soc {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.07);
  border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700;
  color: rgba(255,255,255,.55);
  transition: var(--ease); text-decoration: none;
}

.soc:hover { background: var(--b-600); color: #fff; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .footer-btm { flex-direction: column; align-items: flex-start; }
}