/* ================================================================
   Atiqul Islam · Principal Architect — Dark Azure Cloud-Architect
   ================================================================ */

/* ---- Self-hosted fonts (woff2) — replaces the Fontshare CDN ---- */
@font-face{font-family:'Satoshi';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/satoshi-400.woff2') format('woff2');}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/satoshi-500.woff2') format('woff2');}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/satoshi-700.woff2') format('woff2');}
@font-face{font-family:'General Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/general-sans-400.woff2') format('woff2');}
@font-face{font-family:'General Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/general-sans-500.woff2') format('woff2');}
@font-face{font-family:'General Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/general-sans-600.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/jetbrains-mono-400.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/jetbrains-mono-500.woff2') format('woff2');}

:root {
  /* Surfaces */
  --ink-950: #04111c;
  --ink-900: #0a1929;
  --ink-800: #13243a;
  --ink-700: #1c3050;
  --ink-600: #28456e;

  /* Text */
  --mist-100: #E5EEF4;
  --mist-200: #BBCAD6;
  --mist-300: #94A8B8;
/* Lightened from #6E869B, which was the last real contrast failure on the site.
   body paints radial-gradient(1200px 700px at 80% -10%, #15263f, ...), and the
   brightest colour anywhere in the dark theme is that #15263F lobe. #6E869B
   measures 4.02:1 against it — under the 4.5:1 that meta text at this size
   needs. It went unnoticed because at the default text size the footer sits
   below the lobe and measures 4.62:1 and passes; at the largest text size the
   footer block grows to twice the height, its top edge reaches into the bright
   region, and the same text measures 4.17:1 on screen. A token whose pass
   depends on how long the page happens to be is a failure waiting for a content
   change, so this is fixed against the brightest stop rather than against where
   the footer sits today: #7C92A5 is 4.72:1 there and 5.42:1 on --bg1.

   Mixed 10% toward white, which is a linear interpolation in sRGB: hue is
   unchanged at 208.0deg and saturation moves 0.290 -> 0.245, so it is the same
   blue-grey, only lighter. It stays a step below --mist-300 (1.31:1 between
   them) and a step above --mist-500, which is what the ladder is for.

   Still under 4.5:1 on --ink-700 and --ink-600 — but those two are borders and
   dividers, not text surfaces, and the full sweep across 15 pages x 4 themes
   x 2 text sizes finds no --mist-400 text painted on either. */
  --mist-400: #7C92A5;
  --mist-500: #4A6478;

  /* Accent */
  --teal-300: #8BE3EE;
  --teal-400: #5DD6E5;
  --teal-500: #3FB8C6;
  --teal-600: #2A93A0;

  /* Secondary */
  --amber-400: #FBBF24;

  /* RGB triplets for alpha compositing — overridden in light theme so that
     rgba(var(--x-rgb), a) surfaces/borders flip with the theme. */
  --ink-950-rgb: 4, 17, 28;
  --ink-900-rgb: 10, 25, 41;
  --ink-800-rgb: 19, 36, 58;
  --ink-700-rgb: 28, 48, 80;
  --ink-600-rgb: 40, 69, 110;
  --mist-100-rgb: 229, 238, 244;
  --mist-200-rgb: 187, 202, 214;
  --mist-300-rgb: 148, 168, 184;
  --mist-400-rgb: 124, 146, 165;   /* keep in step with --mist-400 above */
  --mist-500-rgb: 74, 100, 120;

  /* Typography */
  --font-display: 'Satoshi', system-ui, -apple-system, sans-serif;
  --font-body: 'General Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Spacing rhythm */
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(80px, 10vw, 140px);
  --maxw: 1240px;

  /* Motion */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ink-950);
  color: var(--mist-100);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(16px * var(--fs, 1));
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }

::selection { background: var(--teal-400); color: var(--ink-950); }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------------- NAV ---------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--gutter);
  background: rgba(var(--ink-950-rgb), 0.0);
  backdrop-filter: blur(0);
  transition: background 280ms var(--ease-out-quart), backdrop-filter 280ms, border-color 280ms;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(var(--ink-950-rgb), 0.78);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(var(--mist-100-rgb), 0.06);
}
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--mist-100); }
.logo-mark { width: 28px; height: 28px; color: var(--teal-400); }
.logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: calc(15px * var(--fs, 1));
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--font-body);
  font-size: calc(14px * var(--fs, 1));
  color: var(--mist-300);
}
.nav-links a { transition: color 180ms; }
.nav-links a:hover { color: var(--mist-100); }
.nav-cta {
  padding: 8px 16px;
  border: 1px solid var(--teal-500);
  border-radius: 999px;
  color: var(--teal-300) !important;
  transition: all 200ms var(--ease-out-quart);
}
.nav-cta:hover { background: var(--teal-400); color: var(--ink-950) !important; transform: translateY(-1px); }
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: 8px;
  align-items: center; justify-content: center;
  color: var(--mist-100);
}
.nav-toggle:hover { background: var(--ink-800); }
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 220ms var(--ease-out-quart), opacity 180ms;
}
.nav-toggle span + span { margin-top: 5px; }
.nav.open .nav-toggle span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav.open .nav-toggle span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav.open .nav-links {
    display: flex;
    position: fixed;
    inset: 64px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--ink-950);
    padding: 12px var(--gutter) 20px;
    border-bottom: 1px solid rgba(var(--mist-100-rgb), 0.1);
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.7);
  }
  .nav.open .nav-links a {
    padding: 14px 0;
    font-size: calc(16px * var(--fs, 1));
    width: 100%;
    border-bottom: 1px solid rgba(var(--mist-100-rgb), 0.05);
  }
  .nav.open .nav-links a:last-child { border-bottom: 0; }
  .nav.open .nav-links .nav-cta {
    margin-top: 10px;
    text-align: center;
    padding: 12px 16px;
    border-bottom: 0;
  }
}

/* ---------------- HERO ---------------- */
.hero {
  position: relative;
  min-height: 100vh;
  padding: clamp(120px, 14vh, 180px) var(--gutter) clamp(80px, 8vh, 120px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: -2;
}
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(93, 214, 229, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 214, 229, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 80%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(63, 184, 198, 0.18), transparent 60%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(93, 214, 229, 0.25);
  background: rgba(var(--ink-900-rgb), 0.6);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--fs, 1));
  letter-spacing: 0.06em;
  color: var(--mist-200);
  margin-bottom: 28px;
}
.pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal-400);
  box-shadow: 0 0 0 0 rgba(93, 214, 229, 0.7);
  animation: pulse 2s var(--ease-out-quart) infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(93, 214, 229, 0.6); }
  70% { box-shadow: 0 0 0 12px rgba(93, 214, 229, 0); }
  100% { box-shadow: 0 0 0 0 rgba(93, 214, 229, 0); }
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(clamp(38px, 6.4vw, 88px) * var(--fs, 1));
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--mist-100);
  margin-bottom: 28px;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.3em);
  animation: word-in 700ms var(--ease-out-quart) forwards;
}
.hero-title .word:nth-child(1) { animation-delay: 0.10s; }
.hero-title .word:nth-child(2) { animation-delay: 0.18s; }
.hero-title .word:nth-child(3) { animation-delay: 0.26s; }
.hero-title .word:nth-child(4) { animation-delay: 0.34s; }
.hero-title .word:nth-child(5) { animation-delay: 0.42s; }
.hero-title .word:nth-child(6) { animation-delay: 0.50s; }
.hero-title .word:nth-child(7) { animation-delay: 0.58s; }
.hero-title .word:nth-child(8) { animation-delay: 0.66s; }
.hero-title .line.accent .word { color: var(--teal-300); }
@keyframes word-in {
  to { opacity: 1; transform: translateY(0); }
}

