:root {
  color-scheme: light;
  --bg: #f7f8fc;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-muted: #eef1f8;
  --text: #151827;
  --text-muted: #5b6377;
  --border: #d9deea;
  --accent: #6757f5;
  --accent-strong: #4433d2;
  --accent-soft: #ebe9ff;
  --success: #087a55;
  --warning: #9b5b00;
  --danger: #b42318;
  --shadow-sm: 0 1px 2px rgb(20 24 39 / 0.06);
  --shadow-lg: 0 20px 55px rgb(33 38 66 / 0.12);
  --radius-sm: 0.75rem;
  --radius-md: 1.15rem;
  --radius-lg: 1.75rem;
  --content: 72rem;
  --header-height: 4.75rem;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0e16;
  --surface: #141722;
  --surface-raised: #191d2a;
  --surface-muted: #202433;
  --text: #f5f6fb;
  --text-muted: #b8bfd1;
  --border: #303648;
  --accent: #9c91ff;
  --accent-strong: #b5adff;
  --accent-soft: #25214d;
  --success: #62d8ad;
  --warning: #ffc46b;
  --danger: #ff8b82;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.28);
  --shadow-lg: 0 24px 70px rgb(0 0 0 / 0.34);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 1rem); }
body {
  margin: 0;
  min-width: 20rem;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: #fff; }

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  transform: translateY(-160%);
  padding: 0.7rem 1rem;
  border-radius: 0.5rem;
  background: var(--text);
  color: var(--bg);
  font-weight: 750;
}
.skip-link:focus { transform: translateY(0); }

.container { width: min(calc(100% - 2rem), var(--content)); margin-inline: auto; }
.section { padding-block: clamp(4.5rem, 8vw, 7.5rem); }
.section--compact { padding-block: 3rem; }
.section--tinted { background: var(--surface-muted); }
.eyebrow {
  margin: 0 0 0.75rem;
  color: var(--accent-strong);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
h1, h2, h3 { margin-top: 0; line-height: 1.12; letter-spacing: -0.035em; }
h1 { max-width: 15ch; margin-bottom: 1.4rem; font-size: clamp(2.65rem, 7vw, 5.65rem); }
h2 { max-width: 21ch; margin-bottom: 1.1rem; font-size: clamp(2rem, 4vw, 3.45rem); }
h3 { margin-bottom: 0.65rem; font-size: clamp(1.2rem, 2vw, 1.55rem); }
p { margin-top: 0; }
.lead { max-width: 65ch; color: var(--text-muted); font-size: clamp(1.1rem, 2vw, 1.35rem); }
.muted { color: var(--text-muted); }
.gradient-text {
  color: var(--accent-strong);
  background: linear-gradient(110deg, var(--accent-strong), #00a2c7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--header-height);
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
}
.site-header.is-scrolled { border-color: var(--border); box-shadow: var(--shadow-sm); }
.navbar { display: flex; min-height: var(--header-height); align-items: center; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; margin-right: auto; text-decoration: none; font-weight: 850; }
.brand-mark { display: grid; width: 2.25rem; aspect-ratio: 1; place-items: center; border-radius: 0.65rem; background: var(--accent); color: #fff; font-family: ui-monospace, monospace; }
.nav-links { display: flex; align-items: center; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.nav-links a { display: block; padding: 0.65rem 0.75rem; border-radius: 0.55rem; color: var(--text-muted); font-size: 0.92rem; font-weight: 700; text-decoration: none; }
.nav-links a:hover, .nav-links a[aria-current="page"], .nav-links a.is-active { background: var(--surface-muted); color: var(--text); }
.nav-actions { display: flex; align-items: center; gap: 0.45rem; }
.icon-button, .menu-button {
  display: inline-grid;
  min-width: 2.75rem;
  min-height: 2.75rem;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--surface);
  color: var(--text);
}
.menu-button { display: none; }

.hero { position: relative; overflow: clip; padding-block: clamp(4rem, 10vw, 8rem); }
.hero::before {
  position: absolute;
  z-index: -1;
  width: 36rem;
  height: 36rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 68%);
  content: "";
  inset: -14rem -10rem auto auto;
}
.hero-grid { display: grid; align-items: center; gap: clamp(2rem, 7vw, 6rem); grid-template-columns: minmax(0, 1.15fr) minmax(17rem, 0.85fr); }
.hero-actions, .button-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.availability { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 1rem; color: var(--success); font-weight: 750; }
.availability::before { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0.35rem color-mix(in srgb, currentColor 14%, transparent); content: ""; }
.hero-panel { padding: clamp(1.4rem, 4vw, 2.25rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-lg); }
.hero-panel h2 { font-size: 1.25rem; }
.stack-list { display: grid; gap: 0.85rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.stack-list li { display: grid; grid-template-columns: 1.35rem 1fr; gap: 0.75rem; align-items: start; color: var(--text-muted); }
.stack-list strong { color: var(--text); }

.btn {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.75rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 0.72rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-strong); }
.btn--secondary { border-color: var(--border); background: var(--surface); color: var(--text); }
.btn--ghost { background: transparent; color: var(--accent-strong); }
.btn--small { min-height: 2.5rem; padding: 0.55rem 0.8rem; font-size: 0.9rem; }
.btn[disabled] { cursor: not-allowed; opacity: 0.58; transform: none; }

.metrics { display: grid; gap: 1px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--border); grid-template-columns: repeat(4, 1fr); }
.metric { padding: 1.4rem; background: var(--surface); }
.metric strong { display: block; margin-bottom: 0.2rem; font-size: clamp(1.65rem, 3vw, 2.35rem); letter-spacing: -0.04em; }
.metric span { color: var(--text-muted); font-size: 0.92rem; }

.cards { display: grid; gap: 1rem; margin-top: 2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { min-width: 0; padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
a.card { display: block; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
a.card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); box-shadow: var(--shadow-lg); }
.card-icon { display: grid; width: 2.75rem; aspect-ratio: 1; place-items: center; margin-bottom: 1.2rem; border-radius: 0.8rem; background: var(--accent-soft); color: var(--accent-strong); font-weight: 900; }
.card p { color: var(--text-muted); }
.tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1rem; }
.tag { padding: 0.28rem 0.55rem; border-radius: 999px; background: var(--surface-muted); color: var(--text-muted); font-size: 0.78rem; font-weight: 750; }
.card-arrow { display: inline-flex; margin-top: 1.15rem; color: var(--accent-strong); font-weight: 800; }


/* Complete portfolio */
.portfolio-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}
.filter-group { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.filter-chip {
  min-height: 2.65rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-weight: 800;
}
.filter-chip:hover { border-color: var(--accent); color: var(--text); }
.filter-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
.project-search { display: grid; min-width: min(22rem, 100%); gap: 0.35rem; color: var(--text-muted); font-size: 0.82rem; font-weight: 800; }
.project-search input { background: var(--surface); }
.project-count { margin: 1rem 0 0; color: var(--text-muted); font-size: 0.92rem; }
.portfolio-grid { display: grid; gap: 1rem; margin-top: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portfolio-grid--compact { margin-top: 2rem; }
.project-card {
  display: flex;
  min-width: 0;
  min-height: 100%;
  padding: 1.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  flex-direction: column;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
a.project-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); box-shadow: var(--shadow-lg); }
.project-card[hidden] { display: none; }
.project-card__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.project-mark { display: grid; min-width: 2.75rem; min-height: 2.75rem; padding-inline: 0.55rem; place-items: center; border-radius: 0.8rem; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.78rem; font-weight: 900; }
.project-status { padding: 0.28rem 0.55rem; border-radius: 999px; background: var(--surface-muted); color: var(--text-muted); font-size: 0.72rem; font-weight: 800; text-align: right; }
.project-type { margin-bottom: 0.45rem; color: var(--accent-strong) !important; font-size: 0.78rem; font-weight: 850; letter-spacing: 0.05em; text-transform: uppercase; }
.project-card h3 { margin-bottom: 0.65rem; }
.project-card p:not(.project-type) { color: var(--text-muted); }
.project-link { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: auto; padding-top: 1rem; color: var(--accent-strong); font-weight: 800; }
.project-link--muted { color: var(--text-muted); }
.project-card--static { border-style: dashed; }
.empty-state { margin-top: 1.5rem; padding: 1rem; border: 1px dashed var(--border); border-radius: var(--radius-md); color: var(--text-muted); text-align: center; }

.steps { display: grid; gap: 1rem; margin-top: 2rem; counter-reset: step; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step { position: relative; padding: 1.4rem; border-top: 3px solid var(--accent); background: var(--surface); }
.step::before { display: block; margin-bottom: 0.7rem; color: var(--accent-strong); content: "0" counter(step); counter-increment: step; font-weight: 900; }

.case-layout { display: grid; align-items: start; gap: 3rem; grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 0.7fr); }
.case-aside { position: sticky; top: calc(var(--header-height) + 1.5rem); padding: 1.4rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.definition-list { display: grid; gap: 1rem; margin: 0; }
.definition-list div { padding-bottom: 0.9rem; border-bottom: 1px solid var(--border); }
.definition-list div:last-child { padding-bottom: 0; border-bottom: 0; }
.definition-list dt { color: var(--text-muted); font-size: 0.82rem; font-weight: 800; text-transform: uppercase; }
.definition-list dd { margin: 0.25rem 0 0; font-weight: 700; }
.prose { max-width: 48rem; }
.prose h2 { margin-top: 3rem; font-size: clamp(1.55rem, 3vw, 2.2rem); }
.prose h3 { margin-top: 2rem; }
.prose li + li { margin-top: 0.5rem; }
.note { padding: 1rem 1.15rem; border-left: 4px solid var(--accent); background: var(--accent-soft); color: var(--text); }

.contact-grid { display: grid; align-items: start; gap: 2rem; grid-template-columns: 1fr 0.8fr; }
.form-card { padding: clamp(1.2rem, 4vw, 2rem); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.form-grid { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.35rem; }
.field label { font-weight: 760; }
.field small { color: var(--text-muted); }
input, textarea, select {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  background: var(--bg);
  color: var(--text);
}
textarea { min-height: 8rem; resize: vertical; }
input:invalid:not(:placeholder-shown), textarea:invalid:not(:placeholder-shown) { border-color: var(--danger); }
.form-status { min-height: 1.65rem; margin: 0.75rem 0 0; color: var(--text-muted); }
.form-status[data-state="success"] { color: var(--success); }
.form-status[data-state="error"] { color: var(--danger); }
.contact-list { display: grid; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.contact-list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: 0.8rem; background: var(--surface); text-decoration: none; }
.contact-list a:hover { border-color: var(--accent); }


.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Local toolbox */
.tools-page { background: var(--bg); }
.tools-hero { position: relative; overflow: clip; border-bottom: 1px solid var(--border); background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--accent-soft) 55%, var(--surface))); }
.tools-hero::after { position: absolute; z-index: 0; width: 28rem; height: 28rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); content: ""; inset: -12rem -7rem auto auto; pointer-events: none; }
.tools-hero .container { position: relative; z-index: 1; }
.tools-hero h1 { max-width: 18ch; font-size: clamp(2.45rem, 6vw, 4.8rem); }
.tools-badges { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.tools-badges li { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.72rem; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--surface) 86%, transparent); color: var(--text-muted); font-size: 0.86rem; font-weight: 750; }
.tools-badges li::before { color: var(--success); content: "✓"; font-weight: 900; }
.tools-privacy-note { max-width: 70ch; margin: 1rem 0 0; color: var(--text-muted); font-size: 0.88rem; }
.tools-catalog { padding-top: 2rem; }
.tools-toolbar { position: relative; z-index: 1; display: grid; gap: 0.9rem; margin-bottom: 1.2rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-raised) 94%, transparent); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); }
.tool-search { display: grid; gap: 0.35rem; }
.tool-search > label { font-size: 0.82rem; font-weight: 850; }
.tool-search__control { position: relative; display: flex; align-items: center; }
.tool-search__control input { padding-right: 8.8rem; background: var(--surface); }
.tool-search__control kbd { position: absolute; right: 3.25rem; padding: 0.18rem 0.42rem; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 0.38rem; background: var(--surface-muted); color: var(--text-muted); font-family: inherit; font-size: 0.72rem; pointer-events: none; }
.icon-button--compact { position: absolute; right: 0.35rem; min-width: 2.3rem; min-height: 2.3rem; border: 0; background: transparent; font-size: 1.35rem; }
.tools-toolbar .filter-group { gap: 0.45rem; }
.tools-toolbar .filter-chip { min-height: 2.4rem; padding: 0.45rem 0.75rem; font-size: 0.86rem; }
.tools-toolbar__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; }
.tool-count { margin-right: auto; color: var(--text-muted); font-size: 0.9rem; font-weight: 800; }
.tool-index { margin-bottom: 1.25rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.tool-index > strong { display: block; margin-bottom: 0.75rem; }
.tool-index__links { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tool-index__link { display: inline-flex; align-items: center; gap: 0.42rem; padding: 0.45rem 0.65rem; border: 1px solid var(--border); border-radius: 0.6rem; color: var(--text-muted); font-size: 0.82rem; font-weight: 750; text-decoration: none; }
.tool-index__link span { display: grid; min-width: 1.6rem; min-height: 1.6rem; place-items: center; border-radius: 0.38rem; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.66rem; font-weight: 900; }
.tool-index__link:hover { border-color: var(--accent); color: var(--text); }
.tool-index__link[hidden] { display: none; }
.tools-list { display: grid; gap: 0.85rem; }
.tool-card { scroll-margin-top: calc(var(--header-height) + 1rem); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: clip; background: var(--surface); box-shadow: var(--shadow-sm); }
.tool-card[hidden] { display: none; }
.tool-card[open] { border-color: color-mix(in srgb, var(--accent) 36%, var(--border)); box-shadow: var(--shadow-lg); }
.tool-summary { display: grid; min-height: 6.25rem; align-items: center; gap: 1rem; padding: 1rem 1.15rem; cursor: pointer; list-style: none; grid-template-columns: auto minmax(0, 1fr) auto; }
.tool-summary::-webkit-details-marker { display: none; }
.tool-summary:hover { background: var(--surface-muted); }
.tool-summary:focus-visible { outline-offset: -4px; }
.tool-icon { display: grid; min-width: 3rem; height: 3rem; place-items: center; padding-inline: 0.45rem; border-radius: 0.8rem; background: var(--accent-soft); color: var(--accent-strong); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; font-weight: 950; }
.tool-summary__copy { display: grid; min-width: 0; }
.tool-category { margin-bottom: 0.15rem; color: var(--accent-strong); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; }
.tool-title { color: var(--text); font-size: clamp(1.08rem, 2vw, 1.3rem); font-weight: 850; letter-spacing: -0.02em; }
.tool-description { color: var(--text-muted); font-size: 0.9rem; }
.tool-chevron { width: 0.75rem; height: 0.75rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; color: var(--text-muted); transform: rotate(45deg); transition: transform 160ms ease; }
.tool-card[open] .tool-chevron { transform: rotate(225deg); }
.tool-workspace { display: grid; align-items: start; gap: 1rem; padding: 0 1.15rem 1.15rem; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
.tool-workspace--wide { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.tool-input, .tool-result { min-width: 0; padding: 1rem; border: 1px solid var(--border); border-radius: 0.9rem; background: var(--bg); }
.tool-input { display: grid; gap: 0.9rem; }
.tool-input > h3 { margin: 0; color: var(--text-muted); font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; }
.tool-result { position: sticky; top: calc(var(--header-height) + 1rem); }
.tool-result__header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.tool-result__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tool-result__meta { min-height: 1.35rem; margin: 0 0 0.5rem; color: var(--text-muted); font-size: 0.82rem; }
.tool-output { display: block; min-height: 8rem; max-height: 30rem; margin: 0; padding: 0.85rem; border: 1px solid transparent; border-radius: 0.65rem; overflow: auto; overflow-wrap: anywhere; background: var(--surface-muted); color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88rem; line-height: 1.55; white-space: pre-wrap; user-select: text; }
.tool-output[data-placeholder="true"] { display: grid; place-items: center; color: var(--text-muted); font-family: inherit; font-style: italic; text-align: center; }
.tool-output[data-state="success"] { border-color: color-mix(in srgb, var(--success) 34%, transparent); }
.tool-output[data-state="error"] { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface-muted)); color: var(--danger); }
.tool-form-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.15rem; }
.tool-form-actions .btn { min-height: 2.65rem; }
.code-input, .code-control { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; }
.code-input { min-height: 9rem; tab-size: 2; }
.code-input--large { min-height: 13rem; }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.label-row output, .field-counter { color: var(--text-muted); font-size: 0.82rem; font-weight: 800; }
.compact-number { max-width: 8rem; }
input[type="range"] { min-height: 2rem; padding: 0; accent-color: var(--accent); }
.choice-group { margin: 0; padding: 0.9rem; border: 1px solid var(--border); border-radius: 0.75rem; }
.choice-group legend { padding-inline: 0.35rem; font-size: 0.82rem; font-weight: 850; }
.checkbox-grid { display: grid; gap: 0.55rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.checkbox-grid label, .switch-row { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text-muted); font-size: 0.9rem; font-weight: 700; }
.checkbox-grid .span-all { grid-column: 1 / -1; }
.checkbox-grid input, .switch-row input { width: 1.1rem; min-height: auto; accent-color: var(--accent); }
.split-fields { display: grid; gap: 0.8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split-fields--compact { grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr); }
.form-stack, .brief-fields { display: grid; gap: 0.8rem; }
.brief-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-hint { margin: 0; color: var(--text-muted); font-size: 0.82rem; }
.tool-toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 100; max-width: min(24rem, calc(100% - 2rem)); padding: 0.75rem 1rem; border: 1px solid color-mix(in srgb, var(--success) 40%, var(--border)); border-radius: 0.7rem; background: var(--surface-raised); box-shadow: var(--shadow-lg); color: var(--success); font-weight: 800; }
.tool-toast[data-state="error"] { border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); color: var(--danger); }
.tool-toast[hidden] { display: none; }

