/* Страница /stores/: магазины, построенные вокруг того, что продают.
   Отдельный файл: страница не грузит three.js, site.js и большой style.css главной.
   Цвета, линии, кривая смягчения и окно браузера повторяют главную дословно (сверено документером
   20 октября 2026): это тот же мир, а не новый. Своё у страницы только --wrap 1240 и --ease-in-out. */

:root{
  --canvas:#090a0d; --panel:#141821; --paper:#f3f4f7; --card:#fbfbfd;
  --ink:#0f1218; --ink-2:#5b6170; --ink-3:#666c7c;
  --text:#f5f6fa; --text-2:#a3a8b6; --text-3:#7c8292;
  --accent:#1f6ae6; --accent-hover:#185cd0; --accent-hi:#4c8dff;
  --line-dark:rgba(255,255,255,.1); --line-light:rgba(15,18,24,.1);
  --font-display:"Wix Madefor Display","Helvetica Neue",Arial,sans-serif;
  --font-text:"Wix Madefor Text","Helvetica Neue",Arial,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  --nav-h:64px; --wrap:1240px; --gutter:clamp(1.25rem,4vw,2.5rem);
  /* Пузыри: те же переменные, что на главной */
  --ease:cubic-bezier(.22,.61,.36,1); --spring:cubic-bezier(.34,1.56,.64,1); --label-2:.8125rem;
  --film-1:#ffb6de; --film-2:#c7b8ff; --film-3:#9fe6ff; --film-4:#b9ffdd;
  --brand-instagram:#dd2a7b; --brand-instagram-edge:linear-gradient(135deg,#f58529,#dd2a7b 38%,#8134af 70%,#515bd4);
  --brand-telegram:#229ed9; --brand-whatsapp:#25d366; --brand-linkedin:#0a66c2; --brand-email:#e5484d;
  --gut-l:max(var(--gutter),env(safe-area-inset-left)); --gut-r:max(var(--gutter),env(safe-area-inset-right));
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:#2c3242 var(--canvas);background:var(--canvas)}
body{margin:0;background:var(--canvas);color:var(--text);font:400 1.0625rem/1.6 var(--font-text);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
::selection{background:rgba(31,106,230,.35);color:#fff}
.sec--light ::selection{background:rgba(31,106,230,.22);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px;border-radius:6px}
.sec--light :focus-visible{outline-color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut-r) 0 var(--gut-l)}
.skip{position:absolute;left:1rem;top:-3.5rem;z-index:100;padding:.6rem 1rem;background:var(--accent);color:#fff;border-radius:999px;text-decoration:none;transition:top .3s var(--ease-out)}
.skip:focus{top:1rem}

/* ---------- Свет сквозь стекло, как на главной ----------
   Фон всего сайта по решению заказчика от 23 сентября: каустика. Слой и пятна те же, что
   в style.css главной, расчёт в stores.js. Пятно 64vmax ДОСЛОВНО повторено в POOL_S скрипта.
   Мягкий край пятна задан маской: это спад света, а не цветной градиент. */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env__base,.env__lit{position:absolute;left:0;top:0;width:100%;height:100%}
.env canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.env__base{opacity:0;transition:opacity 1.6s var(--ease-out)}
.has-light .env__base{opacity:.26}
.env__pool{position:absolute;left:0;top:0;width:64vmax;height:64vmax;overflow:hidden;opacity:0;transition:opacity 1.6s var(--ease-out);will-change:transform;
  -webkit-mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.62) 40%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.62) 40%,rgba(0,0,0,0) 100%)}
.has-light .env__pool{opacity:1}
.env__pool .env__lit{width:100vw;height:100vh;will-change:transform}
.grain{position:fixed;inset:0;z-index:45;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px 220px}
main,footer{position:relative;z-index:1}
body.modal-open{overflow:hidden}
/* Вкладка скрыта: пузыри и плёнки стоят */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}   /* шапку сюда не класть: её position:fixed слабее по весу */

/* Шапка: сплошная, без стекла. Короткая страница, один путь: домой или написать. */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav-h);background:rgba(9,10,13,.94);border-bottom:1px solid var(--line-dark)}
.nav__inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut-r) 0 var(--gut-l)}
.nav__brand{display:flex;align-items:center;gap:.6rem;min-height:44px;font:700 1.02rem/1 var(--font-display);letter-spacing:-.01em;text-decoration:none}
.nav__mark{width:28px;height:28px;flex:none}
.nav__crumb{color:var(--text-3);font:500 .9375rem/1 var(--font-text);margin-inline-start:.15rem}

