/* SCAN2GO — «Редизайн A» из Claude Design (проект «Анализ сайта визитки карты»).
   Светлая редакционная раскладка вместо прежней тильдовской ленты на весь экран.
   Тот же файл обслуживает страницу горнолыжного курорта — она отличается
   только фоном (класс .theme-snow на body). */

:root{
  --bg:#faf8f5;          /* фон страницы */
  --panel:#fff;          /* фон секции-«карточки» */
  --navy:#1b1251;
  --coral:#ff645a;
  --coral-dim:#e8544b;
  --coral-soft:#ff8a82;
  --muted:#4a4468;
  --dim:#6b6488;
  --line:rgba(27,18,81,.08);
  --pad:clamp(16px, 4vw, 64px);
  --font:'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* Курорт: холодный фон вместо кремового, остальное общее. */
body.theme-snow{--bg:#f5f7fa}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--navy);
  font:400 17px/1.55 var(--font); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--navy)}
a:hover{color:var(--coral)}
h1,h2,h3{letter-spacing:-.01em; text-wrap:pretty}

/* ---------- шапка ---------- */
.top{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(14px,2vw,28px); padding:14px var(--pad);
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.top__logo{flex:none; display:flex; align-items:center; gap:10px; text-decoration:none}
/* Логотип и QR из исходников — белые: они рисовались для кораллового фона.
   На светлой странице сажаем их на тёмную подложку, а не перекрашиваем. */
.top__logo img{width:44px; background:var(--navy); border-radius:9px; padding:5px}
.top__logo span{
  font:600 12px/1.2 var(--font); letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim);
}
.top__nav{
  display:flex; flex-wrap:wrap; justify-content:center; min-width:0;
  gap:6px clamp(12px,1.6vw,24px);
  font:600 12px/1 var(--font); letter-spacing:.05em; text-transform:uppercase;
}
.top__nav a{text-decoration:none; white-space:nowrap}
.top__right{display:flex; align-items:center; gap:14px; flex:none}
.lang{display:flex; gap:8px}
.lang button{
  border:0; background:none; padding:2px; cursor:pointer; color:var(--dim);
  font:700 12px/1 var(--font); letter-spacing:.06em;
}
.lang button[aria-pressed="true"]{color:var(--navy)}
@media (max-width:760px){ .top__nav{display:none} }

