:root {
  --bg:#02070c;
  --ink:#f4fbff;
  --muted:#9db0bd;
  --accent:#39cfff;
  --glow:#39cfff66;
  --hero:none;
  --sans:Arial,sans-serif;
  --display:Arial Black,Arial,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.7 var(--sans);
  overflow-x:hidden
}
a {
  color:inherit;
  text-decoration:none
}
.it-nav {
  position:absolute;
  z-index:5;
  top:0;
  left:0;
  right:0;
  height:84px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 5vw;
  border-bottom:1px solid #ffffff20;
  background:#02070b73;
  backdrop-filter:blur(16px)
}
.it-logo {
  font:900 17px var(--display);
  letter-spacing:.12em
}
.it-logo small {
  display:block;
  margin-top:3px;
  color:var(--accent);
  font:700 7px var(--sans);
  letter-spacing:.23em
}
.it-nav nav {
  display:flex;
  align-items:center;
  gap:28px;
  font-size:10px;
  font-weight:800
}
.it-nav nav a:last-child {
  padding:10px 16px;
  border:1px solid var(--accent);
  border-radius:999px;
  color:var(--accent);
  box-shadow:0 0 25px var(--glow)
}
.it-hero {
  position:relative;
  min-height:820px;
  display:flex;
  align-items:center;
  padding:130px 5vw 70px;
  background:linear-gradient(90deg,#02070cf5 0%,#02070cba 38%,#02070c1a 75%),var(--hero) center/cover;
  isolation:isolate
}
.it-hero:before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:radial-gradient(circle at 70% 45%,var(--glow),transparent 28%);
  animation:pulse 5s ease-in-out infinite
}
.it-hero:after {
  content:"";
  position:absolute;
  left:5vw;
  bottom:42px;
  width:90%;
  height:1px;
  background:linear-gradient(90deg,var(--accent),transparent)
}
@keyframes pulse {
  50% {
    opacity:.45;
    transform:scale(1.04)
  }
}
.it-copy {
  max-width:760px
}
.it-kicker {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--accent);
  font-size:9px;
  font-weight:900;
  letter-spacing:.18em
}
.it-kicker:before {
  content:"";
  width:38px;
  height:1px;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent)
}
.it-hero h1 {
  margin:22px 0 20px;
  font:900 clamp(52px,8vw,112px)/.85 var(--display);
  letter-spacing:-.075em;
  text-transform:uppercase;
  text-shadow:0 12px 50px #000
}
.it-hero h1 em {
  display:block;
  color:var(--accent);
  font-style:normal;
  text-shadow:0 0 35px var(--glow)
}
.it-hero p {
  max-width:650px;
  color:#d4e0e5;
  font-size:17px
}
.it-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px
}
.it-btn {
  display:inline-flex;
  min-height:50px;
  align-items:center;
  justify-content:center;
  padding:0 23px;
  border:1px solid var(--accent);
  border-radius:999px;
  background:var(--accent);
  color:#021016;
  font-weight:900;
  box-shadow:0 0 35px var(--glow);
  transition:transform .2s
}
.it-btn:hover {
  transform:translateY(-3px)
}
.it-btn.ghost {
  background:#02070c9c;
  color:#fff
}
.it-data {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:#040b10;
  border-block:1px solid #ffffff1e
}
.it-data div {
  padding:27px 5vw;
  border-right:1px solid #ffffff16
}
.it-data b {
  display:block;
  color:var(--accent);
  font:900 24px var(--display)
}
.it-data span {
  color:var(--muted);
  font-size:10px
}
.it-section {
  padding:90px 5vw
}
.it-heading {
  display:grid;
  grid-template-columns:1fr .75fr;
  gap:45px;
  align-items:end;
  margin-bottom:38px
}
.it-eyebrow {
  margin:0 0 10px;
  color:var(--accent);
  font-size:9px;
  font-weight:900;
  letter-spacing:.18em
}
.it-heading h2,.it-feature h2,.it-cta h2 {
  margin:0;
  font:900 clamp(38px,5vw,70px)/.94 var(--display);
  letter-spacing:-.06em;
  text-transform:uppercase
}
.it-heading>p {
  margin:0;
  color:var(--muted)
}
.it-services {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px
}
.it-service {
  position:relative;
  min-height:320px;
  padding:28px;
  overflow:hidden;
  border:1px solid #ffffff20;
  border-radius:18px;
  background:linear-gradient(145deg,#0c1720,#030a0f);
  transition:.3s
}
.it-service:hover {
  transform:translateY(-7px);
  border-color:var(--accent);
  box-shadow:0 22px 55px #0008,0 0 30px var(--glow)
}
.it-service:before {
  content:"";
  position:absolute;
  right:-55px;
  top:-55px;
  width:175px;
  height:175px;
  border:1px solid var(--accent);
  border-radius:50%;
  box-shadow:0 0 0 28px color-mix(in srgb,var(--accent) 8%,transparent)
}
.it-service b {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1px solid var(--accent);
  border-radius:14px;
  color:var(--accent);
  font:900 12px var(--display)
}
.it-service h3 {
  margin:80px 0 8px;
  font:900 19px var(--display);
  text-transform:uppercase
}
.it-service p {
  margin:0;
  color:var(--muted);
  font-size:13px
}
.it-feature {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:650px;
  background:#e9eef0;
  color:#061018
}
.it-feature>div {
  padding:90px 7vw;
  align-self:center
}
.it-feature p {
  color:#52636c
}
.it-visual {
  position:relative;
  min-height:650px;
  background:linear-gradient(0deg,#02070c99,#02070c05),var(--hero) center/cover;
  overflow:hidden
}
.it-visual:after {
  content:"4D";
  position:absolute;
  right:-20px;
  bottom:-35px;
  color:#ffffff18;
  font:900 180px/1 var(--display)
}
.it-checks {
  display:grid;
  gap:10px;
  margin-top:25px
}
.it-checks span {
  padding:13px 0;
  border-bottom:1px solid #b9c5ca;
  font-weight:800
}
.it-checks b {
  color:var(--accent);
  margin-right:11px
}
.it-process {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin-top:38px;
  background:#ffffff20;
  border:1px solid #ffffff20
}
.it-process article {
  min-height:260px;
  padding:29px;
  background:#050d13
}
.it-process b {
  color:var(--accent);
  font:900 23px var(--display)
}
.it-process h3 {
  margin:62px 0 8px;
  font:900 15px var(--display);
  text-transform:uppercase
}
.it-process p {
  color:var(--muted);
  font-size:12px
}
.it-placeholder {
  margin-top:30px;
  padding:20px;
  border:1px dashed var(--accent);
  border-radius:12px;
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  color:#c8d5da
}
.it-placeholder b {
  color:var(--accent)
}
.it-cta {
  padding:115px 5vw;
  background:linear-gradient(90deg,#02070cf4,#02070c62),var(--hero) center/cover
}
.it-cta p {
  max-width:690px;
  color:#d0dce1
}
.it-footer {
  display:flex;
  justify-content:space-between;
  padding:30px 5vw;
  border-top:1px solid #ffffff20;
  color:#92a2aa;
  font-size:10px
}
.ai {
  --bg:#08040d;
  --accent:#f1b84b;
  --glow:#a84cff66
}
.ai .it-hero,.ai .it-cta {
  background-position:center
}
.ai .it-service {
  background:linear-gradient(145deg,#1a0d22,#08040d)
}
.cyber {
  --bg:#020a08;
  --accent:#45f0a8;
  --glow:#45f0a866
}
.cyber .it-service {
  border-radius:4px
}
.cyber .it-btn,.cyber .it-nav nav a:last-child {
  border-radius:3px
}
@media(max-width:850px) {
  .it-nav nav a:not(:last-child) {
    display:none
  }
  .it-heading,.it-feature {
    grid-template-columns:1fr
  }
  .it-services {
    grid-template-columns:1fr
  }
  .it-process {
    grid-template-columns:repeat(2,1fr)
  }
  .it-data {
    grid-template-columns:repeat(2,1fr)
  }
}
@media(max-width:520px) {
  .it-nav {
    height:70px
  }
  .it-logo {
    font-size:12px
  }
  .it-hero {
    min-height:690px;
    padding-top:120px
  }
  .it-hero h1 {
    font-size:50px
  }
  .it-data {
    grid-template-columns:1fr
  }
  .it-section {
    padding:60px 20px
  }
  .it-feature>div {
    padding:60px 20px
  }
  .it-visual {
    min-height:420px
  }
  .it-process {
    grid-template-columns:1fr
  }
  .it-footer {
    gap:18px;
    flex-direction:column
  }
}