*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* deep navy canvas */
    --bg: #0A1226;
    --bg-2: #0C1730;
    --bg-3: #0E1B3A;
    --panel: #101F40;
    --panel-2: #0D1A35;
    --border: #1E2E54;
    --border-2: #16244A;

    /* text */
    --white: #EEF2FB;
    --soft: #AEB8D4;
    --mid: #6E7CA3;
    --faint: #44527A;

    /* accents */
    --blue: #3B6FF0;
    /* cobalt — primary */
    --blue-lt: #6E97FF;
    --blue-glow: rgba(59, 111, 240, .22);
    --cyan: #3FE0C8;
    /* teal — section labels */
    --cyan-dim: #2BB7A4;

    --display: 'Sora', system-ui, sans-serif;
    --mono: 'JetBrains Mono', monospace;
    --sans: 'Sora', system-ui, sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--white);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    overflow-x: hidden;
    position: relative;
}

/* ── CODE-RAIN MARGIN TEXTURE ── */
.code-rain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    opacity: .5;
}

.code-col {
    position: absolute;
    top: -10%;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 2.1;
    white-space: pre;
    color: rgba(120, 150, 220, .10);
    letter-spacing: .02em;
    user-select: none;
}

.code-col.left {
    left: 14px;
}

.code-col.right {
    right: 14px;
    text-align: right;
}

@media (max-width: 1180px) {
    .code-rain {
        display: none;
    }
}

/* page content sits above the rain */
nav,
.git-bar,
section,
footer {
    position: relative;
    z-index: 2;
}

/* ── NAV ── */
nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 18, 38, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px;
    height: 60px;
    border-bottom: 1px solid var(--border-2);
}

.nav-brand {
    font-family: var(--display);
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -.01em;
    text-decoration: none;
}

.nav-brand .dot {
    color: var(--blue);
}

.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-links a {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--soft);
    text-decoration: none;
    transition: color .2s;
}

.nav-links a:hover {
    color: var(--white);
}

.nav-links a.nav-cta {
    color: var(--white);
    border: 1px solid var(--border);
    padding: 7px 16px;
    border-radius: 4px;
    transition: border-color .2s, background .2s;
}

.nav-links a.nav-cta:hover {
    border-color: var(--blue);
    background: var(--blue-glow);
}

/* ── HERO ── */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 90px 48px 80px;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 55% 45% at 78% 22%, var(--blue-glow) 0%, transparent 68%),
        radial-gradient(ellipse 45% 55% at 12% 85%, rgba(63, 224, 200, .10) 0%, transparent 70%);
    pointer-events: none;
}

.hero-topline {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: 38px;
}

.hero-topline .flag {
    font-size: 16px;
}

.hero-topline .dot-sep {
    color: var(--blue);
}

.hero-eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 24px;
}

.hero h1 {
    font-family: var(--display);
    font-size: clamp(46px, 8vw, 104px);
    font-weight: 800;
    line-height: .96;
    letter-spacing: -.03em;
    color: var(--white);
    margin-bottom: 30px;
}

.hero h1 .accent {
    color: var(--blue);
    display: block;
}

.hero-sub {
    font-size: 18px;
    line-height: 1.7;
    font-weight: 300;
    color: var(--soft);
    max-width: 660px;
    margin-bottom: 44px;
}

.hero-tracks {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.track-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 24px;
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, background .2s;
}

.track-pill.ds {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 8px 30px -10px var(--blue);
}

.track-pill.ds:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 34px -8px var(--blue);
}

.track-pill.py {
    background: transparent;
    color: var(--white);
    border: 1px solid var(--border);
}

.track-pill.py:hover {
    transform: translateY(-2px);
    border-color: var(--cyan);
    background: rgba(63, 224, 200, .06);
}

.hero-meta {
    margin-top: 68px;
    display: flex;
    gap: 56px;
    flex-wrap: wrap;
}

.meta-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 6px;
}

.meta-val {
    font-family: var(--display);
    font-size: 26px;
    color: var(--white);
    font-weight: 700;
    letter-spacing: -.01em;
}

.meta-val .accent {
    color: var(--blue);
}

/* ── SECTION STRUCTURE ── */
section {
    padding: 104px 48px;
}

.section-eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 16px;
}

