/* ============================================================
   Breno Gerude - Consulting Landing
   Modern - minimalist - tech/geek
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* Container */
  --container-max: 1200px;
  --container-pad: clamp(20px, 4vw, 40px);
}

/* Colour - dark only. There is no light theme; this is the single source. */
:root {
  color-scheme: dark;
  --bg: #0b0d10;
  --bg-elev: #101318;
  --surface: #12161c;
  --surface-2: #171c23;
  --border: #1e242c;
  --border-strong: #2a323d;
  --text: #e6e9ee;
  --text-muted: #939aa6;
  --text-dim: #767f8c;

  --accent: #7fa6cc;
  --accent-soft: rgba(127, 166, 204, 0.12);
  --accent-strong: #9dc0e6;
  /* Accent-tinted rules and borders - too dark for text, right for hairlines. */
  --accent-deep: #2f4d6b;

  --ok: #8fb996;

  --grid: rgba(255, 255, 255, 0.035);

  --shadow-md: 0 1px 0 0 rgba(255, 255, 255, 0.02), 0 10px 28px -18px rgba(0, 0, 0, 0.7);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  font-size: 16px;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--accent); color: var(--bg); }

/* ---------- Grid background ---------- */
.grid-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 70%);
}

/* ---------- Layout ---------- */
/* The viewport is declared viewport-fit=cover, so the insets are ours to
   handle. max() keeps the normal padding on every device that reports none. */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: max(var(--container-pad), env(safe-area-inset-left));
  padding-right: max(var(--container-pad), env(safe-area-inset-right));
}

/* Vertical longhands only. A `padding: X 0` shorthand on an element that also
   carries .container resets the horizontal gutter to zero, which only shows
   below 1200px where the auto margin stops covering for it. */
.section { padding-top: var(--s-9); padding-bottom: var(--s-9); }
.section__head {
  max-width: 720px;
  margin: 0 0 var(--s-7);
}
.section__lede {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin: var(--s-3) 0 0;
}

.mono { font-family: var(--font-mono); font-feature-settings: 'ss01' on, 'cv11' on; }

.kicker {
  display: inline-block;
  color: var(--accent);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin-bottom: var(--s-3);
}

.h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
}

.display {
  font-size: clamp(2.4rem, 5.2vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: var(--s-4) 0 var(--s-5);
}
.display em {
  font-style: normal;
  color: var(--accent);
  position: relative;
}
/* A rule under the phrase, not a highlighter swipe across it. */
.display em::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent);
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  height: 64px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.brand__mark {
  width: 32px; height: 32px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--accent);
}
.brand__name { font-family: var(--font-mono); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; }
.brand__dot { color: var(--accent); }

.nav__links { display: flex; gap: var(--s-6); }
.nav__links a {
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 500;
  transition: color 0.15s ease;
}

.nav__actions { display: flex; align-items: center; gap: var(--s-3); }

/* Phone-only; the 640px block turns it on. */
.nav__mobile { display: none; }


/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-weight: 500; font-size: 0.95rem;
  line-height: 1; letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: transform 0.08s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--sm { padding: 8px 12px; font-size: 0.88rem; }
.btn--lg { padding: 14px 20px; font-size: 1rem; }
.btn--primary {
  background: var(--accent);
  color: #08121b;
  border-color: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-soft);
}
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}

.btn__dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: currentColor; opacity: 0.85;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.18);
}

/* ---------- Hero ---------- */
.hero {
  padding-top: var(--s-9);
  padding-bottom: var(--s-9);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--s-8);
  align-items: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.82rem;
}
.eyebrow__pulse {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--accent);
  flex: 0 0 7px;
}

.lede {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 60ch;
}
.lede strong { color: var(--text); font-weight: 600; }
.lede .mono { color: var(--accent); font-size: 0.95em; }

.hero__cta {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-6);
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px dashed var(--border-strong);
}
.hero__stats div { display: flex; flex-direction: column; gap: 4px; }
.hero__stats dt {
  font-family: var(--font-mono);
  color: var(--text-dim);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero__stats dd {
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}

/* Terminal panel. min-width:0 because a grid item defaults to min-content
   width: without it the non-wrapping terminal lines widen the whole column
   and push the page into horizontal scroll. */
.hero__panel { position: relative; min-width: 0; }
.panel {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.panel__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
/* Monochrome, not macOS traffic lights. */
.dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; background: var(--border-strong); }
.panel__title { color: var(--text-muted); font-size: 0.78rem; margin-left: 8px; }

.panel__body { padding: 18px 20px; font-size: 0.88rem; color: var(--text); overflow-x: auto; }
/* A terminal does not reflow its output, and letting it wrap broke
   "hands-on-dev/" across two lines at the hyphen. Scroll instead. */
.panel__body p { margin: 0 0 4px; white-space: pre; }
.panel__body .prompt { color: var(--accent); margin-right: 8px; }
.panel__body .out { color: var(--text-muted); padding-left: 18px; }
.panel__body .ok { color: var(--ok); }

/* Solid block cursor. No blink - the page carries no infinite animation. */
.caret {
  display: inline-block;
  width: 8px;
  background: var(--text-muted);
  color: transparent;
  margin-left: 2px;
}

/* ---------- Failure patterns strip ---------- */
.patterns {
  display: flex; align-items: center; gap: var(--s-5);
  padding-top: var(--s-6); padding-bottom: var(--s-6);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.patterns__label { color: var(--text-dim); font-size: 0.85rem; }
.patterns__list {
  display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-6);
}
/* The marker is in flow on every item, not absolutely positioned between
   pairs. A separator between pairs orphans a leading dot on every wrapped
   line; a marker on each item cannot. */
.patterns__list li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 500;
}
.patterns__list li::before {
  content: '';
  flex: 0 0 3px;
  width: 3px; height: 3px;
  border-radius: 999px;
  background: var(--accent-deep);
}

