* {
  box-sizing: border-box;
}

:root {
  --black: #050607;
  --black2: #090b0d;
  --steel: #11151a;
  --steel2: #161c22;

  --line: rgba(255,255,255,.09);

  --white: #f7f8fa;
  --muted: #929ca7;

  --orange: #ff6a00;
  --orange2: #ff9500;

  --red: #d71932;

  --green: #45e690;

  --max: 1200px;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background:
    #050607;

  color: var(--white);

  font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;

  line-height: 1.55;

  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(
    var(--max),
    calc(100% - 44px)
  );

  margin: auto;
}

.topbar {
  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  z-index: 20;

  border-bottom:
    1px solid rgba(255,255,255,.09);

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.68),
      rgba(0,0,0,.15)
    );

  backdrop-filter:
    blur(12px);
}

.topbar-inner {
  height: 82px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 30px;
}

.brand {
  display: flex;

  align-items: center;

  gap: 13px;
}

.brand-symbol {
  width: 48px;
  height: 48px;

  display: grid;

  place-items: center;

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      #ff7a00,
      #bb1500
    );

  box-shadow:
    0 12px 40px
    rgba(255,106,0,.25);

  font-size: 15px;
  font-weight: 900;
}

.brand-symbol.small {
  width: 38px;
  height: 38px;

  border-radius: 9px;

  font-size: 11px;
}

.brand-name {
  display: flex;

  flex-direction: column;
}

.brand-name strong {
  font-size: 19px;

  letter-spacing: -.04em;
}

.brand-name small {
  color: #959fa8;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .16em;
}

nav {
  display: flex;

  align-items: center;

  gap: 25px;

  color: #d0d5da;

  font-size: 12px;
  font-weight: 700;
}

nav a:hover {
  color: white;
}

.login-button {
  padding:
    10px
    17px;

  border:
    1px solid
    rgba(255,255,255,.17);

  border-radius:
    9px;

  background:
    rgba(255,255,255,.07);
}

.hero {
  position: relative;

  min-height: 780px;

  padding:
    165px
    0
    100px;

  display: flex;

  align-items: center;

  overflow: hidden;

  border-bottom:
    1px solid var(--line);
}

.datacenter-bg {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(4,5,6,.96) 0%,
      rgba(5,6,7,.83) 42%,
      rgba(5,6,7,.45) 70%,
      rgba(5,6,7,.78) 100%
    ),
    linear-gradient(
      0deg,
      #050607 0%,
      transparent 42%
    ),
    url("/assets/e4s-datacenter.jpg")
    center / cover no-repeat;

  transform:
    scale(1.03);
}

.hero-grid-lines {
  position: absolute;

  inset: 0;

  opacity: .19;

  background-image:
    linear-gradient(
      rgba(255,255,255,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.045) 1px,
      transparent 1px
    );

  background-size:
    72px
    72px;

  mask-image:
    linear-gradient(
      90deg,
      black,
      transparent 75%
    );
}

.orange-glow {
  position: absolute;

  width: 700px;
  height: 700px;

  right: -240px;
  top: 30px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,106,0,.23),
      transparent 67%
    );

  filter: blur(18px);
}

.hero-layout {
  position: relative;

  z-index: 3;

  display: grid;

  grid-template-columns:
    1.08fr
    .92fr;

  align-items: center;

  gap: 85px;
}

.hero-badge,
.kicker {
  color: var(--orange2);

  font-size: 10px;
  font-weight: 900;

  letter-spacing: .19em;

  text-transform: uppercase;
}

.hero-badge {
  display: flex;

  align-items: center;

  gap: 10px;
}

.hero-badge span {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: var(--orange);

  box-shadow:
    0 0 18px
    rgba(255,106,0,.9);
}

h1 {
  max-width: 720px;

  margin:
    18px
    0
    25px;

  font-size:
    clamp(
      62px,
      7vw,
      103px
    );

  line-height: .89;

  letter-spacing:
    -.075em;
}

h1 em,
h2 em {
  display: block;

  color: var(--orange);

  font-style: normal;
}

.hero-lead {
  max-width: 630px;

  margin: 0;

  color: #b2bac1;

  font-size: 17px;

  line-height: 1.75;
}

.hero-buttons {
  margin-top: 34px;

  display: flex;

  flex-wrap: wrap;

  gap: 12px;
}

.button {
  min-height: 52px;

  padding:
    0
    21px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 11px;

  border-radius: 10px;

  font-size: 12px;
  font-weight: 850;

  transition:
    .2s ease;
}

.button:hover {
  transform:
    translateY(-3px);
}

.button svg {
  width: 18px;
  height: 18px;

  fill: none;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}