.hero-sub {
  font-size: calc(clamp(16px, 1.45vw, 19px) * var(--fs, 1));
  color: var(--mist-200);
  max-width: 720px;
  line-height: 1.6;
  margin-bottom: 44px;
  opacity: 0;
  animation: fade-in 800ms var(--ease-out-quart) 0.7s forwards;
}
@keyframes fade-in { to { opacity: 1; } }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 44px;
  padding: 28px 32px;
  background: rgba(var(--ink-900-rgb), 0.55);
  border: 1px solid rgba(var(--mist-100-rgb), 0.08);
  border-radius: 18px;
  backdrop-filter: blur(8px);
  opacity: 0;
  animation: fade-in 800ms var(--ease-out-quart) 0.9s forwards;
}
@media (max-width: 760px) {
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 22px; gap: 18px; }
}
.stat .num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: calc(clamp(26px, 3vw, 36px) * var(--fs, 1));
  color: var(--teal-300);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.stat .unit {
  color: var(--mist-300);
  font-size: 0.7em;
  margin-left: 2px;
}
.stat .label {
  font-size: calc(13px * var(--fs, 1));
  color: var(--mist-300);
  line-height: 1.4;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 36px;
  opacity: 0;
  animation: fade-in 800ms var(--ease-out-quart) 1.05s forwards;
}
.cta {
  display: inline-flex;
  align-items: center;
  padding: 14px 24px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(15px * var(--fs, 1));
  transition: all 220ms var(--ease-out-quart);
  border: 1px solid transparent;
}
.cta.primary {
  background: var(--teal-400);
  color: var(--ink-950);
}
.cta.primary:hover {
  background: var(--teal-300);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px rgba(93, 214, 229, 0.4);
}
.cta.ghost {
  border-color: rgba(var(--mist-100-rgb), 0.18);
  color: var(--mist-100);
  font-family: var(--font-mono);
  font-size: calc(14px * var(--fs, 1));
}
.cta.ghost:hover {
  border-color: var(--teal-400);
  color: var(--teal-300);
}
.cta-tour .tour-ico {
  flex-shrink: 0;
  margin-right: 8px;
}
.cta.ghost.cta-tour .tour-ico { color: var(--teal-400); }
.cta.ghost.cta-tour:hover .tour-ico { color: var(--teal-300); }
/* On the filled primary, the icon inherits the dark button text colour. */

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  opacity: 0;
  animation: fade-in 800ms var(--ease-out-quart) 1.2s forwards;
}
.hero-tags .tag {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(var(--ink-800-rgb), 0.6);
  border: 1px solid rgba(var(--mist-100-rgb), 0.08);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--fs, 1));
  letter-spacing: 0.04em;
  color: var(--mist-300);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--fs, 1));
  letter-spacing: 0.16em;
  color: var(--mist-400);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.scroll-cue .line-cue {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, transparent, var(--teal-400));
  animation: scroll-down 2.2s ease-in-out infinite;
}
@keyframes scroll-down {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.01% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------------- SECTIONS ---------------- */
.section {
  padding: var(--section-y) 0;
  position: relative;
}
.section + .section { border-top: 1px solid rgba(var(--mist-100-rgb), 0.06); }

.section-head { max-width: 760px; margin-bottom: clamp(48px, 6vw, 72px); }
.kicker {
  font-family: var(--font-mono);
  font-size: calc(12px * var(--fs, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-400);
  margin-bottom: 14px;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(clamp(28px, 3.6vw, 48px) * var(--fs, 1));
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--mist-100);
  margin-bottom: 18px;
}
.section-lede {
  font-size: calc(clamp(15px, 1.2vw, 17px) * var(--fs, 1));
  color: var(--mist-300);
  line-height: 1.65;
  max-width: 640px;
}

/* ---------------- TIMELINE ---------------- */
.timeline {
  position: relative;
  padding-left: 28px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 6px; bottom: 6px;
  width: 1px;
  background: linear-gradient(to bottom, var(--teal-500), rgba(93, 214, 229, 0.12) 30%, rgba(var(--mist-100-rgb), 0.06));
}
.timeline-item {
  position: relative;
  padding: 22px 0 32px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px;
}

/* Scroll-driven reveals — opacity only (no transforms, CLS-safe) */
.reveal { opacity: 0; transition: opacity 700ms var(--ease-out-quart); will-change: opacity; }
.reveal.in-view { opacity: 1; }
.timeline-item.current .timeline-period { color: var(--teal-300); }
.timeline-dot {
  position: absolute;
  left: -28px; top: 28px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink-950);
  border: 2px solid var(--teal-500);
  box-shadow: 0 0 0 4px rgba(var(--ink-950-rgb), 1), 0 0 16px rgba(93, 214, 229, 0.2);
}
.timeline-item.current .timeline-dot {
  background: var(--teal-400);
  border-color: var(--teal-300);
  box-shadow: 0 0 0 4px var(--ink-950), 0 0 0 6px rgba(93, 214, 229, 0.25), 0 0 24px rgba(93, 214, 229, 0.5);
}
.timeline-period {
  font-family: var(--font-mono);
  font-size: calc(13px * var(--fs, 1));
  color: var(--mist-200);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.timeline-loc {
  font-size: calc(12px * var(--fs, 1));
  color: var(--mist-400);
}
.role-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  margin-bottom: 12px;
}
.role-row .role {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(19px * var(--fs, 1));
  color: var(--mist-100);
}
.role-row .org {
  font-size: calc(14px * var(--fs, 1));
  color: var(--mist-300);
}
.role-summary {
  color: var(--mist-200);
  font-size: calc(15px * var(--fs, 1));
  line-height: 1.6;
  margin-bottom: 14px;
  max-width: 640px;
}
.role-bullets {
  display: grid;
  gap: 8px;
}
.role-bullets li {
  position: relative;
  padding-left: 18px;
  color: var(--mist-300);
  font-size: calc(14px * var(--fs, 1));
  line-height: 1.55;
}
.role-bullets li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--teal-400);
  font-family: var(--font-mono);
}

@media (max-width: 760px) {
  .timeline-item { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-bottom: 28px; }
  .timeline-period { font-size: calc(12px * var(--fs, 1)); }
}