/* ---------- Services cards ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}
/* Odd card count: the last one spans the row instead of sitting half-width alone. */
.services-grid > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.card {
  position: relative;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-4);
  transition: border-color 0.2s ease;
}
.card__head { display: flex; align-items: baseline; gap: var(--s-3); }
.card__index { color: var(--text-dim); font-size: 0.85rem; }
.card__title {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}
/* A card goes full width at one column; without a measure cap that is a
   100-character line. */
.card p { color: var(--text-muted); margin: 0; max-width: 68ch; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.tags li {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-muted);
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elev);
}

/* ---------- Stack ---------- */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
}
.stack-col {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--s-5);
  background: var(--surface);
}
.stack-col__title { color: var(--text-dim); font-size: 0.82rem; margin: 0 0 var(--s-4); font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--text);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Icon glyph inside chip - masked SVG inherits chip color */
.chips li[data-icon]::before {
  content: '';
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  background-color: currentColor;
  opacity: 0.75;
  -webkit-mask: var(--ic, none) center/contain no-repeat;
  mask: var(--ic, none) center/contain no-repeat;
}

/* >>> GENERATED ICONS - do not edit by hand; run ./scripts/build-icons.py <<< */
/* Sources: assets/icons/ - simple-icons@13.21.0, lucide-static@1.31.0 */
.chips li[data-icon="typescript"] { --ic: url('data:image/svg+xml,%3Csvg role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Ctitle%3ETypeScript%3C/title%3E%3Cpath d=%22M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z%22/%3E%3C/svg%3E'); }
.chips li[data-icon="go"] { --ic: url('data:image/svg+xml,%3Csvg role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Ctitle%3EGo%3C/title%3E%3Cpath d=%22M1.811 10.231c-.047 0-.058-.023-.035-.059l.246-.315c.023-.035.081-.058.128-.058h4.172c.046 0 .058.035.035.07l-.199.303c-.023.036-.082.07-.117.07zM.047 11.306c-.047 0-.059-.023-.035-.058l.245-.316c.023-.035.082-.058.129-.058h5.328c.047 0 .07.035.058.07l-.093.28c-.012.047-.058.07-.105.07zm2.828 1.075c-.047 0-.059-.035-.035-.07l.163-.292c.023-.035.07-.07.117-.07h2.337c.047 0 .07.035.07.082l-.023.28c0 .047-.047.082-.082.082zm12.129-2.36c-.736.187-1.239.327-1.963.514-.176.046-.187.058-.34-.117-.174-.199-.303-.327-.548-.444-.737-.362-1.45-.257-2.115.175-.795.514-1.204 1.274-1.192 2.22.011.935.654 1.706 1.577 1.835.795.105 1.46-.175 1.987-.77.105-.13.198-.27.315-.434H10.47c-.245 0-.304-.152-.222-.35.152-.362.432-.97.596-1.274a.315.315 0 01.292-.187h4.253c-.023.316-.023.631-.07.947a4.983 4.983 0 01-.958 2.29c-.841 1.11-1.94 1.8-3.33 1.986-1.145.152-2.209-.07-3.143-.77-.865-.655-1.356-1.52-1.484-2.595-.152-1.274.222-2.419.993-3.424.83-1.086 1.928-1.776 3.272-2.02 1.098-.2 2.15-.07 3.096.571.62.41 1.063.97 1.356 1.648.07.105.023.164-.117.2m3.868 6.461c-1.064-.024-2.034-.328-2.852-1.029a3.665 3.665 0 01-1.262-2.255c-.21-1.32.152-2.489.947-3.529.853-1.122 1.881-1.706 3.272-1.95 1.192-.21 2.314-.095 3.33.595.923.63 1.496 1.484 1.648 2.605.198 1.578-.257 2.863-1.344 3.962-.771.783-1.718 1.273-2.805 1.495-.315.06-.63.07-.934.106zm2.78-4.72c-.011-.153-.011-.27-.034-.387-.21-1.157-1.274-1.81-2.384-1.554-1.087.245-1.788.935-2.045 2.033-.21.912.234 1.835 1.075 2.21.643.28 1.285.244 1.905-.07.923-.48 1.425-1.228 1.484-2.233z%22/%3E%3C/svg%3E'); }
.chips li[data-icon="kotlin"] { --ic: url('data:image/svg+xml,%3Csvg role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Ctitle%3EKotlin%3C/title%3E%3Cpath d=%22M24 24H0V0h24L12 12Z%22/%3E%3C/svg%3E'); }
.chips li[data-icon="aws"] { --ic: url('data:image/svg+xml,%3Csvg role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Ctitle%3EAmazon Web Services%3C/title%3E%3Cpath d=%22M6.763 10.036c0 .296.032.535.088.71.064.176.144.368.256.576.04.063.056.127.056.183 0 .08-.048.16-.152.24l-.503.335a.383.383 0 0 1-.208.072c-.08 0-.16-.04-.239-.112a2.47 2.47 0 0 1-.287-.375 6.18 6.18 0 0 1-.248-.471c-.622.734-1.405 1.101-2.347 1.101-.67 0-1.205-.191-1.596-.574-.391-.384-.59-.894-.59-1.533 0-.678.239-1.23.726-1.644.487-.415 1.133-.623 1.955-.623.272 0 .551.024.846.064.296.04.6.104.918.176v-.583c0-.607-.127-1.03-.375-1.277-.255-.248-.686-.367-1.3-.367-.28 0-.568.031-.863.103-.295.072-.583.16-.862.272a2.287 2.287 0 0 1-.28.104.488.488 0 0 1-.127.023c-.112 0-.168-.08-.168-.247v-.391c0-.128.016-.224.056-.28a.597.597 0 0 1 .224-.167c.279-.144.614-.264 1.005-.36a4.84 4.84 0 0 1 1.246-.151c.95 0 1.644.216 2.091.647.439.43.662 1.085.662 1.963v2.586zm-3.24 1.214c.263 0 .534-.048.822-.144.287-.096.543-.271.758-.51.128-.152.224-.32.272-.512.047-.191.08-.423.08-.694v-.335a6.66 6.66 0 0 0-.735-.136 6.02 6.02 0 0 0-.75-.048c-.535 0-.926.104-1.19.32-.263.215-.39.518-.39.917 0 .375.095.655.295.846.191.2.47.296.838.296zm6.41.862c-.144 0-.24-.024-.304-.08-.064-.048-.12-.16-.168-.311L7.586 5.55a1.398 1.398 0 0 1-.072-.32c0-.128.064-.2.191-.2h.783c.151 0 .255.025.31.08.065.048.113.16.16.312l1.342 5.284 1.245-5.284c.04-.16.088-.264.151-.312a.549.549 0 0 1 .32-.08h.638c.152 0 .256.025.32.08.063.048.12.16.151.312l1.261 5.348 1.381-5.348c.048-.16.104-.264.16-.312a.52.52 0 0 1 .311-.08h.743c.127 0 .2.065.2.2 0 .04-.009.08-.017.128a1.137 1.137 0 0 1-.056.2l-1.923 6.17c-.048.16-.104.263-.168.311a.51.51 0 0 1-.303.08h-.687c-.151 0-.255-.024-.32-.08-.063-.056-.119-.16-.15-.32l-1.238-5.148-1.23 5.14c-.04.16-.087.264-.15.32-.065.056-.177.08-.32.08zm10.256.215c-.415 0-.83-.048-1.229-.143-.399-.096-.71-.2-.918-.32-.128-.071-.215-.151-.247-.223a.563.563 0 0 1-.048-.224v-.407c0-.167.064-.247.183-.247.048 0 .096.008.144.024.048.016.12.048.2.08.271.12.566.215.878.279.319.064.63.096.95.096.502 0 .894-.088 1.165-.264a.86.86 0 0 0 .415-.758.777.777 0 0 0-.215-.559c-.144-.151-.416-.287-.807-.415l-1.157-.36c-.583-.183-1.014-.454-1.277-.813a1.902 1.902 0 0 1-.4-1.158c0-.335.073-.63.216-.886.144-.255.335-.479.575-.654.24-.184.51-.32.83-.415.32-.096.655-.136 1.006-.136.175 0 .359.008.535.032.183.024.35.056.518.088.16.04.312.08.455.127.144.048.256.096.336.144a.69.69 0 0 1 .24.2.43.43 0 0 1 .071.263v.375c0 .168-.064.256-.184.256a.83.83 0 0 1-.303-.096 3.652 3.652 0 0 0-1.532-.311c-.455 0-.815.071-1.062.223-.248.152-.375.383-.375.71 0 .224.08.416.24.567.159.152.454.304.877.44l1.134.358c.574.184.99.44 1.237.767.247.327.367.702.367 1.117 0 .343-.072.655-.207.926-.144.272-.336.511-.583.703-.248.2-.543.343-.886.447-.36.111-.734.167-1.142.167zM21.698 16.207c-2.626 1.94-6.442 2.969-9.722 2.969-4.598 0-8.74-1.7-11.87-4.526-.247-.223-.024-.527.272-.351 3.384 1.963 7.559 3.153 11.877 3.153 2.914 0 6.114-.607 9.06-1.852.439-.2.814.287.383.607zM22.792 14.961c-.336-.43-2.22-.207-3.074-.103-.255.032-.295-.192-.063-.36 1.5-1.053 3.967-.75 4.254-.399.287.36-.08 2.826-1.485 4.007-.215.184-.423.088-.327-.151.32-.79 1.03-2.57.695-2.994z%22/%3E%3C/svg%3E'); }
.chips li[data-icon="digitalocean"] { --ic: url('data:image/svg+xml,%3Csvg role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Ctitle%3EDigitalOcean%3C/title%3E%3Cpath d=%22M12.04 0C5.408-.02.005 5.37.005 11.992h4.638c0-4.923 4.882-8.731 10.064-6.855a6.95 6.95 0 014.147 4.148c1.889 5.177-1.924 10.055-6.84 10.064v-4.61H7.391v4.623h4.61V24c7.86 0 13.967-7.588 11.397-15.83-1.115-3.59-3.985-6.446-7.575-7.575A12.8 12.8 0 0012.039 0zM7.39 19.362H3.828v3.564H7.39zm-3.563 0v-2.978H.85v2.978z%22/%3E%3C/svg%3E'); }
.chips li[data-icon="postgresql"] { --ic: url('data:image/svg+xml,%3Csvg role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Ctitle%3EPostgreSQL%3C/title%3E%3Cpath d=%22M23.5594 14.7228a.5269.5269 0 0 0-.0563-.1191c-.139-.2632-.4768-.3418-1.0074-.2321-1.6533.3411-2.2935.1312-2.5256-.0191 1.342-2.0482 2.445-4.522 3.0411-6.8297.2714-1.0507.7982-3.5237.1222-4.7316a1.5641 1.5641 0 0 0-.1509-.235C21.6931.9086 19.8007.0248 17.5099.0005c-1.4947-.0158-2.7705.3461-3.1161.4794a9.449 9.449 0 0 0-.5159-.0816 8.044 8.044 0 0 0-1.3114-.1278c-1.1822-.0184-2.2038.2642-3.0498.8406-.8573-.3211-4.7888-1.645-7.2219.0788C.9359 2.1526.3086 3.8733.4302 6.3043c.0409.818.5069 3.334 1.2423 5.7436.4598 1.5065.9387 2.7019 1.4334 3.582.553.9942 1.1259 1.5933 1.7143 1.7895.4474.1491 1.1327.1441 1.8581-.7279.8012-.9635 1.5903-1.8258 1.9446-2.2069.4351.2355.9064.3625 1.39.3772a.0569.0569 0 0 0 .0004.0041 11.0312 11.0312 0 0 0-.2472.3054c-.3389.4302-.4094.5197-1.5002.7443-.3102.064-1.1344.2339-1.1464.8115-.0025.1224.0329.2309.0919.3268.2269.4231.9216.6097 1.015.6331 1.3345.3335 2.5044.092 3.3714-.6787-.017 2.231.0775 4.4174.3454 5.0874.2212.5529.7618 1.9045 2.4692 1.9043.2505 0 .5263-.0291.8296-.0941 1.7819-.3821 2.5557-1.1696 2.855-2.9059.1503-.8707.4016-2.8753.5388-4.1012.0169-.0703.0357-.1207.057-.1362.0007-.0005.0697-.0471.4272.0307a.3673.3673 0 0 0 .0443.0068l.2539.0223.0149.001c.8468.0384 1.9114-.1426 2.5312-.4308.6438-.2988 1.8057-1.0323 1.5951-1.6698zM2.371 11.8765c-.7435-2.4358-1.1779-4.8851-1.2123-5.5719-.1086-2.1714.4171-3.6829 1.5623-4.4927 1.8367-1.2986 4.8398-.5408 6.108-.13-.0032.0032-.0066.0061-.0098.0094-2.0238 2.044-1.9758 5.536-1.9708 5.7495-.0002.0823.0066.1989.0162.3593.0348.5873.0996 1.6804-.0735 2.9184-.1609 1.1504.1937 2.2764.9728 3.0892.0806.0841.1648.1631.2518.2374-.3468.3714-1.1004 1.1926-1.9025 2.1576-.5677.6825-.9597.5517-1.0886.5087-.3919-.1307-.813-.5871-1.2381-1.3223-.4796-.839-.9635-2.0317-1.4155-3.5126zm6.0072 5.0871c-.1711-.0428-.3271-.1132-.4322-.1772.0889-.0394.2374-.0902.4833-.1409 1.2833-.2641 1.4815-.4506 1.9143-1.0002.0992-.126.2116-.2687.3673-.4426a.3549.3549 0 0 0 .0737-.1298c.1708-.1513.2724-.1099.4369-.0417.156.0646.3078.26.3695.4752.0291.1016.0619.2945-.0452.4444-.9043 1.2658-2.2216 1.2494-3.1676 1.0128zm2.094-3.988-.0525.141c-.133.3566-.2567.6881-.3334 1.003-.6674-.0021-1.3168-.2872-1.8105-.8024-.6279-.6551-.9131-1.5664-.7825-2.5004.1828-1.3079.1153-2.4468.079-3.0586-.005-.0857-.0095-.1607-.0122-.2199.2957-.2621 1.6659-.9962 2.6429-.7724.4459.1022.7176.4057.8305.928.5846 2.7038.0774 3.8307-.3302 4.7363-.084.1866-.1633.3629-.2311.5454zm7.3637 4.5725c-.0169.1768-.0358.376-.0618.5959l-.146.4383a.3547.3547 0 0 0-.0182.1077c-.0059.4747-.054.6489-.115.8693-.0634.2292-.1353.4891-.1794 1.0575-.11 1.4143-.8782 2.2267-2.4172 2.5565-1.5155.3251-1.7843-.4968-2.0212-1.2217a6.5824 6.5824 0 0 0-.0769-.2266c-.2154-.5858-.1911-1.4119-.1574-2.5551.0165-.5612-.0249-1.9013-.3302-2.6462.0044-.2932.0106-.5909.019-.8918a.3529.3529 0 0 0-.0153-.1126 1.4927 1.4927 0 0 0-.0439-.208c-.1226-.4283-.4213-.7866-.7797-.9351-.1424-.059-.4038-.1672-.7178-.0869.067-.276.1831-.5875.309-.9249l.0529-.142c.0595-.16.134-.3257.213-.5012.4265-.9476 1.0106-2.2453.3766-5.1772-.2374-1.0981-1.0304-1.6343-2.2324-1.5098-.7207.0746-1.3799.3654-1.7088.5321a5.6716 5.6716 0 0 0-.1958.1041c.0918-1.1064.4386-3.1741 1.7357-4.4823a4.0306 4.0306 0 0 1 .3033-.276.3532.3532 0 0 0 .1447-.0644c.7524-.5706 1.6945-.8506 2.802-.8325.4091.0067.8017.0339 1.1742.081 1.939.3544 3.2439 1.4468 4.0359 2.3827.8143.9623 1.2552 1.9315 1.4312 2.4543-1.3232-.1346-2.2234.1268-2.6797.779-.9926 1.4189.543 4.1729 1.2811 5.4964.1353.2426.2522.4522.2889.5413.2403.5825.5515.9713.7787 1.2552.0696.087.1372.1714.1885.245-.4008.1155-1.1208.3825-1.0552 1.717-.0123.1563-.0423.4469-.0834.8148-.0461.2077-.0702.4603-.0994.7662zm.8905-1.6211c-.0405-.8316.2691-.9185.5967-1.0105a2.8566 2.8566 0 0 0 .135-.0406 1.202 1.202 0 0 0 .1342.103c.5703.3765 1.5823.4213 3.0068.1344-.2016.1769-.5189.3994-.9533.6011-.4098.1903-1.0957.333-1.7473.3636-.7197.0336-1.0859-.0807-1.1721-.151zm.5695-9.2712c-.0059.3508-.0542.6692-.1054 1.0017-.055.3576-.112.7274-.1264 1.1762-.0142.4368.0404.8909.0932 1.3301.1066.887.216 1.8003-.2075 2.7014a3.5272 3.5272 0 0 1-.1876-.3856c-.0527-.1276-.1669-.3326-.3251-.6162-.6156-1.1041-2.0574-3.6896-1.3193-4.7446.3795-.5427 1.3408-.5661 2.1781-.463zm.2284 7.0137a12.3762 12.3762 0 0 0-.0853-.1074l-.0355-.0444c.7262-1.1995.5842-2.3862.4578-3.4385-.0519-.4318-.1009-.8396-.0885-1.2226.0129-.4061.0666-.7543.1185-1.0911.0639-.415.1288-.8443.1109-1.3505.0134-.0531.0188-.1158.0118-.1902-.0457-.4855-.5999-1.938-1.7294-3.253-.6076-.7073-1.4896-1.4972-2.6889-2.0395.5251-.1066 1.2328-.2035 2.0244-.1859 2.0515.0456 3.6746.8135 4.8242 2.2824a.908.908 0 0 1 .0667.1002c.7231 1.3556-.2762 6.2751-2.9867 10.5405zm-8.8166-6.1162c-.025.1794-.3089.4225-.6211.4225a.5821.5821 0 0 1-.0809-.0056c-.1873-.026-.3765-.144-.5059-.3156-.0458-.0605-.1203-.178-.1055-.2844.0055-.0401.0261-.0985.0925-.1488.1182-.0894.3518-.1226.6096-.0867.3163.0441.6426.1938.6113.4186zm7.9305-.4114c.0111.0792-.049.201-.1531.3102-.0683.0717-.212.1961-.4079.2232a.5456.5456 0 0 1-.075.0052c-.2935 0-.5414-.2344-.5607-.3717-.024-.1765.2641-.3106.5611-.352.297-.0414.6111.0088.6356.1851z%22/%3E%3C/svg%3E'); }
.chips li[data-icon="mongodb"] { --ic: url('data:image/svg+xml,%3Csvg role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Ctitle%3EMongoDB%3C/title%3E%3Cpath d=%22M17.193 9.555c-1.264-5.58-4.252-7.414-4.573-8.115-.28-.394-.53-.954-.735-1.44-.036.495-.055.685-.523 1.184-.723.566-4.438 3.682-4.74 10.02-.282 5.912 4.27 9.435 4.888 9.884l.07.05A73.49 73.49 0 0111.91 24h.481c.114-1.032.284-2.056.51-3.07.417-.296.604-.463.85-.693a11.342 11.342 0 003.639-8.464c.01-.814-.103-1.662-.197-2.218zm-5.336 8.195s0-8.291.275-8.29c.213 0 .49 10.695.49 10.695-.381-.045-.765-1.76-.765-2.405z%22/%3E%3C/svg%3E'); }
.chips li[data-icon="redis"] { --ic: url('data:image/svg+xml,%3Csvg role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Ctitle%3ERedis%3C/title%3E%3Cpath d=%22M22.71 13.145c-1.66 2.092-3.452 4.483-7.038 4.483-3.203 0-4.397-2.825-4.48-5.12.701 1.484 2.073 2.685 4.214 2.63 4.117-.133 6.94-3.852 6.94-7.239 0-4.05-3.022-6.972-8.268-6.972-3.752 0-8.4 1.428-11.455 3.685C2.59 6.937 3.885 9.958 4.35 9.626c2.648-1.904 4.748-3.13 6.784-3.744C8.12 9.244.886 17.05 0 18.425c.1 1.261 1.66 4.648 2.424 4.648.232 0 .431-.133.664-.365a100.49 100.49 0 0 0 5.54-6.765c.222 3.104 1.748 6.898 6.014 6.898 3.819 0 7.604-2.756 9.33-8.965.2-.764-.73-1.361-1.261-.73zm-4.349-5.013c0 1.959-1.926 2.922-3.685 2.922-.941 0-1.664-.247-2.235-.568 1.051-1.592 2.092-3.225 3.21-4.973 1.972.334 2.71 1.43 2.71 2.619z%22/%3E%3C/svg%3E'); }
.chips li[data-icon="dynamodb"] { --ic: url('data:image/svg+xml,%3Csvg role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Ctitle%3EAmazon DynamoDB%3C/title%3E%3Cpath d=%22M16.606 20.705v-2.371c-1.263 1.082-3.884 1.795-7.066 1.795-3.184 0-5.805-.714-7.068-1.797v2.369c0 1.168 2.903 2.47 7.068 2.47 4.16 0 7.06-1.3 7.066-2.466zm.001-6.765l.817-.005v.005c0 .517-.258.998-.75 1.441.601.54.75 1.071.75 1.449a1661.7 1661.7 0 0 0 0 3.87c0 1.881-3.389 3.3-7.884 3.3-4.471 0-7.846-1.404-7.88-3.27a583.119 583.119 0 0 1-.003-3.909c.001-.375.15-.9.745-1.437-.592-.538-.743-1.062-.746-1.435v-3.892c.002-.377.153-.903.747-1.438-.593-.54-.744-1.062-.747-1.435 0-1.357-.002-2.735.002-3.897C1.674 1.412 5.056 0 9.54 0c2.159 0 4.233.356 5.689.974l-.315.766c-1.36-.58-3.319-.91-5.374-.91-4.165 0-7.067 1.3-7.067 2.47 0 1.168 2.902 2.47 7.067 2.47.115 0 .222 0 .334-.005l.033.828c-.122.006-.245.006-.367.006-3.184 0-5.805-.714-7.068-1.798v2.38c.005.45.45.843.821 1.093 1.116.736 3.114 1.239 5.34 1.342l-.037.829c-2.254-.105-4.23-.59-5.5-1.332-.318.245-.623.573-.623.952 0 1.168 2.902 2.47 7.067 2.47.411 0 .812-.014 1.203-.042l.06.826c-.41.03-.833.045-1.263.045-3.184 0-5.805-.713-7.068-1.797v2.368c.005.462.449.855.821 1.104 1.275.842 3.67 1.366 6.247 1.366h.182v.83H9.54c-2.62 0-4.99-.507-6.444-1.359-.317.245-.623.574-.623.954 0 1.168 2.902 2.47 7.067 2.47 4.159 0 7.058-1.298 7.066-2.465v-.007c0-.377-.303-.705-.62-.948a5.732 5.732 0 0 1-.662.336l-.316-.764c.3-.128.56-.266.776-.412.376-.254.823-.651.823-1.1zm4.377-6.915h-2.717a.406.406 0 0 1-.332-.173.42.42 0 0 1-.055-.375l1.204-3.597h-5.403l-2.583 4.974h2.623c.128 0 .248.06.325.164a.418.418 0 0 1 .069.36l-2.249 8.365zm1.249-.128l-10.89 11.608a.408.408 0 0 1-.498.075.418.418 0 0 1-.192-.471l2.534-9.426h-2.766a.407.407 0 0 1-.349-.2.418.418 0 0 1-.012-.407l3.014-5.804a.408.408 0 0 1 .36-.222h6.22c.132 0 .256.065.332.174a.422.422 0 0 1 .055.374l-1.204 3.598h3.1c.164 0 .31.099.375.251a.422.422 0 0 1-.08.45zM3.085 20.723a8.107 8.107 0 0 0 1.72.72l.233-.794a7.32 7.32 0 0 1-1.546-.645zm1.72-5.984l.233-.795a7.262 7.262 0 0 1-1.546-.646l-.407.72a8.051 8.051 0 0 0 1.72.72zm-1.72-7.427l.407-.719c.418.244.939.462 1.546.646l-.232.794a8.046 8.046 0 0 1-1.72-.72Z%22/%3E%3C/svg%3E'); }
.chips li[data-icon="ddd"] { --ic: url('data:image/svg+xml,%3Csvg class=%22lucide lucide-layers%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpath d=%22M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z%22 /%3E %3Cpath d=%22M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12%22 /%3E %3Cpath d=%22M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17%22 /%3E %3C/svg%3E'); }
.chips li[data-icon="tdd"] { --ic: url('data:image/svg+xml,%3Csvg class=%22lucide lucide-check-circle-2%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E %3Cpath d=%22m9 12 2 2 4-4%22 /%3E %3C/svg%3E'); }
.chips li[data-icon="event"] { --ic: url('data:image/svg+xml,%3Csvg class=%22lucide lucide-activity%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpath d=%22M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2%22 /%3E %3C/svg%3E'); }
.chips li[data-icon="cqrs"] { --ic: url('data:image/svg+xml,%3Csvg class=%22lucide lucide-git-fork%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Ccircle cx=%2212%22 cy=%2218%22 r=%223%22 /%3E %3Ccircle cx=%226%22 cy=%226%22 r=%223%22 /%3E %3Ccircle cx=%2218%22 cy=%226%22 r=%223%22 /%3E %3Cpath d=%22M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9%22 /%3E %3Cpath d=%22M12 12v3%22 /%3E %3C/svg%3E'); }
.chips li[data-icon="microservices"] { --ic: url('data:image/svg+xml,%3Csvg class=%22lucide lucide-boxes%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpath d=%22M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z%22 /%3E %3Cpath d=%22m7 16.5-4.74-2.85%22 /%3E %3Cpath d=%22m7 16.5 5-3%22 /%3E %3Cpath d=%22M7 16.5v5.17%22 /%3E %3Cpath d=%22M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z%22 /%3E %3Cpath d=%22m17 16.5-5-3%22 /%3E %3Cpath d=%22m17 16.5 4.74-2.85%22 /%3E %3Cpath d=%22M17 16.5v5.17%22 /%3E %3Cpath d=%22M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z%22 /%3E %3Cpath d=%22M12 8 7.26 5.15%22 /%3E %3Cpath d=%22m12 8 4.74-2.85%22 /%3E %3Cpath d=%22M12 13.5V8%22 /%3E %3C/svg%3E'); }
/* <<< END GENERATED ICONS >>> */