h2.section-title {
    font-family: var(--display);
    font-size: clamp(30px, 4.4vw, 54px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.025em;
    max-width: 760px;
    margin-bottom: 22px;
    color: var(--white);
}

.section-lead {
    font-size: 17px;
    color: var(--soft);
    line-height: 1.75;
    font-weight: 300;
    max-width: 650px;
    margin-bottom: 60px;
}

/* ── PHILOSOPHY ── */
.philosophy {
    background: var(--bg-2);
}

.phil-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    border: 1px solid var(--border-2);
    border-radius: 12px;
    overflow: hidden;
}

.phil-cell {
    background: var(--panel-2);
    padding: 44px 40px;
    transition: background .25s;
}

.phil-cell:hover {
    background: var(--panel);
}

.phil-num {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--blue);
    margin-bottom: 16px;
    letter-spacing: .08em;
}

.phil-cell h3 {
    font-family: var(--display);
    font-size: 20px;
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--white);
}

.phil-cell p {
    font-size: 14px;
    color: var(--soft);
    line-height: 1.75;
    font-weight: 300;
}

/* ── TRACKS ── */
.tracks-section {
    background: var(--bg);
}

.tracks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.track-card {
    padding: 48px 40px 44px;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: var(--panel-2);
    border: 1px solid var(--border-2);
    transition: transform .25s, border-color .25s;
}

.track-card:hover {
    transform: translateY(-4px);
}

.track-card.ds-card:hover {
    border-color: var(--blue);
}

.track-card.py-card:hover {
    border-color: var(--cyan);
}

.track-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
}

.track-card.ds-card::before {
    background: var(--blue);
}

.track-card.py-card::before {
    background: var(--cyan);
}

.track-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 4px;
    margin-bottom: 26px;
    font-weight: 500;
}

.ds-card .track-tag {
    background: var(--blue);
    color: #fff;
}

.py-card .track-tag {
    background: rgba(63, 224, 200, .14);
    color: var(--cyan);
    border: 1px solid rgba(63, 224, 200, .3);
}

.track-card h3 {
    font-family: var(--display);
    font-size: 27px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    margin-bottom: 16px;
    color: var(--white);
}

.track-card .tagline {
    font-size: 14px;
    color: var(--soft);
    margin-bottom: 34px;
    line-height: 1.75;
    max-width: 430px;
    font-weight: 300;
}

.track-highlights {
    list-style: none;
    margin-bottom: 38px;
}

.track-highlights li {
    font-size: 13px;
    color: var(--soft);
    padding: 8px 0;
    border-bottom: 1px solid var(--border-2);
    display: flex;
    align-items: flex-start;
    gap: 11px;
    line-height: 1.5;
    font-weight: 300;
}

.track-highlights li::before {
    content: '→';
    flex-shrink: 0;
    font-family: var(--mono);
    font-size: 11px;
    margin-top: 2px;
}

.ds-card .track-highlights li::before {
    color: var(--blue);
}

.py-card .track-highlights li::before {
    color: var(--cyan);
}

.suited-for {
    font-size: 12px;
    color: var(--mid);
    font-style: italic;
    line-height: 1.6;
}

.suited-for strong {
    font-style: normal;
    color: var(--soft);
}

/* ── CURRICULUM ── */
.curriculum {
    background: var(--bg-2);
}

.curr-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 52px;
    border-bottom: 1px solid var(--border);
}

.curr-tab {
    padding: 14px 26px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    background: none;
    color: var(--mid);
    transition: color .2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.curr-tab.active.ds-tab {
    color: var(--blue-lt);
    border-bottom-color: var(--blue);
}

.curr-tab.active.py-tab {
    color: var(--cyan);
    border-bottom-color: var(--cyan);
}

.curr-tab:hover {
    color: var(--white);
}

.curr-panel {
    display: none;
}

.curr-panel.active {
    display: block;
}

.phases-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    border: 1px solid var(--border-2);
    border-radius: 12px;
    overflow: hidden;
}

.phase-col {
    padding: 34px 28px 38px;
    background: var(--panel-2);
}

.phase-col:nth-child(even) {
    background: var(--bg-3);
}

.phase-header {
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.phase-num {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--cyan);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.phase-title {
    font-family: var(--display);
    font-size: 17px;
    color: var(--white);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 4px;
}

.phase-wks {
    font-size: 11px;
    color: var(--mid);
    font-family: var(--mono);
}

.week-item {
    margin-bottom: 18px;
}

.week-num {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--blue-lt);
    margin-bottom: 4px;
    letter-spacing: .06em;
}