/* ---------------- SYSTEMS / DIAGRAMS ---------------- */
.system + .system { margin-top: clamp(36px, 4vw, 56px); }
.system-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(var(--mist-100-rgb), 0.06);
}
.system-tag {
  font-family: var(--font-mono);
  font-size: calc(12px * var(--fs, 1));
  letter-spacing: 0.14em;
  color: var(--teal-400);
  margin-bottom: 10px;
}
.system-head h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(clamp(22px, 2.4vw, 30px) * var(--fs, 1));
  line-height: 1.2;
  color: var(--mist-100);
  letter-spacing: -0.015em;
  max-width: 600px;
}
.system-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 380px;
  justify-content: flex-end;
}
.system-stack li {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(var(--ink-800-rgb), 0.7);
  border: 1px solid rgba(var(--mist-100-rgb), 0.08);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--fs, 1));
  color: var(--mist-300);
}
@media (max-width: 820px) {
  .system-head { flex-direction: column; align-items: flex-start; }
  .system-stack { justify-content: flex-start; max-width: 100%; }
}

.diagram-wrap {
  position: relative;
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(63, 184, 198, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(var(--ink-900-rgb), 0.6), rgba(var(--ink-950-rgb), 0.85));
  border: 1px solid rgba(var(--mist-100-rgb), 0.08);
  border-radius: 20px;
  padding: 18px;
  overflow: hidden;
}
.diagram {
  width: 100%;
  height: auto;
  display: block;
}

