@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
    --ink: #17212b;
    --muted: #64717e;
    --paper: #f7f9fc;
    --line: #e2e8ef;
    --blue: #2563eb;
    --cyan: #20c6c9;
    --purple: #805ad5;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Space Grotesk", sans-serif; }
a { color: inherit; text-decoration: none; }
.container { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.site-header { background: rgba(247, 249, 252, .9); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(14px); }
.nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; font-weight: 700; }
.logo-mark { color: var(--blue); font-family: "DM Mono", monospace; font-size: 1.4rem; }
.logo-accent { color: var(--blue); }
.nav-links { display: flex; align-items: center; gap: 32px; color: var(--muted); font-size: .9rem; font-weight: 500; }
.nav-links a:hover { color: var(--blue); }
.nav-button { color: #fff !important; background: var(--ink); border-radius: 8px; padding: 11px 18px; }
.menu-toggle { display: none; border: 0; background: transparent; padding: 8px; }
.menu-toggle span:not(.sr-only) { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.hero { min-height: 550px; display: flex; align-items: center; justify-content: space-between; gap: 64px; padding: 84px 0 96px; }
.hero-content { max-width: 590px; }
.eyebrow { color: var(--blue); font: 500 .72rem "DM Mono", monospace; letter-spacing: .15em; margin: 0 0 18px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(3rem, 6vw, 5.3rem); line-height: .98; letter-spacing: -.07em; margin-bottom: 28px; }
h1 span { color: var(--blue); }
.hero-text { max-width: 490px; color: var(--muted); font-size: 1.08rem; line-height: 1.7; margin-bottom: 34px; }
.hero-actions { display: flex; gap: 14px; align-items: center; }
.button { display: inline-flex; align-items: center; gap: 12px; border-radius: 7px; padding: 14px 21px; font-weight: 600; font-size: .9rem; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); color: #fff; background: var(--blue); box-shadow: 0 7px 18px rgba(23, 33, 43, .14); }
.button-primary { border: 1px solid var(--line); background: #fff; }
.button-secondary { border: 1px solid var(--line); background: #fff; }
.code-card { width: min(430px, 100%); padding: 0 26px 28px; border-radius: 12px; background: #192733; box-shadow: 20px 25px 55px rgba(31, 48, 66, .2); transform: rotate(2deg); }
.window-bar { display: flex; align-items: center; gap: 7px; height: 48px; border-bottom: 1px solid #304252; margin: 0 -26px 22px; padding: 0 20px; }
.window-bar span { width: 9px; height: 9px; border-radius: 50%; background: #f16d73; }
.window-bar span:nth-child(2) { background: #f5c65d; }.window-bar span:nth-child(3) { background: #58d39b; }
.window-bar small { margin-left: auto; color: #8495a5; font: .72rem "DM Mono", monospace; }
pre { margin: 0; color: #9fb0bf; font: .9rem/2 "DM Mono", monospace; }.code-card b { color: #5fe1d0; font-weight: 400; }.code-card i { color: #9f9ff5; font-style: normal; }.code-card em { color: #f4c66b; font-style: normal; }
.section { padding: 92px 0; }.courses { border-top: 1px solid var(--line); }.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 38px; gap: 30px; }.section-heading > p { max-width: 330px; color: var(--muted); line-height: 1.6; margin-bottom: 0; }
h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.05em; margin-bottom: 0; }.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.course-card { position: relative; overflow: hidden; min-height: 300px; padding: 28px; border: 1px solid var(--line); border-radius: 10px; background: #fff; transition: transform .2s, box-shadow .2s; }.course-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(28, 52, 75, .1); }.card-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; font: 500 1.1rem "DM Mono", monospace; margin-bottom: 34px; }.html-card .card-icon { color: #e85d3f; background: #fff0ec; }.css-card .card-icon { color: var(--purple); background: #f0ebff; }.js-card .card-icon { color: #977300; background: #fff7d8; font-size: .85rem; }.card-number { position: absolute; top: 30px; right: 28px; color: #b0bbc5; font: .75rem "DM Mono", monospace; }.course-card h3 { font-size: 1.5rem; margin-bottom: 11px; }.course-card p { color: var(--muted); font-size: .9rem; line-height: 1.6; margin-bottom: 24px; }.learn-link { font-size: .82rem; font-weight: 600; }.learn-link b { color: var(--blue); margin-left: 6px; }
.path { color: #fff; background: var(--ink); }.path-inner { display: flex; justify-content: space-between; align-items: center; gap: 70px; }.path .eyebrow { color: var(--cyan); }.path h2 { margin-bottom: 16px; }.path p:not(.eyebrow) { color: #aebbc7; line-height: 1.6; max-width: 390px; margin-bottom: 0; }.steps { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; counter-reset: steps; }.steps li { counter-increment: steps; min-width: 150px; padding-left: 17px; border-left: 1px solid #526373; }.steps li::before { content: "0" counter(steps); display: block; color: var(--cyan); font: .72rem "DM Mono", monospace; margin-bottom: 25px; }.steps strong, .steps span { display: block; }.steps strong { margin-bottom: 8px; }.steps span { color: #aebbc7; font-size: .8rem; line-height: 1.4; }.start { text-align: center; }.start .eyebrow { margin-bottom: 17px; }.start h2 { margin-bottom: 28px; }.footer { padding: 24px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }.footer .container { display: flex; justify-content: space-between; }
@media (max-width: 760px) { .container { width: min(100% - 32px, 550px); }.nav { min-height: 65px; }.menu-toggle { display: block; }.nav-links { display: none; position: absolute; top: 65px; right: 16px; left: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 25px rgba(23, 33, 43, .1); flex-direction: column; align-items: stretch; gap: 18px; }.nav-links.is-open { display: flex; }.nav-button { text-align: center; }.hero { display: block; padding: 65px 0 78px; }.hero h1 { font-size: 3.4rem; }.hero-text { font-size: 1rem; }.hero-actions { flex-wrap: wrap; }.code-card { margin: 55px auto 0; transform: none; }.section { padding: 70px 0; }.section-heading, .path-inner { display: block; }.section-heading > p { margin-top: 18px; }.course-grid { grid-template-columns: 1fr; }.course-card { min-height: 260px; }.steps { flex-direction: column; gap: 22px; margin-top: 40px; }.steps li { min-height: 54px; }.steps li::before { margin-bottom: 7px; }.footer .container { display: block; }.footer .container span:last-child { display: block; margin-top: 10px; } }