@import url(
  "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
);

:root {
  --blue: #19afe0;
  --blue-light: #63d4f6;
  --blue-dark: #087ca5;

  --black: #050607;
  --dark: #080b0d;
  --card: rgba(10, 13, 15, 0.88);

  --white: #ffffff;
  --gray: #8c969c;

  --border: rgba(255, 255, 255, 0.08);
}


/* RESET */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html,
body {
  min-height: 100%;
}


body {
  min-height: 100vh;

  font-family: "Inter", sans-serif;

  background:
    radial-gradient(
      circle at 50% 0%,
      #12181c 0%,
      #080a0c 42%,
      #020303 100%
    );

  color: white;

  overflow-x: hidden;
}


/* =========================
   BACKGROUND
========================= */

.background {
  position: fixed;
  inset: 0;

  overflow: hidden;

  pointer-events: none;
}


.grid {
  position: absolute;
  inset: 0;

  opacity: 0.12;

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

  background-size: 50px 50px;

  mask-image:
    radial-gradient(
      circle at center,
      black,
      transparent 75%
    );
}


.glow {
  position: absolute;

  width: 500px;
  height: 500px;

  border-radius: 50%;

  background: rgba(25, 175, 224, 0.14);

  filter: blur(140px);
}


.glow-one {
  top: -250px;
  left: 10%;
}


.glow-two {
  bottom: -300px;
  right: 5%;
}


/* LOGO WATERMARK */

.watermark {
  position: absolute;

  width: 430px;

  opacity: 0.018;

  filter: grayscale(1);

  user-select: none;
}


.watermark-left {
  left: -180px;
  top: 18%;

  transform: rotate(-15deg);
}


.watermark-right {
  right: -180px;
  bottom: 3%;

  transform: rotate(15deg);
}


/* =========================
   PAGE
========================= */

.page {
  position: relative;

  min-height: 100vh;

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

  padding: 40px 20px;
}


/* =========================
   CARD
========================= */

.construction-card {
  position: relative;

  width: min(1050px, 100%);

  padding: 38px 52px 28px;

  background:
    linear-gradient(
      145deg,
      rgba(17, 22, 25, 0.95),
      rgba(5, 7, 8, 0.97)
    );

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

  border-radius: 28px;

  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255,255,255,.04);

  backdrop-filter: blur(20px);

  overflow: hidden;
}


/* borde superior celeste */

.construction-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 15%;

  width: 70%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--blue),
      transparent
    );

  box-shadow:
    0 0 20px var(--blue);
}


/* =========================
   TOP
========================= */

.top-line {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 16px;

  margin-bottom: 25px;
}


.top-line > span {
  width: 60px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(25,175,224,.5)
    );
}


.top-line > span:last-child {
  transform: rotate(180deg);
}


.top-status {
  display: flex;
  align-items: center;

  gap: 8px;

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

  letter-spacing: 2px;

  color: #aeb6ba;
}


.status-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--blue);

  box-shadow:
    0 0 12px var(--blue);
}


/* =========================
   LOGO
========================= */

.logo-container {
  text-align: center;
}


.logo {
  width: min(420px, 90%);

  max-height: 190px;

  object-fit: contain;

  margin-bottom: 20px;
}


/* =========================
   HERO
========================= */

.hero {
  text-align: center;
}


.eyebrow {
  display: inline-flex;

  padding: 7px 14px;

  border: 1px solid rgba(25,175,224,.18);

  border-radius: 50px;

  background: rgba(25,175,224,.05);

  color: var(--blue);

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

  letter-spacing: 2px;

  margin-bottom: 20px;
}


.hero h1 {
  font-size: clamp(44px, 7vw, 82px);

  font-weight: 900;

  line-height: .93;

  letter-spacing: -4px;

  color: white;
}


.hero h1 span {
  display: block;

  color: var(--blue);

  text-shadow:
    0 0 35px rgba(25,175,224,.13);
}


.hero p {
  margin: 24px auto 0;

  max-width: 670px;

  color: #939da2;

  font-size: 15px;
  line-height: 1.7;
}


.hero p strong {
  color: white;
  font-weight: 600;
}


/* =========================
   PROGRESS
========================= */

.progress-section {
  width: min(780px, 100%);

  margin: 45px auto 0;
}