/* SVG diagram node styling */
.diagram .lane-label {
  fill: var(--mist-400);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--fs, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.diagram .node {
  cursor: pointer;
  transition: transform 220ms var(--ease-out-quart), filter 220ms;
  transform-box: fill-box;
  transform-origin: center;
}
.diagram .node rect,
.diagram .node circle {
  fill: rgba(var(--ink-800-rgb), 0.9);
  stroke: rgba(93, 214, 229, 0.35);
  stroke-width: 1.2;
  transition: stroke 220ms, fill 220ms, filter 220ms;
}
.diagram .node text {
  fill: var(--mist-100);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(14px * var(--fs, 1));
  pointer-events: none;
}
.diagram .node .sub {
  fill: var(--mist-300);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: calc(11px * var(--fs, 1));
}
.diagram .node .sub2 {
  fill: var(--teal-400);
  font-family: var(--font-mono);
  font-size: calc(11px * var(--fs, 1));
}
.diagram .node:hover rect,
.diagram .node:hover circle {
  fill: rgba(var(--ink-700-rgb), 0.95);
  stroke: var(--teal-400);
  filter: drop-shadow(0 0 12px rgba(93, 214, 229, 0.45));
}

/* Per-type accents */
.diagram .node.client rect { stroke: rgba(var(--mist-100-rgb), 0.22); }
.diagram .node.gateway rect { stroke: rgba(93, 214, 229, 0.45); fill: rgba(var(--ink-700-rgb), 0.9); }
.diagram .node.gateway.hero rect,
.diagram .node.gateway.hero circle {
  stroke: var(--teal-400);
  stroke-width: 1.6;
  fill: rgba(28, 70, 92, 0.9);
  filter: drop-shadow(0 0 18px rgba(93, 214, 229, 0.35));
}
.diagram .node.gateway.hero .gateway-name {
  fill: var(--teal-300);
  font-weight: 700;
  font-size: calc(18px * var(--fs, 1));
}
.diagram .node.service rect { stroke: rgba(var(--mist-100-rgb), 0.18); }
.diagram .node.data rect { stroke: rgba(251, 191, 36, 0.32); }
.diagram .node.agent rect { stroke: rgba(93, 214, 229, 0.35); }

.diagram .orb {
  pointer-events: none;
  animation: orb-breathe 5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes orb-breathe {
  0%, 100% { opacity: 0.3; transform: scale(0.96); }
  50% { opacity: 0.55; transform: scale(1.04); }
}

.diagram .pulses circle {
  fill: var(--teal-300);
  filter: drop-shadow(0 0 6px var(--teal-400));
}

.diagram-tooltip {
  position: absolute;
  pointer-events: none;
  padding: 10px 14px;
  background: rgba(var(--ink-950-rgb), 0.96);
  border: 1px solid var(--teal-500);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: calc(12px * var(--fs, 1));
  color: var(--mist-100);
  max-width: 280px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms, transform 180ms;
  z-index: 5;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
}
.diagram-tooltip.show { opacity: 1; transform: translateY(0); }

.system-cta-row {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* ---------------- EXPERTISE ---------------- */
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1100px) { .expertise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .expertise-grid { grid-template-columns: minmax(0, 1fr); } }

.expertise-card {
  padding: 28px;
  background: linear-gradient(180deg, rgba(var(--ink-800-rgb), 0.4), rgba(var(--ink-900-rgb), 0.4));
  border: 1px solid rgba(var(--mist-100-rgb), 0.08);
  border-radius: 16px;
  transition: border-color 280ms, transform 280ms;
}
.expertise-card:hover {
  border-color: rgba(93, 214, 229, 0.28);
  transform: translateY(-2px);
}
.exp-label {
  font-family: var(--font-mono);
  font-size: calc(12px * var(--fs, 1));
  letter-spacing: 0.12em;
  color: var(--teal-300);
  margin-bottom: 14px;
  text-transform: uppercase;
}
.expertise-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(19px * var(--fs, 1));
  color: var(--mist-100);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.exp-list {
  display: grid;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.exp-list li {
  position: relative;
  padding-left: 16px;
  font-size: calc(13.5px * var(--fs, 1));
  color: var(--mist-300);
  line-height: 1.55;
}
.exp-list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--teal-400);
  font-size: calc(9px * var(--fs, 1));
  top: 5px;
}

/* ---------------- VENTURES ---------------- */
.venture-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.venture-tag-row .venture-tag { margin-bottom: 0; }
/* The !important stays: .venture-tag is declared further down this file, so on
   equal specificity it would otherwise win and the OSS tag would lose its green.
   What changes is that the VALUES are now tokens. A literal here bypassed the
   theme system entirely — #84e28a is tuned for the dark card and measured
   1.39:1 on the light theme and 1.23:1 on reading, the worst contrast anywhere
   on the site. !important pins the declaration, not the custom property, so
   prefs.css can still retune the colour per scheme; the fallbacks below keep
   this rule correct on its own if that file ever fails to load. */
.venture-tag-oss {
  background: var(--oss-tag-bg, rgba(132, 226, 138, 0.12)) !important;
  color: var(--oss-tag-ink, #84e28a) !important;
}
.venture-featured {
  background: linear-gradient(180deg, rgba(var(--ink-800-rgb), 0.55), rgba(var(--ink-900-rgb), 0.55)) !important;
  border-color: rgba(93, 214, 229, 0.22) !important;
}
.venture-pitch {
  /* !important goes on the declaration, outside calc(). Inside, it makes the
     calc expression invalid and the whole declaration is dropped — which is
     what happened here: this rendered at 15px from a lower-priority rule. */
  font-size: calc(16px * var(--fs, 1)) !important;
  color: var(--mist-100) !important;
  line-height: 1.55 !important;
  border-left: 2px solid var(--teal-400);
  padding-left: 14px;
  margin-bottom: 16px !important;
}
.venture-cta-row {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--mist-100-rgb), 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.venture-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(93, 214, 229, 0.32);
  background: rgba(93, 214, 229, 0.06);
  color: var(--teal-300);
  font-family: var(--font-mono);
  font-size: calc(13px * var(--fs, 1));
  text-decoration: none;
  transition: background 200ms, border-color 200ms, color 200ms;
}
.venture-cta:hover {
  background: rgba(93, 214, 229, 0.14);
  border-color: rgba(93, 214, 229, 0.55);
  color: var(--mist-100);
}
.venture-cta svg { flex-shrink: 0; }

.venture-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}
@media (max-width: 820px) { .venture-grid { grid-template-columns: minmax(0, 1fr); } }

.venture {
  padding: 32px;
  background: linear-gradient(180deg, rgba(var(--ink-800-rgb), 0.5), rgba(var(--ink-900-rgb), 0.5));
  border: 1px solid rgba(var(--mist-100-rgb), 0.08);
  border-radius: 18px;
  transition: border-color 280ms, transform 280ms;
}
.venture:hover {
  border-color: rgba(93, 214, 229, 0.3);
  transform: translateY(-2px);
}
.venture-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(93, 214, 229, 0.1);
  color: var(--teal-300);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--fs, 1));
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.venture h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(22px * var(--fs, 1));
  color: var(--mist-100);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.venture-meta {
  font-family: var(--font-mono);
  font-size: calc(12px * var(--fs, 1));
  color: var(--mist-400);
  margin-bottom: 16px;
}
.venture p {
  color: var(--mist-200);
  font-size: calc(15px * var(--fs, 1));
  line-height: 1.6;
  margin-bottom: 18px;
}
.venture-list {
  display: grid;
  gap: 8px;
}
.venture-list li {
  position: relative;
  padding-left: 18px;
  font-size: calc(14px * var(--fs, 1));
  color: var(--mist-300);
  line-height: 1.5;
}
.venture-list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--teal-400);
  font-size: calc(10px * var(--fs, 1));
  top: 4px;
}