/* Кнопки как на главной: пилюля, белая на тёмном, синяя на бумаге */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.8rem 1.35rem;border-radius:999px;font:500 .9375rem/1 var(--font-text);text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .16s var(--ease-out),background-color .2s,color .2s,border-color .2s}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--text);color:var(--ink)}
.btn--ghost{color:var(--text);border-color:rgba(255,255,255,.22)}
.btn--lg{padding:1rem 1.6rem;font-size:1.0625rem}
.sec--light .btn--primary{background:var(--accent);color:#fff}
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{background:#fff}
  .btn--ghost:hover{border-color:rgba(255,255,255,.5)}
  .sec--light .btn--primary:hover{background:var(--accent-hover)}
}
.ico{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tlink{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;color:var(--text-2);text-decoration:underline;text-decoration-color:rgba(255,255,255,.28);text-underline-offset:.28em;font-weight:500}
.sec--light .tlink{color:var(--ink-2);text-decoration-color:rgba(15,18,24,.28)}
@media (hover:hover) and (pointer:fine){
  .tlink:hover{color:var(--text);text-decoration-color:currentColor}
  .sec--light .tlink:hover{color:var(--ink)}
}

/* Окно браузера: повтор .work__frame главной, плюс настоящий адрес магазина в полоске */
.win{margin:0;position:relative}
.win__frame{position:relative;border-radius:18px;overflow:hidden;background:var(--panel);box-shadow:0 30px 80px rgba(0,0,0,.45)}
/* Край окна поверх содержимого: волосяная линия и блик сверху, свет падает сверху, как в шапке.
   Тень та же, что у окон на главной: на свете сквозь стекло она читается глубиной, а на ровной
   чёрной сцене без света читалась тёмным прямоугольником. */
.win__frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.07)}
.win__bar{position:relative;display:flex;align-items:center;gap:6px;height:28px;padding:0 12px;background:#161a24;border-bottom:1px solid rgba(255,255,255,.06)}
.win__bar i{width:9px;height:9px;border-radius:50%;background:#2c3242}
.win__bar i:nth-child(1){background:#ff6058}.win__bar i:nth-child(2){background:#ffbd2e}.win__bar i:nth-child(3){background:#29c840}
.win__url{position:absolute;inset:0 76px;display:block;text-align:center;font:500 .75rem/28px var(--font-text);color:var(--text-3);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win__view{position:relative;aspect-ratio:16/10;background:#11141b}
.win__view>img,.win__view>picture,.win__view>picture img,.win__view>video,.win__view>canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.win__view>video,.win__view>canvas{opacity:0;transition:opacity .3s var(--ease-out)}
.win__view.is-live>canvas{opacity:1}
/* Кадр прогулки рисует канвас (stores.js), видео только отдаёт кадры */
.win__view.has-canvas.is-live>video{opacity:0}
/* Запасной путь без видео: четыре кадра пути, смена растворением 0.45 с */
.win__still,.win__still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.win__still{opacity:0;transition:opacity .45s var(--ease-out)}
.win__still.is-on{opacity:1}
.win__view.is-live>video{opacity:1}
.win__cap{margin:.9rem .2rem 0;color:var(--text-3);font-size:.9375rem;line-height:1.45}
.win__view--wide{aspect-ratio:16/9}
.win__cap a{color:var(--text-2);text-decoration:underline;text-decoration-color:rgba(255,255,255,.28);text-underline-offset:.25em}

/* ===== Прогулка Celeste. По умолчанию (без скрипта и при reduced motion) это обычный
   поток: вступление, окно с первым кадром, три остановки с их кадрами. Скрипт включает
   .walk.is-scrub: длинная секция, липкая сцена, видео идёт за прокруткой. ===== */
.walk{position:relative;padding:calc(var(--nav-h) + clamp(2.5rem,7vw,5rem)) 0 clamp(4rem,9vw,7rem)}
.walk__stage{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut-r) 0 var(--gut-l);display:grid;gap:clamp(2rem,4vw,3.5rem)}
.walk__intro{max-width:34rem}
.walk h1{font:800 clamp(2.4rem,4vw,3.75rem)/1 var(--font-display);letter-spacing:-.035em;margin:0 0 1.25rem;text-wrap:balance}
.walk__lede{font-size:clamp(1.0625rem,1.4vw,1.25rem);color:var(--text-2);margin:0 0 1.75rem;max-width:30rem}
.walk__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem}
.walk__win{max-width:56rem}
.walk__notes{list-style:none;margin:0;padding:0;display:grid;gap:clamp(2.5rem,6vw,4rem)}
.note h2{font:800 clamp(1.7rem,2.9vw,2.6rem)/1.05 var(--font-display);letter-spacing:-.03em;margin:0 0 .85rem;text-wrap:balance}
.note p{margin:0;color:var(--text-2);font-size:clamp(1.0625rem,1.3vw,1.1875rem);max-width:34rem}
.note__still{margin-top:1.25rem;max-width:44rem}

/* Широкий экран: вступление слева, окно справа, остановки занимают место вступления */
@media (min-width:1025px) and (min-aspect-ratio:1/1){
  .walk__stage{grid-template-columns:minmax(0,38fr) minmax(0,54fr);align-items:center}
  .walk__intro{grid-column:1;grid-row:1}
  .walk__win{grid-column:2;grid-row:1}
  .walk__notes{grid-column:1/-1}
}
/* Без движения на широком экране каждая остановка повторяет композицию первого экрана:
   текст слева, кадр справа, те же доли колонок. Пустые ряды сверху и снизу держат
   заголовок и абзац вместе посередине высоты кадра. */
@media (min-width:1025px) and (min-aspect-ratio:1/1){
  .walk:not(.is-scrub) .walk__notes{gap:clamp(3rem,6vw,5rem);margin-top:clamp(1rem,3vw,2rem)}
  .walk:not(.is-scrub) .note{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,54fr);grid-template-rows:1fr auto auto 1fr;column-gap:clamp(2rem,4vw,3.5rem)}
  .walk:not(.is-scrub) .note>h2{grid-column:1;grid-row:2}
  .walk:not(.is-scrub) .note>p{grid-column:1;grid-row:3}
  .walk:not(.is-scrub) .note__still{grid-column:2;grid-row:1/-1;max-width:none;margin:0}
}

/* Телефон: окно телефона и телефонная запись. Порог 720 тот же, что у <source media> в разметке
   и у PHONE_MQ в stores.js: менять тройкой. */
@media (max-width:720px){
  .walk .win__frame{border-radius:30px}
  .walk .win__bar{height:28px;justify-content:center}
  .walk .win__bar i{display:none}
  .walk .win__url{inset:0 5px}
  .walk .win__view{aspect-ratio:540/1168}
  .walk__win{max-width:17.5rem;width:100%;justify-self:center}
  .note__still{max-width:17.5rem;margin-inline:auto}
}

/* Режим прокрутки */
.walk.is-scrub{height:560vh;padding:0}
.walk.is-scrub .walk__stage{position:sticky;top:0;height:100vh;height:100svh;padding-top:calc(var(--nav-h) + 1.5rem);padding-bottom:1.5rem;overflow:hidden;align-content:center}
.walk.is-scrub .note__still{display:none}
.walk.is-scrub .walk__notes{grid-column:1;grid-row:1;align-self:center;position:relative;display:block}
/* Подписи остаются в дереве доступности все три: экранный диктор читает их по порядку,
   а глазу видна одна. Вход медленнее выхода: 480 мс против 220. */
.walk.is-scrub .note{position:absolute;left:0;right:0;top:50%;opacity:0;pointer-events:none;transform:translate3d(0,calc(-50% + 14px),0);filter:blur(6px);
  transition:opacity .22s var(--ease-out),transform .22s var(--ease-out),filter .22s var(--ease-out)}
.walk.is-scrub .note.is-on{opacity:1;pointer-events:auto;transform:translate3d(0,-50%,0);filter:blur(0);
  transition:opacity .48s var(--ease-out),transform .48s var(--ease-out),filter .48s var(--ease-out)}
/* Окно на шаге вперёд растёт влево на шестую долю отступа: подписи держатся от него на 3rem */
@media (min-width:1025px) and (min-aspect-ratio:1/1){.walk.is-scrub .walk__win{transform-origin:100% 50%}.walk.is-scrub .note{right:3rem}}
.walk.is-scrub .walk__intro,.walk.is-scrub .walk__win{will-change:transform,opacity}
/* Подписи лежат поверх сцены и в покое прозрачны: клики проходят к ссылке под окном */
.walk.is-scrub .walk__notes{pointer-events:none}
.walk__progress{display:none}
.walk.is-scrub .walk__progress{display:block;position:absolute;left:var(--gut-l);right:var(--gut-r);bottom:.75rem;height:2px;background:var(--line-dark);border-radius:2px;overflow:hidden;opacity:0}
.walk__progress i{display:block;height:100%;width:100%;background:rgba(255,255,255,.55);transform-origin:left;transform:scaleX(0)}

/* Прокрутка на телефоне и планшете стоя: окно сверху, остановки снизу */
@media (max-width:1024.98px),(max-aspect-ratio:999/1000){
  .walk.is-scrub{height:520vh}
  .walk.is-scrub .walk__stage{grid-template-rows:auto minmax(0,1fr);align-content:start;gap:1.25rem}
  .walk.is-scrub .walk__intro{grid-row:1;grid-column:1}
  .walk.is-scrub .walk__win{grid-row:2;grid-column:1;align-self:start;justify-self:center;transform-origin:50% 0;
    width:min(100%,calc((100svh - var(--nav-h) - 3rem - 13.5rem - 7.5rem) * 1.6))}
  .walk.is-scrub .walk__notes{grid-row:2;grid-column:1;align-self:end;min-height:13.5rem}
  .walk.is-scrub .note{top:auto;bottom:1.25rem;transform:translate3d(0,14px,0)}
  .walk.is-scrub .note.is-on{transform:translate3d(0,0,0)}
  .walk.is-scrub .note h2{font-size:clamp(1.5rem,6.4vw,2rem)}
  .walk.is-scrub .note p{font-size:1rem}
}
/* Телефон в режиме прокрутки: окно по оставшейся высоте, под ним только ссылка на живой магазин.
   Слагаемые: поля сцены 3rem, подписи 12rem, зазор 1.25rem, ссылка 3.25rem, полоска окна 28px. */
@media (max-width:720px){
  .walk.is-scrub .walk__notes{min-height:12rem}
  .walk.is-scrub .walk__win{width:min(17.5rem,calc((100svh - var(--nav-h) - 3rem - 12rem - 1.25rem - 3.25rem - 28px) * .4623))}
  .walk.is-scrub .win__cap{margin-top:.5rem}
  .walk.is-scrub .win__cap-text{display:none}
}
/* Широкий низкий экран: окно ограничено по высоте, чтобы полоска и подпись влезали целиком */
@media (min-width:1025px) and (min-aspect-ratio:1/1){
  .walk.is-scrub .walk__win{justify-self:end;width:min(100%,calc((100svh - var(--nav-h) - 3rem - 4.5rem) * 1.6))}
}

/* ===== Пузыри соцсетей: перенесены с главной ДОСЛОВНО (style.css, «Пузыри с соцсетями» и края),
   менять парой. Свои у страницы только поле вокруг вступления и правило показа ниже. ===== */
.social-field{position:absolute;inset:0;pointer-events:none;z-index:3}
.bubble{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);pointer-events:auto;display:block;border:0;padding:0;background:none;cursor:pointer;text-decoration:none;color:#fff;font:inherit;transform:translate3d(calc(var(--px,0)*var(--d,.5)*26px),calc(var(--py,0)*var(--d,.5)*18px),0);transition:transform .7s var(--ease-out);-webkit-tap-highlight-color:transparent;border-radius:50%}
.bubble__float{display:block;width:100%;height:100%;animation:bubble-float var(--dur,9s) ease-in-out var(--del,0s) infinite alternate}
@keyframes bubble-float{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(var(--fx,6px),var(--fy,-14px)) rotate(3deg)}100%{transform:translate(calc(var(--fx,6px)*-.6),calc(var(--fy,-14px)*-.5)) rotate(-2deg)}}
.bubble__body{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 22%,rgba(255,255,255,.04) 46%,rgba(255,255,255,.1) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),inset 0 -8px 18px rgba(255,255,255,.12),inset 0 10px 24px rgba(255,255,255,.06),0 18px 40px rgba(0,0,0,.3);transition:transform .5s var(--spring),box-shadow .5s}
.bubble__film{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from var(--rot,180deg),var(--film-1),var(--film-2),var(--film-3),var(--film-4),var(--film-1));opacity:.42;-webkit-mask:radial-gradient(circle at 50% 50%,transparent 56%,#000 76%,#000 92%,transparent 100%);mask:radial-gradient(circle at 50% 50%,transparent 56%,#000 76%,#000 92%,transparent 100%);animation:film-turn 14s linear infinite}
@keyframes film-turn{to{transform:rotate(360deg)}}
.bubble__glare{position:absolute;left:22%;top:14%;width:34%;height:20%;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%);transform:rotate(-28deg);opacity:.8}
.bubble__icon{position:relative;width:44%;height:44%;display:grid;place-items:center;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.bubble__icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bubble:hover .bubble__body,.bubble:focus-visible .bubble__body{transform:scale(1.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 -8px 18px rgba(255,255,255,.16),0 22px 48px rgba(0,0,0,.34),0 0 0 8px rgba(255,255,255,.05)}
.bubble__tip{position:absolute;left:50%;top:calc(100% + 8px);transform:translate(-50%,4px);font:500 var(--label-2)/1 var(--font-text);letter-spacing:0;color:var(--text);opacity:0;transition:opacity .3s,transform .3s;white-space:nowrap;pointer-events:none;background:rgba(8,8,15,.6);border:1px solid rgba(96,96,126,.3);border-radius:8px;padding:.38rem .55rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.bubble:hover .bubble__tip,.bubble:focus-visible .bubble__tip{opacity:1;transform:translate(-50%,0)}
/* ---------- Бренд-цвета четырёх соцсетей ----------
   Цепляемся за уже готовый data-id: ни нового атрибута, ни правок в JS.
   Цвет живёт только в трёх местах: тонкая обводка, мягкое свечение снаружи и штрих иконки.
   Обводка и свечение: в покое около 60% силы, при наведении и фокусе — полная.
   Штрих иконки светлее: его насыщенность ограничена сверху контрастом 4.5:1 к фону пузыря.
   Заливать шар фирменным цветом нельзя: стекло, блик и перелив остаются главными.
   Цвет один и тот же на тёмных и на светлых секциях, по просьбе заказчика.
   На светлом яркий тон теряет контраст, поэтому там значок получает тонкий тёмный контур. */
.bubble{--glow-r:14px}
:is(.bubble,.popcard__icon,.direct__item):is([data-id=instagram],[data-id=telegram],[data-id=whatsapp],[data-id=linkedin],[data-id=email]){--brand-edge:linear-gradient(var(--brand),var(--brand));--brand-ink:color-mix(in srgb,var(--brand) 55%,#fff);--brand-ink-hi:color-mix(in srgb,var(--brand) 65%,#fff)}
:is(.bubble,.popcard__icon,.direct__item)[data-id=instagram]{--brand-base:var(--brand-instagram);--brand:var(--brand-instagram);--brand-edge:var(--brand-instagram-edge)}
:is(.bubble,.popcard__icon,.direct__item)[data-id=telegram]{--brand-base:var(--brand-telegram);--brand:var(--brand-telegram)}
:is(.bubble,.popcard__icon,.direct__item)[data-id=whatsapp]{--brand-base:var(--brand-whatsapp);--brand:var(--brand-whatsapp)}
:is(.bubble,.popcard__icon,.direct__item)[data-id=linkedin]{--brand-base:var(--brand-linkedin);--brand:var(--brand-linkedin)}
:is(.bubble,.popcard__icon,.direct__item)[data-id=email]{--brand-base:var(--brand-email);--brand:var(--brand-email)}
/* Свечение. Внешняя тень не заходит под сам шар, поэтому не смешивается с плёнкой (mix-blend-mode:screen). */
.bubble__body::before{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:0 0 var(--glow-r) 1px var(--brand,transparent);opacity:.42;transition:opacity .5s var(--spring)}
/* Обводка. Маска оставляет от слоя только кольцо в 1.5px по самому краю, поэтому годится и плоский цвет, и градиент. */
.bubble__body::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;background:var(--brand-edge,none);-webkit-mask:radial-gradient(circle closest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px));mask:radial-gradient(circle closest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px));opacity:.62;transition:opacity .5s var(--spring)}
/* Штрих иконки: тот же currentColor, только цвет берётся из переменной. Без переменной наследуется белый. */
.bubble__icon{color:var(--brand-ink,inherit);transition:color .5s var(--spring)}
.bubble:hover .bubble__body::before,.bubble:focus-visible .bubble__body::before{opacity:.8}
.bubble:hover .bubble__body::after,.bubble:focus-visible .bubble__body::after{opacity:1}
.bubble:hover .bubble__icon,.bubble:focus-visible .bubble__icon{color:var(--brand-ink-hi,inherit)}
/* Фокус с клавиатуры: белый контур читается поверх любого фирменного цвета, синий акцент рядом с ними тускнеет. */
.bubble:focus-visible{outline-color:#fff}
.bubble.is-popped{pointer-events:none}
.bubble.is-popped .bubble__body{animation:bubble-pop .38s var(--ease-out) forwards}
@keyframes bubble-pop{0%{transform:scale(1);opacity:1}45%{transform:scale(1.28);opacity:.85}100%{transform:scale(1.55);opacity:0}}
.bubble.is-popped .bubble__tip{opacity:0}
.bubble.is-born .bubble__body{animation:bubble-born .9s var(--spring) both}
@keyframes bubble-born{0%{transform:scale(0);opacity:0}60%{opacity:1}100%{transform:scale(1);opacity:1}}
.drop,.ring{position:absolute;pointer-events:none;border-radius:50%;z-index:4}
.drop{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(255,255,255,.18) 60%,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);transform:translate(-50%,-50%)}
.ring{border:1.5px solid rgba(255,255,255,.75);transform:translate(-50%,-50%) scale(.7);opacity:.9}
/* пузыри на светлом фоне (только плавающие по полям) */
.bubble[data-theme=light]{color:var(--ink)}
.bubble[data-theme=light] .bubble__body{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.5) 22%,rgba(255,255,255,.25) 46%,rgba(255,255,255,.4) 100%);box-shadow:inset 0 0 0 1px rgba(15,18,24,.14),inset 0 -8px 18px rgba(15,18,24,.05),0 18px 40px rgba(15,18,24,.16)}
.bubble[data-theme=light] .bubble__film{opacity:.7}
.bubble[data-theme=light] .bubble__tip{color:var(--text)}
/* Цвет тот же, что на тёмных секциях. Читаемость держит контур: тень без смещения
   и почти без размытия обводит штрих значка, поэтому светлый тон не тает на белом.
   Фильтр статичный, в кадре не пересчитывается. */