.consent {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 80;
  width: min(28rem, calc(100% - 2rem));
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}
.consent[hidden] { display: none; }
.consent p { margin-bottom: 0.8rem; color: var(--text-muted); font-size: 0.92rem; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.site-footer { padding-block: 2.5rem; border-top: 1px solid var(--border); }
.footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
.footer-links a { color: var(--text-muted); }

.reveal { opacity: 0; transform: translateY(1rem); transition: opacity 500ms ease, transform 500ms ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 58rem) {
  .menu-button { display: inline-grid; }
  .nav-links {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 1rem;
    left: 1rem;
    display: none;
    align-items: stretch;
    padding: 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
    flex-direction: column;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 0.8rem; }
  .hero-grid, .contact-grid, .case-layout { grid-template-columns: 1fr; }
  .hero-panel { order: 2; }
  .cards, .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-toolbar { align-items: stretch; flex-direction: column; }
  .project-search { min-width: 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-aside { position: static; }
}

@media (max-width: 40rem) {
  .container { width: min(calc(100% - 1.25rem), var(--content)); }
  .brand-name { display: none; }
  .nav-actions { gap: 0.3rem; }
  .metrics, .cards, .portfolio-grid, .steps, .tools-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .footer-grid { align-items: flex-start; flex-direction: column; }
}


@media (max-width: 58rem) {
  .tools-toolbar { position: static; }
  .tool-result { position: static; }
  .tool-workspace, .tool-workspace--wide { grid-template-columns: 1fr; }
  .brief-fields { grid-template-columns: 1fr; }
}

@media (max-width: 40rem) {
  .tools-hero h1 { font-size: clamp(2.2rem, 11vw, 3.4rem); }
  .tools-toolbar { padding: 0.75rem; }
  .tool-search__control input { padding-right: 3.2rem; }
  .tool-search__control kbd { display: none; }
  .tools-toolbar__actions .btn { flex: 1 1 auto; }
  .tool-index { padding: 0.8rem; }
  .tool-index__links { display: flex; flex-wrap: nowrap; margin-inline: -0.15rem; padding: 0.15rem 0.15rem 0.45rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; }
  .tool-index__link { flex: 0 0 auto; max-width: 16rem; scroll-snap-align: start; white-space: nowrap; }
  .tool-summary { min-height: 5.4rem; gap: 0.75rem; padding: 0.85rem; grid-template-columns: auto minmax(0, 1fr) auto; }
  .tool-icon { min-width: 2.55rem; height: 2.55rem; }
  .tool-description { display: none; }
  .tool-workspace { padding: 0 0.75rem 0.75rem; }
  .tool-input, .tool-result { padding: 0.8rem; }
  .tool-result__header { align-items: flex-start; flex-direction: column; }
  .tool-result__actions { display: grid; width: 100%; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
  .tool-result__actions .btn { width: auto; }
  .tool-form-actions .btn { flex: 1 1 9rem; }
  .split-fields, .split-fields--compact, .checkbox-grid { grid-template-columns: 1fr; }
  .checkbox-grid .span-all { grid-column: auto; }
  .code-input--large { min-height: 10rem; }
  .tool-output { max-height: 22rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (prefers-contrast: more) {
  :root { --border: #747b8f; }
  .btn--primary { outline: 2px solid currentColor; }
}

/* v5 — restored identity and restrained motion */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 120;
  height: 3px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #a855f7, var(--accent), #22d3ee);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
}

.brand {
  position: relative;
  gap: 0;
  padding: 0.5rem 0.2rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight: 850;
  letter-spacing: -0.045em;
}
.brand-name {
  display: inline-block;
  background: linear-gradient(110deg, #a855f7 0%, var(--accent) 42%, #22d3ee 100%);
  background-position: 0 50%;
  background-size: 180% 100%;
  color: var(--accent-strong);
  font-size: clamp(0.93rem, 1.7vw, 1.12rem);
  line-height: 1;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 380ms ease, transform 180ms ease;
}
.brand-mark { display: none; }

.hero::before,
.hero::after {
  pointer-events: none;
  will-change: transform;
}
.hero::before {
  width: 34rem;
  height: 34rem;
  background: radial-gradient(circle, color-mix(in srgb, #a855f7 21%, transparent), transparent 68%);
  animation: ambient-drift-a 16s ease-in-out infinite alternate;
}
.hero::after {
  position: absolute;
  z-index: -1;
  width: 27rem;
  height: 27rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, #22d3ee 14%, transparent), transparent 70%);
  content: "";
  inset: auto auto -12rem -9rem;
  animation: ambient-drift-b 19s ease-in-out infinite alternate;
}
.gradient-text {
  background-size: 180% 100%;
  animation: gradient-flow 9s ease-in-out infinite alternate;
}
.availability::before { animation: availability-pulse 2.8s ease-out infinite; }
.hero-panel { animation: panel-breathe 8s ease-in-out infinite; }

.hero-paths {
  display: flex;
  max-width: 48rem;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
  margin-top: 1.15rem;
  color: var(--text-muted);
  font-size: 0.84rem;
}
.hero-paths > span { font-weight: 800; }
.hero-paths a {
  position: relative;
  color: var(--text-muted);
  font-weight: 720;
  text-decoration: none;
}
.hero-paths a::after {
  position: absolute;
  right: 0;
  bottom: -0.1rem;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.eyebrow { display: flex; width: fit-content; align-items: center; gap: 0.65rem; }
.eyebrow::after {
  width: 1.8rem;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  opacity: 0.55;
  transform: scaleX(0.45);
  transform-origin: left;
  transition: transform 500ms ease;
}
.eyebrow.is-visible::after,
.reveal.is-visible .eyebrow::after { transform: scaleX(1); }

.reveal { transition-delay: var(--reveal-delay, 0ms); }

.metric strong {
  background: linear-gradient(110deg, var(--text), var(--accent-strong));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.deliverables-grid {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.deliverable {
  position: relative;
  min-width: 0;
  padding: 1.5rem 1.5rem 1.5rem 4.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.deliverable::after {
  position: absolute;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
  content: "";
  inset: auto -3rem -4rem auto;
  pointer-events: none;
}
.deliverable-number {
  position: absolute;
  top: 1.55rem;
  left: 1.45rem;
  color: var(--accent-strong);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 900;
}
.deliverable h3 { margin-bottom: 0.45rem; }
.deliverable p { margin: 0; color: var(--text-muted); }
.section-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.2rem;
  padding: 1.2rem 1.35rem;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface));
}
.section-cta p { margin: 0.15rem 0 0; }
.section-cta .btn { flex: 0 0 auto; }

.faq-layout {
  display: grid;
  align-items: start;
  gap: clamp(2rem, 6vw, 5rem);
  grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr);
}
.faq-intro { position: sticky; top: calc(var(--header-height) + 2rem); }
.faq-list { display: grid; gap: 0.7rem; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: clip;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.faq-item[open] { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); box-shadow: var(--shadow-lg); }
.faq-item summary {
  position: relative;
  padding: 1.15rem 3.4rem 1.15rem 1.2rem;
  cursor: pointer;
  font-weight: 820;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  position: absolute;
  top: 50%;
  right: 1.25rem;
  width: 0.65rem;
  height: 0.65rem;
  border-right: 2px solid var(--accent-strong);
  border-bottom: 2px solid var(--accent-strong);
  content: "";
  transform: translateY(-70%) rotate(45deg);
  transition: transform 180ms ease;
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq-item > div { padding: 0 1.2rem 1.15rem; color: var(--text-muted); }
.faq-item > div p { margin: 0; }

.tool-card[open] .tool-workspace { animation: workspace-enter 220ms ease both; }

@media (hover: hover) {
  .brand:hover .brand-name { background-position: 100% 50%; transform: translateY(-1px); }
  .hero-paths a:hover { color: var(--text); }
  .hero-paths a:hover::after { transform: scaleX(1); transform-origin: left; }
  .deliverable:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
  a.card:hover .card-arrow,
  a.project-card:hover .project-link { transform: translateX(0.25rem); }
  .card-arrow, .project-link { transition: transform 180ms ease; }
}

@keyframes ambient-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-2.5rem, 2rem, 0) scale(1.08); }
}
@keyframes ambient-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(3rem, -1.5rem, 0) scale(1.06); }
}
@keyframes gradient-flow {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
@keyframes availability-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 28%, transparent); }
  70%, 100% { box-shadow: 0 0 0 0.7rem color-mix(in srgb, currentColor 0%, transparent); }
}
@keyframes panel-breathe {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -0.35rem; }
}
@keyframes workspace-enter {
  from { opacity: 0; transform: translateY(-0.35rem); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 58rem) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-intro { position: static; }
}

@media (max-width: 40rem) {
  .brand-name { display: inline-block; font-size: 0.85rem; }
  .hero-paths { align-items: flex-start; flex-direction: column; }
  .deliverables-grid { grid-template-columns: 1fr; }
  .deliverable { padding-left: 4.2rem; }
  .section-cta { align-items: stretch; flex-direction: column; }
  .section-cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .gradient-text,
  .availability::before,
  .hero-panel,
  .tool-card[open] .tool-workspace { animation: none !important; }
  .scroll-progress { transition: none; }
  .reveal { transition-delay: 0ms !important; }
}

/* ========================================================================== 
   v6 — product-grade visual system
   ========================================================================== */
@view-transition { navigation: auto; }

:root {
  --bg: #f5f6fa;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-muted: #eceff6;
  --surface-glass: rgb(255 255 255 / 0.76);
  --text: #11131d;
  --text-muted: #626a7d;
  --border: #dfe3ec;
  --border-strong: #cbd1df;
  --accent: #6757f5;
  --accent-strong: #503fe0;
  --accent-soft: #eeecff;
  --cyan: #00a7c4;
  --cyan-soft: #e5f9fc;
  --ink: #090b12;
  --success: #0b8a62;
  --warning: #9a6200;
  --danger: #b42318;
  --shadow-sm: 0 1px 2px rgb(16 24 40 / .05), 0 1px 6px rgb(16 24 40 / .04);
  --shadow-md: 0 12px 30px rgb(23 28 54 / .08);
  --shadow-lg: 0 28px 80px rgb(28 31 70 / .14);
  --radius-sm: .8rem;
  --radius-md: 1.2rem;
  --radius-lg: 1.75rem;
  --radius-xl: 2.4rem;
  --content: 78rem;
  --header-height: 5rem;
  --ease-out: cubic-bezier(.2,.75,.25,1);
}

html[data-theme="dark"] {
  --bg: #0b0d14;
  --surface: #12151f;
  --surface-raised: #171b27;
  --surface-muted: #1c2130;
  --surface-glass: rgb(14 17 26 / .78);
  --text: #f4f5fa;
  --text-muted: #aeb5c7;
  --border: #282e3e;
  --border-strong: #3a4256;
  --accent: #9187ff;
  --accent-strong: #b1a9ff;
  --accent-soft: #24214b;
  --cyan: #55d3e9;
  --cyan-soft: #102f38;
  --ink: #06070b;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .3);
  --shadow-md: 0 16px 38px rgb(0 0 0 / .28);
  --shadow-lg: 0 30px 90px rgb(0 0 0 / .45);
}

html { scrollbar-gutter: stable; }
body {
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 26rem),
    var(--bg);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
body::before {
  position: fixed;
  z-index: -2;
  inset: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--text) 2.2%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 2.2%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, #000, transparent 42rem);
  content: "";
  pointer-events: none;
}

