/* ============================================================
   AVENTRO EDUCATIONAL TECH SOLUTIONS — style.css
   Color Palette: #FFFFFF | #003366 | #004a99 | #e8f0fe
   ============================================================ */

   :root {
    --blue-deep:    #003366;
    --blue-mid:     #004a99;
    --blue-bright:  #0066cc;
    --blue-light:   #e8f0fe;
    --blue-pale:    #f0f5ff;
    --white:        #ffffff;
    --text-primary: #0a1628;
    --text-muted:   #4a6080;
    --text-faint:   #8099b8;
    --border:       rgba(0, 51, 102, 0.12);
    --shadow-sm:    0 2px 12px rgba(0,51,102,0.08);
    --shadow-md:    0 8px 32px rgba(0,51,102,0.12);
    --shadow-lg:    0 20px 60px rgba(0,51,102,0.18);
    --radius:       12px;
    --radius-lg:    20px;
    --transition:   cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* ---- RESET ---- */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; font-size: 16px; }
  body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-primary);
    background: var(--white);
    overflow-x: hidden;
  }
  a { text-decoration: none; color: inherit; }
  ul { list-style: none; }
  img { max-width: 100%; display: block; }
  
  /* ============================================================
     UTILITIES
     ============================================================ */
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
  }
  .section {
    padding: 100px 0;
    position: relative;
  }
  .section-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--blue-mid);
    margin-bottom: 16px;
  }
  .section-eyebrow.light { color: rgba(232, 240, 254, 0.7); }
  .section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--blue-deep);
    margin-bottom: 20px;
  }
  .section-title.light { color: var(--white); }
  .section-subtitle {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 540px;
  }
  .section-header { margin-bottom: 64px; }
  
  /* ============================================================
     BUTTONS
     ============================================================ */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: all 0.3s var(--transition);
    border: 2px solid transparent;
  }
  .btn-primary {
    background: var(--blue-mid);
    color: var(--white);
    border-color: var(--blue-mid);
  }
  .btn-primary:hover {
    background: var(--blue-deep);
    border-color: var(--blue-deep);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,74,153,0.35);
  }
  .btn-ghost {
    background: transparent;
    color: var(--blue-deep);
    border-color: var(--blue-deep);
  }
  .btn-ghost:hover {
    background: var(--blue-deep);
    color: var(--white);
    transform: translateY(-2px);
  }
  .btn-white {
    background: var(--white);
    color: var(--blue-deep);
    border-color: var(--white);
  }
  .btn-white:hover {
    background: transparent;
    color: var(--white);
    transform: translateY(-2px);
  }
  
  /* ============================================================
     SCROLL ANIMATIONS
     ============================================================ */
  .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.75s var(--transition), transform 0.75s var(--transition);
  }
  .reveal.reveal-right {
    transform: translateX(60px);
  }
  .reveal.visible {
    opacity: 1;
    transform: translate(0);
  }
  .reveal.exiting {
    opacity: 0;
    transform: translateY(-20px);
  }
  [data-delay="100"] { transition-delay: 0.1s; }
  [data-delay="150"] { transition-delay: 0.15s; }
  [data-delay="200"] { transition-delay: 0.2s; }
  [data-delay="300"] { transition-delay: 0.3s; }
  
  /* ============================================================
     NAVIGATION
     ============================================================ */
  #navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 0 24px;
    transition: background 0.4s var(--transition), box-shadow 0.4s var(--transition);
  }
  #navbar.scrolled {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid var(--border);
  }
  
  /* Home Page transparent header state (before scroll) */
  .home-nav:not(.scrolled) .logo-text {
    color: var(--white);
  }
  .home-nav:not(.scrolled) .nav-link {
    color: rgba(255, 255, 255, 0.85);
  }
  .home-nav:not(.scrolled) .nav-link:hover {
    color: var(--white);
  }
  .home-nav:not(.scrolled) .nav-link::after {
    background: var(--white);
  }
  .home-nav:not(.scrolled) .hamburger span {
    background: var(--white);
  }
  .nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
  }
  .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .logo-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    background: var(--blue-mid);
    color: var(--white);
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    flex-shrink: 0;
  }
  .logo-text {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--blue-deep);
    letter-spacing: -0.01em;
  }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 36px;
  }
  .nav-link {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
    position: relative;
    padding: 4px 0;
    transition: color 0.25s;
  }
  .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 2px;
    background: var(--blue-mid);
    transition: width 0.3s var(--transition);
  }
  .nav-link:hover { color: var(--blue-mid); }
  .nav-link:hover::after { width: 100%; }
  
  .hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 6px;
    cursor: none;
  }
  .hamburger span {
    width: 24px; height: 2px;
    background: var(--blue-deep);
    border-radius: 2px;
    transition: all 0.3s var(--transition);
    display: block;
  }
  .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  
  /* ============================================================
     HERO
     ============================================================ */
  .hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #050e1a;
    padding: 120px 24px 80px;
    text-align: center;
  }
  .hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
  }
  .hero-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(5, 14, 26, 0.9) 0%,
      rgba(0, 51, 102, 0.75) 50%,
      rgba(5, 14, 26, 0.95) 100%
    );
    z-index: 1;
  }

  .hero-content {
    position: relative;
    z-index: 3;
    max-width: 800px;
    margin: 0 auto;
  }
  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--blue-light);
    margin-bottom: 24px;
  }
  .hero-eyebrow::before,
  .hero-eyebrow::after {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--blue-light);
  }
  .hero-headline {
    font-size: clamp(2.5rem, 5.5vw, 4.2rem);
    font-weight: 900;
    line-height: 1.1;
    color: var(--white);
    letter-spacing: -0.02em;
    margin-bottom: 24px;
  }
  .hero-headline em {
    font-style: italic;
    font-family: 'Source Serif 4', serif;
    font-weight: 300;
    color: #ffd26f;
    text-shadow: 0 0 20px rgba(255, 210, 111, 0.2);
  }
  .hero-subtext {
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 auto 40px;
    max-width: 680px;
  }
  .hero-cta-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 64px;
  }
  .hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
  }
  .stat-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .stat-number {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
  }
  .stat-divider {
    width: 1px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
  }

