.web-page {
  background: var(--bg);
}


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

.web-hero {
  padding: 104px 0 104px;

  background:
    radial-gradient(
      circle at 78% 40%,
      rgba(85, 230, 193, 0.08),
      transparent 36%
    ),
    var(--bg);

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


.web-hero-grid {
  display: grid;

  grid-template-columns:
    minmax(430px, 0.86fr)
    minmax(620px, 1.14fr);

  gap: 64px;

  align-items: center;
}


.web-hero-copy {
  max-width: 650px;
}


.web-kicker,
.web-eyebrow {
  margin: 0 0 22px;

  color: var(--accent);

  font-size: 0.7rem;

  font-weight: 800;

  letter-spacing: 0.16em;
}


.web-hero h1 {
  max-width: 620px;

  margin: 0 0 28px;

  font-size:
    clamp(3rem, 4.15vw, 4.55rem);

  line-height: 0.98;

  letter-spacing: -0.05em;
}


.web-hero h1 span {
  color: var(--accent);
}


.web-lead {
  max-width: 610px;

  margin: 0 0 34px;

  color: var(--muted);

  font-size: 1.02rem;

  line-height: 1.75;
}


.web-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 14px;
}


.web-primary,
.web-secondary,
.web-hosting a,
.web-cta a {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  text-decoration: none;
}


.web-primary {
  padding: 14px 19px;

  color: #071521;

  background: var(--accent);

  border-radius: 8px;

  font-weight: 800;
}


.web-primary:hover {
  filter: brightness(1.04);
}


.web-secondary {
  padding: 14px 18px;

  color: #f4f8fb;

  border: 1px solid rgba(255, 255, 255, 0.22);

  background: rgba(255, 255, 255, 0.025);

  border-radius: 8px;

  font-weight: 650;

  transition:
    border-color 0.2s,
    background 0.2s;
}


.web-secondary:hover {
  border-color: rgba(85, 230, 193, 0.46);

  background: rgba(85, 230, 193, 0.055);
}


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

.web-hero-visual {
  min-width: 0;
}


.web-hero-image-wrap {
  position: relative;

  overflow: hidden;

  min-height: 500px;

  background:
    linear-gradient(
      145deg,
      rgba(16, 41, 55, 0.96),
      rgba(8, 23, 34, 0.98)
    );

  border:
    1px solid
    rgba(85, 230, 193, 0.18);

  border-radius: 22px;

  box-shadow:
    0 32px 80px
    rgba(0, 0, 0, 0.32);
}


.web-hero-image-wrap::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      transparent 48%,
      rgba(6, 20, 29, 0.3) 100%
    );
}


.web-hero-image-wrap img {
  width: 100%;

  height: 500px;

  display: block;

  object-fit: cover;

  object-position: center;

  opacity: 0.97;
}


.web-hero-metrics {
  position: absolute;

  z-index: 2;

  left: 18px;

  right: 18px;

  bottom: 18px;

  display: grid;

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

  gap: 10px;
}


.web-hero-metrics > div {
  padding: 13px 15px;

  backdrop-filter: blur(16px);

  background:
    rgba(7, 21, 33, 0.79);

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  border-radius: 10px;
}


.web-hero-metrics strong {
  display: block;

  margin-bottom: 4px;

  color: var(--text);

  font-size: 0.92rem;
}


.web-hero-metrics span {
  color: var(--muted);

  font-size: 0.62rem;
}


/* =========================================================
   SERVICES
   ========================================================= */