/* На светлом фоне тот же цвет, но глубже. Оттенок не меняется, меняется только
   насыщенность: яркий WhatsApp #25d366 даёт на белом 1.71:1, он и режет глаз,
   и плохо читается. Приглушение одним правилом, а не отдельной палитрой. */
.bubble[data-theme=light]:is([data-id=instagram],[data-id=telegram],[data-id=whatsapp],[data-id=linkedin],[data-id=email]){
  --brand:color-mix(in srgb,var(--brand-base) 74%,var(--ink));
  --brand-edge:linear-gradient(var(--brand),var(--brand));
  --brand-ink:var(--brand);--brand-ink-hi:var(--brand)}
/* Зелёный светлее остальных по природе, общего приглушения ему мало. */
.bubble[data-theme=light][data-id=whatsapp]{--brand:color-mix(in srgb,var(--brand-base) 50%,var(--ink))}
.bubble[data-theme=light] .bubble__icon{filter:none}
/* Грань резкая: одно тонкое кольцо цветом бренда и мягкая тень, чтобы шар лежал на бумаге. */
.bubble[data-theme=light] .bubble__body{box-shadow:inset 0 0 0 1.25px var(--brand,rgba(15,18,24,.3)),0 6px 16px rgba(15,18,24,.09)}
.bubble[data-theme=light] .bubble__body::after{opacity:.9}
.bubble[data-theme=light] .bubble__film{opacity:.28}
/* Свечение на светлом держим слабым: тёмная цветная тень на белом стекле быстро мутнеет. */
.bubble[data-theme=light] .bubble__body::before{opacity:.22}
.bubble[data-theme=light]:hover .bubble__body::before{opacity:.38}
.bubble[data-theme=light]:hover .bubble__body::after{opacity:1}
@media (max-width:720px){
  .bubble{left:var(--mx,var(--x));top:var(--my,var(--y));width:var(--ms,var(--s));height:var(--ms,var(--s));margin:calc(var(--ms,var(--s))/-2) 0 0 calc(var(--ms,var(--s))/-2);--glow-r:9px}
  .bubble--desk{display:none}
  /* Пузырь стоит у края экрана: подсказку центрировать некуда, прижимаем её к тому же краю.
     Стороны физические, а не логические: поле пузырей в иврите не зеркалится,
     поэтому левый край остаётся левым. Правила стоят ниже блока [dir=rtl] и перебивают его. */
  .bubble--edge-start .bubble__tip{left:0;right:auto;transform:translate(0,4px)}
  .bubble--edge-end .bubble__tip{left:auto;right:0;transform:translate(0,4px)}
  :is(.bubble--edge-start,.bubble--edge-end):is(:hover,:focus-visible) .bubble__tip{transform:translate(0,0)}
}
/* плавающие по полям страницы, только широкие экраны с мышью */
.margins{position:fixed;inset:0;z-index:2;display:none;opacity:1;transition:opacity .35s var(--ease)}
.margins.is-hidden{opacity:0;pointer-events:none}
/* Пока первый экран не кончился, гасим по одному пузырю с каждой стороны: слева
   стоят номера 1-3, справа 4-6. Прежнее правило гасило чётные, то есть один слева
   и два справа, и единственный оставшийся правый на стыке с героем стоял у самого
   верха, под шапкой: справа было пусто. Гасятся 2 и 5, потому что к концу героя
   именно они наверху, а оставшиеся стоят посреди экрана. */
