.program-section {
    background: var(--surface);
    padding: 40px;
    border-radius: var(--radius-lg);
}

.program-head {
    text-align: center;
    margin-bottom: 24px;
}

.program-title {
    font-size: 34px;
    font-weight: 600;
    margin: 6px 0 16px;
}

.program-tabs {
    display: inline-flex;
    background: #e9e9e9;
    padding: 6px;
    border-radius: 999px;
    gap: 6px;
}

.program-tabs .tab {
    border: none;
    padding: 8px 18px;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
}

.program-tabs .tab.active {
    background: var(--navy);
    color: #fff;
}

.program-search {
    margin: 20px auto;
    max-width: 500px;
}

.program-search input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
}

.program-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.program-card .icon {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
}

.program-card svg {
    width: 100%;
    height: 100%;
    stroke: var(--navy);
    stroke-width: 1.5;
    fill: none;
    transition: 0.3s;
}

.program-card:hover svg {
    stroke: #750404;
    transform: scale(1.1);
}

.program-card {
    position: relative;
    border-radius: 22px;
    padding: 22px 20px;
    overflow: hidden;
    cursor: pointer;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.35)),
        radial-gradient(120% 120% at 0% 0%, rgba(22, 59, 140, 0.08), transparent 60%);

    border: 1px solid rgba(255, 255, 255, 0.5);

    box-shadow:
        0 18px 40px -24px rgba(16, 43, 104, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);

    backdrop-filter: blur(12px);

    transition: all .35s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2;
}

.program-card::before {
    content: "";
    position: absolute;
    inset: -40%;

    background: linear-gradient(120deg,
            transparent 30%,
            rgba(255, 255, 255, 0.45) 45%,
            rgba(255, 255, 255, 0.2) 50%,
            transparent 65%);

    transform: translateX(-80%) rotate(12deg);
    transition: transform .7s ease;
}

.program-card:hover::before {
    transform: translateX(80%) rotate(12deg);
}

.program-card:hover {
    transform: translateY(-6px);
    border-color: rgba(13, 36, 86, 0.15);
    box-shadow: 0 14px 30px rgba(13, 36, 86, 0.12);
}

.program-card h3 {
    font-size: 16px;
    margin-bottom: 4px;
}

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

.program-detail {
    position: fixed;
    inset: 40px;
    border-radius: 28px;
    padding: 32px;
    overflow: hidden;
    z-index: 999;

    background:
        radial-gradient(800px 400px at 15% 20%, rgba(22, 59, 140, 0.25), transparent 60%),
        radial-gradient(600px 300px at 85% 80%, rgba(220, 38, 38, 0.12), transparent 60%),
        linear-gradient(180deg, #020617, #031a4a);

    color: #fff;

    backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, 0.08);

    box-shadow:
        0 40px 80px -30px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    opacity: 0;
    pointer-events: none;
    transform: scale(.96);
    transition: all .4s ease;

    overflow-y: auto;
}

.detail-head h2 {
    font-size: clamp(28px, 2.4vw, 40px);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.detail-head p {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
}

.detail-tabs {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

.detail-tabs button {
    padding: 10px 16px;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);

    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;

    cursor: pointer;
    transition: all .25s ease;
}

.detail-tabs button:hover {
    background: rgba(255, 255, 255, 0.12);
}

.detail-tabs button.active {
    background: linear-gradient(135deg, #163b8c, #102b68);
    color: #fff;

    box-shadow:
        0 8px 20px -10px rgba(22, 59, 140, 0.8);
}

.detail-content {
    margin-top: 24px;
    max-width: 100%;
}

.tab-content {
    opacity: 0;
    transform: translateY(10px);
    transition: all .3s ease;
    display: none;
}

.tab-content.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.tab-content p {
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    text-align: justify;
}

.tab-content ul {
    margin-top: 10px;
    padding-left: 18px;
}

.tab-content li {
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.8);
}

.close-detail {
    position: absolute;
    top: 18px;
    right: 18px;

    width: 42px;
    height: 42px;

    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);

    background: rgba(255, 255, 255, 0.08);
    color: #fff;

    font-size: 18px;
    cursor: pointer;

    transition: all .25s ease;
}