/* ---------- Timeline ---------- */
.timeline {
  position: relative;
  display: flex; flex-direction: column;
  gap: var(--s-5);
  padding-left: var(--s-6);
  border-left: 1px solid var(--border);
}
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0;
}
.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(var(--s-6) * -1 - 5px);
  top: 28px;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--bg);
  border: 2px solid var(--accent);
}
.timeline__year {
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
  padding-top: 4px;
}
.timeline__body h3 {
  margin: 0 0 var(--s-2);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.timeline__body p { margin: 0 0 var(--s-3); color: var(--text-muted); max-width: 64ch; }
.timeline__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
}

/* ---------- Quotes ---------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
.quote {
  margin: 0;
  padding: var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  display: flex; flex-direction: column; gap: var(--s-5);
}
.quote blockquote { margin: 0; }
.quote blockquote p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  position: relative;
}
.quote blockquote p::before {
  content: '"';
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 2.5rem;
  line-height: 0;
  position: relative;
  top: 12px;
  margin-right: 4px;
}
.quote figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.quote__name { font-weight: 600; }
.quote__role { color: var(--text-muted); font-size: 0.82rem; }

/* ---------- CTA ---------- */
.cta { padding-top: var(--s-9); padding-bottom: var(--s-9); }
.cta__inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--s-7);
  align-items: center;
  padding: var(--s-8);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(800px circle at 100% 0%, var(--accent-soft), transparent 40%),
    var(--surface);
}
.cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.cta__note { color: var(--text-dim); font-size: 0.85rem; }

