:root{
  --teal:#101840; --teal2:#1b2766; --ink:#101840; --bg:#eef0f7; --accent:#9fbaff;
  /* Высоты фиксированных полос. Экраны считают по ним свои отступы, поэтому
     достаточно поменять здесь — контент нигде не заедет под полосу. */
  --bar-top:80px; --bar-bottom:100px;
  --gap-v:2.5vh;   /* вертикальный ритм: на низких экранах сжимается */
  /* Безопасные зоны экрана — только для размера кадра камеры. В полосах и
     отступах экранов env() стоит напрямую: часть версий Safari не разворачивает
     env() внутри custom property, а там от этого зависит, дотянется ли полоса
     до низа. Для камеры ошибка некритична — кадр окажется чуть крупнее. */
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}
/* Ноутбуки и iPad в ландшафте: по высоте места мало, полосы ужимаем */
@media (max-height:900px){
  :root{ --bar-top:64px; --bar-bottom:84px; --gap-v:1.6vh; }
}
@media (max-height:760px){
  :root{ --bar-top:56px; --bar-bottom:70px; --gap-v:1vh; }
}
/* Телефон: экран узкий и высокий, полосы съедали столько, что контент не
   помещался и кнопки уходили под нижнюю полосу. Полосы делаем компактными. */
