:root{
      color-scheme: dark;
      --bg0:#04030a;
      --bg1:#09061b;
      --ink:rgba(255,255,255,.94);
      --muted:rgba(255,255,255,.72);
      --muted2:rgba(255,255,255,.56);
      --stroke:rgba(255,255,255,.13);
      --violet:rgba(196,120,255,.86);
      --pink:rgba(255,140,220,.68);
      --cyan:rgba(120,210,255,.60);
      --gold:rgba(255,220,130,.72);
      --shadow:0 22px 60px rgba(0,0,0,.52);
      --shadow2:0 12px 28px rgba(0,0,0,.34);
      --r1:16px;
      --r2:22px;
      --r3:30px;
      --container:1180px;
      --pad:16px;
      --font:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    html{scroll-behavior:smooth;overflow-x:hidden}
    body{
      margin:0;
      font-family:var(--font);
      color:var(--ink);
      background:
        radial-gradient(1200px 700px at 14% 10%, rgba(196,120,255,.20), transparent 60%),
        radial-gradient(900px 620px at 86% 14%, rgba(120,210,255,.16), transparent 60%),
        radial-gradient(900px 760px at 50% 100%, rgba(255,140,220,.08), transparent 55%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      overflow-x:hidden;
    }

    img,svg,canvas{display:block;max-width:100%}
    a{color:inherit;text-decoration:none}
    p,li,h1,h2,h3,div,span{overflow-wrap:anywhere}

    #starfield{
      position:fixed;
      inset:0;
      width:100%;
      height:100%;
      z-index:-2;
      pointer-events:none;
    }

    .grain{
      position:fixed;
      inset:0;
      z-index:-1;
      pointer-events:none;
      opacity:.10;
      mix-blend-mode:overlay;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    }

    .container{
      width:min(var(--container),100%);
      padding-inline:var(--pad);
      margin-inline:auto;
    }

    .glass{
      border-radius:var(--r3);
      border:1px solid var(--stroke);
      background:
        radial-gradient(720px 420px at 14% 18%, rgba(196,120,255,.19), transparent 60%),
        radial-gradient(720px 420px at 86% 12%, rgba(120,210,255,.15), transparent 56%),
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
      box-shadow:var(--shadow2);
      backdrop-filter:blur(14px);
      overflow:hidden;
    }

    .card{
      border-radius:var(--r2);
      border:1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(400px 220px at 10% 12%, rgba(196,120,255,.13), transparent 60%),
        radial-gradient(420px 230px at 86% 10%, rgba(120,210,255,.10), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
      box-shadow:0 14px 42px rgba(0,0,0,.32);
      backdrop-filter:blur(12px);
      overflow:hidden;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:12px 16px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.06);
      color:var(--ink);
      font-weight:950;
      font-size:13px;
      letter-spacing:.18px;
      cursor:pointer;
      position:relative;
      transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.28)}
    .btnPrimary{
      border-color:rgba(196,120,255,.36);
      background:
        radial-gradient(160px 90px at 30% 20%, rgba(196,120,255,.30), transparent 60%),
        radial-gradient(180px 100px at 82% 28%, rgba(120,210,255,.24), transparent 60%),
        rgba(255,255,255,.06);
      box-shadow:0 0 24px rgba(196,120,255,.10), 0 0 32px rgba(120,210,255,.08);
    }
    .btnGold{
      border-color:rgba(255,220,130,.32);
      background:
        radial-gradient(160px 90px at 30% 20%, rgba(255,220,130,.24), transparent 60%),
        radial-gradient(180px 100px at 82% 28%, rgba(255,140,220,.18), transparent 60%),
        rgba(255,255,255,.06);
    }

    .shimmer{
      display:inline-block;
      color:transparent;
      background:linear-gradient(90deg,
        rgba(255,255,255,.70),
        rgba(231,200,255,.96) 18%,
        rgba(255,183,229,.96) 38%,
        rgba(255,255,255,.96) 60%,
        rgba(120,210,255,.86) 78%,
        rgba(255,255,255,.70)
      );
      -webkit-background-clip:text;
      background-clip:text;
      background-size:260% 100%;
      animation:shimmer 3s linear infinite;
      filter:drop-shadow(0 0 12px rgba(196,120,255,.18));
    }
    @keyframes shimmer{0%{background-position:0% 50%}100%{background-position:260% 50%}}

    header{
      padding:12px 0 8px;
      position:sticky;
      top:0;
      z-index:50;
    }
    .navRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }
    .dot{
      width:12px;height:12px;border-radius:999px;
      background:rgba(196,120,255,.95);
      box-shadow:0 0 18px rgba(196,120,255,.55), 0 0 36px rgba(120,210,255,.18);
      flex:0 0 auto;
    }
    .brandStack{display:flex;flex-direction:column;gap:2px;min-width:0}
    .brandStack strong{font-size:13px;font-weight:1000;letter-spacing:.35px}
    .pillMini{
      width:fit-content;
      font-size:12px;
      font-weight:950;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(0,0,0,.22);
      color:var(--muted);
    }
    .navLinks{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}

    .section{padding:44px 0}
    .alt{
      background:rgba(255,255,255,.018);
      border-top:1px solid rgba(255,255,255,.06);
      border-bottom:1px solid rgba(255,255,255,.06);
    }

    .heroPad{padding:18px}
    .heroGrid{
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:16px;
      align-items:start;
    }
    .badgeStack{display:grid;gap:10px}
    .badgeBlock{
      padding:10px 12px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(0,0,0,.22);
      font-size:12px;
      font-weight:900;
      color:rgba(255,255,255,.88);
    }
    h1{
      margin:16px 0 10px;
      font-size:clamp(2.1rem,7.2vw,4rem);
      line-height:1.02;
      letter-spacing:-.03em;
    }
    h2{
      margin:0 0 8px;
      font-size:clamp(1.55rem,5vw,2.3rem);
      letter-spacing:-.01em;
    }
    h3{margin:0 0 8px;font-size:1.05rem}
    .muted{color:var(--muted);line-height:1.72;font-weight:650}
    .heroButtons{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 12px}
    .chipGrid{display:grid;gap:10px;margin-top:12px}
    .chip{
      display:flex;align-items:center;justify-content:space-between;gap:10px;
      padding:12px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.05);font-weight:950;font-size:12px;
    }
    .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
    .stat{padding:12px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)}
    .stat .k{color:var(--muted2);font-weight:850;font-size:.84rem}
    .stat .v{font-weight:1000;margin-top:4px}

    .heroVisual{padding:16px}
    .heroImageCard{display:flex;flex-direction:column;gap:12px}
    .heroImageFrame{
      position:relative;
      border-radius:26px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.10);
      min-height:560px;
      background:
        radial-gradient(560px 360px at 50% 18%, rgba(120,210,255,.18), transparent 55%),
        radial-gradient(520px 300px at 50% 72%, rgba(196,120,255,.12), transparent 60%),
        linear-gradient(180deg, rgba(12,10,30,.86), rgba(8,6,20,.92));
      box-shadow:var(--shadow2);
      isolation:isolate;
    }
    .heroBannerImage{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center;
      z-index:1;
    }
    .heroImageFrame::after{
      content:"";
      position:absolute;
      inset:0;
      z-index:2;
      background:
        linear-gradient(180deg, rgba(5,4,14,.14) 0%, rgba(5,4,14,.08) 28%, rgba(5,4,14,.22) 55%, rgba(5,4,14,.72) 100%),
        radial-gradient(circle at 50% 22%, rgba(255,255,255,.08), transparent 36%),
        radial-gradient(circle at 50% 100%, rgba(196,120,255,.12), transparent 42%);
      pointer-events:none;
    }
    .heroImageOverlay{
      position:absolute;
      left:18px;
      right:18px;
      bottom:18px;
      z-index:3;
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .heroImageBadge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(8,8,20,.52);
      backdrop-filter:blur(12px);
      font-size:11px;
      font-weight:950;
      color:rgba(255,255,255,.9);
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .heroImageCopy{
      display:flex;
      flex-direction:column;
      gap:4px;
      padding:12px 14px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(8,8,20,.45);
      backdrop-filter:blur(12px);
      max-width:min(100%, 360px);
    }
    .heroImageCopy strong{font-size:1rem;font-weight:1000;color:rgba(255,255,255,.96)}
    .heroImageCopy span{font-size:.92rem;line-height:1.5;color:var(--muted);font-weight:700}
    .heroCaption{
      display:flex;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      color:var(--muted2);
      font-weight:850;
      font-size:.92rem;
    }

    .grid3,.programGrid,.steps,.faqGrid,.pathGrid{display:grid;gap:12px}
    .grid3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px}
    .programGrid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px}
    .pathGrid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px}
    .pad{padding:16px}

    .courseIcon{
      width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
      border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);
      font-size:20px;margin-bottom:10px;
    }

    .sectionLead{max-width:780px}
    .steps{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:14px}
    .step{padding:16px;border-radius:22px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)}
    .stepN{
      width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
      font-weight:1100;background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.14);margin-bottom:10px
    }

    .quoteCard{
      padding:18px;
      text-align:center;
      font-weight:1000;
      font-size:clamp(1.15rem,3vw,1.6rem);
      line-height:1.5;
    }

    details{
      border-radius:22px;border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);padding:14px;backdrop-filter:blur(10px)
    }
    summary{cursor:pointer;font-weight:1000}
    details p{margin:10px 0 0;color:var(--muted);line-height:1.75;font-weight:650}

    .ctaBlock{padding:22px;text-align:center}
    .ctaBlock p{max-width:720px;margin:10px auto 0}
    .ctaButtons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}

    footer{padding:26px 0 60px}
    .footerInner{border-top:1px solid rgba(255,255,255,.08);padding-top:18px;display:grid;gap:12px}

    @media (max-width: 1024px){
      .heroGrid,.grid3,.programGrid,.steps,.pathGrid{grid-template-columns:1fr 1fr}
      .heroImageFrame{min-height:500px}
    }

    @media (max-width: 760px){
      header{position:relative}
      .navRow{flex-direction:column;align-items:flex-start}
      .navLinks{display:flex;flex-direction:column;width:100%}
      .navLinks .btn{width:100%}
      .heroGrid,.stats,.grid3,.programGrid,.steps,.pathGrid{grid-template-columns:1fr}
      .heroImageFrame{min-height:520px}
      .heroBannerImage{object-position:center top}
      .heroImageOverlay{left:12px;right:12px;bottom:12px}
      .heroImageCopy{max-width:100%}
    }

    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
      .shimmer{animation:none !important}
    }
}
    .courseImage {
   width: 100%;
   height: 280px;
   border-radius: 14px;
   overflow: hidden;
   margin-bottom: 12px;
   border: 1px solid rgba(255,255,255,.12);
   background: rgba(255,255,255,.04);
   }

   .courseImage img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .4s ease;
   }

   .card:hover .courseImage img {
   transform: scale(1.05);
   }
}