/* ---------- кнопки ---------- */
.btn{
  display:inline-block; padding:15px 26px; border-radius:999px; cursor:pointer;
  text-decoration:none; border:2px solid transparent;
  font:700 13px/1 var(--font); letter-spacing:.08em; text-transform:uppercase;
  transition:background .2s, color .2s;
}
.btn--sm{padding:11px 20px; font-size:12px}
.btn--coral{background:var(--coral); color:#fff}
.btn--coral:hover{background:var(--navy); color:#fff}
.btn--dark{background:var(--navy); color:#fff}
.btn--dark:hover{background:var(--coral); color:#fff}
.btn--out{border-color:var(--navy); color:var(--navy)}
.btn--out:hover{background:var(--navy); color:#fff}
.btn--light{border-color:#fff; color:#fff}
.btn--light:hover{background:#fff; color:var(--navy)}

/* ---------- секции ---------- */
.sec{padding:clamp(48px,7vw,96px) var(--pad)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--navy); color:#fff}
.sec--coral{background:var(--coral); color:#fff}
.wrap{max-width:1200px; margin:0 auto; display:grid; gap:clamp(24px,3vw,40px)}
@media (min-width:1600px){ .wrap{max-width:1440px} }
.wrap--split{grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center}
@media (max-width:900px){ .wrap--split{grid-template-columns:1fr} }
.head{display:grid; gap:10px; max-width:46em}
/* Заголовок по центру секции и карточки, не растянутые по высоте колонки:
   классы стоят в разметке с правок 08.2026, стилей к ним не было — на 1920
   заголовок висел у левого края, а короткие карточки тянулись под соседа. */
.head--center{justify-items:center; text-align:center; margin-inline:auto}
.cards--top{align-items:start}
.kicker{
  margin:0; color:var(--coral);
  font:700 12px/1 var(--font); letter-spacing:.2em; text-transform:uppercase;
}
.sec--dark .kicker{color:var(--coral-soft)}
.sec--coral .kicker{color:#fff; opacity:.85}
.sec h2{margin:0; font-size:clamp(26px,3.4vw,44px); line-height:1.08}
.lead{margin:0; color:var(--muted)}
.sec--dark .lead, .sec--coral .lead{color:inherit; opacity:.9}
.note{margin:0; font-size:14px; color:var(--dim)}
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:15px; color:var(--muted)}
.ticks li{padding-left:18px; position:relative}
.ticks li::before{content:'✓'; position:absolute; left:0; color:var(--coral)}

/* ---------- 1. hero ---------- */
.hero{grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,72px); align-items:center}
@media (max-width:900px){ .hero{grid-template-columns:1fr} }
.hero__text{display:grid; gap:22px; justify-items:start}
.badge{
  padding:6px 14px; border-radius:999px; border:1px solid rgba(27,18,81,.2);
  font:600 12px/1 var(--font); letter-spacing:.08em; text-transform:uppercase;
}
.hero h1{margin:0; font-size:clamp(34px,4.6vw,64px); line-height:1.04; letter-spacing:-.015em}
.hero__lead{margin:0; font-size:clamp(16px,1.4vw,20px); color:var(--muted); max-width:30em}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap}
.stats{margin:8px 0 0; display:flex; gap:clamp(20px,3vw,44px); flex-wrap:wrap}
.stats dt{font:700 26px/1 var(--font)}
.stats dd{margin:4px 0 0; font-size:13px; color:var(--dim)}
.hero__visual{
  margin:0; position:relative; display:grid; place-items:center;
  background:var(--coral); border-radius:28px;
  padding:clamp(24px,3vw,48px) clamp(16px,2vw,32px);
}
/* корпус телефона — рамкой, кадр внутри показываем целиком (см. .ui-grid img) */
.hero__visual img.phone{
  width:min(100%,340px); animation:float 4s ease-in-out infinite;
  border:9px solid var(--navy); border-radius:38px; background:var(--navy);
  filter:drop-shadow(0 30px 40px rgba(27,18,81,.25));
}
@keyframes float{ 50%{transform:translateY(-16px)} }
@media (prefers-reduced-motion:reduce){ .hero__visual img.phone{animation:none} }
.hero__chip{
  position:absolute; left:18px; bottom:18px;
  display:flex; align-items:center; gap:10px;
  background:#fff; border-radius:12px; padding:10px 14px;
  box-shadow:0 10px 30px rgba(27,18,81,.15);
}
.hero__chip img{width:34px; height:34px; background:var(--navy); border-radius:6px; padding:3px}
.hero__chip span{font:600 13px/1.3 var(--font)}
/* Курорт: вместо телефона — панорама склона. */
.hero__scene{
  margin:0; border-radius:28px; overflow:hidden; aspect-ratio:4/3;
  box-shadow:0 26px 60px rgba(27,18,81,.18); background:#dfe7f2;
}
.hero__scene svg{width:100%; height:100%; display:block}

/* ---------- 2. для кого / что на карте ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:1000px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .cards{grid-template-columns:1fr} }
.card{
  background:var(--bg); border:1px solid var(--line); border-radius:18px;
  padding:22px; display:grid; gap:12px; align-content:start;
}
.card h3{margin:0; font-size:19px}
.card__quote{margin:0; font-size:14px; color:var(--coral); font-weight:600}
.card ul{margin:0; padding-left:16px; display:grid; gap:5px; font-size:14px; color:var(--muted)}
.card--link{text-decoration:none; color:inherit; border-color:rgba(255,100,90,.45)}
.card--link:hover{border-color:var(--coral); color:inherit}
.card--link .more{color:var(--coral); font-weight:700; font-size:14px}

/* ---------- 3. шаги ---------- */
.steps{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.steps--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .steps, .steps--4{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .steps, .steps--4{grid-template-columns:1fr} }
.step{
  background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:24px; display:grid; gap:10px; align-content:start;
}
.sec--panel .step{background:var(--bg)}
.step__n{
  width:34px; height:34px; border-radius:50%; background:var(--coral); color:#fff;
  display:grid; place-items:center; font:700 15px/1 var(--font);
}
.step h3, .step b{margin:0; font-size:17px}
.step p, .step span{margin:0; font-size:14px; color:var(--muted)}

/* ---------- 4. геолокация ---------- */
.geo__art{
  display:grid; place-items:center; background:var(--panel);
  border:1px solid var(--line); border-radius:24px; padding:clamp(24px,3vw,48px);
}
.sec--panel .geo__art{background:var(--bg)}
.geo__art svg{width:100%; max-width:420px; height:auto}
@keyframes geoAcc{ 0%{r:62; opacity:.9} 55%,100%{r:22; opacity:.6} }
@keyframes geoSnap{ 0%{transform:translate(-34px,24px)} 55%,100%{transform:none} }
@keyframes chipIn{ 0%,45%{opacity:0; transform:translateY(8px)} 60%,100%{opacity:1; transform:none} }
.geo-acc{animation:geoAcc 3.4s ease-in-out infinite}
.geo-dot{animation:geoSnap 3.4s ease-in-out infinite}
.geo-chip{animation:chipIn 3.4s ease-out infinite}
@media (prefers-reduced-motion:reduce){
  .geo-acc, .geo-dot, .geo-chip{animation:none}
}

/* ---------- 5. живое демо ---------- */
.demo{grid-template-columns:minmax(280px,360px) 1fr; gap:clamp(24px,4vw,56px); align-items:center}
@media (max-width:900px){ .demo{grid-template-columns:1fr} }
.demo__head{display:grid; gap:14px; justify-items:start}
.demo__hints{list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:14px; opacity:.9}
.demo__hints li{padding-left:16px; position:relative}
.demo__hints li::before{content:'→'; position:absolute; left:0; color:var(--coral-soft)}
.demo__frame{
  position:relative; overflow:hidden; border-radius:22px; background:#f3f4fa;
  box-shadow:0 26px 60px rgba(0,0,0,.35); aspect-ratio:16/10;
}
.demo__frame iframe{width:100%; height:100%; border:0; display:block}
.demo__start{
  position:absolute; inset:0; width:100%; border:0; cursor:pointer;
  display:grid; place-content:center; gap:8px; text-align:center;
  background:var(--coral); color:#fff; font-family:var(--font);
}
.demo__start:hover{background:var(--coral-dim)}
.demo__start span{font-size:clamp(18px,2vw,24px); font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.demo__start em{font-style:normal; font-size:13px; opacity:.8}

/* ---------- 6. возможности: мини-демонстрации ---------- */
.feat{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.feat__card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:14px 16px 18px; display:grid; gap:8px; align-content:start;
}
.sec--panel .feat__card{background:var(--bg)}
.feat__art{background:#f2f3f7; border-radius:10px; overflow:hidden; aspect-ratio:2/1}
.feat__art svg{width:100%; height:100%}
.feat__card b{
  justify-self:start; padding:3px 10px; border-radius:999px;
  background:rgba(27,18,81,.08); color:var(--navy);
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
}
.feat__card[data-tag="object"] b{background:var(--coral); color:#fff}
.feat__card h3{margin:0; font-size:16px}
.feat__card p{margin:0; font-size:13.5px; line-height:1.45; color:var(--muted)}
.feat-more{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; font-size:13px}
.feat-more li{
  padding:6px 12px; border-radius:999px; color:var(--muted);
  background:rgba(27,18,81,.06); border:1px solid rgba(27,18,81,.12);
}

/* Анимации карточек крутятся только когда карточка на экране. */
.feat__art *{transform-box:fill-box}
@media (prefers-reduced-motion:reduce){ .feat__card .feat__art *{animation:none !important} }

.a3d__b{fill:#c2c5dd; opacity:0; transform-origin:50% 100%}
.on .a3d__b{animation:rise 2.6s var(--d,0s) ease-in-out infinite}
.a3d__s{fill:none; stroke:var(--coral); stroke-width:3}
@keyframes rise{
  0%{opacity:0; transform:translateY(14px) scaleY(.4)}
  25%,70%{opacity:1; transform:none}
  100%{opacity:0; transform:translateY(14px) scaleY(.4)}
}
.ar__plan{fill:none; stroke:#dcdee9; stroke-width:10; stroke-linecap:round; stroke-linejoin:round}
.ar__line{
  fill:none; stroke:var(--navy); stroke-width:5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:12 10; stroke-dashoffset:300;
}
.on .ar__line{animation:draw 3.2s linear infinite}
.ar__dot{fill:var(--coral); stroke:#fff; stroke-width:3}
.ar__end{fill:none; stroke:var(--coral); stroke-width:4}
.on .ar__end{animation:pulse 1.6s ease-in-out infinite}
@keyframes draw{ from{stroke-dashoffset:300} to{stroke-dashoffset:0} }
@keyframes pulse{ 50%{r:13; opacity:.5} }

.af__p{fill:#d7d9e6}
.af__p--1{fill:#9ea2c4}
.on .af__p--1{animation:floorA 3.4s ease-in-out infinite}
.on .af__p--2{animation:floorB 3.4s ease-in-out infinite}
@keyframes floorA{ 0%,40%{fill:#9ea2c4} 55%,100%{fill:#d7d9e6} }
@keyframes floorB{ 0%,40%{fill:#d7d9e6} 55%,100%{fill:#9ea2c4} }
.af__lift rect{fill:var(--coral)}
.af__arrow{fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round}
.on .af__lift{animation:liftUp 3.4s ease-in-out infinite}
@keyframes liftUp{ 0%,40%{transform:translateY(6px)} 60%,100%{transform:translateY(-6px)} }

.as__field{fill:#fff; stroke:#d5d7e5; stroke-width:2}
.as__typed{fill:var(--navy); font:600 17px var(--font)}
.as__mask{fill:#fff}
.on .as__mask{animation:type 3.6s steps(9) infinite}
@keyframes type{ 0%{width:240px} 45%,100%{width:0} }
.as__hits rect{fill:#e3e5ef; opacity:0}
.on .as__hits rect{animation:fadeUp 3.6s var(--d,0s) ease-out infinite}
.as__cat{fill:var(--navy); font:500 11px var(--font); opacity:0}
.on .as__cat{animation:fadeUp 3.6s ease-out infinite}
@keyframes fadeUp{
  0%,45%{opacity:0; transform:translateY(6px)}
  60%,90%{opacity:1; transform:none}
  100%{opacity:0}
}

.ag__plan{fill:none; stroke:#dcdee9; stroke-width:10; stroke-linecap:round; stroke-linejoin:round}
.ag__acc{fill:rgba(255,100,90,.2); stroke:var(--coral); stroke-width:2}
.on .ag__acc{animation:geoAccSm 3.4s ease-in-out infinite}
@keyframes geoAccSm{ 0%{r:46; opacity:.85} 55%,100%{r:16; opacity:.6} }
.ag__me circle{fill:var(--coral); stroke:#fff; stroke-width:3}
.on .ag__me{animation:geoSnapSm 3.4s ease-in-out infinite}
@keyframes geoSnapSm{ 0%{transform:translate(-26px, 18px)} 55%,100%{transform:none} }
.ag__chip rect{fill:var(--navy)}
.ag__chip text{fill:#fff; font:700 12px var(--font); text-anchor:middle}
.on .ag__chip{animation:fadeUp 3.4s ease-out infinite}

.af2__me{fill:var(--coral); stroke:#fff; stroke-width:3}
.af2__wave{fill:none; stroke:var(--navy); stroke-width:2}
.on .af2__wave{animation:wave 2.4s ease-out infinite}
@keyframes wave{ from{r:8; opacity:.9} to{r:64; opacity:0} }
.af2__pin circle{fill:var(--navy)}
.af2__pin text{fill:#fff; font:700 11px var(--font); text-anchor:middle}
.on .af2__pin{animation:blink 2.4s var(--d,0s) ease-in-out infinite}
.af2__pin--near circle{fill:var(--coral); stroke:#fff; stroke-width:3}
@keyframes blink{ 0%,100%{opacity:.55} 50%{opacity:1} }

.aq__kiosk{fill:#dfe1ee}
.aq__code rect:first-child{fill:var(--navy)}
.aq__m{fill:#fff}
.on .aq__code{animation:pop 4s ease-out infinite}
@keyframes pop{ 0%,15%{opacity:0; transform:scale(.7)} 30%,100%{opacity:1; transform:none} }
.aq__phone rect{fill:#fff; stroke:#c9cbe0; stroke-width:2}
.on .aq__phone{animation:slideIn 4s ease-out infinite}
@keyframes slideIn{
  0%,40%{opacity:0; transform:translateX(30px)}
  60%,100%{opacity:1; transform:none}
}
.aq__way{fill:none; stroke:var(--coral); stroke-width:4; stroke-linecap:round;
  stroke-dasharray:120; stroke-dashoffset:120}
.on .aq__way{animation:drawWay 4s 1.6s ease-out infinite}
@keyframes drawWay{ 0%{stroke-dashoffset:120} 40%,100%{stroke-dashoffset:0} }

.az__zone{fill:rgba(27,18,81,.08); stroke:#9ea2c4; stroke-width:2; stroke-dasharray:6 6}
.az__me{fill:var(--coral); stroke:#fff; stroke-width:3}
.on .az__me{animation:walk 4s ease-in-out infinite}
@keyframes walk{ 0%{transform:translateX(0)} 45%,100%{transform:translateX(120px)} }
.az__tip rect{fill:var(--navy)}
.az__tip text{fill:#fff; font:600 13px var(--font)}
.on .az__tip{animation:tip 4s ease-out infinite}
@keyframes tip{
  0%,45%{opacity:0; transform:translateY(-12px)}
  60%,92%{opacity:1; transform:none}
  100%{opacity:0}
}

.ah__plan rect{fill:#dfe1ee}
.ah__spot{fill:var(--coral); opacity:0}
.on .ah__spot{animation:heat 3s var(--d,0s) ease-in-out infinite}
@keyframes heat{ 0%,100%{opacity:0; transform:scale(.6)} 50%{opacity:.75; transform:none} }

.am__field{fill:#fff; stroke:#d5d7e5; stroke-width:2}
.am__q{fill:var(--navy); font:600 15px var(--font)}
.am__zero rect{fill:var(--navy)}
.am__zero text{fill:#fff; font:700 15px var(--font); text-anchor:middle}
.on .am__zero{animation:blink 2.6s ease-in-out infinite}
.am__rows rect{fill:#e3e5ef; opacity:0}
.on .am__rows rect{animation:fadeUp 3.4s var(--d,0s) ease-out infinite}
.am__lbl{fill:var(--navy); font:500 11px var(--font); opacity:0}
.on .am__lbl{animation:fadeUp 3.4s ease-out infinite}

/* ---------- 7. презентация ---------- */
.deck{position:relative; max-width:1000px; margin-inline:auto; width:100%; min-width:0}
.deck__track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:20px; scrollbar-width:none}
.deck__track::-webkit-scrollbar{display:none}
.slide{
  flex:0 0 100%; scroll-snap-align:center;
  background:var(--panel); border:1px solid var(--line); border-radius:20px;
  padding:clamp(22px,4vw,44px); min-height:min(52svh,420px);
  display:grid; align-content:start; gap:14px;
  box-shadow:0 20px 50px rgba(27,18,81,.08);
}
.slide__n{font-size:12px; letter-spacing:.22em; color:var(--coral); font-weight:700}
.slide h3{margin:0; font-size:clamp(22px,3vw,36px); line-height:1.06; text-transform:uppercase}
.slide p{margin:0; font-size:clamp(14px,1.4vw,18px); color:var(--muted); max-width:44em}
.slide ul{margin:0; padding-left:18px; display:grid; gap:7px; font-size:clamp(14px,1.3vw,17px); color:var(--muted)}
.slide li::marker{color:var(--coral)}
.deck__nav{
  position:absolute; top:45%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:var(--navy); color:#fff; font-size:26px; line-height:1;
}
.deck__nav--prev{left:-22px}
.deck__nav--next{right:-22px}
@media (max-width:1100px){ .deck__nav{display:none} }
.deck__dots{display:flex; gap:7px; justify-content:center; padding-top:14px}
.deck__dots button{
  width:8px; height:8px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(27,18,81,.25);
}
.deck__dots button[aria-current="true"]{background:var(--navy)}

/* ---------- 8. аналитика ---------- */
.rows{display:grid; gap:12px}
.row{
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  border-radius:16px; padding:18px 22px; display:grid; gap:4px;
}
.row b{font-size:16px}
.row span{font-size:14px; opacity:.9}

/* ---------- 9. заявка ---------- */
.form{
  background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:28px; display:grid; gap:12px; box-shadow:0 24px 60px rgba(27,18,81,.08);
}
.form b{font-size:18px}
.form__note{font-size:13.5px; color:var(--dim); margin-top:-6px}
.form input{
  border:1px solid rgba(27,18,81,.15); background:var(--bg);
  padding:14px 16px; border-radius:10px;
  font:400 15px/1.2 var(--font); color:var(--navy);
}
.form input:focus-visible{outline:2px solid var(--coral); outline-offset:1px}
.form input:user-invalid{outline:2px solid var(--coral)}
.form button{
  margin-top:4px; padding:16px; border:0; border-radius:10px; cursor:pointer;
  background:var(--coral); color:#fff;
  font:700 13px/1 var(--font); letter-spacing:.1em; text-transform:uppercase;
}
.form button:hover{background:var(--navy)}
.form__msg{margin:0; min-height:1.2em; font-size:14px; text-align:center; color:var(--muted)}
.contacts{font-style:normal; font-size:14px; color:var(--dim); display:grid; gap:2px}
.contacts a{text-decoration:none}
.contacts a:first-child{font-weight:700}

/* ---------- подвал ---------- */
.foot{
  padding:24px var(--pad); border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-size:13px; color:var(--dim); flex-wrap:wrap;
}
.foot img{width:36px; background:var(--navy); border-radius:8px; padding:4px}


/* ---------- коллаж интерфейса (правки 08.2026) ----------
   Четыре телефона в ряд; на узком экране — горизонтальная лента со снапом,
   чтобы скриншоты не сжимались до нечитаемости.
   Корпус телефона рисуем рамкой здесь, а не в картинке: скриншоты
   (scripts/make_shots.py) кладём целиком, иначе правый край интерфейса
   срезается под ширину корпуса. */
.ui-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  align-items: start; margin-top: 34px;
}
.ui-grid img {
  width: 100%; height: auto; display: block;
  border: 8px solid var(--navy); border-radius: 34px; background: var(--navy);
  box-shadow: 0 24px 48px rgba(27, 18, 81, .18);
}
@media (max-width: 900px) {
  .ui-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
             padding-bottom: 12px; }
  .ui-grid img { flex: 0 0 62%; scroll-snap-align: center; }
}

/* герой: две плитки статистики растягиваем на прежнюю ширину */
.stats--two { grid-template-columns: repeat(2, 1fr); }

/* карточка «Напрямок руху»: точка с конусом направления едет туда-обратно */
.ad__dot circle { fill: var(--coral, #FF645A); }
.ad__cone { fill: rgba(255, 100, 90, .28); }