:root {
  --bg: #060913;
  --bg-alt: #080d1a;
  --surface: rgba(255, 255, 255, 0.028);
  --surface-strong: rgba(255, 255, 255, 0.055);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #e8edf7;
  --muted: #93a1bd;
  /* --faint was #64708c (4.0:1 on --bg), below the 4.5:1 WCAG AA floor it is
     used at: card lists, chips and footer links. */
  --faint: #7a86a3;
  --blue: #3b82f6;
  --cyan: #06b6d4;
  --violet: #7c3aed;
  /* Readable stand-in for --violet, which is 3.5:1 as small label text. */
  --violet-text: #a78bfa;
  --green: #10b981;
  --radius: 18px;
  --radius-lg: 26px;
  --shell: min(1280px, 100% - 2.5rem);
  /* Every sentence of body copy on the page renders at this one size. */
  --body-size: 1rem;
  /* The gradient on "smart contracts" in the headline. Shared with the primary
     button so the two are the same colour by definition, not by copy. */
  --brand-gradient: linear-gradient(105deg, #60a5fa, #22d3ee 45%, #a78bfa);
  /* Primary action colour. Dark ink, not white: these are light tints meant
     for text on a dark page, and white sits at 1.8:1 on the cyan midpoint.
     Dark ink is 6.96:1 at its worst point. */
  --cta: var(--brand-gradient);
  --cta-ink: #04121c;
  --cta-glow: rgba(34, 211, 238, 0.4);
  --cta-glow-strong: rgba(34, 211, 238, 0.58);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Space Grotesk", var(--font);
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.7;
  letter-spacing: -0.005em;
  /* `overflow-x: hidden` here turns body into a scroll container, which breaks
     the sticky header in Safari: it scrolls away and only comes back at the top
     of the page. `clip` hides the same overflow without creating that scroll
     container, so the header stays pinned. `hidden` is left first as a fallback
     for browsers without clip support. */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
/* Only 600 is loaded for bold body copy, so avoid synthesised faux-bold. */
strong, b { font-weight: 600; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0;
}

h1 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.16rem; letter-spacing: -0.02em; }
p { margin: 0 0 1rem; }

.container { width: var(--shell); margin-inline: auto; }
.container--narrow { max-width: 820px; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 200;
  background: var(--blue);
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- background ---------- */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.032) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 100% 62% at 50% 0%, #000 38%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 100% 62% at 50% 0%, #000 38%, transparent 76%);
}

.bg-glow {
  position: fixed;
  z-index: -3;
  border-radius: 50%;
  filter: blur(130px);
  opacity: 0.5;
  pointer-events: none;
}
.bg-glow--one {
  width: 640px; height: 640px;
  top: -270px; left: -170px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.55), transparent 68%);
}
.bg-glow--two {
  width: 560px; height: 560px;
  top: 130px; right: -220px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.42), transparent 68%);
}

