.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden;
  background: var(--black); display: flex; align-items: center; justify-content: center;
}
.hero-media { position: absolute; inset: 0; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.hero-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); z-index: 10; }
.hero-grid {
  position: absolute; inset: 0; z-index: 10; opacity: .55; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 50px 50px;
}
.hero-content { position: relative; z-index: 20; text-align: center; perspective: 800px; }
.hero-tilt { will-change: transform; transform-style: preserve-3d; }
.hero-tilt .hero-title { transform: translateZ(84px); }
.hero-kicker { --z: 28px; }
.hero-kicker {
  font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 18px; color: var(--red);
  letter-spacing: .5em; text-transform: uppercase; margin-bottom: 16px;
}
.hero-title {
  font-size: clamp(64px, 14.4vw, 208px); line-height: .75; font-weight: 900;
  letter-spacing: -.05em; text-transform: uppercase; color: var(--white);
  mix-blend-mode: difference;
}
.hero-title .line { display: block; }
.hero-title .line-outline { color: transparent; -webkit-text-stroke: 2px var(--white); transition: color .5s; }
.hero-title .line-outline:hover { color: var(--white); }
.hero-scroll {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: 8px; mix-blend-mode: difference;
}
.hero-scroll span { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.6); }
.hero-scroll svg { color: var(--white); animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

.hero-kicker, .hero-title .line { animation: rise 1s cubic-bezier(.16,1,.3,1) both; }
.hero-title .line-outline { animation-delay: .15s; }
@keyframes rise { from { opacity: 0; transform: translateY(60px) translateZ(var(--z, 0px)); } to { opacity: 1; transform: translateZ(var(--z, 0px)); } }

.infra { padding-block: var(--sect); background: #ececef; }
.infra-head { text-align: center; margin-bottom: 56px; }
.infra-head .kicker { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; letter-spacing: .1em; color: var(--red); margin-bottom: 20px; }
.infra-head h2 { font-size: clamp(48px, 5vw, 72px); font-weight: 900; color: var(--slate-900); margin-bottom: 16px; letter-spacing: -.02em; }
.infra-head h2 .em { color: var(--red); }
.infra-head .sub { font-size: 20px; color: var(--slate-600); max-width: 672px; margin-inline: auto; }

.infra-acc { display: flex; gap: 4px; height: 620px; }
.unit-panel {
  position: relative; flex: 1; overflow: hidden; display: block; min-width: 0;
  transition: flex .8s cubic-bezier(.16,1,.3,1);
}
.unit-panel.is-open { flex: 2.4; }
.unit-panel:hover, .unit-panel:focus-visible { flex: 2.4; }
.infra-acc:hover .unit-panel.is-open:not(:hover) { flex: 1; }
.unit-panel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.unit-panel:hover img { transform: scale(1.04); }
.infra-acc .unit-panel:nth-child(4) img { object-position: 45% 45%; }
.unit-panel .unit-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.42) 45%, transparent 78%);
}
.unit-panel .unit-meta { position: absolute; left: 28px; right: 28px; bottom: 26px; color: var(--white); text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.unit-panel .unit-num { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--red); margin-bottom: 10px; }
.unit-panel h3 { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1; margin-bottom: 6px; white-space: nowrap; }
.unit-panel:not(.is-open):not(:hover):not(:focus-visible) .unit-meta {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent calc(100% - 2px));
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent calc(100% - 2px));
}
.unit-panel .unit-loc { font-size: 15px; font-weight: 500; color: rgba(255,255,255,.85); white-space: nowrap; }
.unit-panel .unit-desc {
  font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.75);
  width: 400px; max-width: none;
  margin-top: 0; max-height: 0; overflow: hidden;
  opacity: 0; transform: translateY(8px);
  transition: opacity .22s, transform .22s,
              max-height .5s cubic-bezier(.16,1,.3,1), margin-top .5s cubic-bezier(.16,1,.3,1);
}
.unit-panel.is-open .unit-desc,
.unit-panel:focus-visible .unit-desc,
.unit-panel:hover .unit-desc {
  opacity: 1; transform: none; margin-top: 12px; max-height: 76px;
  transition: opacity .45s .15s, transform .45s .15s,
              max-height .65s cubic-bezier(.16,1,.3,1), margin-top .65s cubic-bezier(.16,1,.3,1);
}
.infra-acc:hover .unit-panel.is-open:not(:hover) .unit-desc {
  opacity: 0; margin-top: 0; max-height: 0;
  transition: opacity .22s, transform .22s,
              max-height .5s cubic-bezier(.16,1,.3,1), margin-top .5s cubic-bezier(.16,1,.3,1);
}

