.eyebrow, .feature-tag, .theme-tag, .theme-index, .theme-line, .window-title, .window-status, .hero-trust, .map-item small, .map-output span, .signal-item {
  font-family: var(--mono);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--accent);
  font-size: var(--text-ui);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--peach) 45%, transparent);
}

/* The headline carries the hero, so the copy column is the wider of the two.
   The h1 sizes against this column's inline size, not the viewport, so the
   authored line breaks hold at every width instead of reflowing raggedly. */
.hero {
  min-height: 660px;
  padding-top: 150px;
  padding-bottom: 105px;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 54px;
  align-items: center;
}

.hero-copy { container-type: inline-size; }

.hero h1 {
  margin: 26px 0;
  font-size: clamp(40px, 9.7cqi, 62px);
}
.hero-lede { max-width: 430px; margin-bottom: 0; font-size: 16px; line-height: 1.7; color: var(--ink-muted); }

.heritage-note {
  display: flex;
  align-items: baseline;
  gap: 12px;
  max-width: 470px;
  margin-top: 23px;
  padding-left: 12px;
  border-left: 1px solid var(--accent);
  font: var(--text-ui)/1.6 var(--mono);
  color: var(--ink-muted);
}

.heritage-note__label { color: var(--accent); font-size: var(--text-ui); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.hero-ctas { display: flex; align-items: center; gap: 27px; margin-top: 34px; }

.hero-trust {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 69px;
  font-size: var(--text-ui);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.trust-line { width: 24px; height: 1px; background: var(--ink); opacity: 0.5; }
.trust-line--short { width: 10px; margin-left: 6px; }

.hero-visual { --glow-opacity: 0.72; position: relative; min-height: 460px; display: grid; place-items: center; }
[data-theme="dark"] .hero-visual { --glow-opacity: 0.26; }

.hero-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: var(--lemon);
  filter: blur(1px);
  opacity: var(--glow-opacity);
}

.hero-orbit { position: absolute; border: 1px solid var(--border); border-radius: 50%; transform: rotate(-25deg); }
.hero-orbit--one { width: 485px; height: 200px; }
.hero-orbit--two { width: 530px; height: 285px; transform: rotate(40deg); border-color: color-mix(in srgb, var(--peach) 55%, transparent); }
.hero-orbit--three { width: 300px; height: 540px; transform: rotate(55deg); }

.hero-code-card {
  position: relative;
  z-index: 2;
  width: min(100%, 510px);
  overflow: hidden;
  border: 1px solid var(--code-line);
  border-radius: 7px;
  background: var(--code-bg);
  color: var(--code-fg);
  box-shadow: var(--shadow);
  transform: rotate(-3.2deg);
  transition: transform 0.6s var(--ease), box-shadow 0.4s ease;
}

.hero-code-card:hover { transform: rotate(0) translateY(-8px); }

.window-bar { min-height: 46px; display: flex; align-items: center; gap: 15px; padding: 9px 17px; border-bottom: 1px solid var(--code-line); }
.window-dots { display: flex; gap: 5px; }
.window-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--peach); opacity: 0.75; }
.window-dots span:nth-child(2) { background: var(--lemon); }
.window-dots span:nth-child(3) { background: var(--code-fg); opacity: 0.42; }
.window-title { font-size: var(--text-ui); color: color-mix(in srgb, var(--code-fg) 82%, transparent); }
.window-status { display: flex; align-items: center; gap: 5px; margin-left: auto; font-size: var(--text-micro); color: color-mix(in srgb, var(--code-fg) 80%, transparent); }
.window-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--peach); }

.code-content { padding: 27px 28px 22px; color: var(--code-fg); font: 11px/2.15 var(--mono); }
.code-line { display: flex; white-space: nowrap; }
.line-number { width: 30px; color: color-mix(in srgb, var(--code-fg) 42%, transparent); user-select: none; }
.indent { padding-left: 19px; }
.double { padding-left: 38px; }
.code-line--blank { height: 10px; }
.code-keyword, .code-type, .code-number { color: var(--peach); font-weight: 500; }
.code-function { color: var(--code-fg); }

