:root{
    --ink:#070d1a;
    --paper:#fbfcfe;
    --panel:#f2f5f9;
    --line:rgba(7,13,26,.10);
    --muted:#57647a;
    --blue:#0ea5e9;
    --blue-deep:#0b6fa8;
    --amber:#ef6825;
    --amber-2:#ff8c4a;
    --white:#ffffff;
    --font-display:'Space Grotesk','Segoe UI',sans-serif;
    --font-body:'Inter','Segoe UI',sans-serif;
    --radius-md:16px;
    --radius-lg:26px;
    --gutter:clamp(20px,6vw,8%);
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    font-family:var(--font-body);
    background:var(--paper);
    color:var(--ink);
    line-height:1.6;
}
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); line-height:1.15; letter-spacing:-.01em; }
p{ color:var(--muted); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ list-style:none; }

.section-inner{ max-width:1080px; margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }

#curriculum,
#roadmap{ scroll-margin-top:90px; }

/* NAV */
.navbar{
    position:sticky; top:0; z-index:100;
    display:flex; justify-content:space-between; align-items:center;
    padding:16px var(--gutter);
    background:rgba(251,252,254,.9);
    backdrop-filter:blur(16px) saturate(160%);
    border-bottom:1px solid var(--line);
}
.logo{ display:flex; align-items:center; gap:11px; }
.logo-mark{ width:36px; height:36px; border-radius:10px; object-fit:contain; }
.logo-text{ display:flex; flex-direction:column; line-height:1.2; }
.logo-word{ font-family:var(--font-display); font-size:1.2rem; font-weight:700; }
.logo-word span{ color:var(--blue-deep); }
.logo-tagline{ font-size:.68rem; font-weight:500; color:var(--muted); letter-spacing:.03em; }

.nav-links{ display:flex; align-items:center; gap:clamp(16px,2vw,30px); }
.nav-links a{
    position:relative; display:flex; align-items:center; gap:8px;
    font-weight:500; font-size:.95rem; color:var(--ink); transition:color .25s;
}
.nav-links a:not(.contact-btn)::after{
    content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px;
    background:var(--amber); transition:width .3s;
}
.nav-links a:not(.contact-btn):hover::after{ width:100%; }
.nav-links a:hover{ color:var(--blue-deep); }

.contact-btn{
    background:var(--ink); color:var(--white) !important;
    padding:11px 22px; border-radius:10px; font-weight:600;
    transition:transform .25s, background-color .25s;
}
.contact-btn:hover{ transform:translateY(-2px); background:var(--blue-deep); }

.menu-btn{ display:none; width:32px; height:22px; cursor:pointer; position:relative; z-index:1101; }
.menu-btn span{
    position:absolute; width:100%; height:2.5px;
    background:var(--ink); border-radius:5px; transition:.35s;
}
.menu-btn span:nth-child(1){ top:0; }
.menu-btn span:nth-child(2){ top:9.5px; }
.menu-btn span:nth-child(3){ top:19px; }
.menu-btn.active span:nth-child(1){ top:9.5px; transform:rotate(45deg); }
.menu-btn.active span:nth-child(2){ opacity:0; }
.menu-btn.active span:nth-child(3){ top:9.5px; transform:rotate(-45deg); }

@media(max-width:960px){
    .menu-btn{ display:block; }
    .nav-links{
        position:fixed; top:0; right:-100%; width:min(320px,84vw); height:100vh;
        background:var(--white); flex-direction:column; justify-content:center;
        align-items:flex-start; gap:22px; padding:40px;
        transition:right .4s cubic-bezier(.2,.7,.3,1);
        box-shadow:-20px 0 50px rgba(7,13,26,.15);
    }
    .nav-links.active{ right:0; }
    .nav-links a{ font-size:1.05rem; }
    .contact-btn{ width:100%; text-align:center; justify-content:center; }
}

/* HERO */
.school-hero{
    padding:clamp(56px,8vw,96px) 0 clamp(40px,6vw,64px);
    background:linear-gradient(180deg,var(--panel),var(--paper));
    text-align:center;
}
.kicker{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-display); font-weight:600; font-size:.85rem;
    color:var(--blue-deep); margin-bottom:16px;
}
.kicker::before{ content:""; width:18px; height:2px; background:var(--amber); border-radius:2px; }
.school-hero h1{ font-size:clamp(2rem,5vw,3rem); max-width:760px; margin:0 auto 18px; }
.school-hero h1 em{ font-style:normal; color:var(--blue-deep); }
.school-hero p.lead{ max-width:620px; margin:0 auto; font-size:1.05rem; }
.hero-accent{
    display:inline-block; margin-top:18px; font-family:var(--font-display);
    font-style:italic; font-weight:600; font-size:.95rem; color:var(--amber);
}

/* COURSE CARD */
.course-wrap{ padding:0 0 clamp(56px,8vw,96px); }
.course-card{
    max-width:900px; margin:-30px auto 0; background:var(--white);
    border:1px solid var(--line); border-radius:var(--radius-lg);
    box-shadow:0 30px 60px -30px rgba(7,13,26,.25);
    overflow:hidden;
}
.course-head{
    padding:clamp(28px,4vw,40px);
    background:linear-gradient(135deg,var(--ink),var(--blue-deep));
    color:var(--white);
    display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:flex-end;
}
.course-head .tag{
    display:inline-block; background:rgba(255,255,255,.14); color:var(--white);
    font-size:.78rem; font-weight:600; padding:5px 12px; border-radius:99px; margin-bottom:12px;
}
.course-head h2{ color:var(--white); font-size:clamp(1.5rem,3vw,2.1rem); }
.course-head p{ color:rgba(255,255,255,.78); margin-top:8px; max-width:480px; }
.course-meta{ display:flex; gap:22px; flex-wrap:wrap; }
.course-meta div{ text-align:left; }
.course-meta span{ display:block; font-size:.75rem; color:rgba(255,255,255,.65); text-transform:uppercase; letter-spacing:.04em; }
.course-meta strong{ font-family:var(--font-display); font-size:1rem; }

