.site-page {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 12%, rgba(90, 172, 118, 0.16), transparent 30rem),
    radial-gradient(circle at 3% 47%, rgba(54, 115, 88, 0.16), transparent 27rem),
    var(--color-night);
}
.site-page::before { position: absolute; inset: 0 0 auto; z-index: 0; height: 950px; opacity: .11; background-image: linear-gradient(var(--color-line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--color-line-dark) 1px, transparent 1px); background-size: 72px 72px; content: ""; mask-image: linear-gradient(to bottom, #000, transparent 88%); pointer-events: none; }

.hero { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(410px, .95fr); align-items: center; gap: clamp(48px, 7vw, 100px); min-height: calc(100svh - 92px); padding-block: clamp(70px, 9vw, 122px); }
.hero .eyebrow { margin-bottom: 26px; }
.hero h1 em { color: var(--color-signal); font-style: normal; }
.hero-intro { max-width: 560px; margin-top: 32px; color: var(--color-fog); font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 38px; }
.hero-actions .text-link { color: var(--color-mint); }
.hero-actions .text-link:hover { color: var(--color-signal); }
.hero-meta { display: flex; gap: 24px; margin-top: 44px; color: #72857e; font: .64rem/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.hero-meta span + span::before { margin-right: 24px; color: var(--color-line-dark); content: "/"; }

.monitor { position: relative; min-height: 520px; overflow: hidden; border: 1px solid var(--color-line-dark); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(29,70,54,.54), rgba(4,16,12,.82)); box-shadow: 0 28px 70px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.05); }
.monitor::before, .monitor::after { position: absolute; inset: 0; pointer-events: none; content: ""; }
.monitor::before { opacity: .35; background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(199,240,223,.08) 4px, transparent 5px); mix-blend-mode: overlay; }
.monitor::after { background: radial-gradient(circle at 50% 46%, transparent 0 17%, rgba(4,18,13,.12) 45%, rgba(1,8,5,.7) 100%); }
.monitor-top { position: absolute; z-index: 2; top: 24px; right: 25px; left: 25px; display: flex; justify-content: space-between; color: #b6c9c2; font: .61rem/1 var(--font-mono); letter-spacing: .12em; }
.rec { color: var(--color-alert); }
.rec::before { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; content: ""; animation: rec-pulse 1.5s ease infinite; }
.camera { position: absolute; top: 50%; left: 50%; z-index: 1; width: 274px; height: 200px; transform: translate(-52%, -52%); }
.camera-body { position: absolute; top: 40px; left: 32px; width: 190px; height: 110px; border: 2px solid rgba(203,255,79,.92); border-radius: 22px 25px 25px 22px; background: linear-gradient(145deg,rgba(203,255,79,.12),rgba(203,255,79,.02)); box-shadow: 0 0 35px rgba(203,255,79,.12), inset 0 0 22px rgba(203,255,79,.06); }
.lens { position: absolute; top: 53px; right: 13px; width: 83px; height: 83px; border: 2px solid var(--color-signal); border-radius: 50%; background: radial-gradient(circle at 42% 37%,#ecffb5 0 4%,#80b937 5% 13%,#112b1b 14% 31%,#07150e 32% 100%); box-shadow: 0 0 0 8px rgba(203,255,79,.06),0 0 30px rgba(203,255,79,.16); }
.camera-base { position: absolute; bottom: 7px; left: 90px; width: 88px; height: 17px; border: 2px solid var(--color-signal); border-radius: 50%; transform: perspective(40px) rotateX(36deg); }
.camera-arm { position: absolute; top: 139px; left: 118px; width: 3px; height: 39px; background: var(--color-signal); transform: rotate(21deg); transform-origin: top; }
.monitor-bracket { position: absolute; z-index: 1; width: 50px; height: 50px; border-color: rgba(203,255,79,.5); border-style: solid; }
.monitor-bracket-one { top: 74px; left: 38px; border-width: 1px 0 0 1px; }
.monitor-bracket-two { right: 39px; bottom: 83px; border-width: 0 1px 1px 0; }
.monitor-track { position: absolute; z-index: 1; height: 1px; opacity: .24; background: var(--color-signal); }
.track-one { top: 33%; left: 4%; width: 19%; }
.track-two { right: 4%; bottom: 37%; width: 14%; }
.monitor-label { position: absolute; z-index: 2; bottom: 26px; left: 26px; color: #82978f; font: .62rem/1.6 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.monitor-label strong { display: block; color: var(--color-mint); font-weight: 500; }
.monitor-stats { position: absolute; z-index: 2; right: 26px; bottom: 26px; display: flex; gap: 19px; }
.monitor-stats span { color: #7e958c; font: .59rem/1.35 var(--font-mono); text-align: right; }
.monitor-stats b { display: block; color: var(--color-signal); font-size: .74rem; font-weight: 500; text-transform: uppercase; }

.signal-strip { position: relative; z-index: 2; border-block: 1px solid var(--color-line-dark); background: rgba(3,11,8,.56); }
.signal-strip-inner { display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: 40px; min-height: 128px; }
.signal-strip-inner > p { color: var(--color-mint); font-size: 1.15rem; font-weight: 650; }
.signal-strip dl { display: grid; grid-template-columns: repeat(3, 1fr); }
.signal-strip dl > div { padding-left: clamp(22px,4vw,54px); border-left: 1px solid var(--color-line-dark); }
.signal-strip dt { color: #71877e; font: .61rem/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.signal-strip dd { margin-top: 10px; color: var(--color-signal); font-size: 1.05rem; font-weight: 700; }

.system-section { background: var(--color-paper); color: var(--color-ink); }
.system-section .eyebrow, .principles-section .eyebrow { color: #507016; }
.split-heading { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: clamp(40px,8vw,120px); }
.split-heading > p { max-width: 500px; padding-bottom: 5px; color: #52645e; line-height: 1.75; }
.layer-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--color-line-light); border-bottom: 1px solid var(--color-line-light); }
.layer-card { display: flex; min-height: 330px; flex-direction: column; justify-content: space-between; padding: 28px clamp(20px,2.5vw,36px) 34px; border-left: 1px solid var(--color-line-light); transition: background 220ms ease, transform 220ms var(--ease-out); }
.layer-card:last-child { border-right: 1px solid var(--color-line-light); }
.layer-card:hover { background: #e8eedf; transform: translateY(-6px); }
.layer-number { color: #788880; font: .66rem/1 var(--font-mono); }
.layer-card h3 { margin-bottom: 13px; font-size: 1.5rem; }
.layer-card p { color: #5f7069; font-size: .92rem; line-height: 1.7; }

.coverage-section { position: relative; background: var(--color-ink); }
.coverage-section::after { position: absolute; top: 0; right: 0; width: 45%; height: 100%; opacity: .09; background-image: linear-gradient(var(--color-line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--color-line-dark) 1px,transparent 1px); background-size: 54px 54px; content: ""; pointer-events: none; }
.coverage-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: clamp(60px,10vw,150px); }
.coverage-grid .eyebrow { margin-bottom: 22px; }
.coverage-grid .section-copy { margin-block: 30px 34px; }
.coverage-console { border: 1px solid var(--color-line-dark); border-radius: var(--radius-md); overflow: hidden; background: rgba(3,11,8,.58); box-shadow: 0 30px 70px rgba(0,0,0,.24); }
.console-head, .console-foot { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 20px; border-bottom: 1px solid var(--color-line-dark); color: #80968e; font: .61rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.live-indicator { display: flex; align-items: center; gap: 7px; color: var(--color-signal); }
.live-indicator::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; }
.site-list > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; min-height: 94px; padding: 0 20px; border-bottom: 1px solid var(--color-line-dark); }
.site-status { width: 9px; height: 9px; border: 2px solid currentColor; border-radius: 50%; box-shadow: 0 0 0 4px rgba(203,255,79,.06); }
.site-status-live { color: var(--color-signal); }
.site-status-review { color: #e8c44c; }
.site-list strong, .site-list small { display: block; }
.site-list strong { color: var(--color-mint); font: 500 .72rem/1.5 var(--font-mono); letter-spacing: .06em; }
.site-list small { margin-top: 5px; color: #6f857d; font-size: .76rem; }
.site-list b { color: var(--color-fog); font: 500 .61rem/1 var(--font-mono); text-transform: uppercase; }
.console-foot { gap: 14px; border: 0; }
.console-foot strong { color: var(--color-signal); font-weight: 500; }
.health-bar { flex: 1; height: 3px; overflow: hidden; background: rgba(199,240,223,.1); }
.health-bar i { display: block; width: 88%; height: 100%; background: var(--color-signal); }

.principles-section { background: var(--color-paper); color: var(--color-ink); }
.principle-list { border-top: 1px solid var(--color-line-light); }
.principle-list article { display: grid; grid-template-columns: .2fr .8fr 1fr; gap: 30px; align-items: center; min-height: 132px; border-bottom: 1px solid var(--color-line-light); }
.principle-list article > span { color: #798b84; font: .64rem/1 var(--font-mono); }
.principle-list h3 { font-size: clamp(1.45rem,2.5vw,2.15rem); }
.principle-list p { max-width: 520px; color: #5f7069; line-height: 1.7; }

.contact-section { padding-block: clamp(68px,9vw,112px); background: var(--color-signal); color: var(--color-ink); }
.contact-panel { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(50px,10vw,150px); align-items: end; }
.contact-section .eyebrow { margin-bottom: 20px; color: #49640f; }
.contact-section .button-primary { background: var(--color-ink); color: var(--color-signal); }
.contact-panel > div:last-child > p { margin-bottom: 28px; line-height: 1.7; }

@keyframes rec-pulse { 50% { opacity: .35; } }

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { max-width: 760px; }
  .monitor { max-width: 720px; }
  .layer-grid { grid-template-columns: repeat(2,1fr); }
  .layer-card:nth-child(3), .layer-card:nth-child(4) { border-top: 1px solid var(--color-line-light); }
  .coverage-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .hero { padding-top: 58px; }
  .hero-meta { flex-wrap: wrap; gap: 12px 20px; }
  .hero-meta span + span::before { margin-right: 20px; }
  .signal-strip-inner { grid-template-columns: 1fr; padding-block: 28px; }
  .signal-strip dl { gap: 16px; }
  .signal-strip dl > div { padding-left: 0; border-left: 0; }
  .split-heading, .contact-panel { grid-template-columns: 1fr; }
  .principle-list article { grid-template-columns: auto 1fr; padding-block: 26px; }
  .principle-list article p { grid-column: 2; }
}

@media (max-width: 540px) {
  .hero h1 { font-size: clamp(3.5rem,17vw,5rem); }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .monitor { min-height: 370px; }
  .camera { scale: .8; transform-origin: left top; }
  .monitor-stats { display: none; }
  .layer-grid { grid-template-columns: 1fr; }
  .layer-card { min-height: 250px; border-right: 1px solid var(--color-line-light); border-bottom: 1px solid var(--color-line-light); }
  .layer-card + .layer-card { border-top: 0; }
  .principle-list article { grid-template-columns: 1fr; gap: 12px; }
  .principle-list article p { grid-column: auto; }
}