.code-result { padding: 15px 28px 17px; border-top: 1px solid var(--code-line); font: 11px/1.9 var(--mono); }
.code-result small { font-size: 10px; color: color-mix(in srgb, var(--code-fg) 78%, transparent); }
.result-prompt { margin-right: 8px; color: var(--peach); }
.result-caret { margin-right: 8px; color: var(--code-fg); }

.floating-badge {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px 10px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--paper);
  box-shadow: var(--shadow);
  font-size: var(--text-ui-lg);
  transform: rotate(3deg);
}

.floating-badge--top { top: 64px; right: 0; }
.floating-badge--bottom { bottom: 38px; left: 4px; transform: rotate(-4deg); }
.floating-badge b, .floating-badge small { display: block; }
.floating-badge small { margin-top: 3px; font: var(--text-micro)/1.3 var(--mono); color: var(--ink-muted); }
.badge-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--lemon); color: var(--on-accent); }
.badge-icon svg { width: 15px; height: 15px; }
.badge-icon--warm { background: var(--peach); }

.signal-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
.signal-grid { display: grid; grid-template-columns: repeat(3, 1fr) 1.2fr; }

.signal-item {
  min-height: 76px;
  padding: 18px 25px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-right: 1px solid var(--border);
  font-size: var(--text-ui);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}

/* The first and last cells align to the page gutter, but the strip's own rules
   are full-bleed, so they still need vertical inset to clear the border. */
.signal-item:first-child { padding-left: 0; }
.signal-item:last-child { justify-content: flex-end; padding-right: 0; border-right: 0; }
.signal-item strong { font-size: var(--text-ui); color: var(--ink-faint); }
.signal-item--accent { color: var(--accent); opacity: 1; }
.signal-arrow { margin-left: 10px; font-size: 15px; }

.section { padding-top: 160px; padding-bottom: 150px; }
/* The h2 carries this section, so it gets the widest track; the kicker and
   the description support it. */
.section-intro { display: grid; grid-template-columns: 0.62fr 1.6fr 1fr; gap: 55px; align-items: end; margin-bottom: 70px; }
.section-intro .section-kicker { align-self: start; }
.section-intro h2 { grid-column: 2; }
.section-intro .section-description { grid-column: 3; }
.section-description { margin-bottom: 2px; font-size: 14px; line-height: 1.7; color: var(--ink-muted); }

.feature-grid { display: grid; grid-template-columns: 1.25fr 0.875fr 0.875fr; gap: 13px; }

.feature-card {
  min-height: 490px;
  padding: 25px 25px 27px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: transform 0.4s var(--ease), border-color 0.3s ease, background 0.3s ease;
}

.feature-card:hover { transform: translateY(-7px); border-color: var(--border-strong); background: var(--surface-solid); }
.feature-card--large { background: var(--lemon); color: var(--on-accent); }
.feature-card--large:hover { background: var(--lemon); }

.feature-topline { display: flex; align-items: center; justify-content: space-between; }
.feature-index { font: var(--text-ui)/1 var(--mono); color: var(--ink-muted); }
.feature-tag { font-size: var(--text-ui); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
.feature-graphic { position: relative; height: 175px; margin: 30px 0 29px; display: grid; place-items: center; }
.feature-card h3 { font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 15px; }
.feature-card p { max-width: 34ch; font-size: 14px; line-height: 1.65; color: var(--ink-muted); }
.card-link { width: max-content; margin-top: auto; }

/* The accent-coloured cards carry their own text tint, since --ink-muted is
   built for the paper background and would vanish on lemon or peach. */
.feature-card.feature-card--large p,
.feature-card.feature-card--large .feature-index,
.feature-card.feature-card--large .feature-tag { color: var(--on-accent-muted); }

.type-graphic { display: flex; align-items: center; justify-content: center; }
.type-node { padding: 12px 13px; border: 1px solid var(--border-strong); background: var(--paper); color: var(--ink); font: var(--text-ui)/1.3 var(--mono); }
.type-node--source { transform: rotate(-5deg); opacity: 0.62; }
.type-node--verified { background: var(--code-bg); color: var(--code-fg); transform: rotate(4deg); box-shadow: 7px 7px 0 var(--peach); }
.type-node--verified span { margin-right: 5px; color: var(--peach); }
.type-connector { width: 25px; border-top: 1px dashed var(--on-accent); opacity: 0.55; }
.type-connector--short { width: 17px; }
.type-chip { position: absolute; right: 15px; bottom: 19px; padding: 7px 9px; border: 1px solid var(--border); background: var(--paper); color: var(--ink); font: var(--text-micro)/1.3 var(--mono); transform: rotate(-3deg); }

.speed-graphic { overflow: hidden; }
.speed-line { position: absolute; width: 200px; right: 8px; border-top: 1px solid var(--peach-deep); transform: rotate(-23deg); opacity: 0.5; }
.speed-line--one { top: 53px; }
.speed-line--two { top: 90px; width: 270px; right: -7px; opacity: 0.35; }
.speed-line--three { top: 123px; width: 160px; right: 30px; opacity: 0.22; }
.speed-core { position: relative; width: 112px; height: 112px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--peach); color: var(--on-accent); font: 25px var(--mono); box-shadow: 9px 9px 0 var(--shadow-hard); }
.speed-core small { margin: 9px 0 0 3px; font-size: var(--text-ui); }