.web-section,
.web-process,
.web-stack {
  padding: 100px 0;

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


.web-section-heading {
  max-width: 800px;

  margin-bottom: 52px;
}


.web-section-heading h2,
.web-quality h2,
.web-hosting h2,
.web-stack h2,
.web-cta h2 {
  margin: 0 0 22px;

  font-size:
    clamp(2.2rem, 4vw, 4rem);

  line-height: 1.04;

  letter-spacing: -0.045em;
}


.web-section-heading > p:last-child,
.web-quality p,
.web-hosting p,
.web-stack p,
.web-cta > .wrap > p:not(.web-eyebrow) {
  color: var(--muted);

  line-height: 1.75;
}


.web-grid {
  display: grid;

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

  gap: 18px;
}


.web-card {
  min-height: 245px;

  padding: 27px;

  background: var(--panel);

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

  border-radius: 14px;
}


.web-card > span {
  display: block;

  margin-bottom: 36px;

  color: var(--accent);

  font-size: 0.68rem;

  font-weight: 800;
}


.web-card h3 {
  margin: 0 0 13px;

  font-size: 1.22rem;
}


.web-card p {
  margin: 0 0 20px;

  color: var(--muted);

  font-size: 0.9rem;

  line-height: 1.65;
}


.web-card small {
  color: var(--accent);

  font-size: 0.69rem;

  font-weight: 700;
}


/* =========================================================
   PROCESS
   ========================================================= */

.web-process {
  background: var(--bg-alt);
}


.web-process-grid {
  display: grid;

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

  gap: 12px;
}


.web-process-grid article {
  min-height: 200px;

  padding: 24px;

  background: var(--panel);

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

  border-radius: 12px;
}


.web-process-grid span {
  display: block;

  margin-bottom: 30px;

  color: var(--accent);

  font-size: 0.66rem;

  font-weight: 800;
}


.web-process-grid h3 {
  margin: 0 0 12px;

  font-size: 1.05rem;
}


.web-process-grid p {
  margin: 0;

  color: var(--muted);

  font-size: 0.82rem;

  line-height: 1.6;
}


/* =========================================================
   QUALITY
   ========================================================= */

.web-quality,
.web-hosting {
  padding: 90px 0;

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


.web-quality-grid,
.web-hosting-grid,
.web-stack-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 75px;

  align-items: center;
}


.web-quality-list {
  display: grid;

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

  gap: 12px;
}


.web-quality-list > div {
  padding: 20px;

  background: var(--panel);

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

  border-radius: 12px;
}


.web-quality-list span {
  display: block;

  margin-bottom: 18px;

  color: var(--accent);

  font-size: 0.64rem;

  font-weight: 800;
}


.web-quality-list strong {
  display: block;

  margin-bottom: 7px;

  color: var(--text);

  font-size: 0.95rem;
}


.web-quality-list small {
  color: var(--muted);

  font-size: 0.74rem;

  line-height: 1.5;
}


/* =========================================================
   HOSTING
   ========================================================= */

.web-hosting a {
  margin-top: 18px;

  color: var(--accent);

  font-weight: 750;
}


/* =========================================================
   STACK
   ========================================================= */

.web-stack {
  background: var(--bg-alt);
}


.web-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}


.web-tags span {
  padding: 11px 15px;

  background: var(--panel);

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

  border-radius: 8px;

  font-size: 0.85rem;
}


/* =========================================================
   CTA
   ========================================================= */

.web-cta {
  padding: 100px 0;

  text-align: center;
}


.web-cta .wrap {
  max-width: 900px;
}


.web-cta p {
  max-width: 650px;

  margin-left: auto;

  margin-right: auto;
}


.web-cta a {
  margin-top: 18px;

  color: var(--accent);

  font-weight: 750;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {

  .web-hero-grid {
    grid-template-columns: 1fr;

    gap: 48px;
  }


  .web-hero-copy {
    max-width: 760px;
  }


  .web-hero-visual {
    max-width: 900px;
  }

}


@media (max-width: 950px) {

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


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


  .web-quality-grid,
  .web-hosting-grid,
  .web-stack-grid {
    grid-template-columns: 1fr;

    gap: 42px;
  }

}


@media (max-width: 700px) {

  .web-hero-image-wrap,
  .web-hero-image-wrap img {
    min-height: 390px;

    height: 390px;
  }


  .web-hero-metrics {
    grid-template-columns: 1fr;

    left: 12px;

    right: 12px;

    bottom: 12px;
  }

}


@media (max-width: 620px) {

  .web-hero {
    padding: 70px 0;
  }


  .web-grid,
  .web-process-grid {
    grid-template-columns: 1fr;
  }


  .web-actions {
    flex-direction: column;
  }


  .web-primary,
  .web-secondary {
    justify-content: center;
  }


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

}