/* Фон первого экрана: сетка, график роста, объёмы и мягкий свет */
.hero > .wrap { position: relative; z-index: 1; }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(216, 190, 138, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 190, 138, .07) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 60% 45%, #000 20%, transparent 80%);
          mask-image: radial-gradient(ellipse 75% 70% at 60% 45%, #000 20%, transparent 80%);
}
.hero-chart { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 78%; }
.hb-bars rect { opacity: .06; transform-origin: bottom; transform-box: fill-box; animation: hb-bar 1.2s cubic-bezier(.22,1,.36,1) both; }
.hb-bars rect:nth-child(3n) { animation-delay: .1s; } .hb-bars rect:nth-child(3n+1) { animation-delay: .2s; }
/* Рост один раз при открытии: линия и заливка идут синхронно, затем остаются */
.hb-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px rgba(216,190,138,.45));
  animation: hb-grow 3.6s .25s cubic-bezier(.45, 0, .2, 1) forwards;
}
.hb-area {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: hb-area-grow 3.6s .25s cubic-bezier(.45, 0, .2, 1) forwards;
}
@keyframes hb-grow {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
@keyframes hb-area-grow {
  from { clip-path: inset(0 100% 0 0); opacity: 0; }
  to   { clip-path: inset(0 0 0 0); opacity: .7; }
}
@keyframes hb-bar { from { transform: scaleY(0); } }
.hero-spot {
  position: absolute; width: 640px; height: 640px; border-radius: 50%; left: 30%; top: -30%;
  background: radial-gradient(circle, rgba(216, 190, 138, .10), transparent 65%);
  animation: hb-drift 18s ease-in-out infinite alternate;
}
@keyframes hb-drift { from { transform: translate(-12%, 0); } to { transform: translate(28%, 18%); } }
/* Затемнение снизу, чтобы цифры читались */
.hero-bg::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(11, 17, 30, .55)); }
@media (max-width: 900px) { .hero-chart { height: 60%; } .hero-grid { background-size: 48px 48px; } }
@media (prefers-reduced-motion: reduce) {
  .hb-line { stroke-dashoffset: 0; animation: none; }
  .hb-area { opacity: .7; clip-path: none; animation: none; }
  .hb-bars rect, .hero-spot { animation: none; }
}
/* Меню в одну строку */
.nav a { white-space: nowrap; }
@media (max-width: 1360px) { .nav a { padding: 10px 9px; font-size: 14px; } .head-right { gap: 10px; } }

/* Тёмный фон с графиком на страницах документов и контактов */
.hero { position: relative; overflow: hidden; color: #fff; }
.doc-hero > .wrap { padding: 64px 24px 56px; text-align: left; }
.doc-hero .crumb { margin: 0 0 14px; font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--a-1, #D8BE8A); text-align: left; }
.doc-hero h1 { margin: 0 0 14px; color: #fff; font-size: 40px; line-height: 1.15; max-width: 860px; text-align: left; }
.doc-hero .updated { margin: 0; color: rgba(255, 255, 255, .6); font-size: 14px; text-align: left; }
.doc-hero .hero-chart { height: 70%; }
.doc { background: transparent; padding-top: 40px !important; }
.doc-body { background: #fff; border-radius: 16px; border: 1px solid #E7E2D7; padding: 36px 40px 40px; box-shadow: 0 20px 50px -30px rgba(14, 21, 37, .25); }
.doc-body > :first-child { margin-top: 0; }
.contact-hero { min-height: calc(100vh - 72px - 130px); display: flex; align-items: center; padding: 64px 0 !important; }
.contact-hero > .wrap { width: 100%; }
.contact-hero .info { background: rgba(255, 255, 255, .97); }
@media (max-width: 700px) {
  .doc-hero > .wrap { padding: 44px 20px 40px; }
  .doc-hero h1 { font-size: 26px; }
  .doc-body { padding: 24px 20px 28px; border-radius: 14px; }
}