/* ---------------- WRITING ---------------- */
.writing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 900px) { .writing-grid { grid-template-columns: minmax(0, 1fr); } }

.post {
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: rgba(var(--ink-800-rgb), 0.4);
  border: 1px solid rgba(var(--mist-100-rgb), 0.08);
  border-radius: 16px;
  transition: all 240ms var(--ease-out-quart);
  min-height: 200px;
}
.post:hover {
  background: rgba(var(--ink-700-rgb), 0.6);
  border-color: rgba(93, 214, 229, 0.3);
  transform: translateY(-2px);
}
.post-meta {
  display: flex;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: calc(12px * var(--fs, 1));
  color: var(--mist-400);
  margin-bottom: 14px;
  letter-spacing: 0.04em;
}
.post h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(17px * var(--fs, 1));
  line-height: 1.35;
  color: var(--mist-100);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  flex: 1;
}
.post p {
  font-size: calc(13.5px * var(--fs, 1));
  color: var(--mist-300);
  line-height: 1.55;
  margin-bottom: 18px;
}
.post-cta {
  font-family: var(--font-mono);
  font-size: calc(12px * var(--fs, 1));
  color: var(--teal-300);
  letter-spacing: 0.06em;
  margin-top: auto;
}

/* Featured post — spans the full grid width above the standard cards */
.post-featured {
  grid-column: 1 / -1;
  min-height: 0;
  background: linear-gradient(180deg, rgba(var(--ink-800-rgb), 0.55), rgba(var(--ink-900-rgb), 0.55));
  border-color: rgba(93, 214, 229, 0.22);
}
.post-featured h3 {
  font-size: calc(22px * var(--fs, 1));
  line-height: 1.28;
  flex: 0 0 auto;
  max-width: 34ch;
}
.post-featured p {
  font-size: calc(15px * var(--fs, 1));
  line-height: 1.6;
  max-width: 82ch;
}
.post-meta .flag {
  color: var(--teal-300);
  border: 1px solid rgba(93, 214, 229, 0.3);
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: 0.08em;
}
@media (max-width: 900px) {
  .post-featured h3 { font-size: calc(19px * var(--fs, 1)); max-width: none; }
  .post-featured p { font-size: calc(14px * var(--fs, 1)); }
}

/* ---------------- REFERENCE ARCHITECTURE INDEX ---------------- */
.arch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 900px) { .arch-grid { grid-template-columns: minmax(0, 1fr); } }

.arch-card {
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: rgba(var(--ink-800-rgb), 0.4);
  border: 1px solid rgba(var(--mist-100-rgb), 0.08);
  border-radius: 16px;
  transition: all 240ms var(--ease-out-quart);
}
.arch-card:hover {
  background: rgba(var(--ink-700-rgb), 0.6);
  border-color: rgba(93, 214, 229, 0.3);
  transform: translateY(-2px);
}
.arch-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: calc(12px * var(--fs, 1));
  color: var(--mist-400);
  margin-bottom: 14px;
  letter-spacing: 0.04em;
}
.arch-flag {
  color: var(--teal-300);
  border: 1px solid rgba(93, 214, 229, 0.3);
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: 0.08em;
}
.arch-card h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(19px * var(--fs, 1));
  line-height: 1.32;
  color: var(--mist-100);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.arch-card p {
  font-size: calc(13.5px * var(--fs, 1));
  color: var(--mist-300);
  line-height: 1.6;
  margin-bottom: 18px;
  flex: 1;
}
.arch-cta {
  font-family: var(--font-mono);
  font-size: calc(12px * var(--fs, 1));
  color: var(--teal-300);
  letter-spacing: 0.06em;
  margin-top: auto;
}
.arch-note {
  margin-top: 28px;
  max-width: 78ch;
  font-size: calc(13px * var(--fs, 1));
  line-height: 1.65;
  color: var(--mist-400);
}
@media (max-width: 900px) {
  .arch-card h2 { font-size: calc(17.5px * var(--fs, 1)); }
}

/* Entry point from the home Systems section into /architecture/. Sits after the
   last diagram as a full-width bar rather than a fifth card, so it reads as
   "there is more through here" instead of competing with the systems above. */
