.ib-model-hero{
  --hero-a:#f4b400;
  --hero-b:#0ea5c9;
  --hero-c:#e24b4a;
  --hero-d:#123f89;
}

.ib-model-section{
  padding-top:42px;
}

.ib-model-heading{
  margin-bottom:22px;
}

.ib-model-heading>span{
  display:inline-flex;
  margin-bottom:12px;
  color:#123f89;
  font-size:clamp(24px, 3vw, 32px);
  font-weight:800;
  line-height:1.25;
  letter-spacing:0;
  text-transform:none;
}

.ib-model-heading h2{
  margin:0 0 8px;
  color:#0f172a;
  font-size:clamp(28px, 3.5vw, 42px);
  line-height:1.22;
  letter-spacing:0;
}

.ib-model-heading p{
  margin:0;
  color:#64748b;
  font-size:17px;
  line-height:1.65;
}

.program-model-card{
  --program-accent:#f2b705;
  --program-soft:#fff8d7;
  --program-panel:#fffef6;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(226, 232, 240, .95);
  border-radius:28px;
  background:linear-gradient(135deg, var(--program-soft), var(--program-panel));
  box-shadow:0 24px 60px rgba(15, 23, 42, .1);
  padding:28px;
  transition:background-color .28s ease, border-color .28s ease;
}

.program-model-card::before{
  content:"";
  position:absolute;
  inset:auto -70px -170px auto;
  width:360px;
  height:360px;
  border-radius:50%;
  background:color-mix(in srgb, var(--program-accent) 16%, transparent);
  pointer-events:none;
}

.program-model-card.is-pyp{
  --program-accent:#f4b400;
  --program-soft:#fff6cf;
  --program-panel:#fffdf2;
}

.program-model-card.is-myp{
  --program-accent:#ef4423;
  --program-soft:#fff0ec;
  --program-panel:#fffaf8;
}

.program-model-card.is-dp{
  --program-accent:#09a8c7;
  --program-soft:#e9fbff;
  --program-panel:#f7fdff;
}

.program-tabs{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin:0 0 28px;
  padding:8px;
  border:1px solid rgba(255, 255, 255, .88);
  border-radius:24px;
  background:rgba(255, 255, 255, .72);
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, .8);
}

.program-tab{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:96px;
  padding:12px 14px;
  border:1px solid rgba(203, 213, 225, .85);
  border-radius:18px;
  background:#fff;
  color:#1f2937;
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .2s ease;
}

.program-tab:hover,
.program-tab:focus-visible{
  border-color:color-mix(in srgb, var(--program-accent) 58%, #cbd5e1);
  box-shadow:0 12px 26px rgba(15, 23, 42, .08);
  transform:translateY(-1px);
  outline:none;
}

.program-tab.is-active{
  border-color:var(--program-accent);
  box-shadow:0 16px 34px rgba(15, 23, 42, .1);
  background:linear-gradient(180deg, #fff, color-mix(in srgb, var(--program-accent) 8%, #fff));
}

.program-tab-icon{
  flex:0 0 104px;
  display:grid;
  place-items:center;
  min-width:0;
}

.program-tab-icon img{
  width:104px;
  height:auto;
  object-fit:contain;
}

.program-tab-copy{
  display:grid;
  gap:2px;
  min-width:0;
  line-height:1.25;
}

.program-tab-copy strong{
  color:var(--program-accent);
  font-size:24px;
  line-height:1;
}

.program-tab-copy span{
  color:#334155;
  font-size:16px;
  font-weight:900;
  word-break:keep-all;
}

.program-tab-copy small{
  color:#64748b;
  font-size:12px;
  font-weight:800;
}

.program-panels{
  position:relative;
  z-index:1;
}

.program-panel{
  display:none;
  animation:programPanelIn .28s ease both;
}

.program-panel.is-active{
  display:block;
}

.program-panel[hidden]{
  display:none!important;
}

@keyframes programPanelIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

.track-badge{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  margin-bottom:18px;
  padding:8px 14px;
  border-radius:999px;
  font-size:14px;
  font-weight:900;
}

.badge-amber{
  background:#fff3cd;
  color:#854f0b;
}

.badge-red{
  background:#ffe7e2;
  color:#9f2a18;
}

.badge-blue{
  background:#e5f6ff;
  color:#0c5f7a;
}

.track-inner{
  display:grid;
  grid-template-columns:minmax(320px, .9fr) minmax(0, 1.1fr);
  gap:24px;
  align-items:start;
}

.framework-column{
  display:grid;
  gap:14px;
}

.framework-svg-card{
  display:grid;
  place-items:center;
  min-height:440px;
  padding:24px;
  border:1px solid rgba(255, 255, 255, .9);
  border-radius:24px;
  background:rgba(255, 255, 255, .76);
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, .9), 0 14px 30px rgba(15, 23, 42, .05);
}

.framework-svg-card svg{
  display:none;
}

.framework-original{
  display:grid;
  width:100%;
  place-items:center;
}

.framework-original img{
  display:block;
  width:min(100%, 560px);
  height:auto;
  object-fit:contain;
}

.framework-svg-card svg{
  width:min(100%, 460px);
  height:auto;
  overflow:visible;
  font-family:inherit;
  filter:drop-shadow(0 15px 24px rgba(15, 23, 42, .08));
}

.framework-svg-card text{
  font-family:inherit;
  dominant-baseline:middle;
}

.legend-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.leg-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:7px 10px;
  border:1px solid rgba(203, 213, 225, .8);
  border-radius:999px;
  background:rgba(255, 255, 255, .82);
  color:#475569;
  font-size:12px;
  font-weight:900;
}

.leg-dot{
  width:11px;
  height:11px;
  border-radius:50%;
}

