.js .seo-static {
  display: none;
}

.no-js .app-loading {
  display: none;
}

.app-loading {
  min-height: 100svh;
  display: grid;
  place-items: center;
  gap: 1.25rem;
  align-content: center;
  background:
    linear-gradient(135deg, rgba(255, 252, 244, 0.96), rgba(241, 246, 238, 0.96)),
    var(--bg);
  color: var(--g-800);
}

.app-loading img {
  width: min(52vw, 170px);
  height: auto;
}

.app-loading__ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(20, 83, 58, 0.16);
  border-top-color: var(--g-700);
  animation: app-loading-spin 0.9s linear infinite;
}

@keyframes app-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.seo-static {
  min-height: 100vh;
  background:
    radial-gradient(circle at 16% 18%, rgba(28, 88, 66, 0.12), transparent 36%),
    radial-gradient(circle at 82% 20%, rgba(201, 169, 97, 0.16), transparent 32%),
    var(--bg);
  color: var(--fg);
  position: relative;
  z-index: 1;
}

.seo-static__nav,
.seo-static__section,
.seo-static__footer {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

.seo-static__nav {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.seo-static__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  color: var(--g-800);
}

.seo-static__brand img {
  width: 150px;
  height: auto;
}

.seo-static__lang {
  display: flex;
  gap: 0.75rem;
  color: var(--fg-muted);
  font-size: var(--step--1);
}

.seo-static__hero {
  min-height: calc(100vh - 84px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.75fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem);
}

.seo-static__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--g-700);
  font-size: var(--step--1);
  font-weight: 700;
  margin-bottom: 1rem;
}

.seo-static__kicker::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--y-600);
}

.seo-static h1 {
  max-width: 11ch;
  font-family: var(--ff-ar-display);
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 1.08;
  letter-spacing: 0;
  margin: 0 0 1rem;
}

.seo-static__lede {
  max-width: 58ch;
  color: var(--fg-soft);
  font-size: var(--step-1);
  line-height: 1.85;
  margin-bottom: 1.5rem;
}

.seo-static__actions,
.seo-static__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.seo-static__actions {
  margin-bottom: 1.25rem;
}

.seo-static__button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.75rem 1.15rem;
  background: var(--g-700);
  color: #fbf7ed;
  font-weight: 700;
  box-shadow: var(--sh-md);
}

.seo-static__button--ghost {
  background: rgba(255, 255, 255, 0.72);
  color: var(--g-800);
  border: 1px solid rgba(15, 77, 42, 0.16);
}

.seo-static__badge {
  display: inline-flex;
  flex-direction: column;
  min-width: 132px;
  border-radius: 16px;
  padding: 0.8rem 1rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 77, 42, 0.1);
}

.seo-static__badge b {
  color: var(--g-800);
  font-family: var(--ff-en-display);
  font-size: var(--step-2);
  line-height: 1;
}

.seo-static__badge span {
  color: var(--fg-muted);
  font-size: var(--step--1);
}

.seo-static__visual {
  display: grid;
  place-items: center;
}

.seo-static__phone {
  width: min(100%, 330px);
  border-radius: 34px;
  box-shadow: var(--sh-lg);
}

.seo-static__section {
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
}

.seo-static__section h2 {
  font-size: var(--step-4);
  margin-bottom: 1rem;
}

.seo-static__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.seo-static__card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.15rem;
}

.seo-static__card h3 {
  color: var(--g-800);
  font-size: var(--step-1);
  margin-bottom: 0.4rem;
}

.seo-static__card p,
.seo-static__footer {
  color: var(--fg-muted);
}

.seo-static__footer {
  padding-block: 2rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  justify-content: space-between;
}

@media (max-width: 860px) {
  .seo-static__hero,
  .seo-static__grid {
    grid-template-columns: 1fr;
  }

  .seo-static__hero {
    text-align: center;
  }

  .seo-static h1,
  .seo-static__lede {
    margin-inline: auto;
  }

  .seo-static__actions,
  .seo-static__badges {
    justify-content: center;
  }
}