.margins.is-half .bubble:nth-child(2),.margins.is-half .bubble:nth-child(5){opacity:0}
.margins .bubble{top:0;margin-top:0;transform:translate3d(0,var(--sy,0px),0);transition:none;--glow-r:10px}
/* Пузырь стоит по центру свободной полосы между краем окна и колонкой текста, а не на
   фиксированном проценте ширины. Поэтому при сужении окна он не наезжает на текст и не
   уходит за край: полоса считается от настоящей ширины колонки. Ограничение через max
   и min держит пузырь целиком внутри экрана, когда полоса совсем узкая. */
.margins{--edge:max(0px,(100vw - var(--wrap))/2);--free:calc(var(--edge) + var(--gutter))}
.margins .bubble{--mk:1;
  width:calc(var(--s)*var(--mk));height:calc(var(--s)*var(--mk));
  margin:calc(var(--s)*var(--mk)/-2) 0 0 calc(var(--s)*var(--mk)/-2);
  left:max(calc(var(--s)*var(--mk)/2 + 10px), calc(var(--free)/2))}
.margins .bubble:nth-child(n+4){
  left:min(calc(100% - var(--s)*var(--mk)/2 - 10px), calc(100% - var(--free)/2))}
/* Между 1180 и 1320 полоса узкая: пузыри уменьшаются, иначе им негде стоять целиком. */
@media (max-width:1320px){.margins .bubble{--mk:.72}}
/* Условие показа ДОСЛОВНО повторено в MARGINS_MQ в site.js, менять только парой.
   Порог 1180: ниже свободной полосы не остаётся и пузырь лёг бы на первую букву. */
