/* DH051 — quiet technical editorial refinement */
:root {
  --background: #0a1012;
  --foreground: #e8edec;
  --card: #101719;
  --card-foreground: #e8edec;
  --primary: #d7a84c;
  --primary-foreground: #17130b;
  --secondary: #141d1f;
  --secondary-foreground: #e8edec;
  --muted: #141d1f;
  --muted-foreground: #a3afad;
  --accent: #17282a;
  --accent-foreground: #8cc8c1;
  --border: #263235;
  --input: #334247;
  --ring: #8cc8c1;
  --radius: .5rem;
  --amber: #d7a84c;
  --amber-soft: #e4c37c;
  --cyan: #79bdb6;
  --cyan-dark: #172b2d;
  --ink: #0a1012;
  --panel: #101719;
  --panel-2: #141d1f;
  --line: #263235;
  --text: #e8edec;
  --text-soft: #a8b3b1;
}

html {
  scroll-padding-top: 116px;
}

body {
  background: #0a1012;
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}

.site-noise {
  display: none;
}

.site-container {
  width: min(1120px, calc(100% - 48px));
}

.section-gap {
  margin-block: 68px;
}

.site-header {
  background: rgb(10 16 18 / 96%);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.header-inner {
  height: 64px;
  gap: 26px;
}

.brand {
  gap: 10px;
}

.brand-mark {
  color: var(--amber);
  font-size: 21px;
}

.brand-copy {
  color: #8d9a98;
  letter-spacing: .07em;
  padding-left: 10px;
  font-size: 9px;
  font-weight: 650;
}

.primary-nav {
  gap: 2px;
}

.primary-nav a {
  color: #b5bfbd;
  border-radius: 5px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 600;
  transition: color .15s, background-color .15s;
}

.primary-nav a:hover,
.primary-nav a:focus-visible {
  background: #151e20;
  color: #fff;
}

.header-status {
  color: #8dc4be;
  font-size: 10px;
  letter-spacing: .04em;
}

.status-dot,
.header-status i,
.capability-signal i,
.duo-status i {
  box-shadow: none;
}

.duckhunt-subnav {
  top: 64px;
  background: rgb(15 22 24 / 97%);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.duckhunt-subnav-inner {
  min-height: 46px;
}

.duckhunt-subbrand {
  color: var(--amber-soft);
  letter-spacing: .02em;
  text-transform: none;
  font-size: 11px;
}

.duckhunt-subnav nav {
  gap: 0;
}

.duckhunt-subnav nav a {
  color: #9eaaa8;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  padding: 14px 10px 12px;
  font-size: 12px;
  line-height: 1;
  transition: color .15s, border-color .15s;
}

.duckhunt-subnav nav a:hover,
.duckhunt-subnav nav a:focus-visible {
  color: #eef2f1;
  background: transparent;
  border-bottom-color: #596a6c;
}

.hero-shell,
.mb-hero {
  background: #0b1214;
  border-bottom-color: var(--line);
}

.hero-shell::before,
.mb-hero::before {
  opacity: .045;
  background-size: 72px 72px;
}

.hero-grid,
.mb-hero-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  gap: 48px;
  min-height: auto;
  padding-block: 46px 28px;
}

.hero-shell .hero-copy h1,
.mb-hero .hero-copy h1 {
  max-width: 620px;
  margin: 14px 0 15px;
  font-size: clamp(32px, 3.8vw, 43px);
  font-weight: 720;
  letter-spacing: -.035em;
  line-height: 1.09;
}

.hero-lead {
  max-width: 620px;
  color: #b3bfbd;
  font-size: 15px;
  line-height: 1.7;
}

.hero-lead code {
  color: var(--amber-soft);
  background: #191810;
  border-color: #4a4027;
}

.eyebrow,
.section-kicker {
  color: #8dc4be;
  letter-spacing: .1em;
  font-size: 10px;
}

.hero-actions,
.hero-shell .hero-actions,
.mb-hero .hero-actions {
  gap: 9px;
  margin-top: 20px;
}

.cta-primary,
.cta-secondary,
.cta-ranking {
  min-height: 40px !important;
  height: 40px !important;
  border-radius: 6px !important;
  padding-inline: 17px !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  transition: color .15s, background-color .15s, border-color .15s !important;
  transform: none !important;
}

.cta-primary {
  background: var(--amber) !important;
}

.cta-primary:hover {
  background: var(--amber-soft) !important;
}

.cta-secondary {
  color: #d7dfdd !important;
  background: #11191b !important;
  border-color: #344144 !important;
}

.cta-secondary:hover {
  color: #fff !important;
  background: #172123 !important;
  border-color: #596a6c !important;
}

.cta-ranking {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--amber-soft);
  background: #171711;
  border: 1px solid #544829;
  text-decoration: none;
}