/* ---------- Footer ---------- */
.footer {
  padding-top: var(--s-6);
  padding-bottom: calc(var(--s-7) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}
.footer__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  color: var(--text-muted); font-size: 0.85rem;
}
.footer__links { display: flex; gap: var(--s-5); }
.footer__links a { color: var(--text-muted); transition: color 0.15s ease; }

/* ============================================================
   Hover states - gated, so a touch tap never leaves one stuck on
   ============================================================ */
@media (hover: hover) {
  .nav__links a:hover { color: var(--text); }
  .btn--primary:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    box-shadow: 0 0 0 6px var(--accent-soft);
  }
  .btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
  .card:hover { border-color: var(--accent-deep); }
  .chips li[data-icon]:hover { border-color: var(--border-strong); color: var(--accent); }
  .chips li[data-icon]:hover::before { opacity: 1; }
  .footer__links a:hover { color: var(--accent); }
  .nav__mobile a:hover { color: var(--text); }
}

/* ---------- Focus visible ---------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   Responsive - laptop and iPad landscape
   The hero splits at 1.15fr/0.85fr, which squeezes the terminal panel below
   about 1080px and wraps its monospace lines badly. Stack it instead.
   ============================================================ */
@media (max-width: 1080px) {
  .hero {
    grid-template-columns: 1fr;
    gap: var(--s-7);
    padding-top: var(--s-7);
    padding-bottom: var(--s-7);
  }
  .cta__inner { grid-template-columns: 1fr; padding: var(--s-7); }
  .section { padding-top: var(--s-8); padding-bottom: var(--s-8); }
}

