/* ---------- BRAND COLORS (K524 v0.1) ---------- */
    :root{
      --brand-primary: #dd0000; /* primary CTA */
      --brand-accent:  #f4b400; /* warm-gold accent for urgency */
      --brand-dark:   #0b1320; /* near-black for text */
      --brand-muted:  #6c7a89; /* muted copy */
      --bg:           #f6f8fa; /* page background */
      --card:         #ffffff; /* card background */
      --success:      #198754;
      --danger:       #dc3545;
    }

    /* ---------- CRITICAL / ABOVE-THE-FOLD CSS (to minimize for speed) ---------- */
    html,body{height:100%;}
    body{
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
      color:var(--brand-dark);
      background:var(--bg);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.5;
    }

    /* Sticky navbar */
    .navbar{
      backdrop-filter: blur(4px);
      background: rgba(255,255,255,0.92);
      border-bottom: 1px solid rgba(11,19,32,0.06);
    }
    .nav-link{color:var(--brand-dark);}
    .nav-link:hover{color:var(--brand-primary);}

    .btn-primary-custom{
      background:var(--brand-primary);
      border: none;
      color: #fff;
      padding: 0.7rem 1.05rem;
      font-weight:700;
      border-radius:12px;
      box-shadow: 0 6px 18px rgba(11,19,32,0.08);
    }

    /* Hero */
    .hero{
      min-height: calc(100vh - 72px);
      display:flex;align-items:center;padding:3rem 0;
    }
    .hero-title{font-size:clamp(1.8rem, 3.4vw, 2.8rem);line-height:1.05;font-weight:800;color:var(--brand-dark)}
    .hero-sub{color:var(--brand-muted);font-size:1rem;margin-top:.6rem}

    /* Responsive video wrapper (lazy-loading facade) */
    .video-facade{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(11,19,32,0.08);}
    .video-facade img{width:100%;display:block}
    .video-facade .playbtn{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.6);padding:18px;border-radius:999px;color:#fff;font-size:20px;border:2px solid rgba(255,255,255,0.12)
    }

    /* Features */
    .feature-card{background:var(--card);border-radius:12px;padding:1.6rem;transition:transform .28s ease,box-shadow .28s ease}
    .feature-card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(11,19,32,0.08)}

    /* Instructor */
    .instructor-photo{width:100%;max-width:320px;border-radius:16px;object-fit:cover}

    /* Step cards */
    .step-card{background:linear-gradient(180deg, rgba(10,107,59,0.04), rgba(244,180,0,0.02));padding:1.2rem;border-radius:12px}

    /* Pricing */
    .pricing-section { padding: 100px 0; background: #fff; }
    .pricing-section h2 { font-weight: 700; text-align: center; margin-bottom: 60px; }
    .pricing-card {
      border: 1px solid #eaeaea;
      border-radius: 16px;
      padding: 40px 30px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      transition: all 0.2s ease;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .pricing-card:hover { transform: translateY(-4px); box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
    .pricing-card.popular {
      border: 2px solid #dd0000;
      box-shadow: 0 6px 18px rgba(221, 0, 0, 0.15);
      transform: scale(1.05);
      position: relative;
      z-index: 1;
    }
    .badge-popular {
      position: absolute;
      top: -15px;
      left: 50%;
      transform: translateX(-50%);
      background-color: #dd0000;
      color: white;
      padding: 6px 14px;
      font-size: 0.8rem;
      font-weight: 600;
      border-radius: 12px;
    }
    .pricing-title { font-weight: 600; font-size: 1.3rem; margin-bottom: 20px; }
    .price { font-size: 2.5rem; font-weight: 800; color: #dd0000; margin-bottom: 20px; }
    .pricing-features { list-style: none; padding: 0; margin-bottom: 30px; flex-grow: 1; }
    .pricing-features li { margin-bottom: 12px; display: flex; align-items: center; font-size: 0.95rem; }
    .pricing-features li::before { content: "✔"; color: #28a745; font-weight: bold; margin-right: 10px; }
    .pricing-btn { background-color: #dd0000; border: none; color: #fff; font-weight: 600; border-radius: 6px; padding: 10px 20px; transition: background 0.2s ease; }
    .pricing-btn:hover { background-color: #b30000; }
    
    /* Testimonials */
    .testimonial{background:linear-gradient(180deg,#fff, #fbfbfc);padding:1rem;border-radius:12px}

    /* Availability grid */
    .slot{background:var(--card);padding:.6rem;border-radius:10px;border:1px dashed rgba(11,19,32,0.04);cursor:pointer}
    .slot.available{border-color:var(--brand-primary);box-shadow:0 8px 20px rgba(10,107,59,0.06)}

    /* CTA */
    .final-cta{background:linear-gradient(90deg,var(--brand-primary), #b80000);color:#fff;padding:2.4rem;border-radius:14px}

    /* Footer */
    footer{background:#121117;color:#fff;padding:2.4rem 0}
    footer a{color:#fff}

    /* Utility: fade-in (JS toggles .in-view) */
    .fade-in{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
    .in-view{opacity:1;transform:none}

    /* Dropdown tweaks for Preply-like instant dropdown on desktop */
    .dropdown-menu{
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(11,19,32,0.08);
      border: none;
      padding: .25rem 0;
      min-width: 180px;
    }
    .dropdown-item{padding:.5rem 1rem;color:var(--brand-dark);}

    /* show dropdown instantly on hover for desktop (>= lg) */
    @media (min-width: 992px){
      .navbar .dropdown:hover > .dropdown-menu{ display: block; margin-top: 0; }
      /* disable Bootstrap's fade transitions if any */
      .dropdown-menu[aria-expanded="true"]{ display:block; }
    }

    /* Accessibility */
    @media (prefers-reduced-motion:reduce){
      *{transition:none!important;animation:none!important}
    }