@media (max-width:640px){
  :root{ --bar-top:48px; --bar-bottom:62px; --gap-v:1vh; }
  .global-partners{gap:0; padding-top:6px;}
  .global-partners-logos img{padding:0 clamp(6px,2vw,14px);}
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
/* кнопки и поля сами шрифт не наследуют — без этого они шли системным, а не Montserrat */
button,input{font-family:inherit;}
/* Зону под индикатором внизу закрашивает html, поэтому цвет здесь должен
   совпадать с нижней полосой партнёров (rgb(8,13,40)), а не с фоном страницы:
   с болотным #0a1030 под полосой оставался заметный чужеродный кант. */
html{background:#080d28;}
html,body{margin:0;height:100%;}
body{
  font-family:'Montserrat',-apple-system,'Helvetica Neue',Arial,sans-serif; color:var(--ink);
  background:radial-gradient(circle at 50% -10%, #274497 0%, #152062 55%, #0a1030 100%);
  overflow:hidden;
  user-select:none; -webkit-user-select:none;
  -webkit-text-size-adjust:100%;   /* Safari иначе сам раздувает текст */
  touch-action:manipulation;       /* без задержки и зума по двойному тапу */
}
#app{position:fixed; inset:0;}
.screen{
  position:absolute; inset:0; display:none; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:calc(var(--bar-top) + env(safe-area-inset-top, 0px) + var(--gap-v))
          max(5vw, env(safe-area-inset-left, 0px))
          calc(var(--bar-bottom) + env(safe-area-inset-bottom, 0px) + var(--gap-v))
          max(5vw, env(safe-area-inset-right, 0px));
  animation:fade .45s ease; z-index:2;
  /* Если контент всё же выше экрана — даём прокрутить, а не срезаем кнопки.
     С обычным center верх уезжает за край и становится недоступен, поэтому
     safe center: он прижимает к началу вместо обрезки. */
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
@supports (justify-content:safe center){
  .screen{ justify-content:safe center; }
}
.screen.active{display:flex;}

/* Фон без видео (решение заказчика): фирменный тёмно-синий с мягким свечением
   королевского синего и контуром острова — стилеобразующий элемент из руководства
   (стр. 32–33), наклон до 20°. Заливка и контур чуть сдвинуты — даёт глубину. */
.brand-bg{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 60% at 80% 35%, rgba(39,68,151,.60) 0%, rgba(39,68,151,0) 70%),
    radial-gradient(ellipse 45% 40% at 8% 100%, rgba(39,68,151,.40) 0%, rgba(39,68,151,0) 70%),
    linear-gradient(160deg, #16215a 0%, #101840 48%, #0a1030 100%);}
.bg-island{position:absolute; top:50%; right:clamp(-40px,6vw,140px); height:122vh; width:auto;
  transform:translateY(-50%) rotate(14deg); transform-origin:50% 50%;}
.bg-island.fill{opacity:.06; right:clamp(-10px,9vw,190px);}
.bg-island.outline{opacity:.20;}
/* мелкий ориентир-«звёзды», как у знака: две точки у острова, без оранжевого */
.brand-bg::after{content:""; position:absolute; top:24vh; right:calc(clamp(-40px,6vw,140px) + 22vh);
  width:10px; height:10px; border-radius:50%; background:rgba(159,186,255,.55);
  box-shadow:0 34px 0 rgba(159,186,255,.55); filter:blur(.3px);}
@keyframes fade{from{opacity:0; transform:translateY(12px);}to{opacity:1; transform:none;}}

/* Заголовки считаем и от ширины, и от высоты — на низком экране крупный кегль
   съедал место, которого не хватало кнопкам. */
h1{font-size:min(11vw,9vh,84px); margin:.1em 0; color:#fff; letter-spacing:-1px;}
h1 span{color:#9fbaff;}
h2{font-size:min(6vw,4.6vh,40px); color:#fff; margin:.2em 0;}
.eyebrow{color:#9fbaff; letter-spacing:3px; text-transform:uppercase;
  font-size:clamp(11px,1.4vh,14px); font-weight:700;}
.lead{color:#dfe3f0; font-size:min(3.2vw,2.5vh,22px); line-height:1.5;
  margin:var(--gap-v) 0 calc(var(--gap-v) * 2);}
.sub{color:#b9bfd6; font-size:min(3vw,2.3vh,20px);
  margin:.2em 0 calc(var(--gap-v) + 4px);}

/* ═══════════════════════════════════════
   ГЛОБАЛЬНЫЙ ТОПБАР
═══════════════════════════════════════ */
/* padding-top на безопасную зону: в полноэкранном режиме заголовок иначе
   оказывается прямо под часами и значком батареи. */
.global-topbar{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center;
  padding:env(safe-area-inset-top, 0px) max(24px, env(safe-area-inset-left, 0px)) 0;
  height:calc(var(--bar-top) - 16px + env(safe-area-inset-top, 0px));
  transition:background .35s ease;
  pointer-events:none;
}

/* Режим внутренних экранов — тёмный фон как нижняя полоса + знак слева */
.global-topbar.inner{
  background:rgba(8,13,40,0.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 2px 20px rgba(0,0,0,.5);
  height:calc(var(--bar-top) + env(safe-area-inset-top, 0px));
  pointer-events:auto;
}

/* Знак в топбаре (слева, только на внутренних экранах: на приветствии он крупно
   в самом экране). Раньше здесь было название текстом, а знак стоял справа. */
.topbar-logos{
  display:none;
  align-items:center;
  margin-right:auto;
  height:100%;
}
.global-topbar.inner .topbar-logos{
  display:flex;
}
/* знак крупнее прежнего (22–52px): в шапке он один и заменяет название */
.topbar-logos img{
  height:clamp(32px,calc(var(--bar-top) - 18px),64px); width:auto;
  max-width:clamp(120px,18vw,260px);
  object-fit:contain; opacity:.95;
  padding:0 clamp(10px,2vw,28px) 0 0; flex:0 1 auto; min-width:0;
}
.topbar-logos img + img{
  border-left:1px solid rgba(255,255,255,.15);
}

/* ═══════════════════════════════════════
   ГЛОБАЛЬНАЯ НИЖНЯЯ ПОЛОСА ПАРТНЁРОВ
═══════════════════════════════════════ */
.global-partners{
  position:fixed; bottom:0; left:0; right:0; z-index:20;
  background:rgba(8,13,40,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.1);
  /* env() здесь напрямую, а не через переменную: часть версий Safari не
     разворачивает env() внутри custom property, и полоса тогда не дотягивалась
     до низа — под ней оставался кант цвета фона страницы. */
  /* Половина безопасной зоны, а не вся: индикатор — тонкая полоска у самого
     края, и полные 34px оставляли под логотипами заметный пустой провал. */
  padding:8px max(20px, env(safe-area-inset-left, 0px))
          calc(6px + env(safe-area-inset-bottom, 0px) * 0.5);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  min-height:calc(var(--bar-bottom) + env(safe-area-inset-bottom, 0px) * 0.5);
  justify-content:center;
}
.global-partners-logos{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:nowrap; width:100%;
}
.global-partners-logos img{
  height:clamp(26px,calc(var(--bar-bottom) - 44px),62px); width:auto;
  max-width:clamp(80px,17%,200px);
  object-fit:contain; opacity:.95;
  padding:0 clamp(10px,2.4vw,36px); flex:0 1 auto; min-width:0;
}
.global-partners-logos img + img{
  border-left:1px solid rgba(255,255,255,.15);
}

/* ═══════════════════════════════════════
   КНОПКИ
═══════════════════════════════════════ */
/* Кнопки не мельче 44px по высоте — минимум для пальца на планшете. */
.btn-primary{
  background:linear-gradient(180deg,#ffffff,#e3e9f8); color:#101840; border:none;
  border-radius:16px; padding:clamp(13px,1.8vh,18px) clamp(22px,3vw,34px);
  font-size:clamp(16px,2vh,20px); font-weight:700; cursor:pointer; min-height:44px;
  box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .1s;
}
.btn-primary:active{transform:scale(.96);}
.btn-primary.big{font-size:min(4vw,2.6vh,26px);
  padding:clamp(15px,2.2vh,22px) clamp(28px,4vw,44px); border-radius:20px;}
/* Второстепенная кнопка — «Загрузить с телефона» на экране съёмки: фирменный
   синий с белым текстом и светлой обводкой, чтобы не терялась на тёмном фоне.
   Текст длиннее, чем у «Снять», поэтому кегль и отступы чуть меньше — иначе
   кнопка выходила заметно крупнее соседней и перетягивала внимание. */
.btn-primary.btn-violet{
  background:linear-gradient(135deg,#3553b3,#274497); color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28), 0 10px 30px rgba(0,0,0,.35);
  font-size:min(3.1vw,2vh,20px);
  padding:clamp(13px,1.9vh,19px) clamp(20px,2.4vw,28px);
}
.btn-ghost{
  background:transparent; color:#b9bfd6; border:1.5px solid #4a5387; border-radius:14px;
  padding:clamp(11px,1.5vh,14px) clamp(18px,2.5vw,26px);
  font-size:clamp(15px,1.9vh,18px); cursor:pointer; min-height:44px;
  margin-top:var(--gap-v);
}
.btn-ghost:active{background:rgba(255,255,255,.06);}
.row{display:flex; gap:clamp(10px,1.6vw,18px); align-items:center;
  margin-top:10px; flex-wrap:wrap; justify-content:center;}
.upload{display:inline-flex; align-items:center;}

/* ═══════════════════════════════════════
   ЛОКАЦИИ
═══════════════════════════════════════ */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(clamp(190px,22vw,230px),1fr));
  gap:clamp(12px,1.8vh,20px); width:100%; max-width:760px;}   /* две локации в ряд; «Платформа «Лунская-А»» помещается в строку */
.loc{
  background:rgba(255,255,255,.07); border:1.5px solid #34488f; border-radius:20px;
  padding:clamp(16px,2.4vh,26px) clamp(16px,1.8vw,22px);
  cursor:pointer; text-align:left; transition:transform .12s, border-color .12s;
}
.loc:active{transform:scale(.97);}
.loc.on{border-color:#9fbaff;}
.loc.off{opacity:.4; pointer-events:none;}
.loc h3{margin:0 0 8px; color:#fff; font-size:clamp(17px,2.3vh,22px);}
.loc-slogan{margin:0; color:#9fbaff; font-size:clamp(12px,1.6vh,14px); font-style:italic; line-height:1.4;}
.loc.off .loc-slogan{color:#8c93b3;}
.loc .soon{color:var(--accent); font-size:12px; font-weight:700; margin-top:10px;}

/* ═══════════════════════════════════════
   ОБРАЗ
═══════════════════════════════════════ */
.outfit-grid{display:flex; gap:clamp(14px,2.4vw,24px); flex-wrap:wrap;
  justify-content:center; max-width:760px; width:100%;}
.outfit{background:rgba(255,255,255,.07); border:1.5px solid #34488f; border-radius:22px;
  padding:clamp(18px,3vh,30px) clamp(18px,2.4vw,28px);
  width:min(300px,44%); min-width:220px; cursor:pointer;
  transition:transform .12s, border-color .12s;}
.outfit:active{transform:scale(.97);}
/* hover только там, где есть мышь: на планшете подсветка залипает после тапа */
@media (hover:hover){ .outfit:hover{border-color:#9fbaff;} }
.outfit .emoji{font-size:clamp(34px,5vh,52px); margin-bottom:8px;}
.outfit h3{margin:0 0 8px; color:#fff; font-size:clamp(19px,2.7vh,26px);}
.outfit p{margin:0; color:#b9bfd6; font-size:clamp(14px,1.9vh,16px);}

/* ═══════════════════════════════════════
   КАМЕРА
═══════════════════════════════════════ */
/* Овал крупнее и опущен ниже: при 52%/42% подбородок и губы оказывались на самой
   границе, гость подавался назад — и в кадр попадало мелкое лицо. Теперь нижний
   край овала на 78% высоты кадра, рот заведомо внутри. */
.face-guide{position:absolute; left:50%; top:45%; transform:translate(-50%,-50%);
  width:66%; aspect-ratio:3/4; border:3px dashed rgba(255,255,255,.85); border-radius:50%;
  box-shadow:0 0 0 1000px rgba(10,16,48,.35); pointer-events:none; z-index:2;}
/* Размер задаём по ВЫСОТЕ: раньше кадр считался от ширины (min(70vw,540px)) и в
   ландшафте iPad вырастал до 720px — экран съёмки не помещался, кнопка «Снять»
   уезжала за край и была недоступна. Третий член min() страхует по ширине,
   чтобы на узких экранах пропорция 3:4 не ломалась. */
/* margin-inline:auto обязателен: блок считает ширину из aspect-ratio и без него
   прижимается к левому краю. Раньше это не бросалось в глаза — кадр был самым
   широким элементом, и колонка ужималась по нему; теперь он уже кнопок. */
.camera-wrap{position:relative;
  height:min(calc(56vh - var(--safe-top) - var(--safe-bottom)), 600px, 117vw);
  width:auto; aspect-ratio:3/4;
  border-radius:24px; overflow:hidden;
  background:#000; box-shadow:0 12px 40px rgba(0,0,0,.5);
  margin:var(--gap-v) auto calc(var(--gap-v) + 8px);}
/* Порог 1100px закрывает iPad 12.9 в ландшафте (1366×1024), Full HD и ноутбуки:
   там кадру нужно уступить место заголовку и кнопкам, иначе экран съёмки уходит
   в прокрутку. В портрете (высота 1366) правило не срабатывает — кадр крупный. */
@media (max-height:1100px){
  .camera-wrap{height:min(calc(50vh - var(--safe-top) - var(--safe-bottom)), 600px, 117vw);}
}
/* Ноутбуки 768px: там даже поджатых отступов не хватает */
@media (max-height:800px){
  .camera-wrap{height:min(calc(48vh - var(--safe-top) - var(--safe-bottom)), 600px, 117vw);}
}
/* Экран съёмки самый плотный. Чтобы кадр остался крупным (гость подходит ближе —
   лицо в кадре крупнее — распознавание точнее), место отыгрываем на отступах,
   а не на размере кадра. */
#camera-mode .sub{margin-bottom:4px;}
#camera-mode .camera-wrap{margin-top:6px;}
#camera-mode .row{margin-top:4px;}
#video{width:100%; height:100%; object-fit:cover; transform:scaleX(-1);}
.cam-error{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; padding:20px; background:rgba(0,0,0,.6);}

/* ═══════════════════════════════════════
   ЭКРАН ЗАГРУЗКИ (редизайн)
═══════════════════════════════════════ */
.loading-inner{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  width:100%; max-width:900px;   /* хватает, чтобы пять логотипов встали в строку */
}
.loading-eyebrow{
  color:rgba(159,186,255,.9); font-size:11px; font-weight:800;
  letter-spacing:3px; text-transform:uppercase; margin:0;
}
.loading-title{
  color:#fff; font-size:min(6.5vw,44px); margin:0; font-weight:700;
}
.loading-bar{
  width:100%; max-width:480px; height:4px;
  background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden;
}
.loading-bar-fill{
  height:100%; width:0%; border-radius:2px;
  background:linear-gradient(90deg, #274497 0%, #9fbaff 100%);
  transition:width .6s ease;
}

/* Секция партнёров на загрузке */
/* Рамка и подложка убраны вместе с подписью: логотип один, панель вокруг него
   выглядела пустой. */
.loading-sponsors{
  display:flex; flex-direction:column; align-items:center;
  margin-top:clamp(18px,4vh,40px); width:100%;
}
.loading-sponsors-logos{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:nowrap; width:100%;
}
.loading-sponsors-logos img{
  height:clamp(26px,6vh,52px); width:auto; max-width:clamp(80px,19%,200px);
  object-fit:contain; opacity:.9;
  padding:0 clamp(8px,1.8vw,24px);
  flex:0 1 auto; min-width:0;
}
.loading-sponsors-logos img + img{
  border-left:1px solid rgba(255,255,255,.15);
}

/* ═══════════════════════════════════════
   ВАРИАНТЫ, КАРТОЧКА, ФИНАЛ
═══════════════════════════════════════ */
.spinner{width:80px; height:80px; border:7px solid rgba(255,255,255,.15); border-top-color:#9fbaff;
  border-radius:50%; animation:spin 1s linear infinite; margin-bottom:24px;}
@keyframes spin{to{transform:rotate(360deg);}}

.variants{display:flex; gap:clamp(12px,2vw,22px); flex-wrap:wrap; justify-content:center;}
/* тоже по высоте — иначе на низких экранах кадры вылезают за пределы */
.variants img{height:min(52vh,420px,60vw); width:auto; aspect-ratio:3/4; object-fit:cover; border-radius:18px;
  border:4px solid transparent; cursor:pointer; box-shadow:0 8px 26px rgba(0,0,0,.4); transition:transform .12s, border-color .12s;}
.variants img:active{transform:scale(.97);}
.variants img.sel{border-color:#9fbaff;}

/* flex-start, а не center: колонка с QR короче карточки и при центрировании
   всплывала выше её верхнего края — на iPad на 48px. Теперь обе начинаются
   от одной линии на любом экране. */
.card-view{display:flex; gap:clamp(18px,3vw,40px); align-items:flex-start;
  flex-wrap:wrap; justify-content:center; width:100%;}
/* Только ограничения, без жёсткой height. Раньше высота задавалась намертво
   (62vh), а ширину на телефоне резало 42vw ≈ 165px — картинка вписывалась по
   ширине, и сверху-снизу оставались широкие белые поля от фона элемента.
   Теперь обе стороны — максимумы, размер считается по пропорции карточки. */
#card-img{max-height:min(62vh,540px); max-width:min(88vw,380px);
  width:auto; height:auto;
  border-radius:14px; box-shadow:0 14px 44px rgba(0,0,0,.5); background:#fff;}
/* Правая колонка — единая сетка: панели одной ширины и скругления, кнопки одной
   высоты. Раньше QR с подписью шли столбиком, печать разрасталась в две строки,
   а заголовок почты был мелким капсом — колонка выглядела собранной из разного. */
.card-side{display:flex; flex-direction:column; align-items:stretch; gap:12px;
  width:min(100%,370px); text-align:left;}
.card-panel{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:16px; padding:14px 16px;}
.qr-panel{display:flex; align-items:center; gap:14px;}
.qr{width:clamp(84px,12vh,116px); height:clamp(84px,12vh,116px); flex-shrink:0;
  background:#fff; border-radius:10px; padding:6px;}
.qr-hint{margin:0; color:#dfe3f0; font-size:15px; font-weight:500; line-height:1.4;}
.btn-primary.card-print{width:100%; min-height:52px; padding:14px 20px; border-radius:14px;
  font-size:18px; white-space:nowrap;}
.card-actions{display:flex; gap:10px;}
.card-actions .btn-ghost{flex:1; margin-top:0; border-radius:12px;
  padding:12px 10px; font-size:15px; white-space:nowrap;}
/* iPad в портрете (768px): карточка 380 + колонка 370 не помещались рядом, колонка
   уходила вниз и экран прокручивался. Чуть ужимаем обе — стоят в один ряд. */
@media (min-width:641px) and (max-width:820px){
  .card-view{flex-wrap:nowrap; gap:18px;}
  #card-img{max-width:300px;}
  .card-side{width:330px;}
  .qr-panel{gap:10px; padding:12px;}
  .qr-hint{font-size:14px;}
  .email-input{font-size:15px; padding:0 12px;}
  .btn-email{padding:0 14px; font-size:14px;}
}

/* ═══════════════════════════════════════
   QR-ЗАГРУЗКА ФОТО С ТЕЛЕФОНА
═══════════════════════════════════════ */
.qr-upload-img{
  width:min(50vw,280px); height:min(50vw,280px);
  background:#fff; border-radius:16px; padding:10px;
  margin:16px 0;
}
.qr-waiting{
  color:#9fbaff; font-size:16px; font-weight:600;
  letter-spacing:1px; animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}

/* ═══════════════════════════════════════
   EMAIL-БЛОК НА ЭКРАНЕ КАРТОЧКИ
═══════════════════════════════════════ */
.email-label{margin:0 0 10px; color:#fff; font-size:15px; font-weight:600;}
.email-row{display:flex; gap:8px;}
/* поле и кнопка одной высоты: раньше у кнопки своя высота от padding, и они
   стояли вразнобой */
.email-input{
  flex:1; min-width:0; height:46px; padding:0 14px;
  background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.2);
  border-radius:12px; color:#fff; font-size:16px; font-weight:500;
  outline:none; transition:border-color .2s;
}
.email-input::placeholder{color:rgba(255,255,255,.35);}
.email-input:focus{border-color:#9fbaff;}
.btn-email{
  background:linear-gradient(180deg,#ffffff,#e3e9f8); color:#101840; border:none;
  height:46px; border-radius:12px; padding:0 18px; font-size:15px; font-weight:700;
  cursor:pointer; white-space:nowrap; transition:transform .1s, opacity .2s;
}
.btn-email:active{transform:scale(.96);}
.btn-email:disabled{opacity:.4; cursor:default;}
.email-status{margin:8px 0 0; font-size:13px; color:#9fbaff;}
.email-status:empty{display:none;}   /* пустая строка статуса оставляла дыру внизу панели */
.email-status.error{color:#f87171;}

/* На совсем низких окнах (ноутбук с открытыми панелями) правая колонка карточки
   не помещалась — поджимаем блок почты, он там самый объёмный. */
@media (max-height:760px){
  .card-side{gap:8px;}
  .card-panel{padding:10px 14px;}
  .email-label{margin-bottom:8px; font-size:14px;}
  .btn-primary.card-print{min-height:46px; padding:10px 18px; font-size:16px;}
  .email-input,.btn-email{height:42px;}
}

/* ═══════════════════════════════════════
   ПЕЧАТЬ С УСТРОЙСТВА (на iPad — AirPrint)
   На лист уходит только карточка: интерфейс, фон-видео и полосы логотипов
   скрыты, поля страницы убраны, картинка вписывается в лист целиком.
═══════════════════════════════════════ */
@media print{
  @page{margin:0;}
  html,body{height:auto; background:#fff; overflow:visible;}
  body *{visibility:hidden;}
  .brand-bg,.global-topbar,.global-partners{display:none !important;}
  #card-img,#card-img *{visibility:visible;}
  #card-img{
    position:fixed; inset:0; margin:auto;
    max-width:100%; max-height:100%; width:auto; height:auto;
    box-shadow:none; border-radius:0;
  }
}

.check{width:clamp(72px,11vh,110px); height:clamp(72px,11vh,110px); border-radius:50%;
  background:#ffffff; color:#274497; font-size:clamp(42px,6.4vh,64px);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  flex-shrink:0; box-shadow:0 10px 30px rgba(0,0,0,.4);}
.countdown{color:#8c93b3; margin-top:20px;}
.hidden{display:none;}

/* Поздравление — наклонная плашка в левом верхнем углу экрана выбора локации
   (правило .greeting ниже — общий вид, .corner — положение и наклон) */
.greeting{display:inline-block; margin:0 0 calc(var(--gap-v) + 4px);
  padding:clamp(8px,1.2vh,12px) clamp(16px,2.4vw,26px); border-radius:999px;
  background:rgba(39,68,151,.55); border:1.5px solid rgba(159,186,255,.55);
  color:#fff; font-weight:700; font-size:min(3.4vw,2.3vh,22px); line-height:1.3;
  box-shadow:0 8px 26px rgba(0,0,0,.3);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
/* Стиль «наградной значок»: медальон с каплей, две оранжевые звезды как у знака
   Общества, синий градиент с бликом и светлой кромкой. */
.greeting.corner{position:absolute; margin:0; z-index:3;
  top:calc(var(--bar-top) + env(safe-area-inset-top, 0px) + clamp(24px,3.6vh,44px));
  left:max(4vw, env(safe-area-inset-left, 0px));
  display:flex; align-items:center; gap:clamp(12px,1.3vw,16px);
  max-width:min(46vw,440px); text-align:left;
  padding:clamp(12px,1.6vh,16px) clamp(22px,2.4vw,30px) clamp(12px,1.6vh,16px) clamp(12px,1.3vw,16px);
  border-radius:20px; border:1px solid rgba(159,186,255,.5);
  background:
    radial-gradient(140% 160% at 0% 0%, rgba(159,186,255,.30) 0%, rgba(159,186,255,0) 50%),
    linear-gradient(135deg, #3a5bc0 0%, #274497 52%, #1a2d72 100%);
  box-shadow:0 20px 44px rgba(0,0,0,.42), 0 0 0 4px rgba(39,68,151,.25),
             inset 0 1px 0 rgba(255,255,255,.22);
  transform:rotate(-4deg); transform-origin:0 0;}
/* две звезды, как у знака «Сахалинской Энергии» */
.greeting.corner::after{content:"★ ★"; position:absolute; bottom:-12px; right:22px;
  padding:2px 8px; border-radius:999px; background:#101840;
  border:1px solid rgba(159,186,255,.45);
  color:#f7a823; font-size:13px; line-height:1.3; letter-spacing:1px;}
.greeting-icon{flex-shrink:0; display:grid; place-items:center;
  width:clamp(40px,5.4vh,52px); height:clamp(40px,5.4vh,52px); border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffffff 0%, #dfe7ff 60%, #b9c8f5 100%);
  box-shadow:0 6px 16px rgba(0,0,0,.3), inset 0 -2px 4px rgba(16,24,64,.18);}
.greeting-icon svg{width:56%; height:56%; fill:#101840;}
.greeting-text{display:flex; flex-direction:column; min-width:0;}
.greeting-kicker{margin-bottom:5px; color:#bcd0ff;
  font-size:clamp(10px,1.3vh,12px); font-weight:800; letter-spacing:2.4px; text-transform:uppercase;}
.greeting-main{color:#fff; font-size:clamp(16px,2.3vh,23px); font-weight:800; line-height:1.12;
  letter-spacing:-.2px; text-shadow:0 2px 10px rgba(0,0,0,.25);}
/* на телефоне и в низком окне (до 620px) в углу места нет — плашка наезжала
   на «Куда отправимся?», поэтому встаёт над заголовком без наклона */
@media (max-width:640px), (max-height:620px){
  .greeting.corner{position:relative; top:auto; left:auto; transform:none; max-width:none;
    margin:8px 0 calc(var(--gap-v) + 6px);}
}

/* ═══════════════════════════════════════
   ЭКРАН ПРИВЕТСТВИЯ «САХАЛИНСКАЯ ЭНЕРГИЯ»
═══════════════════════════════════════ */
/* Блок приподнят над центром (просьба заказчика 15.09.2026). Отступом, а не
   transform: отступ участвует в раскладке, и на низком экране safe center
   прижмёт блок к верху и даст прокрутку, а не загонит логотип под полосу. */
.hero{display:flex; flex-direction:column; align-items:center; max-width:980px;
  margin-bottom:clamp(0px, 11vh, 130px);}
.hero-logo{display:block; width:clamp(92px,17vh,180px); height:auto;
  margin:0 0 calc(var(--gap-v) + 4px);
  filter:drop-shadow(0 14px 36px rgba(0,0,0,.45)) drop-shadow(0 0 46px rgba(159,186,255,.22));}
.hero .eyebrow{margin:0 0 .6em;}
h1.brand-title{font-size:min(10.5vw,8.2vh,92px); font-weight:800; line-height:1.0;
  letter-spacing:.5px; text-transform:uppercase; margin:0;
  text-shadow:0 6px 30px rgba(0,0,0,.35);}
h1.brand-title span{display:block; color:#9fbaff;}
.hero .lead{margin:calc(var(--gap-v) + 2px) 0 calc(var(--gap-v) * 1.6);}
@media (max-height:760px){ .hero-logo{width:clamp(72px,13vh,120px);}
  .hero{margin-bottom:7vh;} }   /* на низком экране места меньше — поднимаем скромнее */