.dark-zone { position: relative; background: var(--zinc-950); color: var(--white); overflow: hidden; }

.products { position: relative; padding: var(--sect) 0 48px; }
.products .container { position: relative; z-index: 10; }
.products-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 48px; margin-bottom: 64px;
}
.products-head .kicker { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; letter-spacing: .1em; color: var(--red); margin-bottom: 24px; }
.products-head h2 { font-size: clamp(48px, 9vw, 128px); font-weight: 900; line-height: .8; }
.products-head h2 .outline { color: transparent; -webkit-text-stroke: 1px var(--white); }
.products-head .side { max-width: 448px; padding-bottom: 8px; }
.products-head .side p { font-size: 20px; font-weight: 300; line-height: 1.6; color: var(--zinc-400); }
.products-head .side .count { display: flex; align-items: center; gap: 16px; margin-top: 32px; color: rgba(255,255,255,.5); }
.products-head .side .count .rule { width: 48px; height: 1px; background: rgba(255,255,255,.5); }
.products-head .side .count span { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12px; }

.pgrid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--zinc-800); border: 1px solid var(--zinc-800);
}
.ptile { position: relative; aspect-ratio: 1; background: var(--black); overflow: hidden; display: block; }
.ptile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .85; transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .7s;
}
.ptile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.15) 45%, transparent 65%);
}
.ptile:hover img { transform: scale(1.06); opacity: 1; }
.ptile .p-num {
  position: absolute; top: 20px; left: 20px; z-index: 2;
  font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12px; color: rgba(255,255,255,.75);
}
.ptile .p-arrow {
  position: absolute; top: 16px; right: 16px; z-index: 2; color: var(--white);
  opacity: 0; transform: translate(-6px, 6px); transition: opacity .4s, transform .4s;
}
.ptile:hover .p-arrow { opacity: 1; transform: none; }
.ptile h3 {
  position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2;
  font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--white);
  transition: color .3s;
}
.ptile:hover h3 { color: var(--red); }

.ptile-cta {
  position: relative; aspect-ratio: 1; background: var(--zinc-900); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  text-align: center; transition: background-color .5s;
}
.ptile-cta h3 { font-size: 32px; font-weight: 900; color: var(--white); }
.ptile-cta p { color: var(--zinc-400); transition: color .5s; }
.ptile-cta .cta-circle {
  width: 64px; height: 64px; border: 2px solid var(--white); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--white);
  transition: background-color .3s, color .3s; margin-top: 8px;
}
.ptile-cta:hover { background: var(--red); }
.ptile-cta:hover p { color: rgba(255,255,255,.8); }
.ptile-cta:hover .cta-circle { background: var(--white); color: var(--red); }

.stats { position: relative; padding: 48px 0 var(--sect); }
.stats .container { position: relative; z-index: 10; }
.stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px;
  padding-top: 32px; text-align: center;
}
.stat .stat-num-wrap { position: relative; display: inline-block; margin-bottom: 24px; }
.stat .stat-num {
  font-size: clamp(60px, 8vw, 128px); font-weight: 900; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1px var(--white); transition: color .5s;
}
.stat:hover .stat-num { color: var(--white); }
.stat .stat-rule {
  position: absolute; bottom: -16px; left: 0; width: 100%; height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform .5s;
}
.stat:hover .stat-rule { transform: scaleX(1); }
.stat p {
  color: var(--slate-400); text-transform: uppercase; letter-spacing: .25em;
  font-size: 14px; font-weight: 700; transition: color .3s;
}
.stat:hover p { color: var(--red); }

.tech { padding-block: var(--sect); background: var(--zinc-50); }
.tech-head {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 48px; align-items: end; margin-bottom: 48px;
}
.tech-head h2 {
  font-size: clamp(48px, 5.4vw, 84px); font-weight: 900; line-height: .85;
  letter-spacing: -.045em; color: var(--slate-900);
}
.tech-head h2 .outline { color: transparent; -webkit-text-stroke: 1px var(--black); }
.tech-head-side p { font-size: 19px; color: var(--slate-600); line-height: 1.6; max-width: 448px; margin-bottom: 28px; }
.tech-link { display: inline-flex; align-items: center; gap: 16px; font-weight: 700; letter-spacing: .1em; color: var(--black); transition: color .3s; }
.tech-link .label { border-bottom: 2px solid var(--black); padding-bottom: 4px; transition: border-color .3s; }
.tech-link .arr { transition: transform .3s; }
.tech-link:hover { color: var(--red); }
.tech-link:hover .label { border-color: var(--red); }
.tech-link:hover .arr { transform: translateX(8px); }