.close-detail:hover {
    background: #dc2626;
    transform: rotate(90deg) scale(1.05);
}

.program-detail.active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.program-detail::before {
    content: "";
    position: absolute;
    inset: -30%;
    pointer-events: none;

    background: linear-gradient(120deg,
            transparent 30%,
            rgba(255, 255, 255, 0.35),
            rgba(255, 255, 255, 0.15),
            transparent 70%);

    transform: translateX(-120%) rotate(10deg);
    opacity: 0.9;
}

.program-detail.active::before {
    animation: shineMove 1.4s ease forwards;
}

@keyframes shineMove {
    from {
        transform: translateX(-120%) rotate(10deg);
    }

    to {
        transform: translateX(120%) rotate(10deg);
    }
}

@media (max-width: 640px) {

    .program-detail {
        inset: 0;
        border-radius: 0;
        padding: 20px 14px;
    }

    .detail-tabs {
        overflow-x: auto;
    }

    .detail-content {
        max-width: 100%;
    }
}

.program-card .badge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(13, 36, 86, 0.08);
    color: var(--navy);
}

.program-grid {
    position: relative;
    z-index: 2;
}

.wa-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 64px;
    height: 64px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    transition: all 0.3s ease;
}

.wa-float svg {
    width: 30px;
    height: 30px;
}