.cta-ranking::after {
  content: "→";
  margin-left: 9px;
  font-family: ui-monospace, monospace;
}

.cta-ranking:hover,
.cta-ranking:focus-visible {
  color: #fff3d4;
  background: #211e13;
  border-color: #806a36;
  outline: none;
}

.connection-line {
  color: #7f8e8c;
  gap: 9px;
  margin-top: 20px;
  font-size: 9px;
  letter-spacing: .03em;
}

.hero-shell .connection-line {
  display: none;
}

.radar-card,
.runtime-console {
  background: #0e1618;
  border-color: #2b393c;
  border-radius: 8px;
  box-shadow: none;
  transform: none;
}

.radar-topline,
.radar-footer {
  color: #899795;
  padding: 11px 14px;
  letter-spacing: .06em;
}

.live-pill {
  color: #9bd0ca;
  background: #142527;
  border-color: #355355;
}

.radar-screen {
  height: 238px;
  background: radial-gradient(circle, #17302e55, transparent 60%);
}

.radar-sweep {
  opacity: .35;
  animation: none !important;
  transform: rotate(32deg);
}

.ping {
  box-shadow: none;
}

.duck-signal {
  color: var(--amber-soft);
  text-shadow: none;
}

.terminal-event {
  background: #0a1113;
  padding: 12px 14px;
  font-size: 9px;
}

.console-bar {
  min-height: 40px;
}

.console-bar em {
  border-radius: 4px;
}

.console-body {
  background: #0c1416;
  padding: 24px;
}

.console-ascii {
  margin-bottom: 22px;
  text-shadow: none;
}

.console-pulse {
  margin-top: 17px;
}

.fact-grid {
  gap: 8px;
}

.fact-card {
  min-height: 78px;
  padding: 15px 17px;
  background: #101719;
  border-color: var(--line);
  border-radius: 6px;
}

.fact-card span {
  color: #899795;
  letter-spacing: .07em;
  font-size: 9px;
}

.fact-card strong {
  font-size: 13px;
}

.mb-facts,
.hero-shell + .fact-grid.section-gap {
  margin-top: 8px;
  margin-bottom: 56px;
}

.split-section,
.mb-intro {
  gap: 64px;
}

.split-section h2,
.feature-copy h2,
.section-heading-row h2,
.command-rules h2,
.mb-intro-title h2,
.mb-system-grid h2 {
  margin: 13px 0 14px;
  font-size: clamp(27px, 3.2vw, 38px);
  letter-spacing: -.035em;
  line-height: 1.14;
}

.section-intro,
.feature-copy > p,
.mb-intro-copy p,
.mb-system-grid > div:first-child > p {
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.75;
}

.mb-intro-copy {
  padding-left: 30px;
}

.step-row {
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding: 18px 0;
}

.step-row h3 {
  margin-bottom: 4px;
  font-size: 16px;
}

.step-row p {
  font-size: 13px;
  line-height: 1.65;
}

.feature-band,
.mb-system-band {
  background: #0f1719;
  border-color: var(--line);
}

.feature-grid,
.mb-system-grid {
  gap: 56px;
  min-height: auto;
  padding-block: 54px;
}

.metric-row {
  margin-top: 27px;
  border-radius: 6px;
}

.metric-row div {
  background: #101719;
  padding: 15px;
}

.metric-row strong {
  color: var(--amber-soft);
  font-size: 18px;
}

.flight-stack {
  min-height: 255px;
}

.flight-line {
  background: #0b1214;
  border-color: #2c393c;
  border-radius: 6px;
  padding: 18px;
  box-shadow: none;
}

.flight-a,
.flight-b,
.flight-c {
  transform: none;
}

.section-heading-row {
  margin-bottom: 24px;
}

.section-heading-row h2 {
  font-size: clamp(27px, 3vw, 36px);
}

.weapon-grid {
  gap: 8px;
}

.weapon-card,
.command-card,
.duo-card,
.capability-card,
.system-map > div,
.join-panel,
.final-cta,
.connect-panel {
  background: #101719;
  border-color: var(--line);
  border-radius: 7px;
  box-shadow: none;
}

.weapon-card {
  min-height: 220px;
  padding: 20px;
}

.weapon-card:hover,
.command-card:hover {
  border-color: #46575a;
  transform: none;
}

.weapon-icon,
.duo-icon {
  border-radius: 6px;
}

.weapon-card h3 {
  margin: 38px 0 8px;
  font-size: 19px;
}

.weapon-card p {
  min-height: 42px;
  font-size: 13px;
  line-height: 1.6;
}

.weapon-spec {
  margin-top: 18px;
  padding-top: 12px;
}

.command-preview-grid {
  border-radius: 7px;
}

.command-preview {
  min-height: 122px;
  padding: 18px;
  background: #101719;
}

.command-preview p {
  font-size: 12px;
}

.final-cta,
.connect-panel,
.join-panel {
  gap: 50px;
  padding: 30px;
}

.final-cta {
  background: #12191b;
}

.final-cta h2,
.connect-copy h2,
.join-panel h2 {
  font-size: 27px;
}

.page-hero {
  grid-template-columns: 54px minmax(0, 1fr) 260px;
  gap: 25px;
  padding-top: 46px;
  padding-bottom: 38px;
}

.page-icon {
  width: 46px;
  height: 46px;
  border-radius: 7px;
}

.page-hero h1 {
  max-width: 720px;
  margin: 12px 0 13px;
  font-size: clamp(32px, 4vw, 44px);
  letter-spacing: -.04em;
  line-height: 1.08;
}

.page-hero > div:nth-child(2) > p {
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.7;
}

.command-callout {
  padding: 17px;
  border-radius: 6px;
}

.command-callout p {
  color: #93a09e;
  font-size: 11px;
  line-height: 1.55;
}

.command-rules,
.level-benefits {
  padding-block: 56px;
}

.command-grid {
  gap: 8px;
}

.command-card {
  min-height: 134px;
  padding: 17px;
}

.command-card h2 {
  margin: 14px 0 5px;
  font-size: 16px;
}

.command-card p {
  color: #aab5b3;
  font-size: 12px;
  line-height: 1.65;
}

.catalog-section {
  margin-top: 48px;
}

.catalog-search input {
  height: 42px;
  color: #f0f3f2;
  background: #101719;
  border-color: #344246;
  border-radius: 6px;
}

.shop-table-shell,
.ranking-table-shell {
  border-color: var(--line);
  border-radius: 7px;
  box-shadow: none;
}

.shop-table th {
  color: #9aa7a5;
  background: #141d1f;
  font-size: 9px;
}

.shop-table td {
  color: #c7cfcd;
  font-size: 12px;
}

.shop-table tbody tr:hover {
  background: #141e20;
}

.level-row {
  grid-template-columns: 54px 112px 1fr 136px;
  gap: 22px;
  min-height: 132px;
}

.level-index,
.level-range,
.level-capacity span {
  color: #85928f;
}

.level-weapon h2 {
  margin: 5px 0 4px;
  font-size: 20px;
}

.level-weapon p {
  font-size: 13px;
}

.level-capacity strong {
  color: #9bccc7;
  font-size: 16px;
}

.capability-grid {
  border-radius: 7px;
}

.capability-card {
  min-height: 245px;
  padding: 21px;
}

.capability-card h2 {
  margin: 40px 0 10px;
  font-size: 18px;
}

.capability-card p {
  font-size: 13px;
  line-height: 1.7;
}

.system-map {
  gap: 8px;
}

.system-map > div {
  min-height: 112px;
  padding: 18px;
}

.duo-grid {
  gap: 8px;
}

.duo-card {
  min-height: 270px;
  padding: 25px;
}

.duo-card::before {
  display: none;
}

.duo-card > span {
  margin-top: 30px;
}

.duo-card h3 {
  font-size: 23px;
}

.site-footer {
  background: #080d0f;
  border-top-color: var(--line);
}

.footer-grid {
  padding-block: 42px;
}

.footer-bottom {
  min-height: 52px;
}

@media (width <= 980px) {
  .hero-grid,
  .mb-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-block: 42px 24px;
  }

  .radar-card,
  .runtime-console {
    max-width: 680px;
  }

  .page-hero {
    grid-template-columns: 50px 1fr;
  }
}

