:root {
      --navy: #0a1628;
      --navy-mid: #112240;
      --navy-light: #1a3560;
      --blue-accent: #2563eb;
      --sky: #60a5fa;
      --white: #ffffff;
      --off-white: #f0f4ff;
      --muted: #94a3b8;
      --border: rgba(37,99,235,0.15);
      --gold: #f59e0b;
      --shadow: 0 8px 40px rgba(10,22,40,0.1);
      --shadow-lg: 0 24px 64px rgba(37,99,235,0.18);
      /* gradient palette */
      --grad-start: #060d1f;
      --grad-mid:   #0a1f4e;
      --grad-end:   #080f2a;
    }

    .course-page, .bdy{
      position: relative; 
      background: linear-gradient(135deg, #060d1f 0%, #0c1a40 25%, #0a1535 50%, #0e1d4a 75%, #060d1f 100%);
      background-attachment: fixed;
      color: var(--navy);
    }

    .inner-banner{position: relative; z-index: 1;}
    .header{position: relative; z-index: 9;}
    ul.bulleted-list {
      column-count: 2;
      column-gap: 5px;
    }
    .bulleted-list li a {
      font-size: 0.72rem;
      padding: 5px 10px;
      display: block;
      border-radius: 5px;
    }

    .basic-panel a{
      color: #0c4ca3;
      background: #0c4ca326;
      border: 1px solid #12307233;
    }
    .advanced-panel a{
      color: #b45309;
      background: rgba(245,158,11,.07);
      border: 1px solid rgba(245,158,11,.25);
    }

    .course-box{
      position: relative;
      padding: 15px;
      background: #fff;
      border-radius: 5px;
      min-height: 300px;
      height: 100%;
    }
	.course-box:before, 
  .course-box:after{
		z-index: -1;
		position: absolute;
		content: "";
		bottom: 15px;
		left: 10px;
		width: 50%;
		top: 80%;
		max-width: 300px;
		background: #555;
		-webkit-box-shadow: 0 15px 10px #555;
		-moz-box-shadow: 0 15px 10px #555;
		box-shadow: 0 15px 10px #555;
		-webkit-transform: rotate(-3deg);
		-moz-transform: rotate(-3deg);
		-o-transform: rotate(-3deg);
		-ms-transform: rotate(-3deg);
		transform: rotate(-3deg);
	}
	.course-box:after{
		-webkit-transform: rotate(3deg);
		-moz-transform: rotate(3deg);
		-o-transform: rotate(3deg);
		-ms-transform: rotate(3deg);
		transform: rotate(3deg);
		right: 10px;
		left: auto;
	}
	.course-box2{
		background: #258bd5;
		background: linear-gradient(0deg, rgba(37,139,213,1) 0%, rgba(37,171,213,1) 100%);
	}
	.course-box3{
		background: #00a652;
		background: linear-gradient(0deg, rgba(0,166,82,1) 0%, rgba(0,154,166,1) 100%);
	}
	.course-box h4{
		color: #122d6d;
		padding-bottom: 10px;
		border-bottom: solid 3px rgba(255,255,255,.2);
	}
	.course-box .round-cir{
		position: absolute;
		left: -36px;
		top: -60px;
		background: #f68121;
		color: #fff;
		width: 75px;
		height: 75px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 600;
    	font-size: 30px;
    	border: solid 3px rgba(0,0,0,.2);
    	box-shadow: 0 0 12px rgba(0,0,0,.6);
	}
	.course-box2 .round-cir{
		background: #258bd5;
	}
	.course-box3 .round-cir{
		background: #00a652;
	}
	.course-box .cap-div{
		position: absolute;
		top: -50px;
    	left: -14px;
	}
  .carousel-slide img{
    max-height: 400px;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  
    
/* ===== BG CANVAS ===== */
      #bg-canvas {
        position: fixed; top: 0; left: 0;
        width: 100%; height: 100%;
        z-index: 0; pointer-events: none;
      }

      /* ===== LARGE COLOUR ORBS ===== */
      .bg-shapes {
        position: fixed; inset: 0;
        z-index: 0; pointer-events: none;
        overflow: hidden;
      }
      .bg-shape {
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        animation: floatShape linear infinite;
        will-change: transform;
        mix-blend-mode: screen;
      }
      /* deep royal blue � top left */
      .bg-shape-1 { width:700px;height:700px; background:radial-gradient(circle,rgba(37,99,235,0.55) 0%,transparent 70%); top:-180px; left:-150px; animation-duration:22s; }
      /* electric cyan � top right */
      .bg-shape-2 { width:500px;height:500px; background:radial-gradient(circle,rgba(6,182,212,0.38) 0%,transparent 70%); top:0; right:-100px; animation-duration:28s; animation-delay:-8s; }
      /* vivid violet � mid left */
      .bg-shape-3 { width:420px;height:420px; background:radial-gradient(circle,rgba(139,92,246,0.40) 0%,transparent 70%); top:38%; left:-80px; animation-duration:18s; animation-delay:-5s; }
      /* indigo � centre */
      .bg-shape-4 { width:350px;height:350px; background:radial-gradient(circle,rgba(99,102,241,0.35) 0%,transparent 70%); top:30%; left:38%; animation-duration:24s; animation-delay:-12s; }
      /* amber/gold � bottom right */
      .bg-shape-5 { width:320px;height:320px; background:radial-gradient(circle,rgba(245,158,11,0.22) 0%,transparent 70%); bottom:5%; right:5%; animation-duration:20s; animation-delay:-6s; }
      /* teal � bottom left */
      .bg-shape-6 { width:280px;height:280px; background:radial-gradient(circle,rgba(20,184,166,0.28) 0%,transparent 70%); bottom:10%; left:20%; animation-duration:16s; animation-delay:-3s; }
      /* rose � far right mid */
      .bg-shape-7 { width:240px;height:240px; background:radial-gradient(circle,rgba(236,72,153,0.18) 0%,transparent 70%); top:55%; right:8%; animation-duration:26s; animation-delay:-9s; }

      @keyframes floatShape {
        0%   { transform: translateY(0px) rotate(0deg) scale(1); }
        33%  { transform: translateY(-35px) rotate(5deg) scale(1.06); }
        66%  { transform: translateY(18px) rotate(-4deg) scale(0.96); }
        100% { transform: translateY(0px) rotate(0deg) scale(1); }
      }

      /* ===== GRID OVERLAY ===== */
      .bg-grid {
        position: fixed; inset: 0;
        z-index: 0; pointer-events: none;
        background-image:
          linear-gradient(rgba(96,165,250,0.045) 1px, transparent 1px),
          linear-gradient(90deg, rgba(96,165,250,0.045) 1px, transparent 1px);
        background-size: 52px 52px;
      }
      .bg-grid::after {
        content:'';
        position:absolute; inset:0;
        background-image:
          linear-gradient(45deg, rgba(139,92,246,0.03) 1px, transparent 1px),
          linear-gradient(-45deg, rgba(6,182,212,0.03) 1px, transparent 1px);
        background-size: 104px 104px;
      }

      /* ===== FLOATING GEOMETRIC ELEMENTS ===== */
      .geo-float {
        position: fixed;
        pointer-events: none;
        z-index: 0;
        animation: geoFloat ease-in-out infinite;
        opacity: 0.5;
      }
      @keyframes geoFloat {
        0%,100% { transform: translateY(0) rotate(0deg); }
        50%      { transform: translateY(-18px) rotate(8deg); }
      }
      .geo-ring {
        width: 100px; height: 100px;
        border: 1.5px solid rgba(96,165,250,0.22);
        border-radius: 50%;
      }
      .geo-tri {
        width: 0; height: 0;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-bottom: 52px solid rgba(139,92,246,0.12);
      }
      .geo-sq {
        width: 50px; height: 50px;
        border: 1.5px solid rgba(6,182,212,0.2);
        transform: rotate(45deg);
        border-radius: 4px;
      }
      .geo-dot-grid {
        display: grid;
        grid-template-columns: repeat(5,1fr);
        gap: 10px;
      }
      .geo-dot-grid span {
        display: block; width:4px; height:4px;
        border-radius:50%;
        background: rgba(96,165,250,0.28);
      }
      /* positions */
      .gf1 { top:12%; left:3%; animation-duration:7s; }
      .gf2 { top:28%; right:4%; animation-duration:9s; animation-delay:-3s; }
      .gf3 { top:55%; left:6%; animation-duration:11s; animation-delay:-5s; }
      .gf4 { top:70%; right:7%; animation-duration:8s; animation-delay:-2s; }
      .gf5 { top:42%; left:48%; animation-duration:13s; animation-delay:-6s; }
      .gf6 { top:85%; left:28%; animation-duration:10s; animation-delay:-4s; }
      .gf7 { top:8%; right:30%; animation-duration:6s; animation-delay:-1s; }

      /* ===== SCROLL PROGRESS ===== */
      .scroll-bar {
        position: fixed; top:0; left:0; height:3px;
        background: linear-gradient(90deg, #2563eb, #06b6d4, #8b5cf6, #ec4899);
        background-size: 300%;
        animation: scrollGrad 4s linear infinite;
        z-index: 2000; border-radius: 0 2px 2px 0;
        transition: width 0.08s;
      }
      @keyframes scrollGrad { 0%{background-position:0%} 100%{background-position:300%} }

      /* navbar removed */

      /* ===== HERO ===== */
      .hero {
        position:relative; z-index:1;
        padding: 130px 2rem 90px;
        text-align:center;
        background: linear-gradient(160deg, var(--navy) 0%, var(--navy-mid) 55%, #0d2a5e 100%);
        overflow:hidden;
      }
      .hero-inner-grid {
        position:absolute; inset:0;
        background-image:
          linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
        background-size:60px 60px;
      }
      .hero::before {
        content:''; position:absolute; inset:0;
        background: radial-gradient(ellipse 80% 60% at 20% 50%, rgba(30,90,220,.28) 0%, transparent 65%),
                    radial-gradient(ellipse 60% 60% at 80% 50%, rgba(96,165,250,.15) 0%, transparent 65%);
      }
      /* hero floating geometric accents */
      .hero-geo {
        position:absolute; pointer-events:none;
      }
      .hero-geo-ring {
        width:180px; height:180px;
        border:1.5px solid rgba(255,255,255,0.07);
        border-radius:50%;
        animation: spinSlow 18s linear infinite;
      }
      .hero-geo-ring::after {
        content:''; position:absolute; inset:20px;
        border:1px solid rgba(255,255,255,0.05);
        border-radius:50%;
      }
      @keyframes spinSlow { to { transform: rotate(360deg); } }
      .hero-geo-1 { top:8%; left:5%; }
      .hero-geo-2 { bottom:10%; right:6%; width:120px; height:120px; border-color:rgba(96,165,250,0.1); animation-duration:25s; animation-direction:reverse; }
      .hero-geo-3 {
        width:60px; height:60px;
        border:1.5px solid rgba(245,158,11,0.2);
        transform:rotate(45deg);
        border-radius:6px;
        top:25%; right:15%;
        animation: spinSlow 12s linear infinite;
      }

      .hero-badge {
        position:relative; display:inline-flex; align-items:center; gap:.5rem;
        background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
        padding:.4rem 1rem; border-radius:100px;
        font-size:.78rem; font-weight:500; color:rgba(255,255,255,.85);
        letter-spacing:.06em; text-transform:uppercase;
        margin-bottom:1.5rem;
        animation: fadeUp .6s ease both;
      }
      .pulse-dot { width:6px; height:6px; border-radius:50%; background:var(--gold); animation:pulse 2s infinite; }
      .hero h1 {
        position:relative;
        font-family:'Lora',serif;
        font-size: clamp(2.2rem,5vw,3.8rem);
        font-weight:700; color:#fff; line-height:1.15;
        max-width:720px; margin:0 auto 1.2rem;
        animation: fadeUp .7s ease .1s both;
      }
      .hero h1 em { font-style:normal; color:var(--sky); }
      .hero p {
        position:relative; font-size:1.05rem;
        color:rgba(255,255,255,.7); max-width:560px;
        margin:0 auto; line-height:1.75;
        animation: fadeUp .7s ease .2s both;
      }
      .hero-stats {
        position:relative; display:flex; gap:2.5rem;
        justify-content:center; margin-top:2.5rem;
        animation: fadeUp .7s ease .3s both;
      }
      /* .hero-stat base handled below */
      .hero-stat-num { font-family:'Lora',serif; font-size:2rem; font-weight:700; color:#fff; }
      .hero-stat-lbl { font-size:.72rem; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.06em; margin-top:.3rem; }
      .hero-divider { width:1px; height:46px; background:rgba(255,255,255,.14); align-self:center; }

      /* ===== BREADCRUMB ===== */
      .breadcrumb {
        position:relative; z-index:1;
        background:var(--off-white); border-bottom:1px solid var(--border);
        padding:.85rem 2.5rem; font-size:.82rem; color:var(--muted);
      }
      .breadcrumb span { color:var(--blue-accent); font-weight:500; }

      /* ===== PAGE WRAPPER ===== */
      .page-wrap {
        position:relative; z-index:1;
        max-width:1100px; margin:0 auto;
        padding:2.5rem 2rem 6rem;
      }

      /* ===== SECTION HEADER ===== */
      .sec-hdr {
        text-align:center; margin-bottom:2.75rem;
        opacity:0; transform:translateY(28px);
        transition:all .6s ease;
        display:flex; flex-direction:column; align-items:center; gap:.75rem;
      }
      .sec-hdr.vis { opacity:1; transform:none; }
      .sec-kicker {
        display:block; font-size:.7rem; font-weight:600;
        letter-spacing:.14em; text-transform:uppercase; color:#7dd3fc;
        border:1px solid rgba(96,165,250,.3); background:rgba(96,165,250,.1); backdrop-filter:blur(6px);
        padding:.3rem 1rem; border-radius:100px;
        width:fit-content; margin:0 auto;
      }
      .sec-hdr h2 {
        font-family:'Lora',serif;
        font-size: clamp(1.75rem,3.5vw,2.5rem);
        font-weight:700; color:#ffffff; margin-bottom:.7rem;
      }
      .sec-hdr p { color:rgba(255,255,255,.62); font-size:1rem; max-width:520px; margin:0 auto; line-height:1.7; }

      /* ===== FILTER TABS ===== */
      .filter-row {
        display:flex; justify-content:center; gap:.6rem;
        margin-bottom:3rem; flex-wrap:wrap;
      }
      .fbtn {
        padding:.55rem 1.4rem; border-radius:100px;
        border:1.5px solid rgba(96,165,250,.25); background:rgba(255,255,255,.08);
        font-family:'Source Sans 3',sans-serif; font-size:.88rem; font-weight:600; color:rgba(255,255,255,.85);
        cursor:pointer; transition:all .22s; backdrop-filter:blur(10px);
        box-shadow:0 2px 12px rgba(0,0,0,.15); letter-spacing:.01em;
      }
      .fbtn:hover { border-color:#60a5fa; color:#fff; background:rgba(37,99,235,.25); }
      .fbtn.active {
        background:linear-gradient(135deg,#2563eb,#7c3aed);
        border-color:transparent; color:#fff;
        box-shadow:0 4px 20px rgba(37,99,235,.45);
      }

      /* ===== COURSE CARD � VERTICAL SPLIT ===== */
      .courses-list { display:flex; flex-direction:column; gap:1.75rem; }

      .course-card {
        background:#fff;
        border:1.5px solid #cdd9f0;
        border-radius:16px;
        overflow:hidden;
        display:flex;
        flex-direction:row;
        min-height:240px;
        box-shadow: 0 2px 14px rgba(10,22,40,.06);
        transition: all .3s cubic-bezier(.23,1,.32,1);
        opacity:0; transform:translateY(28px);
        position:relative;
        text-decoration:none;
        color:inherit;
      }
      .course-card.vis { opacity:1; transform:none; }
      .course-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 44px rgba(30,90,220,.13);
        border-color: #1e5adc;
      }
      /* -- ALTERNATE COLORS -- */
      .course-card[data-idx="odd"]  { background:rgba(255,255,255,.97); border-color:#c5d5f0; }
      .course-card[data-idx="even"] { background:rgba(240,247,255,.96); border-color:#b0c8ed; }
      .course-card:hover             { background:#ffffff !important; border-color:#1e5adc !important; }

      /* -- IMG-RIGHT LAYOUT -- */
      .course-card.img-right { flex-direction:row-reverse; }

      /* -- TYPE ACCENT BAR -- */
      .course-card.type-basic::before {
        content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
        background:linear-gradient(180deg,#1e5adc,#60a5fa);
        border-radius:4px 0 0 4px;
      }
      .course-card.type-advanced::before {
        content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
        background:linear-gradient(180deg,#f59e0b,#f97316);
        border-radius:4px 0 0 4px;
      }
      .course-card.img-right.type-basic::before,
      .course-card.img-right.type-advanced::before { left:auto; right:0; border-radius:0 4px 4px 0; }

      /* ---- LEFT: CAROUSEL ---- */
      .card-carousel {
        width: 320px; min-width: 320px;
        flex-shrink: 0; position: relative; overflow: hidden; background: var(--navy);
      }
      .carousel-track { display:flex; height:100%; transition:transform .5s cubic-bezier(.23,1,.32,1); }
      .carousel-slide {
        min-width:320px; height:100%; width:100%;
        position:relative; overflow:hidden; flex-shrink:0;
      }
      .carousel-slide svg { width:100%; height:100%; display:block; }
      /* img-placeholder removed */
      /* arrow buttons */
      .car-arrow {
        position:absolute; top:50%; transform:translateY(-50%);
        width:32px; height:32px; border-radius:50%;
        background:rgba(255,255,255,.15); backdrop-filter:blur(8px);
        border:1px solid rgba(255,255,255,.2);
        color:#fff; cursor:pointer; z-index:10;
        display:flex; align-items:center; justify-content:center;
        transition:all .2s;
        font-size:.8rem;
      }
      .car-arrow:hover { background:rgba(255,255,255,.3); }
      .car-prev { left:10px; }
      .car-next { right:10px; }
      /* dots */
      .car-dots {
        position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
        display:flex; gap:5px; z-index:10;
      }
      .car-dot {
        width:6px; height:6px; border-radius:50%;
        background:rgba(255,255,255,.4); cursor:pointer; transition:.2s;
      }
      .car-dot.active { background:#fff; transform:scale(1.3); }
    

      /* ---- RIGHT: TEXT ---- */
      .card-body {
        flex:1;
        padding:2rem 2.5rem;
        display:flex; flex-direction:column;
        justify-content:space-between;
        gap:0;
        text-align:left;
        min-width:0;
      }
      .course-card:not(.img-right) .card-body { padding-left:2.5rem; }
      .course-card.img-right .card-body       { padding-left:2.5rem; padding-right:2.5rem; }
      /* group meta + title + desc together with even internal spacing */
      .card-content-group {
        display:flex; flex-direction:column; gap:.5rem;
        flex:1; justify-content:center;
        padding:.5rem 0;
      }
      .card-meta {
        display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
      }
      .card-tag {
        font-family:'Source Sans 3',sans-serif;
        font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
        padding:.22rem .65rem; border-radius:100px;
      }
      .type-basic .card-tag { background:rgba(30,90,220,.1); color:#1e5adc; }
      .type-advanced .card-tag { background:rgba(245,158,11,.12); color:#b45309; }
      .card-dur {
        display:inline-flex; align-items:center; gap:.35rem;
        font-family:'Source Sans 3',sans-serif;
        font-size:.82rem; color:#64748b; font-weight:500;
      }
      .card-title {
        font-family:'Lora',serif;
        font-size:1.22rem; font-weight:700;
        color:#1e5adc;
        line-height:1.3;
        transition:color .2s;
      }
      .course-card:hover .card-title { color:#1448b8; }
      .card-desc {
        font-family:'Source Sans 3',sans-serif;
        font-size:.92rem; line-height:1.7; color:#475569;
        flex:1;
        display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
      }
      .card-footer-row {
        display:flex; align-items:center; justify-content:flex-start;
        gap:1.5rem;
        padding-top:.85rem; border-top:1px solid #e8eef8;
        margin-top:auto;
        flex-shrink:0;
      }
      .card-fee-label {
        font-family:'Source Sans 3',sans-serif;
        font-size:.68rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.07em;
      }
      .card-fee-num {
        font-family:'Source Code Pro',monospace; font-size:1.1rem;
        font-weight:600; color:#0a1628; margin-top:.1rem;
      }
      .card-btn {
        display:inline-flex; align-items:center; gap:.4rem;
        background:#0a1628; color:#fff;
        font-family:'Source Sans 3',sans-serif;
        font-size:.82rem; font-weight:600; padding:.5rem 1.15rem;
        border-radius:9px; border:none; cursor:pointer; transition:.2s;
        position:relative; z-index:5;
      }
      .card-btn:hover { background:#1e5adc; color: #fff;}

      /* ===== FOOTER ===== */
      footer {
        position:relative; z-index:1;
        background:linear-gradient(135deg,rgba(6,9,35,.96) 0%,rgba(10,15,45,.98) 100%);
        backdrop-filter:blur(20px);
        border-top:1px solid rgba(96,165,250,.15);
        color:rgba(255,255,255,.65);
        padding:4rem 2.5rem 2rem;
      }
      .footer-grid {
        max-width:1100px; margin:0 auto;
        display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2.5rem;
        padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.1);
      }
      .footer-brand p { font-size:.84rem; line-height:1.75; max-width:260px; margin-bottom:1.1rem; }
      .footer-addr { font-size:.8rem; line-height:1.85; }
      .footer-addr strong { display:block; color:#fff; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.45rem; }
      .footer-col h4 { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin-bottom:1.1rem; }
      .footer-col ul { list-style:none; }
      .footer-col ul li { margin-bottom:.55rem; }
      .footer-col ul a { color:rgba(255,255,255,.6); text-decoration:none; font-size:.83rem; transition:color .2s; }
      .footer-col ul a:hover { color:var(--sky); }
      .fc-item { display:flex; gap:.55rem; font-size:.83rem; margin-bottom:.7rem; align-items:flex-start; }
      .fc-item svg { flex-shrink:0; margin-top:2px; opacity:.55; }
      .footer-bottom {
        max-width:1100px; margin:0 auto; padding-top:1.75rem;
        display:flex; justify-content:space-between; align-items:center;
        font-size:.78rem;
      }

      /* ===== BACK TO TOP ===== */
      .back-top {
        position:fixed; bottom:2rem; right:2rem; width:44px; height:44px;
        background:linear-gradient(135deg,#2563eb,#7c3aed); color:#fff; border:none; border-radius:12px;
        cursor:pointer; display:flex; align-items:center; justify-content:center;
        z-index:900; opacity:0; transform:translateY(10px); transition:.3s;
        box-shadow:0 4px 24px rgba(37,99,235,.5);
      }
      .back-top.vis { opacity:1; transform:none; }
      .back-top:hover { background:linear-gradient(135deg,#1d4ed8,#6d28d9); box-shadow:0 6px 28px rgba(37,99,235,.7); }

      /* ===== ANIMATIONS ===== */
      @keyframes fadeUp    { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
      @keyframes pulse     { 0%,100%{opacity:1} 50%{opacity:.35} }
      @keyframes kickerPop { from{opacity:0;transform:scale(.8) translateY(10px)} to{opacity:1;transform:none} }
      @keyframes titleReveal { from{opacity:0;transform:translateY(24px) skewY(1.5deg)} to{opacity:1;transform:none} }
      @keyframes shimmer   { 0%{background-position:200%} 100%{background-position:-200%} }
      @keyframes countUp   { from{opacity:0;transform:scale(.5)} to{opacity:1;transform:none} }

      /* -- 1. ANIMATED SECTION HEADER -- */
      .sec-hdr h2 {
        font-family:'Lora',serif;
        font-size:clamp(1.75rem,3.5vw,2.5rem);
        font-weight:700; color:#ffffff; margin-bottom:.7rem;
        position:relative; display:inline-block;
      }
      /* animated gradient underline */
      .sec-hdr h2::after {
        content:''; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%);
        height:3px; border-radius:2px; width:0;
        background:linear-gradient(90deg,var(--blue-accent),var(--sky),var(--blue-accent));
        background-size:200%; transition:width .9s cubic-bezier(.23,1,.32,1) .45s;
      }
      .sec-hdr.vis h2::after { width:60%; animation:shimmer 3s linear 1.3s infinite; }
      /* stagger children on reveal */
      .sec-hdr.vis .sec-kicker { animation:kickerPop .5s cubic-bezier(.34,1.56,.64,1) both; }
      .sec-hdr.vis h2          { animation:titleReveal .75s cubic-bezier(.23,1,.32,1) .12s both; }
      .sec-hdr.vis p           { animation:fadeUp .7s ease .35s both; }
      /* shimmer gradient on em text */
      .sec-hdr h2 em {
        font-style:normal;
        background:linear-gradient(90deg,var(--blue-accent) 0%,var(--sky) 50%,var(--blue-accent) 100%);
        background-size:200%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
      }
      .sec-hdr.vis h2 em { animation:shimmer 3s linear 1s infinite; }

      /* -- 2. STAT PILL BORDER + HOVER -- */
      .hero-stat {
        text-align:center;
        border:1px solid rgba(255,255,255,0);
        padding:.55rem 1.15rem; border-radius:14px;
        transition:all .3s cubic-bezier(.23,1,.32,1);
        cursor:default;
      }
      .hero-stat:hover {
        border-color:rgba(255,255,255,.28);
        background:rgba(255,255,255,.08);
        transform:translateY(-4px);
        box-shadow:0 8px 24px rgba(0,0,0,.2);
      }
      .hero-stat:hover .hero-stat-num { color:var(--sky); transition:color .25s; }
      .hero-stat:hover .hero-stat-lbl { color:rgba(255,255,255,.75); transition:color .25s; }

      /* -- 1. ANIMATED SECTION HEADER -- */
      .sec-hdr h2 {
        font-family:'Lora',serif;
        font-size:clamp(1.75rem,3.5vw,2.5rem);
        font-weight:700; color:#ffffff; margin-bottom:.7rem;
        position:relative; display:inline-block;
      }
      .sec-hdr h2 em { font-style:normal; color:var(--blue-accent); }
      /* animated underline */
      .sec-hdr h2::after {
        content:''; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
        height:3px; border-radius:2px; width:0;
        background:linear-gradient(90deg,var(--blue-accent),var(--sky));
        transition:width .9s cubic-bezier(.23,1,.32,1) .4s;
      }
      .sec-hdr.vis h2::after { width:55%; }
      .sec-hdr.vis .sec-kicker { animation:kickerPop .5s cubic-bezier(.34,1.56,.64,1) both; }
      .sec-hdr.vis h2        { animation:titleReveal .7s cubic-bezier(.23,1,.32,1) .1s both; }
      .sec-hdr.vis p         { animation:fadeUp .7s ease .35s both; }
      @keyframes kickerPop   { from{opacity:0;transform:scale(.8) translateY(10px)} to{opacity:1;transform:none} }
      @keyframes titleReveal { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }
      /* shimmer on em */
      .sec-hdr h2 em {
        background:linear-gradient(90deg,var(--blue-accent) 0%,var(--sky) 50%,var(--blue-accent) 100%);
        background-size:200%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
      }
      .sec-hdr.vis h2 em { animation:shimmer 3s linear 1s infinite; }
      @keyframes shimmer { 0%{background-position:200%} 100%{background-position:-200%} }

      /* -- 2. STAT PILL BORDERS & HOVER -- */
      .hero-stat {
        border:1px solid rgba(255,255,255,0);
        padding:.6rem 1.2rem; border-radius:14px;
        transition:all .3s; cursor:default;
      }
      .hero-stat:hover {
        border-color:rgba(255,255,255,.3);
        background:rgba(255,255,255,.07);
        transform:translateY(-3px);
      }
      .hero-stat:hover .hero-stat-num { color:var(--sky); transition:color .3s; }

      /* img-right and alternate colors handled above in card block */

      /* -- SECTION DIVIDER -- */
      .section-divider {
        position:relative; margin:2.8rem 0 2.8rem; display:flex; align-items:center; gap:1rem;
      }
      .section-divider::before,.section-divider::after {
        content:''; flex:1; height:1px;
        background:linear-gradient(90deg,transparent,rgba(96,165,250,.3),rgba(139,92,246,.2),transparent);
      }
      .sdiv-inner {
        display:flex; align-items:center; gap:.65rem;
        padding:.55rem 1.4rem; border-radius:100px;
        border:1.5px solid rgba(96,165,250,.25);
        background:rgba(96,165,250,.08); backdrop-filter:blur(8px);
        white-space:nowrap;
      }
      .sdiv-icon { font-size:1rem; }
      .sdiv-label { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#7dd3fc; }
      .sdiv-count {
        font-family:'Source Code Pro',monospace; font-size:.72rem; font-weight:600;
        background:var(--blue-accent); color:#fff;
        padding:.15rem .55rem; border-radius:100px;
      }

      /* -- 7. COURSE OVERVIEW PANELS -- */
      .overview-section { margin-bottom:3.5rem; }
      .overview-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
      .overview-panel {
        border-radius:20px; padding:1.75rem 1.75rem 1.5rem;
        border:2px solid transparent;
        cursor:pointer; transition:all .35s cubic-bezier(.23,1,.32,1);
        position:relative; overflow:hidden; text-decoration:none; display:block;
        min-height:360px;
      }
      .overview-panel::before {
        content:''; position:absolute; inset:0; border-radius:18px; z-index:0;
        opacity:0; transition:opacity .3s;
      }
      .overview-panel.basic-panel {
        background:#ffffff;
        border-color:#bfdbfe;
        box-shadow:0 4px 24px rgba(37,99,235,.1);
      }
      .overview-panel.advanced-panel {
        background:#ffffff;
        border-color:#fde68a;
        box-shadow:0 4px 24px rgba(245,158,11,.1);
      }
      /* active/selected state */
      .overview-panel.active.basic-panel {
        background:linear-gradient(140deg,#2563eb 0%,#7c3aed 100%);
        border-color:#60a5fa;
        box-shadow:0 12px 40px rgba(30,90,220,.35);
        transform:translateY(-4px);
      }
      .overview-panel.active.advanced-panel {
        background:linear-gradient(140deg,#f59e0b 0%,#f97316 100%);
        border-color:#fbbf24;
        box-shadow:0 12px 40px rgba(245,158,11,.35);
        transform:translateY(-4px);
      }
      .overview-panel:not(.active):hover {
        transform:translateY(-4px);
        box-shadow:0 10px 36px rgba(10,22,40,.15);
      }
      .ov-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.2rem; position:relative; z-index:1; }
      .ov-icon {
        width:52px; height:52px; border-radius:14px;
        display:inline-flex; align-items:center; justify-content:center;
        font-size:1.5rem; background: rgba(37, 99, 235, .1);
      }
      .basic-panel .ov-icon  { background:rgba(37,99,235,.1); }
      .advanced-panel .ov-icon { background:rgba(245,158,11,.12); }
      .active.basic-panel .ov-icon    { background:rgba(255,255,255,.2); }
      .active.advanced-panel .ov-icon { background:rgba(255,255,255,.2); }
      .ov-count-badge {
        font-family:'Source Code Pro',monospace; font-size:1.8rem; font-weight:500;
        line-height:40px; padding:.25rem .75rem; border-radius:12px;
      }
      .basic-panel .ov-count-badge    { background:rgba(37,99,235,.1); color:#1d4ed8; }
      .advanced-panel .ov-count-badge { background:rgba(245,158,11,.12); color:#b45309; }
      .active .ov-count-badge         { background:rgba(255,255,255,.25); color:#fff; }
      .ov-title {
        font-family:'Lora',serif; font-size:1.3rem; font-weight:700;
        margin-bottom:.35rem; position:relative; z-index:1;
      }
      .basic-panel .ov-title    { color:#0a1628; }
      .advanced-panel .ov-title { color:#0a1628; }
      .active .ov-title          { color:#fff; }
      /* ov-desc removed */
      .ov-footer {
        margin-top:1.25rem; display:flex; align-items:center; gap:.5rem;
        position:relative; z-index:1;
      }
      .ov-arrow {
        display:inline-flex; align-items:center; gap:.4rem;
        font-size:.78rem; font-weight:700;
        padding:.4rem .9rem; border-radius:100px;
        transition:all .25s;
      }
      .basic-panel:not(.active) .ov-arrow    { background:rgba(37,99,235,.1); color:#1d4ed8; }
      .advanced-panel:not(.active) .ov-arrow { background:rgba(245,158,11,.12); color:#b45309; }
      .active .ov-arrow { background:rgba(255,255,255,.25); color:#fff; }
      .ov-course-grid {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:.35rem .5rem;
        margin-top:.9rem;
        position:relative; z-index:1;
      }
      .ov-pill {
        font-size:.7rem; font-weight:500;
        padding:.28rem .6rem; border-radius:6px; border:1px solid;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
        transition:all .2s;
      }
      .basic-panel:not(.active) .ov-pill    { border-color:rgba(37,99,235,.2); color:#1d4ed8; background:rgba(37,99,235,.06); }
      .advanced-panel:not(.active) .ov-pill { border-color:rgba(245,158,11,.25); color:#b45309; background:rgba(245,158,11,.07); }
      .active .ov-pill { border-color:rgba(255,255,255,.25); color:#fff; background:rgba(255,255,255,.12); }
      .overview-panel:hover .ov-pill { transform:none; }
      @media(max-width:640px){ .overview-grid{ grid-template-columns:1fr; } }


      /* ===== RESPONSIVE ===== */
      @media(max-width:900px) {
        .footer-grid { grid-template-columns:1fr 1fr; }
        .hero-stats { gap:1.5rem; }
        .card-carousel { width:280px; min-width:280px; }
      }
      @media(max-width:680px) {
        .course-card,
        .course-card.img-right {
          flex-direction:column !important;
          min-height:auto;
        }
        .course-card.type-basic::before,
        .course-card.type-advanced::before,
        .course-card.img-right.type-basic::before,
        .course-card.img-right.type-advanced::before {
          left:0; right:auto;
          top:0; bottom:auto;
          width:100%; height:4px;
          border-radius:4px 4px 0 0;
        }
        .card-carousel { width:100%; min-width:0; height:220px; }
        /* on mobile all cards get same padding */
        .course-card:not(.img-right) .card-body,
        .course-card.img-right .card-body,
        .card-body { padding:1.5rem 1.5rem 1.25rem !important; }
        .footer-grid { grid-template-columns:1fr; }
        .page-wrap { padding:1.5rem 1rem 4rem; }
        .overview-grid { grid-template-columns:1fr; }
      }