.wa-float:hover {
    transform: scale(1.1);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* Light, comfortable program detail surface. */
.program-detail { inset:clamp(18px,4vw,52px); padding:clamp(22px,3vw,38px); border:1px solid #d7e1f0; background:linear-gradient(145deg,#ffffff 0%,#f6f9ff 58%,#eef4ff 100%); color:#15243d; box-shadow:0 35px 90px -38px rgba(15,31,58,.48),inset 0 1px 0 #fff; backdrop-filter:blur(20px); }
.program-detail::after { content:""; position:absolute; z-index:-1; width:420px; height:420px; right:-170px; top:-210px; border-radius:50%; background:radial-gradient(circle,rgba(48,87,180,.12),transparent 68%); pointer-events:none; }
.program-detail::before { opacity:.28; background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.9),transparent 65%); }
.program-detail .detail-head h2 { color:#102f68; font-weight:750; }
.program-detail .detail-head p { color:#6d7c92; }
.program-detail .detail-tabs { gap:8px; padding:6px; border:1px solid #dce5f2; border-radius:16px; background:rgba(242,246,252,.82); width:max-content; max-width:100%; }
.program-detail .detail-tabs button { padding:10px 16px; border:1px solid transparent; background:transparent; color:#52627a; font-weight:650; }
.program-detail .detail-tabs button:hover { border-color:#d3ddec; background:#fff; color:#173f7c; }
.program-detail .detail-tabs button.active { border-color:#c7d8fa; background:#fff; color:#174b9b; box-shadow:0 8px 18px -14px rgba(28,77,160,.55); }
.program-detail .detail-content { margin-top:18px; padding:clamp(18px,2.4vw,30px); border:1px solid #dce4ef; border-radius:20px; background:rgba(255,255,255,.82); box-shadow:0 18px 40px -36px rgba(15,23,42,.5); }
.program-detail .tab-content p { color:#34445c; line-height:1.72; text-align:left; }
.program-detail .tab-content li { color:#3f5068; }
.program-detail .close-detail { z-index:3; border:1px solid #d5deeb; background:#fff; color:#53637a; box-shadow:0 8px 18px -14px rgba(15,23,42,.55); }
.program-detail .close-detail:hover { border-color:#f1b6b6; background:#fff1f1; color:#c52222; }
@media(max-width:640px){.program-detail{inset:0;padding:18px 12px}.program-detail .detail-tabs{width:100%;overflow-x:auto}.program-detail .detail-content{padding:16px;border-radius:16px}}
/* Spacious modal layout and automatic point lists. */
body > .program-detail { inset:22px; display:flex; flex-direction:column; min-height:0; max-height:calc(100vh - 44px); overflow:hidden; }
body > .program-detail .detail-head { flex:0 0 auto; padding-right:48px; }
body > .program-detail .detail-tabs { flex:0 0 auto; }
body > .program-detail .detail-content { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.program-point-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; counter-reset:program-point; }
.program-point-list--courses { grid-template-columns:repeat(2,minmax(0,1fr)); }
.program-point-list li { position:relative; min-height:52px; display:flex; align-items:center; margin:0!important; padding:12px 14px 12px 48px; border:1px solid #dce5f1; border-radius:13px; background:#f8faff; color:#31435d!important; line-height:1.42; counter-increment:program-point; }
.program-point-list li::before { content:counter(program-point); position:absolute; left:12px; top:50%; width:25px; height:25px; display:grid; place-items:center; border-radius:8px; background:#e7efff; color:#174f9f; font-size:11px; font-weight:850; transform:translateY(-50%); }
@media(max-width:760px){body > .program-detail{inset:0;max-height:100vh}.program-point-list--courses{grid-template-columns:1fr}.program-point-list li{min-height:46px}}
.program-detail .program-cms-points { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.program-detail .program-cms-points--courses { grid-template-columns:repeat(2,minmax(0,1fr)); }
.program-detail .program-cms-points li { position:relative; min-height:52px; margin:0!important; padding:13px 16px 13px 43px; border:1px solid #dce5f1; border-radius:13px; background:#f8faff; color:#31435d!important; line-height:1.45; }
.program-detail .program-cms-points li::before { content:'•'; position:absolute; left:16px; top:10px; color:#245db5; font-size:22px; line-height:1; }
@media(max-width:760px){.program-detail .program-cms-points--courses{grid-template-columns:1fr}}
/* Editorial drop cap for the opening paragraph in About. */
.program-detail #about > p:first-of-type::first-letter {
    float: left;
    margin: 0.04em 0.12em 0 0;
    color: #123f82;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 4.25em;
    font-weight: 700;
    line-height: 0.78;
    text-transform: uppercase;
}

.program-detail #about > p:first-of-type {
    text-wrap: pretty;
}

@media (max-width: 640px) {
    .program-detail #about > p:first-of-type::first-letter {
        font-size: 3.55em;
        margin-right: 0.1em;
    }
}
/* Program anchor target offset */
#program-list {
    scroll-margin-top: 132px;
}
/* Wider program cards: keep rows to 3-4 cards instead of narrow 5-column rows. */
.program-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 2vw, 28px);
}

.program-card {
    min-height: 186px;
    padding: 24px 22px;
}

.program-card h3 {
    max-width: 24ch;
    font-size: clamp(16px, 1.1vw, 18px);
    line-height: 1.18;
}

.program-card p {
    font-size: 13.5px;
    line-height: 1.38;
}

@media (max-width: 1280px) {
    .program-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .program-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .program-section {
        padding: 24px 16px;
    }

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

.program-detail .program-semester-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin: 0;
}

.program-detail .program-semester-card {
    border: 1px solid #dce5f1;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    box-shadow: 0 16px 34px -30px rgba(15, 23, 42, .5);
    padding: 20px 22px;
}

.program-detail .program-semester-card h3 {
    margin: 0 0 14px;
    color: #0d2456;
    font-size: 20px;
    font-weight: 850;
    letter-spacing: -0.01em;
}

.program-detail .program-semester-card ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.program-detail .program-semester-card li {
    position: relative;
    margin: 0 !important;
    padding-left: 24px;
    color: #31435d !important;
    font-size: 17px;
    line-height: 1.45;
}

.program-detail .program-semester-card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .62em;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #245db5;
    transform: translateY(-50%);
}

@media (max-width: 760px) {
    .program-detail .program-semester-grid {
        grid-template-columns: 1fr;
    }

    .program-detail .program-semester-card {
        padding: 18px;
    }

    .program-detail .program-semester-card li {
        font-size: 16px;
    }
}