/*! 4P3X AI™ · Clean Kyzel Kreates™ Code · Public Showcase · © 2026 Kyzel Kreates™ */
:root {
  --bg: #050607;
  --bg2: #0a0d10;
  --panel: #0d1116;
  --panel2: #121821;
  --text: #f5f7fa;
  --muted: #aeb8c5;
  --line: #24303d;
  --gold: #d6b14b;
  --silver: #d8dde4;
  --green: #93e22e;
  --purple: #a85cff;
  --danger: #ff716b;
  --max: 1180px;
  --radius: 24px;
  --shadow: 0 28px 80px rgba(0,0,0,.45);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: radial-gradient(circle at 15% 0%,rgba(147,226,46,.08),transparent 26%),radial-gradient(circle at 85% 10%,rgba(168,92,255,.10),transparent 28%),var(--bg);
  color: var(--text);
  font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height: 1.6;
}

a {
  color: inherit;
}

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

.wrap {
  width: min(var(--max),calc(100% - 32px));
  margin: auto;
}

.skip {
  position: absolute;
  left: -999px;
  top: 12px;
  z-index: 99;
  background: #fff;
  color: #000;
  padding: 10px 14px;
  border-radius: 10px;
}

.skip:focus {
  left: 12px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5,6,7,.82);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.nav {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 850;
  letter-spacing: .02em;
}

.brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.brand small {
  display: block;
  font-size: .67rem;
  color: var(--muted);
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.navlinks {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.navlinks a {
  text-decoration: none;
  color: #d8dee7;
  font-size: .93rem;
}

.navlinks a:hover,.navlinks a[aria-current="page"] {
  color: #fff;
}

.nav-cta {
  border: 1px solid rgba(214,177,75,.55);
  padding: 9px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg,rgba(214,177,75,.13),rgba(168,92,255,.08));
}

.menu-btn {
  display: none;
  margin-left: auto;
  background: transparent;
  color: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 11px;
}

.hero {
  padding: 84px 0 54px;
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: 46px;
  align-items: center;
}

.eyebrow {
  color: var(--green);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 850;
}

.hero h1,.page-hero h1 {
  font-size: clamp(2.8rem,7vw,6.25rem);
  line-height: .95;
  margin: 14px 0 22px;
  letter-spacing: -.055em;
}

.hero h1 span,.page-hero h1 span {
  background: linear-gradient(90deg,var(--silver),var(--gold) 40%,var(--purple) 76%,var(--green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  font-size: clamp(1.08rem,2vw,1.35rem);
  color: #c5ced9;
  max-width: 760px;
}

.hero-actions,.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 999px;
  padding: 12px 18px;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid var(--line);
  background: #10151b;
  color: #fff;
  transition: .2s transform,.2s border-color,.2s background;
}

.btn:hover {
  transform: translateY(-2px);
  border-color: #607084;
}

.btn.primary {
  background: linear-gradient(135deg,#b89431,#7c5bd8 65%,#4d9e2b);
  border-color: transparent;
}

.btn.ghost {
  background: rgba(255,255,255,.02);
}

.hero-art {
  position: relative;
}

.hero-art:before {
  content: "";
  position: absolute;
  inset: 6% 8%;
  border-radius: 50%;
  background: conic-gradient(from 160deg,rgba(147,226,46,.34),rgba(168,92,255,.32),rgba(214,177,75,.28),rgba(147,226,46,.34));
  filter: blur(55px);
  opacity: .75;
}

.hero-logo {
  position: relative;
  filter: drop-shadow(0 26px 80px rgba(0,0,0,.65));
}

.hero-badge {
  position: absolute;
  right: 0;
  bottom: 5%;
  background: rgba(7,9,12,.88);
  border: 1px solid rgba(255,255,255,.12);
  padding: 12px 14px;
  border-radius: 16px;
  max-width: 260px;
  box-shadow: var(--shadow);
}

.section {
  padding: 72px 0;
}

.section.dark {
  background: #07090b;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.section h2 {
  font-size: clamp(2rem,4.7vw,3.7rem);
  line-height: 1.05;
  letter-spacing: -.04em;
  margin: 8px 0 18px;
}

.section-intro {
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 800px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 22px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 16px;
}

.card {
  background: linear-gradient(180deg,rgba(17,22,29,.94),rgba(9,12,16,.96));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 10px 40px rgba(0,0,0,.15);
}

.card h3 {
  margin: 8px 0 8px;
  font-size: 1.28rem;
}

.card p {
  color: #b9c3ce;
}

.card .tag,.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(147,226,46,.2);
  background: rgba(147,226,46,.05);
  color: #c9ff8e;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
}

.tag.purple {
  border-color: rgba(168,92,255,.26);
  background: rgba(168,92,255,.08);
  color: #d9b8ff;
}

.tag.gold {
  border-color: rgba(214,177,75,.28);
  background: rgba(214,177,75,.07);
  color: #f1d88d;
}

.metric {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -.04em;
}

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

.quote {
  font-size: clamp(1.6rem,4vw,3.1rem);
  line-height: 1.12;
  letter-spacing: -.035em;
  max-width: 990px;
  margin: 0;
}

.quote strong {
  color: var(--green);
}

.story-strip {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
  margin-top: 28px;
}

.story-step {
  border-left: 2px solid var(--line);
  padding: 4px 0 4px 16px;
}

.story-step b {
  display: block;
  color: #fff;
}

.story-step span {
  font-size: .9rem;
  color: var(--muted);
}

.media-frame {
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  background: #050506;
  box-shadow: var(--shadow);
}

.media-frame img {
  width: 100%;
  height: auto;
}

.caption {
  font-size: .82rem;
  color: #8e9aa8;
  margin-top: 9px;
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 28px;
}

.product {
  overflow: hidden;
  padding: 0;
}

.product .visual {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #080a0d;
}

.product .visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product .body {
  padding: 24px;
}

.product .body h3 {
  font-size: 1.7rem;
  margin: 7px 0;
}

.product .body p {
  color: #b7c1cd;
}

.product-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

.product-links a {
  font-size: .86rem;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #596675;
  padding-bottom: 2px;
}

.pipeline {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 8px;
  margin-top: 30px;
}

.pipe {
  padding: 14px 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0d1116;
  text-align: center;
  font-size: .82rem;
  font-weight: 800;
  position: relative;
}

.pipe:not(:last-child):after {
  content: "→";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  color: #6f7a88;
  z-index: 2;
}

.pipe small {
  display: block;
  color: var(--muted);
  font-weight: 600;
  margin-top: 5px;
}

.proof-list {
  display: grid;
  gap: 10px;
}

.proof-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.proof-row strong {
  color: #fff;
}

.proof-row span {
  color: #b9c3ce;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
}

.status:before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
}

.status.dev:before {
  background: var(--gold);
}


.page-hero {
  padding: 58px 0 34px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.page-hero h1 {
  font-size: clamp(2.4rem,6vw,5.2rem);
  max-width: 950px;
}

.breadcrumbs {
  color: #8d99a6;
  font-size: .82rem;
}

.breadcrumbs a {
  color: #b7c2cf;
}

.mini-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.mini-nav a {
  font-size: .84rem;
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: #cbd4df;
}

.notice {
  border: 1px solid rgba(214,177,75,.32);
  background: rgba(214,177,75,.06);
  padding: 18px 20px;
  border-radius: 18px;
  color: #e3dcc5;
}

.notice strong {
  color: #fff;
}

.safety-box {
  border: 1px solid rgba(147,226,46,.28);
  background: linear-gradient(135deg,rgba(147,226,46,.06),rgba(168,92,255,.06));
  padding: 24px;
  border-radius: 22px;
}

.safety-box h3 {
  margin-top: 0;
}

.bullets {
  padding-left: 20px;
  color: #bec8d3;
}

.bullets li {
  margin: .5rem 0;
}

.callout {
  padding: 28px;
  border-radius: 24px;
  background: linear-gradient(135deg,rgba(214,177,75,.09),rgba(168,92,255,.08),rgba(147,226,46,.06));
  border: 1px solid rgba(255,255,255,.1);
}

footer {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 34px 0 48px;
  color: #8995a2;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
}

.footer-grid a {
  color: #bdc7d1;
}

.footer-brand {
  color: #fff;
  font-weight: 850;
}

.tiny {
  font-size: .78rem;
  color: #778391;
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.9);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lightbox.open {
  display: flex;
}

.lightbox img {
  max-width: 96vw;
  max-height: 90vh;
  border-radius: 18px;
}

.lightbox button {
  position: absolute;
  top: 18px;
  right: 18px;
  background: #111821;
  color: #fff;
  border: 1px solid #354252;
  border-radius: 12px;
  padding: 9px 12px;
}

.zoomable {
  cursor: zoom-in;
}

.rws-demo {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
}

.rws-steps {
  display: grid;
  gap: 8px;
  align-content: start;
}

.rws-steps button {
  background: #0e141b;
  border: 1px solid var(--line);
  color: #cbd4df;
  padding: 12px;
  border-radius: 14px;
  text-align: left;
  font-weight: 800;
}

.rws-steps button.active {
  border-color: var(--green);
  color: #fff;
  background: rgba(147,226,46,.08);
}

.rws-panel {
  min-height: 330px;
}

.demo-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.demo-controls button,.demo-controls input,.demo-controls textarea {
  font: inherit;
}

.demo-controls button {
  background: #121922;
  color: #fff;
  border: 1px solid #344252;
  border-radius: 12px;
  padding: 10px 13px;
}

.demo-input {
  width: 100%;
  border: 1px solid #344252;
  background: #0b1016;
  color: #fff;
  border-radius: 14px;
  padding: 12px;
  margin-top: 12px;
}

.confidence {
  width: 100%;
}

@media (max-width:920px) {
  .hero-grid,.grid-2,.product-grid {
    grid-template-columns: 1fr;
  }

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

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

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

  .pipe:not(:last-child):after {
    display: none;
  }

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

  .navlinks {
    display: none;
    position: absolute;
    top: 72px;
    left: 16px;
    right: 16px;
    flex-direction: column;
    align-items: stretch;
    background: #0a0d10;
    border: 1px solid var(--line);
    padding: 14px;
    border-radius: 18px;
    box-shadow: var(--shadow);
  }

  .navlinks.open {
    display: flex;
  }

  .menu-btn {
    display: block;
  }

  .rws-demo {
    grid-template-columns: 1fr;
  }

  .rws-steps {
    grid-template-columns: repeat(4,1fr);
  }

  .hero {
    padding-top: 48px;
  }

}

@media (max-width:620px) {
  .wrap {
    width: min(100% - 22px,var(--max));
  }

  .hero h1 {
    font-size: 3.2rem;
  }

  .grid-3,.grid-4 {
    grid-template-columns: 1fr;
  }

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

  .rws-steps {
    grid-template-columns: 1fr 1fr;
  }

  .proof-row {
    grid-template-columns: 1fr;
  }

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

  .hero-badge {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 12px;
  }

  .section {
    padding: 52px 0;
  }

  .card {
    padding: 19px;
  }

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

  .page-hero h1 {
    font-size: 3rem;
  }

}

.loop-heading {
  font-size: 2rem;
}

.spaced-grid {
  margin-top: 24px;
}

.hero-tagline {
  display: block;
  margin-top: 8px;
}

.spaced-actions {
  margin-top: 26px;
}

.mission-quote {
  font-size: clamp(1.5rem,3.5vw,2.5rem);
}

.demo-gap {
  margin-top: 18px;
}

.spaced-intro {
  margin-top: 22px;
}

.find-visual {
  display: grid;
  place-items: center;
  padding: 34px;
  background: radial-gradient(circle at 35% 30%,rgba(147,226,46,.15),transparent 30%),radial-gradient(circle at 70% 60%,rgba(168,92,255,.16),transparent 30%),#080b0e;
}

.find-wordmark {
  font-size: clamp(2.4rem,7vw,5.7rem);
  font-weight: 950;
  letter-spacing: -.07em;
}

.accent-green {
  color: var(--green);
}

.accent-purple {
  color: var(--purple);
}

.card-link {
  text-decoration: none;
}

.demo-reading {
  font-size: 1.45rem;
}

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

.footer-brand {
  display: flex;
  align-items: center;
  gap: 9px;
}

.footer-brand img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid rgba(214,177,75,.28);
}

.press-lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 8px;
  padding: 10px 14px 10px 10px;
  border: 1px solid rgba(214,177,75,.24);
  border-radius: 18px;
  background: linear-gradient(135deg,rgba(214,177,75,.08),rgba(168,92,255,.07));
}

