.kz-page {
  --kz-green: #79d3ac;
  --kz-red: #ee684b;
  min-height: 100svh;
  background: radial-gradient(circle at 78% 12%, rgba(216,112,44,.12), transparent 30rem), var(--bg);
}

.kz-header {
  width: min(1440px, calc(100% - 48px));
  min-height: 86px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  border-bottom: 1px solid rgba(231,223,209,.1);
  position: relative;
  z-index: 20;
}

.kz-product-mark {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--paper-muted);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.kz-product-mark strong { margin-left: .35rem; color: var(--paper); font-weight: 620; }
.kz-live-dot { width: .38rem; height: .38rem; border-radius: 50%; background: #e9c77c; box-shadow: 0 0 14px rgba(233,199,124,.72); }
.kz-nav { display: flex; align-items: center; gap: 1.25rem; }

.kz-nav a,
.kz-text-link,
.kz-footer > a:last-child {
  color: var(--paper-muted);
  font-size: .65rem;
  font-weight: 720;
  letter-spacing: .11em;
  text-transform: uppercase;
  transition: color .2s, border-color .2s;
}

.kz-nav a:hover,
.kz-text-link:hover,
.kz-footer > a:last-child:hover { color: var(--orange-bright); }
.kz-nav .kz-nav-primary { padding: .8rem 1rem; border: 1px solid rgba(247,163,90,.34); color: var(--orange-bright); }
.kz-nav .kz-nav-primary:hover { border-color: var(--orange-bright); }

.kz-hero {
  width: min(1440px, calc(100% - 48px));
  min-height: calc(100svh - 86px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0,.86fr) minmax(520px,1.14fr);
  align-items: center;
  gap: clamp(2rem,5vw,6rem);
  position: relative;
  overflow: hidden;
}

.kz-hero-copy { max-width: 660px; padding: 4rem 0 6rem; position: relative; z-index: 3; }
.kz-eyebrow { margin: 0 0 1.35rem; display: flex; align-items: center; gap: .65rem; color: var(--paper-muted); font-size: .65rem; font-weight: 760; letter-spacing: .16em; text-transform: uppercase; }
.kz-eyebrow span { width: 2rem; height: 1px; background: var(--orange); box-shadow: 0 0 10px rgba(216,112,44,.7); }
.kz-hero h1 { max-width: 760px; margin-bottom: 1.55rem; font-size: clamp(3.1rem,5.4vw,6.6rem); line-height: .92; }
.kz-hero h1 em,
.kz-shift h2 em { color: var(--orange-bright); font-style: normal; }
.kz-lead { max-width: 630px; margin-bottom: 2.1rem; color: var(--paper-muted); font-size: clamp(.98rem,1.2vw,1.13rem); line-height: 1.7; }
.kz-actions { display: flex; align-items: center; gap: 1.4rem; }
.kz-text-link { padding: .85rem 0; border-bottom: 1px solid rgba(231,223,209,.14); }
.kz-version { margin: 2.25rem 0 0; display: flex; align-items: center; gap: .65rem; color: rgba(231,223,209,.48); font-size: .6rem; letter-spacing: .11em; text-transform: uppercase; }
.kz-version span { width: .4rem; height: .4rem; border-radius: 50%; background: var(--kz-green); box-shadow: 0 0 12px rgba(121,211,172,.65); }

.kz-operations {
  width: 100%;
  min-height: min(66svh,660px);
  position: relative;
  border: 1px solid rgba(231,223,209,.13);
  background: linear-gradient(145deg,rgba(255,255,255,.03),rgba(255,255,255,.008));
  box-shadow: inset 0 0 80px rgba(0,0,0,.38), 0 38px 90px rgba(0,0,0,.28);
  overflow: hidden;
}

.kz-operations::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg,transparent 65%,rgba(11,12,13,.74)); }
.kz-operations-grid { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(231,223,209,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(231,223,209,.07) 1px,transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(circle at 48% 46%,black,transparent 78%); }
.kz-map-label { position: absolute; left: 1.2rem; top: 1rem; color: rgba(231,223,209,.4); font-size: .56rem; letter-spacing: .14em; }
.kz-road { position: absolute; height: 1px; background: linear-gradient(90deg,transparent,rgba(231,223,209,.26),transparent); transform-origin: left center; }
.road-a { left: 10%; top: 26%; width: 63%; transform: rotate(18deg); }
.road-b { left: 16%; top: 69%; width: 58%; transform: rotate(-22deg); }
.road-c { left: 30%; top: 12%; width: 55%; transform: rotate(71deg); }
.road-d { left: 7%; top: 47%; width: 73%; transform: rotate(-5deg); }
.road-e { left: 48%; top: 13%; width: 45%; transform: rotate(113deg); }

.kz-beam { position: absolute; width: 52%; height: 28%; left: 14%; top: 42%; transform-origin: left center; background: linear-gradient(90deg,rgba(247,163,90,.24),transparent); clip-path: polygon(0 46%,100% 0,100% 100%); opacity: .42; filter: blur(2px); }
.kz-beam-one { animation: kz-scan 8s ease-in-out infinite alternate; }
.kz-beam-two { opacity: .16; animation: kz-scan 8s ease-in-out -3.2s infinite alternate-reverse; }

.kz-station,
.kz-call { position: absolute; z-index: 2; display: flex; align-items: center; gap: .45rem; color: rgba(231,223,209,.72); font-size: .55rem; letter-spacing: .08em; }
.kz-station i { width: 9px; height: 9px; border: 1px solid var(--kz-green); background: rgba(121,211,172,.14); box-shadow: 0 0 14px rgba(121,211,172,.32); }
.kz-call i { width: 10px; height: 10px; border: 2px solid var(--orange-bright); border-radius: 50%; box-shadow: 0 0 0 5px rgba(247,163,90,.1),0 0 16px rgba(247,163,90,.4); }
.station-a { left: 12%; top: 23%; }
.station-b { left: 54%; top: 18%; }
.station-c { left: 41%; bottom: 14%; }
.call-a { left: 24%; top: 55%; color: var(--orange-bright); }
.call-b { left: 58%; top: 67%; }

.kz-console { position: absolute; z-index: 4; right: 4%; top: 12%; width: min(46%,340px); padding: 1rem; border: 1px solid rgba(231,223,209,.18); background: rgba(10,11,12,.9); box-shadow: 0 26px 60px rgba(0,0,0,.42); backdrop-filter: blur(12px); }
.kz-console-head,
.kz-console-foot { display: flex; justify-content: space-between; align-items: center; color: var(--orange-bright); font-size: .58rem; letter-spacing: .14em; }
.kz-console-head { margin-bottom: .65rem; padding-bottom: .65rem; border-bottom: 1px solid rgba(231,223,209,.12); }
.kz-console-head b { font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; }
.kz-event { min-height: 76px; padding: .7rem .65rem; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: .25rem .7rem; border-bottom: 1px solid rgba(231,223,209,.1); }
.kz-event small { grid-column: 1 / -1; color: var(--orange); font-size: .5rem; letter-spacing: .11em; }
.kz-event strong { font-family: var(--font-display); font-size: .88rem; font-weight: 500; }
.kz-event > span { color: var(--kz-green); font-size: .56rem; }
.kz-event.event-critical { border-left: 2px solid var(--kz-red); background: linear-gradient(90deg,rgba(238,104,75,.09),transparent); }
.kz-console-foot { margin-top: .85rem; color: rgba(231,223,209,.5); }
.kz-console-foot .kz-pulse { color: var(--orange-bright); }
.kz-scroll-cue { position: absolute; left: 0; bottom: 1.25rem; display: flex; align-items: center; gap: .6rem; color: rgba(231,223,209,.4); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; }
.kz-scroll-cue span { width: 2rem; height: 1px; background: rgba(231,223,209,.32); }

.kz-intro,
.kz-pillars,
.kz-shift,
.kz-footer { width: min(1240px,calc(100% - 48px)); margin-inline: auto; }
.kz-intro { padding: clamp(6rem,10vw,9rem) 0 4.5rem; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr); gap: clamp(3rem,8vw,8rem); align-items: end; border-top: 1px solid rgba(231,223,209,.1); }
.kz-section-heading h2 { max-width: 760px; }
.kz-intro-copy { margin: 0; color: var(--paper-muted); line-height: 1.75; font-size: 1rem; }
.kz-pillars { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2.4rem; padding: 0 0 clamp(6rem,10vw,9rem); }
.kz-pillars article { min-height: 300px; padding-top: 1.1rem; position: relative; border-top: 1px solid rgba(231,223,209,.16); }
.kz-pillars article > span { position: absolute; right: 0; top: 1rem; color: rgba(231,223,209,.25); font-family: var(--font-display); font-size: 2rem; }
.kz-card-kicker { margin-bottom: 3.4rem; color: var(--orange); font-size: .62rem; font-weight: 760; letter-spacing: .14em; }
.kz-pillars h3 { max-width: 300px; font-size: clamp(2rem,3vw,2.65rem); }
.kz-pillars article > p:last-child { color: var(--paper-muted); line-height: 1.7; font-size: .92rem; }