/* ---------- topbar ---------- */
.topbar {
  position: relative;
  z-index: 101;
  font-size: 0.79rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.12), rgba(124, 58, 237, 0.12));
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 40px;
  padding: 0.35rem 0;
}
.topbar-msg {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  color: #cfe0ff;
  font-weight: 500;
}
.topbar-links { display: flex; align-items: center; gap: 0.6rem; color: var(--faint); }
.topbar-links a { color: var(--muted); transition: color 0.2s ease; }
.topbar-links a:hover { color: var(--cyan); }
.topbar-short { display: none; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  /* Above the nav backdrop so the header bar and its sheet stay legible. */
  z-index: 110;
  /* The compact height is used at every scroll position, not just once the
     reader has scrolled: a bar that shrinks on the first scroll shifts the
     whole page under their thumb. */
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
/* The bar's tint and blur sit on their own promoted layer rather than on
   .site-header itself. iOS Safari drops a sticky element mid-scroll — most
   visibly when scrolling back up — when that same element paints a
   backdrop-filter; its own compositing layer keeps the bar on screen. The
   promotion cannot go on .site-header, because a transform there would make it
   the containing block for the fixed mobile menu sheet nested inside it. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Always on. The bar used to be transparent until the reader scrolled 12px,
     which left the logo and links floating over the hero with nothing behind
     them at the one position every visitor starts from. */
  opacity: 1;
  background: rgba(6, 9, 19, 0.82);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* Scrolling no longer changes the bar's size, so it lifts off the page with a
   shadow instead. */
.site-header.is-stuck {
  box-shadow: 0 12px 30px -20px rgba(0, 0, 0, 0.95);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand-mark {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(140deg, var(--blue), var(--violet));
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
}
.brand-mark svg { width: 19px; height: 19px; }
.brand-text {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: -0.03em;
}
.brand-dot { color: var(--cyan); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
.brand-sub {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.nav { display: flex; align-items: center; gap: 1.9rem; }
.nav-link {
  font-size: 0.93rem;
  color: var(--muted);
  position: relative;
  transition: color 0.2s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 1.5px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transition: width 0.25s ease;
}
.nav-link:hover { color: var(--text); }
.nav-link:hover::after { width: 100%; }

.nav-link--mobile,
.nav-link--extra,
.nav-group-label { display: none; }

.nav-link--mega {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 0;
  padding: 0.5rem 0;
  font: inherit;
  font-size: 0.93rem;
  color: var(--muted);
  cursor: pointer;
}
.nav-link--mega svg { width: 14px; height: 14px; transition: transform 0.25s ease; }
.nav-link--mega[aria-expanded="true"] { color: var(--text); }
.nav-link--mega[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---------- mega menu ---------- */
.has-mega { position: static; }
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  transform: translateY(-8px);
  margin-top: 0.85rem;
  padding: 1.6rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: rgba(9, 13, 26, 0.97);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.95);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 120;
}
.mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.15fr;
  gap: 1.5rem;
}
.mega-title {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 0.85rem;
}
.mega-col a {
  display: block;
  padding: 0.6rem 0.7rem;
  border-radius: 11px;
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.mega-col a + a { margin-top: 0.2rem; }
.mega-col a:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--border);
  transform: translateX(3px);
}
.mega-col strong {
  display: block;
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 600;
}
.mega-col span { display: block; font-size: 0.76rem; color: var(--faint); }
.mega-promo-card {
  display: block;
  padding: 1.2rem;
  border-radius: 15px;
  border: 1px solid rgba(99, 152, 255, 0.28);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(59, 130, 246, 0.22), transparent 62%),
    rgba(255, 255, 255, 0.03);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.mega-promo-card:hover { border-color: var(--cyan); transform: translateY(-3px); }
.mega-promo-card strong {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
  margin-bottom: 0.45rem;
}
.mega-promo-card span { display: block; font-size: 0.83rem; color: var(--muted); }
.mega-promo-card em {
  display: block;
  margin-top: 0.9rem;
  font-style: normal;
  font-size: 0.83rem;
  font-weight: 600;
  color: #7fb2ff;
}

.nav-extra { display: none; }

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 105;
  background: rgba(3, 5, 12, 0.66);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.nav-backdrop.is-open { opacity: 1; }

.nav-toggle {
  display: none;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: 13px;
  width: 46px; height: 46px;
  padding: 0;
  cursor: pointer;
  position: relative;
  z-index: 130;
}
.nav-toggle span {
  display: block;
  width: 17px; height: 1.6px;
  margin: 3.4px auto;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.btn svg { width: 16px; height: 16px; }
.btn--primary {
  color: var(--cta-ink);
  background: var(--cta);
  box-shadow: 0 10px 30px -8px var(--cta-glow);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -8px var(--cta-glow-strong); }
.btn--ghost {
  color: var(--text);
  background: var(--surface-strong);
  border-color: var(--border-strong);
}
.btn--ghost:hover { border-color: var(--cyan); transform: translateY(-2px); }
.btn--sm { padding: 0.6rem 1.15rem; font-size: 0.88rem; }
.btn--full { width: 100%; }

/* ---------- hero ---------- */
.hero { padding: clamp(3rem, 7vw, 5.5rem) 0 0; }
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
/* Grid children default to min-width:auto, which lets the wide code block
   stretch the whole layout past the viewport on small screens. */
.hero-inner > * { min-width: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  margin-bottom: 1.6rem;
}
.pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.grad {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  color: var(--muted);
  max-width: 58ch;
  margin-top: 1.5rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 2.1rem 0 2rem;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.79rem;
  color: var(--faint);
}
.hero-trust li { position: relative; padding-left: 1rem; }
.hero-trust li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cyan);
}