/* На этой странице колонка 1240, а не 1120: свободная полоса у краёв уже, поэтому порог 1320.
   Повторён в MARGINS_MQ в stores.js, менять парой. */
@media (min-width:1320px) and (pointer:fine){.margins{display:block}}
[dir=rtl] .bubble__tip{transform:translate(50%,4px);left:auto;right:50%}
[dir=rtl] .bubble:hover .bubble__tip,[dir=rtl] .bubble:focus-visible .bubble__tip{transform:translate(50%,0)}
.popcard,.lightbox{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:1.5rem}
.popcard[hidden],.lightbox[hidden]{display:none}
.popcard__backdrop,.lightbox__backdrop{position:absolute;inset:0;background:rgba(6,8,12,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:fade-in .35s var(--ease) both}
.popcard__panel{position:relative;width:min(92vw,400px);padding:2.2rem 1.8rem 1.7rem;border-radius:26px;background:rgba(20,24,33,.8);border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 100px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);text-align:center;animation:card-in .55s var(--spring) both}
@keyframes card-in{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.popcard__icon{width:68px;height:68px;margin:0 auto 1rem;border-radius:50%;display:grid;place-items:center;color:var(--brand-ink-hi,#fff);background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.5),rgba(255,255,255,.08) 40%,rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 10px 30px rgba(0,0,0,.3)}
.popcard__icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.popcard h3{font-family:var(--font-display);font-weight:700;font-size:1.4rem;letter-spacing:-.02em;margin:0 0 .4rem}
.popcard p{margin:0 0 1.4rem;color:var(--text-2);word-break:break-word;min-height:1em}
.popcard__actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.popcard__close,.lightbox__close{position:absolute;top:.8rem;right:.8rem;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font-size:1.3rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
/* Поле вокруг вступления: на телефоне и планшете стоя, как пузыри первого экрана главной.
   Тянется на всю ширину окна, а не колонки. На широком экране его место занимают края. */
.walk .social-field--hero{left:calc(50% - 50vw);right:auto;width:100vw}
@media (min-width:1025px) and (min-aspect-ratio:1/1){.walk .social-field--hero{display:none}}
/* Без прокрутки поле занимает только первый экран, а не всю длинную секцию с остановками */
.walk:not(.is-scrub) .social-field--hero{bottom:auto;height:100vh;height:100svh}

/* ===== Nordalight ===== */
.sec{position:relative;padding:clamp(5rem,10vw,8rem) 0}
.sec--light{background:var(--paper);background-image:var(--light-paper,none);background-size:1200px 1200px;color:var(--ink)}
.h2{font:800 clamp(2.1rem,4.4vw,3.6rem)/1.04 var(--font-display);letter-spacing:-.03em;margin:0 0 1.1rem;text-wrap:balance}
.lede{font-size:clamp(1.0625rem,1.4vw,1.25rem);color:var(--text-2);max-width:40rem;margin:0}
.sec--light .lede{color:var(--ink-2)}
.sec--tight{padding-block:clamp(3.5rem,7vw,5rem)}
.sec--tight .h2{font-size:clamp(1.8rem,3vw,2.6rem)}
/* Светлые разделы подряд: деловая часть идёт одним листом, между разделами только линия */
.sec--light+.sec--light{padding-top:0}
.sec--light+.sec--light>.wrap::before{content:"";display:block;height:1px;background:var(--line-light);margin-bottom:clamp(3.5rem,7vw,5rem)}
.act{border-top:1px solid var(--line-dark)}
.act__grid{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
.act__text p{color:var(--text-2);margin:0 0 1.1rem;max-width:36rem}
.act .h2{font-size:clamp(2rem,3.3vw,2.9rem)}
.act__text h3{font:800 clamp(1.4rem,2.2vw,1.8rem)/1.1 var(--font-display);letter-spacing:-.02em;margin:2rem 0 .7rem}
.act__meta{font-size:.9375rem;color:var(--text-3)!important}
@media (min-width:1025px){.act__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}

/* ===== Цены и обслуживание: строки с волосяной линией, без карточек ===== */
.rows{list-style:none;margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:0;border-bottom:1px solid var(--line-light)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem 2rem;align-items:center;padding:clamp(1.4rem,3vw,2rem) 0;border-top:1px solid var(--line-light)}
.row__item+.row__item{border-top:1px solid var(--line-light);margin-top:clamp(1rem,2.4vw,1.5rem);padding-top:clamp(1rem,2.4vw,1.5rem)}
.row h3{font:700 clamp(1.25rem,2vw,1.6rem)/1.2 var(--font-display);letter-spacing:-.015em;margin:0 0 .4rem}
.row__item p{margin:0;color:var(--ink-2);max-width:40rem}
.row .price{margin:0;font:800 clamp(1.5rem,2.6vw,2.2rem)/1 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;text-align:right}
.row .price small{display:block;font:500 .875rem/1.3 var(--font-text);letter-spacing:0;color:var(--ink-3);margin-bottom:.35rem}
.row .price .price__after{margin:.35rem 0 0}
.offer__close{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-top:clamp(2.5rem,5vw,3.5rem)}
.offer__close p{margin:0;color:var(--ink-2);max-width:32rem}
.care{margin-top:clamp(4.5rem,9vw,7rem)}
.care .h2{font-size:clamp(1.8rem,3.4vw,2.8rem)}
@media (max-width:560px){
  .row{grid-template-columns:1fr}
  .row .price{text-align:left}
  .row .price small{display:inline;margin:0 .4rem 0 0}
  .row .price .price__after{margin:0 0 0 .4rem}
}

/* ===== Как идёт работа: тексты главной дословно ===== */
.steps{list-style:none;margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:0;display:grid;gap:2rem 2.5rem}
.steps li{border-top:1px solid var(--line-dark);padding-top:1.25rem}
.steps b{display:block;font:700 .9375rem/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--text-3);margin-bottom:.9rem}
.steps h3{font:700 1.3rem/1.2 var(--font-display);letter-spacing:-.015em;margin:0 0 .5rem}
.steps p{margin:0;color:var(--text-2)}
.sec--light .steps li{border-top-color:var(--line-light)}
.sec--light .steps b{color:var(--ink-3)}
.sec--light .steps p{color:var(--ink-2)}
@media (min-width:721px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1025px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ===== Вопросы: обычный details, работает без скрипта ===== */
.faq__list{margin-top:clamp(2rem,4vw,3rem);border-bottom:1px solid var(--line-light);max-width:52rem}
.faq details{border-top:1px solid var(--line-light)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:44px;padding:1.25rem 0;cursor:pointer;list-style:none;font:700 clamp(1.1rem,1.6vw,1.3rem)/1.3 var(--font-display);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{width:1.25rem;height:1.25rem;color:var(--ink-3);transition:transform .2s var(--ease-out)}
.faq details[open] summary .ico{transform:rotate(45deg)}
.faq details p{margin:0 0 1.4rem;color:var(--ink-2);max-width:44rem}

/* ===== Финал ===== */
.close{text-align:left}
.close__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:2rem}
.close__direct{display:flex;flex-wrap:wrap;gap:.25rem 1.75rem;margin-top:1.5rem;color:var(--text-3);font-size:.9375rem}

.footer{border-top:1px solid var(--line-dark);padding:2.2rem 0 calc(2.2rem + env(safe-area-inset-bottom))}
.footer__row{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:baseline;justify-content:space-between;color:var(--text-2);font-size:.9rem}
.footer p{margin:0}
.footer__brand{color:var(--text);font-family:var(--font-display);font-weight:700}
.footer__brand span{display:block;font-family:var(--font-text);font-weight:400;color:var(--text-2);font-size:.875rem;margin-top:.2rem}
.footer__owner{font-size:.875rem;color:var(--text-3)}
.footer__owner a,.footer__legal a{color:var(--text-2);text-decoration:none}
.footer__legal{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem}
.footer__legal a,.footer__owner a{display:inline-block;min-height:24px}
@media (hover:hover) and (pointer:fine){.footer a:hover{color:var(--text)}}

/* Телефон: кнопка в шапке тише кнопки под заголовком, высота цели прежняя.
   Адрес в полоске окна 14px, как весь текст на телефоне; полоска чуть выше, отступ под точки уже. */
@media (max-width:720px){
  .nav .btn{padding:0 1rem;font-size:.875rem}
  .win__url{font-size:.875rem;inset:0 50px}
}

/* Палец: все цели от 44px. Блоки в конце файла, иначе их перебивают базовые правила выше. */
@media (pointer:coarse){
  .footer__legal a,.footer__owner a,.close__direct a,.win__cap a{display:inline-block;line-height:44px;min-height:44px}
  .footer__legal a{min-width:44px;text-align:center}
}
/* Телефон лёжа: адрес в полоске окна тоже 14px */
@media (pointer:coarse) and (max-height:560px){.win__url{font-size:.875rem}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
}