.week-name {
    font-size: 12.5px;
    color: var(--white);
    line-height: 1.5;
    font-weight: 500;
}

.week-insight {
    font-size: 11px;
    color: var(--mid);
    font-style: italic;
    margin-top: 4px;
    line-height: 1.45;
}

.phase-arrow {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--cyan-dim);
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border-2);
    font-style: italic;
}

.decision-box {
    margin-top: 22px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px;
    background: rgba(59, 111, 240, .05);
}

.decision-box .db-label {
    font-size: 11px;
    color: var(--cyan);
    font-family: var(--mono);
    margin-bottom: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.decision-box .db-body {
    font-size: 12px;
    color: var(--soft);
    line-height: 1.85;
    font-family: var(--mono);
}

/* ── ENGAGEMENT ── */
.engagement {
    background: var(--bg);
}

.eng-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.eng-card {
    background: var(--panel-2);
    border: 1px solid var(--border-2);
    border-radius: 14px;
    padding: 42px 36px 46px;
    position: relative;
    transition: transform .25s, border-color .25s;
}

.eng-card:hover {
    transform: translateY(-4px);
    border-color: var(--border);
}

.eng-card.featured {
    background: linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%);
    border-color: var(--blue);
    box-shadow: 0 0 0 1px var(--blue-glow), 0 20px 50px -24px var(--blue);
}

.eng-num {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--blue);
    letter-spacing: .1em;
    margin-bottom: 22px;
    display: block;
}

.eng-card h3 {
    font-family: var(--display);
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 14px;
    line-height: 1.2;
    color: var(--white);
}

.eng-card p {
    font-size: 14px;
    color: var(--soft);
    line-height: 1.75;
    font-weight: 300;
}

.eng-badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 4px;
    margin-top: 18px;
    background: var(--blue);
    color: #fff;
}

/* ── DIFFERENTIATORS ── */
.diff-section {
    background: var(--bg-2);
}

.diff-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
}

.diff-item {
    padding: 6px 0;
}

.diff-dash {
    width: 26px;
    height: 2px;
    background: var(--blue);
    margin-bottom: 18px;
}

.diff-item h4 {
    font-family: var(--display);
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--white);
}

.diff-item p {
    font-size: 13px;
    color: var(--soft);
    line-height: 1.7;
    font-weight: 300;
}

/* ── WHY US ── */
.why-section {
    background: var(--bg);
}

.comparison-table-wrap {
    overflow-x: auto;
    margin-bottom: 60px;
    border: 1px solid var(--border-2);
    border-radius: 12px;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 680px;
}

.comparison-table th {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 16px 22px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    background: var(--panel-2);
}

.comparison-table th:first-child {
    color: var(--mid);
    width: 24%;
}

.comparison-table th.th-ts {
    background: var(--blue);
    color: #fff;
}

.comparison-table th.th-other {
    color: var(--mid);
}

.comparison-table td {
    padding: 14px 22px;
    border-bottom: 1px solid var(--border-2);
    vertical-align: top;
    line-height: 1.55;
    background: var(--panel-2);
    font-weight: 300;
}

.comparison-table td:first-child {
    color: var(--soft);
    font-weight: 500;
}

.comparison-table td.td-ts {
    background: rgba(59, 111, 240, .08);
    color: var(--white);
}

.comparison-table td.td-other {
    color: var(--mid);
}

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

.chk {
    color: var(--cyan);
    margin-right: 5px;
}

.crs {
    color: var(--faint);
    margin-right: 5px;
}

.prt {
    color: #C99A3E;
    margin-right: 5px;
}

.why-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 56px;
}

.why-card {
    background: var(--panel-2);
    border: 1px solid var(--border-2);
    border-radius: 14px;
    padding: 34px 30px;
    border-top: 2px solid transparent;
    transition: transform .25s;
}

.why-card:hover {
    transform: translateY(-4px);
}

.why-card.adc {
    border-top-color: var(--blue);
}

.why-card.adp {
    border-top-color: var(--cyan);
}

.why-card.adb {
    border-top-color: var(--blue-lt);
}

.why-card-num {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--blue);
    letter-spacing: .1em;
    margin-bottom: 18px;
    display: block;
}

.why-card h4 {
    font-family: var(--display);
    font-size: 17px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 12px;
    line-height: 1.3;
}

.why-card p {
    font-size: 13px;
    color: var(--soft);
    line-height: 1.75;
    font-weight: 300;
}

.why-card strong {
    color: var(--white);
    font-weight: 500;
}

.for-whom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.for-cell {
    background: var(--panel-2);
    border: 1px solid var(--border-2);
    border-radius: 14px;
    padding: 36px 38px;
    border-top: 2px solid transparent;
}

.for-cell-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 16px;
    display: block;
}

.for-cell.entry {
    border-top-color: var(--blue);
}

.for-cell.entry .for-cell-label {
    color: var(--blue-lt);
}

.for-cell.pivot {
    border-top-color: var(--cyan);
}

.for-cell.pivot .for-cell-label {
    color: var(--cyan);
}

.for-cell h4 {
    font-family: var(--display);
    font-size: 21px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 14px;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.for-cell p {
    font-size: 14px;
    color: var(--soft);
    line-height: 1.8;
    font-weight: 300;
}

.for-cell ul {
    list-style: none;
    margin-top: 14px;
}

.for-cell ul li {
    font-size: 13px;
    color: var(--soft);
    padding: 8px 0;
    border-bottom: 1px solid var(--border-2);
    display: flex;
    align-items: flex-start;
    gap: 9px;
    line-height: 1.5;
    font-weight: 300;
}

.for-cell ul li::before {
    content: '→';
    font-family: var(--mono);
    font-size: 10px;
    flex-shrink: 0;
    margin-top: 2px;
}

.for-cell.entry ul li::before {
    color: var(--blue);
}

.for-cell.pivot ul li::before {
    color: var(--cyan);
}

/* ── OUTCOMES (emoji feature row, echoing the image) ── */
.outcomes {
    background: var(--bg-2);
}

.outcome-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 48px;
    max-width: 920px;
}

.outcome-item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.outcome-emoji {
    font-size: 30px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.outcome-item h4 {
    font-family: var(--display);
    font-size: 19px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 6px;
}

.outcome-item p {
    font-size: 14px;
    color: var(--soft);
    line-height: 1.65;
    font-weight: 300;
}

.pull-quote {
    margin: 64px auto 0;
    max-width: 820px;
    border-left: 3px solid var(--blue);
    padding: 8px 0 8px 30px;
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(20px, 2.6vw, 30px);
    font-weight: 500;
    line-height: 1.35;
    color: var(--white);
    letter-spacing: -.01em;
}

.pull-quote .accent {
    color: var(--blue);
}

/* ── FOOTER ── */
footer {
    background: var(--bg);
    border-top: 1px solid var(--border-2);
    padding: 36px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

footer p {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--mid);
    letter-spacing: .06em;
}

.footer-links {
    display: flex;
    gap: 26px;
}

.footer-links a {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--mid);
    text-decoration: none;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: color .2s;
}

.footer-links a:hover {
    color: var(--blue-lt);
}

/* ── GET IN TOUCH BAR ── */
.git-bar {
    background: var(--blue);
    padding: 14px 48px;
    position: sticky;
    top: 60px;
    z-index: 99;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.git-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 24px;
}

.git-text {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.git-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    white-space: nowrap;
}

.git-msg {
    font-size: 14px;
    color: #fff;
    font-weight: 300;
}

.git-btn {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 9px 22px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .45);
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 4px;
    transition: background .2s, border-color .2s;
    flex-shrink: 0;
}

.git-btn:hover {
    background: rgba(255, 255, 255, .22);
    border-color: #fff;
}

/* When the mobile drawer is open, collapse the sticky banner so it
     doesn't overlap the menu or block the hamburger. */
body.menu-open .git-bar {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height .25s ease, opacity .2s ease,
        padding .25s ease;
}

.git-bar {
    transition: max-height .25s ease, opacity .2s ease, padding .25s ease;
    max-height: 240px;
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero>* {
    animation: fadeUp .8s ease both;
}

.hero .hero-topline {
    animation-delay: .05s;
}

.hero .hero-eyebrow {
    animation-delay: .15s;
}

.hero h1 {
    animation-delay: .28s;
}

.hero .hero-sub {
    animation-delay: .42s;
}

.hero .hero-tracks {
    animation-delay: .56s;
}

.hero .hero-meta {
    animation-delay: .7s;
}

/* ── MOBILE NAV ── */
.nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--soft);
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
}

.nav-hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-hamburger.open span:nth-child(2) {
    opacity: 0;
}

.nav-hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.nav-drawer {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    z-index: 99;
    padding: 0;
    transform: translateY(-8px);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
}

.nav-drawer.open {
    transform: translateY(0);
    opacity: 1;
}

.nav-drawer a {
    display: block;
    padding: 16px 24px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--soft);
    text-decoration: none;
    border-bottom: 1px solid var(--border-2);
    transition: color .15s, background .15s;
}

.nav-drawer a:hover {
    color: var(--white);
    background: var(--panel);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    nav {
        padding: 0 24px;
    }

    .nav-links {
        display: none;
    }

    .nav-hamburger {
        display: flex;
    }

    .nav-drawer {
        display: flex;
    }

    section {
        padding: 72px 24px;
    }

    .hero {
        padding: 72px 24px;
    }

    .phil-grid,
    .tracks-grid,
    .eng-grid,
    .diff-grid,
    .why-cards,
    .for-whom,
    .outcome-grid {
        grid-template-columns: 1fr;
    }

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

    footer {
        padding: 24px;
        flex-direction: column;
        align-items: flex-start;
    }

    .git-bar {
        padding: 12px 24px;
        top: 60px;
    }

    .git-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .git-text {
        gap: 6px;
    }

    .git-btn {
        width: 100%;
        text-align: center;
        padding: 12px 22px;
    }

    .hero-meta {
        gap: 28px;
    }

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

    .curr-tab {
        white-space: nowrap;
    }
}

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

    .meta-val {
        font-size: 21px;
    }
}

/* ── APPLY / CONTACT FORM ── */
.apply-section {
    background: var(--bg-2);
    scroll-margin-top: 120px;
}

.apply-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

.apply-intro h2.section-title {
    margin-bottom: 18px;
}

.apply-points {
    list-style: none;
    margin-top: 30px;
}

.apply-points li {
    font-size: 14px;
    color: var(--soft);
    padding: 11px 0;
    border-bottom: 1px solid var(--border-2);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.6;
    font-weight: 300;
}

.apply-points li::before {
    content: '→';
    font-family: var(--mono);
    font-size: 11px;
    color: var(--cyan);
    flex-shrink: 0;
    margin-top: 3px;
}

.apply-card {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 40px 38px 44px;
}

.form-field {
    margin-bottom: 22px;
}

.form-field label {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--soft);
    margin-bottom: 9px;
}

.form-field label .req {
    color: var(--blue-lt);
}

.form-field input,
.form-field select {
    width: 100%;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 13px 15px;
    color: var(--white);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 300;
    outline: none;
    transition: border-color .2s;
}

.form-field input::placeholder {
    color: var(--faint);
}

.form-field input:focus,
.form-field select:focus {
    border-color: var(--blue);
}

.form-field select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236E7CA3' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 38px;
}

.form-field select option {
    background: var(--bg-3);
    color: var(--white);
}

.form-submit {
    width: 100%;
    padding: 15px;
    background: var(--blue);
    color: #fff;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 12px 40px -14px var(--blue);
    transition: transform .2s, box-shadow .2s, background .2s;
}

.form-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 46px -12px var(--blue);
}

.form-submit:disabled {
    opacity: .7;
    cursor: default;
    transform: none;
}

.form-note {
    font-size: 12px;
    color: var(--mid);
    text-align: center;
    margin-top: 14px;
    font-weight: 300;
}

.form-error {
    display: none;
    font-family: var(--mono);
    font-size: 12px;
    color: #E0708A;
    text-align: center;
    margin-top: 12px;
    letter-spacing: .02em;
}

.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 900px) {
    .apply-wrap {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

/* ── Language toggle ── */
.nav-links a.nav-lang {
    color: var(--cyan);
    border: 1px solid var(--cyan-dim);
    padding: 7px 12px;
    border-radius: 4px;
    font-weight: 600;
    transition: background .2s, color .2s;
}

.nav-links a.nav-lang:hover {
    background: var(--cyan-dim);
    color: var(--bg);
}

.drawer-link.drawer-lang {
    color: var(--cyan);
}