/* Shared technical-atlas treatment for top-level ecosystem pages. */
.core-atlas-page {
  --atlas-ink: #10242b;
  --atlas-muted: #566d77;
  --atlas-line: rgba(113, 148, 160, .42);
  --atlas-accent: #008eaa;
  background-color: #eef6fb;
  background-image:
    linear-gradient(rgba(42, 114, 142, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 114, 142, .055) 1px, transparent 1px),
    radial-gradient(circle at 84% 8%, rgba(87, 193, 220, .18), transparent 27%);
  background-size: 64px 64px, 64px 64px, auto;
  color: var(--atlas-ink);
}

.core-atlas-page .tzp-hero {
  padding-block: clamp(58px, 7vw, 108px);
  background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.78) 56%, rgba(219,242,249,.35) 100%);
  border-bottom: 1px solid var(--atlas-line);
}

.core-atlas-page .tzp-hero .wrap,
.core-atlas-page .tzp-layout {
  width: min(100% - 48px, 1320px);
  max-width: 1320px;
}

.core-atlas-page .tzp-hero h1 {
  max-width: 920px;
  margin-top: 24px;
  color: var(--atlas-ink);
  font-size: clamp(44px, 6vw, 88px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.045em;
}

.core-atlas-page .tzp-lead {
  max-width: 760px;
  margin-top: 28px;
  color: var(--atlas-muted);
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.55;
}

.core-atlas-page .tzp-layout {
  display: block;
  padding-block: clamp(52px, 6vw, 92px);
}

.core-atlas-page .tzp-nav {
  display: none;
}

.core-atlas-page .tzp-content {
  width: 100%;
  max-width: none;
}

.core-atlas-page .tzp-section {
  position: relative;
  margin: 0;
  padding: 0 0 clamp(70px, 8vw, 116px) 112px;
  counter-increment: atlas-section;
}

.core-atlas-page .tzp-content {
  counter-reset: atlas-section;
}

.core-atlas-page .tzp-section::before {
  content: counter(atlas-section, decimal-leading-zero);
  position: absolute;
  top: -10px;
  left: 0;
  color: var(--atlas-accent);
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.04em;
}

.core-atlas-page .tzp-section > h2 {
  max-width: 850px;
  margin: 0;
  color: var(--atlas-ink);
  font-size: clamp(34px, 4.2vw, 60px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.035em;
}

.core-atlas-page .tzp-section > h2::before {
  content: "ТЕХНИЧЕСКИЙ АТЛАС";
  display: block;
  margin-bottom: 18px;
  color: var(--atlas-accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .035em;
}

.core-atlas-page .tzp-section > p {
  max-width: 920px;
  margin: 20px 0 34px;
  color: var(--atlas-muted);
  font-size: 17px;
  line-height: 1.6;
}

.core-atlas-page .tzp-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}

.core-atlas-page .tzp-card {
  --card-image: none;
  position: relative;
  isolation: isolate;
  display: flex;
  grid-column: span 6;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  min-height: 302px;
  padding: 78px 30px 28px;
  overflow: hidden;
  border: 1px solid var(--atlas-line);
  border-radius: 16px;
  background: #e6f0f4;
  box-shadow: 0 12px 30px rgba(24, 59, 72, .045);
  color: var(--atlas-ink);
  text-decoration: none;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.core-atlas-page .tzp-card::before,
.core-atlas-page .tzp-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.core-atlas-page .tzp-card::before {
  z-index: -2;
  background-image: var(--card-image);
  background-position: center;
  background-size: cover;
  transform: scale(1.002);
  transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}

.core-atlas-page .tzp-card::after {
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(247, 251, 252, .99) 0%,
    rgba(247, 251, 252, .96) 36%,
    rgba(247, 251, 252, .74) 56%,
    rgba(247, 251, 252, .22) 79%,
    rgba(247, 251, 252, .04) 100%);
  transition: opacity .3s ease;
}

.core-atlas-page a.tzp-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 142, 170, .55);
  box-shadow: 0 20px 44px rgba(20, 61, 77, .14);
}

.core-atlas-page a.tzp-card:hover::before {
  transform: scale(1.035);
  filter: saturate(1.06) contrast(1.02);
}