.track-right{
  display:grid;
  gap:14px;
}

.feature-row{
  display:grid;
  grid-template-columns:52px minmax(0, 1fr);
  gap:14px;
  padding:18px;
  border:1px solid rgba(226, 232, 240, .95);
  border-radius:18px;
  background:rgba(255, 255, 255, .82);
  box-shadow:0 12px 28px rgba(15, 23, 42, .045);
}

.feature-icon{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:16px;
  font-size:25px;
}

.feature-icon.amber{
  background:#fff3cd;
  color:#633806;
}

.feature-icon.red{
  background:#fcebeb;
  color:#791f1f;
}

.feature-icon.blue{
  background:#e6f1fb;
  color:#0c447c;
}

.feature-title{
  margin:0 0 5px;
  color:#0f172a;
  font-size:17px;
  font-weight:900;
  line-height:1.35;
}

.feature-desc{
  color:#475569;
  font-size:14px;
  line-height:1.62;
}

.subjects-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:4px;
}

.subject-card{
  padding:14px;
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:#fff;
}

.subject-card[data-course-modal]{
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.subject-card[data-course-modal]:hover,
.subject-card[data-course-modal]:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(15, 23, 42, .1);
  outline:none;
}

.subject-card.soft-amber{background:#fffdf1}
.subject-card.soft-red{background:#fff7f7}
.subject-card.soft-blue{background:#f0f7ff}
.subject-card.border-amber{border-color:#ef9f27}
.subject-card.border-red{border-color:#e24b4a}
.subject-card.border-blue{border-color:#378add}

.subject-num{
  margin-bottom:6px;
  color:var(--program-accent);
  font-size:12px;
  font-weight:900;
}

.subject-name{
  color:#0f172a;
  font-size:15px;
  font-weight:900;
  line-height:1.35;
}

.subject-en{
  margin-top:4px;
  color:#64748b;
  font-size:12px;
  font-weight:800;
  line-height:1.4;
}

.track-quote{
  margin-top:20px;
  padding:17px 19px;
  border-left:5px solid var(--program-accent);
  border-radius:16px;
  background:rgba(255, 255, 255, .78);
  color:#334155;
  font-size:15px;
  font-weight:800;
  line-height:1.62;
}

.course-modal-overlay{
  position:fixed;
  inset:0;
  z-index:5000;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(15, 23, 42, .54);
  backdrop-filter:blur(6px);
}

.course-modal{
  width:min(720px, 94vw);
  max-height:88vh;
  overflow:auto;
  border-radius:28px;
  background:#fff;
  box-shadow:0 28px 90px rgba(15, 23, 42, .32);
}

.course-modal-head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:28px 30px 20px;
  background:
    radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--modal-accent, #123f89) 18%, transparent), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--modal-accent, #123f89) 10%, #fff), #fff);
  border-bottom:1px solid #e2e8f0;
}

.course-modal-kicker{
  display:inline-flex;
  margin-bottom:10px;
  color:var(--modal-accent, #123f89);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.course-modal-title{
  margin:0;
  color:#0f172a;
  font-size:clamp(28px, 4vw, 40px);
  line-height:1.15;
  letter-spacing:0;
}

.course-modal-close{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border:0;
  border-radius:999px;
  background:#fff;
  color:#475569;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(15, 23, 42, .1);
}

.course-modal-body{
  padding:28px 30px 30px;
}

.course-modal-desc{
  margin:0;
  color:#405570;
  font-size:16px;
  line-height:1.78;
}

.course-modal-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:20px 0;
}

.course-modal-chip{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  background:color-mix(in srgb, var(--modal-accent, #123f89) 11%, #fff);
  color:var(--modal-accent, #123f89);
  font-size:12px;
  font-weight:900;
}

.course-modal-list{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}

.course-modal-list li{
  position:relative;
  padding:13px 14px 13px 38px;
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:#f8fbff;
  color:#334155;
  line-height:1.6;
}

.course-modal-list li::before{
  content:"";
  position:absolute;
  left:16px;
  top:1.05em;
  width:9px;
  height:9px;
  border-radius:999px;
  background:var(--modal-accent, #123f89);
}

@media (max-width: 1080px){
  .program-tabs{
    grid-template-columns:1fr;
  }

  .program-tab{
    min-height:84px;
  }

  .program-tab-icon{
    flex-basis:132px;
  }

  .program-tab-icon img{
    width:132px;
  }

  .track-inner{
    grid-template-columns:1fr;
  }

  .framework-svg-card{
    min-height:0;
  }
}

@media (max-width: 720px){
  .ib-model-section{
    padding-top:28px;
  }

  .program-model-card{
    border-radius:22px;
    padding:18px;
  }

  .program-tabs{
    gap:8px;
    margin-bottom:22px;
    padding:6px;
    border-radius:18px;
  }

  .program-tab{
    gap:12px;
    min-height:74px;
    padding:10px;
    border-radius:14px;
  }

  .program-tab-icon{
    flex-basis:106px;
  }

  .program-tab-icon img{
    width:106px;
  }

  .program-tab-copy strong{
    font-size:21px;
  }

  .program-tab-copy span{
    font-size:15px;
  }

  .framework-svg-card{
    padding:14px;
    border-radius:18px;
  }

  .legend-row{
    gap:6px;
  }

  .feature-row{
    grid-template-columns:44px minmax(0, 1fr);
    gap:12px;
    padding:15px;
  }

  .feature-icon{
    width:44px;
    height:44px;
    border-radius:14px;
    font-size:22px;
  }

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

@media (max-width: 430px){
  .program-tab-icon{
    flex-basis:88px;
  }

  .program-tab-icon img{
    width:88px;
  }

  .framework-svg-card{
    margin-inline:-4px;
    padding:10px;
  }
}