/* ---------- code card ---------- */
.hero-visual { position: relative; }
.code-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: linear-gradient(165deg, rgba(20, 28, 48, 0.95), rgba(8, 12, 24, 0.95));
  box-shadow: 0 40px 80px -35px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transform: perspective(1400px) rotateY(-7deg) rotateX(3deg);
  transition: transform 0.5s ease;
}
.code-card:hover { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }
.code-card-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot--red { background: #ff5f57; }
.dot--amber { background: #febc2e; }
.dot--green { background: #28c840; }
.code-file {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--faint);
}
.code-body {
  margin: 0;
  max-width: 100%;
  padding: 1.3rem 1.4rem 1.6rem;
  font-family: var(--mono);
  font-size: 0.775rem;
  line-height: 1.85;
  color: #c6d2e8;
  overflow-x: auto;
}
.c-com { color: #55637f; font-style: italic; }
.c-key { color: #c084fc; }
.c-type { color: #22d3ee; }
.c-fn { color: #60a5fa; }
.c-str { color: #34d399; }
.c-num { color: #fbbf24; }

.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  border-radius: 15px;
  border: 1px solid var(--border-strong);
  background: rgba(10, 15, 30, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.9);
  animation: bob 5.5s ease-in-out infinite;
}
.float-card div { display: flex; flex-direction: column; line-height: 1.3; }
.float-card strong { font-size: 0.86rem; font-family: var(--display); }
.float-card span:not(.float-icon) { font-size: 0.72rem; color: var(--faint); }
.float-icon {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  font-size: 0.85rem;
  background: rgba(16, 185, 129, 0.14);
  color: var(--green);
}
.float-card--audit { bottom: -4%; left: -5%; }
.float-card--gas { top: -5%; right: -3%; animation-delay: -2.6s; }
.float-card--gas .float-icon { background: rgba(59, 130, 246, 0.16); color: #60a5fa; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-11px); }
}

/* ---------- stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat {
  background: rgba(8, 12, 24, 0.75);
  padding: 1.6rem 1.4rem;
  text-align: center;
}
.stat dt {
  order: 2;
  font-size: 0.78rem;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.stat dd {
  margin: 0 0 0.35rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  background: linear-gradient(120deg, #93c5fd, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- marquee ---------- */
.marquee {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: 1.15rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: scroll-x 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--mono);
  font-size: 0.92rem;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.marquee-track span:hover { color: var(--cyan); }
@keyframes scroll-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- sections ---------- */
.section { padding: clamp(4rem, 8vw, 6rem) 0; position: relative; }
.hero + .section { padding-top: clamp(3rem, 6vw, 4.5rem); }
.section--alt { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.016), transparent); }

.section-head { max-width: 720px; margin-bottom: clamp(2.4rem, 5vw, 3.4rem); }
.kicker {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.85rem;
}
.section-sub { color: var(--muted); margin-top: 1.1rem; }

.section-head--wide { max-width: 820px; }

/* Swipe affordances for the mobile carousels; both are hidden on wider screens
   where the same content is laid out as a grid. */
.rail-hint { display: none; }
.rail-dots { display: none; }

.grid { display: grid; gap: 1.3rem; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid > * { min-width: 0; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ---------- filters ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.filter {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.87rem;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.filter:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-2px); }
/* The selected filter is the same kind of accent surface as the primary
   button, so it follows the same token rather than keeping the old purple. */
.filter.is-active {
  color: var(--cta-ink);
  border-color: transparent;
  background: var(--cta);
  box-shadow: 0 8px 22px -8px var(--cta-glow);
}

.project.is-hidden { display: none; }
.project--cta {
  border-style: dashed;
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.018);
}
.empty-state { text-align: center; color: var(--faint); padding: 2rem 0 0; }

/* ---------- cards ---------- */
.card {
  position: relative;
  padding: 1.9rem 1.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.6), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card:hover {
  transform: translateY(-5px);
  border-color: var(--border-strong);
  background: var(--surface-strong);
}
.card:hover::before { opacity: 1; }
.card-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  margin-bottom: 1.25rem;
  color: #a5c8ff;
  background: linear-gradient(140deg, rgba(59, 130, 246, 0.2), rgba(124, 58, 237, 0.16));
  border: 1px solid rgba(99, 152, 255, 0.22);
}
.card-icon svg { width: 22px; height: 22px; }
.card h3 { margin-bottom: 0.7rem; }
.card p { color: var(--muted); }
.card-list { margin-top: 1.1rem; display: grid; gap: 0.5rem; }
.card-list li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--faint);
}
.card-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
}

/* ---------- projects ---------- */
.project {
  padding: 1.9rem 1.8rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.project:hover { transform: translateY(-5px); border-color: var(--border-strong); }
.project--feature {
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(59, 130, 246, 0.12), transparent 60%),
    var(--surface);
}
.project-top { display: flex; align-items: center; gap: 0.8rem; }
.project-role {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--cyan);
  margin: 0.5rem 0 0.9rem;
}
.project p:not(.project-role) { color: var(--muted); }
.tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
  background: rgba(16, 185, 129, 0.1);
}
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.15rem; }
.chips li {
  font-size: 0.75rem;
  font-family: var(--mono);
  padding: 0.28rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--faint);
}
.project-links { margin-top: 1.3rem; }
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.92rem;
  color: #7fb2ff;
}
.link-arrow::after { content: "→"; transition: transform 0.2s ease; }
.link-arrow:hover::after { transform: translateX(4px); }
.work-foot { margin-top: 2.2rem; text-align: center; }

/* ---------- chains ---------- */
.chain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.chain {
  position: relative;
  padding: 1.6rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.chain::after {
  content: "";
  position: absolute;
  inset: auto auto -60px -60px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: var(--c);
  opacity: 0;
  filter: blur(50px);
  transition: opacity 0.35s ease;
}
.chain:hover { transform: translateY(-5px); border-color: var(--border-strong); }
.chain:hover::after { opacity: 0.24; }
.chain-badge {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  margin-bottom: 1rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  background: var(--c);
  background: color-mix(in srgb, var(--c) 82%, transparent);
  box-shadow: 0 8px 20px -8px var(--c);
}
.chain h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.chain p { color: var(--muted); }
.chain ul { display: grid; gap: 0.4rem; margin-top: 1rem; }
.chain li {
  position: relative;
  padding-left: 1.1rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--faint);
}
.chain li::before { content: "›"; position: absolute; left: 0; color: var(--cyan); }
.chain--more { border-style: dashed; }

