/* =========================================================
       PAGE-SPECIFIC: LANDING / HOME
    ========================================================= */

    /* --- Hero Banner --- */
    .hero-banner {
      position: relative;
      background: linear-gradient(135deg, #FAFBFC 0%, #E8EDF5 100%);
      padding: clamp(40px, 6vw, 90px) 0 clamp(48px, 7vw, 90px);
      overflow: hidden;
    }
    .hero-contour-svg {
      position: absolute; inset: 0; width: 100%; height: 100%;
      pointer-events: none; z-index: 1; opacity: 0.65;
    }
    .hero-content-grid {
      position: relative; z-index: 2;
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: clamp(32px, 5vw, 64px);
      align-items: center;
    }
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: clamp(14px, 2vw, 22px);
    }
    .badge-check {
      width: 22px;
      height: 22px;
      border-radius: 5px;
      background-color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-inverse);
      flex-shrink: 0;
    }
    .badge-check svg { width: 13px; height: 13px; }
    .hero-heading {
      font-size: clamp(2rem, 4.5vw, 3.4rem);
      font-weight: var(--font-weight-extrabold);
      color: var(--color-text-primary);
      line-height: var(--line-height-tight);
      letter-spacing: -0.03em;
      margin-bottom: 20px;
    }
    .text-gradient {
      background: linear-gradient(90deg, var(--primary) 0%, var(--primary-hover) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hero-description {
      font-size: clamp(14px, 1.6vw, 16px);
      color: var(--color-text-secondary);
      line-height: var(--line-height-relaxed);
      max-width: 520px;
      margin-bottom: 32px;
    }
    .hero-cta-group {
      display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
    }
    .dot-matrix-decor {
      width: 80px; height: 80px;
      background-image: radial-gradient(var(--primary) 1.5px, transparent 1.5px);
      background-size: 10px 10px;
      opacity: 0.15;
    }

    /* Hero Media Card */
    .hero-media-col { position: relative; }
    .video-card-container {
      position: relative;
      border-radius: var(--radius-xl);
      overflow: hidden;
      cursor: pointer;
      box-shadow: 0 20px 50px var(--shadow-dark-heavy);
    }
    .video-poster-img {
      width: 100%; height: 380px; object-fit: cover; display: block;
    }
    .video-card-overlay {
      position: absolute; inset: 0;
      background: var(--color-overlay-medium);
      display: flex; align-items: center; justify-content: center;
      transition: background var(--transition-base);
    }
    .video-card-container:hover .video-card-overlay { background: var(--color-overlay-dark); }
    .play-button-wrapper {
      width: 68px; height: 68px; border-radius: 50%;
      background: var(--color-white-overlay-strong);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 0 12px var(--shadow-white-glow);
      transition: transform var(--transition-base), box-shadow var(--transition-base);
    }
    .video-card-container:hover .play-button-wrapper {
      transform: scale(1.12);
      box-shadow: 0 0 0 16px var(--color-primary-glow);
    }
    .play-button-wrapper svg { width: 28px; height: 28px; fill: var(--primary); margin-left: 3px; }
    .card-corner-tag {
      position: absolute; top: 16px; right: 16px; z-index: 2;
      background: var(--color-overlay-dark); backdrop-filter: blur(6px);
      color: #ffffff; font-size: 11px; line-height: 1.4; padding: 6px 10px;
      border-radius: var(--radius-sm); border: 1px solid var(--color-border-white-subtle);
      text-align: right;
    }
    .card-caption-banner {
      position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
      background: linear-gradient(0deg, var(--gradient-bottom-start) 0%, transparent 100%);
      padding: 24px 20px 16px;
      font-family: var(--font-family-bengali);
      color: #ffffff;
    }
    .caption-sub   { font-size: 12px; font-weight: 600; margin-bottom: 2px; color: #ffffff; }
    .caption-title { font-size: clamp(14px, 2vw, 18px); font-weight: 700; line-height: 1.25; color: #ffffff; }

    /* --- Courses Section --- */
    .courses-section {
      padding: clamp(50px, 7vw, 75px) 0;
      background-color: var(--color-surface-page);
    }
    .courses-outer-box {
      background: var(--color-surface-card);
      border-radius: var(--radius-section);
      padding: clamp(32px, 5vw, 60px) clamp(20px, 4vw, 48px);
      box-shadow: 0 10px 40px -15px var(--shadow-dark-subtle);
      border: 1px solid var(--color-border-frost);
    }
    .courses-header { text-align: center; max-width: 780px; margin: 0 auto clamp(32px,4vw,52px); }
    .courses-main-title { font-size: clamp(1.85rem,3.2vw,2.75rem); font-weight: 800; color: var(--primary); letter-spacing: -0.02em; margin-bottom: 14px; }
    .courses-subtitle { font-size: clamp(14px,1.6vw,15.5px); color: var(--color-text-secondary); line-height: 1.68; }
    .courses-slider-wrapper { position: relative; display: flex; align-items: center; width: 100%; }
    .slider-prev { position: absolute; left: -20px; z-index: 20; }
    .slider-next { position: absolute; right: -20px; z-index: 20; }
    .courses-viewport { width: 100%; overflow: hidden; padding: 10px 4px 18px; }
    .courses-track { display: flex; gap: 28px; transition: transform 450ms cubic-bezier(0.25,1,0.5,1); will-change: transform; }
    .courses-track .course-card { flex: 0 0 calc((100% - 56px) / 3); min-width: 0; overflow: hidden; padding: 0; }
    .courses-track .course-card .card-thumbnail { border-radius: 0; margin-bottom: 0; height: 200px; }
    .courses-track .course-card .card-body { padding: clamp(16px,2.2vw,22px); }
    .card-thumb-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9.5; overflow: hidden; }
    .thumb-bg { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 450ms ease; }
    .courses-track .course-card:hover .thumb-bg { transform: scale(1.04); }

    /* --- Milestones --- */
    .milestones-section { padding: clamp(40px,6vw,70px) 0; }
    .milestones-slider-wrapper { position: relative; display: flex; align-items: center; gap: 16px; }
    .milestones-viewport { width: 100%; overflow: hidden; padding: 10px 4px 18px; }
    .milestones-track { display: flex; gap: 28px; transition: transform 450ms cubic-bezier(0.25,1,0.5,1); }

    /* --- Feature Showcase --- */
    .feature-showcase-section { padding: clamp(40px,6vw,70px) 0; }
    .showcase-card {
      display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,64px);
      align-items: center; margin-bottom: clamp(48px,7vw,80px);
    }
    .showcase-card:last-child { margin-bottom: 0; }
    .showcase-card.reverse-layout .showcase-text-col { order: 2; }
    .showcase-card.reverse-layout .showcase-media-col { order: 1; }
    .showcase-text-col { display: flex; flex-direction: column; gap: 16px; }
    .showcase-title { font-size: clamp(1.5rem,2.8vw,2.2rem); font-weight: 800; color: var(--primary); letter-spacing: -0.02em; line-height: 1.3; }
    .showcase-desc  { font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }
    .showcase-img-frame { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); }
    .showcase-img { width: 100%; height: 340px; object-fit: cover; display: block; transition: transform 450ms ease; }
    .showcase-img-frame:hover .showcase-img { transform: scale(1.03); }

    /* --- Success Stories Section --- */
    .success-stories-section { padding: clamp(40px,6vw,70px) 0; background: var(--color-surface-subtle); }
    .stories-header { margin-bottom: 32px; }
    .stories-main-title { font-size: clamp(1.75rem,3vw,2.4rem); font-weight: 800; color: var(--primary); letter-spacing: -0.02em; margin-bottom: 12px; }
    .stories-subtitle  { font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); max-width: 700px; }
    .stories-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 36px; }
    /* Caption badge (top-left ITI logo) */
    .card-content-badge { position: absolute; top: 14px; left: 16px; z-index: 2; }
    .card-badge-logo { width: 24px; height: 24px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-inverse); font-size: 10px; font-weight: 800; }
    /* Caption text (bottom) */
    .card-floating-text { position: absolute; bottom: 22px; left: 22px; right: 22px; z-index: 2; font-family: var(--font-family-bengali, 'Hind Siliguri', 'Inter', sans-serif); color: var(--text-inverse); }
    .card-floating-text h4 { font-size: clamp(1rem,1.5vw,1.2rem); font-weight: 700; line-height: 1.3; text-shadow: 0 2px 5px var(--shadow-dark-deep); color: var(--text-inverse); }
    .card-floating-text p  { font-size: 0.85rem; color: var(--text-inverse); margin-top: 4px; }
    .stories-cta-wrap { text-align: center; }

    /* --- FAQ Section (Homepage) --- */
    .home-faq-section {
      padding: clamp(50px, 7vw, 80px) 0;
      background: var(--bg-body, #ffffff);
    }
    .home-faq-header {
      text-align: center;
      max-width: 700px;
      margin: 0 auto clamp(32px, 4vw, 48px);
    }
    .home-faq-title {
      font-size: clamp(1.75rem, 3vw, 2.4rem);
      font-weight: 800;
      color: var(--primary, #0B2046);
      letter-spacing: -0.02em;
      margin-bottom: 12px;
    }
    .home-faq-subtitle {
      font-size: var(--font-size-base, 15px);
      color: var(--color-text-secondary, #64748b);
      line-height: 1.65;
    }
    .home-faq-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-bottom: clamp(32px, 4vw, 48px);
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }
    .home-faq-cta {
      text-align: center;
    }

    /* --- Responsive --- */
    @media (max-width: 991px) {
      .hero-content-grid { grid-template-columns: 1fr; gap: 40px; }
      .hero-description  { max-width: 100%; }
      .showcase-card, .showcase-card.reverse-layout { grid-template-columns: 1fr; }
      .showcase-card.reverse-layout .showcase-text-col,
      .showcase-card.reverse-layout .showcase-media-col { order: unset; }
      .stories-grid { grid-template-columns: 1fr; }
      .dot-matrix-decor { display: none; }
    }
    @media (max-width: 680px) {
      .hero-cta-group { flex-direction: column; width: 100%; }
      .hero-cta-group .btn-hero { width: 100%; justify-content: center; }
      .courses-track .course-card { flex: 0 0 100%; }
      .milestone-card { flex: 0 0 100%; }
      .slider-prev { left: 4px; }
      .slider-next { right: 4px; }
    }
    @media (max-width: 1120px) {
      .courses-track .course-card { flex: 0 0 calc((100% - 28px) / 2); }
      .milestone-card { flex: 0 0 calc((100% - 28px) / 2); }
    }