/* ===== Slider Layout ===== */
.blog-section { padding: 0 0 2rem; }
.blog-header { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.blog-section h2 { margin: 0 0 .35rem; font-size: clamp(1.8rem, 3.2vw, 2.3rem); }
.blog-subtext { margin: 0 0 1rem; color: #555; }

.slider-container {
  position: relative;
  overflow: hidden;        /* hides off-screen slides */
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Wrapper holds all slides in a single row */
.slides-wrapper {
  display: flex;
  width: 100%;            /* JS will expand this to N*100% */
  will-change: transform; /* smoother GPU-accelerated transform */
}

/* Each slide gets an equal fraction of the wrapper width via JS */
/* Base slide (non-hero contexts) */
.slide { padding: 1.5rem; box-sizing: border-box; }

/* Blog hero */
.blog-hero { background: #0b0f19; border: none; width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; }
.hero-slide { position: relative; min-height: 460px; color: #fff; display: flex; align-items: stretch; }
.hero-slide .hero-media { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(1.05); }
.hero-slide .hero-overlay { position: absolute; inset: 0; background: linear-gradient( to right, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 35%, rgba(0,0,0,0) 80% ); }
.hero-slide .hero-content { position: relative; z-index: 1; padding: 2rem; max-width: 560px; display: grid; gap: .75rem; }
.hero-slide .hero-title { font-weight: 800; font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.15; margin: 0; }
.hero-kicker { font-weight: 900; font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1.05; margin: 0 0 .25rem; }
.hero-tagline { font-weight: 900; font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.05; margin: 0 0 .35rem; }
.intro-slide .hero-content { max-width: 720px; }
.hero-slide .hero-excerpt { color: rgba(255,255,255,.92); margin: 0; }
.hero-btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent-cyan, #00beb8) 0%, var(--primary-blue, #006da0) 100%);
  color: #ffffff;
  padding: .45rem .85rem;
  border-radius: 8px;
  font-weight: 800;
  text-decoration: none;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .35px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.16);
  justify-self: start; /* avoid grid stretch */
  align-self: start;
  width: auto;
  max-width: max-content;
}
.hero-btn:hover { filter: brightness(.95); box-shadow: 0 10px 22px rgba(0,0,0,.22); }
.hero-media--logo { background-color: #000; background-size: contain; background-repeat: no-repeat; background-position: center; }

/* Coming Soon badge */
.badge-soon {
  display: inline-block;
  margin-left: .5rem;
  padding: .15rem .5rem;
  font-size: .72rem;
  line-height: 1;
  font-weight: 800;
  border-radius: 999px;
  background: var(--primary-blue, #006da0);
  color: #fff;
  vertical-align: middle;
}
.post-title .badge-soon { font-weight: 700; }

/* Subtle arrows for hero */
.blog-hero .slider-btn { width: 40px; height: 40px; background: rgba(0,0,0,.35); box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.blog-hero .slider-btn:hover { background: rgba(0,0,0,.45); }

/* Headings & text cleanup */
.blog-slider h2 {
  margin-bottom: 1rem;
}

.slide h3 {
  margin: 0 0 .5rem;
  line-height: 1.25;
}

.slide p {
  margin: .25rem 0 .75rem;
}

/* Buttons */
/* recent posts row */
.recent-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.post-card { background: #ffffff; border: 1px solid #eee; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); display: flex; flex-direction: column; }
.post-media { display: block; background-size: cover; background-position: center; height: 160px; }
.post-body { padding: .9rem 1rem; display: grid; gap: .35rem; }
.post-title { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.post-title a { color: #111827; text-decoration: none; }
.post-title a:hover { text-decoration: underline; }
.post-excerpt { color: #4b5563; font-size: .95rem; margin: 0; }
.post-link { color: #2563eb; text-decoration: none; font-weight: 600; font-size: .92rem; margin-top: .2rem; }
.post-link:hover { text-decoration: underline; }

.blog-foot-cta { margin-top: 1rem; display: flex; justify-content: center; }
.view-all-link { color: #2563eb; text-decoration: none; font-weight: 700; }
.view-all-link:hover { text-decoration: underline; }

.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: .6rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
}

.btn-primary { border-color: #1f6fff; }
.btn-primary:hover { background: #1f6fff; color: #fff; }

.btn-secondary { border-color: #ddd; color: #333; }
.btn-secondary:hover { background: #f7f7f7; }

/* Arrows */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: rgba(255,255,255,0.9);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.slider-btn.prev { left: .75rem; }
.slider-btn.next { right: .75rem; }

/* Simple triangles using borders */
.arrow-triangle {
  display: inline-block;
  width: 0; height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.arrow-triangle.left  { border-right: 10px solid #333; margin-right: 2px; }
.arrow-triangle.right { border-left: 10px solid #333; margin-left: 2px; }

/* Dots */
.slider-dots {
  display: flex;
  gap: .5rem;
  justify-content: center;
  padding: 1rem 0;
}

.slider-dots .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 0;
  background: #d0d5dd;
  cursor: pointer;
}
.slider-dots .dot.active {
  background: #1f6fff;
}

/* Responsive */
@media (max-width: 600px) {
  .slide { padding: 1rem; }
  .slider-btn { width: 38px; height: 38px; }
  .hero-slide { min-height: 340px; }
}

/* ===== Services (Tech Training | Resume Help | Job Matching) ===== */
.services-section {
  background: linear-gradient(180deg, #f6f9ff 0%, #ffffff 65%);
  padding: 3.5rem 1.25rem;
}
.services-inner { max-width: 1200px; margin: 0 auto; }
.services-header { text-align: center; margin: 0 0 1.25rem; }
.services-header h2 { margin: 0 0 .35rem; font-size: clamp(2rem, 3.8vw, 2.6rem); font-weight: 900; color: #0F172A; }
.services-subtext { margin: 0 0 1rem; color: #6b7280; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px){ .services-grid { grid-template-columns: 1fr; } }

.service-card {
  background: #fff;
  border: 1px solid #e6ecfb;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 6px 18px rgba(10, 34, 80, 0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(100,149,237,.5);
  box-shadow: 0 14px 32px rgba(10, 34, 80, 0.12);
}
.service-icon { margin-bottom: .5rem; }
.service-card h3 { margin: .25rem 0 .25rem; font-size: 1.35rem; font-weight: 900; color: #0F172A; }
.service-card p { margin: 0 0 .85rem; color: #475569; }
.card-actions { display: flex; align-items: center; gap: .5rem; }

.btn-pill {
  display: inline-block;
  padding: .6rem 1.1rem;
  background: #6495ED; /* cornflower */
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  border: none;
  box-shadow: 0 8px 22px rgba(100,149,237,0.35);
  cursor: pointer;
}
.btn-pill:hover { background: #5a86d6; }
.btn-pill[disabled], .btn-pill:disabled { opacity: .6; cursor: not-allowed; filter: grayscale(.15); }

/* ===== Vision Split Section ===== */
.vision-split { padding: 0; }

.vision-inner {
  width: 100%;
  min-height: var(--vision-min-h, 60vh);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  position: relative;
}

/* Global diagonal gradient overlay that blends text bg into image */
.vision-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* over image, under text */
  background: linear-gradient(
    135deg,
    var(--vision-overlay, rgba(255,255,255,0.96)) 0%,
    var(--vision-overlay, rgba(255,255,255,0.96)) 38%,
    rgba(255,255,255,0) 75%
  );
}

.vision-left {
  background: transparent; /* image shows through; color provided by overlay */
  color: #ffffff;
  padding: 2.5rem;
  position: relative;
  z-index: 2;
}

.vision-left h2 { margin: 0 0 1rem; font-size: clamp(2rem, 3.8vw, 3.25rem); line-height: 1.05; font-weight: 900; }
.vision-left p { margin: 0 0 1rem; line-height: 1.75; color: rgba(255,255,255,0.92); font-size: 1.08rem; }
.vision-actions { margin-top: 1.25rem; }
.vision-btn {
  display: inline-block;
  background: var(--accent-cyan, #00beb8);
  color: #0F172A;
  padding: .8rem 1.25rem;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: .3px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.16);
}
.vision-btn:hover { filter: brightness(0.95); }

/* Diagonal merge: extend the left background over the image with a clipped shape */
/* No extra left-side overlay needed; global ::before handles the merge */
.vision-left::after { content: none; }

.vision-right {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--vision-image);
  background-size: var(--vision-image-size, cover);
  background-position: var(--vision-image-pos-x, 50%) var(--vision-image-pos-y, 50%);
}

/* Mobile/Tablet responsiveness */
@media (max-width: 900px) {
  .vision-inner { grid-template-columns: 1fr; }
  .vision-right { position: relative; inset: auto; height: 40vh; min-height: 260px; }
  .vision-left { color: #0f172a; }
  .vision-left p { color: #334155; }
  .vision-btn { background: var(--primary-blue, #006da0); color: #fff; }
  /* Simplify overlay for stacked layout */
  .vision-inner::before {
    background: linear-gradient(
      to bottom,
      var(--vision-overlay, rgba(255,255,255,0.9)) 0%,
      rgba(255,255,255,0) 60%
    );
  }
  .vision-left::after { display: none; }
  /* Keep a subtle angled overlay at the bottom of the image to preserve the merge feel */
  .vision-right::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 20vw;
    background: linear-gradient(
      to bottom left,
      rgba(255,255,255,0) 25%,
      var(--vision-overlay, rgba(255,255,255,1)) 90%
    );
    pointer-events: none;
  }
}

/* ===== Hero Enhancements (subheadline + dual CTAs) ===== */
.hero-subheadline { color: #e8eef7; max-width: 860px; margin: .75rem auto 1.25rem; font-size: 1.05rem; }
.hero-ctas { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.btn-ghost { background: transparent; color: #fff; border: 2px solid #fff; }
.btn-ghost:hover { background: rgba(255,255,255,0.12); color: #fff; }
.hero-ctas .cta-seekers { background: var(--primary-blue, #006da0); color: #fff; border: 2px solid var(--primary-blue, #006da0); }
.hero-ctas .cta-seekers:hover { filter: brightness(0.95); }
.hero-ctas .cta-employers { background: transparent; color: #fff; border: 2px solid #ffffff; }
.hero-ctas .cta-employers:hover { background: rgba(255,255,255,0.12); }

/* ===== How It Works ===== */
.hiw-section { background: linear-gradient(180deg, #E6F2FF 0%, #FFFFFF 100%); padding: 4rem 1.25rem; }
.hiw-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.hiw-inner h2 { margin: 0 0 .35rem; font-size: clamp(1.9rem, 3.4vw, 2.4rem); font-weight: 900; color: #0F172A; }
.hiw-sub { color: #64748b; margin: 0 0 1.5rem; font-weight: 400; }
.hiw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.hiw-step { background: #ffffff; border: 1px solid #e6ecfb; border-radius: 14px; padding: 1.25rem; text-align: left; box-shadow: 0 8px 22px rgba(10, 34, 80, 0.06); }
.hiw-step h3 { margin: .35rem 0 .25rem; font-size: 1.2rem; font-weight: 800; color: #0F172A; }
.hiw-step p { margin: 0; color: #475569; font-size: .95rem; }
.hiw-icon { width: 48px; height: 48px; display: grid; place-items: center; background: #E6F2FF; border: 1px solid #d8e9ff; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,.06); }
@media (max-width: 900px){ .hiw-steps { grid-template-columns: 1fr; } .hiw-step { text-align: left; } }

/* ===== Audience Split ===== */
.audiences-split { background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%); padding: 2.5rem 1.25rem; }
.audiences-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.audience-card { background: #fff; border: 1px solid #e6ecfb; border-radius: 16px; padding: 1.25rem; box-shadow: 0 8px 22px rgba(10,34,80,0.06); }
.audience-card h3 { margin: 0 0 .35rem; font-size: 1.35rem; font-weight: 900; color: #0F172A; }
.audience-card ul { margin: 0 0 .75rem .95rem; padding: 0; color: #475569; line-height: 1.7; }
.audience-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-link { color: #2563eb; font-weight: 700; text-decoration: none; align-self: center; }
.btn-link:hover { text-decoration: underline; }
@media (max-width: 900px){ .audiences-inner { grid-template-columns: 1fr; } }

/* HIW CTA */
.hiw-cta { margin-top: 1.5rem; display: flex; justify-content: center; }
.hiw-btn { background: var(--primary-blue, #006da0); box-shadow: 0 8px 22px rgba(0,109,160,0.35); }
.hiw-btn:hover { filter: brightness(0.95); }

/* ===== Testimonial (Pull-Quote on Dark Gradient) ===== */
.testimonial-section {
  position: relative;
  background: linear-gradient(135deg, #0b1e33 0%, #000000 100%);
  padding: 3rem 1.25rem;
  overflow: hidden;
}
.testimonial-section::before,
.testimonial-section::after {
  content: "\201C"; /* opening curly quote */
  position: absolute;
  font-family: Georgia, serif;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.08);
  font-size: 280px;
  line-height: 1;
  pointer-events: none;
}
.testimonial-section::before { top: -60px; left: -10px; }
.testimonial-section::after  { content: "\201D"; bottom: -40px; right: 10px; transform: rotate(0.5deg); }

.testimonial-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.testimonial-inner h2 { margin: 0 0 1rem; font-size: clamp(1.9rem, 3.2vw, 2.3rem); font-weight: 900; color: #ffffff; position: relative; z-index: 1; }

.pullquote { position: relative; z-index: 1; color: #e8eef7; text-align: center; }
.pullquote-top { font-weight: 900; font-size: clamp(1.8rem, 4.2vw, 2.4rem); line-height: 1.15; margin: .35rem auto .65rem; max-width: 980px; }
.pullquote-full { margin: 0 auto .75rem; color: rgba(255,255,255,0.85); max-width: 900px; }
.pullquote-attrib { color: rgba(255,255,255,0.92); font-weight: 700; }

/* Reveal on scroll */
.reveal-up { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal-up.in-view { opacity: 1; transform: translateY(0); }

/* ===== Mission Pillars ===== */
.mission-lead { text-align: center; color: #475569; max-width: 900px; margin: 0 auto 1rem; }
.mission-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: .5rem; }
.mission-pill { background: #fff; border: 1px solid #e6ecfb; border-radius: 14px; padding: 1rem; text-align: center; box-shadow: 0 6px 16px rgba(10,34,80,0.06); }
.mission-pill h3 { margin: .35rem 0 .25rem; font-size: 1.05rem; color: #0F172A; }
.mission-pill p { margin: 0; color: #475569; }
.pill-icon { width: 48px; height: 48px; border-radius: 12px; background: #f0f6ff; display: grid; place-items: center; margin: 0 auto; }
@media (max-width: 900px){ .mission-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== Final CTA ===== */
.final-cta { background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%); padding: 2rem 1.25rem; }
.final-cta-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; }
.final-cta-left h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2rem); }
.final-cta-left p { margin: .25rem 0 0; color: #475569; }
.final-cta-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
.btn-outline { background: transparent; color: #0F172A; border: 2px solid #0F172A; }
@media (max-width: 900px){ .final-cta-inner { grid-template-columns: 1fr; text-align: center; } .final-cta-actions { justify-content: center; } }
.quote-card { position: relative; background: #0F172A; color: #e6f0ff; border-radius: 16px; padding: 1.5rem; text-align: left; box-shadow: 0 10px 26px rgba(10,34,80,0.18); }
.quote-mark { position: absolute; top: -.35rem; left: .85rem; font-size: 4rem; line-height: 1; color: rgba(255,255,255,.18); font-family: Georgia, serif; }
.quote-text { margin: .5rem 0 .75rem; font-size: 1.02rem; line-height: 1.7; }
.quote-attrib { color: #93c5fd; font-weight: 700; }

/* ===== Resources Preview ===== */
.resources-preview { background: linear-gradient(180deg, #f6f9ff 0%, #ffffff 70%); padding: 3rem 1.25rem; }
.resources-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.resources-inner h2 { margin: 0 0 .35rem; font-size: clamp(1.9rem, 3.2vw, 2.3rem); font-weight: 900; color: #0F172A; }
.resources-sub { color: #64748b; margin: 0 0 1.25rem; }
.resources-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.resource-card { background: #fff; border: 1px solid #e6ecfb; border-radius: 16px; padding: 1.25rem; text-align: left; color: inherit; text-decoration: none; box-shadow: 0 8px 22px rgba(10, 34, 80, 0.06); }
.resource-card:hover { border-color: rgba(100,149,237,.5); box-shadow: 0 12px 28px rgba(10, 34, 80, 0.12); }
.resource-card h3 { margin: .25rem 0 .25rem; font-size: 1.2rem; font-weight: 900; color: #0F172A; }
.resource-card p { margin: 0; color: #475569; }
.resource-icon { width: 44px; height: 44px; display: grid; place-items: center; background: #f0f6ff; border-radius: 12px; font-size: 1.25rem; }
@media (max-width: 900px){ .resources-grid { grid-template-columns: 1fr; } }