.button.orange {
  background:
    linear-gradient(
      135deg,
      #ff7b00,
      #e24700
    );

  box-shadow:
    0 18px 45px
    rgba(255,106,0,.24);
}

.button.glass {
  border:
    1px solid
    rgba(255,255,255,.14);

  background:
    rgba(255,255,255,.06);

  backdrop-filter:
    blur(12px);
}

.hero-stats {
  margin-top: 48px;

  display: flex;

  gap: 48px;
}

.hero-stats div {
  display: flex;

  flex-direction: column;
}

.hero-stats strong {
  font-size: 18px;
}

.hero-stats span {
  color: #777f88;

  font-size: 10px;
}

.command-card {
  position: relative;

  padding: 1px;

  border-radius: 17px;

  border:
    1px solid
    rgba(255,125,0,.23);

  background:
    rgba(7,9,11,.92);

  box-shadow:
    0 45px 100px
    rgba(0,0,0,.65),
    0 0 55px
    rgba(255,106,0,.08);

  backdrop-filter:
    blur(10px);
}

.command-head {
  height: 55px;

  padding:
    0
    18px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  border-bottom:
    1px solid var(--line);

  color: #77818a;

  font-size: 9px;
  font-weight: 850;

  letter-spacing: .15em;
}

.command-head span {
  display: flex;

  align-items: center;

  gap: 8px;
}

.command-head i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--green);

  box-shadow:
    0 0 15px
    rgba(69,230,144,.85);
}

.command-head b {
  color: var(--green);

  font-size: 9px;
}

.rack-unit {
  min-height: 73px;

  margin:
    15px
    15px
    0;

  padding:
    0
    15px;

  display: grid;

  grid-template-columns:
    70px
    60px
    1fr
    auto;

  align-items: center;

  gap: 15px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 9px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.01)
    );
}

.rack-id {
  color: var(--orange);

  font-size: 10px;
  font-weight: 900;

  letter-spacing: .09em;
}

.rack-unit span {
  color: #7f8992;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .11em;
}

.rack-unit strong {
  color: var(--green);

  font-size: 9px;
  letter-spacing: .12em;
}

.rack-leds {
  display: flex;

  gap: 5px;
}

.rack-leds i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--green);

  box-shadow:
    0 0 10px
    rgba(69,230,144,.8);
}

.telemetry-card {
  margin: 15px;

  padding: 18px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 10px;

  background:
    rgba(255,255,255,.018);
}

.telemetry-title {
  display: flex;

  justify-content: space-between;

  color: #6c7580;

  font-size: 8px;
  font-weight: 850;

  letter-spacing: .14em;
}

.telemetry-bars {
  height: 125px;

  margin-top: 20px;

  display: flex;

  align-items: flex-end;

  gap: 7px;
}

.telemetry-bars i {
  flex: 1;

  min-height: 7px;

  border-radius:
    3px
    3px
    0
    0;

  background:
    linear-gradient(
      180deg,
      #ff9500,
      rgba(255,74,0,.18)
    );

  box-shadow:
    0 0 13px
    rgba(255,106,0,.09);
}

.command-footer {
  min-height: 48px;

  padding:
    0
    18px;

  display: flex;

  align-items: center;

  gap: 25px;

  border-top:
    1px solid var(--line);

  color: #666f78;

  font-size: 8px;
  font-weight: 800;

  letter-spacing: .12em;
}

.command-footer span {
  display: flex;

  align-items: center;

  gap: 6px;
}

.command-footer i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--orange);
}

.access {
  padding:
    105px
    0;

  background:
    radial-gradient(
      circle at 10% 50%,
      rgba(255,106,0,.07),
      transparent 30%
    ),
    #07090b;
}

.section-head {
  margin-bottom: 45px;

  display: grid;

  grid-template-columns:
    1fr
    .72fr;

  align-items: end;

  gap: 60px;
}

.section-head h2,
.operations h2,
.final-cta h2 {
  margin:
    10px
    0
    0;

  font-size:
    clamp(
      38px,
      4.7vw,
      61px
    );

  line-height: .97;

  letter-spacing: -.06em;
}

.section-head p {
  margin: 0;

  color: #88929c;

  line-height: 1.75;
}

.cards {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap: 14px;
}

.card {
  min-height: 330px;

  padding: 27px;

  display: flex;

  flex-direction: column;

  border:
    1px solid
    rgba(255,255,255,.085);

  border-radius: 13px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.012)
    );

  transition:
    .22s ease;
}

.card:hover {
  transform:
    translateY(-6px);

  border-color:
    rgba(255,106,0,.38);

  background:
    linear-gradient(
      145deg,
      rgba(255,106,0,.09),
      rgba(255,255,255,.012)
    );

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.25);
}