.layers-graphic { align-items: center; }
.layer { position: absolute; width: 155px; height: 50px; padding: 15px; border: 1px solid var(--border-strong); font: 11px var(--mono); }
.layer--back { background: var(--surface-solid); color: var(--ink); transform: translate(-17px, -27px) rotate(-9deg); opacity: 0.6; }
.layer--middle { background: var(--lemon); color: var(--on-accent); transform: rotate(2deg); }
.layer--front { background: var(--peach); color: var(--on-accent); transform: translate(17px, 27px) rotate(9deg); }

.architecture-section { padding: 145px 0 155px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--paper); }
.architecture-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 100px; align-items: center; }
.architecture-copy h2 { max-width: 400px; }
.architecture-copy > p:not(.section-kicker) { max-width: 40ch; margin-top: 28px; font-size: 14px; line-height: 1.7; color: var(--ink-muted); }

/* The map sits on a quiet surface so the block reads as a panel rather than
   four rows floating on the page — in dark mode the rows alone vanished. The
   section itself drops to the page colour so the panel stays the lighter of
   the two, which keeps the row meta text inside AA on the raised surface. */
.architecture-map { position: relative; padding: 26px 28px 20px 42px; border: 1px solid var(--border); background: var(--surface-solid); }
.map-line--vertical { position: absolute; top: 57px; bottom: 123px; left: 23px; border-left: 1px dashed var(--border-strong); }
.map-item { position: relative; min-height: 78px; padding: 14px 0; display: grid; grid-template-columns: 28px 40px 1fr 30px; align-items: center; gap: 13px; border-bottom: 1px solid var(--border-strong); }
.map-number { font: var(--text-ui)/1 var(--mono); color: var(--ink); }
.map-icon { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid var(--border-strong); background: var(--paper); font: var(--text-micro)/1 var(--mono); }
.map-item strong { display: block; font-size: 14px; letter-spacing: -0.015em; }
.map-item small { display: block; margin-top: 4px; font-size: var(--text-ui); color: var(--ink-muted); }
.map-arrow { color: var(--accent); font-size: 17px; text-align: right; }
.map-arrow--last { color: var(--ink); }
.map-item--cpp .map-icon { background: var(--lemon); color: var(--on-accent); }
.map-item--asm .map-icon { background: var(--peach); color: var(--on-accent); border-color: var(--border-strong); }
.map-output { display: flex; align-items: center; gap: 11px; margin-top: 24px; font: var(--text-ui)/1.4 var(--mono); }
.map-output span { color: var(--accent); font-size: var(--text-ui); text-transform: uppercase; }
.map-output strong { font-weight: 400; }
.output-pulse { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--peach) 45%, transparent); }

.quickstart-section { padding-top: 150px; padding-bottom: 150px; }
.quickstart-card { display: grid; grid-template-columns: 0.75fr 1.25fr; align-items: center; gap: 70px; padding: 63px; background: var(--lemon); color: var(--on-accent); }
/* On the light accent surfaces the themed accent would go light-on-light, so
   emphasis reverts to the fixed brand peach. */