/* ============================================================
   Responsive - iPad portrait
   ============================================================ */
@media (max-width: 900px) {
  .stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes { grid-template-columns: 1fr; }
}

/* ============================================================
   Responsive - narrow tablet
   Services keep two columns down to here; at iPad portrait width each column
   is still ~360px, which reads better than one very wide column.
   ============================================================ */
@media (max-width: 720px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Responsive - mobile
   ============================================================ */
@media (max-width: 640px) {
  body { font-size: 15px; }

  .nav__links { display: none; }
  .nav__inner { height: 52px; gap: var(--s-3); }

  /* Scrollable link row. No JS, no disclosure widget, no focus trap - the
     links are always present and always reachable. 44px tap targets. */
  .nav__mobile {
    display: flex;
    gap: var(--s-5);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-top: 1px solid var(--border);
  }
  .nav__mobile::-webkit-scrollbar { display: none; }
  .nav__mobile a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
  }

  .brand__name { font-size: 0.88rem; }
  .brand__mark { width: 30px; height: 30px; }

  .hero {
    padding-top: var(--s-6);
    padding-bottom: var(--s-7);
    gap: var(--s-6);
  }

  .display { font-size: clamp(2rem, 9vw, 2.75rem); margin: var(--s-3) 0 var(--s-4); }
  .lede { font-size: 1rem; }

  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }

  /* Three stats in two columns leaves an orphan. Stack them as a hairline
     list instead - reads as a spec sheet rather than a broken grid. */
  .hero__stats {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: var(--s-6);
    padding-top: var(--s-2);
  }
  .hero__stats div {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--border);
  }
  .hero__stats div:last-child { border-bottom: none; }
  .hero__stats dd { text-align: right; }

  .panel__body { font-size: 0.78rem; padding: 14px 16px; }

  .section__head { margin-bottom: var(--s-6); }

  .patterns { gap: var(--s-3); padding-top: var(--s-5); padding-bottom: var(--s-5); }
  .patterns__list { gap: var(--s-3) var(--s-5); }

  .card { padding: var(--s-5); }
  .stack-grid { grid-template-columns: 1fr; }
  .stack-col { padding: var(--s-4); }
  .quote { padding: var(--s-5); }

  .timeline { padding-left: var(--s-5); }
  .timeline__item {
    grid-template-columns: 1fr;
    gap: var(--s-2);
    padding: var(--s-4) 0;
  }
  .timeline__item::before { left: calc(var(--s-5) * -1 - 5px); top: 22px; }
  .timeline__year { padding-top: 0; }

  .cta__inner { padding: var(--s-6); }
  .cta__actions .btn { width: 100%; justify-content: center; }

  .footer__inner { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
}

/* ============================================================
   Surfaces - flat, opaque, hairline-bordered
   ============================================================ */

/* Nav keeps a blur. This one is functional, not decorative: a sticky header
   over scrolling content needs it to stay legible. Nothing else blurs. */
.nav {
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: saturate(120%) blur(12px);
  -webkit-backdrop-filter: saturate(120%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.card,
.stack-col,
.quote,
.panel,
.cta__inner {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

/* Single accent wash, kept because the CTA is the one place that should pull. */
.cta__inner {
  background:
    radial-gradient(800px circle at 100% 0%, var(--accent-soft), transparent 40%),
    var(--surface);
}

.brand__mark,
.eyebrow,
.timeline__tag,
.chips li,
.tags li {
  background: var(--bg-elev);
  border-color: var(--border);
}
.stack-col, .quote, .panel, .cta__inner { position: relative; }

/* ============================================================
   Motion preferences
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   Nav blur fallback - the nav is the only blurred surface left
   ============================================================ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: var(--bg); }
}