.line-strip { display: flex; gap: 2px; height: 420px; }
.ls {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
  background: var(--zinc-900);
  transition: flex-grow .7s cubic-bezier(.16,1,.3,1);
}
.ls.is-open, .ls:focus-visible { flex-grow: 2.6; }
.ls img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(.92);
  transform: scale(1.06); transition: transform .7s cubic-bezier(.16,1,.3,1);
}
.ls.is-open img, .ls:focus-visible img { transform: scale(1); }
.ls-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,.28) 42%, rgba(0,0,0,.12));
}
.ls::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .7s cubic-bezier(.16,1,.3,1);
}
.ls.is-open::after, .ls:focus-visible::after { transform: scaleX(1); }
.ls-body { position: absolute; left: 20px; right: 12px; bottom: 18px; display: block; }
.ls-num {
  display: block; font-family: var(--sans); font-weight: 600;
  font-variant-numeric: tabular-nums; font-size: 13px; color: var(--red);
}
.ls-word {
  display: block; margin-top: 6px; font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 900;
  text-transform: uppercase; letter-spacing: -.02em; line-height: 1; color: var(--white);
}
.ls-name {
  display: block; margin-top: 8px; font-size: 14px; color: rgba(255,255,255,.66);
  white-space: nowrap; overflow: hidden;
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s .12s, transform .5s .12s;
}
.ls.is-open .ls-name, .ls:focus-visible .ls-name { opacity: 1; transform: none; }

.qual { padding-block: var(--sect); background: var(--white); border-top: 1px solid var(--slate-200); }

.qa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px; }

.qa-list { display: flex; flex-direction: column; }
.qa-row {
  position: relative;
  display: grid; grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 20px; padding: 26px 0 26px;
  border-top: 1px solid var(--slate-200);
}
.qa-list .qa-row:last-child { border-bottom: 1px solid var(--slate-200); }
.qa-rule {
  position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.qa-row.is-live .qa-rule { transform: scaleX(1); }
.qa-num {
  grid-column: 1; align-self: baseline;
  font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: 13px; color: var(--zinc-500); transition: color .3s;
  padding-top: .55em;
}
.qa-row.is-live .qa-num { color: var(--red); }
.qa-word {
  grid-column: 2;
  font-size: clamp(30px, 3.4vw, 46px); font-weight: 900; line-height: 1;
  letter-spacing: -.03em; text-transform: uppercase; color: var(--slate-900);
  transition: color .3s;
}
.qa-row:hover .qa-word { color: var(--red); }
.qa-det {
  grid-column: 2; margin-top: 10px;
  font-size: 15px; line-height: 1.5; color: var(--slate-600); max-width: 34em;
}

.qa-spec { position: relative; }
.qa-frame {
  position: sticky; top: 96px;
  height: min(100%, calc(100svh - 120px));
  overflow: hidden; background: var(--zinc-900);
}
.qa-shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .75s cubic-bezier(.16,1,.3,1);
}
.qa-shot.is-shown { clip-path: inset(0); }
.qa-shot:nth-child(1) { z-index: 1; }
.qa-shot:nth-child(2) { z-index: 2; }
.qa-shot:nth-child(3) { z-index: 3; }
.qa-shot:nth-child(4) { z-index: 4; }
.qa-gauge {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 5;
  background: var(--red); box-shadow: 0 0 22px 3px rgba(237, 29, 36, .5);
  opacity: 0; pointer-events: none;
}
.qa-spec.is-sweep-down .qa-gauge { animation: qa-sweep-down .75s cubic-bezier(.16,1,.3,1); }
.qa-spec.is-sweep-up .qa-gauge { animation: qa-sweep-up .75s cubic-bezier(.16,1,.3,1); }
@keyframes qa-sweep-down {
  from { opacity: 1; transform: translateY(0); }
  82%  { opacity: 1; }
  to   { opacity: 0; transform: translateY(var(--gh, 0px)); }
}
@keyframes qa-sweep-up {
  from { opacity: 1; transform: translateY(var(--gh, 0px)); }
  82%  { opacity: 1; }
  to   { opacity: 0; transform: translateY(0); }
}

