:root{--bg:#0b1220;--card:#0e1724;--muted:#c9d6e6;--accent:#ff6b6b;--accent2:#7c3aed;--glass:rgba(255,255,255,0.03);--radius:14px}
    *{box-sizing:border-box}
    body{margin:0;min-height:100vh;background:linear-gradient(180deg,#061022 0%,var(--bg) 100%);color:var(--muted);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;padding:36px}
    .container{max-width:1100px;margin:0 auto}

    header{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:28px;position:relative}
    .brand{display:flex;align-items:center;gap:12px}
    .logo {
      width: 64px;
      height: 64px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      background: linear-gradient(135deg,var(--accent2),#06b6d4);
      font-family: 'Playfair Display';
      font-weight: 700;
      color: white;
      font-size: 28px;
      box-shadow: 0 10px 30px rgba(7,12,22,0.6);
      padding-top: 1px;
      margin-left: 10px;
    }
    h1{margin:0px;font-family:'Playfair Display';font-size:22px}
    .tag{font-size:13px;color:rgba(255,255,255,0.75)}

    .hero{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start;margin-bottom:22px}
    .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:22px;border-radius:var(--radius);box-shadow:0 12px 30px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.03)}
    .overview h2{font-size:20px;margin:0 0 8px}
    .pill{display:inline-block;padding:8px 12px;border-radius:999px;background:linear-gradient(90deg,var(--accent2),#06b6d4);font-weight:700;margin-left:auto;margin-right:auto;display:block;font-size: 20px;}

    /* syllabus grid */
    .syllabus{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
    .module{background:var(--card);padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
    .module h3{margin:0 0 8px;font-size:16px}
    .module p{margin:0;color:var(--muted);font-size:14px}

    /* details list */
    .details{display:flex;flex-direction:column;gap:12px}
    .detail-row{display:flex;justify-content:space-between;gap:8px}

    /* CTA */
    .cta{display:flex;gap:12px;margin-top:14px}
    .btn{padding:10px 14px;border-radius:12px;border:none;cursor:pointer;font-weight:700}
    .btn-primary{background:linear-gradient(90deg,var(--accent2),var(--accent));color:white}
    .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}

    /* accordion */
    .accordion{margin-top:18px}
    .acc-item{border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.03)}
    .acc-header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));cursor:pointer}
    .acc-body{padding:12px 14px;background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent);display:none}
    .acc-body ul{margin:0;padding-left:18px}

    /* instructor box */
    .instructor{display:flex;gap:12px;align-items:center}
    .instr-photo{width:72px;height:72px;border-radius:12px;background:linear-gradient(135deg,#ffb86b,#ff6b6b);display:flex;align-items:center;justify-content:center;font-weight:800}

    footer{margin-top:20px;text-align:center;color:rgba(255,255,255,0.55);font-size:13px}
/* Utility spacing classes for layout */
.call-right { margin-left: auto; text-align: right; }
.img-container { margin-top: 12px; width: 100%; display: flex; justify-content: center; }
.fixes-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-6 { margin-top: 6px; }
.mt-0 { margin-top: 0; }

    @media (max-width:980px){.hero{grid-template-columns:1fr}.syllabus{grid-template-columns:1fr 1fr}}
    @media (max-width:620px){.syllabus{grid-template-columns:1fr}.container{padding:0 0px;}body { padding: 0; } html, body { width: 100vw; height: 100vh; min-height: 100vh; min-width: 100vw; overflow-x: hidden; }}
    .pill {
      display: block;
      margin: 32px auto 0 auto;
      text-align: center;
      background: linear-gradient(90deg,var(--accent2),#06b6d4);
      font-weight: 700;
      padding: 8px 12px;
      border-radius: 999px;
    }
    @media (max-width: 980px) {
      .pill {
        margin: 24px auto 0 auto;
      }
    }
    .home-float {
      position: fixed;
      right: 24px;
      bottom: 24px;
      left: auto;
      transform: none;
      z-index: 2000;
      background: linear-gradient(90deg,var(--accent2),#06b6d4);
      color: #fff;
      border: none;
      border-radius: 999px;
      padding: 12px 32px;
      font-size: 18px;
      font-weight: 700;
      box-shadow: 0 4px 24px rgba(0,0,0,0.18);
      cursor: pointer;
      transition: background 0.3s;
    }
    header{
      margin: 30px 0;
    }
    .home-float:hover {
      background: linear-gradient(90deg,#06b6d4,var(--accent2));
    }
    @media (max-width: 620px) {
      .home-float {
        font-size: 12px;
        padding: 10px 20px;
        bottom: 12px;
        right: 12px;
      }
    }
    .text-animate {
      background: linear-gradient(270deg, #ff6b6b, #edec98, #f1f4f4, #e8b2eb);
      background-size: 400% 400%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: textGradientMove 5s linear infinite;
    }
    @keyframes textGradientMove {
      0% { background-position: 0% 50%; }
      100% { background-position: 100% 50%; }
    }
    .fee-label { font-size: 13px; color: var(--muted); }
    /* Utility classes for inline styles from graphidesign.html */
    .fee-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    .fee-label {
      font-size: 13px;
      color: var(--muted);
    }
    .fee-bold {
      font-weight: 700;
    }
    .fee-right {
      text-align: right;
    }
    .fee-hr {
      border: none;
      border-top: 1px solid rgba(255,255,255,0.04);
      margin: 12px 0;
    }
    .instructor-note {
      color: var(--muted);
      font-size: 13px;
    }
    .mt-12 {
      margin-top: 12px;
    }
    .mb-6 {
      margin-bottom: 6px;
    }
    .fee-list {
      margin: 0;
      padding-left: 18px;
      color: var(--muted);
      font-size: 14px;
    }
    .mt-18 {
      margin-top: 18px;
    }
    .mt-0 {
      margin-top: 0;
    }
    .mb-8 {
      margin-bottom: 8px;
    }
    .acc-weeks {
      color: var(--muted);
      font-size: 13px;
      display: block;
    }