.press-lockup img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.press-lockup strong {
  display: block;
  font-size: 1.18rem;
}

.press-lockup span {
  display: block;
  color: var(--muted);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lightbox[aria-hidden="true"] {
  display: none;
}

.lightbox[aria-hidden="false"] {
  display: flex;
}

body.lightbox-open {
  overflow: hidden;
}

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

  .btn {
    transition: none;
  }

  .btn:hover {
    transform: none;
  }

}

@media (max-width:620px) {
  .press-lockup {
    width: 100%;
  }

  .press-lockup img {
    width: 62px;
    height: 62px;
  }

}

.reasoning-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items: center;
}

.reasoning-mark {
  border: 1px solid rgba(214,177,75,.25);
  border-radius: 28px;
  padding: 22px;
  background: radial-gradient(circle at 50% 28%,rgba(214,177,75,.14),transparent 34%),linear-gradient(145deg,rgba(147,226,46,.05),rgba(168,92,255,.08)),#090c10;
  box-shadow: var(--shadow);
}

.reasoning-mark img {
  width: min(100%,420px);
  margin: 0 auto;
  border-radius: 22px;
}

.reasoning-mark-copy {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.reasoning-mark-copy strong {
  font-size: 1.6rem;
}

.reasoning-mark-copy>span:last-child {
  color: var(--muted);
}

.laws-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 28px;
}

.law-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.01)),var(--panel);
}

.law-card h3 {
  margin: 7px 0;
  font-size: 1.5rem;
}

.law-card p {
  margin: 0;
  color: #b9c4cf;
}

.law-number {
  font-size: 2rem;
  font-weight: 950;
  color: #4c5967;
  letter-spacing: -.05em;
}

.law-1 {
  border-color: rgba(147,226,46,.28);
}

.law-2 {
  border-color: rgba(214,177,75,.25);
}

.law-4 {
  border-color: rgba(216,221,228,.18);
}

.law-3 {
  border-color: rgba(168,92,255,.35);
  background: linear-gradient(145deg,rgba(168,92,255,.08),rgba(147,226,46,.035)),var(--panel);
}

.law-maxim {
  display: block;
  margin-top: 14px;
  color: #fff;
  font-size: 1.12rem;
}

.reasoning-lab {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
  margin-top: 30px;
}

.scenario-list {
  display: grid;
  gap: 9px;
  align-content: start;
  position: sticky;
  top: 108px;
  height: max-content;
}

.scenario-btn {
  appearance: none;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0b1015;
  color: #d8e0e8;
  padding: 15px 16px;
  cursor: pointer;
}

.scenario-btn span {
  display: block;
  color: var(--muted);
  font-size: .73rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
}

.scenario-btn b {
  display: block;
  margin-top: 3px;
  font-size: 1rem;
}

.scenario-btn:hover {
  border-color: #556575;
}

.scenario-btn.active {
  border-color: var(--green);
  background: linear-gradient(135deg,rgba(147,226,46,.10),rgba(168,92,255,.05));
  box-shadow: 0 0 0 1px rgba(147,226,46,.08) inset;
}

.reasoning-console {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  background: #070a0e;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.console-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  background: #0b1016;
}

.console-top>div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.console-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 18px var(--green);
}

.human-request {
  padding: 22px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg,rgba(214,177,75,.06),transparent);
}

.human-request p {
  font-size: 1.1rem;
  margin: 6px 0 0;
  color: #eef2f5;
}

.trace-label {
  font-size: .71rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 900;
}

.trace-flow {
  padding: 0 22px;
}

.trace-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  opacity: .84;
  transform: translateY(0);
  transition: .25s opacity,.25s transform,.25s border-color;
}

.trace-step h3 {
  margin: 4px 0 7px;
  font-size: 1.22rem;
}

.trace-step p {
  margin: 0;
  color: #b7c2ce;
}

.trace-index {
  font-weight: 950;
  font-size: 1.3rem;
  color: #455260;
}

.trace-step.trace-pulse {
  opacity: 1;
}

.challenge-step {
  border-left: 3px solid rgba(168,92,255,.65);
  padding-left: 16px;
}

.proposal-step {
  border-left: 3px solid rgba(147,226,46,.65);
  padding-left: 16px;
}

.challenge-questions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.challenge-questions span {
  font-size: .82rem;
  border: 1px solid rgba(168,92,255,.26);
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(168,92,255,.06);
  color: #d5c8e9;
}

.law-checks {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.law-check {
  display: grid;
  grid-template-columns: 64px 80px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 13px;
  background: #0b1117;
  border: 1px solid #202b36;
}

.law-check p {
  margin: 0;
  font-size: .9rem;
}

.law-state {
  display: inline-flex;
  justify-content: center;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .08em;
  background: #18202a;
  color: #d7dee6;
}

.law-state.pass {
  color: var(--green);
}

.law-state.trigger,.law-state.block {
  color: #ff827d;
}

.law-state.limit,.law-state.check,.law-state.priority {
  color: var(--gold);
}

.human-gate {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 24px;
  background: linear-gradient(135deg,rgba(214,177,75,.10),rgba(168,92,255,.08));
  border-top: 1px solid rgba(214,177,75,.24);
}

.human-gate h3 {
  margin: 4px 0;
}

.human-gate p {
  margin: 0;
  color: #c1cad4;
}

.gate-actions {
  display: grid;
  gap: 8px;
  min-width: 220px;
}

.gate-btn {
  border: 1px solid #405063;
  border-radius: 12px;
  padding: 10px 12px;
  background: #111821;
  color: #fff;
  font-weight: 850;
  cursor: pointer;
}

.gate-btn:hover:not(:disabled) {
  border-color: #7b8ea4;
}

.gate-btn.approve {
  border-color: rgba(147,226,46,.42);
}

.gate-btn.revise {
  border-color: rgba(214,177,75,.38);
}

.gate-btn.reject {
  border-color: rgba(255,113,107,.38);
}

.gate-btn:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.receipt {
  padding: 22px 24px;
  border-top: 1px solid rgba(147,226,46,.22);
  background: rgba(147,226,46,.045);
}

.receipt h3 {
  margin: 5px 0;
}

.receipt p {
  color: #c1cbd6;
}

.receipt-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,.07);
}