.quickstart-card .section-kicker { color: var(--peach-deep); }
.quickstart-card h2 em, .feature-card--large h3 em, .case-card--feature :is(h2, h3) em { color: var(--peach-deep); }
.quickstart-copy h2 { font-size: clamp(38px, 4.4vw, 56px); }
.quickstart-copy > p:not(.section-kicker) { max-width: 34ch; margin: 26px 0; font-size: 15px; line-height: 1.7; color: var(--on-accent-muted); }

.terminal { overflow: hidden; border-radius: 5px; background: var(--code-bg); color: var(--code-fg); box-shadow: 13px 13px 0 var(--peach); }
.terminal-bar { min-height: 46px; display: flex; align-items: center; gap: 9px; padding: 9px 17px; border-bottom: 1px solid var(--code-line); font: var(--text-ui)/1 var(--mono); opacity: 0.88; }
.terminal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--peach); }
.copy-button { margin-left: auto; padding: 5px 7px; border: 0; border-radius: 3px; background: transparent; color: var(--code-fg); font: var(--text-ui)/1 var(--mono); color: color-mix(in srgb, var(--code-fg) 80%, transparent); }
.copy-button:hover { opacity: 1; }
.terminal-body { padding: 25px 28px 29px; overflow-x: auto; font: 10px/2.15 var(--mono); white-space: nowrap; }
.terminal-prompt, .output-check { margin-right: 8px; color: var(--peach); }
.terminal-output { padding-left: 16px; color: color-mix(in srgb, var(--code-fg) 82%, transparent); }
.terminal-result { margin-top: 5px; padding-left: 16px; color: var(--peach); }
.terminal-result strong { color: var(--code-fg); }

.themes-section { padding-top: 155px; padding-bottom: 145px; }
.themes-header { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 70px; }
.themes-header > p { max-width: 40ch; margin-bottom: 3px; font-size: 14px; line-height: 1.7; color: var(--ink-muted); }
.themes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }

.theme-card {
  min-height: 430px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: transform 0.4s var(--ease), border-color 0.3s ease, background 0.3s ease;
}