.systems-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
  padding: 24px 28px;
  background: rgba(var(--ink-800-rgb), 0.4);
  border: 1px solid rgba(var(--mist-100-rgb), 0.08);
  border-radius: 16px;
  text-decoration: none;
  transition: all 240ms var(--ease-out-quart);
}
.systems-more:hover {
  background: rgba(var(--ink-700-rgb), 0.6);
  border-color: rgba(93, 214, 229, 0.3);
}
.systems-more .kicker { margin-bottom: 8px; }
.systems-more h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(19px * var(--fs, 1));
  line-height: 1.32;
  color: var(--mist-100);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.systems-more p {
  font-size: calc(13.5px * var(--fs, 1));
  line-height: 1.6;
  color: var(--mist-300);
  max-width: 74ch;
}
.systems-more .arch-cta {
  flex: none;
  white-space: nowrap;
  transition: transform 240ms var(--ease-out-quart);
}
.systems-more:hover .arch-cta { transform: translateX(3px); }
@media (max-width: 700px) {
  .systems-more { flex-direction: column; align-items: flex-start; gap: 16px; }
  .systems-more h3 { font-size: calc(17.5px * var(--fs, 1)); }
}

/* ---------------- CONTACT ---------------- */
.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.contact-channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 36px;
}
@media (max-width: 600px) { .contact-channels { grid-template-columns: minmax(0, 1fr); } }

.channel {
  padding: 20px 24px;
  background: rgba(var(--ink-800-rgb), 0.45);
  border: 1px solid rgba(var(--mist-100-rgb), 0.08);
  border-radius: 14px;
  transition: all 240ms var(--ease-out-quart);
  display: block;
}
a.channel:hover {
  border-color: var(--teal-400);
  background: rgba(var(--ink-700-rgb), 0.65);
  transform: translateY(-1px);
}
.ch-label {
  font-family: var(--font-mono);
  font-size: calc(12px * var(--fs, 1));
  color: var(--mist-400);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ch-value {
  font-family: var(--font-mono);
  font-size: calc(14px * var(--fs, 1));
  color: var(--mist-100);
  word-break: break-all;
}

.credentials-row {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(var(--mist-100-rgb), 0.06);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.cred-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-family: var(--font-mono);
  font-size: calc(12px * var(--fs, 1));
  letter-spacing: 0.02em;
  color: var(--mist-200, var(--mist-100));
  background: rgba(var(--ink-800-rgb), 0.45);
  border: 1px solid rgba(var(--mist-100-rgb), 0.08);
  border-radius: 999px;
  white-space: nowrap;
}
.cred-chip em {
  font-style: italic;
  color: var(--mist-400);
  margin-left: 2px;
}
.cred-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--teal-400, #4ad6c1);
  box-shadow: 0 0 8px rgba(74, 214, 193, 0.55);
}
.cred-dot.in-progress {
  background: #f0b878;
  box-shadow: 0 0 8px rgba(240, 184, 120, 0.55);
  animation: credPulse 2.6s ease-in-out infinite;
}
@keyframes credPulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
@media (max-width: 600px) {
  .cred-chip { white-space: normal; }
}

/* ---------------- FOOTER ---------------- */
.footer {
  padding: 36px 0 48px;
  border-top: 1px solid rgba(var(--mist-100-rgb), 0.06);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: calc(12px * var(--fs, 1));
  color: var(--mist-400);
}

/* ---------------- REDUCED MOTION ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-title .word { opacity: 1; transform: none; }
  .hero-sub, .hero-stats, .hero-cta-row, .hero-tags { opacity: 1; }
  .reveal { opacity: 1 !important; }
}

/* Skip-to-content link (a11y) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--teal-400);color:var(--ink-950);padding:10px 16px;border-radius:0 0 8px 0;font-weight:600;text-decoration:none;}
.skip-link:focus{left:0;}

/* ---------------- PRINT ---------------- */
@media print {
  /* Recruiters print. Strip chrome, expand content, ink-on-paper. */
  *, *::before, *::after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
  body { font-size: 11pt; line-height: 1.4; }
  #hero-canvas, .hero-grid, .scroll-cue, .nav-toggle, .pulse, .skip-link, video, canvas { display: none !important; }
  .nav { position: static !important; border: none !important; }
  .hero { min-height: auto !important; padding: 0 0 16pt !important; }
  .hero-title, .section-title, h1, h2, h3 { color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
  /* expose link targets for offline reading */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444 !important; }
  a[href^="#"]::after, a[href^="mailto"]::after { content: ""; }
  section, .timeline-item, .venture, .system { break-inside: avoid; page-break-inside: avoid; }
  .reveal { opacity: 1 !important; }
}

/* ---------------- FAQ (GEO / AI-SEO) ---------------- */
.faq-list { display: grid; gap: 12px; max-width: 760px; }
.faq-item {
  border: 1px solid rgba(var(--mist-100-rgb), 0.10);
  border-radius: 14px;
  background: rgba(var(--ink-900-rgb), 0.5);
  overflow: hidden;
  transition: border-color .2s var(--ease-out-quart);
}
.faq-item:hover { border-color: rgba(var(--teal-400-rgb, 93,214,229), 0.32); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(clamp(16px, 2vw, 18px) * var(--fs, 1));
  color: var(--mist-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: calc(20px * var(--fs, 1));
  color: var(--teal-400);
  transition: transform .25s var(--ease-out-quart);
  flex: none;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--teal-400); outline-offset: -2px; }