.green {
  position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden;
  background: var(--black); display: flex; align-items: center;
}
.green-bg { position: absolute; inset: 0; }
.green-bg img {
  width: 100%; height: 100%; object-fit: cover; opacity: .96;
  filter: saturate(1.75) brightness(1.08) hue-rotate(-8deg); transform: scale(1.05);
}
.green-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(16, 92, 44, .28); mix-blend-mode: multiply;
}
.green-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(2, 28, 11, .82), rgba(4, 44, 18, .36) 52%, rgba(6, 52, 21, .1));
}
.green .container { position: relative; z-index: 10; }
.green-content { max-width: 896px; }
.green-content .kicker { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .1em; color: #3ed47c; margin-bottom: 24px; }
.green-content h2 { font-size: clamp(60px, 9vw, 128px); font-weight: 900; line-height: .8; color: var(--white); margin-bottom: 48px; }
.green-row { display: flex; gap: 48px; align-items: flex-start; }
.green-row p {
  font-size: 20px; font-weight: 300; color: var(--slate-300); max-width: 576px; line-height: 1.6;
  border-left: 1px solid rgba(62, 212, 124, .45); padding-left: 32px;
}
.green-btn {
  flex-shrink: 0; padding: 16px 32px; border: 1px solid var(--white); color: var(--white);
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .3s, color .3s;
}
.green-btn:hover { background: #3ed47c; border-color: #3ed47c; color: var(--black); }

@media (max-width: 1023px) {
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .qa { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 32px; }
  .tech-head { grid-template-columns: 1fr; gap: 24px; }
  .line-strip { flex-direction: column; height: auto; }
  .ls { flex: none; height: 82px; }
  .ls img { transform: none; }
  .ls-scrim { background: linear-gradient(to right, rgba(0,0,0,.84) 30%, rgba(0,0,0,.4)); }
  .ls::after { top: auto; bottom: 0; height: 1px; background: var(--zinc-800); transform: none; }
  .ls.is-open::after { background: var(--red); height: 2px; }
  .ls-body { left: 18px; right: 14px; bottom: auto; top: 50%; transform: translateY(-50%); display: block; }
  .ls-word { margin-top: 0; font-size: 18px; }
  .ls-name { margin-top: 6px; font-size: 12.5px; opacity: 1; transform: none; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1399px) {
  .unit-panel .unit-loc {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
}
@media (max-width: 1023px) {
  .unit-panel .unit-loc { -webkit-mask-image: none; mask-image: none; }
  .infra-acc { flex-direction: column; height: auto; gap: 4px; }
  .unit-panel, .infra-acc:not(:hover) .unit-panel:first-child, .unit-panel:hover {
    flex: none; min-height: 300px; height: clamp(300px, 40vw, 560px);
  }
  .unit-panel .unit-desc {
    opacity: 1; transform: none;
    width: auto; max-width: 420px; max-height: none; margin-top: 12px; overflow: visible;
  }
}

@media (max-width: 767px) {
  .hero-kicker { font-size: 14px; }
  .products-head { flex-direction: column; align-items: flex-start; gap: 32px; }
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .ptile h3 { font-size: 15px; left: 14px; right: 14px; bottom: 12px; }
  .ptile .p-num { top: 12px; left: 14px; }
  .ls { height: 78px; }
  .stats { padding: 36px 0 var(--sect); }
  .products { padding-bottom: 36px; }
  .stats-row { grid-template-columns: 1fr; gap: 64px; }
  .qa { grid-template-columns: 1fr; gap: 24px; }
  .qa-spec { order: -1; position: sticky; top: 72px; align-self: start; height: 44vh; min-height: 190px; max-height: 300px; }
  .qa-frame { position: static; top: auto; height: 100%; }
  .qa-row { grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; padding: 20px 0; }
  .qa-det { margin-top: 8px; font-size: 14px; }
  .green-row { flex-direction: column; }
}

@media (max-width: 559px) {
  .infra-head h2 { font-size: clamp(26px, 8.6vw, 48px); }
  .infra-head .sub { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-kicker, .hero-title .line { animation: none; }
  .hero-scroll svg { animation: none; }
  .qa-shot { transition: none; }
  .qa-gauge { display: none; }
  .unit-panel, .unit-panel img { transition: none; }
}