/* ---------- split (dapps) ---------- */
.split {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.split-list { display: grid; gap: 0.9rem; }
.feature {
  display: flex;
  gap: 1.1rem;
  padding: 1.35rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.feature:hover { border-color: var(--border-strong); background: var(--surface-strong); transform: translateX(4px); }
.feature-num {
  flex: none;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--violet-text);
  padding-top: 0.2rem;
}
.feature h3 { font-size: 1.02rem; margin-bottom: 0.35rem; }
.feature p { color: var(--muted); margin: 0; }

.panel {
  position: sticky;
  top: 100px;
  padding: 1.8rem 1.6rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(120% 110% at 100% 0%, rgba(124, 58, 237, 0.18), transparent 60%),
    rgba(10, 14, 28, 0.72);
}
.panel h3 { margin-bottom: 1.1rem; }
.check-list { display: grid; gap: 0.65rem; margin-bottom: 1.7rem; }
.check-list li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--muted);
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  border-radius: 50%;
  color: var(--green);
  background: rgba(16, 185, 129, 0.14);
}

/* ---------- engagement plans ---------- */
.plan {
  display: flex;
  flex-direction: column;
  padding: 1.9rem 1.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.plan:hover { transform: translateY(-5px); border-color: var(--border-strong); }
.plan--featured {
  border-color: rgba(99, 152, 255, 0.35);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(59, 130, 246, 0.16), transparent 62%),
    var(--surface-strong);
  box-shadow: 0 30px 60px -35px rgba(59, 130, 246, 0.45);
}
.plan-tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.7rem;
}
.plan h3 { font-size: 1.28rem; margin-bottom: 0.6rem; }
.plan > p { color: var(--muted); }
.plan .check-list { margin-top: 1.1rem; margin-bottom: 1.7rem; }
.plan .btn { margin-top: auto; }

/* ---------- steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.3rem;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 1.8rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}
.step-num {
  display: block;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--violet-text);
  margin-bottom: 0.9rem;
}
.step h3 { margin-bottom: 0.6rem; }
.step p { color: var(--muted); margin: 0; }

/* ---------- stack ---------- */
.stack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.stack-col {
  padding: 1.7rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}
.stack-col h3 {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--border);
}
.stack-col ul { display: grid; gap: 0.55rem; }
.stack-col li { font-family: var(--mono); font-size: 0.83rem; color: var(--muted); }

/* ---------- about ---------- */
.about-inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.about-media { position: relative; }

/* The About visual. This was an inline SVG network diagram; it is a rendered
   image now, in the same navy/cyan/violet palette as the hero. It carries its
   own frame and background, so no panel wrapper sits behind it. */
.about-shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  box-shadow: 0 40px 80px -35px rgba(0, 0, 0, 0.85);
}
/* Floats over the panel's top edge rather than its left: the About column
   starts at the container gutter, so a negative left offset would be clipped
   by the viewport. */
.av-float { top: -7%; left: 6%; animation-delay: -1.4s; }
.av-float .float-icon { background: rgba(124, 58, 237, 0.18); color: #c084fc; }
.about-badge {
  position: absolute;
  bottom: -18px; right: -14px;
  display: flex;
  flex-direction: column;
  padding: 0.8rem 1.1rem;
  border-radius: 15px;
  border: 1px solid var(--border-strong);
  background: rgba(10, 15, 30, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.about-badge strong { font-family: var(--display); font-size: 0.9rem; }
.about-badge span { font-size: 0.74rem; color: var(--faint); }
.about-copy p { color: var(--muted); }
.about-copy h2 { margin-bottom: 1.2rem; }
.about-points { display: grid; gap: 0.8rem; margin-top: 1.5rem; }
.about-points li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--muted);
}
.about-points strong { color: var(--text); }
.about-points li::before {
  content: "◆";
  position: absolute;
  left: 0;
  color: var(--cyan);
  font-size: 0.7rem;
}

/* ---------- team ---------- */
.team-block { margin-top: clamp(2.8rem, 6vw, 4.5rem); }
.team-head { max-width: 640px; margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }
.team-head h3 {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  line-height: 1.2;
  margin: 0 0 0.7rem;
}
.team-head p { color: var(--muted); margin: 0; }

/* The whole team stays on a single row at every width. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.9rem, 2.2vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.member {
  display: flex;
  flex-direction: column;
  padding: 0.85rem 0.85rem 1.1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(18, 25, 46, 0.7), rgba(10, 15, 30, 0.5));
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.member:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.member--lead { border-color: rgba(34, 211, 238, 0.38); }

/* A fixed square plus object-fit keeps every portrait exactly the same size,
   whatever the original photo's shape was. */
.member-shot {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  margin-bottom: 0.9rem;
}
.member-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05);
}
.member-tag {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  white-space: nowrap;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #04121c;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
}
.member-name {
  font-family: var(--display);
  font-size: 1.05rem;
  margin: 0 0 0.2rem;
}
.member-role {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cyan);
  margin: 0 0 0.5rem;
}
.member-note {
  color: var(--muted);
  margin: 0;
}
/* Roles carry a short label for the narrow phone cards. */
.role-short { display: none; }

