/* Licensed Raster Sentinel reference adapted into an original Atreon press-sheet hero. */
.raster-hero {
  min-height: 0;
  padding: 78px 0 0;
  background: #0b0c0d;
  overflow: hidden;
}

.raster-hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 1.15fr .93fr;
  min-height: 680px;
  border-inline: 1px solid #292d2e;
}

.raster-panel {
  min-width: 0;
  border-right: 1px solid #292d2e;
}

.raster-panel:last-child { border-right: 0; }

.raster-copy-panel,
.raster-mode-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 42px 34px 34px;
  background: #0b0c0d;
}

.raster-copy-panel .hero-title {
  max-width: none;
  margin: 0;
  font-size: clamp(48px, 5.1vw, 72px);
  line-height: .99;
  letter-spacing: -.055em;
}

.raster-copy-panel .hero-line,
.raster-copy-panel .hero-line > span {
  display: block;
  color: #f0f1ee;
}

.raster-copy-panel .hero-line-muted > span { color: #929896; }

.raster-copy-panel > div > p.hero-copy {
  max-width: 35rem;
  margin: 32px 0 0;
  color: #8e9593;
  font-size: 15px;
  line-height: 1.65;
}

.raster-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 42px 0 0;
  border-top: 1px solid #292d2e;
  overflow: visible;
}

.raster-facts::before,
.raster-facts::after { display: none; }

.raster-facts div {
  min-width: 0;
  padding: 22px 18px 0 0;
  border: 0;
  background: none;
  animation: none;
}

.raster-facts div + div {
  padding-left: 18px;
  border-left: 1px solid #292d2e;
}

.raster-facts span,
.raster-facts b,
.raster-facts small { display: block; }
.raster-facts span { color: #6e7573; font: 500 9px/1 Manrope, sans-serif; letter-spacing: .14em; }
.raster-facts b { margin-top: 12px; color: #eef0ed; font: 600 17px/1.2 Manrope, sans-serif; }
.raster-facts small { margin-top: 6px; color: #747b79; font-size: 11px; line-height: 1.45; }
.raster-facts div::after { display: none; }

.raster-feature-panel {
  display: grid;
  grid-template-rows: 1fr auto;
  background: #e9e7e1;
  color: #111313;
}

.raster-system-art {
  position: relative;
  min-height: 510px;
  overflow: hidden;
}

.raster-system-art svg {
  width: 100%;
  height: 100%;
}

.raster-dot-field { fill: url(#atreon-raster-dots); }
.raster-clear-field { fill: #e9e7e1; }

.raster-circuit-base path,
.raster-circuit-live path,
.raster-core-mark path {
  fill: none;
  stroke: #111313;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.raster-circuit-base { opacity: .44; }
.raster-circuit-live path {
  stroke-width: 2;
  stroke-dasharray: .12 .88;
  stroke-dashoffset: 1;
  animation: raster-signal 6.8s linear infinite;
}
.raster-circuit-live path + path { animation-delay: -3.4s; }

.raster-circuit-nodes rect {
  fill: #e9e7e1;
  stroke: #111313;
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: raster-node 3.4s steps(1, end) infinite;
}
.raster-circuit-nodes rect:nth-child(2n) { animation-delay: -1.7s; }

.raster-core-mark path:first-child { fill: #111313; stroke-width: 0; }
.raster-core-mark path:last-child { stroke: #e9e7e1; stroke-width: 12; }

.raster-system-art p {
  position: absolute;
  left: 34px;
  bottom: 23px;
  margin: 0;
  color: #111313;
  font: 600 clamp(32px, 3.2vw, 46px)/.98 Manrope, sans-serif;
  letter-spacing: -.045em;
}

.raster-action {
  padding: 28px 34px 32px;
  border-top: 1px solid #c8c6c0;
  text-align: center;
}

.raster-action-rule {
  position: relative;
  display: flex;
  justify-content: center;
}

.raster-action-rule::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #c8c6c0;
}

.raster-action .button {
  position: relative;
  min-height: 50px;
  border-color: #171919;
  background: #171919;
  color: #f1f2ef;
}

.raster-action .button:hover {
  border-color: #353939;
  background: #353939;
}

.raster-secondary {
  display: inline-block;
  margin-top: 18px;
  padding: 7px 17px;
  border: 1px solid #6d706e;
  border-radius: 999px;
  color: #242626;
  font-size: 11px;
  font-weight: 600;
}

.raster-mode-stack {
  margin: 0;
  padding: 0;
  list-style: none;
}

.raster-mode-stack li {
  color: #5f6463;
  font: 500 clamp(34px, 3.8vw, 52px)/1.02 Manrope, sans-serif;
  letter-spacing: -.04em;
  transition: color .4s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}

.raster-mode-stack li.is-active {
  color: #f0f1ee;
  transform: translateX(8px);
}

.raster-readouts { border-top: 1px solid #292d2e; }
.raster-readouts div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid #292d2e;
}
.raster-readouts span { color: #636a68; font: 500 9px/1.3 Manrope, sans-serif; letter-spacing: .13em; }
.raster-readouts b { color: #bdc2bf; font-size: 10px; font-weight: 500; text-align: right; }

.raster-hero .hero-status {
  height: 62px;
  margin-top: 0;
  border-inline: 1px solid #292d2e;
  border-top: 1px solid #292d2e;
}

@keyframes raster-signal { to { stroke-dashoffset: 0; } }
@keyframes raster-node { 0%, 72% { fill: #e9e7e1; } 73%, 100% { fill: #111313; } }

@media (max-width: 1040px) {
  .raster-hero-grid { grid-template-columns: 1fr 1.05fr; }
  .raster-mode-panel { grid-column: 1 / -1; min-height: 360px; border-top: 1px solid #292d2e; border-right: 0; }
  .raster-mode-stack { display: flex; flex-wrap: wrap; gap: 4px 25px; }
}

@media (max-width: 720px) {
  .raster-hero { padding-top: 68px; }
  .raster-hero-grid { display: block; border-inline: 0; }
  .raster-panel { border-right: 0; border-bottom: 1px solid #292d2e; }
  .raster-copy-panel { min-height: 620px; padding: 52px 16px 26px; }
  .raster-copy-panel .hero-title { font-size: clamp(50px, 15vw, 64px); }
  .raster-copy-panel > div > p.hero-copy { font-size: 16px; }
  .raster-facts { grid-template-columns: 1fr 1fr; margin-top: 34px; }
  .raster-facts div { padding-right: 12px; }
  .raster-facts div + div { padding-left: 12px; }
  .raster-system-art { min-height: 460px; }
  .raster-system-art p { left: 18px; bottom: 18px; }
  .raster-action { padding: 25px 16px 28px; }
  .raster-action .button { width: 100%; }
  .raster-mode-panel { min-height: 470px; padding: 36px 16px 28px; }
  .raster-mode-stack { display: block; }
  .raster-mode-stack li { font-size: 46px; }
  .raster-readouts b { max-width: 170px; }
  .raster-hero .hero-status { border-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .raster-circuit-live path,
  .raster-circuit-nodes rect { animation: none; }
  .raster-circuit-live path { stroke-dasharray: none; stroke-dashoffset: 0; }
  .raster-mode-stack li { transition: none; }
}