.icon {
  width: 49px;
  height: 49px;

  margin-bottom: 38px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(255,106,0,.22);

  border-radius: 10px;

  color: var(--orange);

  background:
    rgba(255,106,0,.08);
}

.icon svg {
  width: 22px;
  height: 22px;

  fill: none;

  stroke:
    currentColor;

  stroke-width:
    1.6;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}

.card small {
  color: #6e7881;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .16em;
}

.card h3 {
  margin:
    7px
    0
    11px;

  font-size: 23px;

  letter-spacing: -.04em;
}

.card p {
  margin:
    0
    0
    25px;

  color: #909aa3;

  font-size: 12px;

  line-height: 1.75;
}

.card b {
  margin-top: auto;

  color: #e1e5e8;

  font-size: 11px;
}

.card.whatsapp:hover {
  border-color:
    rgba(69,230,144,.35);
}

.card.whatsapp .icon {
  color: var(--green);

  border-color:
    rgba(69,230,144,.2);

  background:
    rgba(69,230,144,.07);
}

.operations {
  padding:
    100px
    0;

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

  background:
    linear-gradient(
      135deg,
      #0a0d10,
      #050607
    );
}

.operations-grid {
  display: grid;

  grid-template-columns:
    1fr
    1.1fr;

  gap: 90px;

  align-items: center;
}

.operations p {
  max-width: 550px;

  color: #88929a;

  line-height: 1.8;
}

.ops-list {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  border-top:
    1px solid var(--line);
}

.ops-list div {
  min-height: 80px;

  padding:
    19px
    8px;

  display: flex;

  align-items: center;

  gap: 18px;

  border-bottom:
    1px solid var(--line);
}

.ops-list div:nth-child(odd) {
  border-right:
    1px solid var(--line);
}

.ops-list span {
  color: var(--orange);

  font-size: 9px;
  font-weight: 900;
}

.ops-list strong {
  font-size: 13px;
}

.final-cta {
  padding:
    100px
    0;

  background:
    radial-gradient(
      circle at 80% 40%,
      rgba(255,106,0,.11),
      transparent 30%
    );
}

.final-box {
  padding:
    52px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 55px;

  border:
    1px solid
    rgba(255,106,0,.21);

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      #11161b,
      #080a0c
    );

  box-shadow:
    0 35px 90px
    rgba(0,0,0,.35);
}

.final-box p {
  color: #89939c;
}

.final-buttons {
  min-width: 220px;

  display: flex;

  flex-direction: column;

  gap: 10px;
}

footer {
  padding:
    42px
    0
    24px;

  border-top:
    1px solid var(--line);

  background: #030405;
}

.footer-row {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 30px;
}

.footer-brand {
  display: flex;

  align-items: center;

  gap: 12px;
}

.footer-brand div {
  display: flex;

  flex-direction: column;
}

.footer-brand strong {
  font-size: 13px;
}

.footer-brand span:not(.brand-symbol) {
  color: #6f7881;

  font-size: 9px;
}

.footer-links {
  display: flex;

  flex-wrap: wrap;

  gap: 20px;

  color: #7d8790;

  font-size: 10px;
}

.footer-links a:hover {
  color: white;
}

.copyright {
  margin-top: 30px;

  padding-top: 20px;

  border-top:
    1px solid
    rgba(255,255,255,.05);

  color: #515961;

  font-size: 9px;
}

@media(max-width:980px) {

  .hero-layout,
  .section-head,
  .operations-grid {
    grid-template-columns: 1fr;
  }

  .hero-layout {
    gap: 55px;
  }

  .cards {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }

}

@media(max-width:680px) {

  .container {
    width:
      calc(
        100% - 28px
      );
  }

  .topbar-inner {
    height: 70px;
  }

  nav a:not(.login-button) {
    display: none;
  }

  .hero {
    min-height: auto;

    padding:
      125px
      0
      70px;
  }

  h1 {
    font-size: 56px;
  }

  .hero-stats {
    justify-content:
      space-between;

    gap: 10px;
  }

  .hero-stats span {
    font-size: 8px;
  }

  .command-card {
    margin-top: 5px;
  }

  .rack-unit {
    grid-template-columns:
      56px
      42px
      1fr;

    gap: 9px;
  }

  .rack-unit strong {
    display: none;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .access,
  .operations,
  .final-cta {
    padding:
      70px
      0;
  }

  .ops-list {
    grid-template-columns: 1fr;
  }

  .ops-list div:nth-child(odd) {
    border-right: 0;
  }

  .final-box {
    padding: 30px;

    flex-direction: column;

    align-items: flex-start;
  }

  .final-buttons {
    width: 100%;
  }

  .footer-row {
    align-items: flex-start;

    flex-direction: column;
  }

}