/* ---------- one size for all body copy ----------
   Descriptive paragraphs used to range from 0.85rem to 1.16rem depending on
   which component they happened to sit in. They all resolve here instead, at
   every breakpoint.

   Labels (kickers, roles, tags, meta notes) keep their own smaller sizes on
   purpose: they are labels, not prose. Every one of them carries a class,
   while the descriptive paragraphs carry none, so :not([class]) separates the
   two without having to list each label by hand. */
.lead,
.section-sub,
.empty-state,
.work-foot,
.footer-blurb,
.member-note,
.about-points li,
.check-list li,
.card-list li,
.card p:not([class]),
.project p:not([class]),
.chain p:not([class]),
.feature p:not([class]),
.plan > p:not([class]),
.step p:not([class]),
.about-copy p:not([class]),
.contact-copy p:not([class]),
.team-head p:not([class]),
.faq details p:not([class]),
.footer-cta p:not([class]) {
  font-size: var(--body-size);
}

/* ---------- faq ---------- */
.faq { display: grid; gap: 0.85rem; }
.faq details {
  border-radius: 15px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 0 1.4rem;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.faq details[open] { border-color: var(--border-strong); background: var(--surface-strong); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2rem 1.15rem 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--cyan);
  transition: transform 0.25s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p {
  color: var(--muted);
  padding-bottom: 1.25rem;
  margin: 0;
  max-width: 68ch;
}

/* ---------- contact ---------- */
.contact-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(2rem, 4.5vw, 3.4rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(110% 130% at 0% 0%, rgba(59, 130, 246, 0.16), transparent 58%),
    radial-gradient(90% 110% at 100% 100%, rgba(124, 58, 237, 0.14), transparent 60%),
    rgba(10, 14, 28, 0.7);
  box-shadow: 0 40px 90px -45px rgba(0, 0, 0, 0.9);
}
.contact-copy p { color: var(--muted); }
.contact-copy h2 { margin-bottom: 1.1rem; }
.contact-links { display: grid; gap: 0.7rem; margin-top: 1.8rem; }
.contact-links li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; }
.contact-links a { color: var(--text); border-bottom: 1px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; }
.contact-links a:hover { color: #7fb2ff; border-bottom-color: currentColor; }
.ci {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--cyan);
}

.contact-form { display: grid; gap: 1rem; align-content: start; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: 0.82rem; color: var(--muted); font-weight: 500; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(4, 7, 15, 0.6);
  color: var(--text);
  font: inherit;
  font-size: 0.93rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input::placeholder,
.field textarea::placeholder { color: #4d5872; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}
.field select { appearance: none; cursor: pointer; }
.field input.is-invalid,
.field textarea.is-invalid { border-color: #f87171; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.form-note { font-size: 0.8rem; color: var(--faint); margin: 0; text-align: center; }
.form-note.is-ok { color: var(--green); }
.form-note.is-error { color: #f87171; }

/* ---------- back to top ---------- */
.to-top {
  position: fixed;
  right: 1.15rem;
  bottom: 1.35rem;
  z-index: 92;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(12, 17, 32, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--muted);
  cursor: pointer;
  box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s,
              color 0.2s ease, border-color 0.2s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--cyan); border-color: var(--cyan); }
.to-top svg { width: 20px; height: 20px; }

/* ---------- sticky mobile action bar ---------- */
.mobile-bar { display: none; }

/* ---------- footer ---------- */
.site-footer {
  position: relative;
  border-top: 1px solid var(--border);
  padding: 0 0 2rem;
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(59, 130, 246, 0.08), transparent 60%),
    var(--bg-alt);
}

.footer-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  margin: -3.5rem 0 3rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(110% 140% at 0% 0%, rgba(59, 130, 246, 0.2), transparent 58%),
    radial-gradient(90% 120% at 100% 100%, rgba(124, 58, 237, 0.18), transparent 60%),
    rgba(11, 16, 32, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
.footer-cta h2 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); }
.footer-cta p { color: var(--muted); margin: 0.5rem 0 0; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 2rem 1.6rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--border);
}
.footer-brand .brand { margin-bottom: 1rem; }
.footer-blurb { color: var(--faint); max-width: 34ch; }
.footer-social { display: flex; gap: 0.55rem; margin-top: 1.2rem; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.footer-social a:hover { color: var(--cyan); border-color: var(--cyan); transform: translateY(-3px); }
.footer-social svg { width: 17px; height: 17px; }

/* Footer columns are <details> so they collapse into dropdowns on phones.
   JavaScript forces them open above 620px, where the grid has room. */
.footer-col { min-width: 0; }
.footer-links { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0 0 0.4rem;
  list-style: none;
  cursor: default;
}
.footer-title::-webkit-details-marker { display: none; }
.footer-title::after {
  content: "";
  display: none;
  width: 9px; height: 9px;
  border-right: 2px solid var(--faint);
  border-bottom: 2px solid var(--faint);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}
.footer-col a {
  font-size: 0.87rem;
  color: var(--faint);
  transition: color 0.2s ease, transform 0.2s ease;
}
.footer-col a:hover { color: var(--text); transform: translateX(3px); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding-top: 1.5rem;
}
.footer-bottom p { margin: 0; font-size: 0.8rem; color: var(--faint); }
/* Leave room for the back-to-top button parked in the corner. */
@media (min-width: 861px) { .footer-bottom { padding-right: 3.6rem; } }
.footer-note { font-family: var(--mono); font-size: 0.75rem !important; }

/* ---------- reveal ----------
   Only hide content when JS is confirmed running, so a script failure or a
   blocked script never leaves the page blank. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

/* Large desktops and 2K monitors: let the layout breathe instead of
   stranding the content in a 1280px column. */
@media (min-width: 1700px) {
  :root { --shell: min(1480px, 100% - 4rem); }
  body { font-size: 17px; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .hero { padding-top: 5.5rem; }
}

@media (min-width: 2200px) {
  :root { --shell: min(1640px, 100% - 5rem); }
}

@media (max-width: 1320px) {
  .grid--4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1180px) {
  .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); }
  .chain-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Small laptops and landscape tablets: three columns reads better than two
   very wide cards. */
@media (min-width: 900px) and (max-width: 1180px) {
  .grid--4, .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .steps .step { padding: 1.5rem 1.25rem; }
  /* Keep the two-column hero here, but shrink the snippet so it still reads. */
  .code-body { font-size: 0.7rem; }
  .float-card--audit { left: -3%; }
  .float-card--gas { right: -1%; }
}

@media (max-width: 899px) {
  .hero-inner { grid-template-columns: 1fr; }
  /* Lead with the message, not the code sample, once columns collapse. */
  /* Auto margins would make this grid item size to max-content and push the
     wide code block past the viewport, so centre it with justify-self. */
  .hero-visual { order: 2; width: 100%; max-width: 620px; justify-self: center; margin-top: 0.5rem; }
  .code-card { transform: none; }
  .float-card--audit { left: 2%; }
  .float-card--gas { right: 2%; }
}

@media (max-width: 1024px) {
  .stack-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .panel { position: static; }
  .about-inner { grid-template-columns: 1fr; }
  .about-media { max-width: 320px; }
  /* Overlapping a 320px-wide diagram would bury one of the chain nodes, so the
     location badge sits below the panel once the columns stack. */
  .about-badge {
    position: static;
    width: max-content;
    margin-top: 0.9rem;
  }
  .contact-card { grid-template-columns: 1fr; }
  .mega-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 899px) {
  .grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .steps, .chain-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .topbar-links { display: none; }
  .topbar-inner { justify-content: center; }
  .topbar-msg { text-align: center; }
  .topbar-long { display: none; }
  .topbar-short { display: inline; }
  .has-mega { display: contents; }
  .nav-link--extra { display: block; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-cta { margin-top: -2.5rem; }
  .nav-toggle { display: block; }
  .to-top {
    /* Clear the sticky action bar. */
    bottom: calc(4.9rem + 0.55rem + env(safe-area-inset-bottom));
  }
  .stats { grid-template-columns: repeat(2, 1fr); }
  /* Same compact padding, plus clearance for the notch. */
  .site-header { padding-top: calc(0.6rem + env(safe-area-inset-top)); }

  /* Navigation becomes a full-height side sheet instead of a small dropdown. */
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 125;
    width: min(86vw, 360px);
    height: 100%;
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(5.6rem + env(safe-area-inset-top)) 1.4rem calc(1.6rem + env(safe-area-inset-bottom));
    border: 0;
    border-left: 1px solid var(--border-strong);
    background:
      radial-gradient(130% 55% at 100% 0%, rgba(59, 130, 246, 0.2), transparent 62%),
      rgba(8, 12, 24, 0.99);
    box-shadow: -30px 0 70px -30px rgba(0, 0, 0, 0.95);
    transform: translateX(102%);
    /* Keep the closed sheet out of the tab order and the accessibility tree. */
    visibility: hidden;
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.34s;
  }
  .nav.is-open { transform: none; visibility: visible; }
  .nav .nav-link {
    padding: 0.95rem 0.15rem;
    font-family: var(--display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text);
    border-bottom: 1px solid var(--border);
  }
  .nav .nav-link::after { display: none; }
  .nav-cta { margin-top: 1.4rem; padding-block: 0.95rem; font-size: 1rem; }

  /* The desktop mega menu becomes a grouped accordion inside the sheet, so the
     service categories are reachable on a phone without duplicating markup. */
  .nav-link--mega {
    display: flex;
    width: 100%;
    justify-content: space-between;
    text-align: left;
  }
  .nav-link--mega svg { width: 18px; height: 18px; flex: none; }
  .mega {
    display: none;
    position: static;
    inset: auto;
    margin: 0;
    padding: 0.4rem 0 0.9rem;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .mega.is-open { display: block; }
  .mega-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .mega-promo { display: none; }
  .mega-title { margin-bottom: 0.5rem; }
  .mega-col a { padding: 0.5rem 0.6rem; }
  .mega-col a + a { margin-top: 0.1rem; }

  .nav-group-label {
    display: block;
    margin: 1.5rem 0 0.3rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cyan);
  }

  .nav-extra { display: block; margin-top: auto; padding-top: 1.9rem; }
  .nav-extra-label {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 0.45rem;
  }
  .nav-extra-link { font-size: 0.95rem; color: var(--muted); }
  .nav-extra-social { display: flex; gap: 0.5rem; margin-top: 1.1rem; }
  .nav-extra-social a {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
  }
  .nav-extra-social svg { width: 18px; height: 18px; }

  /* Sticky action bar keeps the primary conversion in thumb reach. */
  .mobile-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.95rem calc(0.7rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-strong);
    background: rgba(7, 10, 20, 0.94);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
  }
  .mobile-bar-alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex: none;
    min-height: 46px;
    padding: 0 1.05rem;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface-strong);
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
  }
  .mobile-bar-alt svg { width: 17px; height: 17px; }
  .mobile-bar-cta { flex: 1; min-height: 46px; }
  body { padding-bottom: 4.9rem; }
}

/* Tablets in portrait: two columns is right, but the vertical rhythm from
   desktop leaves too much air. */
@media (max-width: 860px) {
  .section { padding: clamp(3.2rem, 7vw, 4.5rem) 0; }
  .section-head { margin-bottom: clamp(2rem, 4vw, 2.6rem); }
  .footer-cta { text-align: left; }
}

@media (max-width: 620px) {
  :root { --shell: min(1200px, 100% - 1.9rem); --gut: 0.95rem; }
  body { font-size: 16px; }

  /* Long vertical stacks of near-identical cards read as an endless document
     on a phone. These four groups become full-bleed swipeable rails instead,
     which cuts about 8,000px of scrolling. */
  .rail {
    display: flex;
    grid-template-columns: none;
    gap: 0.8rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gut);
    margin-inline: calc(var(--gut) * -1);
    padding: 0.25rem var(--gut) 0.6rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  .rail--narrow > * { flex: 0 0 68%; }
  /* Cards parked off to the right never intersect the viewport, so skip the
     reveal animation for them and let them be ready the moment they scroll in. */
  .js .rail > .reveal { opacity: 1; transform: none; transition: none; }

  .rail-hint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 1rem 0 0;
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
  }
  .rail-hint span {
    color: var(--cyan);
    animation: nudge 1.9s ease-in-out infinite;
  }
  @keyframes nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
  }
  .section-head .rail-hint { margin-top: 1.1rem; }

  /* Position dots under each carousel: the widely understood signal for
     "there is more here, and this is where you are". */
  .rail-dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    margin-top: 0.9rem;
  }
  .rail-dot {
    display: grid;
    place-items: center;
    /* 24x24 is the WCAG 2.5.8 minimum target size. */
    width: 24px; height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .rail-dot::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
    transition: width 0.28s ease, background 0.28s ease;
  }
  .rail-dot.is-active::before {
    width: 20px;
    background: linear-gradient(90deg, var(--blue), var(--violet-text));
  }

  /* Portfolio filters scroll horizontally rather than wrapping to three rows. */
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--gut) * -1);
    padding-inline: var(--gut);
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; }

  .stack-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Each footer section becomes a tappable dropdown row, so every desktop link
     is still reachable without a wall of text. */
  .footer-grid { grid-template-columns: 1fr; gap: 0; padding-bottom: 1.4rem; }
  .footer-col { border-top: 1px solid var(--border); }
  .footer-title {
    margin: 0;
    padding: 1rem 0.1rem;
    cursor: pointer;
  }
  .footer-title::after { display: block; }
  /* Only this rule can hide footer links, and it lives inside the phone
     breakpoint, so desktop columns are always visible no matter what state
     the panel is left in. */
  .footer-col.is-collapsed .footer-links { display: none; }
  .footer-col:not(.is-collapsed) .footer-title { color: var(--cyan); }
  .footer-col:not(.is-collapsed) .footer-title::after {
    transform: rotate(-135deg);
    border-color: var(--cyan);
  }
  .footer-links { gap: 0.15rem; padding: 0 0 1rem 0.1rem; }
  .footer-col a { padding-block: 0.5rem; }

  /* Density pass: stacked single-column content is long, so tighten the
     spacing that only made sense across multiple columns. */
  .section { padding: 2.8rem 0; }
  .hero + .section { padding-top: 2.4rem; }
  .section-head { margin-bottom: 1.8rem; }
  .grid { gap: 0.9rem; }
  .card, .project, .plan, .chain, .stack-col { padding: 1.5rem 1.3rem; }
  .feature { padding: 1.2rem 1.2rem; }
  .step { padding: 1.4rem 1.3rem; }
  .steps, .split-list, .stack-grid, .chain-grid { gap: 0.9rem; }
  .stat { padding: 1.2rem 1rem; }
  .marquee { margin-top: 2.2rem; }
  .contact-card { padding: 1.6rem 1.3rem; }
  .footer-cta { margin-bottom: 2.2rem; padding: 1.6rem 1.4rem; }
  .footer-grid { gap: 1.6rem; padding-bottom: 1.8rem; }
  .about-points, .check-list, .card-list { gap: 0.5rem; }
  /* Four across on a phone leaves each card only a quarter of the width, so
     drop the card chrome and the blurb and give that space to the portrait.
     Photo, name and role still read clearly at this size. */
  .team-grid { gap: 0.5rem; }
  .member {
    padding: 0;
    border: 0;
    background: none;
    text-align: center;
  }
  .member:hover { transform: none; }
  .member-shot { margin-bottom: 0.5rem; border-radius: 12px; }
  .member-note { display: none; }
  .member-name { font-size: 0.82rem; margin-bottom: 0.1rem; }
  .member-role { font-size: 0.66rem; line-height: 1.35; }
  .role-full { display: none; }
  .role-short { display: inline; }
  /* A badge sitting on a quarter-width portrait covers the face, and the role
     line already says who leads the team, so mark the lead with a ring instead. */
  .member-tag { display: none; }
  .member--lead .member-shot { border-color: rgba(34, 211, 238, 0.6); }
  .grid--2, .steps, .field-row { grid-template-columns: 1fr; }
  .float-card { display: none; }
  .hero-actions .btn { width: 100%; }
  .about-badge { right: 8px; bottom: -14px; }
  .footer-cta { flex-direction: column; align-items: flex-start; }
  .footer-cta .btn { width: 100%; }
  .filters { gap: 0.4rem; }
  .filter { font-size: 0.8rem; padding: 0.5rem 0.9rem; }
  .code-body { font-size: 0.7rem; }
}

