:root {
      --ink: #211b3d;
      --deep: #241b4e;
      --deep-2: #3c1f6b;
      --violet: #7c4dff;
      --coral: #ff6b4a;
      --teal: #17b8a6;
      --amber: #ffb63d;
      --bg: #f6f4fb;
      --card: #ffffff;
      --muted: #6b6485;
      --line: #e7e2f5;
      --early: #17b8a6;
      --early-bg: #e6f9f6;
      --advance: #ffb63d;
      --advance-bg: #fff6e2;
      --spot: #ff6b4a;
      --spot-bg: #ffece7;
      --violetlight: #e0d6fe;
    }

    /* ---------- SECTION SHELL ---------- */
    .section {
      max-width: 1100px;
      margin: 0 auto;
      padding: 30px 24px;
    }

    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 36px;
    }

    .section-head h3 {
      font-size: 26px;
      font-weight: 600;
      color: var(--deep);
    }

    .section-head p {
      color: var(--muted);
      font-size: 15px;
      max-width: 420px;
    }

    .tag {
      font-family: "Inter", sans-serif;
      font-size: 20px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--violet);
      font-weight: 700;
      margin-bottom: 10px;
      display: block;
    }

    /* ---------- WORKSHOP ---------- */
    .workshop-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
    }

    .workshop-card {
      background: var(--card);
      border-radius: 20px;
      padding: 30px;
      border: 1px solid var(--line);
      box-shadow: 0 10px 30px -18px rgba(36, 27, 78, 0.25);
      position: relative;
      overflow: hidden;
    }

    .workshop-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
    }

    .workshop-card.national::before {
      background: linear-gradient(90deg, var(--teal), #6ee7d8);
    }

    .workshop-card.intl::before {
      background: linear-gradient(90deg, var(--violet), #a78bfa);
    }

    .workshop-card .kicker {
      font-size: 13.5px;
      color: var(--muted);
      margin-bottom: 14px;
    }

    .workshop-card .price {
      font-family: "Inter", sans-serif;
      font-size: 28px;
      font-weight: 700;
      color: var(--deep);
    }

    .workshop-card .price small {
      font-size: 15px;
      font-weight: 500;
      color: var(--muted);
      margin-left: 6px;
    }

    /* ---------- FEE TABLE ---------- */
    .table-card {
      background: var(--card);
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid var(--line);
      box-shadow: 0 10px 30px -18px rgba(36, 27, 78, 0.25);
    }

    .fee-table {
      width: 100%;
      border-collapse: collapse;
    }

    .fee-table thead th {
      text-align: center;
      font-size: 12.5px;
      text-transform: uppercase;
      letter-spacing: .06em;
      padding: 18px 16px;
      /* color: var(--muted); */
      background: #fff;
      border-bottom: 1px solid var(--line);
    }

    .fee-table thead th:first-child {
      text-align: left;
    }

    .fee-table thead th.col-early {
      color: var(--early);
    }

    .fee-table thead th.col-advance {
      color: #c98a10;
    }

    .fee-table thead th.col-spot {
      color: var(--spot);
    }

    .fee-table tbody td {
      padding: 20px 16px;
      text-align: center;
      border-bottom: 1px solid var(--line);
      font-family: "Inter", sans-serif;
      font-size: 15.5px;
      color: var(--ink);
    }

    .fee-table tbody tr:last-child td {
      border-bottom: none;
    }

    .fee-table tbody td:first-child {
      text-align: left;
      font-family: "Inter", sans-serif;
      font-weight: 600;
      font-size: 15.5px;
      color: var(--deep);
    }

    .fee-table tbody td.chip-early {
      background: var(--early-bg);
    }

    .fee-table tbody td.chip-advance {
      background: var(--advance-bg);
    }

    .fee-table tbody td.chip-spot {
      background: var(--spot-bg);
    }

    .fee-table tbody td.chip-alumni {
      background: var(--violetlight);
    }

    .fee-table tbody tr:hover td {
      filter: brightness(0.98);
    }

    .legend {
      display: flex;
      gap: 22px;
      flex-wrap: wrap;
      padding: 18px 24px 24px;
      font-size: 13px;
      color: var(--muted);
    }

    .legend span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .legend i {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      display: inline-block;
    }

    .legend .d-early {
      background: var(--early);
    }

    .legend .d-advance {
      background: var(--advance);
    }

    .legend .d-spot {
      background: var(--spot);
    }

    /* ---------- ALUMNI ---------- */
    .alumni-card {
      background: linear-gradient(120deg, #241b4e, #4a2a86);
      border-radius: 20px;
      padding: 34px 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px;
      color: #fff;
    }

    .alumni-card h3 {
      font-size: 22px;
      font-weight: 600;
    }

    .alumni-card p {
      color: #c9bfec;
      font-size: 14.5px;
      margin-top: 6px;
      max-width: 380px;
    }

    .alumni-fee {
      font-family: "Inter", sans-serif;
      font-size: 36px;
      font-weight: 700;
      background: linear-gradient(90deg, #ffd9a8, #ff9d7a);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    /* ---------- TIMELINE ---------- */
    .timeline {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .timeline::before {
      content: "";
      position: absolute;
      top: 26px;
      left: 6%;
      right: 6%;
      height: 2px;
      background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 18px);
      z-index: 0;
    }

    .timeline-card {
      position: relative;
      z-index: 1;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 26px 22px;
    }

    .timeline-num {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "Inter", sans-serif;
      font-weight: 700;
      font-size: 14px;
      color: #fff;
      margin-bottom: 16px;
    }

    .timeline-card:nth-child(1) .timeline-num {
      background: var(--early);
    }

    .timeline-card:nth-child(2) .timeline-num {
      background: var(--advance);
    }

    .timeline-card:nth-child(3) .timeline-num {
      background: var(--spot);
    }

    .timeline-card h4 {
      font-family: "Inter", sans-serif;
      font-size: 19px;
      color: var(--deep);
      margin-bottom: 8px;
    }

    .timeline-card p {
      color: var(--muted);
      font-size: 14.5px;
    }

    .timeline-card .period {
      font-family: "Inter", sans-serif;
      color: var(--ink);
      font-weight: 500;
    }

    /* ---------- FOOTER CTA ---------- */
    .cta-band {
      background: linear-gradient(120deg, var(--coral), #ff8a5c 60%, var(--amber));
      padding: 64px 24px;
      text-align: center;
      color: #2a1500;
    }

    .cta-band h3 {
      font-size: clamp(26px, 3.4vw, 36px);
      font-weight: 600;
      margin-bottom: 14px;
    }

    .cta-band p {
      color: #5a2c0c;
      max-width: 480px;
      margin: 0 auto 30px;
      font-size: 15.5px;
    }

    .btn-dark {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--deep);
      color: #fff;
      font-weight: 600;
      font-size: 16px;
      padding: 16px 32px;
      border-radius: 12px;
      text-decoration: none;
      box-shadow: 0 14px 30px -10px rgba(36, 27, 78, 0.55);
      transition: transform .18s ease;
    }

    .btn-dark:hover {
      transform: translateY(-2px);
    }

    footer.note {
      text-align: center;
      padding: 26px 24px 40px;
      font-size: 13px;
      color: var(--muted);
    }

    /* ---------- RESPONSIVE ---------- */
    @media (max-width:760px) {
      .workshop-grid {
        grid-template-columns: 1fr;
      }

      .timeline {
        grid-template-columns: 1fr;
      }

      .timeline::before {
        display: none;
      }

      .table-card {
        overflow-x: auto;
      }

      .fee-table {
        min-width: 560px;
      }

      .alumni-card {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    :focus-visible {
      outline: 2.5px solid var(--violet);
      outline-offset: 2px;
    }

    @media (prefers-reduced-motion:reduce) {

      .btn-primary,
      .btn-dark,
      .btn-primary svg {
        transition: none;
      }
    }