.progress-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  margin-bottom: 16px;
}


.progress-small {
  display: block;

  color: #6f797e;

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

  letter-spacing: 1.6px;

  margin-bottom: 5px;
}


.progress-header h3 {
  font-size: 15px;
  font-weight: 600;
}


.progress-number {
  color: var(--blue);

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

  letter-spacing: -1px;
}


.progress-track {
  position: relative;

  width: 100%;
  height: 12px;

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

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

  border-radius: 999px;

  overflow: hidden;
}


.progress-bar {
  position: relative;

  height: 100%;

  width: 0;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--blue-dark),
      var(--blue),
      var(--blue-light)
    );

  box-shadow:
    0 0 20px rgba(25,175,224,.35);

  transition:
    width 1.4s cubic-bezier(.16, 1, .3, 1);

  overflow: hidden;
}


.progress-shine {
  position: absolute;

  top: 0;
  left: -100%;

  width: 70%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.25),
      transparent
    );

  animation:
    progressShine 3.5s infinite;
}


@keyframes progressShine {

  0% {
    left: -100%;
  }

  60%,
  100% {
    left: 120%;
  }

}


.progress-footer {
  display: flex;
  justify-content: space-between;

  margin-top: 10px;

  color: #596268;

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 1px;
}


/* =========================
   FEATURES
========================= */

.features {
  display: grid;

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

  gap: 1px;

  margin-top: 42px;

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

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

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


.feature {
  display: flex;
  align-items: center;

  gap: 14px;

  padding: 22px 28px;

  background:
    rgba(7,9,10,.95);
}


.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 39px;
  height: 39px;

  flex-shrink: 0;

  border-radius: 12px;

  border:
    1px solid rgba(25,175,224,.22);

  background:
    rgba(25,175,224,.06);

  color: var(--blue);

  font-size: 10px;
  font-weight: 800;
}


.feature strong {
  display: block;

  font-size: 11px;

  letter-spacing: 1px;

  margin-bottom: 3px;
}


.feature span {
  color: #697277;

  font-size: 10px;
}


/* =========================
   FOOTER
========================= */

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-top: 25px;
}


.footer-brand {
  display: flex;
  align-items: center;

  gap: 12px;
}


.footer-brand img {
  width: 32px;
  height: 32px;

  object-fit: contain;
}


.footer-brand strong {
  display: block;

  color: var(--blue);

  font-size: 11px;

  letter-spacing: 1px;
}


.footer-brand span {
  display: block;

  margin-top: 3px;

  color: #666f73;

  font-size: 10px;
}


.footer-status {
  display: flex;
  align-items: center;

  gap: 9px;

  color: #7a858a;

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 1.3px;
}


.pulse {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--blue);

  box-shadow:
    0 0 10px var(--blue);

  animation:
    pulseAnimation 1.8s infinite;
}


@keyframes pulseAnimation {

  0% {
    box-shadow:
      0 0 0 0 rgba(25,175,224,.45);
  }

  70% {
    box-shadow:
      0 0 0 8px rgba(25,175,224,0);
  }

  100% {
    box-shadow:
      0 0 0 0 rgba(25,175,224,0);
  }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 800px) {

  .page {
    padding: 15px;
  }

  .construction-card {
    padding:
      28px 20px 22px;

    border-radius: 22px;
  }

  .logo {
    width: 290px;
  }

  .hero h1 {
    font-size: clamp(
      39px,
      13vw,
      60px
    );

    letter-spacing: -2px;
  }

  .hero p {
    font-size: 13px;
  }

  .hero p br {
    display: none;
  }

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

  .feature {
    padding: 16px 12px;
  }

}


@media (max-width: 500px) {

  .construction-card {
    padding:
      24px 17px 20px;
  }

  .top-line {
    margin-bottom: 16px;
  }

  .logo {
    width: 240px;

    margin-bottom: 10px;
  }

  .eyebrow {
    font-size: 8px;

    letter-spacing: 1.4px;
  }

  .hero h1 {
    font-size: 42px;
  }

  .progress-section {
    margin-top: 35px;
  }

  .progress-number {
    font-size: 27px;
  }

  .progress-footer {
    font-size: 8px;
  }

  .features {
    margin-top: 32px;
  }

  .footer {
    padding-top: 20px;
  }

}