:root {
  --batam-navy: #07111f;
  --batam-blue: #0a1d35;
  --batam-cyan: #42d8ed;
  --batam-line: #173650;
}
.batam-page {
  background: #07111f;
}
.batam-page .site-header {
  border-bottom: 1px solid #dbe3e9;
}
.batam-page .lux-hero {
  min-height: calc(100vh - 78px);
  background: var(--batam-navy);
}
.batam-page .lux-hero-shade {
  background: linear-gradient(
    90deg,
    #030914fa 0,
    #06101eea 35%,
    #06101e80 63%,
    #06101e18
  );
}
.batam-page .lux-grid-lines {
  background-image:
    linear-gradient(#42d8ed10 1px, transparent 1px),
    linear-gradient(90deg, #42d8ed10 1px, transparent 1px);
  background-size: 72px 72px;
}
.batam-page .hero-label {
  color: var(--batam-cyan);
}
.batam-page .hero-label i {
  background: var(--batam-cyan);
  box-shadow: 0 0 14px #42d8ed;
}
.batam-page .lux-hero h1 {
  max-width: 920px;
  font-size: clamp(55px, 7.2vw, 105px);
}
.batam-page .lux-hero h1 em {
  display: block;
  color: #fff;
}
.batam-page .lux-hero-content > p {
  max-width: 700px;
  color: #b9ccdc;
}
.batam-page .lux-primary {
  color: #101722;
  clip-path: polygon(0 0, 92% 0, 100% 30%, 100% 100%, 0 100%);
}
.batam-page .hero-metrics div {
  border-color: #42d8ed35;
}
.batam-page .hero-metrics strong {
  color: #e7fbff;
}
.batam-page .hero-metrics span {
  color: #7795a9;
}
.batam-page .hero-index b {
  color: #42d8ed22;
}
.batam-page .signal-strip {
  color: #dffcff;
  background: #071a2c;
  border-block: 1px solid #42d8ed33;
}
.batam-page .signal-track i {
  color: var(--orange);
}
.batam-brief {
  padding: 100px 0;
  color: #fff;
  background: linear-gradient(135deg, #081422, #102a43);
}
.brief-grid {
  display: grid;
  grid-template-columns: 0.42fr 1fr;
  gap: 70px;
}
.brief-code {
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: 25px;
  border: 1px solid #42d8ed30;
  background: #08111d;
}
.brief-code span {
  color: var(--batam-cyan);
  font:
    800 9px Manrope,
    sans-serif;
  letter-spacing: 0.18em;
}
.brief-code b {
  margin: auto 0;
  font:
    700 44px Manrope,
    sans-serif;
  letter-spacing: -0.05em;
}
.brief-code small {
  color: #68869b;
}
.brief-lead h2,
.deck-head h2 {
  margin: 18px 0;
  font-size: clamp(38px, 4.5vw, 66px);
  letter-spacing: -0.055em;
}
.brief-lead p {
  max-width: 760px;
  color: #91aabe;
}
.brief-stats {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #42d8ed2e;
}
.brief-stats article {
  display: grid;
  padding: 22px 18px;
  border-right: 1px solid #42d8ed2e;
}
.brief-stats strong {
  color: var(--batam-cyan);
  font:
    700 21px Manrope,
    sans-serif;
}
.brief-stats span {
  color: #7892a5;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.batam-page .value-intro {
  background: #edf3f6;
}
.batam-page .solution-showcase {
  background: #050b13;
}
.batam-page .showcase-grid {
  gap: 1px;
  background: #173047;
}
.batam-page .solution-stack {
  gap: 1px;
}
.batam-page .solution-stack article {
  border: 0;
  background: #0a1725;
}
.batam-page .solution-stack article.featured {
  background: linear-gradient(135deg, #e85f0e, #ff8b35);
}
.batam-page .engineering-story {
  background: #e8eef2;
}
.batam-page .machine-card {
  box-shadow: 25px 25px 0 #0c2034;
}
.batam-page .machine-card span {
  color: var(--batam-cyan);
}
.control-deck {
  padding: 120px 0;
  color: #fff;
  background: #07111f;
}
.deck-head {
  display: grid;
  grid-template-columns: 1fr 0.5fr;
  gap: 25px 80px;
  align-items: end;
  margin-bottom: 60px;
}
.deck-head .lux-kicker {
  grid-column: 1/-1;
  color: var(--batam-cyan);
}
.deck-head h2,
.deck-head p {
  margin: 0;
}
.deck-head p {
  color: #7f99ac;
}
.deck-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--batam-line);
  border-left: 1px solid var(--batam-line);
}
.deck-grid article {
  min-height: 330px;
  padding: 28px;
  border-right: 1px solid var(--batam-line);
  border-bottom: 1px solid var(--batam-line);
  background: linear-gradient(150deg, #091725, #07111f);
  transition: 0.3s;
}
.deck-grid article:hover {
  background: #0c2236;
  transform: translateY(-8px);
}
.deck-grid b {
  display: block;
  margin-bottom: 65px;
  color: var(--batam-cyan);
  font-size: 11px;
}
.deck-grid span {
  color: #ff8c46;
  font-size: 9px;
  letter-spacing: 0.15em;
}
.deck-grid h3 {
  margin: 18px 0;
  font-size: 21px;
}
.deck-grid p {
  color: #7891a4;
  font-size: 12px;
}
.batam-page .selector {
  background: linear-gradient(135deg, #06101c, #0b2941);
}
.batam-page .selector-tabs button.active {
  background: #0c2b43;
  color: var(--batam-cyan);
}
.batam-page .selector-result > span {
  color: #008ea6;
}
.batam-page .project-roadmap {
  background: #eef3f6;
}
.batam-page .roadmap article:hover {
  background: #071827;
}
.batam-page .investment {
  background: linear-gradient(110deg, #ef5d08, #ff8b36);
}
.batam-page .lux-closing {
  background: #050b12;
}
.batam-page .lux-closing:before {
  border-radius: 0;
  transform: translate(-50%, -50%) rotate(45deg);
  border-color: #42d8ed16;
  box-shadow:
    0 0 0 100px #42d8ed05,
    0 0 0 200px #42d8ed03;
}
.batam-page footer {
  background: #03070c;
}
@media (max-width: 960px) {
  .brief-grid,
  .deck-head {
    grid-template-columns: 1fr;
  }
  .brief-stats {
    grid-column: 1;
  }
  .deck-grid {
    grid-template-columns: 1fr 1fr;
  }
  .batam-page .machine-card {
    box-shadow: 15px 15px 0 #0c2034;
  }
}
@media (max-width: 640px) {
  .batam-page .lux-hero h1 {
    font-size: 49px;
  }
  .batam-page .lux-hero-bg {
    object-position: 68% center;
  }
  .batam-brief,
  .control-deck {
    padding: 78px 0;
  }
  .brief-grid {
    gap: 40px;
  }
  .brief-stats,
  .deck-grid {
    grid-template-columns: 1fr;
  }
  .brief-stats article {
    border-right: 0;
    border-bottom: 1px solid #42d8ed2e;
  }
  .deck-grid article {
    min-height: auto;
  }
  .deck-grid b {
    margin-bottom: 35px;
  }
  .batam-page .machine-card {
    box-shadow: 8px 8px 0 #0c2034;
  }
}