:root {
  /* Aligned with benchmarks.duellab.org static site for a cohesive, data-product look */
  --bg: #081019;
  --bg-soft: #0d1626;
  --panel: rgba(15, 24, 40, 0.9);
  --panel-2: rgba(10, 16, 28, 0.92);

  --line: rgba(143, 184, 255, 0.16);
  --line-strong: rgba(143, 184, 255, 0.28);

  --text: #ecf2ff;
  --soft: #c8d4ea;
  --muted: #95a6c5;

  --primary: #7db0ff;
  --primary-strong: #a5c6ff;
  --accent: #64f1c1;
  --accent-warm: #ffc96b;

  --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);

  --radius-xl: 28px;
  --radius-lg: 24px;
  --radius-md: 20px;
  --radius-sm: 14px;

  --font-sans:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Sticky header (.header-inner min-height) — keep in-page anchors readable */
  scroll-padding-top: 5.75rem;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 40;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--line-strong);
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
}

.skip-link:focus {
  clip-path: none;
  clip: auto;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font-sans);
  color: var(--text);
  line-height: 1.6;
  background:
    radial-gradient(circle at 85% 12%, rgba(125, 176, 255, 0.06), transparent 30%),
    radial-gradient(circle at 10% 35%, rgba(100, 241, 193, 0.05), transparent 26%),
    radial-gradient(circle at top right, rgba(125, 176, 255, 0.05), transparent 28%),
    linear-gradient(180deg, #081019 0%, #09111d 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Keep header, main, and footer above fixed ::before / ::after (pseudo-elements stack after in-flow content otherwise). */
body > * {
  position: relative;
  z-index: 1;
}

/* Fixed decorative layers: irregular "nodes", sparse major grid, SVG edges — no animation, no filters. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image:
    radial-gradient(circle at 78% 8%, rgba(125, 176, 255, 0.06) 0%, transparent 42%),
    radial-gradient(circle at 6% 24%, rgba(100, 241, 193, 0.05) 0%, transparent 38%),
    radial-gradient(circle at 94% 46%, rgba(255, 201, 107, 0.05) 0%, transparent 34%),
    radial-gradient(circle at 14% 68%, rgba(125, 176, 255, 0.06) 0%, transparent 40%),
    linear-gradient(rgba(143, 184, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 184, 255, 0.05) 1px, transparent 1px);
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    132px 132px,
    132px 132px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.065;
  /* Wide viewBox + cover: two spines, vertical bridges, one mid horizontal — no bottom bands. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 100' preserveAspectRatio='xMidYMid meet'%3E%3Cg fill='none' stroke='%239dc1ff' stroke-width='0.26' stroke-linecap='round' stroke-linejoin='round' opacity='0.68'%3E%3Cpath d='M8 34 L44 17 L80 38 L128 26 L168 42 L208 21 L252 32 L292 15 L332 40 L372 24'/%3E%3Cpath d='M8 70 L46 55 L84 64 L122 74 L170 58 L212 70 L248 72 L286 56 L328 68 L372 50'/%3E%3Cpath d='M44 17 L46 55 M168 42 L170 58 M292 15 L286 56 M80 38 L84 64 M128 26 L122 74 M208 21 L212 70 M252 32 L248 72 M332 40 L328 68 M8 34 L8 70 M372 24 L372 50'/%3E%3Cpath d='M18 50 L362 47'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

::selection {
  background: rgba(125, 176, 255, 0.28);
  color: var(--text);
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.container {
  width: min(1180px, calc(100% - 2rem));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(16px);
  background: rgba(10, 15, 26, 0.78);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  min-height: 76px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 44px;
  text-decoration: none;
}

/* Inline SVG favicon matches <link rel="icon"> (square duel mark). */
.brand-mark {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2064'%3E%3Crect%20width%3D'64'%20height%3D'64'%20rx%3D'14'%20fill%3D'%23081019'%2F%3E%3Crect%20x%3D'30'%20y%3D'12'%20width%3D'4'%20height%3D'40'%20rx%3D'2'%20fill%3D'%239dc1ff'%2F%3E%3Crect%20x%3D'10'%20y%3D'23'%20width%3D'18'%20height%3D'18'%20rx%3D'4'%20fill%3D'%2364f1c1'%2F%3E%3Crect%20x%3D'36'%20y%3D'23'%20width%3D'18'%20height%3D'18'%20rx%3D'4'%20fill%3D'%23ffc96b'%2F%3E%3C%2Fsvg%3E")
    center / 100% 100% no-repeat;
  box-shadow: 0 0 0 1px var(--line-strong);
  border-radius: 8px;
}

.brand-lockup {
  display: grid;
  gap: 0.08rem;
}

.brand-name {
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 1.08rem;
}

.brand-tag {
  color: var(--muted);
  font-size: 0.82rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.site-nav a,
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.65rem 0.9rem;
  text-decoration: none;
  color: var(--soft);
  border-radius: 999px;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.site-nav a:hover,
.footer-nav a:hover {
  background: rgba(125, 176, 255, 0.12);
  color: var(--text);
}

.hero {
  position: relative;
  padding: clamp(3rem, 8vw, 6rem) 0 2rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.section-label,
.card-kicker {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--accent);
  margin-bottom: 1rem;
}

h1 {
  margin-bottom: 1rem;
  font-size: clamp(2.35rem, 5.5vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.05em;
  text-wrap: balance;
  text-shadow: 0 4px 28px rgba(125, 176, 255, 0.18);
}

.hero-text {
  max-width: 62ch;
  margin-bottom: 1.25rem;
  color: var(--soft);
  font-size: 1.12rem;
}

.hero-actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.hero-note {
  color: var(--muted);
  font-size: 0.96rem;
  margin-bottom: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.92rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  color: #1a0a2e;
  background: linear-gradient(135deg, #ffd93d, #ffe566);
  box-shadow: 0 12px 28px rgba(255, 217, 61, 0.3);
}

.btn-primary:hover {
  box-shadow: 0 16px 36px rgba(255, 217, 61, 0.4);
}

.btn-secondary {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.btn-secondary:hover {
  background: rgba(125, 176, 255, 0.1);
  border-color: rgba(125, 176, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(125, 176, 255, 0.18);
}

.btn-block {
  width: 100%;
}

.hero-card,
.principles-card,
.contact-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: linear-gradient(165deg, rgba(15, 24, 40, 0.95), rgba(10, 16, 28, 0.92));
  box-shadow: var(--shadow);
}

.hero-card {
  box-sizing: border-box;
  max-width: 21.875rem;
  width: 100%;
  justify-self: end;
  padding: 1.35rem;
  border-radius: var(--radius-xl);
}

.hero-card::before,
.principles-card::before,
.contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top right, rgba(125, 176, 255, 0.08), transparent 34%),
    radial-gradient(circle at bottom left, rgba(100, 241, 193, 0.06), transparent 30%);
}

.card-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* Status badge — not a control; keep visually distinct from .btn */
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  color: #081019;
  background: linear-gradient(135deg, var(--accent), #8fefd4);
  font-weight: 800;
  font-size: 0.82rem;
  cursor: default;
  user-select: none;
}

.card-kicker {
  color: var(--muted);
}

.hero-card h2,
.principles-card h2,
.callout h2,
.contact-card h2 {
  margin-bottom: 0.75rem;
  line-height: 1.03;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.hero-card h2 {
  font-size: 1.55rem;
}

.hero-card p,
.principles-card p,
.callout p,
.contact-card p {
  color: var(--soft);
}

.contact-card .btn {
  gap: 0.55rem;
}

.contact-icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

.contact-icon--fill {
  display: block;
}

.contact-card__social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  margin: 1rem 0 0;
}

.contact-card__social .text-link {
  margin-top: 0;
}

.text-link--with-icon {
  gap: 0.5rem;
}

.system-map {
  position: relative;
  margin: 1.2rem 0 1.2rem;
  padding: 1rem 1.05rem 1.05rem;
  border-radius: 22px;
  border: 2px dashed rgba(125, 176, 255, 0.28);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
}

.system-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(143, 184, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 184, 255, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* Ordered vertical pipeline: no SVG—direction is always “next row down”. */
.system-pipeline {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.system-pipeline__step {
  max-width: min(13.5rem, 100%);
}

.system-pipeline__step--pull-left {
  align-self: flex-start;
}

.system-pipeline__step--pull-right {
  align-self: flex-end;
}

.system-pipeline__link {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.28rem 0 0.32rem;
  list-style: none;
  transform-origin: 50% 0;
}

/* Point toward the next bubble (alternating left / right steps). Size unchanged—rotation only. */
.system-pipeline__link--to-right {
  transform: rotate(-32deg);
}

.system-pipeline__link--to-left {
  transform: rotate(32deg);
}

.system-pipeline__link::before {
  content: "";
  width: 3px;
  height: 0.65rem;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(125, 176, 255, 0.45), var(--primary));
  box-shadow: 0 0 12px rgba(125, 176, 255, 0.35);
}

.system-pipeline__link::after {
  content: "";
  width: 0;
  height: 0;
  margin-top: 1px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--primary-strong);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.system-node {
  position: relative;
  padding: 0.6rem 0.8rem 0.6rem 1.35rem;
  border-radius: 999px;
  border: 2px solid rgba(124, 245, 255, 0.35);
  background: linear-gradient(180deg, rgba(45, 27, 78, 0.9), rgba(20, 25, 45, 0.95));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.35);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}

.system-node::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  transform: translateY(-50%);
}

.system-node--1::before {
  background: var(--primary);
}

.system-node--2::before {
  background: var(--accent);
}

.system-node--3::before {
  background: var(--accent-warm);
}

.system-node--4::before {
  background: var(--primary);
}

.signal-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.signal-card,
.callout {
  border: 1px solid var(--line);
  background: rgba(13, 21, 35, 0.76);
}

.signal-card,
.callout,
.contact-card {
  border-radius: var(--radius-md);
}

.signal-card {
  padding: 1.15rem 1.2rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.signal-card:hover {
  transform: translateY(-3px);
  border-color: rgba(125, 176, 255, 0.4);
  background: rgba(17, 27, 45, 0.9);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.signal-card h3 {
  margin-bottom: 0.35rem;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.signal-card p {
  margin-bottom: 0;
  color: var(--soft);
  font-size: 0.96rem;
}

.section {
  padding: clamp(4rem, 8vw, 6rem) 0;
}

.section--compact {
  padding-top: 0;
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

.section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.95fr);
  gap: 1.5rem 2rem;
  align-items: start;
}

.section-copy h2,
.principles-card h2,
.callout h2,
.contact-card h2 {
  font-size: clamp(2rem, 4vw, 3rem);
}

.section-copy p {
  max-width: 62ch;
  margin-bottom: 1rem;
  color: var(--soft);
  font-size: 1.05rem;
}

.principles-card {
  padding: 1.4rem;
  border-radius: var(--radius-lg);
}

.principle-list {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.principle-list li {
  padding-top: 1rem;
  border-top: 1px solid rgba(143, 184, 255, 0.12);
}

.principle-list li:first-child {
  padding-top: 0;
  border-top: none;
}

.principle-list h3 {
  margin-bottom: 0.35rem;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}

.principle-list p {
  margin-bottom: 0;
}

.text-link {
  display: inline-flex;
  align-items: center;
  margin-top: 1rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
}

.text-link::after {
  content: " →";
}

.text-link:hover {
  color: var(--primary-strong);
}

.callout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: 1rem 1.5rem;
}

.callout,
.contact-card {
  padding: 1.35rem;
}

.microcopy {
  margin-top: 0.85rem;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

code {
  font-family: var(--font-mono);
  font-size: 0.94em;
  padding: 0.12rem 0.35rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
}

.site-footer {
  padding: 1.5rem 0 2.5rem;
  border-top: 1px solid var(--line);
}

.footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
}

.site-footer p {
  margin-bottom: 0;
  max-width: 62ch;
  color: var(--muted);
}

.footer-nav {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent-warm);
  outline-offset: 3px;
}

@media (max-width: 980px) {
  .hero-grid,
  .section-grid,
  .callout-grid {
    grid-template-columns: 1fr;
  }

  .hero-card {
    justify-self: center;
    max-width: min(21.875rem, 100%);
  }

  .signal-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(1180px, calc(100% - 1.25rem));
  }

  .header-inner {
    padding: 0.45rem 0;
  }

  .hero {
    padding-top: 2.6rem;
  }

  h1 {
    font-size: clamp(2.1rem, 11vw, 3.35rem);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
  }

  .site-nav,
  .footer-nav {
    gap: 0.12rem;
  }

  body::before {
    opacity: 0.18;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}