/* Айджи-Принт — project-specific styles loaded after the YOOtheme stylesheet. */

:root {
  --igp-graphite: #1f2326;
  --igp-deep: #111416;
  --igp-mint: #69d8c5;
  --igp-mint-soft: #ddf8f3;
  --igp-paper: #f5f2ec;
  --igp-warm-gray: #d8d2c7;
}

.igp-404-page {
  background:
    radial-gradient(circle at 45% 42%, rgba(105, 216, 197, 0.22), transparent 32rem),
    linear-gradient(135deg, var(--igp-deep), var(--igp-graphite));
  overflow: hidden;
  position: relative;
}

.igp-404-page::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.igp-404-page::after {
  border: 1px dashed rgba(105, 216, 197, 0.18);
  content: "";
  inset: clamp(1rem, 4vw, 4rem);
  pointer-events: none;
  position: absolute;
}

.igp-404-page > * {
  position: relative;
  z-index: 1;
}

.igp-404-logo {
  max-width: min(330px, 70vw);
}

.igp-404-blueprint {
  background:
    linear-gradient(145deg, rgba(245, 242, 236, 0.06), rgba(245, 242, 236, 0.025)),
    var(--igp-graphite);
  border: 1px solid rgba(245, 242, 236, 0.18);
  border-radius: 18px;
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.34);
  color: var(--igp-warm-gray);
  min-height: clamp(360px, 45vw, 520px);
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 3rem);
  position: relative;
}

.igp-404-blueprint::before {
  background:
    linear-gradient(rgba(245, 242, 236, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 242, 236, 0.08) 1px, transparent 1px);
  background-size: 120px 120px;
  content: "";
  inset: 4rem;
  opacity: 0.55;
  position: absolute;
}

.igp-404-blueprint__top,
.igp-404-blueprint__bottom {
  display: flex;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  justify-content: space-between;
  letter-spacing: 0.08em;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}

.igp-404-blueprint__stage {
  align-items: center;
  display: flex;
  min-height: clamp(250px, 31vw, 370px);
  position: relative;
  z-index: 1;
}

.igp-404-big-number {
  color: var(--igp-paper);
  font-size: clamp(8rem, 17vw, 15rem);
  font-weight: 900;
  letter-spacing: -0.12em;
  line-height: 0.8;
  opacity: 0.94;
}

.igp-404-path {
  color: var(--igp-mint);
  inset: auto 1rem 20% 0;
  position: absolute;
  width: min(86%, 650px);
}

.igp-404-measure {
  border-color: rgba(245, 242, 236, 0.28);
  color: var(--igp-warm-gray);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.8rem;
  opacity: 0.72;
  position: absolute;
}

.igp-404-measure--vertical {
  left: 0.5rem;
  top: 45%;
  transform: rotate(-90deg);
}

.igp-404-measure--horizontal {
  bottom: 1rem;
  left: 42%;
}

.igp-404-eyebrow,
.igp-404-contact-line {
  color: var(--igp-mint);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.igp-404-contact-line {
  color: var(--igp-warm-gray);
}

.igp-404-title {
  color: var(--igp-paper);
  font-weight: 850;
  letter-spacing: -0.05em;
}

.igp-404-lead {
  color: var(--igp-warm-gray);
  max-width: 42rem;
}

.igp-404-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.igp-404-quick-links a {
  background: rgba(245, 242, 236, 0.08);
  border: 1px solid rgba(245, 242, 236, 0.12);
  border-radius: 999px;
  color: var(--igp-warm-gray);
  padding: 0.65rem 1rem;
  text-decoration: none;
}

.igp-404-quick-links a:hover,
.igp-404-quick-links a:focus-visible {
  background: rgba(105, 216, 197, 0.14);
  border-color: rgba(105, 216, 197, 0.45);
  color: var(--igp-mint-soft);
}

@media (max-width: 959px) {
  .igp-404-page::after {
    inset: 1rem;
  }

  .igp-404-blueprint {
    min-height: 320px;
  }
}