:root {
  --ink: #081016;
  --muted: #53606a;
  --paper: #f4f1e8;
  --panel: #fbfaf5;
  --line: #c8ccc7;
  --acid: #a8ff00;
  --cyan: #28d7f2;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
}
a { color: inherit; }
button, input { font: inherit; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 68px;
  padding: 10px clamp(18px, 3vw, 54px);
  display: flex;
  align-items: center;
  gap: 28px;
  color: #f8f8f2;
  background: rgba(8, 16, 22, .96);
  border-bottom: 1px solid #293037;
}
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  color: inherit;
  text-decoration: none;
  font: 700 13px/1.2 "Courier New", monospace;
  letter-spacing: .07em;
}
.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--acid);
  font: 900 15px/1 Arial, sans-serif;
}
.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 34px);
}
.site-nav a {
  color: #aeb6bc;
  text-decoration: none;
  font-size: 14px;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--acid); }
.nav-toggle {
  display: none;
  margin-left: auto;
  padding: 10px 12px;
  color: white;
  background: transparent;
  border: 1px solid #46505a;
  font: 700 12px/1 "Courier New", monospace;
}

main { overflow: hidden; }
.hero {
  min-height: 560px;
  padding: clamp(68px, 9vw, 142px) clamp(22px, 5vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .55fr);
  align-items: end;
  gap: clamp(40px, 7vw, 130px);
  color: #f7f5ed;
  background:
    linear-gradient(rgba(168,255,0,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,255,0,.08) 1px, transparent 1px),
    radial-gradient(circle at 78% 32%, rgba(168,255,0,.18), transparent 28%),
    #081016;
  background-size: 110px 110px, 110px 110px, auto, auto;
}
.hero > * { min-width: 0; }
.eyebrow {
  margin: 0 0 18px;
  color: #557000;
  font: 800 12px/1.2 "Courier New", monospace;
  letter-spacing: .11em;
}
.hero .eyebrow, .catalog .eyebrow, .product-strip .eyebrow { color: var(--acid); }
.hero h1 {
  max-width: 1000px;
  margin: 0;
  font-size: clamp(70px, 10vw, 170px);
  line-height: .82;
  letter-spacing: -.075em;
}
.hero h1 span { color: var(--acid); }
.hero-copy {
  max-width: 850px;
  margin: 38px 0 0;
  font-size: clamp(21px, 2vw, 33px);
  line-height: 1.22;
  letter-spacing: -.025em;
}
.hero-note {
  padding: 26px;
  border: 1px solid #53622c;
  background: rgba(18, 27, 20, .78);
}
.hero-note strong {
  display: block;
  color: var(--acid);
  font: 800 12px/1.2 "Courier New", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-note p { margin: 14px 0 0; color: #c3cac5; font-size: 17px; line-height: 1.45; }

.concepts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #0c151b;
  color: #f7f5ed;
}
.concepts article { min-height: 220px; padding: 38px clamp(24px, 4vw, 68px); border-right: 1px solid #354048; }
.concepts article:last-child { border-right: 0; }
.concepts span { color: var(--acid); font: 800 12px/1 "Courier New", monospace; }
.concepts h2 { margin: 24px 0 10px; font-size: clamp(27px, 2.2vw, 40px); letter-spacing: -.04em; }
.concepts p { max-width: 480px; margin: 0; color: #aeb7bd; font-size: 16px; line-height: 1.45; }

.catalog { padding: clamp(72px, 8vw, 124px) clamp(20px, 4vw, 72px); background: #081016; color: #f7f5ed; }
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  margin-bottom: 38px;
}
.section-heading h2 {
  max-width: 920px;
  margin: 0;
  font-size: clamp(42px, 5vw, 78px);
  line-height: .98;
  letter-spacing: -.055em;
}
.section-heading > p { margin: 0; color: #67737c; font-size: 15px; }
.catalog .section-heading > p { color: #98a4ab; }
.catalog .section-heading > p strong { color: var(--acid); font-size: 26px; }

.catalog-controls {
  margin-bottom: 28px;
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(260px, .8fr) 2fr;
  gap: 18px;
  border: 1px solid #313b42;
  background: #0d161c;
}
.search-box { display: grid; gap: 7px; }
.search-box span { color: var(--cyan); font: 800 11px/1 "Courier New", monospace; letter-spacing: .08em; }
.search-box input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  color: white;
  background: #081016;
  border: 1px solid #46515a;
  outline: none;
}
.search-box input:focus { border-color: var(--acid); }
.filters { display: flex; flex-wrap: wrap; align-content: end; gap: 8px; }
.filter {
  min-height: 46px;
  padding: 0 15px;
  color: #bbc3c7;
  background: transparent;
  border: 1px solid #46515a;
  cursor: pointer;
}
.filter:hover, .filter:focus-visible, .filter.is-active { color: var(--ink); background: var(--acid); border-color: var(--acid); }

.model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #354047; border-left: 1px solid #354047; }
.model-card {
  min-height: 390px;
  padding: clamp(24px, 2.5vw, 42px);
  display: flex;
  flex-direction: column;
  border-right: 1px solid #354047;
  border-bottom: 1px solid #354047;
  background: #0d151b;
  transition: transform .2s ease, background .2s ease;
}
.model-card:hover { position: relative; z-index: 1; background: #111d22; transform: translateY(-4px); }
.model-card[hidden] { display: none; }
.card-top { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.card-index { color: var(--acid); font: 800 12px/1 "Courier New", monospace; }
.access-tag {
  padding: 6px 8px;
  color: var(--cyan);
  border: 1px solid #285b65;
  font: 700 10px/1 "Courier New", monospace;
  text-transform: uppercase;
}
.model-card h3 { margin: 37px 0 3px; font-size: clamp(31px, 2.6vw, 47px); letter-spacing: -.045em; }
.provider { margin: 0 0 19px; color: var(--acid); font: 700 12px/1.2 "Courier New", monospace; text-transform: uppercase; }
.model-card > p:not(.provider) { margin: 0 0 24px; color: #aeb7bd; line-height: 1.48; }
.chips { margin-top: auto; display: flex; flex-wrap: wrap; gap: 7px; }
.chips span { padding: 6px 8px; color: #bec7cb; background: #111e25; border: 1px solid #34414a; font-size: 11px; }
.model-card > a {
  margin-top: 24px;
  color: var(--acid);
  text-decoration: none;
  font: 800 12px/1.2 "Courier New", monospace;
  text-transform: uppercase;
}
.model-card > a:hover { text-decoration: underline; }
.empty-state { padding: 50px; text-align: center; border: 1px solid #354047; color: #aeb7bd; }

.choice-section { padding: clamp(72px, 8vw, 124px) clamp(20px, 4vw, 72px); }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.choice-grid article { min-height: 205px; padding: 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); }
.choice-grid strong { color: #668b00; font: 800 12px/1 "Courier New", monospace; }
.choice-grid h3 { margin: 28px 0 9px; font-size: 27px; letter-spacing: -.035em; }
.choice-grid p { margin: 0; color: var(--muted); line-height: 1.45; }

.product-strip {
  padding: clamp(64px, 7vw, 100px) clamp(20px, 4vw, 72px);
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(36px, 8vw, 130px);
  color: white;
  background: #111d15;
}
.product-strip h2 { margin: 0; font-size: clamp(39px, 4.5vw, 69px); line-height: 1; letter-spacing: -.05em; }
.product-links { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid #4c5c4e; border-left: 1px solid #4c5c4e; }
.product-links a { padding: 22px; color: #f6f5ed; border-right: 1px solid #4c5c4e; border-bottom: 1px solid #4c5c4e; text-decoration: none; font-weight: 700; }
.product-links a:hover { color: var(--ink); background: var(--acid); }

.resources { padding: clamp(72px, 8vw, 124px) clamp(20px, 4vw, 72px); }
.resource-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.resource-grid a { min-height: 250px; padding: 29px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); text-decoration: none; }
.resource-grid a:hover { background: var(--acid); }
.resource-grid span { color: #587700; font: 800 11px/1 "Courier New", monospace; }
.resource-grid h3 { margin: 60px 0 10px; font-size: 26px; letter-spacing: -.035em; }
.resource-grid p { margin: 0; color: var(--muted); line-height: 1.4; }

.page-footer {
  padding: 32px clamp(20px, 4vw, 72px);
  display: flex;
  align-items: center;
  gap: 18px;
  color: #f4f4ee;
  background: #081016;
  border-top: 1px solid #303940;
}
.page-footer img { width: 58px; height: 58px; object-fit: cover; border-radius: 50%; border: 2px solid var(--acid); }
.page-footer strong { display: block; }
.page-footer p { margin: 5px 0 0; color: #9ba6ad; font-size: 14px; }
.site-visit-counter {
  margin-left: auto;
  color: #9ba6ad;
  font: 700 10px/1.2 "Courier New", monospace;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-visit-counter strong { display: inline; color: var(--acid); }
.page-footer > a { margin-left: 0; color: var(--acid); font: 800 12px/1 "Courier New", monospace; text-decoration: none; }

@media (max-width: 1080px) {
  .model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resource-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-note { max-width: 660px; }
}

@media (max-width: 780px) {
  .site-header { flex-wrap: wrap; }
  .nav-toggle { display: block; }
  .site-nav { width: 100%; margin: 0; display: none; flex-direction: column; align-items: stretch; padding: 10px 0; }
  .site-nav.is-open { display: flex; }
  .hero { padding-top: 75px; }
  .hero h1 { font-size: clamp(65px, 22vw, 105px); }
  .concepts, .choice-grid, .product-strip { grid-template-columns: 1fr; }
  .concepts article { border-right: 0; border-bottom: 1px solid #354048; }
  .section-heading { align-items: start; flex-direction: column; }
  .catalog-controls { grid-template-columns: 1fr; }
  .page-footer { align-items: flex-start; flex-wrap: wrap; }
  .site-visit-counter { width: 100%; margin: 8px 0 0; }
  .page-footer > a { width: 100%; margin: 8px 0 0; }
}

@media (max-width: 560px) {
  .site-header { gap: 12px; padding-inline: 14px; }
  .brand { gap: 9px; font-size: 10px; }
  .brand-mark { width: 40px; height: 40px; flex: 0 0 40px; }
  .nav-toggle { flex: 0 0 auto; }
  .hero { padding-inline: 24px; }
  .hero h1 { max-width: 100%; font-size: clamp(62px, 17vw, 76px); letter-spacing: -.065em; }
  .hero-copy { font-size: 20px; overflow-wrap: anywhere; }
  .hero-note { width: 100%; padding: 22px; }
  .model-grid, .resource-grid, .product-links { grid-template-columns: 1fr; }
  .model-card { min-height: 350px; }
  .filters { display: grid; grid-template-columns: repeat(2, 1fr); }
  .filter { padding: 8px; font-size: 13px; }
}