.faq-body { padding: 0 22px 20px; }
.faq-body p { color: var(--mist-300); font-size: calc(15.5px * var(--fs, 1)); line-height: 1.65; max-width: 64ch; }
.faq-body a { color: var(--teal-300); text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-item summary::after { transition: none; }
}

/* ---------------- PUBLICATIONS ---------------- */
.pub-list {
  list-style: none;
  display: grid;
  gap: 16px;
  padding: 0;
}
.pub {
  padding: 22px 26px;
  background: rgba(var(--ink-800-rgb), 0.4);
  border: 1px solid rgba(var(--mist-100-rgb), 0.08);
  border-radius: 14px;
  transition: border-color 240ms, transform 240ms;
}
.pub:hover { border-color: rgba(93, 214, 229, 0.28); transform: translateY(-2px); }
.pub-meta {
  display: flex; gap: 10px; align-items: center;
  font-family: var(--font-mono); font-size: calc(12px * var(--fs, 1));
  color: var(--mist-400); letter-spacing: 0.06em; margin-bottom: 10px;
}
.pub-type {
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(93, 214, 229, 0.35); color: var(--teal-300);
  text-transform: uppercase;
}
.pub-title { font-family: var(--font-display); font-size: calc(18px * var(--fs, 1)); line-height: 1.3; margin-bottom: 6px; color: var(--mist-100); }
.pub-title a { color: var(--mist-100); text-decoration: none; }
.pub-title a:hover { color: var(--teal-300); }
.pub-venue { font-size: calc(13px * var(--fs, 1)); color: var(--mist-300); margin-bottom: 8px; }
.pub-summary { font-size: calc(13.5px * var(--fs, 1)); color: var(--mist-300); line-height: 1.55; }
.pub-doi { color: var(--mist-400); }
.pub-search {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px;
  padding: 7px 14px;
  font-family: var(--font-mono); font-size: calc(12px * var(--fs, 1)); letter-spacing: 0.04em;
  text-transform: uppercase; text-decoration: none;
  color: var(--teal-300);
  background: rgba(93, 214, 229, 0.06);
  border: 1px solid rgba(93, 214, 229, 0.28);
  border-radius: 999px;
  transition: background 200ms, border-color 200ms, color 200ms;
}
.pub-search:hover {
  background: rgba(93, 214, 229, 0.14);
  border-color: rgba(93, 214, 229, 0.5);
  color: var(--mist-100);
}
.pub-search svg { flex-shrink: 0; }

/* ---------------- SKILLS MATRIX ---------------- */
.skills-matrix { margin-top: 36px; }
.skills-controls {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 18px;
}
.skills-search input {
  width: min(420px, 100%);
  padding: 10px 14px;
  background: rgba(var(--ink-900-rgb), 0.6);
  border: 1px solid rgba(var(--mist-100-rgb), 0.12);
  border-radius: 10px;
  color: var(--mist-100); font-family: var(--font-mono); font-size: calc(13px * var(--fs, 1));
}
.skills-search input:focus {
  outline: none; border-color: rgba(93, 214, 229, 0.5);
}
.skills-legend { display: flex; gap: 14px; font-family: var(--font-mono); font-size: calc(12px * var(--fs, 1)); color: var(--mist-400); }
.skills-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dot-core    { background: var(--teal-300); }
.dot-strong  { background: rgba(93, 214, 229, 0.55); }
.dot-working { background: rgba(var(--mist-100-rgb), 0.35); }

.skills-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 820px) { .skills-grid { grid-template-columns: minmax(0, 1fr); } }
.skill-cat h4 {
  font-family: var(--font-mono); font-size: calc(12px * var(--fs, 1)); color: var(--teal-300);
  text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px;
}
.skill-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(var(--ink-800-rgb), 0.55);
  border: 1px solid rgba(var(--mist-100-rgb), 0.1);
  font-size: calc(12.5px * var(--fs, 1)); color: var(--mist-200);
}
.skill-chip em { font-style: normal; font-family: var(--font-mono); font-size: calc(12px * var(--fs, 1)); color: var(--mist-400); }
.skill-chip.skill-core   { border-color: rgba(93, 214, 229, 0.45); }
.skill-chip.skill-strong { border-color: rgba(93, 214, 229, 0.22); }
.skills-empty { color: var(--mist-400); font-family: var(--font-mono); font-size: calc(12px * var(--fs, 1)); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}