.kz-shift { min-height: 460px; margin-bottom: 5rem; padding: clamp(2.5rem,5vw,4.5rem); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3rem; border: 1px solid rgba(247,163,90,.25); background: radial-gradient(circle at 86% 20%,rgba(247,163,90,.18),transparent 32%),linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012)); position: relative; overflow: hidden; }
.kz-shift::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .15; background-image: linear-gradient(rgba(231,223,209,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(231,223,209,.08) 1px,transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(90deg,transparent,black); }
.kz-shift > * { position: relative; z-index: 2; }
.kz-shift h2 { font-size: clamp(2.8rem,5vw,5rem); }
.kz-shift dl { grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.kz-shift dl div { padding-top: 1rem; border-top: 1px solid rgba(231,223,209,.14); }
.kz-shift dt { color: var(--orange-bright); font-family: var(--font-display); font-size: clamp(2rem,3.5vw,3.6rem); }
.kz-shift dd { margin: .35rem 0 0; color: var(--paper-muted); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; }
.kz-shift .button { justify-self: end; }

.kz-footer { min-height: 96px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; border-top: 1px solid rgba(231,223,209,.1); }
.kz-footer p { margin: 0; color: rgba(231,223,209,.42); font-size: .57rem; letter-spacing: .09em; text-align: center; text-transform: uppercase; }

@keyframes kz-scan { from { transform: rotate(-20deg) scaleY(.7); } to { transform: rotate(22deg) scaleY(1.15); } }

@media (max-width: 1080px) {
  .kz-product-mark span:not(.kz-live-dot) { display: none; }
  .kz-hero { grid-template-columns: minmax(0,.9fr) minmax(420px,1.1fr); gap: 2rem; }
  .kz-operations { min-height: 560px; }
  .kz-console { width: 52%; }
}

@media (max-width: 820px) {
  .kz-header { grid-template-columns: 1fr auto; min-height: 76px; }
  .kz-product-mark { display: none; }
  .kz-nav a:first-child { display: none; }
  .kz-hero { min-height: auto; grid-template-columns: 1fr; padding: 2rem 0 5rem; overflow: visible; }
  .kz-hero-copy { max-width: 720px; padding: 2.5rem 0 0; }
  .kz-operations { min-height: 520px; }
  .kz-scroll-cue { display: none; }
  .kz-intro { grid-template-columns: 1fr; gap: 2rem; }
  .kz-pillars { grid-template-columns: 1fr; gap: 2.5rem; }
  .kz-pillars article { min-height: 0; }
  .kz-card-kicker { margin-bottom: 2.2rem; }
  .kz-shift { grid-template-columns: 1fr; }
  .kz-shift .button { justify-self: start; }
  .kz-footer { grid-template-columns: auto 1fr; }
  .kz-footer > a:last-child { display: none; }
}

@media (max-width: 560px) {
  .kz-header,
  .kz-hero,
  .kz-intro,
  .kz-pillars,
  .kz-shift,
  .kz-footer { width: min(100% - 28px,1440px); }
  .kz-header { gap: .75rem; }
  .kz-header .wordmark-subtitle { display: none; }
  .kz-nav { gap: .5rem; }
  .kz-nav .kz-nav-primary { padding: .7rem .75rem; font-size: .57rem; }
  .kz-hero h1 { font-size: clamp(2.8rem,14vw,4.3rem); }
  .kz-actions { align-items: stretch; flex-direction: column; gap: .55rem; }
  .kz-actions .button { justify-content: center; }
  .kz-text-link { width: fit-content; }
  .kz-operations { min-height: 430px; }
  .kz-console { width: 72%; right: 4%; top: 13%; }
  .kz-event { min-height: 66px; }
  .station-b,
  .call-b { display: none; }
  .kz-intro { padding-top: 5rem; }
  .kz-pillars { padding-bottom: 5rem; }
  .kz-shift { width: 100%; margin-bottom: 0; padding: 3rem 1.2rem; border-inline: 0; }
  .kz-shift dl { grid-template-columns: 1fr; gap: 1.2rem; }
  .kz-footer { min-height: 128px; grid-template-columns: 1fr; justify-items: start; padding: 1.4rem 0; }
  .kz-footer p { text-align: left; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .kz-beam { animation: none; }
}