.receipt-row span {
  color: var(--muted);
}

.receipt-row b {
  color: var(--green);
  text-align: right;
}

.challenge-principles {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.challenge-principles>div {
  padding: 14px 16px;
  border-left: 2px solid var(--purple);
  background: #0b1016;
  border-radius: 0 14px 14px 0;
}

.challenge-principles b {
  display: block;
}

.challenge-principles span {
  display: block;
  color: var(--muted);
  font-size: .9rem;
  margin-top: 2px;
}

.control-stack {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #0a0e13;
}

.stack-line {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 11px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.stack-line span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #3a4653;
  color: #aab6c2;
  font-weight: 900;
}

.stack-line.human b {
  color: var(--gold);
}

.stack-line.human span {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 18px rgba(214,177,75,.14);
}

.stack-maxim {
  margin: 18px 0 0;
  color: #e4e9ee;
  font-weight: 800;
}

@media (max-width:1100px) {
  .navlinks {
    display: none;
    position: absolute;
    top: 72px;
    left: 16px;
    right: 16px;
    flex-direction: column;
    align-items: stretch;
    background: #0a0d10;
    border: 1px solid var(--line);
    padding: 14px;
    border-radius: 18px;
    box-shadow: var(--shadow);
  }

  .navlinks.open {
    display: flex;
  }

  .menu-btn {
    display: block;
  }

  .reasoning-hero-grid {
    grid-template-columns: 1fr;
  }

  .reasoning-mark {
    max-width: 620px;
  }

}

@media (max-width:820px) {
  .laws-grid {
    grid-template-columns: 1fr;
  }

  .reasoning-lab {
    grid-template-columns: 1fr;
  }

  .scenario-list {
    position: static;
    grid-template-columns: 1fr 1fr;
  }

  .human-gate {
    grid-template-columns: 1fr;
  }

  .gate-actions {
    grid-template-columns: 1fr 1fr 1fr;
    min-width: 0;
  }

  .law-check {
    grid-template-columns: 56px 72px 1fr;
  }

}

@media (max-width:620px) {
  .law-card {
    grid-template-columns: 52px 1fr;
    padding: 18px;
  }

  .law-number {
    font-size: 1.5rem;
  }

  .scenario-list {
    grid-template-columns: 1fr;
  }

  .console-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .trace-flow {
    padding: 0 14px;
  }

  .trace-step {
    grid-template-columns: 42px 1fr;
    padding: 20px 0;
  }

  .challenge-step,.proposal-step {
    padding-left: 11px;
  }

  .law-check {
    grid-template-columns: 1fr auto;
  }

  .law-check p {
    grid-column: 1/-1;
  }

  .human-gate {
    padding: 18px;
  }

  .gate-actions {
    grid-template-columns: 1fr;
  }

  .receipt-row {
    display: grid;
    gap: 2px;
  }

  .receipt-row b {
    text-align: left;
  }

  .reasoning-mark {
    padding: 15px;
  }

  .reasoning-mark-copy strong {
    font-size: 1.35rem;
  }

}

.pipeline-five {
  grid-template-columns: repeat(5,1fr);
}

.public-control-diagram {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  background: radial-gradient(circle at 50% 20%,rgba(214,177,75,.1),transparent 48%),#090c10;
  min-height: 420px;
}

.control-node {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #0d1116;
}

.control-node span {
  grid-row: 1/3;
  font-size: .78rem;
  color: var(--gold);
  font-weight: 900;
  letter-spacing: .12em;
}

.control-node b {
  font-size: 1.05rem;
}

.control-node small {
  color: var(--muted);
  margin-top: 3px;
}

.control-node.accent {
  border-color: rgba(168,92,255,.45);
  box-shadow: 0 0 32px rgba(168,92,255,.08);
}

.control-arrow {
  text-align: center;
  color: var(--green);
  font-size: 1.25rem;
  font-weight: 900;
}

.architecture-lockup,.governance-mark {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(135deg,rgba(214,177,75,.07),rgba(168,92,255,.06));
}

.architecture-lockup img,.governance-mark img {
  width: min(180px,36vw);
  height: auto;
  flex: 0 0 auto;
}

.governance-mark {
  flex-direction: column;
  text-align: center;
  justify-content: center;
  min-height: 300px;
}

.governance-mark span {
  max-width: 420px;
  color: #cbd5df;
  font-weight: 700;
  line-height: 1.55;
}

@media (max-width:920px) {
  .pipeline-five {
    grid-template-columns: 1fr 1fr;
  }

  .architecture-lockup {
    align-items: flex-start;
  }

}

@media (max-width:620px) {
  .pipeline-five {
    grid-template-columns: 1fr;
  }

  .architecture-lockup {
    flex-direction: column;
  }

  .architecture-lockup img {
    width: 128px;
  }

}

.four-law-boundary {
  margin-top: 26px;
}

.four-law-boundary a {
  color: #fff;
  font-weight: 800;
}

@media (max-width:980px) {
}

/* 4P3X AI™ brand palette */
:root {
  --bg: #020304;
  --bg2: #07090c;
  --panel: #0a0d12;
  --panel2: #0f141c;
  --text: #f4f7fb;
  --muted: #a8b4c2;
  --line: #253140;
  --gold: #d1a63a;
  --gold-bright: #f2cf72;
  --silver: #d9dee6;
  --silver-bright: #f7fbff;
  --green: #8fff2a;
  --purple: #b05cff;
}

body {
  background: radial-gradient(circle at 12% 4%,rgba(143,255,42,.12),transparent 22%),
    radial-gradient(circle at 86% 8%,rgba(176,92,255,.14),transparent 24%),
    radial-gradient(circle at 50% 0%,rgba(209,166,58,.06),transparent 30%),
    linear-gradient(180deg,#020304 0%,#04070a 44%,#020304 100%);
}

.site-header {
  background: linear-gradient(180deg,rgba(2,3,4,.92),rgba(5,7,10,.86));
  border-bottom: 1px solid rgba(209,166,58,.18);
  box-shadow: 0 8px 30px rgba(0,0,0,.28);
}

.brand {
  color: var(--silver-bright);
  text-shadow: 0 0 14px rgba(255,255,255,.04);
}

.brand small {
  color: #cfd6df;
}

.navlinks a {
  color: #dfe6ee;
}

.navlinks a:hover,.navlinks a[aria-current="page"] {
  color: var(--silver-bright);
  text-shadow: 0 0 16px rgba(176,92,255,.14);
}

.nav-cta {
  border: 1px solid rgba(209,166,58,.7);
  background: linear-gradient(135deg,rgba(247,251,255,.04),rgba(209,166,58,.14),rgba(176,92,255,.08));
  box-shadow: inset 0 0 0 1px rgba(247,251,255,.05),0 0 0 1px rgba(209,166,58,.08),0 10px 24px rgba(0,0,0,.18);
}

.eyebrow,.trace-label {
  color: var(--green);
  text-shadow: 0 0 18px rgba(143,255,42,.18);
}

.hero h1,.page-hero h1,.section h2,.quote {
  color: var(--silver-bright);
}

.hero h1 span,.page-hero h1 span {
  background: linear-gradient(90deg,var(--silver-bright) 0%,var(--silver) 18%,var(--gold-bright) 44%,var(--purple) 73%,var(--green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.22));
}

.lead,.section-intro,.card p,.product .body p,.muted,.proof-row span,.bullets,.caption,.tiny {
  color: #bac5d0;
}

.btn {
  background: linear-gradient(180deg,#111722,#0b1016);
  border: 1px solid rgba(217,222,230,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03),0 10px 28px rgba(0,0,0,.2);
}

.btn:hover {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05),0 16px 36px rgba(0,0,0,.28),0 0 18px rgba(176,92,255,.10);
}

.btn.primary {
  color: #fff;
  background: linear-gradient(135deg,#eef4fb 0%,#d4dae3 12%,#f0cb67 34%,#bb8e2f 52%,#8e59df 76%,#66c92d 100%);
  border-color: rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.24),0 0 22px rgba(209,166,58,.16);
}

.btn.ghost {
  background: linear-gradient(180deg,rgba(217,222,230,.05),rgba(255,255,255,.02));
  border-color: rgba(217,222,230,.16);
}

.card,.media-frame,.reasoning-console,.reasoning-mark,.public-control-diagram,.control-node,.law-card,.product,.governance-mark,.architecture-lockup {
  background: radial-gradient(circle at 100% 0%,rgba(176,92,255,.06),transparent 24%),
    radial-gradient(circle at 0% 100%,rgba(143,255,42,.05),transparent 24%),
    linear-gradient(180deg,rgba(13,17,22,.96),rgba(8,11,15,.98));
  border: 1px solid rgba(217,222,230,.10);
  box-shadow: 0 16px 44px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03);
}

.card:hover,.product:hover {
  border-color: rgba(209,166,58,.22);
}

.tag.gold {
  border-color: rgba(209,166,58,.38);
  background: rgba(209,166,58,.10);
  color: #f3d989;
}

.tag.purple {
  border-color: rgba(176,92,255,.32);
  background: rgba(176,92,255,.11);
  color: #e0c6ff;
}

.card .tag,.tag {
  border-color: rgba(143,255,42,.28);
  background: rgba(143,255,42,.08);
  color: #d4ff9a;
}

.notice {
  border: 1px solid rgba(209,166,58,.42);
  background: linear-gradient(135deg,rgba(209,166,58,.10),rgba(217,222,230,.04),rgba(176,92,255,.05));
}

.callout,.safety-box,.human-gate {
  background: linear-gradient(135deg,rgba(209,166,58,.11),rgba(217,222,230,.04),rgba(176,92,255,.09),rgba(143,255,42,.06));
  border-color: rgba(217,222,230,.11);
}

.hero-art:before {
  background: conic-gradient(from 160deg,rgba(143,255,42,.38),rgba(176,92,255,.34),rgba(247,207,114,.32),rgba(217,222,230,.22),rgba(143,255,42,.38));
  filter: blur(62px);
}

.hero-badge {
  background: linear-gradient(180deg,rgba(6,9,12,.96),rgba(8,11,15,.94));
  border: 1px solid rgba(209,166,58,.22);
}

footer {
  border-top: 1px solid rgba(209,166,58,.14);
}

.footer-brand,.product-links a,.four-law-boundary a {
  color: var(--silver-bright);
}

.control-arrow {
  color: var(--green);
  text-shadow: 0 0 16px rgba(143,255,42,.18);
}

.law-number {
  color: #738093;
}

.scenario-btn.active,.rws-steps button.active {
  border-color: rgba(143,255,42,.72);
  background: linear-gradient(135deg,rgba(143,255,42,.13),rgba(176,92,255,.08));
}

.mini-nav a:hover,.mini-nav a[aria-current="page"] {
  border-color: rgba(209,166,58,.45);
  background: rgba(209,166,58,.07);
}

.proof-row {
  border-bottom-color: rgba(255,255,255,.08);
}

.pipe {
  background: linear-gradient(180deg,#0e141b,#0a0f15);
  border-color: rgba(217,222,230,.12);
}

.metric {
  background: linear-gradient(90deg,var(--silver-bright),var(--gold-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Premium metallic and neon finish */
body {
  background-color: #020304;
  background-image: radial-gradient(circle at 12% 2%,rgba(143,255,42,.10),transparent 22%),
    radial-gradient(circle at 88% 4%,rgba(176,92,255,.12),transparent 24%),
    linear-gradient(115deg,rgba(247,251,255,.018) 1px,transparent 1px),
    linear-gradient(25deg,rgba(209,166,58,.018) 1px,transparent 1px),
    linear-gradient(180deg,#020304 0%,#04070a 46%,#020304 100%);
  background-size: auto,auto,64px 64px,64px 64px,auto;
}

.site-header {
  position: sticky;
}

.site-header:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,transparent 0%,rgba(143,255,42,.72) 18%,rgba(217,222,230,.55) 38%,rgba(209,166,58,.82) 54%,rgba(176,92,255,.72) 78%,transparent 100%);
  opacity: .72;
  pointer-events: none;
}

.brand img {
  border-radius: 12px;
  border: 1px solid rgba(217,222,230,.16);
  box-shadow: 0 0 0 1px rgba(209,166,58,.08),0 0 20px rgba(143,255,42,.08),0 0 28px rgba(176,92,255,.07);
}

.brand>span {
  background: linear-gradient(90deg,var(--silver-bright),var(--gold-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand small {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #aeb8c5;
}

.section {
  position: relative;
}

.section.dark:before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  width: min(1180px,calc(100% - 32px));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,transparent,rgba(217,222,230,.12),rgba(209,166,58,.28),rgba(176,92,255,.18),rgba(143,255,42,.16),transparent);
}

.section h2,.scene-copy h3,.card h3,.product .body h3 {
  text-wrap: balance;
}

.section h2 {
  background: linear-gradient(90deg,var(--silver-bright) 0%,var(--silver) 48%,#c5a85d 72%,#f0d47f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card,.product,.reasoning-console,.media-frame {
  position: relative;
}

.card:before,.product:before,.reasoning-console:before,.media-frame:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(135deg,rgba(217,222,230,.16),rgba(209,166,58,.11) 34%,rgba(176,92,255,.12) 68%,rgba(143,255,42,.10));
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .72;
}

.btn.primary {
  background: linear-gradient(#0a0d12,#0a0d12) padding-box,
    linear-gradient(112deg,var(--silver-bright),var(--gold-bright) 35%,#bd8d31 52%,var(--purple) 78%,var(--green)) border-box;
  border: 1px solid transparent;
  color: #fff;
  box-shadow: inset 0 0 22px rgba(209,166,58,.08),0 14px 36px rgba(0,0,0,.32),0 0 22px rgba(176,92,255,.08);
}

.btn.primary:hover {
  box-shadow: inset 0 0 26px rgba(209,166,58,.12),0 18px 42px rgba(0,0,0,.38),0 0 26px rgba(143,255,42,.10),0 0 30px rgba(176,92,255,.10);
}

.btn.ghost:hover {
  border-color: rgba(217,222,230,.34);
}

.notice strong,.callout strong,.safety-box strong {
  color: var(--gold-bright);
}

/* Route-specific premium atmosphere */
.worlds-hub .world-hero,
.phoenix-world .world-page-hero,
.subterra-world .world-page-hero,
.engineering-world .world-page-hero,
.evolution-world .world-page-hero {
  position: relative;
  overflow: hidden;
}

.worlds-hub .world-hero:before,
.phoenix-world .world-page-hero:before,
.subterra-world .world-page-hero:before,
.engineering-world .world-page-hero:before,
.evolution-world .world-page-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg,rgba(217,222,230,.025),transparent 28%,rgba(209,166,58,.035) 52%,transparent 72%,rgba(176,92,255,.035));
}

.worlds-hub .world-hero {
  background: radial-gradient(circle at 84% 30%,rgba(176,92,255,.13),transparent 30%),radial-gradient(circle at 12% 8%,rgba(143,255,42,.10),transparent 26%);
}

.phoenix-world .world-page-hero {
  background: radial-gradient(circle at 84% 24%,rgba(209,166,58,.12),transparent 28%),radial-gradient(circle at 12% 0%,rgba(143,255,42,.08),transparent 24%);
}

.subterra-world .world-page-hero {
  background: radial-gradient(circle at 80% 18%,rgba(176,92,255,.16),transparent 28%),radial-gradient(circle at 16% 0%,rgba(217,222,230,.06),transparent 24%);
}

.engineering-world .world-page-hero {
  background: radial-gradient(circle at 82% 20%,rgba(209,166,58,.13),transparent 28%),radial-gradient(circle at 14% 4%,rgba(217,222,230,.07),transparent 24%);
}

.evolution-world .world-page-hero {
  background: radial-gradient(circle at 82% 20%,rgba(176,92,255,.13),transparent 30%),radial-gradient(circle at 14% 4%,rgba(209,166,58,.08),transparent 24%);
}

.worlds-hub .world-hero h1 span,
.phoenix-world .world-page-hero h1 span,
.engineering-world .world-page-hero h1 span {
  background: linear-gradient(90deg,var(--silver-bright),var(--silver) 22%,var(--gold-bright) 50%,#bd8d31 63%,var(--green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subterra-world .world-page-hero h1 span,
.evolution-world .world-page-hero h1 span {
  background: linear-gradient(90deg,var(--silver-bright),var(--gold-bright) 32%,var(--purple) 68%,var(--green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.world-status>div {
  background: linear-gradient(180deg,rgba(15,20,27,.88),rgba(7,10,14,.92));
  border-color: rgba(217,222,230,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.world-status>div:nth-child(1) {
  border-top-color: rgba(209,166,58,.48);
}

.world-status>div:nth-child(2) {
  border-top-color: rgba(217,222,230,.34);
}

.world-status>div:nth-child(3) {
  border-top-color: rgba(143,255,42,.38);
}

.world-route {
  transition: .24s transform,.24s border-color,.24s box-shadow;
}

.world-route:hover {
  transform: translateY(-4px);
  border-color: rgba(209,166,58,.30);
  box-shadow: 0 20px 50px rgba(0,0,0,.28),0 0 24px rgba(176,92,255,.06);
}

.world-route:nth-child(1) {
  border-top: 1px solid rgba(209,166,58,.38);
}

.world-route:nth-child(2) {
  border-top: 1px solid rgba(176,92,255,.42);
}

.world-route:nth-child(3) {
  border-top: 1px solid rgba(217,222,230,.28);
}

.world-route:nth-child(4) {
  border-top: 1px solid rgba(143,255,42,.34);
}

.route-index {
  background: linear-gradient(180deg,var(--silver),#687485 60%,var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.scene-stage {
  box-shadow: 0 24px 70px rgba(0,0,0,.26),0 0 0 1px rgba(217,222,230,.03);
}

.scene-stage>img {
  filter: saturate(1.04) contrast(1.02);
}

.scene-copy {
  background: linear-gradient(135deg,rgba(8,11,15,.96),rgba(11,14,20,.92));
}

.scene-copy h3 {
  background: linear-gradient(90deg,var(--silver-bright),var(--gold-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.scene-btn,.level-btn,.lens-btn,.scenario-world-btn,.timeline-filter {
  background: linear-gradient(180deg,#0e141b,#090e14);
  border-color: rgba(217,222,230,.12);
}

.scene-btn.active,.level-btn.active,.lens-btn.active,.scenario-world-btn.active,.timeline-filter.active {
  border-color: rgba(143,255,42,.72);
  background: linear-gradient(135deg,rgba(143,255,42,.12),rgba(176,92,255,.08));
  box-shadow: inset 0 0 16px rgba(143,255,42,.04),0 0 18px rgba(176,92,255,.05);
}

.subterra-stack {
  background: linear-gradient(180deg,#070a0e,#05070a);
  box-shadow: 0 20px 48px rgba(0,0,0,.28),inset 0 0 28px rgba(176,92,255,.025);
}

.stack-floor {
  border-color: rgba(217,222,230,.11);
  background: linear-gradient(90deg,#111821,#090d12);
}

.stack-floor.active {
  border-color: rgba(176,92,255,.66);
  background: linear-gradient(90deg,rgba(176,92,255,.20),rgba(209,166,58,.07),rgba(143,255,42,.05));
  box-shadow: 0 0 22px rgba(176,92,255,.08);
}

.engineering-card {
  background: linear-gradient(180deg,#0c1117,#080c11);
  border-color: rgba(217,222,230,.10);
  box-shadow: 0 14px 36px rgba(0,0,0,.16);
}

.engineering-card:hover {
  transform: translateY(-3px);
  border-color: rgba(209,166,58,.26);
  box-shadow: 0 20px 48px rgba(0,0,0,.25),0 0 24px rgba(143,255,42,.04);
}

.engineering-card.attention {
  border-color: rgba(255,113,107,.55);
  box-shadow: 0 0 0 1px rgba(255,113,107,.08) inset,0 0 26px rgba(255,113,107,.06);
}

.engineering-card.degraded {
  border-color: rgba(209,166,58,.62);
  box-shadow: 0 0 24px rgba(209,166,58,.06);
}

.truth-banner b {
  background: linear-gradient(180deg,#0d1218,#080c11);
  border-color: rgba(217,222,230,.11);
}

.truth-banner b:nth-child(1) {
  color: var(--silver-bright);
  border-top-color: rgba(217,222,230,.38);
}

.truth-banner b:nth-child(2) {
  color: var(--gold-bright);
  border-top-color: rgba(209,166,58,.44);
}

.truth-banner b:nth-child(3) {
  color: #dfc7ff;
  border-top-color: rgba(176,92,255,.42);
}

.truth-banner b:nth-child(4) {
  color: #d8ffa7;
  border-top-color: rgba(143,255,42,.40);
}

.world-timeline:before {
  width: 2px;
  background: linear-gradient(var(--silver),var(--gold),var(--purple),var(--green));
  box-shadow: 0 0 18px rgba(176,92,255,.08);
}

.milestone>div {
  background: linear-gradient(180deg,#0d1218,#080c11);
  border-color: rgba(217,222,230,.10);
}

.milestone.current>div {
  border-color: rgba(209,166,58,.52);
  background: linear-gradient(135deg,rgba(209,166,58,.09),rgba(176,92,255,.06),rgba(143,255,42,.035)),#0a0f15;
  box-shadow: 0 18px 46px rgba(0,0,0,.22);
}

/* Product/demo identity: branded, not rainbowed */
.reasoning-page .reasoning-mark,.rws-page .card,.findwithme-page .card {
  border-top-color: rgba(209,166,58,.34);
}

.reasoning-page .page-hero,.rws-page .page-hero,.findwithme-page .page-hero {
  background: radial-gradient(circle at 84% 12%,rgba(176,92,255,.10),transparent 30%),radial-gradient(circle at 12% 4%,rgba(143,255,42,.07),transparent 26%);
}

.press-page .page-hero {
  background: radial-gradient(circle at 84% 14%,rgba(209,166,58,.10),transparent 30%),radial-gradient(circle at 12% 4%,rgba(217,222,230,.045),transparent 24%);
}

@media (prefers-reduced-motion:no-preference) {
  .world-orbit.one {
    animation: v7orbit1 18s linear infinite;
  }

  .world-orbit.two {
    animation: v7orbit2 24s linear infinite reverse;
  }

  @keyframes v7orbit1 {
    to {
      transform: rotate(348deg);
    }

  }

  @keyframes v7orbit2 {
    to {
      transform: rotate(383deg);
    }

  }

}

@media (max-width:700px) {
  .site-header:after {
    opacity: .5;
  }

  .world-route:hover,.engineering-card:hover {
    transform: none;
  }

}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Accessible metallic border treatment */
.btn.primary {
  color: var(--silver-bright);
  background: linear-gradient(180deg,#111722,#090d12) padding-box,
    linear-gradient(110deg,var(--silver-bright),var(--gold-bright) 36%,var(--purple) 72%,var(--green)) border-box;
  border: 1px solid transparent;
  text-shadow: 0 1px 10px rgba(0,0,0,.58);
  box-shadow: 0 10px 30px rgba(0,0,0,.28),0 0 20px rgba(209,166,58,.10);
}

.btn.primary:hover {
  background: linear-gradient(180deg,#171e28,#0b1016) padding-box,linear-gradient(110deg,var(--silver-bright),var(--gold-bright) 36%,var(--purple) 72%,var(--green)) border-box;
}

/* Narrow-screen reflow safeguards */
.hero-grid>*,.reasoning-hero-grid>*,.grid-2>*,.grid-3>*,.grid-4>*,.product-grid>*,.world-hero-grid>*,.scene-stage>*,.level-explorer>*,.engineering-toolbar>*,.footer-grid>* {
  min-width: 0;
}

h1,h2,h3,.lead,.eyebrow,.breadcrumbs,.btn,.tag,.find-wordmark,.world-status b {
  overflow-wrap: anywhere;
}

img {
  height: auto;
}

@media (max-width:620px) {
  .hero h1,.page-hero h1 {
    font-size: clamp(2rem,12vw,3rem);
  }

  .find-wordmark {
    font-size: clamp(2rem,12vw,4rem);
    letter-spacing: -.045em;
  }

}

main a,footer a {
  overflow-wrap: anywhere;
}

@media (max-width:620px) {
  .world-checks>div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .world-checks span {
    text-align: left;
  }

}

/* Reflow and keyboard-focus safeguards */
.skip {
  left: 12px;
  top: 0;
  transform: translateY(-220%);
  max-width: calc(100vw - 24px);
  overflow-wrap: anywhere;
}

.skip:focus {
  left: 12px;
  top: 12px;
  transform: none;
}

.laws-grid,.law-card,.law-card>*,.reasoning-lab,.reasoning-console,.trace-step>* {
  min-width: 0;
}

.law-card {
  width: 100%;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width:620px) {
  .laws-grid {
    width: 100%;
    min-width: 0;
  }

  .law-card {
    grid-template-columns: minmax(0,52px) minmax(0,1fr);
    width: 100%;
    padding: 16px;
    gap: 12px;
  }

  .law-card h3,.law-card p,.law-maxim {
    overflow-wrap: anywhere;
  }

}

/* Long technical labels must wrap cleanly at enlarged text sizes. */
p,.card p,.section-intro,.notice,.callout,.lead,.muted {
  overflow-wrap: anywhere;
}


/* Founder-story presentation · 4P3X AI™ · Clean Kyzel Kreates™ Code */
.story-callout {
  margin-top: 28px;
}

.origin-principles {
  margin-bottom: 28px;
}

.story-page strong {
  color: var(--silver-bright, #f7fbff);
}

.story-page .safety-box h3 {
  max-width: 34ch;
}

@media (max-width: 620px) {
  .story-page .story-strip {
    grid-template-columns: 1fr;
  }
}


/* Guardian Frontier Development Programme */
.guardian-page-hero{padding-bottom:64px;background:radial-gradient(circle at 80% 20%,rgba(168,92,255,.12),transparent 28%),radial-gradient(circle at 70% 70%,rgba(147,226,46,.08),transparent 24%)}
.guardian-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:center}
.guardian-kicker{margin-top:14px;color:var(--silver);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;font-weight:850}
.guardian-page-hero h1{margin-bottom:10px;background:linear-gradient(90deg,var(--silver),#fff 28%,var(--gold) 57%,var(--purple) 82%,var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.guardian-subheadline{font-size:clamp(1.35rem,3vw,2.25rem);font-weight:800;letter-spacing:-.03em;margin:0 0 16px;color:#eef2f6}
.guardian-status-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:24px}
.guardian-rd-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(147,226,46,.45);background:rgba(147,226,46,.08);color:#d8ffad;border-radius:999px;padding:8px 12px;font-size:.76rem;font-weight:900;letter-spacing:.08em}
.guardian-rd-badge:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 18px rgba(147,226,46,.8)}
.guardian-date{color:#aeb8c5;font-size:.9rem}.guardian-date strong{color:#fff}
.guardian-manifesto{font-size:1.02rem;font-weight:800;color:#e9d8a2;margin:18px 0 0}
.guardian-visual-shell{border:1px solid rgba(255,255,255,.1);border-radius:32px;padding:24px;background:linear-gradient(180deg,rgba(15,20,26,.96),rgba(5,7,9,.98));box-shadow:var(--shadow)}
.guardian-constellation{position:relative;min-height:430px;overflow:hidden;border-radius:24px;background:radial-gradient(circle at center,rgba(214,177,75,.07),transparent 30%),radial-gradient(circle at 30% 25%,rgba(147,226,46,.08),transparent 18%),radial-gradient(circle at 75% 72%,rgba(168,92,255,.11),transparent 20%),#070a0d}
.g-shield{position:absolute;left:50%;top:50%;width:150px;height:180px;transform:translate(-50%,-50%);clip-path:polygon(50% 0,92% 18%,84% 72%,50% 100%,16% 72%,8% 18%);background:linear-gradient(145deg,rgba(216,221,228,.88),rgba(214,177,75,.74) 44%,rgba(168,92,255,.46) 72%,rgba(147,226,46,.5));padding:2px;filter:drop-shadow(0 0 36px rgba(214,177,75,.18))}
.g-shield:before{content:"";position:absolute;inset:3px;clip-path:inherit;background:linear-gradient(180deg,#10161d,#07090c 70%)}
.g-core{position:absolute;inset:0;display:grid;place-items:center;font-size:3.2rem;font-weight:900;color:#f0d783;z-index:2;text-shadow:0 0 26px rgba(214,177,75,.4)}
.g-ring{position:absolute;left:50%;top:50%;border:1px solid rgba(216,221,228,.14);border-radius:50%;transform:translate(-50%,-50%)}
.ring-a{width:230px;height:230px}.ring-b{width:320px;height:320px;border-color:rgba(168,92,255,.15);animation:g-spin 26s linear infinite}.ring-c{width:390px;height:390px;border-color:rgba(147,226,46,.12);animation:g-spin-reverse 34s linear infinite}
.g-node{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--silver);box-shadow:0 0 18px rgba(216,221,228,.55)}
.g-node:after{content:"";position:absolute;width:70px;height:1px;background:linear-gradient(90deg,currentColor,transparent);opacity:.28;transform-origin:left center}
.g-node.n1{left:17%;top:25%;color:var(--green);background:var(--green)}.g-node.n1:after{transform:rotate(24deg)}
.g-node.n2{right:18%;top:22%;color:var(--purple);background:var(--purple)}.g-node.n2:after{transform:rotate(150deg)}
.g-node.n3{left:11%;bottom:30%;color:var(--gold);background:var(--gold)}.g-node.n3:after{transform:rotate(-16deg)}
.g-node.n4{right:13%;bottom:26%;color:var(--silver)}.g-node.n4:after{transform:rotate(196deg)}
.g-node.n5{left:39%;top:9%;color:var(--silver)}.g-node.n5:after{transform:rotate(78deg)}
.g-node.n6{right:40%;bottom:9%;color:var(--green);background:var(--green)}.g-node.n6:after{transform:rotate(258deg)}
.guardian-visual-caption{color:#8f9ba8;font-size:.78rem;margin:12px 2px 0}
.guardian-align-center{align-items:center}.guardian-question{font-size:clamp(1.45rem,3.5vw,2.5rem);line-height:1.16;font-weight:850;letter-spacing:-.035em;color:#fff;max-width:760px}
.guardian-principle-card{border:1px solid rgba(214,177,75,.32);background:linear-gradient(150deg,rgba(214,177,75,.08),rgba(168,92,255,.05),rgba(147,226,46,.04));border-radius:28px;padding:30px}.guardian-principle-card blockquote{font-size:clamp(2rem,4vw,3.4rem);line-height:1.05;margin:18px 0;color:#fff;font-weight:900;letter-spacing:-.04em}.guardian-principle-card p{color:#c0cad5}
.guardian-timeline{display:grid;gap:0;margin-top:36px;border-left:1px solid rgba(214,177,75,.25);margin-left:20px}.guardian-milestone{display:grid;grid-template-columns:58px 1fr;gap:18px;padding:0 0 30px 0;position:relative}.milestone-index{width:40px;height:40px;margin-left:-20px;border:1px solid rgba(214,177,75,.45);border-radius:50%;background:#0b0e12;color:#f0d783;display:grid;place-items:center;font-size:.72rem;font-weight:900;box-shadow:0 0 24px rgba(214,177,75,.08)}.guardian-milestone h3{margin:3px 0 4px;font-size:1.18rem}.guardian-milestone p{margin:0;color:#aeb8c5;max-width:850px}
.guardian-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px}.guardian-status-card{min-height:220px}.guardian-status-card.featured{grid-column:span 3;border-color:rgba(147,226,46,.28);background:linear-gradient(135deg,rgba(147,226,46,.07),rgba(13,17,22,.95) 50%,rgba(168,92,255,.06))}.guardian-chip{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:.69rem;font-weight:900;letter-spacing:.07em;border:1px solid var(--line);color:#dfe5ec}.guardian-chip.established{border-color:rgba(216,221,228,.32);background:rgba(216,221,228,.07);color:#f2f4f7}.guardian-chip.tested{border-color:rgba(147,226,46,.34);background:rgba(147,226,46,.08);color:#d8ffad}.guardian-chip.integrating{border-color:rgba(214,177,75,.34);background:rgba(214,177,75,.08);color:#f1d88d}.guardian-chip.research{border-color:rgba(168,92,255,.32);background:rgba(168,92,255,.08);color:#dfc4ff}.guardian-chip.next{border-color:rgba(111,138,168,.34);background:rgba(111,138,168,.08);color:#cad8e8}
.guardian-metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}.guardian-metric{padding:22px;border:1px solid rgba(255,255,255,.09);border-radius:22px;background:#0b0f13}.guardian-metric span{display:block;color:#aeb8c5;font-size:.82rem}.guardian-metric strong{display:block;font-size:clamp(2rem,5vw,3.6rem);line-height:1;margin:10px 0 6px;letter-spacing:-.05em;background:linear-gradient(90deg,var(--silver),var(--gold),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}.guardian-metric small{color:#84919f}.guardian-lesson{margin-top:22px;padding:26px;border-radius:24px;border:1px solid rgba(147,226,46,.18);background:linear-gradient(135deg,rgba(147,226,46,.05),rgba(168,92,255,.05))}.guardian-lesson p{color:#c0cad5}.guardian-maxim{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.guardian-maxim strong{padding:10px 13px;border-radius:999px;background:#0b1015;border:1px solid rgba(255,255,255,.1)}
.trust-flow{display:grid;gap:12px}.trust-box{padding:22px;border-radius:22px;border:1px solid rgba(255,255,255,.1);background:#0b0f13}.trust-box span{display:block;font-weight:900;letter-spacing:.08em}.trust-box small{color:#9aa7b5}.trust-box.claim{border-color:rgba(168,92,255,.28)}.trust-box.evidence{border-color:rgba(214,177,75,.32)}.trust-box.verified{border-color:rgba(147,226,46,.34);background:rgba(147,226,46,.06)}.trust-vs,.trust-arrow{text-align:center;color:#7f8b99;font-weight:900;letter-spacing:.15em;font-size:.75rem}.trust-arrow{font-size:1.2rem}
.guardian-capability-grid{margin-top:28px}.guardian-capability-grid .card{min-height:190px}.capability-mark{font-size:.7rem;letter-spacing:.14em;color:#8f9ba8;font-weight:900}.guardian-defence-note{margin-top:20px}
.guardian-environment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}.guardian-environment-grid div{padding:20px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(135deg,rgba(216,221,228,.05),rgba(168,92,255,.04));font-size:.82rem;font-weight:900;letter-spacing:.08em;text-align:center;color:#e7ebf0}.guardian-centered-note{text-align:center;margin-top:16px}
.guardian-position-card{border:1px solid rgba(214,177,75,.28);background:rgba(214,177,75,.06);border-radius:26px;padding:28px}.guardian-position-card p{color:#d1d8e0;font-size:1.06rem}.guardian-position-card strong{color:#fff}
.guardian-roadmap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}.guardian-public-view{max-width:920px;margin:auto;text-align:center;border:1px solid rgba(255,255,255,.1);border-radius:28px;padding:34px;background:linear-gradient(135deg,rgba(216,221,228,.04),rgba(214,177,75,.05),rgba(168,92,255,.04))}.guardian-public-view p{color:#bdc7d2}.guardian-disclosure-rule{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.guardian-final{text-align:center;padding:90px 0;background:radial-gradient(circle at center,rgba(214,177,75,.08),transparent 30%)}.guardian-closing-line{font-size:clamp(1.4rem,3vw,2.4rem);font-weight:800;color:#d7dde5;margin-bottom:8px}.guardian-final h2{max-width:940px;margin:0 auto 34px}.guardian-final-lockup{display:inline-flex;align-items:center;gap:18px;text-align:left;padding:18px 22px;border-radius:22px;border:1px solid rgba(255,255,255,.1);background:#080b0e}.guardian-final-lockup img{width:88px;height:88px;object-fit:contain}.guardian-final-lockup strong,.guardian-final-lockup span,.guardian-final-lockup small{display:block}.guardian-final-lockup strong{font-size:1.16rem;color:#fff}.guardian-final-lockup span{color:#f0d783}.guardian-final-lockup small{color:#8f9aa7;margin-top:5px}
.guardian-home-callout{border-color:rgba(168,92,255,.2)}
@keyframes g-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes g-spin-reverse{to{transform:translate(-50%,-50%) rotate(-360deg)}}
@media(max-width:920px){.guardian-hero-grid{grid-template-columns:1fr}.guardian-visual-shell{max-width:660px}.guardian-status-grid,.guardian-roadmap{grid-template-columns:1fr 1fr}.guardian-status-card.featured{grid-column:span 2}.guardian-metric-grid,.guardian-environment-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.guardian-constellation{min-height:330px}.g-shield{width:120px;height:145px}.ring-a{width:190px;height:190px}.ring-b{width:250px;height:250px}.ring-c{width:310px;height:310px}.guardian-status-grid,.guardian-roadmap,.guardian-metric-grid,.guardian-environment-grid{grid-template-columns:1fr}.guardian-status-card.featured{grid-column:span 1}.guardian-final-lockup{display:flex;flex-direction:column;text-align:center}.guardian-final-lockup img{width:72px;height:72px}.guardian-milestone{grid-template-columns:48px 1fr}.guardian-timeline{margin-left:14px}.milestone-index{margin-left:-20px}}
@media(prefers-reduced-motion:reduce){.ring-b,.ring-c{animation:none}}

/* Guardian high-zoom reflow guard */
.guardian-principle-card,
.guardian-principle-card blockquote,
.trust-flow,
.trust-box,
.trust-box span,
.guardian-environment-grid div,
.guardian-metric,
.guardian-status-card,
.guardian-status-card h3,
.guardian-milestone,
.guardian-milestone h3,
.guardian-final-lockup {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width:620px) {
  .guardian-principle-card { padding: 22px; }
  .trust-box { padding: 18px; }
}

/* 3D Hardware Twins · public engineering showcase */
.hardware-twins-page {
  background:
    radial-gradient(circle at 16% 12%, rgba(176,92,255,.055), transparent 24%),
    radial-gradient(circle at 84% 8%, rgba(143,255,42,.045), transparent 22%),
    #020304;
}
.hardware-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(72px,9vw,118px) 0 clamp(62px,7vw,96px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hardware-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,rgba(2,3,4,.98),rgba(2,3,4,.80) 48%,rgba(2,3,4,.36)),
    repeating-linear-gradient(90deg,transparent 0 79px,rgba(216,221,230,.018) 80px),
    repeating-linear-gradient(0deg,transparent 0 79px,rgba(216,221,230,.018) 80px);
}
.hardware-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(320px,.92fr);
  gap: clamp(34px,6vw,82px);
  align-items: center;
}
.hardware-hero h1 {
  margin: 12px 0 14px;
  font-size: clamp(3.4rem,8vw,7.1rem);
  line-height: .92;
  letter-spacing: -.065em;
  color: var(--silver-bright);
}
.hardware-hero h1 span {
  display: block;
  background: linear-gradient(90deg,var(--silver-bright),var(--gold-bright) 40%,var(--purple) 73%,var(--green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hardware-hero-line {
  margin: 0 0 14px;
  color: var(--gold-bright);
  font-size: clamp(1.15rem,2.4vw,1.8rem);
  font-weight: 850;
  letter-spacing: -.02em;
}
.hardware-proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 24px 0 0;
}
.hardware-proof-strip span {
  padding: 8px 11px;
  border: 1px solid rgba(216,221,230,.14);
  border-radius: 999px;
  background: rgba(9,12,16,.72);
  color: #c8d0d9;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
}
.hardware-hero-art {
  position: relative;
  min-height: 470px;
  border: 1px solid rgba(216,221,230,.1);
  border-radius: 34px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%,rgba(209,166,58,.11),transparent 17%),
    radial-gradient(circle at 28% 26%,rgba(176,92,255,.085),transparent 20%),
    radial-gradient(circle at 76% 74%,rgba(143,255,42,.06),transparent 18%),
    linear-gradient(160deg,#0d1218,#050709 70%);
  box-shadow: 0 32px 80px rgba(0,0,0,.42), inset 0 0 80px rgba(255,255,255,.012);
}
.hardware-hero-art:before,.hardware-hero-art:after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 1px; height: 74%;
  background: linear-gradient(transparent,rgba(216,221,230,.12),transparent);
  transform: translate(-50%,-50%) rotate(45deg);
}
.hardware-hero-art:after { transform: translate(-50%,-50%) rotate(-45deg); }
.hardware-orbit {
  position: absolute;
  left: 50%; top: 50%;
  border: 1px solid rgba(216,221,230,.13);
  border-radius: 50%;
  transform: translate(-50%,-50%);
}
.hardware-orbit.orbit-a { width: 235px; height: 235px; border-color: rgba(209,166,58,.23); animation: hardware-spin 28s linear infinite; }
.hardware-orbit.orbit-b { width: 355px; height: 355px; border-color: rgba(176,92,255,.16); animation: hardware-spin-reverse 38s linear infinite; }
.hardware-core {
  position: absolute;
  left: 50%; top: 50%;
  width: 118px; height: 118px;
  transform: translate(-50%,-50%);
  display: grid;
  place-items: center;
  border-radius: 30px;
  border: 1px solid rgba(242,207,114,.45);
  background: linear-gradient(145deg,#151b22,#07090c);
  color: var(--gold-bright);
  font-size: 2.5rem;
  font-weight: 950;
  letter-spacing: -.06em;
  box-shadow: 0 0 44px rgba(209,166,58,.13), inset 0 0 28px rgba(255,255,255,.025);
}
.hardware-node {
  position: absolute;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(216,221,230,.12);
  background: rgba(4,7,10,.86);
  color: #cfd6de;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .11em;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.node-device{left:9%;top:20%;border-color:rgba(216,221,230,.24)}
.node-system{right:9%;top:24%;border-color:rgba(143,255,42,.24);color:#d7ffb0}
.node-vehicle{left:10%;bottom:19%;border-color:rgba(209,166,58,.28);color:#f2d786}
.node-space{right:10%;bottom:20%;border-color:rgba(176,92,255,.3);color:#e0c2ff}
.twin-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 24px;
}
.twin-filter,.twin-variant {
  appearance: none;
  border: 1px solid rgba(216,221,230,.14);
  border-radius: 999px;
  background: #090d12;
  color: #bec8d3;
  padding: 9px 13px;
  font: inherit;
  font-size: .76rem;
  font-weight: 850;
  cursor: pointer;
  transition: border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease;
}
.twin-filter:hover,.twin-variant:hover { transform: translateY(-1px); border-color: rgba(242,207,114,.4); }
.twin-filter[aria-pressed="true"],.twin-variant[aria-pressed="true"] {
  color: #fff;
  border-color: rgba(242,207,114,.48);
  background: linear-gradient(145deg,rgba(209,166,58,.14),rgba(176,92,255,.07));
  box-shadow: 0 0 20px rgba(209,166,58,.07);
}
.hardware-twin-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
}
.hardware-twin-card {
  appearance: none;
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: 178px 1fr;
  padding: 0;
  text-align: left;
  color: inherit;
  border: 1px solid rgba(216,221,230,.1);
  border-radius: 22px;
  background: linear-gradient(180deg,#0e1319,#070a0d);
  cursor: pointer;
  box-shadow: 0 16px 44px rgba(0,0,0,.18);
  transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.hardware-twin-card:hover,.hardware-twin-card[aria-pressed="true"] {
  transform: translateY(-3px);
  border-color: rgba(242,207,114,.34);
  box-shadow: 0 24px 52px rgba(0,0,0,.3),0 0 28px rgba(209,166,58,.06);
}
.hardware-twin-card[aria-pressed="true"] { outline: 1px solid rgba(176,92,255,.18); outline-offset: 2px; }
.hardware-twin-card-visual {
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 48%,rgba(209,166,58,.08),transparent 38%),#050709;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.hardware-twin-card-visual img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 8px;
  transition: transform .25s ease;
}
.hardware-twin-card:hover .hardware-twin-card-visual img { transform: scale(1.035); }
.hardware-twin-card-copy { display: grid; align-content: start; gap: 7px; padding: 15px; min-width: 0; }
.hardware-twin-card-copy strong { color: #f4f7fa; font-size: .96rem; line-height: 1.17; overflow-wrap: anywhere; }
.hardware-twin-card-copy small { color: #7f8c9a; font-size: .67rem; line-height: 1.3; letter-spacing: .045em; overflow-wrap: anywhere; }
.hardware-twin-card-meta { color: var(--gold-bright); font-size: .64rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.hardware-viewer {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr);
  gap: clamp(28px,5vw,62px);
  align-items: center;
}
.hardware-viewer-media,.hardware-viewer-copy { min-width: 0; }
.hardware-viewer-frame {
  position: relative;
  overflow: hidden;
  min-height: 470px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(216,221,230,.12);
  border-radius: 28px;
  background:
    radial-gradient(circle at center,rgba(209,166,58,.075),transparent 38%),
    linear-gradient(155deg,#0d1218,#040608);
  box-shadow: 0 30px 70px rgba(0,0,0,.34);
}
.hardware-viewer-frame img {
  width: 100%;
  max-height: 610px;
  object-fit: contain;
  padding: 14px;
  cursor: zoom-in;
}
.hardware-viewer-hud {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(216,221,230,.1);
  border-radius: 13px;
  background: rgba(2,4,6,.79);
  backdrop-filter: blur(10px);
  color: #99a7b5;
  font-size: .63rem;
  font-weight: 900;
  letter-spacing: .09em;
}
.hardware-viewer-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.hardware-variant-row { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; }
.hardware-viewer-copy h2 { margin: 14px 0; font-size: clamp(2rem,4vw,3.7rem); overflow-wrap: anywhere; }
.hardware-evidence-block,.hardware-boundary-block {
  margin-top: 18px;
  padding: 17px 18px;
  border-radius: 18px;
  border: 1px solid rgba(216,221,230,.1);
  background: rgba(11,15,19,.72);
}
.hardware-evidence-block { border-color: rgba(143,255,42,.16); }
.hardware-boundary-block { border-color: rgba(209,166,58,.18); }
.hardware-evidence-block strong,.hardware-boundary-block strong { display: block; margin-bottom: 6px; color: #f0f3f6; }
.hardware-evidence-block p,.hardware-boundary-block p { margin: 0; color: #a8b4c0; }
.hardware-final {
  padding: clamp(74px,9vw,118px) 0;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.07);
  background: radial-gradient(circle at 50% 30%,rgba(209,166,58,.08),transparent 30%);
}
.hardware-final h2 { max-width: 920px; margin-left: auto; margin-right: auto; }
.hardware-final .lead { max-width: 890px; margin-left: auto; margin-right: auto; }
.hardware-final .guardian-final-lockup { margin-top: 30px; }
.hardware-home-callout { border-color: rgba(209,166,58,.19); background: linear-gradient(135deg,rgba(209,166,58,.055),rgba(176,92,255,.035),rgba(143,255,42,.025)); }
.hardware-press-callout { border-color: rgba(209,166,58,.22); }
@keyframes hardware-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes hardware-spin-reverse { to { transform: translate(-50%,-50%) rotate(-360deg); } }
@media (max-width:1080px) {
  .hardware-twin-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .hardware-hero-grid,.hardware-viewer { grid-template-columns: 1fr; }
  .hardware-hero-art { min-height: 390px; max-width: 680px; }
  .hardware-twin-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hardware-viewer-frame { min-height: 390px; }
}
@media (max-width:620px) {
  .hardware-hero { padding-top: 58px; }
  .hardware-hero h1 { font-size: clamp(2.7rem,15vw,4.4rem); }
  .hardware-hero-art { min-height: 315px; border-radius: 26px; }
  .hardware-orbit.orbit-a { width: 180px; height: 180px; }
  .hardware-orbit.orbit-b { width: 270px; height: 270px; }
  .hardware-core { width: 94px; height: 94px; border-radius: 24px; font-size: 2rem; }
  .hardware-node { font-size: .57rem; padding: 6px 8px; }
  .hardware-twin-grid { grid-template-columns: 1fr; }
  .hardware-twin-card { grid-template-rows: minmax(200px,52vw) auto; }
  .hardware-viewer-frame { min-height: 300px; border-radius: 22px; }
  .hardware-viewer-hud { position: static; margin: 0 10px 10px; flex-direction: column; }
  .twin-filter,.twin-variant { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .hardware-orbit { animation: none !important; }
  .hardware-twin-card,.hardware-twin-card-visual img,.twin-filter,.twin-variant { transition: none; }
}

/* V19 · high-fidelity public twin inspection states */
.hardware-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.hardware-mode {
  appearance: none;
  border: 1px solid rgba(216,221,230,.15);
  border-radius: 999px;
  background: #080c10;
  color: #c6d0da;
  padding: 9px 13px;
  font: inherit;
  font-size: .74rem;
  font-weight: 850;
  cursor: pointer;
  transition: border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease;
}
.hardware-mode:hover {
  transform: translateY(-1px);
  border-color: rgba(176,92,255,.44);
  color: #fff;
}
.hardware-mode[aria-pressed="true"] {
  border-color: rgba(242,207,114,.56);
  color: #fff;
  background: linear-gradient(145deg,rgba(209,166,58,.16),rgba(176,92,255,.09));
  box-shadow: 0 0 22px rgba(209,166,58,.07);
}
.hardware-view-note {
  margin: 10px 0 0;
  color: #83909d;
  font-size: .76rem;
  line-height: 1.5;
}
.hardware-viewer-frame {
  background:
    linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px),
    radial-gradient(circle at center,rgba(209,166,58,.075),transparent 38%),
    linear-gradient(155deg,#0d1218,#040608);
  background-size: 32px 32px,32px 32px,auto,auto;
}
.hardware-viewer-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(242,207,114,.05);
  border-radius: inherit;
  box-shadow: inset 0 0 46px rgba(176,92,255,.025);
}
.hardware-viewer-frame img {
  position: relative;
  z-index: 1;
  transition: opacity .16s ease,transform .24s ease;
}
.hardware-viewer-frame img:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: -5px;
  border-radius: 18px;
}
.mars-feature-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 15px;
  margin: 26px 0;
}
.mars-feature {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(216,221,230,.1);
  border-radius: 22px;
  background: linear-gradient(180deg,#0d1217,#070a0d);
  box-shadow: 0 18px 46px rgba(0,0,0,.22);
}
.mars-feature img {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: contain;
  background: #0e151b;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.mars-feature figcaption {
  display: grid;
  gap: 3px;
  padding: 14px 15px 16px;
}
.mars-feature figcaption strong {
  color: #f4f7fa;
  font-size: .95rem;
}
.mars-feature figcaption span {
  color: #84919e;
  font-size: .72rem;
}
.hardware-twin-card[data-category="mars"] {
  border-color: rgba(176,92,255,.18);
  background: linear-gradient(180deg,rgba(176,92,255,.045),#080b0f 38%);
}
.hardware-twin-card[data-category="mars"] .hardware-twin-card-meta {
  color: #dabdff;
}
.hardware-twin-card[data-category="orbital"] .hardware-twin-card-meta {
  color: #9fe9ff;
}
@media (max-width:900px) {
  .mars-feature-grid { grid-template-columns: 1fr; }
}
@media (max-width:620px) {
  .hardware-mode { font-size: .7rem; padding: 8px 10px; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .hardware-mode,.hardware-viewer-frame img { transition: none; }
}

/* V20 desktop hero composition fix
   Keep the public-status panel in normal document flow so it never obscures
   the official 4P3X AI™ mark at desktop or desktop-emulation viewport widths. */
.hero-art {
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  align-content: center;
  gap: 18px;
  min-width: 0;
}

.hero-logo {
  display: block;
  width: min(100%, 540px);
  height: auto;
  margin-inline: auto;
}

.hero-badge {
  position: static;
  right: auto;
  bottom: auto;
  z-index: 2;
  width: min(100%, 430px);
  max-width: none;
  margin: 0 auto;
  display: grid;
  gap: 7px;
  padding: 14px 16px;
}

@media (min-width: 921px) and (max-width: 1120px) {
  .hero-grid {
    grid-template-columns: 1.08fr .92fr;
    gap: 30px;
  }

  .hero-logo {
    width: min(100%, 460px);
  }

  .hero-badge {
    width: min(100%, 390px);
  }
}

@media (max-width: 920px) {
  .hero-art {
    width: min(100%, 680px);
    margin-inline: auto;
  }

  .hero-logo {
    width: min(100%, 520px);
  }
}