/* Hero embedded brand logo */
.hero-logo {
  margin-bottom: 18px;
}
.hero-logo .logo-mark {
  font-size: 3rem;
}
  
  /* ============================================================
     TRAINING CARDS
     ============================================================ */
  .training-section { background: var(--blue-pale); }
  .training-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
  .training-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 51, 102, 0.08);
    border-radius: var(--radius-lg);
    padding: 44px 40px;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--transition), box-shadow 0.4s var(--transition), border-color 0.4s var(--transition);
  }
  .training-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ffd26f, var(--blue-bright));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--transition);
  }
  .training-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 74, 153, 0.1), 0 0 0 1px rgba(0, 102, 204, 0.15);
    border-color: rgba(0, 74, 153, 0.25);
  }
  .training-card:hover::before { transform: scaleX(1); }
  .card-number {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--text-faint);
    margin-bottom: 20px;
  }
  .card-icon {
    width: 56px; height: 56px;
    color: var(--blue-mid);
    margin-bottom: 24px;
  }
  .card-icon svg { width: 100%; height: 100%; }
  .card-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--blue-deep);
    line-height: 1.3;
    margin-bottom: 16px;
  }
  .card-desc {
    font-size: 0.93rem;
    line-height: 1.75;
    color: var(--text-muted);
    margin-bottom: 28px;
  }
  .card-highlights {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 36px;
  }
  .card-highlights li {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    padding-left: 20px;
    position: relative;
  }
  .card-highlights li::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 8px; height: 8px;
    border-radius: 2px;
    background: var(--blue-mid);
  }
  .card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue-mid);
    border-bottom: 2px solid var(--blue-mid);
    padding-bottom: 2px;
    transition: color 0.25s, gap 0.25s;
  }
  .card-cta::after { content: '→'; transition: transform 0.25s; }
  .card-cta:hover { color: var(--blue-deep); gap: 14px; }
  
  /* ============================================================
     WORKSHOPS GRID
     ============================================================ */
  .workshops-section { background: var(--white); }
  .workshops-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .workshop-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px 28px;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s var(--transition), box-shadow 0.35s var(--transition), background 0.35s;
  }
  .workshop-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--blue-pale), transparent);
    opacity: 0;
    transition: opacity 0.35s;
  }
  .workshop-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
  }
  .workshop-card:hover::after { opacity: 1; }
  .workshop-index {
    position: absolute;
    top: 24px; right: 24px;
    font-size: 2.5rem;
    font-weight: 900;
    color: rgba(0,74,153,0.06);
    line-height: 1;
    letter-spacing: -0.04em;
    pointer-events: none;
  }
  .workshop-icon-wrap {
    width: 48px; height: 48px;
    color: var(--blue-mid);
    margin-bottom: 20px;
    position: relative; z-index: 1;
  }
  .workshop-icon-wrap svg { width: 100%; height: 100%; }
  .workshop-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--blue-deep);
    line-height: 1.35;
    margin-bottom: 12px;
    position: relative; z-index: 1;
  }
  .workshop-desc {
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 20px;
    position: relative; z-index: 1;
  }
  .workshop-duration {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue-mid);
    background: var(--blue-light);
    padding: 5px 12px;
    border-radius: 20px;
    position: relative; z-index: 1;
  }

  /* ============================================================
     UPCOMING WEBINARS
     ============================================================ */
  .webinars-section { background: var(--blue-pale); }
  .webinars-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    align-items: start;
  }
  .webinar-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 51, 102, 0.08);
    border-radius: var(--radius-lg);
    padding: 28px;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--transition), box-shadow 0.4s var(--transition), border-color 0.4s var(--transition);
  }
  .webinar-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ffd26f, var(--blue-bright));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--transition);
  }
  .webinar-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 74, 153, 0.1), 0 0 0 1px rgba(0, 102, 204, 0.15);
    border-color: rgba(0, 74, 153, 0.25);
  }
  .webinar-card:hover::before { transform: scaleX(1); }

  .webinar-card-media { margin-bottom: 18px; }

  .webinar-poster-btn {
    width: 100%;
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
    border-radius: var(--radius);
    overflow: hidden;
    display: block;
    position: relative;
  }
  .webinar-poster-btn img {
    width: 100%;
    height: 260px;
    object-fit: contain;
    transition: transform 0.5s var(--transition);
    background: #020813;
  }

  .webinar-poster-btn:hover img { transform: scale(1.04); }

  .webinar-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(0, 74, 153, 0.86) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    padding: 18px 18px 16px;
    pointer-events: none;
  }
  .webinar-overlay-badge {
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(37, 211, 102, 0.95);
    padding: 6px 12px;
    border-radius: 4px;
    width: fit-content;
  }
  .webinar-overlay-cta {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
    width: fit-content;
  }

  .webinar-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--blue-deep);
    line-height: 1.35;
    margin-bottom: 10px;
  }
  .webinar-desc {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 18px;
  }
  
  /* ============================================================
     COURSES
     ============================================================ */
  .courses-section { background: var(--blue-pale); }
  .courses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  .course-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 51, 102, 0.08);
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s var(--transition), box-shadow 0.4s var(--transition), border-color 0.4s var(--transition);
    position: relative;
    overflow: hidden;
  }
  .course-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ffd26f, var(--blue-bright));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--transition);
  }
  .course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 74, 153, 0.1), 0 0 0 1px rgba(0, 102, 204, 0.15);
    border-color: rgba(0, 74, 153, 0.25);
  }
  .course-card:hover::before { transform: scaleX(1); }
  .course-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue-mid);
    background: var(--blue-light);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 20px;
    align-self: flex-start;
  }
  .course-level-bar {
    height: 3px;
    background: var(--blue-light);
    border-radius: 2px;
    margin-bottom: 24px;
    overflow: hidden;
  }
  .course-level-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--blue-mid), var(--blue-bright));
    border-radius: 2px;
  }
  .course-name {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--blue-deep);
    line-height: 1.3;
    margin-bottom: 16px;
  }
  .course-desc {
    font-size: 0.88rem;
    line-height: 1.75;
    color: var(--text-muted);
    flex: 1;
    margin-bottom: 28px;
  }
  .course-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
  }
  .course-duration, .course-level {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
  }
  .course-duration svg { width: 14px; height: 14px; }
  .course-enroll {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background: var(--blue-deep);
    color: var(--white);
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
    align-self: flex-start;
  }
  .course-enroll:hover {
    background: var(--blue-mid);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,74,153,0.3);
  }
  
  /* ============================================================
     R&D WING
     ============================================================ */
  .research-section {
    padding: 0;
    overflow: hidden;
    position: relative;
  }
  .research-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(0, 102, 204, 0.15) 0%, transparent 50%),
                linear-gradient(135deg, #020813 0%, #0c1830 100%);
    z-index: 0;
  }
  .research-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0.8;
  }
  .research-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    padding: 120px 24px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
  }
  .research-left .section-title { margin-bottom: 24px; }
  .research-intro {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.75);
    margin-bottom: 40px;
    max-width: 440px;
  }
  .research-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .research-pillar {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 32px;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    transition: background 0.4s, border-color 0.4s, transform 0.4s var(--transition), box-shadow 0.4s;
  }
  .research-pillar:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 210, 111, 0.35);
    transform: translateX(8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), 0 0 16px rgba(255, 210, 111, 0.08);
  }
  .pillar-icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.9);
  }
  .pillar-icon svg { width: 24px; height: 24px; }
  .pillar-content h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 8px;
  }
  .pillar-content p {
    font-size: 0.88rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.6);
  }
  
  /* ============================================================
     GET IN TOUCH SECTION
     ============================================================ */
  .contact-section {
    background: #020813;
    padding: 100px 24px;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  .contact-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 10% 80%, rgba(0, 102, 204, 0.1) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
  }
  .contact-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: start;
  }
  .contact-info-card {
    color: var(--white);
  }
  .contact-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffd26f;
    margin-bottom: 16px;
  }
  .contact-heading {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--white);
    margin-bottom: 24px;
    letter-spacing: -0.01em;
  }
  .contact-text {
    font-size: 1.02rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 40px;
  }
  .contact-details {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 48px;
  }
  .contact-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }
  .detail-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffd26f;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
  .detail-icon svg {
    width: 22px;
    height: 22px;
  }
  .detail-content span {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 4px;
  }
  .detail-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
  }
  .detail-content a {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--white);
    text-decoration: none;
    transition: color 0.25s;
  }
  .detail-content a:hover {
    color: #ffd26f;
  }
  .contact-socials-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .contact-socials-wrap > span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
  }
  .contact-socials {
    display: flex;
    gap: 14px;
  }
  
  /* Form Card Styling */
  .contact-form-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 48px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .contact-form-card .form-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 32px;
    letter-spacing: -0.01em;
  }
  .contact-form-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .form-field-full {
    grid-column: 1 / -1;
  }
  .form-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
  }
  .form-input,
  .form-textarea {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: var(--white);
    padding: 14px 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.92rem;
    outline: none;
    transition: all 0.3s var(--transition);
  }
  .form-input::placeholder,
  .form-textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
  }
  .form-input:focus,
  .form-textarea:focus {
    border-color: #ffd26f;
    box-shadow: 0 0 16px rgba(255, 210, 111, 0.25);
    background: rgba(255, 255, 255, 0.08);
  }
  .form-textarea {
    resize: vertical;
  }
  .form-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
  }
  .submit-btn {
    padding: 16px 36px;
    background: linear-gradient(90deg, #ffd26f, #ffb830);
    color: #020813;
    border: none;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.25s, box-shadow 0.25s;
  }
  .submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(255, 210, 111, 0.4);
  }
  .form-status {
    font-size: 0.88rem;
    font-weight: 600;
  }
  .form-status.success {
    color: #2fed76;
  }
  .form-status.error {
    color: #ff6b7a;
  }

  /* ============================================================
     FOOTER
     ============================================================ */
  .footer { background: var(--text-primary); }
  .footer-top { padding: 80px 24px 60px; }
  .footer-top-inner {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 48px;
    align-items: start;
  }
  .footer-brand {
    transform: translateY(-10px);
  }
  .footer-brand .footer-logo {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
  }
  .footer-logo-img {
    width: min(320px, 100%);
    height: auto;
    display: block;
    transform: translateY(-6px);
    image-rendering: -webkit-optimize-contrast;
  }
  .footer-brand .logo-mark { background: var(--blue-mid); }
  .footer-brand .logo-text { color: var(--white); }
  .footer-tagline {
    font-size: 0.88rem;
    line-height: 1.75;
    color: var(--white);
    max-width: 280px;
    margin-bottom: 28px;
  }
  .footer-socials {
    display: flex;
    gap: 14px;
  }
  .social-link {
    width: 40px; height: 40px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.55);
    transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.25s;
  }
  .social-link svg { width: 18px; height: 18px; }
  .social-link:hover {
    color: var(--white);
    border-color: var(--blue-mid);
    background: rgba(0,74,153,0.3);
    transform: translateY(-3px);
  }
  .footer-links-group h5 {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 20px;
  }
  .footer-links-group ul { display: flex; flex-direction: column; gap: 12px; }
  .footer-links-group a {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--white);
    transition: color 0.2s;
  }
  .footer-links-group a:hover { color: var(--white); }
  .footer-contact h5 {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 20px;
  }
  .footer-email {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 20px;
    transition: color 0.25s;
  }
  .footer-email svg { width: 18px; height: 14px; opacity: 0.7; }
  .footer-email:hover { color: var(--white); }
  .footer-address {
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--white);
  }

  .footer-form {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .footer-form-title {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 14px;
  }
  .footer-form-body { display: flex; flex-direction: column; gap: 14px; }
  .footer-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .footer-field { display: flex; flex-direction: column; gap: 6px; }
  .footer-field-full { grid-column: 1 / -1; }
  .footer-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
  }
  .footer-input,
  .footer-textarea {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.95);
    padding: 14px 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    outline: none;
    transition: all 0.3s var(--transition);
  }
  .footer-textarea { resize: vertical; min-height: 110px; }
  .footer-input::placeholder,
  .footer-textarea::placeholder { color: rgba(255,255,255,0.35); }
  .footer-input:focus,
  .footer-textarea:focus {
    border-color: #ffd26f;
    box-shadow: 0 0 16px rgba(255, 210, 111, 0.25);
    background: rgba(255,255,255,0.08);
  }
  .footer-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
  }
  .footer-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(90deg, #ffd26f, #ffb830);
    color: var(--blue-deep);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.78rem;
    transition: transform 0.25s var(--transition), box-shadow 0.25s var(--transition), opacity 0.2s;
    cursor: pointer;
  }
  .footer-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(255, 210, 111, 0.35);
  }
  .footer-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
  .form-status {
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.65);
  }
  .form-status.success { color: rgba(140, 255, 205, 0.85); }
  .form-status.error { color: rgba(255, 160, 160, 0.85); }
  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 24px;
  }
  .footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }
  .footer-bottom p {
    font-size: 0.8rem;
    color: var(--white);
  }
  .footer-legal {
    display: flex;
    gap: 24px;
  }
  .footer-legal a {
    font-size: 0.8rem;
    color: var(--white);
    transition: color 0.2s;
  }
  .footer-legal a:hover { color: var(--white); }
  
  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 1100px) {
    .workshops-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-top-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
    .research-inner { grid-template-columns: 1fr; gap: 56px; }
    .research-left .section-title { font-size: 2.2rem; }
  }
  
  @media (max-width: 900px) {
    .hero {
      flex-direction: column;
      text-align: center;
      align-items: flex-start;
      padding: 48px 24px 48px;
    }
    .hero-visual {
      flex: none;
      width: 100%;
      margin-top: 32px;
      justify-content: center;
    }
    .hero-eyebrow { justify-content: center; }
    .hero-subtext { margin-left: auto; margin-right: auto; }
    .hero-cta-group { justify-content: center; }
    .hero-stats { justify-content: center; }
    .hero-visual { flex: none; width: 100%; }
    .hero-diagram { width: 280px; height: 280px; }
    .ring-outer  { width: 260px; height: 260px; }
    .ring-mid    { width: 185px; height: 185px; }
    .ring-inner  { width: 110px; height: 110px; }
    .training-cards { grid-template-columns: 1fr; }
    .courses-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  }
  
  @media (max-width: 768px) {
    .hamburger { display: flex; }
    .nav-links {
      display: none;
      position: fixed;
      top: 72px; left: 0; right: 0;
      background: rgba(255,255,255,0.97);
      backdrop-filter: blur(20px);
      flex-direction: column;
      align-items: stretch;
      padding: 24px;
      gap: 4px;
      box-shadow: var(--shadow-md);
      border-bottom: 1px solid var(--border);
    }
    .nav-links.open { display: flex; }
    .home-nav:not(.scrolled) .nav-links.open .nav-link {
      color: #000000;
    }
    .nav-link {
      padding: 14px 16px;
      border-radius: 8px;
      font-size: 0.85rem;
    }
    .nav-link:hover { background: var(--blue-pale); }
    .nav-link::after { display: none; }
    .workshops-grid { grid-template-columns: 1fr; }
    .webinars-grid { grid-template-columns: 1fr; }
    .footer-top-inner { grid-template-columns: 1fr; }
    .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
    .section { padding: 72px 0; }
    .footer-form-grid { grid-template-columns: 1fr; }
    .contact-section { padding: 40px 16px; }
    .contact-form-card { padding: 24px 16px; border-radius: 16px; }
    .form-grid { grid-template-columns: 1fr; gap: 12px; }
    .contact-heading { font-size: 1.8rem; margin-bottom: 16px; }
    .contact-text { font-size: 0.9rem; margin-bottom: 24px; }
    .contact-details { gap: 16px; margin-bottom: 24px; }
    .contact-detail-item { gap: 12px; }
    .detail-icon { width: 36px; height: 36px; border-radius: 8px; }
    .detail-icon svg { width: 16px; height: 16px; }
    .detail-content a { font-size: 0.95rem; }
    .contact-form-card .form-title { font-size: 1.2rem; margin-bottom: 20px; }
    .contact-form-body { gap: 12px; }
    .form-field { gap: 4px; }
    .form-input, .form-textarea { padding: 10px 12px; font-size: 0.85rem; }
    .submit-btn { padding: 12px 24px; font-size: 0.8rem; }
  }
  
  @media (max-width: 480px) {
    .hero-headline { font-size: 2.4rem; }
    .training-card { padding: 32px 24px; }
    .course-card { padding: 32px 24px; }
    .stat-number { font-size: 1.5rem; }
    .footer-logo-img {
      width: min(260px, 100%);
      transform: translateY(-4px);
    }
  }
  
  /* Mobile: hide cursor ring on touch devices */
  @media (pointer: coarse) {
    #cursor-ring, #cursor-dot { display: none; }
    body { cursor: auto; }
    .interactive { cursor: pointer; }
  }

  /* ============================================================
     FEATURED TRAINING CARD + COURSE DETAIL PANEL
     ============================================================ */
  .training-card--featured {
    padding-top: 0;
    display: flex;
    flex-direction: column;
  }
  .training-card-visual {
    display: block;
    width: calc(100% + 80px);
    margin: 0 -40px 28px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    font: inherit;
    text-align: left;
  }

  /* Poster-style course covers (AI.png / DA.png) */
  .training-card-poster {
    background: #050a14;
    padding: 14px 14px 0;
    position: relative;
    min-height: 200px;
  }
  .training-card-cover-img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 10px 10px 0 0;
    background: #050a14;
  }
  .training-card-cover-placeholder {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #003366, #004a99);
    border-radius: 10px 10px 0 0;
  }
  .training-card-cover-initials {
    color: var(--white);
    font-size: 3rem;
    font-weight: 800;
  }
  .webinar-cover-placeholder {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #004a99, #0066cc);
  }
  .webinar-cover-initials {
    color: var(--white);
    font-size: 2.5rem;
    font-weight: 800;
  }
  .training-card--ai .training-card-poster {
    background: linear-gradient(165deg, #020810 0%, #061428 55%, #0a1f3d 100%);
  }
  .training-card--da .training-card-poster {
    background: linear-gradient(165deg, #020806 0%, #041208 55%, #071a0e 100%);
  }
  .training-card-poster-frame {
    display: block;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    line-height: 0;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.06),
      0 16px 40px rgba(0, 0, 0, 0.45);
    transition: box-shadow 0.4s var(--transition), transform 0.4s var(--transition);
  }
  .training-card--ai .training-card-poster-frame {
    box-shadow:
      0 0 0 1px rgba(0, 180, 255, 0.22),
      0 0 28px rgba(0, 120, 255, 0.18),
      0 16px 40px rgba(0, 0, 0, 0.5);
  }
  .training-card--da .training-card-poster-frame {
    box-shadow:
      0 0 0 1px rgba(57, 255, 120, 0.22),
      0 0 28px rgba(57, 255, 120, 0.14),
      0 16px 40px rgba(0, 0, 0, 0.5);
  }
  .training-card-poster img {
    width: 100%;
    height: auto;
    min-height: 300px;
    max-height: 420px;
    object-fit: contain;
    object-position: center top;
    display: block;
    transition: transform 0.55s var(--transition);
  }
  .training-card--featured:hover .training-card-poster-frame {
    transform: translateY(-4px);
  }
  .training-card--ai.training-card--featured:hover .training-card-poster-frame {
    box-shadow:
      0 0 0 1px rgba(0, 200, 255, 0.35),
      0 0 36px rgba(0, 140, 255, 0.28),
      0 22px 48px rgba(0, 0, 0, 0.55);
  }
  .training-card--da.training-card--featured:hover .training-card-poster-frame {
    box-shadow:
      0 0 0 1px rgba(57, 255, 120, 0.35),
      0 0 36px rgba(57, 255, 120, 0.22),
      0 22px 48px rgba(0, 0, 0, 0.55);
  }
  .training-card--featured:hover .training-card-poster img {
    transform: scale(1.02);
  }
  .training-card-visual-overlay {
    position: absolute;
    inset: 14px 14px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 16px 18px 18px;
    background: linear-gradient(180deg, transparent 52%, rgba(0, 8, 20, 0.55) 78%, rgba(0, 8, 20, 0.92) 100%);
    border-radius: 10px 10px 0 0;
    pointer-events: none;
  }
  .training-card-price {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--white);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 8px 14px;
    border-radius: 8px;
    letter-spacing: 0.02em;
  }
  .training-card-price small {
    font-size: 0.65rem;
    font-weight: 600;
    opacity: 0.85;
    letter-spacing: 0.04em;
  }
  .training-card--ai .training-card-price {
    border-color: rgba(0, 180, 255, 0.35);
    box-shadow: 0 0 16px rgba(0, 140, 255, 0.2);
  }
  .training-card--da .training-card-price {
    border-color: rgba(57, 255, 120, 0.35);
    box-shadow: 0 0 16px rgba(57, 255, 120, 0.15);
  }
  .training-card-visual-badge {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(0, 102, 204, 0.9);
    padding: 6px 12px;
    border-radius: 4px;
    margin-bottom: 8px;
  }
  .training-card--da .training-card-visual-badge {
    background: rgba(22, 160, 70, 0.92);
  }
  .training-card-visual-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
  }
  .training-card-visual-cta svg {
    width: 16px;
    height: 16px;
    transition: transform 0.25s var(--transition);
  }
  .training-card--featured:hover .training-card-visual-cta svg {
    transform: translateX(4px);
  }
  .training-card-visual img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.5s var(--transition);
  }
  .training-card--featured:hover .training-card-visual img {
    transform: scale(1.04);
  }
  .card-cta--btn {
    background: none;
    border: none;
    border-bottom: 2px solid var(--blue-mid);
    padding: 0 0 2px;
    font-family: inherit;
    cursor: pointer;
  }

  .course-detail-panel {
    margin-top: 48px;
    animation: courseDetailIn 0.45s var(--transition) both;
  }
  .course-detail-panel[hidden] {
    display: none !important;
  }
  @keyframes courseDetailIn {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .course-detail-panel-inner {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 48px;
    overflow: hidden;
  }
  .course-detail-panel-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--blue-deep), var(--blue-bright));
  }
  .course-detail-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--white);
    color: var(--blue-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s, transform 0.25s;
    z-index: 2;
  }
  .course-detail-close svg { width: 20px; height: 20px; }
  .course-detail-close:hover {
    background: var(--blue-pale);
    border-color: var(--blue-mid);
    transform: rotate(90deg);
  }
  .course-detail-grid {
    display: grid;
    grid-template-columns: minmax(260px, 380px) 1fr;
    gap: 48px;
    align-items: start;
  }
  .course-detail-media img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
  }
  .course-detail-media--poster {
    background: linear-gradient(165deg, #050a14 0%, #0a1628 100%);
    border-radius: var(--radius);
    padding: 12px;
    border: 1px solid rgba(0, 140, 255, 0.2);
    box-shadow: 0 0 24px rgba(0, 100, 200, 0.12);
  }
  .course-detail-media--poster.course-detail-media--da {
    background: linear-gradient(165deg, #040a06 0%, #071a0e 100%);
    border-color: rgba(57, 255, 120, 0.2);
    box-shadow: 0 0 24px rgba(57, 255, 120, 0.1);
  }
  .course-detail-media--poster img {
    border-radius: 8px;
    box-shadow: none;
    object-fit: contain;
    max-height: 520px;
  }
  .course-detail-price-tag--accent {
    border-left-color: var(--blue-bright);
    background: linear-gradient(90deg, var(--blue-pale), var(--white));
  }
  .course-detail-price-tag--green {
    border-left-color: #16a046;
    background: linear-gradient(90deg, #ecfdf3, var(--white));
  }
  .course-detail-price-tag--green .course-detail-price-value {
    color: #0d5c2e;
  }
  .course-detail-price-tag {
    margin-top: 20px;
    padding: 16px 20px;
    background: var(--blue-pale);
    border-radius: var(--radius);
    border-left: 4px solid var(--blue-mid);
  }
  .course-detail-price-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 4px;
  }
  .course-detail-price-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--blue-deep);
  }
  .course-detail-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--blue-deep);
    line-height: 1.2;
    margin-bottom: 16px;
  }
  .course-detail-lead {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-muted);
    margin-bottom: 28px;
  }
  .course-detail-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 32px;
  }
  .course-detail-stat {
    text-align: center;
    padding: 14px 8px;
    background: var(--blue-pale);
    border-radius: var(--radius);
  }
  .course-detail-stat-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--blue-mid);
  }
  .course-detail-stat-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
  }
  .course-detail-subheading {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--blue-deep);
    margin: 24px 0 12px;
  }
  .course-detail-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
  }
  .course-detail-list li {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-muted);
    padding-left: 22px;
    position: relative;
  }
  .course-detail-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--blue-bright);
  }
  .course-detail-text {
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--text-muted);
  }
  .course-detail-steps {
    counter-reset: step;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
  }
  .course-detail-steps li {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-muted);
    padding-left: 36px;
    position: relative;
  }
  .course-detail-steps li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--blue-mid);
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .course-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
  }

  @media (max-width: 900px) {
    .course-detail-grid { grid-template-columns: 1fr; }
    .course-detail-stats { grid-template-columns: repeat(2, 1fr); }
    .training-card-visual {
      width: calc(100% + 48px);
      margin-left: -24px;
      margin-right: -24px;
    }
  }
  @media (max-width: 480px) {
    .course-detail-panel-inner { padding: 32px 20px; }
    .course-detail-actions { flex-direction: column; }
    .course-detail-actions .btn { width: 100%; justify-content: center; }
    .training-card-poster img {
      min-height: 240px;
      max-height: 340px;
    }
    .training-card-price {
      top: 20px;
      right: 20px;
      font-size: 0.82rem;
      padding: 6px 10px;
    }
  }

  /* ============================================================
     PAYMENT PORTAL PAGE
     ============================================================ */
  body.payment-page {
    cursor: auto;
    background: linear-gradient(165deg, var(--blue-pale) 0%, var(--white) 42%, var(--blue-light) 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .payment-header {
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .payment-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .payment-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--blue-mid);
    transition: color 0.2s;
  }
  .payment-back svg { width: 18px; height: 18px; }
  .payment-back:hover { color: var(--blue-deep); }
  .payment-brand img {
    height: 44px;
    width: auto;
  }
  .payment-main {
    flex: 1;
    padding: 48px 0 72px;
  }
  .payment-container { max-width: 960px; }
  .payment-hero { text-align: center; margin-bottom: 40px; }
  .payment-title {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 800;
    color: var(--blue-deep);
    margin-bottom: 12px;
  }
  .payment-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
  }
  .payment-steps {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
  }
  .payment-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-faint);
    transition: all 0.3s var(--transition);
  }
  .payment-step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--blue-light);
    color: var(--blue-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
  }
  .payment-step.is-active {
    border-color: var(--blue-mid);
    color: var(--blue-deep);
    box-shadow: var(--shadow-sm);
  }
  .payment-step.is-active .payment-step-num {
    background: var(--blue-mid);
    color: var(--white);
  }
  .payment-step.is-done {
    color: var(--blue-mid);
    border-color: rgba(0, 74, 153, 0.25);
  }
  .payment-step.is-done .payment-step-num {
    background: var(--blue-deep);
    color: var(--white);
  }
  .payment-layout { position: relative; }
  .payment-flow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
  }
  .payment-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    box-shadow: var(--shadow-md);
  }
  .payment-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--blue-deep);
    margin-bottom: 10px;
  }
  .payment-card-icon {
    width: 24px;
    height: 24px;
    color: var(--blue-mid);
    flex-shrink: 0;
  }
  .payment-card-desc {
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin-bottom: 24px;
  }
  .payment-qr-wrap {
    display: flex;
    justify-content: center;
    margin: 0 auto 24px;
    padding: 16px;
    background: var(--blue-pale);
    border-radius: var(--radius);
    max-width: 300px;
  }
  .payment-qr-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
  .payment-upi-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 8px;
  }
  .payment-upi-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .payment-upi-id {
    flex: 1;
    min-width: 0;
    font-family: 'Montserrat', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blue-deep);
    background: var(--blue-pale);
    padding: 12px 14px;
    border-radius: 8px;
    word-break: break-all;
  }
  .payment-copy-btn {
    flex-shrink: 0;
    padding: 10px 18px;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--blue-mid);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.25s, transform 0.25s;
  }
  .payment-copy-btn:hover {
    background: var(--blue-deep);
    transform: translateY(-1px);
  }
  .payment-copy-status {
    font-size: 0.78rem;
    color: var(--blue-mid);
    margin-top: 8px;
    min-height: 1.2em;
  }
  .payment-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 36px 24px;
    border: 2px dashed rgba(0, 74, 153, 0.35);
    border-radius: var(--radius);
    background: var(--blue-pale);
    cursor: pointer;
    transition: border-color 0.25s, background 0.25s;
    margin-bottom: 20px;
  }
  .payment-dropzone:hover,
  .payment-dropzone.is-dragover {
    border-color: var(--blue-mid);
    background: var(--blue-light);
  }
  .payment-dropzone.has-file {
    border-style: solid;
    border-color: var(--blue-mid);
  }
  .payment-dropzone-icon svg {
    width: 48px;
    height: 48px;
    color: var(--blue-mid);
  }
  .payment-dropzone-text {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--blue-deep);
    text-align: center;
  }
  .payment-dropzone-hint {
    font-size: 0.78rem;
    color: var(--text-faint);
  }
  .payment-preview {
    position: relative;
    margin-bottom: 20px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
  }
  .payment-preview img {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    background: #f8fafc;
  }
  .payment-preview-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(0, 22, 51, 0.75);
    color: var(--white);
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .payment-field { display: block; margin-bottom: 20px; }
  .payment-field-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 8px;
  }
  .payment-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .payment-input:focus {
    outline: none;
    border-color: var(--blue-mid);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
  }
  .payment-submit {
    width: 100%;
    justify-content: center;
  }
  .payment-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
  }
  .payment-form-status {
    font-size: 0.85rem;
    margin-top: 12px;
    min-height: 1.2em;
  }
  .payment-form-status.error { color: #c0392b; }
  .payment-form-status.success { color: #1e7e34; }

  .payment-otp-input {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.4em;
    text-align: center;
    font-family: 'Montserrat', monospace;
  }
  .payment-brand .logo-text {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--blue-deep);
  }

  .payment-success {
    text-align: center;
    padding: 48px 32px;
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: courseDetailIn 0.5s var(--transition) both;
  }
  .payment-success-badge {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    color: #25d366;
  }
  .payment-success-badge svg { width: 100%; height: 100%; }
  .payment-success-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--blue-deep);
    margin-bottom: 12px;
  }
  .payment-success-desc {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 520px;
    margin: 0 auto 32px;
  }
  .payment-whatsapp-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 32px;
    align-items: center;
    text-align: left;
    max-width: 640px;
    margin: 0 auto 28px;
    padding: 28px;
    background: linear-gradient(135deg, #0a1628 0%, #003366 100%);
    border-radius: var(--radius-lg);
  }
  .payment-whatsapp-qr img {
    width: 200px;
    height: auto;
    border-radius: 12px;
  }
  .payment-whatsapp-actions { color: var(--white); }
  .btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #25d366;
    color: var(--white);
    border-color: #25d366;
    padding: 16px 28px;
    font-size: 0.82rem;
    width: 100%;
  }
  .btn-whatsapp svg { width: 22px; height: 22px; flex-shrink: 0; }
  .btn-whatsapp:hover {
    background: #1ebe57;
    border-color: #1ebe57;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  }
  .payment-whatsapp-hint {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 14px;
    line-height: 1.5;
  }
  .payment-success-home {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blue-mid);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .payment-footer {
    padding: 24px 0;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-faint);
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.6);
  }

  @media (max-width: 768px) {
    .payment-flow { grid-template-columns: 1fr; }
    .payment-whatsapp-card {
      grid-template-columns: 1fr;
      text-align: center;
    }
    .payment-whatsapp-qr img { margin: 0 auto; }
  }

  /* ============================================================
     COURSE SALE MODULE
     ============================================================ */
  body.sale-page { cursor: auto; }
  body.sale-page #cursor-dot,
  body.sale-page #cursor-ring { display: none; }

  .sale-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
  }
  .sale-nav .nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .sale-nav .nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
  }
  .sale-nav .nav-links {
    display: flex;
    gap: 20px;
  }
  @media (max-width: 768px) {
    .sale-nav .nav-links {
      display: none;
      gap: 4px;
    }
    .sale-nav .nav-links.open {
      display: flex;
    }
  }
  .sale-nav .nav-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blue-deep);
  }
  .sale-nav .nav-link:hover { color: var(--blue-mid); }

  .back-link {
    display: inline-block;
    margin: 32px 0 24px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--blue-mid);
    text-decoration: none;
  }
  .back-link:hover { color: var(--blue-deep); }

  .training-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
  }
  .training-card-body { padding: 0 40px 40px; flex: 1; display: flex; flex-direction: column; }
  .course-sale-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue-mid);
    background: var(--blue-light);
    padding: 5px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
    width: fit-content;
  }
  .course-card-actions { margin-top: auto; padding-top: 20px; }
  .btn-sm { padding: 10px 20px; font-size: 0.78rem; }
  .btn-block { display: block; width: 100%; text-align: center; }
  .empty-courses-msg {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 1.1rem;
  }

  .course-detail-page { padding: 20px 0 80px; background: var(--blue-pale); min-height: 100vh; }
  .course-detail-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
    align-items: start;
  }
  .course-detail-main {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-md);
  }
  .course-detail-hero { position: relative; margin-bottom: 28px; border-radius: var(--radius); overflow: hidden; }
  .course-detail-image {
    width: 100%;
    height: 320px;
    object-fit: contain;
    display: block;
    background: #050a14;
  }
  .course-detail-image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--blue-deep), var(--blue-mid));
    color: white;
    font-size: 4rem;
    font-weight: 800;
  }
  .course-detail-badges {
    position: absolute;
    bottom: 16px;
    left: 16px;
    display: flex;
    gap: 8px;
  }
  .course-badge {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 4px;
    background: rgba(255,255,255,0.95);
    color: var(--blue-deep);
  }
  .course-badge--level { background: var(--blue-mid); color: white; }
  .course-detail-title {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    color: var(--blue-deep);
    margin-bottom: 16px;
    line-height: 1.2;
  }
  .course-detail-summary {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 28px;
  }
  .course-detail-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 24px;
    background: var(--blue-pale);
    border-radius: var(--radius);
    margin-bottom: 36px;
  }
  .meta-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; }
  .meta-value { font-size: 0.95rem; font-weight: 700; color: var(--blue-deep); }
  .course-detail-section { margin-bottom: 36px; }
  .course-detail-section h2 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--blue-deep);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--blue-light);
  }
  .course-detail-text { font-size: 0.95rem; line-height: 1.8; color: var(--text-muted); }
  .course-learn-list, .course-requirements-list {
    list-style: none;
    display: grid;
    gap: 10px;
  }
  .course-learn-list li, .course-requirements-list li {
    position: relative;
    padding-left: 24px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-muted);
  }
  .course-learn-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: 800;
  }
  .course-requirements-list li::before {
    content: '•';
    position: absolute;
    left: 4px;
    color: var(--blue-mid);
    font-weight: 800;
  }

  .course-purchase-card { position: sticky; top: 100px; }
  .purchase-card-inner {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-lg);
    padding: 36px;
    box-shadow: 0 20px 40px rgba(0, 74, 153, 0.08), 0 0 0 1px rgba(0, 102, 204, 0.05);
    border: 1px solid rgba(0, 102, 204, 0.1);
  }
  .purchase-price { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
  .purchase-price-label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
  .purchase-price-amount { font-size: 2.2rem; font-weight: 900; color: var(--blue-deep); }
  .purchase-includes { list-style: none; margin-bottom: 28px; }
  .purchase-includes li {
    padding: 10px 0 10px 28px;
    position: relative;
    font-size: 0.88rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--blue-light);
  }
  .purchase-includes li::before { content: '✓'; position: absolute; left: 0; color: #28a745; font-weight: 800; }
  .purchase-btn {
    padding: 16px 24px;
    font-size: 0.92rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: linear-gradient(90deg, #ffd26f, #ffb830);
    color: var(--blue-deep);
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(255, 210, 111, 0.35);
    transition: transform 0.25s, box-shadow 0.25s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }
  .purchase-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(255, 210, 111, 0.45);
    background: linear-gradient(90deg, #ffd26f, #ffb830);
    color: var(--blue-deep);
  }
  .purchase-note { font-size: 0.78rem; color: var(--text-faint); text-align: center; margin-top: 16px; line-height: 1.5; }

  .purchase-page { padding: 20px 0 80px; background: var(--blue-pale); min-height: 100vh; }
  .purchase-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: start;
  }
  .purchase-form-section {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-md);
  }
  .purchase-form-section h1 { font-size: 1.8rem; font-weight: 800; color: var(--blue-deep); margin-bottom: 8px; }
  .purchase-subtitle { color: var(--text-muted); margin-bottom: 28px; }
  .form-section-title {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue-mid);
    margin: 28px 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--blue-light);
  }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .form-field { display: block; margin-bottom: 16px; }
  .form-field span { display: block; font-size: 0.78rem; font-weight: 700; color: var(--text-faint); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
  .form-field input {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--blue-light);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
  }
  .form-field input:focus { outline: none; border-color: var(--blue-mid); }
  .payment-options { display: grid; gap: 12px; margin-bottom: 28px; }
  .payment-option { display: flex; gap: 12px; cursor: pointer; }
  .payment-option input { margin-top: 4px; flex-shrink: 0; }
  .payment-option-box {
    flex: 1;
    padding: 16px;
    border: 2px solid var(--blue-light);
    border-radius: var(--radius);
    transition: border-color 0.2s;
  }
  .payment-option input:checked + .payment-option-box {
    border-color: var(--blue-mid);
    background: var(--blue-pale);
  }
  .payment-option-box strong { display: block; font-size: 0.9rem; color: var(--blue-deep); margin-bottom: 4px; }
  .payment-option-box small { font-size: 0.8rem; color: var(--text-muted); }
  .purchase-submit-btn { padding: 16px; font-size: 1rem; }

  .order-summary {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 100px;
  }
  .order-summary h2 { font-size: 1.1rem; font-weight: 800; color: var(--blue-deep); margin-bottom: 20px; }
  .order-summary-course {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
  }
  .order-summary-course img { width: 80px; height: 60px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
  .order-summary-course h3 { font-size: 0.95rem; font-weight: 700; color: var(--blue-deep); margin-bottom: 6px; }
  .order-summary-course p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
  .order-summary-rows { margin-bottom: 24px; }
  .order-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--blue-light);
  }
  .order-row--total {
    border-bottom: none;
    padding-top: 16px;
    font-weight: 800;
    font-size: 1rem;
    color: var(--blue-deep);
  }
  .order-total { font-size: 1.3rem; color: var(--blue-mid); }
  .order-trust p { font-size: 0.8rem; color: var(--text-faint); padding: 6px 0; }

  .purchase-success-page { padding: 60px 0 80px; background: var(--blue-pale); min-height: 100vh; }
  .success-card {
    max-width: 600px;
    margin: 0 auto;
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 48px 40px;
    box-shadow: var(--shadow-lg);
    text-align: center;
  }
  .success-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    background: #d4edda;
    color: #28a745;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
  }
  .success-card h1 { font-size: 1.8rem; font-weight: 800; color: var(--blue-deep); margin-bottom: 16px; }
  .success-message { color: var(--text-muted); line-height: 1.7; margin-bottom: 32px; }
  .success-details {
    text-align: left;
    background: var(--blue-pale);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
  }
  .success-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 0.88rem;
    border-bottom: 1px solid var(--blue-light);
  }
  .success-detail-row:last-child { border-bottom: none; }
  .status-badge { padding: 4px 10px; border-radius: 4px; font-size: 0.78rem; font-weight: 700; }
  .status-badge--pending { background: #fff3cd; color: #856404; }
  .success-next { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 32px; }
  .success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

  .flash-message {
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
  }
  .flash-message.success { background: #d4edda; color: #155724; }
  .flash-message.error { background: #f8d7da; color: #721c24; }

  /* ============================================================
     12. GALLERY PREVIEW SECTION
     ============================================================ */
  .gallery-preview-section {
    background: var(--blue-pale);
  }
  .gallery-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
  }
  .gallery-preview-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: transform 0.4s var(--transition), box-shadow 0.4s var(--transition);
  }
  .gallery-preview-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
  }
  .gallery-preview-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  .gallery-preview-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--transition);
  }
  .gallery-preview-card:hover .gallery-preview-img-wrap img {
    transform: scale(1.08);
  }
  .gallery-preview-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5, 14, 26, 0.8) 0%, rgba(5, 14, 26, 0.1) 60%, transparent 100%);
    display: flex;
    align-items: flex-end;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.3s var(--transition);
  }
  .gallery-preview-card:hover .gallery-preview-overlay {
    opacity: 1;
  }
  .gallery-preview-overlay h4 {
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 800;
    transform: translateY(10px);
    transition: transform 0.4s var(--transition);
  }
  .gallery-preview-card:hover .gallery-preview-overlay h4 {
    transform: translateY(0);
  }
  .gallery-preview-cta {
    text-align: center;
  }
  .empty-gallery-msg {
    text-align: center;
    padding: 40px;
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    color: var(--text-muted);
  }

  /* ============================================================
     13. RESPONSIVENESS AND MOBILE SUPPORT
     ============================================================ */
  @media (max-width: 900px) {
    .course-detail-grid,
    .purchase-grid { grid-template-columns: 1fr; }
    .course-purchase-card,
    .order-summary { position: static; }
    .course-detail-meta { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .training-card-body { padding: 0 24px 32px; }
  }

  @media (max-width: 768px) {
    .hero {
      padding: 100px 20px 60px;
    }
    .training-cards {
      grid-template-columns: 1fr;
    }
    .workshops-grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }
    .webinars-grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }
    .courses-grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }
    .gallery-preview-grid {
      grid-template-columns: 1fr;
    }
    .footer-top-inner {
      grid-template-columns: 1fr !important;
      gap: 40px;
    }
    .footer-brand {
      margin-bottom: 20px;
    }
  }

  /* ============================================================
     14. SPLASH SCREEN (First Visit Animation)
     ============================================================ */
  body.splash-active {
    overflow: hidden;
    height: 100vh;
  }

  .splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #0a1728 0%, #02070f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 1;
    visibility: visible;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), visibility 1s;
  }

  .splash-screen.fade-out {
    opacity: 0;
    visibility: hidden;
  }

  .splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }

  .splash-logo-container {
    position: relative;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 40px rgba(0, 51, 102, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform: scale(0.8);
    opacity: 0;
    animation: splashLogoReveal 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  .splash-logo {
    width: 90%;
    height: 90%;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 0 8px rgba(0, 102, 204, 0.3));
  }

  .splash-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    display: flex;
    gap: 4px;
    margin-top: 10px;
    text-shadow: 0 0 20px rgba(0, 102, 204, 0.5);
  }

  .splash-text .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(15px);
    animation: splashLetterFadeIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  /* Stagger letter animations */
  .splash-text .letter:nth-child(1) { animation-delay: 0.4s; }
  .splash-text .letter:nth-child(2) { animation-delay: 0.5s; }
  .splash-text .letter:nth-child(3) { animation-delay: 0.6s; }
  .splash-text .letter:nth-child(4) { animation-delay: 0.7s; }
  .splash-text .letter:nth-child(5) { animation-delay: 0.8s; }
  .splash-text .letter:nth-child(6) { animation-delay: 0.9s; }
  .splash-text .letter:nth-child(7) { animation-delay: 1.0s; }

  /* Keyframes */
  @keyframes splashLogoReveal {
    0% {
      transform: scale(0.6) rotate(-15deg);
      opacity: 0;
      filter: blur(10px);
      box-shadow: 0 0 0 rgba(0, 51, 102, 0);
    }
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
      filter: blur(0);
      box-shadow: 0 0 50px rgba(0, 102, 204, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.1);
    }
  }

  @keyframes splashLetterFadeIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }