/* GradStack public site: home page, program pages, Practice Lab shell. Needs tokens.css. */
/* Layout: split hero with a live code editor, then alternating plain / tinted bands of card grids. */
body { background: var(--gs-bg); color: var(--gs-ink); font-family: var(--font-body); overflow-x: hidden; }
h1, h2, h3, h4, h5, .navbar-brand, .price, .stat-num { font-family: var(--font-display); text-wrap: balance; letter-spacing: -.015em; }
.text-muted-gs { color: var(--gs-muted) !important; }
.section { padding-block: 5rem; }
.bg-soft { background: var(--gs-soft); }
.eyebrow { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--gs-primary-text); }
.measure { max-width: 62ch; }

.btn-primary { --bs-btn-bg: var(--gs-primary); --bs-btn-border-color: var(--gs-primary); --bs-btn-hover-bg: var(--gs-primary-ink); --bs-btn-hover-border-color: var(--gs-primary-ink); --bs-btn-active-bg: var(--gs-primary-ink); --bs-btn-active-border-color: var(--gs-primary-ink); }
.btn-outline-primary { --bs-btn-color: var(--gs-primary-text); --bs-btn-border-color: var(--gs-primary-text); --bs-btn-hover-bg: var(--gs-primary); --bs-btn-hover-border-color: var(--gs-primary); --bs-btn-active-bg: var(--gs-primary); }
.btn-accent { background: var(--gs-accent); color: var(--gs-accent-ink); font-weight: 700; border: 0; }
.btn-accent:hover, .btn-accent:focus-visible { background: #f08c00; color: var(--gs-accent-ink); }
:focus-visible { outline: 3px solid var(--gs-accent); outline-offset: 2px; }

/* Navbar */
.navbar { background: var(--gs-nav); backdrop-filter: blur(10px); padding-top: calc(.6rem + env(safe-area-inset-top, 0px)); transition: box-shadow .2s; }
.navbar.scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .10); }
.brand-mark { color: #000; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: .95rem; }
.brand-accent { color: var(--gs-accent); }

/* Hero */
.hero { padding: 8rem 0 4rem; border-bottom: 1px solid var(--gs-line); }
.hero h1 { font-weight: 800; font-size: clamp(2.2rem, 5.2vw, 3.9rem); line-height: 1.04; }
.hero-hl { color: var(--gs-primary-text); }
.hero .lead { color: var(--gs-muted); }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; background: var(--gs-soft); border: 1px solid var(--gs-line); color: var(--gs-ink); font-size: .85rem; font-weight: 500; }

.editor { background: var(--code-bg); color: var(--code-fg); border-radius: 1rem; overflow: hidden; box-shadow: var(--gs-shadow); border: 1px solid var(--gs-line); min-width: 0; }
.editor-bar { background: var(--code-bar); display: flex; align-items: center; gap: .25rem; padding: .5rem .6rem 0; overflow-x: auto; }
.editor-tab { border: 0; background: transparent; color: var(--code-dim); font-family: var(--font-mono); font-size: .8rem; padding: .55rem .9rem; border-radius: .5rem .5rem 0 0; white-space: nowrap; }
.editor-tab:hover { color: var(--code-fg); }
.editor-tab.active { background: var(--code-bg); color: var(--code-fg); }
.editor-tab .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .45rem; }
.editor pre { margin: 0; padding: 1.1rem 1.2rem; font-family: var(--font-mono); font-size: .84rem; line-height: 1.65; min-height: 285px; overflow-x: auto; color: var(--code-fg); }
.editor .k { color: var(--code-kw); } .editor .s { color: var(--code-str); } .editor .f { color: var(--code-fn); } .editor .n { color: var(--code-num); } .editor .c { color: var(--code-dim); font-style: italic; }
.caret { display: inline-block; width: .55em; height: 1.05em; background: var(--gs-accent); vertical-align: text-bottom; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.editor-foot { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: .7rem 1.2rem; border-top: 1px solid rgba(255, 255, 255, .08); font-family: var(--font-mono); font-size: .75rem; color: var(--code-dim); }
.editor-foot b { color: var(--code-fg); font-weight: 600; }

/* Stats */
.stat-num { font-size: 2.3rem; font-weight: 800; color: var(--gs-primary-text); font-variant-numeric: tabular-nums; }
.placeholder-note { font-size: .75rem; border: 1px dashed var(--gs-line); border-radius: .5rem; padding: .25rem .6rem; display: inline-block; color: var(--gs-muted); }

/* Courses */
.filter-btn { background: var(--gs-bg); color: var(--gs-ink); border: 1px solid var(--gs-line); }
.filter-btn:hover { border-color: var(--gs-primary-text); color: var(--gs-ink); background: var(--gs-bg); }
.filter-btn.active { background: var(--gs-primary); border-color: var(--gs-primary); color: #fff; }
.course-card { background: var(--gs-bg); border: 1px solid var(--gs-line); border-radius: 1rem; height: 100%; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.course-card:hover { transform: translateY(-4px); box-shadow: var(--gs-shadow); }
.course-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem; background: var(--gs-soft); color: var(--track, var(--gs-primary-text)); }
.track-tag { font-family: var(--font-mono); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--track, var(--gs-primary-text)); }
.t-fullstack { --track: var(--gs-primary-text); } .t-aiml { --track: var(--gs-mint); } .t-frontend { --track: var(--gs-rose); }
.tech { font-family: var(--font-mono); font-size: .72rem; padding: .15rem .5rem; border-radius: .35rem; background: var(--gs-soft); color: var(--gs-muted); }

.feature { border: 1px solid var(--gs-line); border-radius: 1rem; padding: 1.5rem; height: 100%; background: var(--gs-bg); }
.feature i { font-size: 1.7rem; color: var(--gs-primary-text); }

/* Roadmap */
.step { position: relative; padding-left: 4rem; }
.step-num { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--gs-primary); color: #fff; font-family: var(--font-mono); font-weight: 600; display: grid; place-items: center; }
.step:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 48px; bottom: -20px; width: 2px; background: var(--gs-line); }
.step .when { font-family: var(--font-mono); font-size: .75rem; color: var(--gs-muted); }

/* Planner */
.planner { border: 1px solid var(--gs-line); border-radius: 1rem; background: var(--gs-bg); }
.plan-result { background: var(--gs-primary); color: #fff; border-radius: 1rem; }
.plan-result .big { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.form-range::-webkit-slider-thumb { background: var(--gs-primary); }
.form-range::-moz-range-thumb { background: var(--gs-primary); }
.seg .btn { --bs-btn-color: var(--gs-ink); --bs-btn-border-color: var(--gs-line); --bs-btn-hover-color: var(--gs-ink); --bs-btn-hover-border-color: var(--gs-primary-text); }
.seg .btn-check:checked + .btn { background: var(--gs-primary); border-color: var(--gs-primary); color: #fff; }

/* TIOBE */
.tiobe-box { background: var(--gs-bg); border: 1px solid var(--gs-line); border-radius: 1rem; height: 100%; min-width: 0; }
.tiobe-wrap { overflow-x: auto; }
.tiobe-table { margin: 0; font-size: .9rem; --bs-table-bg: transparent; --bs-table-color: var(--gs-ink); --bs-table-border-color: var(--gs-line); }
.tiobe-table th, .tiobe-table td { padding: .6rem .75rem; white-space: nowrap; vertical-align: middle; }
.tiobe-table thead th { font-family: var(--font-mono); font-size: .75rem; font-weight: 600; color: var(--gs-muted); text-align: right; }
.tiobe-table thead th:first-child { text-align: left; }
.tiobe-table td.rk { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--gs-muted); }
.tiobe-table td.rk.top { color: var(--gs-ink); font-weight: 600; }
.tiobe-table td.rk.first { color: var(--gs-primary-text); font-weight: 600; }
.tiobe-table tr.taught th { color: var(--gs-primary-text); }
.tiobe-table tbody th { font-weight: 600; }
.taught-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gs-accent); margin-right: .45rem; }
.hof { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.hof-item { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .45rem .7rem; border: 1px solid var(--gs-line); border-radius: .6rem; font-size: .88rem; }
.hof-item .yr { font-family: var(--font-mono); font-size: .75rem; color: var(--gs-muted); }
.hof-item.taught { border-color: var(--gs-accent); font-weight: 700; }

/* Pricing */
.price-card { border-radius: 1.25rem; border: 1px solid var(--gs-line); height: 100%; background: var(--gs-bg); display: flex; flex-direction: column; }
.price-card.featured { border: 2px solid var(--gs-primary-text); box-shadow: var(--gs-shadow); }
.price { font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.price small { font-family: var(--font-body); font-size: .9rem; font-weight: 500; color: var(--gs-muted); letter-spacing: 0; }
.tick { color: var(--gs-mint); }

.mentor-avatar { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 1.3rem; font-weight: 600; color: #fff; background: var(--gs-primary); margin: 0 auto; }
.quote-mark { font-size: 3rem; line-height: 1; color: var(--gs-accent); }

.accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--gs-line); --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--gs-primary-text); --bs-accordion-btn-focus-box-shadow: none; }
.enquiry { background: var(--gs-bg); border: 1px solid var(--gs-line); border-radius: 1.25rem; }
.contact-line { user-select: all; }

footer { background: #0d1326; color: rgba(255, 255, 255, .72); padding-bottom: env(safe-area-inset-bottom, 0px); }
footer h6 { color: #fff; font-family: var(--font-body); font-weight: 700; }
footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }
#backTop { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 1030; }

@media (max-width: 575.98px) { .hero { padding-top: 7rem; } .section { padding-block: 3.5rem; } .editor pre { font-size: .76rem; min-height: 260px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* wide gutters would push rows past the phone viewport */
@media (max-width: 575.98px) { .row.g-5 { --bs-gutter-x: 1.5rem; } }

/* ===== Course pages ===== */
.course-hero { padding: 7.5rem 0 3.5rem; border-bottom: 1px solid var(--gs-line); }
.course-hero h1 { font-weight: 800; font-size: clamp(2rem, 4.6vw, 3.3rem); line-height: 1.06; }
.crumb { font-family: var(--font-mono); font-size: .78rem; color: var(--gs-muted); }
.crumb a { color: var(--gs-muted); }
.crumb .here { color: var(--track, var(--gs-primary-text)); font-weight: 600; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; }
.fact { border: 1px solid var(--gs-line); border-radius: .75rem; padding: .75rem .9rem; background: var(--gs-bg); }
.fact .lbl { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gs-muted); }
.fact .val { font-weight: 700; }
.outcomes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .9rem 2rem; }
.outcomes li { display: flex; gap: .6rem; }
.outcomes i { color: var(--gs-mint); }
.syllabus .accordion-item { border: 1px solid var(--gs-line); border-radius: .9rem !important; margin-bottom: .75rem; overflow: hidden; background: var(--gs-bg); }
.syllabus .accordion-button { background: transparent; gap: .9rem; font-weight: 700; color: var(--gs-ink); }
.syllabus .accordion-button:not(.collapsed) { color: var(--gs-ink); box-shadow: none; }
.wk { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; padding: .2rem .55rem; border-radius: .4rem; background: var(--gs-soft); color: var(--track, var(--gs-primary-text)); white-space: nowrap; }
.syllabus ul { margin: 0; padding-left: 1.1rem; color: var(--gs-muted); display: grid; gap: .3rem; }
.project-card { border: 1px solid var(--gs-line); border-radius: 1rem; padding: 1.5rem; height: 100%; background: var(--gs-bg); }
.project-card .no { font-family: var(--font-mono); font-size: .75rem; color: var(--track, var(--gs-primary-text)); font-weight: 600; }
.fit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.fit-list li { display: flex; gap: .6rem; }
.role { display: inline-block; padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--gs-line); background: var(--gs-bg); font-weight: 600; font-size: .9rem; }
.fee-card { border: 2px solid var(--track, var(--gs-primary-text)); border-radius: 1.25rem; background: var(--gs-bg); box-shadow: var(--gs-shadow); }