.theme-card:hover { transform: translateY(-7px); border-color: var(--border-strong); background: var(--surface-solid); }
.theme-card--feature { border-color: transparent; background: var(--peach); color: var(--on-accent); }
.theme-card--feature:hover { border-color: transparent; background: var(--peach); }
.theme-topline { display: flex; align-items: center; justify-content: space-between; }
.theme-index { font-size: var(--text-ui); color: var(--ink-muted); }
.theme-tag { font-size: var(--text-ui); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
.theme-card h3 { margin: 34px 0 22px; font-size: 27px; line-height: 1.06; letter-spacing: -0.025em; }

/* The manifest reads as a spec sheet: a label on the left, the verdict on the
   right. It is the one place on the page where a value rather than a sentence
   carries the argument, so the rules are drawn at full strength. */
.theme-manifest { border-top: 1px solid var(--border-strong); }
.theme-line {
  min-height: 41px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  font: var(--text-ui-lg)/1.3 var(--mono);
}

.theme-line span { color: var(--ink-muted); }
.theme-line b { font-weight: 400; letter-spacing: 0.01em; }
.theme-no { color: color-mix(in srgb, var(--ink-faint) 62%, transparent); }
.theme-yes { color: var(--accent); }
.theme-card p { max-width: 44ch; margin: auto 0 0; padding-top: 26px; font-size: 13px; line-height: 1.65; color: var(--ink-muted); }

/* The peach cards carry their own text tint: --ink-muted is built for the paper
   background and would vanish on the accent surface. */
.theme-card--feature p,
.theme-card--feature .theme-index,
.theme-card--feature .theme-tag,
.theme-card--feature .theme-line span { color: var(--on-accent-muted); }

.theme-card--feature .theme-manifest { border-top-color: var(--border-on-accent); }
.theme-card--feature .theme-line { border-bottom-color: color-mix(in srgb, var(--on-accent) 16%, transparent); }
.theme-card--feature .theme-no { color: color-mix(in srgb, var(--on-accent) 42%, transparent); }
.theme-card--feature .theme-yes { color: var(--peach-deep); }

.contributors-section { padding: 145px 0 150px; border-top: 1px solid var(--border); }
.contributors-header { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 58px; }
.contributors-header > p { max-width: 42ch; margin-bottom: 3px; font-size: 14px; line-height: 1.7; color: var(--ink-muted); }

.contributors-panel { border: 1px solid var(--border); background: var(--surface-solid); }
.contributors-bar { min-height: 62px; padding: 13px 22px; display: flex; align-items: center; gap: 15px; border-bottom: 1px solid var(--border); }
.contributors-repo { display: inline-flex; align-items: center; gap: 10px; font: var(--text-ui-lg)/1.4 var(--mono); letter-spacing: -0.005em; }
.contributors-repo svg { width: 15px; height: 15px; flex: none; fill: currentColor; }
.contributors-count { padding: 3px 8px; border: 1px solid var(--border-strong); border-radius: 3px; font: var(--text-ui)/1.5 var(--mono); color: var(--accent); white-space: nowrap; }
.contributors-link { margin-left: auto; font: var(--text-ui-lg)/1.4 var(--mono); color: var(--ink-muted); transition: color 0.25s ease; }
.contributors-link:hover { color: var(--accent); }
.contributors-link span { margin-left: 8px; font-size: 13px; }

.contributors-list { margin: 0; padding: 24px 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 13px; list-style: none; }
/* Empty until the script fills it, so a visitor without JS sees the status line
   instead of a bordered void where the list should be. */
.contributors-list:empty { display: none; }

.contributor-link {
  height: 100%;
  padding: 16px 13px 14px;
  display: block;
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
  transition: transform 0.35s var(--ease), border-color 0.3s ease, background 0.3s ease;
}

.contributor-link:hover { transform: translateY(-6px); border-color: var(--border-strong); background: var(--paper); }

/* The initials sit behind the avatar rather than replacing it: if the image
   fails to load the tile still identifies the person instead of going blank. */
.contributor-avatar { position: relative; width: 62px; height: 62px; margin: 0 auto 13px; display: grid; place-items: center; border-radius: 50%; background: var(--peach); color: var(--on-accent); overflow: hidden; font: 500 19px var(--mono); letter-spacing: -0.02em; }
.contributor-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contributor-login { display: block; font: var(--text-ui-lg)/1.3 var(--mono); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.contributor-meta { display: block; margin-top: 5px; font: var(--text-micro)/1.4 var(--mono); color: var(--ink-muted); }
.contributor--more .contributor-link { display: flex; align-items: center; justify-content: center; min-height: 152px; border-style: dashed; color: var(--accent); }

.contributor-slot {
  height: 100%;
  min-height: 152px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 16px 13px;
  border: 1px solid var(--border);
  background: var(--surface);
  animation: contributor-pulse 1.6s ease-in-out infinite;
}

.contributor-slot i { display: block; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.contributor-slot i:first-child { width: 62px; height: 62px; border-radius: 50%; }
.contributor-slot i:last-child { width: 46px; height: 8px; }

@keyframes contributor-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.contributors-status { padding: 14px 22px; border-top: 1px solid var(--border); font: var(--text-ui)/1.6 var(--mono); color: var(--ink-faint); }
.contributors-retry { padding: 3px 7px; margin-left: 2px; border: 1px solid var(--border-strong); border-radius: 3px; font: var(--text-ui)/1.4 var(--mono); color: var(--accent); transition: background 0.25s ease, border-color 0.25s ease; }
.contributors-retry:hover { background: var(--lemon); border-color: var(--on-accent); }

.closing-section { padding-top: 40px; padding-bottom: 165px; border-top: 1px solid var(--border); text-align: center; }
.closing-mark { position: relative; width: 45px; height: 45px; margin: 0 auto 40px; transform: rotate(-20deg); }
.closing-mark::before, .closing-mark::after { content: ""; position: absolute; border: 1px solid var(--accent); border-radius: 50%; }
.closing-mark::before { width: 44px; height: 24px; top: 10px; left: 0; }
.closing-mark::after { width: 24px; height: 44px; top: 0; left: 10px; }
.closing-mark span { position: absolute; top: 18px; left: 18px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.closing-section .section-kicker { margin-bottom: 17px; }
.closing-section h2 { margin: 0 auto 35px; font-size: clamp(40px, 5.4vw, 68px); }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding-top: 140px; gap: 30px; }
  .hero-copy { max-width: 680px; }
  .hero-visual { min-height: 420px; }
  .hero-trust { margin-top: 43px; }
  .section-intro { grid-template-columns: 1fr 1fr; }
  .section-intro h2 { grid-column: 1; }
  .section-intro .section-description { grid-column: 2; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .feature-card--large { grid-column: span 2; min-height: 420px; }
  .architecture-layout { gap: 50px; }
  .quickstart-card { padding: 45px; gap: 40px; }
  .theme-card { min-height: 400px; }
  .contributors-header { gap: 30px; }
}

@media (max-width: 700px) {
  .hero { min-height: 0; padding-top: 130px; padding-bottom: 75px; }
  .hero-copy { max-width: none; }
  .hero h1 { font-size: clamp(38px, 11.6cqi, 54px); }  .hero-lede { font-size: 15px; }
  .heritage-note { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hero-ctas { flex-direction: column; align-items: flex-start; gap: 21px; }
  .hero-trust { flex-wrap: wrap; margin-top: 45px; }
  .hero-visual { min-height: 330px; margin-top: 18px; }
  .hero-code-card { width: 100%; }
  .hero-glow { width: 290px; height: 290px; }
  .hero-orbit--one { width: 300px; height: 140px; }
  .hero-orbit--two { width: 320px; height: 175px; }
  .hero-orbit--three { width: 190px; height: 330px; }
  .code-content { padding: 22px 16px 16px; font-size: 10px; }
  .code-result { padding: 12px 16px; font-size: 10px; }
  .line-number { width: 24px; }
  .indent { padding-left: 12px; }
  .double { padding-left: 24px; }
  .floating-badge { right: -10px; transform: scale(0.83) rotate(3deg); }
  .floating-badge--bottom { left: -18px; }

  .signal-grid { grid-template-columns: 1fr 1fr; }
  .signal-item { min-height: 64px; padding: 14px 12px; font-size: var(--text-ui); }
  .signal-item:first-child, .signal-item:nth-child(3) { padding-left: 0; }
  .signal-item:nth-child(2) { border-right: 0; }
  .signal-item:last-child { justify-content: flex-start; padding-right: 0; }

  .section { padding-top: 100px; padding-bottom: 100px; }
  .section-intro { display: block; margin-bottom: 45px; }
  .section-intro h2 { margin-bottom: 25px; }
  .section-description { max-width: 350px; }

  .feature-grid, .themes-grid { grid-template-columns: 1fr; }
  .feature-card--large { grid-column: auto; min-height: 470px; }
  .feature-card { min-height: 420px; }
  .feature-graphic { height: 145px; }

  .architecture-section { padding: 100px 0; }
  .architecture-layout { grid-template-columns: 1fr; gap: 60px; }
  .architecture-map { padding: 26px 16px 20px 34px; }
  .map-line--vertical { left: 15px; }
  .map-item { grid-template-columns: 24px 34px 1fr 20px; gap: 8px; }
  .map-item small { font-size: var(--text-ui); }

  .quickstart-section { padding-top: 100px; padding-bottom: 100px; }
  .quickstart-card { display: block; padding: 36px 23px 27px; }
  .quickstart-copy { margin-bottom: 39px; }
  .terminal { box-shadow: 8px 8px 0 var(--peach); }
  .terminal-body { padding: 20px 15px 23px; font-size: 10px; }

  .themes-section { padding-top: 100px; padding-bottom: 100px; }
  .themes-header { display: block; margin-bottom: 45px; }
  .themes-header > p { margin-top: 25px; }
  .theme-card { min-height: 0; }
  .theme-card h3 { margin: 27px 0 18px; font-size: 24px; }

  .contributors-section { padding: 100px 0; }
  .contributors-header { display: block; margin-bottom: 40px; }
  .contributors-header > p { margin-top: 25px; }
  .contributors-bar { flex-wrap: wrap; gap: 11px 14px; padding: 15px 16px; }
  .contributors-link { margin-left: 0; width: 100%; }
  .contributors-list { padding: 18px 16px; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 10px; }
  .contributor-avatar { width: 52px; height: 52px; font-size: 17px; }
  .contributor-slot i:first-child { width: 52px; height: 52px; }
  .contributor--more .contributor-link { min-height: 138px; }
  .contributors-status { padding: 13px 16px; }

  .closing-section { padding-bottom: 110px; }
}