/* Small phones (iPhone SE, Galaxy S-series portrait) */
@media (max-width: 400px) {
  :root { --shell: min(1200px, 100% - 1.5rem); --gut: 0.75rem; }
  .rail > * { flex: 0 0 86%; }
  .rail--narrow > * { flex: 0 0 74%; }
  h1 { font-size: 1.95rem; }
  .eyebrow { font-size: 0.7rem; padding: 0.35rem 0.75rem; }
  .hero-trust { font-size: 0.74rem; }
  .stat { padding: 1.1rem 0.75rem; }
  .stat dt { font-size: 0.69rem; letter-spacing: 0.05em; }
  .stat dd { font-size: 1.55rem; }
  .card, .project, .plan, .chain, .stack-col { padding: 1.3rem 1.15rem; }
  .code-body { font-size: 0.66rem; padding: 1rem 1.1rem 1.2rem; }
  .contact-card { padding: 1.4rem 1.15rem; }
  .mobile-bar { gap: 0.5rem; padding-inline: 0.75rem; }
  .mobile-bar-alt { padding: 0 0.75rem; font-size: 0.82rem; }
  .mobile-bar-cta { font-size: 0.85rem; padding-inline: 0.85rem; white-space: nowrap; }
  .footer-social a { width: 40px; height: 40px; }
}

/* Phones in landscape: the tall hero would otherwise fill several screens */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding-top: 2rem; }
  .hero-visual { display: none; }
  .topbar { display: none; }
}

/* Touch devices: hover-only affordances never trigger, so drop the effects
   that depend on them and keep tap targets comfortable. */
@media (hover: none) {
  .code-card { transform: none; }
  .card:hover, .project:hover, .plan:hover, .chain:hover, .stack-col:hover { transform: none; }
  .feature:hover { transform: none; }
  .btn, .filter { min-height: 44px; }
  .footer-col a { padding-block: 0.35rem; }
}

/* Wider tap targets for the desktop nav on touch laptops, without touching the
   mobile sheet rows defined above. */
@media (hover: none) and (min-width: 861px) {
  .nav-link { padding-block: 0.35rem; }
}

@media print {
  .bg-grid, .bg-glow, .topbar, .site-header, .marquee, .hero-visual,
  .filters, .contact-form, .footer-cta, .footer-social,
  .to-top, .mobile-bar { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  .card, .project, .plan, .chain, .step, .stack-col, .feature, .panel, .contact-card {
    border: 1px solid #bbb;
    background: none;
    box-shadow: none;
    break-inside: avoid;
  }
  .grad, .stat dd { -webkit-text-fill-color: #000; color: #000; }
  .section { padding: 1.2rem 0; }
  .faq details { border-color: #bbb; }
  .faq details p { display: block; }
}

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