/* Replit-inspired Nixi Capital Design */

:root {
  --primary: #159dcc;
  --primary-hover: #1fb7ea;
  --primary-focus: rgba(21, 157, 204, 0.28);
  --primary-inverse: #061018;
  --background-color: #080d16;
  --color: #f7f9fc;
  --muted-color: #9fb0c4;
}

body {
  background:
    radial-gradient(circle at 12% 10%, rgba(214,181,109,.10), transparent 30rem),
    radial-gradient(circle at 74% 22%, rgba(35,90,185,.18), transparent 34rem),
    linear-gradient(180deg, #070b12 0%, #101829 58%, #070b12 100%) !important;
  color: #f7f9fc !important;
}

nav.container-fluid {
  min-height: 96px;
  padding: 1.2rem clamp(1.4rem, 3vw, 3rem) !important;
  background: rgba(6, 10, 17, .86) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.32);
}

.nav-logo-link {
  min-width: 150px;
  overflow: visible;
}

.nav-logo {
  height: 42px !important;
  width: auto !important;
  transform: scale(1.55);
  transform-origin: left center;
}

nav ul:last-child {
  gap: .35rem;
  align-items: center;
}

nav a:not([role="button"]) {
  color: #d7dfec !important;
  font-weight: 700;
  font-size: 1rem;
}

nav a:not([role="button"]):hover,
nav a.nav-active {
  color: #f2d48a !important;
}

nav a[role="button"] {
  background: #159dcc !important;
  border: 0 !important;
  color: #071018 !important;
  font-weight: 850 !important;
  border-radius: .35rem !important;
  padding: .82rem 1.1rem !important;
  box-shadow: 0 18px 48px rgba(21,157,204,.28) !important;
}

.lang-toggle {
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.07) !important;
  color: #eef4ff !important;
  border-radius: 999px !important;
  padding: .36rem .68rem !important;
  font-weight: 850 !important;
}

main.container {
  padding-top: clamp(5rem, 9vw, 8rem) !important;
  max-width: 1180px;
}

.eyebrow {
  color: #f6d994 !important;
  border-color: rgba(214,181,109,.35) !important;
  background: rgba(214,181,109,.08) !important;
  border-radius: 999px !important;
  padding: .48rem .95rem !important;
  font-size: .78rem !important;
  letter-spacing: .08em !important;
}

h1 {
  max-width: 980px !important;
  font-size: clamp(4.3rem, 8.2vw, 7rem) !important;
  line-height: .9 !important;
  letter-spacing: -.075em !important;
  color: #fff !important;
  margin-top: 1.55rem !important;
  margin-bottom: 1.8rem !important;
}

hgroup h3 {
  max-width: 760px !important;
  color: #8fa1b6 !important;
  font-size: 1.08rem !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

.hero-copy {
  max-width: 820px !important;
  color: #c6d0df !important;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem) !important;
  line-height: 1.6 !important;
  margin-top: 2rem !important;
}

.actions {
  margin-top: 2.2rem !important;
  gap: .9rem !important;
}

.actions a[role="button"],
.actions button {
  border-radius: .35rem !important;
  padding: .9rem 1.2rem !important;
  font-size: 1.05rem !important;
  font-weight: 750 !important;
}

.actions a[role="button"]:not(.secondary-btn) {
  background: #159dcc !important;
  border: 0 !important;
  color: #fff !important;
}

.secondary-btn {
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #edf3fb !important;
}

.metrics {
  margin-top: 3rem !important;
  gap: 1.2rem !important;
}

.metric {
  padding: 1.9rem 1.7rem !important;
  border-radius: 1.35rem !important;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03)) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.20);
}

.metric strong {
  font-size: 2rem !important;
  color: #fff !important;
}

.metric span {
  color: #9fb0c4 !important;
}

figure {
  margin-top: 3.3rem !important;
  border-radius: 1.4rem !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.42) !important;
}

figure img {
  height: 420px !important;
  transform: none !important;
  object-fit: cover !important;
  filter: saturate(.95) contrast(1.08) brightness(.78) !important;
}

figcaption {
  display: none;
}

.cards {
  margin-top: 6rem !important;
  gap: 1.25rem !important;
}

article.service-card {
  min-height: 280px !important;
  padding: 2rem 1.8rem !important;
  border-radius: 1.35rem !important;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 24px 65px rgba(0,0,0,.2);
}

.service-card h3 {
  font-size: 1.35rem !important;
  color: #fff !important;
  letter-spacing: -.05em !important;
}

.service-card p {
  color: #c0cad8 !important;
  font-size: 1.08rem !important;
  line-height: 1.65 !important;
}

.process {
  margin-top: 4.5rem !important;
  border-radius: 1.35rem !important;
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025)) !important;
  border: 1px solid rgba(214,181,109,.18) !important;
}

section[aria-label="Subscribe example"] {
  padding-top: 5rem !important;
}

section[aria-label="Subscribe example"] article {
  border-radius: 1.35rem !important;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    linear-gradient(rgba(5,8,14,.42), rgba(5,8,14,.50)),
    url("https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=1800&q=80") center/cover !important;
}

section[aria-label="Subscribe example"] h2 {
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  color: #fff !important;
}

section[aria-label="Subscribe example"] h3 {
  color: #8296ac !important;
}

#contact-form input,
#contact-form textarea {
  background: rgba(8,12,19,.76) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #fff !important;
  border-radius: .35rem !important;
  font-size: 1rem !important;
}

#contact-submit {
  background: #159dcc !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: .35rem !important;
  font-weight: 750 !important;
  font-size: 1.05rem !important;
}

#cookie-banner {
  background: rgba(6,10,17,.96) !important;
  border-top: 1px solid rgba(214,181,109,.18) !important;
}

.cookie-btn.primary {
  background: #159dcc !important;
  color: #061018 !important;
}

@media (max-width: 900px) {
  nav.container-fluid {
    min-height: 74px;
  }

  .nav-logo {
    height: 34px !important;
    transform: scale(1.45);
  }

  main.container {
    padding-top: 3.5rem !important;
  }

  h1 {
    font-size: clamp(3.25rem, 14vw, 4.8rem) !important;
  }

  .hero-copy {
    font-size: 1.15rem !important;
  }

  .metrics,
  .cards {
    grid-template-columns: 1fr !important;
  }

  article.service-card {
    min-height: auto !important;
  }

  figure img {
    height: 300px !important;
  }

  section[aria-label="Subscribe example"] article {
    min-height: auto;
  }
}