.core-atlas-page a.tzp-card:hover::after {
  opacity: .86;
}

.core-atlas-page .tzp-card-num,
.core-atlas-page .tzp-card h3,
.core-atlas-page .tzp-card p {
  position: relative;
  z-index: 1;
}

.core-atlas-page .tzp-card-num {
  position: absolute;
  top: 24px;
  left: 30px;
  color: var(--atlas-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.core-atlas-page .tzp-card h3 {
  max-width: 66%;
  margin: 0;
  color: var(--atlas-ink);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.025em;
}

.core-atlas-page .tzp-card p {
  max-width: 66%;
  margin: 12px 0 0;
  color: #4f6670;
  font-size: 15px;
  line-height: 1.5;
}

.core-atlas-page .tzp-grid--three .tzp-card {
  grid-column: span 4;
  min-height: 286px;
}

.core-atlas--cooperation .tzp-section:first-child .tzp-card:nth-child(-n+2) { grid-column: span 6; }
.core-atlas--cooperation .tzp-section:first-child .tzp-card:nth-child(n+3) { grid-column: span 4; }

.core-atlas-page .tzp-cta {
  min-height: 168px;
  padding: 34px 38px;
  border: 1px solid rgba(85, 143, 163, .48);
  border-radius: 16px;
  background: var(--site-patterned-panel-bg, linear-gradient(120deg, #0d2f40, #07536a 70%, #078aa3));
  box-shadow: 0 20px 52px rgba(16, 56, 72, .16);
  color: #fff;
}

.core-atlas-page .tzp-cta h2,
.core-atlas-page .tzp-cta p { color: #fff; }
.core-atlas-page .tzp-cta p { opacity: .76; }
.core-atlas-page .tzp-button { background: #fff; color: #07536a; }

/* Cooperation */
.core-atlas--cooperation .tzp-section:first-child .tzp-card:nth-child(1) { --card-image: url('../img/core-atlas/cooperation/commercial.webp'); }
.core-atlas--cooperation .tzp-section:first-child .tzp-card:nth-child(2) { --card-image: url('../img/core-atlas/cooperation/government.webp'); }
.core-atlas--cooperation .tzp-section:first-child .tzp-card:nth-child(3) { --card-image: url('../img/core-atlas/cooperation/dealers.webp'); }
.core-atlas--cooperation .tzp-section:first-child .tzp-card:nth-child(4) { --card-image: url('../img/core-atlas/cooperation/project.webp'); }
.core-atlas--cooperation .tzp-section:first-child .tzp-card:nth-child(5) { --card-image: url('../img/core-atlas/cooperation/installation.webp'); }

/* Ecosystem */
.core-atlas--ecosystem .tzp-section:first-child .tzp-card:nth-child(1) { --card-image: url('../img/core-atlas/ecosystem/development.webp'); }
.core-atlas--ecosystem .tzp-section:first-child .tzp-card:nth-child(2) { --card-image: url('../img/core-atlas/ecosystem/production.webp'); }
.core-atlas--ecosystem .tzp-section:first-child .tzp-card:nth-child(3) { --card-image: url('../img/core-atlas/ecosystem/implementation.webp'); }
.core-atlas--ecosystem .tzp-section:first-child .tzp-card:nth-child(4) { --card-image: url('../img/core-atlas/ecosystem/strategy.webp'); }

/* Services */
.core-atlas--services .tzp-section:nth-child(1) .tzp-card:nth-child(1) { --card-image: url('../img/core-atlas/services/integration.webp'); }
.core-atlas--services .tzp-section:nth-child(1) .tzp-card:nth-child(2) { --card-image: url('../img/core-atlas/services/design.webp'); }
.core-atlas--services .tzp-section:nth-child(1) .tzp-card:nth-child(3) { --card-image: url('../img/core-atlas/services/construction.webp'); }
.core-atlas--services .tzp-section:nth-child(1) .tzp-card:nth-child(4) { --card-image: url('../img/core-atlas/services/reconstruction.webp'); }
.core-atlas--services .tzp-section:nth-child(1) .tzp-card:nth-child(5) { --card-image: url('../img/core-atlas/services/partner-sites.webp'); }
.core-atlas--services .tzp-section:nth-child(1) .tzp-card:nth-child(6) { --card-image: url('../img/core-atlas/services/communications.webp'); }
.core-atlas--services .tzp-section:nth-child(2) .tzp-card:nth-child(1) { --card-image: url('../img/core-atlas/services/hr.webp'); }
.core-atlas--services .tzp-section:nth-child(2) .tzp-card:nth-child(2) { --card-image: url('../img/core-atlas/services/sales.webp'); }
.core-atlas--services .tzp-section:nth-child(2) .tzp-card:nth-child(3) { --card-image: url('../img/core-atlas/services/regulations.webp'); }
.core-atlas--services .tzp-section:nth-child(2) .tzp-card:nth-child(4) { --card-image: url('../img/core-atlas/services/campaigns.webp'); }
.core-atlas--services .tzp-section:nth-child(3) .tzp-card:nth-child(1) { --card-image: url('../img/core-atlas/cooperation/commercial.webp'); }
.core-atlas--services .tzp-section:nth-child(3) .tzp-card:nth-child(2) { --card-image: url('../img/core-atlas/cooperation/dealers.webp'); }

/* Digital services */
.core-atlas--digital .tzp-section:first-child .tzp-card:nth-child(1) { --card-image: url('../img/core-atlas/digital/aggregator.webp'); }
.core-atlas--digital .tzp-section:first-child .tzp-card:nth-child(2) { --card-image: url('../img/core-atlas/digital/deal-protection.webp'); }
.core-atlas--digital .tzp-section:first-child .tzp-card:nth-child(3) { --card-image: url('../img/core-atlas/digital/cad.webp'); }
.core-atlas--digital .tzp-section:first-child .tzp-card:nth-child(4) { --card-image: url('../img/core-atlas/digital/account.webp'); }

@media (max-width: 1024px) {
  .core-atlas-page .tzp-hero .wrap,
  .core-atlas-page .tzp-layout { width: min(100% - 36px, 1320px); }
  .core-atlas-page .tzp-section { padding-left: 88px; }
  .core-atlas-page .tzp-card,
  .core-atlas-page .tzp-grid--three .tzp-card,
  .core-atlas--cooperation .tzp-section:first-child .tzp-card:nth-child(n) {
    grid-column: span 6;
  }
  .core-atlas-page .tzp-card { min-height: 286px; padding-inline: 24px; }
  .core-atlas-page .tzp-card-num { left: 24px; }
  .core-atlas-page .tzp-card h3,
  .core-atlas-page .tzp-card p { max-width: 74%; }
}

@media (max-width: 700px) {
  .core-atlas-page .tzp-hero { padding-block: 42px 54px; }
  .core-atlas-page .tzp-hero .wrap,
  .core-atlas-page .tzp-layout { width: min(100% - 28px, 1320px); }
  .core-atlas-page .tzp-hero h1 { margin-top: 18px; font-size: clamp(40px, 12vw, 58px); }
  .core-atlas-page .tzp-lead { margin-top: 20px; font-size: 16px; }
  .core-atlas-page .tzp-layout { padding-block: 44px 70px; }
  .core-atlas-page .tzp-section { padding: 72px 0 72px; }
  .core-atlas-page .tzp-section::before { top: 0; font-size: 48px; }
  .core-atlas-page .tzp-section > h2 { font-size: clamp(32px, 9.5vw, 46px); }
  .core-atlas-page .tzp-section > p { margin-bottom: 26px; font-size: 16px; }
  .core-atlas-page .tzp-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 26px; }
  .core-atlas-page .tzp-card,
  .core-atlas-page .tzp-grid--three .tzp-card,
  .core-atlas--cooperation .tzp-section:first-child .tzp-card:nth-child(n) {
    grid-column: 1;
    min-height: 300px;
    padding: 76px 22px 24px;
  }
  .core-atlas-page .tzp-card-num { top: 22px; left: 22px; }
  .core-atlas-page .tzp-card h3 { max-width: 84%; font-size: 23px; }
  .core-atlas-page .tzp-card p { max-width: 84%; font-size: 14px; }
  .core-atlas-page .tzp-card::after {
    background: linear-gradient(90deg, rgba(247,251,252,.99) 0%, rgba(247,251,252,.94) 52%, rgba(247,251,252,.53) 76%, rgba(247,251,252,.08) 100%);
  }
  .core-atlas-page .tzp-cta { align-items: flex-start; min-height: 0; padding: 28px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .core-atlas-page .tzp-card,
  .core-atlas-page .tzp-card::before,
  .core-atlas-page .tzp-card::after { transition: none; }
}

/* The services page is hydrated into the existing atlas component at runtime. */
.catlas-page--service-suite .catlas-card {
  min-height: 286px;
}

.catlas-page--service-suite .catlas-card {
  background-color: #e7f0f4;
  background-position: center;
  background-size: cover;
}
.catlas-page--service-suite .catlas-card > img { display: none; }
.catlas-page--service-suite .catlas-card::after { z-index: 1; }
.catlas-page--service-suite .catlas-card > .catlas-card-num,
.catlas-page--service-suite .catlas-card > div { position: relative; z-index: 2; }

.catlas-page--service-suite .catlas-card::after {
  background: linear-gradient(90deg,
    rgba(247, 251, 252, .99) 0%,
    rgba(247, 251, 252, .95) 36%,
    rgba(247, 251, 252, .7) 58%,
    rgba(247, 251, 252, .18) 82%,
    rgba(247, 251, 252, .02) 100%);
}

.catlas-page--service-suite .catlas-card:not(.catlas-card--audience) > div {
  width: min(70%, 520px);
}

.catlas-page--service-suite .catlas-card:hover::after {
  background: linear-gradient(90deg,
    rgba(247, 251, 252, .97) 0%,
    rgba(247, 251, 252, .86) 38%,
    rgba(247, 251, 252, .5) 65%,
    rgba(247, 251, 252, .04) 100%);
}

.catlas-page--service-suite .catlas-section:nth-child(1) .catlas-card:nth-child(1) { background-image: url('../img/core-atlas/services/integration.webp'); }
.catlas-page--service-suite .catlas-section:nth-child(1) .catlas-card:nth-child(2) { background-image: url('../img/core-atlas/services/design.webp'); }
.catlas-page--service-suite .catlas-section:nth-child(1) .catlas-card:nth-child(3) { background-image: url('../img/core-atlas/services/construction.webp'); }
.catlas-page--service-suite .catlas-section:nth-child(1) .catlas-card:nth-child(4) { background-image: url('../img/core-atlas/services/reconstruction.webp'); }
.catlas-page--service-suite .catlas-section:nth-child(1) .catlas-card:nth-child(5) { background-image: url('../img/core-atlas/services/partner-sites.webp'); }
.catlas-page--service-suite .catlas-section:nth-child(1) .catlas-card:nth-child(6) { background-image: url('../img/core-atlas/services/communications.webp'); }
.catlas-page--service-suite .catlas-section:nth-child(2) .catlas-card:nth-child(1) { background-image: url('../img/core-atlas/services/hr.webp'); }
.catlas-page--service-suite .catlas-section:nth-child(2) .catlas-card:nth-child(2) { background-image: url('../img/core-atlas/services/sales.webp'); }
.catlas-page--service-suite .catlas-section:nth-child(2) .catlas-card:nth-child(3) { background-image: url('../img/core-atlas/services/regulations.webp'); }
.catlas-page--service-suite .catlas-section:nth-child(2) .catlas-card:nth-child(4) { background-image: url('../img/core-atlas/services/campaigns.webp'); }
.catlas-page--service-suite .catlas-section:nth-child(3) .catlas-card:nth-child(1) { background-image: url('../img/core-atlas/cooperation/commercial.webp'); }
.catlas-page--service-suite .catlas-section:nth-child(3) .catlas-card:nth-child(2) { background-image: url('../img/core-atlas/cooperation/dealers.webp'); }

@media (max-width: 700px) {
  .catlas-page--service-suite .catlas-card { min-height: 286px; }
  .catlas-page--service-suite .catlas-card:not(.catlas-card--audience) > div { width: 84%; }
}