@media (width <= 700px) {
  html {
    scroll-padding-top: 118px;
  }

  .site-container {
    width: min(100% - 28px, 1120px);
  }

  .section-gap {
    margin-block: 48px;
  }

  .header-inner {
    height: 60px;
  }

  .brand-copy {
    display: none;
  }

  .duckhunt-subnav {
    top: 60px;
  }

  .duckhunt-subnav-inner {
    gap: 4px;
    padding-block: 7px 3px;
  }

  .duckhunt-subnav nav a {
    padding: 10px 9px 9px;
    font-size: 11px;
  }

  .hero-grid,
  .mb-hero-grid {
    gap: 24px;
    padding-block: 32px 20px;
  }

  .hero-shell .hero-copy h1,
  .mb-hero .hero-copy h1 {
    margin-block: 11px 12px;
    font-size: 29px;
    line-height: 1.12;
  }

  .hero-actions {
    align-items: stretch;
  }

  .cta-primary,
  .cta-secondary,
  .cta-ranking {
    flex: 1 1 170px;
  }

  .radar-screen {
    height: 195px;
  }

  .console-body {
    padding: 20px 15px;
  }

  .mb-facts,
  .hero-shell + .fact-grid.section-gap {
    margin-top: 6px;
    margin-bottom: 42px;
  }

  .fact-grid {
    grid-template-columns: 1fr 1fr;
  }

  .fact-card {
    min-height: 72px;
    padding: 13px;
  }

  .split-section,
  .mb-intro {
    gap: 28px;
  }

  .mb-intro-copy {
    padding-top: 22px;
  }

  .feature-grid,
  .mb-system-grid {
    gap: 34px;
    padding-block: 42px;
  }

  .weapon-grid {
    grid-template-columns: 1fr;
  }

  .page-hero {
    grid-template-columns: 1fr;
    gap: 15px;
    padding-top: 34px;
    padding-bottom: 30px;
  }

  .page-hero h1 {
    font-size: 31px;
  }

  .command-rules,
  .level-benefits {
    padding-block: 44px;
  }

  .level-row {
    grid-template-columns: 40px 82px 1fr;
    gap: 12px;
    padding-block: 20px;
  }

  .final-cta,
  .connect-panel,
  .join-panel {
    gap: 28px;
    padding: 23px;
  }
}

@media (width <= 430px) {
  .fact-grid {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    flex-direction: column;
  }

  .cta-primary,
  .cta-secondary,
  .cta-ranking {
    width: 100%;
    flex-basis: auto;
  }
}