/* ══════════════════════════════════════
       HERO
    ══════════════════════════════════════ */
    .cp-hero {
      position: relative;
      min-height: clamp(320px, 40vw, 460px);
      background: linear-gradient(135deg, #010f1e 0%, #01244A 50%, #023264 100%);
      overflow: hidden;
      display: flex; align-items: center;
    }
    .cp-hero-dots {
      position: absolute; inset: 0;
      background-image: radial-gradient(circle, rgba(90,151,214,0.14) 1px, transparent 1px);
      background-size: 36px 36px;
    }
    .cp-hero-glow {
      position: absolute; right: 18%; top: -120px;
      width: 560px; height: 560px; border-radius: 50%;
      background: radial-gradient(circle, rgba(4,85,168,0.22) 0%, transparent 65%);
      pointer-events: none;
    }
    /* Inline SVG circuit background — no file dependency */
    .cp-hero-circuit {
      position: absolute; right: 0; top: 0; bottom: 0; width: 52%;
      opacity: 0.06; pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='460' viewBox='0 0 700 460'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Crect x='40' y='60' width='120' height='56' rx='8'/%3E%3Crect x='220' y='30' width='110' height='50' rx='8'/%3E%3Crect x='400' y='80' width='130' height='54' rx='8'/%3E%3Crect x='590' y='40' width='85' height='44' rx='8'/%3E%3Crect x='130' y='190' width='115' height='54' rx='8'/%3E%3Crect x='320' y='220' width='125' height='50' rx='8'/%3E%3Crect x='510' y='170' width='110' height='58' rx='8'/%3E%3Crect x='60' y='320' width='140' height='54' rx='8'/%3E%3Crect x='270' y='348' width='115' height='50' rx='8'/%3E%3Crect x='460' y='300' width='135' height='58' rx='8'/%3E%3Crect x='630' y='268' width='75' height='44' rx='8'/%3E%3Cline x1='160' y1='88' x2='220' y2='55'/%3E%3Cline x1='330' y1='55' x2='400' y2='107'/%3E%3Cline x1='530' y1='107' x2='590' y2='62'/%3E%3Cline x1='100' y1='116' x2='130' y2='217'/%3E%3Cline x1='245' y1='217' x2='320' y2='245'/%3E%3Cline x1='445' y1='245' x2='510' y2='199'/%3E%3Cline x1='620' y1='199' x2='643' y2='268'/%3E%3Cline x1='200' y1='347' x2='270' y2='373'/%3E%3Cline x1='385' y1='373' x2='460' y2='329'/%3E%3Cline x1='595' y1='329' x2='630' y2='290'/%3E%3Ccircle cx='160' cy='88' r='5' fill='%23C9A84C' stroke='none'/%3E%3Ccircle cx='330' cy='55' r='5' fill='%23C9A84C' stroke='none'/%3E%3Ccircle cx='530' cy='107' r='5' fill='%23C9A84C' stroke='none'/%3E%3Ccircle cx='100' cy='116' r='4' fill='%235a97d6' stroke='none'/%3E%3Ccircle cx='245' cy='217' r='4' fill='%235a97d6' stroke='none'/%3E%3Ccircle cx='445' cy='245' r='4' fill='%235a97d6' stroke='none'/%3E%3Ccircle cx='620' cy='199' r='4' fill='%235a97d6' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
      background-size: cover; background-repeat: no-repeat;
    }
    .cp-hero-shimmer {
      position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, transparent 0%, #a40000 25%, #C9A84C 50%, #a40000 75%, transparent 100%);
      animation: ng-shimmer-line 4s ease-in-out infinite;
    }
    .cp-hero-content {
      position: relative; z-index: 2;
      width: 100%; max-width: 1280px; margin: 0 auto;
      padding: clamp(3rem,6vw,5rem) clamp(1rem,4vw,2.5rem);
    }
    .cp-hero-eyebrow {
      display: inline-flex; align-items: center; gap: 0.5rem;
      font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--ng-gold); margin-bottom: 1.25rem;
    }
    .cp-hero-eyebrow::before { content:''; display:block; width:26px; height:2px; background:var(--ng-gold); border-radius:2px; }
    .cp-hero-h1 {
      font-family: var(--font-display); font-weight: 800;
      font-size: clamp(2.1rem,5vw,3.75rem);
      color: #fff; line-height: 1.08; letter-spacing: -0.03em;
      margin-bottom: 1rem; max-width: 620px;
    }
    .cp-hero-h1 em { color: var(--ng-gold); font-style: normal; }
    .cp-hero-sub {
      font-family: var(--font-body); font-size: clamp(0.95rem,1.6vw,1.12rem);
      color: rgba(211,228,248,0.82); line-height: 1.65;
      max-width: 500px; margin-bottom: 2.25rem;
    }
    .cp-hero-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
    .cp-hero-pill {
      display: inline-flex; align-items: center; gap: 0.4rem;
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
      backdrop-filter: blur(10px); border-radius: 9999px;
      padding: 0.38rem 0.95rem;
      font-family: var(--font-body); font-size: 0.79rem; font-weight: 500;
      color: rgba(255,255,255,0.78);
      transition: background 0.2s, border-color 0.2s;
    }
    .cp-hero-pill:hover { background: rgba(255,255,255,0.1); border-color: rgba(201,168,76,0.3); }
    .cp-hero-pill i { width: 13px; height: 13px; color: var(--ng-gold); }

    /* ── BREADCRUMB ── */
    .cp-breadcrumb { background: #fff; border-bottom: 1px solid var(--ng-gray-100); padding: 0.7rem 0; }
    .cp-bc-inner {
      max-width: 1280px; margin: 0 auto; padding: 0 clamp(1rem,4vw,2.5rem);
      display: flex; align-items: center; gap: 0.4rem;
      font-family: var(--font-body); font-size: 0.78rem; color: var(--ng-gray-400);
    }
    .cp-bc-inner a { color: var(--ng-navy-400); text-decoration: none; transition: color 0.2s; }
    .cp-bc-inner a:hover { color: var(--ng-crimson); }

    /* ══════════════════════════════════════
       FILTER TABS — sticky
    ══════════════════════════════════════ */
    .cp-filter-bar {
      background: #fff; position: sticky; top: 72px; z-index: 90;
      border-bottom: 1px solid var(--ng-gray-100);
      box-shadow: 0 2px 16px rgba(1,36,74,0.05);
    }
    .cp-filter-inner {
      max-width: 1280px; margin: 0 auto; padding: 0 clamp(1rem,4vw,2.5rem);
      display: flex; align-items: flex-end; overflow-x: auto; scrollbar-width: none;
    }
    .cp-filter-inner::-webkit-scrollbar { display: none; }
    .cp-filter-tab {
      display: inline-flex; align-items: center; gap: 0.45rem;
      padding: 1rem 1.1rem;
      font-family: var(--font-body); font-size: 0.86rem; font-weight: 500;
      color: var(--ng-gray-500);
      border-bottom: 3px solid transparent; white-space: nowrap; cursor: pointer;
      background: transparent; border-top: none; border-left: none; border-right: none;
      transition: color 0.2s, border-color 0.2s;
    }
    .cp-filter-tab i { width: 14px; height: 14px; }
    .cp-filter-tab:hover { color: var(--ng-navy); }
    .cp-filter-tab.active { color: var(--ng-crimson); border-bottom-color: var(--ng-crimson); font-weight: 600; }
    .cp-tab-count {
      font-family: var(--font-mono); font-size: 0.66rem;
      background: var(--ng-gray-100); color: var(--ng-gray-500);
      border-radius: 9999px; padding: 0.1rem 0.48rem;
      transition: background 0.2s, color 0.2s;
    }
    .cp-filter-tab.active .cp-tab-count { background: rgba(164,0,0,0.09); color: var(--ng-crimson); }

    /* ══════════════════════════════════════
       COURSES GRID SECTION
       Uses the uploaded a-flance-bg.webp
    ══════════════════════════════════════ */
    .cp-grid-section {
      position: relative;
      padding: clamp(4rem,8vw,6.5rem) 0;
      background: #f0f4f9;
      overflow: hidden;
    }
    /* Uploaded bg — placed as actual image reference, will work when file is in assets */
    .cp-grid-bg {
      position: absolute; inset: 0;
      background-image: url('a-flance-bg.webp');  /* relative for preview; use ../assets/images/a-flance-bg.webp in production */
      background-size: cover; background-position: center;
      opacity: 0.6;
      pointer-events: none;
    }
    /* Very subtle overlay to ensure cards read cleanly */
    .cp-grid-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(180deg,
        rgba(240,244,249,0.2) 0%,
        rgba(240,244,249,0.08) 45%,
        rgba(240,244,249,0.2) 100%);
      pointer-events: none;
    }
    .cp-grid-container {
      position: relative; z-index: 1;
      max-width: 1280px; margin: 0 auto;
      padding: 0 clamp(1rem,4vw,2.5rem);
    }

    /* Category headings */
    .cp-cat-heading {
      display: flex; align-items: center; gap: 1rem;
      margin-bottom: 1.75rem;
      padding-bottom: 1rem;
    }
    .cp-cat-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; }
    .cp-cat-icon i { width: 22px; height: 22px; color: #fff; }
    .cp-cat-title { font-family: var(--font-display); font-size: clamp(1.2rem,2.2vw,1.55rem); font-weight: 700; color: var(--ng-navy); letter-spacing: -0.02em; }
    .cp-cat-subtitle { font-family: var(--font-body); font-size: 0.78rem; color: var(--ng-gray-400); margin-top: 0.1rem; }
    .cp-cat-rule { flex: 1; height: 1px; background: linear-gradient(to right, rgba(1,36,74,0.1), transparent); }
    .cp-cat-view-all {
      display: inline-flex; align-items: center; gap: 0.3rem;
      font-family: var(--font-body); font-size: 0.79rem; font-weight: 600;
      color: var(--ng-navy-400); text-decoration: none; white-space: nowrap;
      transition: color 0.2s, gap 0.2s;
    }
    .cp-cat-view-all:hover { color: var(--ng-crimson); gap: 0.5rem; }
    .cp-cat-view-all i { width: 12px; height: 12px; }

    /* ══════════════════════════════════════
       COURSE CARD — 3 per row
    ══════════════════════════════════════ */
    .cp-cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-bottom: 3.5rem;
    }
    @media (max-width: 1100px) { .cp-cards-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 580px)  { .cp-cards-grid { grid-template-columns: 1fr; } }

    .cp-course-card {
      --acc: #0455A8;
      background: #fff;
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid rgba(1,36,74,0.07);
      box-shadow: 0 4px 24px rgba(1,36,74,0.08);
      display: flex; flex-direction: column;
      text-decoration: none; color: inherit;
      transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1),
                  box-shadow 0.3s cubic-bezier(0.4,0,0.2,1);
    }
    .cp-course-card:hover { transform: translateY(-7px); box-shadow: 0 20px 50px rgba(1,36,74,0.16); }

    /* Image */
    .cp-card-img { position: relative; overflow: hidden; height: 200px; }
    .cp-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s cubic-bezier(0.4,0,0.2,1); display: block; }
    .cp-course-card:hover .cp-card-img img { transform: scale(1.07); }
    .cp-card-img-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(1,15,30,0.7) 0%, rgba(1,15,30,0.1) 55%, transparent 100%);
    }
    /* Accent top bar */
    .cp-card-topbar { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--acc); }
    /* Image badges */
    .cp-card-vendor {
      position: absolute; top: 14px; left: 14px;
      font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500;
      letter-spacing: 0.1em; text-transform: uppercase;
      background: rgba(0,0,0,0.52); backdrop-filter: blur(8px);
      color: rgba(255,255,255,0.88); border-radius: 9999px;
      padding: 0.22rem 0.6rem; border: 1px solid rgba(255,255,255,0.12);
    }
    .cp-card-level-badge {
      position: absolute; top: 14px; right: 14px;
      font-family: var(--font-body); font-size: 0.67rem; font-weight: 700;
      letter-spacing: 0.05em; text-transform: uppercase;
      border-radius: 9999px; padding: 0.22rem 0.65rem;
    }
    .cp-card-hot {
      position: absolute; bottom: 13px; right: 14px;
      display: inline-flex; align-items: center; gap: 0.28rem;
      background: linear-gradient(135deg,#C9A84C,#F0D890);
      color: #3d2800; font-family: var(--font-body);
      font-size: 0.63rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
      border-radius: 9999px; padding: 0.22rem 0.62rem;
      box-shadow: 0 4px 14px rgba(201,168,76,0.38);
    }
    .cp-card-hot i { width: 10px; height: 10px; }

    /* Body */
    .cp-card-body { padding: 1.35rem 1.35rem 0.7rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
    .cp-card-certs { display: flex; flex-wrap: wrap; gap: 0.32rem; }
    .cp-cert-tag {
      font-family: var(--font-mono); font-size: 0.59rem; font-weight: 500;
      letter-spacing: 0.07em; text-transform: uppercase;
      border: 1px solid; border-radius: 9999px; padding: 0.16rem 0.52rem;
    }
    .cp-card-title {
      font-family: var(--font-display); font-weight: 700;
      font-size: clamp(0.98rem,1.4vw,1.12rem);
      color: var(--ng-navy); line-height: 1.25; letter-spacing: -0.02em;
    }
    .cp-card-desc {
      font-family: var(--font-body); font-size: 0.82rem;
      color: var(--ng-gray-500); line-height: 1.6;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .cp-card-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.15rem; }
    .cp-card-meta-item {
      display: inline-flex; align-items: center; gap: 0.26rem;
      font-family: var(--font-body); font-size: 0.72rem; color: var(--ng-gray-400);
    }
    .cp-card-meta-item i { width: 18px; height: 18px; color: var(--acc); }
    .cp-card-meta-item svg { width: 18px; height: 18px; color: var(--acc); }
    /* Footer */
    .cp-card-foot {
      padding: 0.75rem 1.35rem 1.25rem;
      display: flex; align-items: center; gap: 0.6rem;
      border-top: 1px solid var(--ng-gray-100);
      margin-top: auto;
    }
    .cp-card-foot-btn { flex: 1; }
    .cp-live-indicator {
      display: inline-flex; align-items: center; gap: 0.32rem;
      font-family: var(--font-body); font-size: 0.7rem; font-weight: 600;
      color: var(--ng-success); white-space: nowrap;
    }
    .cp-live-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--ng-success); animation: ng-pulse-wa 2.2s infinite;
    }

    /* Gold card variant */
    .cp-course-card--gold {
      background: linear-gradient(160deg, #fef9ec 0%, #fff 55%);
      border-color: rgba(201,168,76,0.18);
    }
    .cp-course-card--gold .cp-card-title { color: #3a2400; }
    .cp-course-card--gold .cp-card-foot { background: rgba(201,168,76,0.05); border-top-color: rgba(201,168,76,0.18); }

    
    /* ══════════════════════════════════════
       FAQ SECTION — with mirrored uploaded bg
    ══════════════════════════════════════ */
    .cp-faq-section {
      position: relative;
      padding: clamp(4rem,8vw,6.5rem) 0;
      overflow: hidden;
      background: #f0f4f9;
    }
    .cp-faq-bg {
      position: absolute; inset: 0;
      background-image: url('a-flance-bg.webp');
      background-size: cover; background-position: center bottom;
      opacity: 0.38;
      transform: scaleX(-1);
      pointer-events: none;
    }
    .cp-faq-container { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; padding: 0 clamp(1rem,4vw,2.5rem); }
    .ng-faq-item {
      background: rgba(255,255,255,0.9); backdrop-filter: blur(14px);
      border-radius: 14px; border: 1px solid rgba(1,36,74,0.07);
      margin-bottom: 0.75rem; overflow: hidden;
      box-shadow: 0 2px 12px rgba(1,36,74,0.05); transition: box-shadow 0.3s;
    }
    .ng-faq-item:hover { box-shadow: 0 8px 28px rgba(1,36,74,0.1); }
    .ng-faq-q {
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      padding: 1.15rem 1.4rem; cursor: pointer;
      font-family: var(--font-body); font-size: 0.92rem; font-weight: 600;
      color: var(--ng-navy); background: transparent; border: none; width: 100%; text-align: left;
      transition: color 0.2s;
    }
    .ng-faq-q:hover { color: var(--ng-crimson); }
    .ng-faq-q i { width: 18px; height: 18px; color: var(--ng-gray-400); flex-shrink: 0; transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), color 0.2s; }
    .ng-faq-item.open .ng-faq-q i { transform: rotate(45deg); color: var(--ng-crimson); }
    .ng-faq-a { padding: 0 1.4rem; max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.3s; }
    .ng-faq-item.open .ng-faq-a { max-height: 400px; padding-bottom: 1.25rem; }
    .ng-faq-a p { font-family: var(--font-body); font-size: 0.87rem; color: var(--ng-gray-500); line-height: 1.7; }

    /* ── Filter hide ── */
    .cp-filter-group[data-group].cp-hidden { display: none; }

    @media (max-width: 768px) {
      .cp-hero-h1 { font-size: 2.1rem; }
      .cp-hero-circuit { display: none; }
    }