h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
h1 { font-size: clamp(3.25rem, 7.4vw, 6.75rem); line-height: .95; letter-spacing: -.065em; }
h2 { max-width: 18ch; font-size: clamp(2.35rem, 4.6vw, 4.25rem); line-height: 1.02; letter-spacing: -.055em; }
h3 { letter-spacing: -.035em; }
.lead { font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.62; }
.container { width: min(calc(100% - clamp(1.25rem, 4vw, 4rem)), var(--content)); }
.section { padding-block: clamp(5.5rem, 9vw, 9rem); }
.section--compact { padding-block: clamp(3.5rem, 6vw, 5rem); }
.section--tinted, .section--soft { background: color-mix(in srgb, var(--surface-muted) 76%, var(--bg)); }
.section--dark { position: relative; overflow: clip; background: #0a0c13; color: #f6f7fb; }
.section--dark .lead, .section--dark .muted { color: #abb4c8; }
.section--dark .eyebrow { color: #9c91ff; }
.section--dark::before { position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgb(103 87 245 / .22), transparent 28rem), radial-gradient(circle at 5% 85%, rgb(0 167 196 / .14), transparent 24rem); content: ""; pointer-events: none; }
.section-heading { display: grid; align-items: end; gap: clamp(1.5rem, 6vw, 6rem); grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .75fr); }
.section-heading h2 { margin-bottom: 0; }
.section-heading > .lead { margin-bottom: .35rem; }
.eyebrow { margin-bottom: 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .74rem; letter-spacing: .16em; }
.eyebrow::after { width: 2.7rem; }

.site-header { min-height: var(--header-height); border-bottom: 0; background: transparent; backdrop-filter: none; transition: padding .25s var(--ease-out); }
.site-header .navbar { min-height: var(--header-height); margin-top: .6rem; padding: .45rem .55rem .45rem 1rem; border: 1px solid transparent; border-radius: 1.05rem; transition: background .25s, border-color .25s, box-shadow .25s, transform .25s; }
.site-header.is-scrolled .navbar { border-color: color-mix(in srgb, var(--border) 85%, transparent); background: var(--surface-glass); box-shadow: 0 10px 35px rgb(15 18 35 / .09); backdrop-filter: blur(18px) saturate(150%); }
.site-header.is-scrolled { border: 0; box-shadow: none; }
.brand-name { font-size: clamp(.92rem, 1.4vw, 1.08rem); }
.nav-links { gap: .15rem; }
.nav-links a { min-height: 2.55rem; display: grid; place-items: center; padding-inline: .82rem; border-radius: .72rem; font-size: .84rem; }
.nav-links a:hover, .nav-links a[aria-current="page"], .nav-links a.is-active { background: color-mix(in srgb, var(--accent-soft) 72%, transparent); color: var(--accent-strong); }
.nav-links li:last-child a { margin-left: .35rem; background: var(--text); color: var(--bg); }
.nav-links li:last-child a:hover { background: var(--accent); color: #fff; }
.icon-button, .menu-button { min-width: 2.55rem; min-height: 2.55rem; border-radius: .75rem; background: color-mix(in srgb, var(--surface) 85%, transparent); }
.command-button { display: inline-flex; min-height: 2.55rem; align-items: center; gap: .5rem; padding: 0 .72rem; border: 1px solid var(--border); border-radius: .75rem; background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text-muted); font-weight: 750; }
.command-button kbd { padding: .12rem .32rem; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: .32rem; font-size: .65rem; }

.btn { min-height: 3.2rem; padding: .78rem 1.18rem; border-radius: .85rem; transition: transform .18s var(--ease-out), box-shadow .18s, background .18s, border-color .18s; }
.btn--primary { background: linear-gradient(135deg, var(--accent), #7c4ff2); box-shadow: 0 10px 28px rgb(103 87 245 / .22); }
.btn--primary:hover { background: linear-gradient(135deg, var(--accent-strong), #6940db); box-shadow: 0 15px 34px rgb(103 87 245 / .3); }
.btn--secondary { background: color-mix(in srgb, var(--surface) 88%, transparent); }
.btn--light { background: #fff; color: #0b0d14; }
.btn--light:hover { background: #eeecff; }
.btn--glow { position: relative; }
.btn--glow::after { position: absolute; z-index: -1; inset: 15% 10% -25%; border-radius: inherit; background: var(--accent); filter: blur(24px); content: ""; opacity: .28; }
.text-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--accent-strong); font-weight: 800; text-decoration: none; }
.text-link--light { color: #c3bdff; }

/* Hero */
.hero { min-height: min(58rem, calc(100svh - 1rem)); padding: clamp(4rem, 8vw, 7rem) 0 2rem; overflow: clip; }
.hero::before, .hero::after { display: none; }
.hero-grid-bg { position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 70% 18%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 24rem), radial-gradient(circle at 18% 78%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 24rem); }
.hero-grid-bg::before { position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--text) 3.5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 3.5%, transparent) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(ellipse at center, #000 0%, transparent 76%); content: ""; }
.hero-shell { display: grid; align-items: center; gap: clamp(2.5rem, 6vw, 6.5rem); grid-template-columns: minmax(0, 1.08fr) minmax(28rem, .92fr); }
.hero-copy h1 { max-width: 11ch; margin-bottom: 1.65rem; }
.hero-copy .lead { max-width: 57ch; }
.hero-copy .gradient-text { background-image: linear-gradient(100deg, var(--accent-strong), #8848ea 50%, var(--cyan)); }
.availability { width: fit-content; margin-bottom: 1.6rem; padding: .42rem .65rem; border: 1px solid color-mix(in srgb, var(--success) 24%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--success) 7%, var(--surface)); font-family: ui-monospace, monospace; font-size: .72rem; letter-spacing: .04em; }
.availability::before { width: .48rem; height: .48rem; box-shadow: none; }
.availability-sep { color: var(--border-strong); }
.hero-capabilities { display: flex; flex-wrap: wrap; gap: .6rem 1.15rem; margin: 2rem 0 0; padding: 0; list-style: none; color: var(--text-muted); font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.hero-capabilities li { display: inline-flex; align-items: center; gap: .45rem; }
.hero-capabilities span { color: var(--accent-strong); font-family: ui-monospace, monospace; font-size: .68rem; }

.system-map { position: relative; border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border-radius: 1.45rem; overflow: hidden; background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: 0 35px 100px rgb(28 28 70 / .18); backdrop-filter: blur(14px); transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); }
.system-map::before { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px rgb(255 255 255 / .7); content: ""; pointer-events: none; }
.system-map__bar, .system-map__footer { display: flex; min-height: 3.25rem; align-items: center; gap: .75rem; padding: 0 1rem; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: .72rem; }
.system-map__bar code { margin-right: auto; }
.system-map__footer { min-height: 2.8rem; justify-content: space-between; border-top: 1px solid var(--border); border-bottom: 0; font-family: ui-monospace, monospace; }
.window-dots { display: flex; gap: .34rem; }
.window-dots i { width: .55rem; aspect-ratio: 1; border-radius: 50%; background: var(--border-strong); }
.window-dots i:first-child { background: #ff6b66; }.window-dots i:nth-child(2){background:#f7bf4f}.window-dots i:nth-child(3){background:#4ac26b}
.system-live { display: flex; align-items: center; gap: .35rem; color: var(--success); }
.system-live i, .status-dot { display: inline-block; width: .42rem; aspect-ratio: 1; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 .2rem color-mix(in srgb, currentColor 12%, transparent); }
.system-map__canvas { position: relative; min-height: 29rem; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 14rem), linear-gradient(color-mix(in srgb, var(--text) 3%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 3%, transparent) 1px, transparent 1px); background-size: auto, 28px 28px, 28px 28px; }
.system-map__links { position: absolute; width: 100%; height: 100%; inset: 0; }
.system-map__links path { fill: none; stroke: color-mix(in srgb, var(--accent) 47%, var(--border)); stroke-width: 1.4; stroke-dasharray: 6 7; vector-effect: non-scaling-stroke; animation: map-dash 16s linear infinite; }
.map-node, .map-core { position: absolute; display: grid; min-width: 8rem; gap: .12rem; padding: .8rem .85rem; border: 1px solid var(--border); border-radius: .85rem; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow-sm); }
.map-node strong, .map-core strong { font-size: .8rem; }
.map-node small, .map-core small { color: var(--text-muted); font-size: .65rem; }
.map-node__icon { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; margin-bottom: .25rem; border-radius: .45rem; background: var(--accent-soft); color: var(--accent-strong); font-family: ui-monospace, monospace; font-size: .58rem; font-weight: 900; }
.map-node--business { top: 12%; left: 4%; }.map-node--users { bottom: 10%; left: 4%; }.map-node--api { top: 10%; right: 3%; }.map-node--data { top: 41%; right: 3%; }.map-node--delivery { right: 3%; bottom: 8%; }
.map-core { top: 50%; left: 50%; min-width: 9.6rem; padding: 1rem; border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 65%, var(--surface)), var(--surface)); box-shadow: 0 16px 34px rgb(103 87 245 / .18); transform: translate(-50%, -50%); }
.map-core > span { display: grid; width: 2.1rem; height: 2.1rem; place-items: center; margin-bottom: .3rem; border-radius: .58rem; background: var(--accent); color: #fff; font-family: ui-monospace, monospace; font-size: .7rem; font-weight: 900; }
.hero-stats { display: grid; margin-top: clamp(3rem, 6vw, 5.5rem); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); grid-template-columns: repeat(4, 1fr); }
.hero-stat { position: relative; padding: 1.15rem clamp(.8rem, 2vw, 1.4rem); }
.hero-stat + .hero-stat { border-left: 1px solid var(--border); }
.hero-stat strong { display: block; font-size: clamp(1.65rem, 3vw, 2.5rem); line-height: 1; letter-spacing: -.05em; }
.hero-stat span { color: var(--text-muted); font-size: .8rem; }

/* Service bento */
.service-bento { display: grid; gap: 1rem; margin-top: 3rem; grid-template-columns: repeat(3, 1fr); }
.service-card { container-type: inline-size; position: relative; min-height: 19rem; padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s; }
.service-card::before { position: absolute; width: 12rem; height: 12rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 10%, transparent), transparent 68%); content: ""; inset: auto -4rem -5rem auto; }
.service-card--primary { min-height: 28rem; grid-row: span 2; background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 55%, var(--surface)), var(--surface) 52%); }
.service-card--wide { display: grid; min-height: 12rem; align-items: center; gap: 2rem; grid-column: span 2; grid-template-columns: 1fr auto; }
.service-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 3rem; }
.service-code { color: var(--text-muted); font-family: ui-monospace, monospace; font-size: .67rem; font-weight: 800; letter-spacing: .08em; }
.service-icon { color: var(--accent-strong); font-family: ui-monospace, monospace; font-size: 1.35rem; font-weight: 900; }
.service-card h3 { max-width: 13ch; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.service-card p { color: var(--text-muted); }
.artifact-list { display: grid; gap: .65rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.artifact-list li { display: flex; align-items: center; gap: .7rem; font-weight: 730; }
.artifact-list li::before { width: .42rem; aspect-ratio: 1; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .25rem var(--accent-soft); content: ""; }
.service-signal { position: absolute; right: 2rem; bottom: 1.7rem; left: 2rem; display: flex; height: 4rem; align-items: end; gap: .35rem; opacity: .5; }
.service-signal span { flex: 1; border-radius: .25rem .25rem 0 0; background: linear-gradient(var(--accent), transparent); }
.service-signal span:nth-child(1){height:25%}.service-signal span:nth-child(2){height:48%}.service-signal span:nth-child(3){height:38%}.service-signal span:nth-child(4){height:78%}.service-signal span:nth-child(5){height:100%}
.delivery-loop { display: flex; align-items: center; gap: .5rem; padding: .75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-muted); white-space: nowrap; }
.delivery-loop span { padding: .38rem .6rem; border-radius: 999px; background: var(--surface); font-family: ui-monospace, monospace; font-size: .7rem; font-weight: 800; }
.delivery-loop i { color: var(--accent-strong); font-style: normal; }

/* Traceability section */
.system-thinking { position: relative; display: grid; align-items: center; gap: clamp(3rem, 8vw, 8rem); grid-template-columns: .8fr 1.2fr; }
.system-thinking__copy h2 { max-width: 12ch; }
.trace-board { padding: 1rem; border: 1px solid rgb(255 255 255 / .12); border-radius: var(--radius-lg); background: rgb(255 255 255 / .04); box-shadow: inset 0 1px rgb(255 255 255 / .06); }
.trace-row { position: relative; display: grid; min-height: 5rem; align-items: center; gap: .8rem; padding: .8rem 1rem; border-bottom: 1px solid rgb(255 255 255 / .09); grid-template-columns: 2.3rem minmax(0, .9fr) minmax(0, 1.1fr) 4rem; }
.trace-row:last-of-type { border-bottom: 0; }
.trace-index { color: #8e84ee; font-family: ui-monospace, monospace; font-size: .72rem; }
.trace-row strong { font-size: .92rem; }
.trace-row small { color: #939db2; }
.trace-row i { height: .36rem; border-radius: 999px; background: linear-gradient(90deg, #6757f5, #55d3e9); transform-origin: left; }
.trace-row:nth-child(2) i { width: 82%; }.trace-row:nth-child(3) i { width: 67%; }.trace-row:nth-child(4) i { width: 94%; }
.trace-health { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 1rem; border-radius: .85rem; background: rgb(0 0 0 / .22); color: #9fa8bb; font-family: ui-monospace, monospace; font-size: .72rem; }
.trace-health b { color: #fff; }

/* Featured cases */
.case-showcase { display: grid; gap: 1rem; margin-top: 3rem; grid-template-columns: repeat(2, 1fr); }
.case-feature { position: relative; display: grid; min-height: 33rem; border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: transform .25s var(--ease-out), box-shadow .25s, border-color .25s; }
.case-feature--wide { min-height: 30rem; grid-column: 1 / -1; grid-template-columns: .9fr 1.1fr; }
.case-feature__copy { display: flex; min-width: 0; padding: clamp(1.5rem, 4vw, 2.5rem); flex-direction: column; }
.case-number { margin-bottom: auto; color: var(--accent-strong); font-family: ui-monospace, monospace; font-size: .7rem; font-weight: 900; letter-spacing: .08em; }
.case-feature h3 { max-width: 17ch; font-size: clamp(1.8rem, 3.5vw, 3rem); }
.case-feature p { color: var(--text-muted); }
.case-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: auto; padding-top: 1.5rem; color: var(--accent-strong); font-weight: 850; }
.case-visual { position: relative; min-height: 16rem; overflow: hidden; background: #0c0f18; color: #f2f4f8; }
.case-feature:not(.case-feature--wide) .case-visual { order: -1; }
.case-visual::before { position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / .04) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .04) 1px, transparent 1px); background-size: 28px 28px; content: ""; }
.visual-window { position: absolute; inset: 12% 9%; border: 1px solid rgb(255 255 255 / .15); border-radius: 1rem; overflow: hidden; background: rgb(18 22 34 / .9); box-shadow: 0 25px 50px rgb(0 0 0 / .35); transform: rotate(-2deg); }
.visual-window__bar { display: flex; align-items: center; gap: .32rem; padding: .7rem .85rem; border-bottom: 1px solid rgb(255 255 255 / .1); color: #7f8aa2; font-family: ui-monospace, monospace; font-size: .62rem; }
.visual-window__bar i { width: .42rem; aspect-ratio: 1; border-radius: 50%; background: #556077; }.visual-window__bar span { margin-left: .5rem; }
.integration-flow { display: flex; align-items: center; gap: .7rem; padding: 2.1rem 1.3rem 1rem; }
.integration-flow span { padding: .5rem .65rem; border: 1px solid rgb(255 255 255 / .15); border-radius: .55rem; background: rgb(255 255 255 / .05); font-family: ui-monospace, monospace; font-size: .7rem; }
.integration-flow i, .integration-flow b { color: #8d82ff; font-style: normal; }.flow-sub { position: absolute; right: 14%; bottom: 18%; }
.visual-log { margin: 0 1.3rem; padding: 1rem; border-radius: .65rem; background: #090b12; color: #778198; font-family: ui-monospace, monospace; font-size: .65rem; line-height: 1.8; }
.visual-log span { color: #6dd6ad; }
.case-visual--growth { min-height: 18rem; padding: 2rem; background: linear-gradient(145deg, #171133, #0b1220); }
.growth-label { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; color: #aeb5c7; font-size: .75rem; }.growth-label strong { color: #fff; font-size: 2.4rem; }
.case-visual--growth svg { position: relative; z-index: 1; width: 100%; margin-top: 1rem; overflow: visible; }
.chart-grid { fill: none; stroke: rgb(255 255 255 / .08); stroke-width: 1; }.chart-line { fill: none; stroke: #8d82ff; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 8px rgb(141 130 255 / .5)); }.case-visual--growth circle { fill: #55d3e9; }
.case-visual--sequence { min-height: 18rem; padding: 2rem 1.5rem; background: linear-gradient(145deg, #08171a, #10131f); }
.sequence-head { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }.sequence-head span { padding: .5rem; border: 1px solid rgb(255 255 255 / .14); border-radius: .5rem; font-family: ui-monospace, monospace; font-size: .65rem; }
.sequence-lines { position: relative; z-index: 1; display: grid; height: 10rem; grid-template-columns: repeat(3, 1fr); }
.sequence-lines > i { justify-self: center; width: 1px; height: 100%; background: repeating-linear-gradient(to bottom, rgb(255 255 255 / .2) 0 5px, transparent 5px 10px); }
.msg { position: absolute; padding: .25rem .45rem; border-radius: .35rem; background: rgb(103 87 245 / .22); color: #c9c4ff; font-family: ui-monospace, monospace; font-size: .6rem; font-weight: 600; }.msg--1{top:20%;left:11%}.msg--2{top:49%;left:39%}.msg--3{top:76%;left:12%}

/* Portfolio index */
.section-index { content-visibility: auto; contain-intrinsic-size: 1000px; }
#portfolio { background: color-mix(in srgb, var(--surface-muted) 55%, var(--bg)); }
#portfolio .portfolio-toolbar { position: sticky; z-index: 8; top: calc(var(--header-height) + .75rem); align-items: center; margin-top: 2.5rem; padding: .7rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface-glass); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); }
#portfolio .filter-group { flex: 1; }
.filter-chip { min-height: 2.5rem; border-color: transparent; background: transparent; font-size: .78rem; }
.filter-chip:hover { background: var(--surface); }
.filter-chip[aria-pressed="true"] { box-shadow: 0 6px 14px rgb(103 87 245 / .18); }
.project-search { min-width: min(18rem, 100%); }
.project-search input { min-height: 2.65rem; border-radius: .7rem; }
.portfolio-grid { gap: .75rem; grid-template-columns: repeat(3, 1fr); }
.project-card { min-height: 16.5rem; padding: 1.25rem; border-radius: 1rem; box-shadow: none; }
.project-card__top { align-items: center; }
.project-mark { width: 2.25rem; height: 2.25rem; border-radius: .6rem; }
.project-status { padding: .25rem .48rem; border: 1px solid var(--border); border-radius: 999px; background: transparent; font-size: .62rem; }
.project-card h3 { font-size: 1.18rem; }
.project-card p { font-size: .88rem; }
.project-link { margin-top: auto; font-size: .82rem; }
#open-source { background: #0a0c13; color: #f6f7fb; }
#open-source .lead, #open-source .project-card p, #open-source .project-type { color: #aab3c5; }
#open-source .eyebrow { color: #978cff; }
#open-source .portfolio-grid { grid-template-columns: repeat(4, 1fr); }
#open-source .project-card { border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .045); color: #fff; }
#open-source .project-mark { background: rgb(103 87 245 / .22); color: #b6b0ff; }
#open-source .project-status { border-color: rgb(255 255 255 / .13); color: #929db0; }
#open-source .project-link { color: #bdb7ff; }

/* Process and deliverables */
.process-track { position: relative; display: grid; gap: 0; margin: 3rem 0 0; padding: 0; list-style: none; grid-template-columns: repeat(4, 1fr); }
.process-track::before { position: absolute; top: 2rem; right: 8%; left: 8%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), var(--cyan), transparent); content: ""; }
.process-step { position: relative; padding: 0 1.1rem; }
.process-step__number { position: relative; z-index: 1; display: grid; width: 4rem; height: 4rem; place-items: center; margin-bottom: 2rem; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--accent-strong); font-family: ui-monospace, monospace; font-weight: 900; box-shadow: 0 0 0 .65rem var(--bg); }
.process-step small { color: var(--accent-strong); font-family: ui-monospace, monospace; font-size: .65rem; font-weight: 900; letter-spacing: .12em; }
.process-step h3 { margin: .45rem 0 .8rem; }
.process-step p { color: var(--text-muted); font-size: .9rem; }
.process-step strong { display: block; padding-top: .7rem; border-top: 1px solid var(--border); font-size: .75rem; }
.deliverables-bento { display: grid; gap: 1rem; margin-top: 3rem; grid-template-columns: repeat(3, 1fr); }
.deliverable-card { position: relative; min-height: 17rem; padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.deliverable-card > span { color: var(--accent-strong); font-family: ui-monospace, monospace; font-size: .7rem; font-weight: 900; }
.deliverable-card h3 { margin-top: 2.4rem; font-size: 1.55rem; }
.deliverable-card p { color: var(--text-muted); }
.deliverable-card code { display: block; margin-top: 2rem; padding: .8rem; border-radius: .6rem; background: var(--surface-muted); color: var(--accent-strong); font-size: .72rem; }
.deliverable-card--large { min-height: 25rem; grid-row: span 2; background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--accent-soft) 45%, var(--surface))); }
.deliverable-card--wide { display: flex; min-height: 9rem; align-items: center; justify-content: space-between; gap: 2rem; grid-column: span 2; }
.deliverable-card--wide h3 { margin-top: 1rem; }
.mini-map { position: absolute; right: 1.5rem; bottom: 1.5rem; left: 1.5rem; height: 7rem; }
.mini-map i { position: absolute; width: 2.5rem; height: 2rem; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: .45rem; background: var(--surface); }.mini-map i:nth-child(1){left:0;top:0}.mini-map i:nth-child(2){right:0;top:0}.mini-map i:nth-child(3){left:0;bottom:0}.mini-map i:nth-child(4){right:0;bottom:0}.mini-map b{position:absolute;width:2.8rem;height:2.8rem;inset:50% auto auto 50%;border-radius:.65rem;background:var(--accent);transform:translate(-50%,-50%)}
.contract-lines { display: grid; gap: .55rem; margin-top: 2rem; }.contract-lines i { height: .55rem; border-radius: 999px; background: linear-gradient(90deg, var(--accent-soft), var(--surface-muted)); }.contract-lines i:nth-child(2){width:76%}.contract-lines i:nth-child(3){width:55%}

/* Project navigator */
.project-navigator { display: grid; align-items: start; gap: clamp(2rem, 6vw, 6rem); grid-template-columns: .75fr 1.25fr; }
.project-navigator__intro { position: sticky; top: calc(var(--header-height) + 2rem); }
.navigator-panel { display: grid; min-width: 0; gap: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-md); grid-template-columns: .9fr 1.1fr; }
.navigator-options { display: grid; gap: .55rem; }
.navigator-options button { display: grid; min-height: 5.2rem; align-items: center; gap: .15rem .75rem; padding: .8rem 1rem; border: 1px solid transparent; border-radius: .9rem; background: transparent; color: var(--text); text-align: left; grid-template-columns: 2.1rem 1fr; }
.navigator-options button:hover { background: var(--surface-muted); }
.navigator-options button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); background: var(--accent-soft); }
.navigator-options button > span { align-self: start; color: var(--accent-strong); font-family: ui-monospace, monospace; font-size: .68rem; font-weight: 900; grid-row: 1 / 3; }
.navigator-options strong { font-size: .9rem; }.navigator-options small { color: var(--text-muted); }
.navigator-result { display: flex; min-height: 26rem; padding: clamp(1.4rem, 3vw, 2.1rem); border-radius: 1.45rem; background: #0d1018; color: #f4f5fa; flex-direction: column; }
.navigator-result__label { color: #9187ff; font-family: ui-monospace, monospace; font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.navigator-result h3 { margin: 3rem 0 1rem; font-size: clamp(1.7rem, 3vw, 2.5rem); }
.navigator-result p { color: #aab3c5; }
.navigator-result ul { display: grid; gap: .6rem; margin: 1rem 0 2rem; padding: 0; list-style: none; }
.navigator-result li { display: flex; align-items: center; gap: .6rem; }.navigator-result li::before{color:#6dd6ad;content:"✓";font-weight:900}
.navigator-result .btn { width: fit-content; margin-top: auto; }

/* Tools promotion */
.tools-promo__grid { position: relative; display: grid; align-items: center; gap: clamp(3rem, 8vw, 8rem); grid-template-columns: .85fr 1.15fr; }
.tools-promo h2 { max-width: 13ch; }
.lab-terminal { border: 1px solid rgb(255 255 255 / .12); border-radius: 1.2rem; overflow: hidden; background: #080a10; box-shadow: 0 35px 90px rgb(0 0 0 / .42); transform: rotate(1.5deg); }
.lab-terminal__bar, .lab-terminal__footer { display: flex; min-height: 3rem; align-items: center; gap: .7rem; padding: 0 1rem; border-bottom: 1px solid rgb(255 255 255 / .08); color: #778198; font-family: ui-monospace, monospace; font-size: .65rem; }
.lab-terminal__bar code { margin-right: auto; }.lab-terminal__footer { min-height: 2.5rem; justify-content: space-between; border-top: 1px solid rgb(255 255 255 / .08); border-bottom: 0; }
.lab-terminal__body { min-height: 18rem; padding: 1.7rem; color: #c9ced9; font-family: ui-monospace, monospace; font-size: .78rem; }
.lab-terminal__body p { margin-bottom: .75rem; }.lab-terminal__body p > span { color: #8f84ff; }.terminal-success { color: #68d7ad; }.terminal-output { margin-left: 1rem; padding: .85rem; border-left: 2px solid #6757f5; background: rgb(255 255 255 / .035); color: #8690a5; }
.terminal-cursor { display: inline-block; width: .55rem; height: 1rem; background: #8f84ff; animation: terminal-blink 1s steps(1) infinite; }

/* Contact */
.contact-section { background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--accent-soft) 38%, var(--bg))); }
.contact-shell { display: grid; align-items: start; gap: clamp(2.5rem, 7vw, 7rem); grid-template-columns: .9fr 1.1fr; }
.contact-intro { position: sticky; top: calc(var(--header-height) + 2rem); }
.contact-intro h2 { max-width: 13ch; }
.contact-direct { display: grid; gap: .55rem; margin-top: 2rem; }
.contact-direct a { display: grid; align-items: center; gap: .2rem 1rem; padding: .85rem 0; border-bottom: 1px solid var(--border); text-decoration: none; grid-template-columns: 1fr auto; }
.contact-direct a > span { color: var(--text-muted); font-size: .72rem; grid-column: 1; }.contact-direct a > strong { font-size: .9rem; grid-column: 1; }.contact-direct a > i { color: var(--accent-strong); font-style: normal; grid-column: 2; grid-row: 1 / 3; }
.form-card { padding: clamp(1.2rem, 3vw, 2rem); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.form-row { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
input, textarea, select { border-radius: .75rem; background: color-mix(in srgb, var(--bg) 74%, var(--surface)); transition: border-color .16s, box-shadow .16s, background .16s; }
input:hover, textarea:hover, select:hover { border-color: var(--border-strong); }
input:focus, textarea:focus, select:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); outline: 0; }
textarea { field-sizing: content; min-height: 10rem; }

/* Command palette */
.command-dialog { width: min(38rem, calc(100% - 2rem)); max-height: min(42rem, calc(100svh - 3rem)); padding: 0; border: 1px solid var(--border); border-radius: 1.25rem; overflow: hidden; background: var(--surface); color: var(--text); box-shadow: 0 35px 120px rgb(4 6 16 / .35); }
.command-dialog::backdrop { background: rgb(6 8 15 / .52); backdrop-filter: blur(6px); }
.command-search { display: flex; align-items: center; gap: .75rem; padding: .85rem; border-bottom: 1px solid var(--border); }
.command-search > span { color: var(--accent-strong); font-family: ui-monospace, monospace; font-weight: 900; }
.command-search input { min-height: 3rem; border: 0; background: transparent; box-shadow: none; }
.command-search input:focus { box-shadow: none; }
.command-close { min-width: 2.4rem; min-height: 2.4rem; border: 0; border-radius: .65rem; background: var(--surface-muted); color: var(--text); }
.command-results { display: grid; gap: .25rem; max-height: 30rem; margin: 0; padding: .65rem; overflow: auto; list-style: none; }
.command-results a { display: grid; gap: .15rem; padding: .78rem .85rem; border-radius: .72rem; text-decoration: none; }
.command-results a:hover, .command-results a[aria-selected="true"] { background: var(--accent-soft); }
.command-results strong { font-size: .88rem; }.command-results small { color: var(--text-muted); }
.command-empty { padding: 2rem; color: var(--text-muted); text-align: center; }

/* Existing tools get the same design language */
.tools-page .site-header { background: transparent; }
.tools-hero { min-height: 34rem; display: grid; align-items: center; border-bottom: 0; background: transparent; }
.tools-hero::before { position: absolute; inset: 0; background: radial-gradient(circle at 78% 25%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 25rem), linear-gradient(color-mix(in srgb, var(--text) 3%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 3%, transparent) 1px, transparent 1px); background-size: auto, 48px 48px, 48px 48px; mask-image: linear-gradient(#000, transparent); content: ""; }
.tools-hero::after { display: none; }
.tools-hero h1 { max-width: 15ch; font-size: clamp(3rem, 7vw, 6rem); }
.tools-badges li { border-color: color-mix(in srgb, var(--accent) 18%, var(--border)); background: var(--surface-glass); }
.tools-catalog { padding-top: 1rem; }
.tools-toolbar { position: sticky; z-index: 12; top: calc(var(--header-height) + .75rem); border-radius: 1.15rem; background: var(--surface-glass); box-shadow: var(--shadow-md); }
.tools-list { gap: .65rem; }
.tool-card { border-radius: 1rem; box-shadow: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.tool-card[open] { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); box-shadow: var(--shadow-md); }
.tool-summary { min-height: 5.5rem; }
.tool-summary:hover { background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface)); }
.tool-icon { border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: .7rem; background: linear-gradient(145deg, var(--accent-soft), var(--surface)); }
.tool-workspace { gap: .8rem; }
.tool-input, .tool-result { border-radius: 1rem; background: color-mix(in srgb, var(--surface-muted) 55%, var(--surface)); }
.tool-output { min-height: 10rem; background: #0d1018; color: #d6d9e3; }
.tool-index { border-radius: 1.1rem; box-shadow: var(--shadow-sm); }
.tool-index__link { border-color: transparent; background: var(--surface-muted); }
.tool-index__link:hover { background: var(--accent-soft); }

/* Case pages */
.case-layout { gap: clamp(2rem, 7vw, 7rem); }
.case-aside { border-radius: 1.25rem; box-shadow: var(--shadow-md); }
.prose { font-size: 1.03rem; line-height: 1.75; }
.prose h2 { max-width: 19ch; }
.prose ul { padding-left: 1.25rem; }
.prose li::marker { color: var(--accent); }
.note { border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-left-width: 4px; border-radius: 0 .8rem .8rem 0; }
.case-next { display: grid; gap: 1rem; margin-top: 4rem; grid-template-columns: repeat(2, 1fr); }
.case-next a { display: block; padding: 1.2rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); text-decoration: none; }
.case-next small { color: var(--text-muted); }.case-next strong { display: block; margin-top: .3rem; }

/* Modern footer */
.site-footer { padding-block: 2rem; border-top: 1px solid var(--border); background: var(--bg); }
.footer-grid { align-items: center; }
.footer-links { gap: 1rem; }
.footer-links a { color: var(--text-muted); font-size: .8rem; text-decoration: none; }
.footer-links a:hover { color: var(--text); }

@container (max-width: 22rem) {
  .service-card h3 { font-size: 1.55rem; }
  .service-card__head { margin-bottom: 2rem; }
}

@media (hover:hover) {
  .service-card:hover, .case-feature:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: var(--shadow-lg); transform: translateY(-5px); }
  .case-feature:hover .case-link { transform: translateX(.3rem); }
  .case-link { transition: transform .2s; }
  .project-card:hover { transform: translateY(-3px); }
}

@keyframes map-dash { to { stroke-dashoffset: -100; } }
@keyframes terminal-blink { 50% { opacity: 0; } }

@media (max-width: 72rem) {
  .nav-links a { padding-inline: .58rem; }
  .command-button span { display: none; }
  .hero-shell { grid-template-columns: 1fr 26rem; }
  .service-bento { grid-template-columns: repeat(2, 1fr); }
  .service-card--primary { grid-row: span 1; }
  .service-card--wide { grid-column: 1 / -1; }
  #open-source .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 58rem) {
  .section-heading, .hero-shell, .system-thinking, .project-navigator, .tools-promo__grid, .contact-shell { grid-template-columns: 1fr; }
  .site-header .navbar { margin-top: .35rem; }
  .hero { min-height: auto; }
  .hero-copy h1 { max-width: 12ch; }
  .system-map { width: min(100%, 36rem); margin-inline: auto; transform: none; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stat:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }.hero-stat:nth-child(4){border-top:1px solid var(--border)}
  .case-feature--wide { grid-template-columns: 1fr; }.case-feature--wide .case-visual{min-height:20rem;order:-1}
  .process-track { gap: 1rem; grid-template-columns: repeat(2, 1fr); }.process-track::before{display:none}.process-step{padding:0}.process-step__number{margin-bottom:1.25rem;box-shadow:none}
  .deliverables-bento { grid-template-columns: repeat(2, 1fr); }.deliverable-card--large{grid-row:span 1}.deliverable-card--wide{grid-column:1/-1}
  .project-navigator__intro, .contact-intro { position: static; }
  .navigator-panel { grid-template-columns: 1fr; }.navigator-result{min-height:22rem}
  #open-source .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 46rem) {
  h1 { font-size: clamp(2.8rem, 14vw, 4.4rem); }
  h2 { font-size: clamp(2.1rem, 10vw, 3.2rem); }
  .section { padding-block: 5rem; }
  .site-header .navbar { padding-left: .75rem; }
  .command-button { display: none; }
  .hero { padding-top: 3.5rem; }
  .hero-capabilities { gap: .55rem; }
  .system-map__canvas { min-height: 24rem; }
  .map-node { min-width: 6.4rem; padding: .6rem; }.map-node strong{font-size:.68rem}.map-node small{font-size:.55rem}.map-core{min-width:7.7rem}.system-map__links{opacity:.7}
  .service-bento, .case-showcase, .deliverables-bento, .portfolio-grid, #open-source .portfolio-grid { grid-template-columns: 1fr; }
  .service-card--wide, .deliverable-card--wide { display: block; grid-column: auto; }
  .delivery-loop { width: fit-content; max-width: 100%; margin-top: 1.5rem; overflow-x: auto; }
  .case-feature--wide { grid-column: auto; }
  .case-feature { min-height: 29rem; }
  #portfolio .portfolio-toolbar { position: static; align-items: stretch; flex-direction: column; }
  .project-search { min-width: 100%; }
  .process-track { grid-template-columns: 1fr; }.process-step{display:grid;gap:1rem;grid-template-columns:3.4rem 1fr}.process-step__number{width:3.4rem;height:3.4rem;margin:0}.process-step>div{padding-bottom:1.5rem;border-bottom:1px solid var(--border)}
  .trace-row { grid-template-columns: 2rem 1fr; }.trace-row small,.trace-row i{grid-column:2}.trace-health{flex-direction:column}
  .navigator-panel { padding: .65rem; }.navigator-result{padding:1.3rem}
  .form-row { grid-template-columns: 1fr; }
  .hero-stats { margin-top: 3rem; }
  .hero-stat { padding: 1rem .7rem; }
  .hero-stat strong { font-size: 1.8rem; }
  .tools-toolbar { position: static; }
  .tool-summary { padding: .8rem; }
  .case-next { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .system-map__links path, .terminal-cursor { animation: none !important; }
  @view-transition { navigation: none; }
}

/* v6 tool page composition */
.tools-hero-grid { position: relative; z-index: 1; display: grid; align-items: center; gap: clamp(2.5rem, 7vw, 7rem); grid-template-columns: minmax(0, 1fr) minmax(22rem, .75fr); }
.tools-orbit { position: relative; width: min(100%, 28rem); aspect-ratio: 1; margin-inline: auto; }
.tools-orbit::before { position: absolute; inset: 7%; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 9%, transparent), transparent 56%); content: ""; }
.tools-orbit__core { position: absolute; z-index: 3; display: grid; width: 9.5rem; height: 9.5rem; place-content: center; gap: .2rem; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 2rem; background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--accent-soft) 52%, var(--surface))); box-shadow: 0 25px 65px rgb(103 87 245 / .18); inset: 50% auto auto 50%; text-align: center; transform: translate(-50%,-50%) rotate(4deg); }
.tools-orbit__core > span { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; margin: 0 auto .45rem; border-radius: .75rem; background: var(--accent); color: #fff; font-family: ui-monospace, monospace; font-weight: 900; }
.tools-orbit__core strong { font-size: .88rem; }.tools-orbit__core small { color: var(--text-muted); font-size: .65rem; }
.orbit-ring { position: absolute; border: 1px dashed color-mix(in srgb, var(--accent) 34%, var(--border)); border-radius: 50%; inset: 12%; animation: orbit-spin 26s linear infinite; }.orbit-ring--two { inset: 27%; animation-direction: reverse; animation-duration: 18s; }
.orbit-item { position: absolute; z-index: 2; display: grid; min-width: 3rem; height: 3rem; place-items: center; padding-inline: .55rem; border: 1px solid var(--border); border-radius: .85rem; background: var(--surface); box-shadow: var(--shadow-md); color: var(--accent-strong); font-family: ui-monospace, monospace; font-size: .7rem; font-weight: 900; }
.orbit-item--json { top: 6%; left: 42%; }.orbit-item--api { top: 42%; right: 2%; }.orbit-item--data { right: 24%; bottom: 5%; }.orbit-item--sha { bottom: 22%; left: 4%; }
.tools-layout { display: grid; align-items: start; gap: 1rem; grid-template-columns: minmax(14rem, .3fr) minmax(0, 1fr); }
.tools-layout .tool-index { position: sticky; top: calc(var(--header-height) + 8.5rem); max-height: calc(100svh - var(--header-height) - 10rem); overflow: auto; }
.tools-layout .tool-index__links { display: grid; }
.tools-layout .tool-index__link { width: 100%; }
@keyframes orbit-spin { to { transform: rotate(1turn); } }
@media (max-width: 58rem) { .tools-hero-grid, .tools-layout { grid-template-columns: 1fr; }.tools-orbit { width: min(80vw, 24rem); }.tools-layout .tool-index { position: static; max-height: none; }.tools-layout .tool-index__links { display: flex; } }
@media (prefers-reduced-motion: reduce) { .orbit-ring { animation: none !important; } }

/* v6 case storytelling */
.case-hero { position: relative; min-height: 48rem; display: grid; align-items: center; padding: clamp(5rem, 9vw, 8rem) 0 4rem; overflow: clip; }
.case-grid-bg { position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 76% 28%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 25rem), linear-gradient(color-mix(in srgb, var(--text) 3%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 3%, transparent) 1px, transparent 1px); background-size: auto, 50px 50px, 50px 50px; mask-image: linear-gradient(#000, transparent 95%); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 3rem; color: var(--text-muted); font-size: .75rem; }
.breadcrumb a { text-decoration: none; }.breadcrumb a:hover { color: var(--accent-strong); }
.case-hero__grid { display: grid; align-items: center; gap: clamp(2.5rem, 7vw, 7rem); grid-template-columns: 1fr .9fr; }
.case-hero h1 { max-width: 12ch; }
.case-meta-strip { display: grid; gap: 1px; margin-top: 2.5rem; border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; background: var(--border); grid-template-columns: repeat(3, 1fr); }
.case-meta-strip > div { display: grid; gap: .25rem; padding: .85rem; background: var(--surface-glass); backdrop-filter: blur(10px); }
.case-meta-strip small { color: var(--text-muted); font-family: ui-monospace, monospace; font-size: .58rem; letter-spacing: .08em; }.case-meta-strip strong { font-size: .76rem; }
.case-blueprint { border: 1px solid color-mix(in srgb, var(--border) 82%, transparent); border-radius: 1.35rem; overflow: hidden; background: #0b0e16; color: #eef0f7; box-shadow: 0 30px 90px rgb(15 17 35 / .25); transform: perspective(1100px) rotateY(-3deg) rotateX(1deg); }
.case-blueprint__bar, .case-blueprint__status { display: flex; min-height: 3rem; align-items: center; gap: .35rem; padding: 0 .9rem; border-bottom: 1px solid rgb(255 255 255 / .09); color: #7b8499; font-family: ui-monospace, monospace; font-size: .62rem; }
.case-blueprint__bar i { width: .45rem; aspect-ratio: 1; border-radius: 50%; background: #4d566b; }.case-blueprint__bar i:first-child{background:#ff6b66}.case-blueprint__bar i:nth-child(2){background:#f7bf4f}.case-blueprint__bar i:nth-child(3){background:#4ac26b}.case-blueprint__bar code{margin-left:.5rem}
.case-blueprint__status { justify-content: space-between; border-top: 1px solid rgb(255 255 255 / .09); border-bottom: 0; }
.case-blueprint__canvas { position: relative; min-height: 27rem; background: radial-gradient(circle at 50% 50%, rgb(103 87 245 / .14), transparent 13rem), linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px); background-size: auto, 28px 28px, 28px 28px; }
.case-blueprint__canvas svg { position: absolute; width: 100%; height: 100%; inset: 0; }.case-blueprint__canvas path { fill:none;stroke:#655bf2;stroke-width:1.4;stroke-dasharray:6 7;animation:map-dash 14s linear infinite; }
.bp-node, .bp-core { position: absolute; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / .13); border-radius: .65rem; background: rgb(255 255 255 / .055); font-family: ui-monospace, monospace; font-size: .62rem; }
.bp-node { width: 5.5rem; height: 2.7rem; }.bp-node--a{top:11%;left:8%}.bp-node--b{top:9%;right:8%}.bp-node--c{right:8%;bottom:12%}.bp-node--d{left:8%;bottom:10%}.bp-core{width:4.4rem;height:4.4rem;inset:50% auto auto 50%;border-color:#776df6;background:#6757f5;color:#fff;font-weight:900;transform:translate(-50%,-50%)}
.case-growth { min-height: 27rem; padding: 2rem; background: radial-gradient(circle at 80% 20%, rgb(103 87 245 / .2), transparent 16rem); }
.case-growth > div { display:grid;gap:.3rem; }.case-growth small{color:#8993a8}.case-growth strong{font-size:4rem;line-height:1;color:#fff}.case-growth span{color:#b1b8c8}.case-growth svg{width:100%;margin-top:2rem;overflow:visible}.case-chart-grid{fill:none;stroke:rgb(255 255 255 / .07)}.case-chart-path{fill:none;stroke:#8c82ff;stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 9px rgb(140 130 255 / .45))}.case-growth circle{fill:#55d3e9}
.case-sequence { min-height: 27rem; padding: 2rem 1rem; }.case-sequence__heads{display:grid;gap:.5rem;grid-template-columns:repeat(4,1fr)}.case-sequence__heads span{padding:.55rem .25rem;border:1px solid rgb(255 255 255 / .13);border-radius:.5rem;text-align:center;font-family:ui-monospace,monospace;font-size:.58rem}.case-sequence__body{position:relative;display:grid;height:18rem;grid-template-columns:repeat(4,1fr)}.case-sequence__body>i{justify-self:center;width:1px;height:100%;background:repeating-linear-gradient(to bottom,rgb(255 255 255 / .18) 0 5px,transparent 5px 10px)}.case-sequence__body b{position:absolute;padding:.25rem .45rem;border-radius:.35rem;background:rgb(103 87 245 / .2);color:#c6c0ff;font-family:ui-monospace,monospace;font-size:.56rem}.seq-a{top:15%;left:8%}.seq-b{top:37%;left:29%}.seq-c{top:60%;left:42%}.seq-d{top:80%;left:18%}
.case-content { background: color-mix(in srgb, var(--surface-muted) 65%, var(--bg)); }
.case-content .case-layout { align-items: start; }
.utility-page main, .content-page main { min-height: calc(100svh - var(--header-height) - 8rem); }
@media (max-width:58rem){.case-hero__grid{grid-template-columns:1fr}.case-blueprint{width:min(100%,34rem);margin-inline:auto;transform:none}.case-meta-strip{grid-template-columns:1fr}.case-hero{min-height:auto}}
@media (max-width:40rem){.case-blueprint__canvas,.case-growth,.case-sequence{min-height:22rem}.case-sequence__heads span{font-size:.5rem}.case-hero{padding-top:4rem}}
@media (prefers-reduced-motion:reduce){.case-blueprint__canvas path{animation:none!important}}

/* v6.1 visual stability and headline refinement */
.section-index { content-visibility: visible; contain-intrinsic-size: none; }
.hero-copy h1 { max-width: 11.8ch; font-size: clamp(3.1rem, 6.2vw, 5.8rem); }
@media (max-width: 46rem) { .hero-copy h1 { max-width: 12ch; font-size: clamp(2.75rem, 13vw, 4.15rem); } }

/* Portfolio density control */
.portfolio-view { display: flex; flex: 0 0 auto; gap: .2rem; padding: .2rem; border: 1px solid var(--border); border-radius: .65rem; background: var(--surface); }
.portfolio-view button { display: grid; width: 2.1rem; height: 2.1rem; place-items: center; border: 0; border-radius: .45rem; background: transparent; color: var(--text-muted); font-size: 1rem; }
.portfolio-view button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.portfolio-grid[data-view="list"] { grid-template-columns: 1fr; }
.portfolio-grid[data-view="list"] .project-card { display: grid; min-height: auto; align-items: center; gap: .5rem 1.2rem; padding: 1rem 1.1rem; grid-template-columns: 9rem minmax(12rem, .75fr) minmax(16rem, 1.4fr) auto; }
.portfolio-grid[data-view="list"] .project-card__top { grid-column: 1; grid-row: 1 / 3; }
.portfolio-grid[data-view="list"] .project-type { margin: 0; grid-column: 2; }
.portfolio-grid[data-view="list"] .project-card h3 { margin: 0; grid-column: 2; }
.portfolio-grid[data-view="list"] .project-card > p:not(.project-type) { margin: 0; grid-column: 3; grid-row: 1 / 3; }
.portfolio-grid[data-view="list"] .project-link { margin: 0; text-align: right; grid-column: 4; grid-row: 1 / 3; }
@media (max-width:58rem){.portfolio-view{display:none}.portfolio-grid[data-view="list"]{grid-template-columns:repeat(2,1fr)}.portfolio-grid[data-view="list"] .project-card{display:flex;min-height:16.5rem;padding:1.25rem}.portfolio-grid[data-view="list"] .project-card__top,.portfolio-grid[data-view="list"] .project-type,.portfolio-grid[data-view="list"] .project-card h3,.portfolio-grid[data-view="list"] .project-card>p:not(.project-type),.portfolio-grid[data-view="list"] .project-link{grid-column:auto;grid-row:auto;text-align:left}.portfolio-grid[data-view="list"] .project-link{margin-top:auto}}
@media (max-width:46rem){.portfolio-grid[data-view="list"]{grid-template-columns:1fr}}

/* Less intrusive consent surface */
.consent { right: auto; bottom: 1rem; left: 50%; display: grid; width: min(56rem, calc(100% - 2rem)); max-width: none; align-items: center; gap: 1rem 1.5rem; padding: .9rem 1rem; border-radius: 1rem; grid-template-columns: minmax(0, 1fr) auto; transform: translateX(-50%); }
.consent strong { font-size: .86rem; }
.consent p { margin: .12rem 0 0; font-size: .78rem; }
.consent-actions { flex-wrap: nowrap; }
.consent[hidden] { display: none; }
@media (max-width: 40rem) { .consent { align-items: stretch; grid-template-columns: 1fr; }.consent-actions .btn { flex: 1; } }

/* v6 utility and editorial pages */
.utility-page {
  min-height: 100svh;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 24rem),
    radial-gradient(circle at 84% 76%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 22rem),
    var(--bg);
}
.utility-page main {
  display: grid;
  min-height: calc(100svh - var(--header-height));
  place-items: center;
  padding: clamp(5rem, 12vw, 9rem) 1rem 4rem;
}
.utility-page .prose {
  width: min(100%, 48rem);
  padding: clamp(1.5rem, 5vw, 3.5rem);
  border: 1px solid var(--border);
  border-radius: clamp(1.25rem, 3vw, 2rem);
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(18px);
}
.utility-page .prose h1 { max-width: 12ch; margin-bottom: 1rem; font-size: clamp(3.5rem, 12vw, 7rem); }
.utility-page .prose p { max-width: 55ch; color: var(--text-muted); }
.content-page main { padding-top: clamp(6rem, 10vw, 9rem); }
.content-page .prose {
  width: min(100% - 2rem, 52rem);
  margin-inline: auto;
  padding: clamp(1.4rem, 4vw, 3rem);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.content-page .prose h1 { max-width: 15ch; }
.content-page .prose h2 { margin-top: 2.5rem; }
.content-page .prose a { color: var(--accent-strong); text-underline-offset: .2em; }

/* Accessible focus and modern selection treatment */
::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); color: var(--text); }
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 46%, transparent);
  outline-offset: 3px;
}

@supports (view-transition-name: none) {
  .brand-name { view-transition-name: brand; }
  main { view-transition-name: page-content; }
  ::view-transition-old(page-content) { animation: .16s ease both fade-out; }
  ::view-transition-new(page-content) { animation: .28s .04s ease both fade-in; }
}
@keyframes fade-out { to { opacity: 0; transform: translateY(-.25rem); } }
@keyframes fade-in { from { opacity: 0; transform: translateY(.35rem); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}