.course-body{ padding:clamp(28px,4vw,40px); }

.phase-block{
    border:1px solid var(--line); border-radius:var(--radius-md);
    padding:24px; margin-bottom:22px; background:var(--panel);
}
.phase-block-head{
    display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
    cursor:pointer; user-select:none; margin-bottom:16px;
}
.phase-block-head:focus-visible{ outline:2px solid var(--blue); outline-offset:4px; border-radius:6px; }
.phase-block-head h3{ font-size:1.25rem; }
.phase-block-head-right{ display:flex; align-items:center; gap:12px; }
.phase-duration{
    font-size:.78rem; font-weight:600; color:var(--blue-deep);
    background:rgba(14,165,233,.1); padding:5px 12px; border-radius:99px; white-space:nowrap;
}
.phase-chevron{ color:var(--muted); transition:transform .3s ease; }
.phase-block.open .phase-chevron{ transform:rotate(180deg); }

.phase-details{
    display:grid; grid-template-rows:0fr;
    transition:grid-template-rows .35s ease;
}
.phase-details-inner{ overflow:hidden; min-height:0; }
.phase-block.open .phase-details{ grid-template-rows:1fr; }

.topic-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 20px; margin-bottom:20px; }
.topic-grid li{ display:flex; gap:10px; font-size:.95rem; color:var(--ink); }
.topic-grid li i{ color:var(--amber); margin-top:4px; flex-shrink:0; }

.projects-row h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:10px; }
.project-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.project-chips span{
    background:var(--white); border:1px solid var(--line); padding:8px 14px;
    border-radius:10px; font-size:.9rem; font-weight:500;
}

.phase-optional{
    font-size:.7rem; font-weight:600; color:var(--amber);
    background:rgba(239,104,37,.1); padding:3px 10px; border-radius:99px;
    vertical-align:middle; margin-left:6px;
}
.phase-reading{
    font-size:.88rem; font-style:italic; margin-bottom:18px;
    display:flex; align-items:center; gap:8px;
}
.phase-reading i{ color:var(--blue-deep); }

.extras{ padding-top:0; }
.goal-banner{
    display:flex; align-items:flex-start; gap:16px;
    background:linear-gradient(135deg,var(--ink),var(--blue-deep));
    color:var(--white); border-radius:var(--radius-md);
    padding:22px 24px; margin-bottom:22px;
}
.goal-banner i{ font-size:1.4rem; color:var(--amber-2); margin-top:4px; }
.goal-banner h4{ color:var(--white); font-size:.95rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.goal-banner p{ color:rgba(255,255,255,.85); font-size:.98rem; }

.info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.info-card{
    border:1px solid var(--line); border-radius:var(--radius-md);
    padding:22px 24px; background:var(--panel);
}
.info-card h4{ font-size:.95rem; margin-bottom:14px; }
.info-card ul{ display:grid; gap:10px; }
.info-card li{ display:flex; gap:10px; font-size:.92rem; color:var(--ink); }
.info-card li i{ color:var(--blue-deep); margin-top:4px; flex-shrink:0; }

@media (max-width:640px){
    .info-grid{ grid-template-columns:1fr; }
}

.footer{
    background:var(--paper);
    padding:70px var(--gutter) 26px;
    border-top:1px solid var(--line);
}
.footer-grid{
    max-width:1280px; margin:0 auto;
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
}
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.footer-logo-img{ width:36px; height:36px; border-radius:9px; }
.footer-logo{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--ink); }
.footer-logo span{ color:var(--blue-deep); }
.footer p{ color:var(--muted); line-height:1.75; font-size:.94rem; max-width:280px; }
.footer-social{ display:flex; gap:12px; margin-top:20px; }
.footer-social a{
    width:40px; height:40px; display:flex; align-items:center; justify-content:center;
    border-radius:50%; background:var(--panel); color:var(--ink); transition:.25s;
}
.footer-social a:hover{ background:#22c55e; color:var(--white); transform:translateY(-3px); }
.footer h4{ color:var(--ink); font-size:.95rem; margin-bottom:18px; }
.footer ul{ display:grid; gap:11px; }
.footer li{ color:var(--muted); font-size:.92rem; }
.footer a{ text-decoration:none; color:var(--muted); transition:.25s; }
.footer a:hover{ color:var(--blue-deep); }
.footer-contact li{ display:flex; align-items:center; gap:9px; }
.footer-contact i{ color:var(--blue-deep); width:16px; }
.footer-bottom{
    max-width:1280px; margin:50px auto 0; border-top:1px solid var(--line);
    padding-top:22px; text-align:center; color:var(--muted); font-size:.85rem;
}
.footer-bottom a{ color:var(--muted); }
.footer-bottom a:hover{ color:var(--blue-deep); }
.footer-motto{
    margin-top:10px; font-family:var(--font-display); font-weight:600;
    font-size:.8rem; color:var(--blue-deep); letter-spacing:.02em;
}
.footer-motto i{ font-size:.7rem; margin:0 4px; color:var(--amber); }

@media(max-width:860px){
    .footer-grid{ grid-template-columns:repeat(2,1fr); text-align:left; }
}
@media(max-width:520px){
    .footer-grid{ grid-template-columns:1fr; }
    .footer p{ max-width:none; }
}

@media (max-width:640px){
    .topic-grid{ grid-template-columns:1fr; }
    .course-head{ align-items:flex-start; }
}