/* Главная: блоки поверх дизайн-кода страницы iPRO MINI (../ipro-mini/style.css). */

/* hero: the brand name instead of the product name, a still render instead of the scrubbed video */
.home-hero .hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-hero .hero__name { font-size: min(13vw, 15svh, 196px); }
.home-hero .hero__eyebrow { letter-spacing: .22em; }

/* shared section head: title left, lead right */
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; }
.sec-head > div { flex: 1 1 520px; }
.sec-head .lead { flex: 0 1 400px; margin: 0; }
.home-link { margin-top: 24px; color: var(--white); }
.home-link--ink { color: var(--ink); }

/* directions */
.dirs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(24px, 4svh, 48px); }
.dir { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(320px, 52svh, 520px); padding: clamp(20px, 2.4vw, 32px); overflow: hidden; border-radius: var(--radius); background: var(--graphite); color: var(--white); isolation: isolate; }
.dir__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.dir::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10, 10, 11, .82) 0%, rgba(10, 10, 11, .3) 45%, rgba(10, 10, 11, 0) 70%); }
.dir:hover .dir__img { transform: scale(1.04); }
.dir__n { position: absolute; top: clamp(20px, 2.4vw, 32px); left: clamp(20px, 2.4vw, 32px); font-size: 12px; font-weight: 500; letter-spacing: .2em; color: rgba(255, 255, 255, .7); }
.dir__name { font-size: clamp(28px, 2.8vw, 40px); font-weight: 200; letter-spacing: -.03em; line-height: 1.05; }
.dir__text { margin-top: 10px; max-width: 32ch; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .75); }
.dir__go { margin-top: 20px; font-size: 14px; font-weight: 500; }
.dir__go b { display: inline-block; font-weight: 400; transition: translate .3s var(--ease); }
.dir:hover .dir__go b { translate: 4px 0; }
.dir--soon { background: radial-gradient(120% 90% at 30% 20%, #2a2b2d 0%, var(--graphite) 70%); }
.dir--soon::before { display: none; }
.dir--soon .dir__name { color: var(--white); }

/* products: the detail gallery with product cards */
.prods__track { gap: clamp(14px, 1.8vw, 28px); }
.prod { width: clamp(280px, 27vw, 380px); }
.prod__link { display: flex; flex-direction: column; height: 100%; padding: 12px 12px 22px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); transition: border-color .4s var(--ease), box-shadow .7s var(--ease), transform .7s var(--ease); }
.prod__link:hover { border-color: var(--ink); transform: translateY(-4px); box-shadow: 0 28px 56px -32px rgba(0, 0, 0, .28); }
.prod__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: calc(var(--radius) - 8px); background: var(--paper); }
.prod__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.prod__link:hover .prod__img img { transform: scale(1.04); }
.prod__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 10px 0; }
.prod__tags i { padding: 5px 10px; border: 1px solid var(--rule); border-radius: 999px; font-size: 12px; font-style: normal; color: var(--ink-2); }
.prod__name { margin: 14px 10px 0; font-size: clamp(26px, 2.2vw, 32px); font-weight: 300; letter-spacing: -.025em; }
.prod__text { margin: 8px 10px 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.prod__go { margin: auto 10px 0; padding-top: 18px; font-size: 14px; font-weight: 500; }
.prod__go b { display: inline-block; font-weight: 400; transition: translate .3s var(--ease); }
.prod__link:hover .prod__go b { translate: 4px 0; }

/* numbers with the world map */
.world .h2 { font-size: clamp(30px, 3.4vw, 50px); }
.world__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.nums { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(20px, 3vw, 40px); margin: 28px 0 0; padding: 0; }
.nums li { padding: 14px 0 16px; border-top: 1px solid var(--rule); }
.nums b { display: block; font-size: clamp(36px, 4vw, 60px); font-weight: 200; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.nums span { display: block; max-width: 26ch; margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.world__map { width: 100%; height: auto; border-radius: var(--radius); }
/* живая карта сервиса (как на /lab/servis/#geo), светлая: точки суши — маска по map-world-dots.svg, без границ стран.
   Показываем Европу и Азию до Китая (кроп мировой карты), США и Канада — строкой под картой. */
@property --geo-r { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --geo-w { syntax: '<length>'; inherits: false; initial-value: 0px; }
.hmap { position: relative; overflow: hidden; width: 100%; margin: 0; border-radius: var(--radius); background: var(--paper); padding: clamp(18px, 3vw, 36px) 0 0; }  /* margin: 0 — у figure по умолчанию отступы 40px */
.hmap__canvas { --x: 52.51%; --y: 30.68%; --map: url(/assets/img/map-world-dots.svg); position: relative; width: 197%; margin-left: -71.9%; aspect-ratio: 1200 / 320; }
.hmap__dots, .hmap__lit, .hmap__heat, .hmap__wave { position: absolute; inset: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.hmap__dots { background: var(--ink); opacity: .16; -webkit-mask-image: var(--map); mask-image: var(--map); }
.hmap__lit, .hmap__heat, .hmap__wave { -webkit-mask-composite: source-in; mask-composite: intersect; }
.hmap__lit {
  --geo-r: 60vw;
  background: var(--ink);
  -webkit-mask-image: var(--map), radial-gradient(circle at var(--x) var(--y), rgba(0, 0, 0, .7) 0, rgba(0, 0, 0, .34) calc(var(--geo-r) * .2), rgba(0, 0, 0, .1) calc(var(--geo-r) * .55), transparent var(--geo-r));
  mask-image: var(--map), radial-gradient(circle at var(--x) var(--y), rgba(0, 0, 0, .7) 0, rgba(0, 0, 0, .34) calc(var(--geo-r) * .2), rgba(0, 0, 0, .1) calc(var(--geo-r) * .55), transparent var(--geo-r));
}
.hmap--armed .hmap__lit { --geo-r: 0px; }
.hmap--armed.is-on .hmap__lit { --geo-r: 60vw; transition: --geo-r 2.6s cubic-bezier(.25, .7, .25, 1) .15s; }
.hmap__heat {
  --heat: 7vw;
  background: var(--red);
  -webkit-mask-image: var(--map), radial-gradient(circle at var(--x) var(--y), #000 0, rgba(0, 0, 0, .55) calc(var(--heat) * .28), transparent var(--heat));
  mask-image: var(--map), radial-gradient(circle at var(--x) var(--y), #000 0, rgba(0, 0, 0, .55) calc(var(--heat) * .28), transparent var(--heat));
  transition: opacity 1s ease .4s;
}
.hmap--armed .hmap__heat { opacity: 0; }
.hmap--armed.is-on .hmap__heat { opacity: 1; }
.hmap__wave {
  display: none;
  background: var(--red);
  -webkit-mask-image: var(--map), radial-gradient(circle at var(--x) var(--y), transparent calc(var(--geo-w) - 70px), rgba(0, 0, 0, .6) calc(var(--geo-w) - 5px), transparent var(--geo-w));
  mask-image: var(--map), radial-gradient(circle at var(--x) var(--y), transparent calc(var(--geo-w) - 70px), rgba(0, 0, 0, .6) calc(var(--geo-w) - 5px), transparent var(--geo-w));
}
.hmap--armed.is-on .hmap__wave { display: block; animation: hmap-wave 7s cubic-bezier(.3, .2, .4, 1) 2.6s infinite; }
@keyframes hmap-wave { 0% { --geo-w: 0px; opacity: 1; } 62% { --geo-w: 60vw; opacity: .2; } 63%, 100% { --geo-w: 60vw; opacity: 0; } }
.hmap__pt { position: absolute; left: var(--px); top: var(--py); width: 0; height: 0; }
.hmap__pt::before { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 2px 8px rgba(0, 0, 0, .2); transition: scale .5s cubic-bezier(.3, 1.6, .5, 1) calc(1s + var(--i) * 90ms), opacity .3s calc(1s + var(--i) * 90ms); }
.hmap--armed .hmap__pt::before { scale: 0; opacity: 0; }
.hmap--armed.is-on .hmap__pt::before { scale: 1; opacity: 1; }
.hmap__pt::after { content: attr(data-name); position: absolute; left: 10px; top: -12px; padding: 3px 8px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; }
.hmap__pt:hover::after { opacity: 1; }
.hmap__pt > i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; }
.hmap__hub { position: absolute; left: var(--x); top: var(--y); }
.hmap__hub::before, .hmap__hub i { content: ""; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; }
.hmap__hub::before { z-index: 1; background: var(--red); box-shadow: 0 0 0 4px rgba(255, 60, 33, .18), 0 0 22px 5px rgba(255, 60, 33, .4); }
.hmap__hub i { border: 1px solid var(--red); opacity: 0; }
.hmap:not(.hmap--armed) .hmap__hub i, .hmap.is-on .hmap__hub i { animation: hmap-ring 3.3s cubic-bezier(.2, .7, .3, 1) infinite; }
.hmap__hub i:nth-of-type(2) { animation-delay: .3s; }
.hmap__hub i:nth-of-type(3) { animation-delay: .6s; }
@keyframes hmap-ring { 0% { opacity: .9; scale: 1; } 55%, 100% { opacity: 0; scale: 8; } }
.hmap__pin { position: absolute; left: 18px; bottom: 12px; display: grid; gap: 2px; padding: 8px 12px 9px; border-radius: 12px; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .25); white-space: nowrap; }
.hmap__pin b { font-size: 14px; font-weight: 500; }
.hmap__pin small { font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.hmap__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; padding: 14px clamp(18px, 2.4vw, 28px) 18px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-2); }
.hmap__foot b { font-weight: 500; color: var(--ink); }
.hmap__foot a { white-space: nowrap; color: var(--ink); }
.hmap__foot a:hover { color: var(--red); }
@media (max-width: 899px) {
  .hmap { order: -1; }
  .hmap__heat { --heat: 14vw; }
  .hmap__lit, .hmap--armed.is-on .hmap__lit { --geo-r: 120vw; }
  .hmap__pin { left: 10px; bottom: 8px; padding: 5px 9px 6px; border-radius: 9px; }
  .hmap__pin b { font-size: 12px; } .hmap__pin small { font-size: 9px; }
  .hmap__hub::before, .hmap__hub i { left: -4px; top: -4px; width: 8px; height: 8px; }
  .hmap__pt::before { left: -3px; top: -3px; width: 6px; height: 6px; }
}
@media (prefers-reduced-motion: reduce) { .hmap__hub i { animation: none !important; } }


/* production: the assembly-line loop from the product page, without the x-ray screen */
#production .trust__intro { padding-bottom: clamp(40px, 6svh, 72px); }

/* standards */
.pillars__grid { counter-reset: pillar; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); margin: clamp(24px, 4svh, 48px) 0 0; padding: 0; }
.pillars__grid li { counter-increment: pillar; padding: 22px 0 28px; border-top: 1px solid var(--rule); }
.pillars__grid li::before { content: "0" counter(pillar); display: block; margin-bottom: 18px; font-size: 12px; font-weight: 500; letter-spacing: .2em; color: var(--ink-3); }
.pillars__grid h3 { margin: 0; font-size: clamp(22px, 1.9vw, 28px); font-weight: 300; letter-spacing: -.02em; }
.pillars__grid p { margin: 10px 0 0; max-width: 40ch; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* IPLASER */
#iplaser .home-link { margin: 18px 0 0; }

/* rent */
.rent-home__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.rent-cards { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.rent-cards li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 16px; padding: 22px 26px; border: 1px solid var(--rule); border-radius: 20px; background: var(--white); }
.rent-cards span { font-size: 15px; font-weight: 500; }
.rent-cards b { grid-row: span 2; font-size: clamp(30px, 3vw, 44px); font-weight: 200; letter-spacing: -.03em; text-align: right; }
.rent-cards b i { margin-left: 4px; font-size: .4em; font-style: normal; color: var(--ink-3); }
.rent-cards em { font-size: 13px; font-style: normal; color: var(--ink-3); }

/* partners */
.partners { min-height: 0; padding-top: clamp(80px, 14svh, 140px); padding-bottom: clamp(80px, 14svh, 140px); }
.partners__grid { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 64px; }
.partners__grid > div:first-child { flex: 1 1 560px; }
.partners__act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

@media (max-width: 899px) {
  .home-hero .hero__name { font-size: min(15vw, 11svh); }
  .dirs__grid { grid-template-columns: 1fr; }
  .dir { min-height: 260px; }
  .prod { width: 78vw; }
  .world__grid, .rent-home__grid { grid-template-columns: 1fr; }
  .world__map { order: -1; }
  .pillars__grid { grid-template-columns: 1fr; }
  .pillars__grid li { padding: 16px 0 18px; }
  .pillars__grid li::before { margin-bottom: 8px; }
  .rent-cards li { padding: 18px 20px; }
}

/* карточки приподнимаются при наведении — ленте нужен запас сверху и снизу, иначе обрезаются рамка и тень */
#products .gallery__viewport { padding-top: 10px; padding-bottom: 44px; margin-top: calc(clamp(24px, 4svh, 40px) - 10px); margin-bottom: -44px; }