:root{
  --ink:#0a0a0a;
  --mut:#8b8b8b;
  --hair:#111;
  --red:#ff2f00;
  --card:#fff;
  --grid: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'Roboto Mono', ui-monospace, monospace;
  --col: min(420px, calc(100vw - 40px));   /* общая колонка: упаковка = чек */
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
body{
  background:#fff; color:var(--ink); font-family:var(--grid);
  overscroll-behavior-y:none;
}
::selection{background:var(--ink);color:#fff}

.scroller{height:1250vh;position:relative}
.stage{
  position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, #ffffff 0%, #f7f7f7 42%, #e4e4e4 100%);
}

/* ─────────── БОКОВАЯ БЕГУЩАЯ СТРОКА ─────────── */
.spine{
  position:absolute;left:0;top:64px;bottom:0;z-index:2;
  overflow:hidden;pointer-events:none;
  font:400 clamp(26px,4.4vw,46px)/1.1 var(--grid);
  letter-spacing:-.035em;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.spine__track{
  writing-mode:vertical-rl;white-space:nowrap;padding-left:3px;
  animation:spineRun 34s linear infinite;
}
@keyframes spineRun{
  from{transform:rotate(180deg) translateY(0)}
  to  {transform:rotate(180deg) translateY(-50%)}
}
@media (prefers-reduced-motion:reduce){ .spine__track{animation:none} }

/* ─────────── УГЛОВЫЕ ЭЛЕМЕНТЫ ─────────── */
.brand{
  position:absolute;top:16px;left:20px;z-index:9;
  font:700 clamp(23px,6vw,29px)/1 var(--grid);letter-spacing:-.055em;
}
.brand i{font-style:normal;color:#24df92}
.pill{
  position:absolute;top:16px;right:18px;z-index:9;
  width:40px;height:40px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ink);border-radius:50%;
  background:transparent;color:var(--ink);cursor:pointer;
  transition:background .2s,color .2s;
}
.pill svg{width:16px;height:16px;display:block}
.pill .wave{opacity:0;transition:opacity .2s}
.pill .slash{opacity:1;transition:opacity .2s}
.pill.on{background:var(--ink);color:#fff}
.pill.on .wave{opacity:1}
.pill.on .slash{opacity:0}
.stamp{
  position:absolute;left:50%;top:28px;transform:translateX(-50%);z-index:9;
  font:400 10px/1 var(--mono);letter-spacing:.16em;color:var(--mut);
}

/* ─────────── ЗАГОЛОВОК ─────────── */
.hero{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(760px,86vw);text-align:center;z-index:6;
}
.hero h1{
  font:400 clamp(44px,12vw,104px)/1 var(--grid);
  letter-spacing:-.052em;text-transform:uppercase;
}
.hero p{margin-top:22px;font:400 11px/1.6 var(--mono);letter-spacing:.12em;color:var(--mut)}

/* ─────────── КАРТОЧКА-УПАКОВКА ─────────── */
.pack{
  position:absolute;left:50%;top:38%;
  transition:top .45s cubic-bezier(.2,.8,.2,1);
  width:var(--col);
  aspect-ratio:1/1.28;
  max-height:70vh;
  transform:translate(-50%,-50%);
  background:var(--card);
  border:1px solid var(--hair);
  display:flex;flex-direction:column;
  padding:16px 18px 14px;
  opacity:0;z-index:5;
}
.pack__head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.pack__num{font:400 clamp(24px,6vw,30px)/1 var(--grid);letter-spacing:-.05em;color:var(--mut)}
.pack__title{
  font:400 clamp(28px,8vw,40px)/0.92 var(--grid);
  letter-spacing:-.05em;text-transform:uppercase;text-align:right;
}
.pack__side{font:400 8.5px/1 var(--grid);letter-spacing:.06em;color:var(--mut);margin-top:7px}
.pack__stage{flex:1;display:flex;align-items:center;justify-content:center;padding:20px 0 18px;min-height:0}

/* ─────────── МАКЕТ ВНУТРИ УПАКОВКИ ─────────── */
/* одна разметка, четыре скина: каркас → дизайн → код → телефон */
/* фиксированная «проектная» ширина, вписывается в упаковку через scale (fitMock) */
.mock{width:320px;flex:none;display:flex;flex-direction:column;gap:7px;transform-origin:center center}
.mk-bar{display:flex;align-items:center;gap:6px;padding-bottom:6px}
.mk-bar i{display:block;width:16px;height:4px;background:#c9c9c9}
.mk-bar b{font:700 8px/1 var(--grid);letter-spacing:-.02em;margin-right:auto}
.mk-bar s{display:block;width:30px;height:11px;background:#c9c9c9;text-decoration:none}

.mk-hero{
  height:104px;padding:11px;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;
  background:#e6e6e6;
}
.mk-hero b{font:700 19px/0.94 var(--grid);letter-spacing:-.035em;color:transparent}
.mk-hero em{display:block;width:62px;height:15px;background:#c2c2c2;font-style:normal}

.mk-grid{display:flex;gap:7px;height:64px}
.mk-img{flex:1.25;background:#e6e6e6;position:relative}
.mk-txt{flex:1;display:flex;flex-direction:column;gap:5px;justify-content:center}
.mk-txt i{display:block;height:5px;background:#d5d5d5}
.mk-txt i:nth-child(2){width:76%}
.mk-txt i:nth-child(3){width:48%}
.mk-cards{display:flex;gap:7px}
.mk-cards span{flex:1;height:26px;background:#e6e6e6}
.mk-code{display:none}

/* 01 — КАРКАС */
.mock--wire .mk-bar i,.mock--wire .mk-bar s{background:none;border:1px dashed #b3b3b3}
.mock--wire .mk-hero,.mock--wire .mk-img,.mock--wire .mk-cards span{
  background:none;border:1px dashed #b3b3b3}
.mock--wire .mk-hero em{background:none;border:1px dashed #b3b3b3}
.mock--wire .mk-txt i{background:#dcdcdc}
.mock--wire .mk-img::before,.mock--wire .mk-img::after{
  content:'';position:absolute;inset:0;border-top:1px dashed #b3b3b3;transform-origin:center}
.mock--wire .mk-img::before{transform:rotate(27deg) scaleX(1.12)}
.mock--wire .mk-img::after{transform:rotate(-27deg) scaleX(1.12)}

/* 02 — ДИЗАЙН */
.mock--design .mk-bar i{background:#0a0a0a;width:14px;height:3px}
.mock--design .mk-bar s{background:var(--red)}
.mock--design .mk-hero{background:#0a0a0a}
.mock--design .mk-hero b{color:#fff}
.mock--design .mk-hero em{background:var(--red);width:58px}
.mock--design .mk-img{background:linear-gradient(148deg,#3a3a3a,#0a0a0a)}
.mock--design .mk-txt i{background:#0a0a0a;height:4px}
.mock--design .mk-cards span{background:none;border:1px solid #0a0a0a}

/* 03 — ВЁРСТКА: дизайн в окне браузера + строки кода */
.mock--code{position:relative;border:1px solid #0a0a0a;padding:20px 8px 8px}
.mock--code::before{
  content:'';position:absolute;left:0;right:0;top:0;height:14px;
  background:#0a0a0a;
}
.mock--code::after{
  content:'● ● ●';position:absolute;left:6px;top:1px;
  font:400 6px/14px var(--grid);color:#fff;letter-spacing:.22em;
}
.mock--code .mk-bar i{background:#0a0a0a;width:14px;height:3px}
.mock--code .mk-bar s{background:var(--red)}
.mock--code .mk-hero{background:#0a0a0a;height:74px}
.mock--code .mk-hero b{color:#fff;font-size:15px}
.mock--code .mk-hero em{background:var(--red);width:52px;height:13px}
.mock--code .mk-img{background:linear-gradient(148deg,#3a3a3a,#0a0a0a)}
.mock--code .mk-grid{height:48px}
.mock--code .mk-txt i{background:#0a0a0a;height:4px}
.mock--code .mk-cards span{background:none;border:1px solid #0a0a0a;height:20px}
.mock--code .mk-code{
  display:block;margin-top:8px;padding-top:7px;border-top:1px dashed #b3b3b3;
  font:400 6.6px/1.62 var(--mono);color:#8b8b8b;white-space:pre;overflow:hidden;
}
.mock--code .mk-code b{color:#0a0a0a;font-weight:400}
.mock--code .mk-code u{color:var(--red);text-decoration:none}

/* живая анимация: страница дышит скроллом, кнопка пульсирует,
   по картинке идёт блик, в коде мигает каретка */
.mock--code .mk-hero,
.mock--code .mk-grid,
.mock--code .mk-cards{animation:mkScroll 3.6s ease-in-out infinite}
.mock--code .mk-grid{animation-delay:.06s}
.mock--code .mk-cards{animation-delay:.12s}
@keyframes mkScroll{0%,100%{transform:translateY(0)}45%{transform:translateY(-9px)}}

.mock--code .mk-hero em{animation:mkPulse 1.5s ease-in-out infinite}
@keyframes mkPulse{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(1.16);opacity:.82}}
.mock--code .mk-hero em{transform-origin:left center}

.mock--code .mk-img{overflow:hidden}
.mock--code .mk-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.42) 50%,transparent 68%);
  transform:translateX(-120%);animation:mkShine 2.8s ease-in-out infinite;
}
@keyframes mkShine{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}

.mock--code .mk-code::after{
  content:'▌';color:var(--red);animation:mkCaret .8s steps(1) infinite;
}
@keyframes mkCaret{0%,49%{opacity:1}50%,100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .mock--code *{animation:none !important}
}

/* 04 — МОБИЛКА: тот же макет в телефоне, пропорции реального экрана */
.mock--phone{
  width:132px;min-height:278px;margin:0 auto;padding:16px 8px 22px;gap:6px;
  border:1.5px solid #0a0a0a;border-radius:20px;position:relative;
}
.mock--phone::before{        /* динамический остров */
  content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:38px;height:8px;border-radius:99px;background:#0a0a0a;
}
.mock--phone::after{         /* home indicator */
  content:'';position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  width:44px;height:3px;border-radius:99px;background:#0a0a0a;opacity:.35;
}
.mock--phone .mk-cards{margin-top:auto}
.mock--phone .mk-bar{gap:4px;padding-bottom:3px}
.mock--phone .mk-bar i{background:#0a0a0a;width:9px;height:2px}
.mock--phone .mk-bar i:nth-child(2),.mock--phone .mk-bar i:nth-child(3){display:none}
.mock--phone .mk-bar s{background:var(--red);width:20px;height:8px}
.mock--phone .mk-hero{background:#0a0a0a;height:64px;padding:7px}
.mock--phone .mk-hero b{color:#fff;font-size:12px}
.mock--phone .mk-hero em{background:var(--red);width:38px;height:10px}
.mock--phone .mk-grid{flex-direction:column;height:auto;gap:5px}
.mock--phone .mk-img{height:38px;background:linear-gradient(148deg,#3a3a3a,#0a0a0a)}
.mock--phone .mk-txt i{background:#0a0a0a;height:3px}
.mock--phone .mk-cards span{background:none;border:1px solid #0a0a0a;height:16px}
.mock--phone .mk-cards span:nth-child(3){display:none}
.pack__code{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.bars{
  height:32px;flex:1;
  background:repeating-linear-gradient(to right,
    #000 0 1.5px,transparent 1.5px 3px,#000 3px 4px,transparent 4px 7px,
    #000 7px 9.5px,transparent 9.5px 11px,#000 11px 12px,transparent 12px 15px);
}
.badge{
  border:1px solid var(--red);color:var(--red);border-radius:99px;
  padding:6px 13px;font:400 11px/1 var(--grid);letter-spacing:.01em;white-space:nowrap;
  opacity:0;transition:opacity .18s;
}
.badge.show{opacity:1}

/* таблица «состава» */
.facts{display:flex;gap:14px;border-top:1px solid var(--hair);padding-top:8px}
.facts__l{flex:1.02;min-width:0}
.facts__r{flex:1;min-width:0}
.fr{display:flex;justify-content:space-between;gap:8px;font:400 9px/1.42 var(--grid);letter-spacing:.005em}
.fr.head{font-weight:700;margin-bottom:1px}
.fr.zero{}
.facts__r p{font:400 9px/1.42 var(--grid);color:var(--ink)}
.facts__r p+p{margin-top:8px}
.facts__r .fine{color:var(--mut)}

/* ─────────── СКАНЕР ─────────── */
.laser{
  position:absolute;left:0;right:0;top:50%;height:1px;z-index:7;
  background:var(--red);opacity:0;
  box-shadow:0 0 14px 2px rgba(255,47,0,.55);
}
.flash{position:absolute;inset:0;background:var(--red);opacity:0;pointer-events:none;z-index:7}

/* ─────────── ЧЕК ─────────── */
.paperwrap{
  position:absolute;left:50%;transform:translateX(-50%);bottom:0;
  width:var(--col);z-index:8;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.paper{
  background:#fff;font-family:var(--mono);padding:0 14px 12px;
  box-shadow:0 -6px 26px rgba(0,0,0,.08);
}
.paper__tear{
  height:8px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' preserveAspectRatio='none'%3E%3Cpath d='M0 8 L0 3.5 L3.5 7 L7 2.5 L10.5 7 L14 3.5 L14 8 Z' fill='black'/%3E%3C/svg%3E") repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' preserveAspectRatio='none'%3E%3Cpath d='M0 8 L0 3.5 L3.5 7 L7 2.5 L10.5 7 L14 3.5 L14 8 Z' fill='black'/%3E%3C/svg%3E") repeat-x;
  transform:scaleY(-1);
}
.p-head{padding:11px 0 7px}
.p-head b{display:flex;justify-content:space-between;font:400 11px/1 var(--mono);letter-spacing:.04em}
.p-head .dash{color:var(--mut);font-size:11px;letter-spacing:0;margin-top:6px;overflow:hidden;white-space:nowrap}
.p-head span{display:block;font:400 11px/1 var(--mono);letter-spacing:.08em;margin-top:6px}

.row{font:400 10.5px/1.5 var(--mono);padding:5px 0}
.row .l1{display:flex;align-items:flex-end;gap:4px}
.row .nm{white-space:pre-wrap}
.row .dots{flex:1;border-bottom:1px dotted rgba(0,0,0,.4);transform:translateY(-3px);min-width:6px}
.row .pr{white-space:nowrap;font-weight:700;opacity:0;transition:opacity .1s}
.row .pr.show{opacity:1}
.row .sub{display:block;color:var(--mut);font-size:9px;letter-spacing:.02em;padding-left:2px}

.rule{color:var(--mut);font:400 10.5px/1.4 var(--mono);margin:7px 0 3px;overflow:hidden;white-space:nowrap}
.rule.txt{color:var(--ink);text-align:center;letter-spacing:.1em;font-size:9.5px;margin-top:9px}
.row .pr.plus{color:var(--red)}
.subtotal{display:flex;justify-content:space-between;font:400 10.5px/1 var(--mono);
  color:var(--mut);border-top:1px dashed rgba(0,0,0,.35);margin-top:7px;padding-top:8px}
.total{display:flex;justify-content:space-between;font:700 15px/1 var(--mono);
  border-top:1px solid var(--ink);margin-top:9px;padding-top:12px}
.total.alt{border-top:none;margin-top:6px;padding-top:0;
  font-weight:400;font-size:11.5px;color:var(--mut)}
.note{font:400 9px/1.7 var(--mono);color:var(--mut);margin-top:9px}
.bcode{height:40px;margin:13px 0 5px;
  background:repeating-linear-gradient(to right,#000 0 1.5px,transparent 1.5px 3px,#000 3px 4px,transparent 4px 7px,#000 7px 9.5px,transparent 9.5px 11px)}
.bnum{text-align:center;font:400 9px/1 var(--mono);letter-spacing:.34em;color:var(--mut)}
.pay{display:block;width:100%;margin-top:13px;padding:14px;background:var(--ink);color:#fff;
  border:none;cursor:pointer;font:700 11px/1 var(--mono);letter-spacing:.16em}
.pfoot{text-align:center;font:400 9px/1.8 var(--mono);color:var(--mut);margin-top:11px}

/* мобилка: чек по центру, шире */
@media (max-width:760px){
  .spine{display:none}                       /* на мобилке боковой текст мешает */
  .pack{top:34%;padding:14px 15px 12px}
  .fr{font-size:8.5px}
  .facts__r p{font-size:8.5px}
}

/* ─────────── ЗАСТАВКА: КАССА ЗАКРЫТА ─────────── */
html.locked,html.locked body{overflow:hidden;height:100%}
.gate{
  position:fixed;inset:0;z-index:99;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(120% 90% at 78% 12%, #fff 0%, #f7f7f7 42%, #e4e4e4 100%);
}
.gate.hide{opacity:0;pointer-events:none;transition:opacity .5s ease}
.gate__paper{
  width:var(--col);background:#fff;padding:0 22px 24px;
  box-shadow:0 18px 50px rgba(0,0,0,.10);
}
.gate__tear{
  height:9px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' preserveAspectRatio='none'%3E%3Cpath d='M0 9 L0 4 L3.5 8 L7 3 L10.5 8 L14 4 L14 9 Z' fill='black'/%3E%3C/svg%3E") repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' preserveAspectRatio='none'%3E%3Cpath d='M0 9 L0 4 L3.5 8 L7 3 L10.5 8 L14 4 L14 9 Z' fill='black'/%3E%3C/svg%3E") repeat-x;
  transform:scaleY(-1);
}
.gate__head{
  display:flex;justify-content:space-between;align-items:center;
  font:400 11px/1 var(--mono);letter-spacing:.08em;padding:16px 0 12px;
}
.gate__head em{
  font-style:normal;border:1px solid var(--red);color:var(--red);
  border-radius:99px;padding:5px 11px;font-size:10px;letter-spacing:.06em;
  animation:blink 1.4s steps(1) infinite;
}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.25}}
.gate__dash{color:var(--mut);font:400 11px/1 var(--mono);overflow:hidden;white-space:nowrap}
.gate__txt{
  font:400 12.5px/1.75 var(--mono);letter-spacing:.01em;
  min-height:5.4em;padding:18px 0 4px;white-space:pre-wrap;
}
.gate__txt::after{content:'▌';color:var(--red);animation:mkCaret .8s steps(1) infinite}
.gate__btn{
  display:flex;justify-content:space-between;align-items:center;width:100%;
  margin-top:14px;padding:17px 18px;background:var(--ink);color:#fff;border:none;cursor:pointer;
  font:700 12px/1 var(--mono);letter-spacing:.16em;
}
.gate__btn span{font-weight:400;letter-spacing:0}
.gate__btn:active{transform:translateY(1px)}
.gate__skip{
  display:block;text-align:center;margin-top:14px;cursor:pointer;
  font:400 10px/1 var(--mono);letter-spacing:.1em;color:var(--mut);
  text-decoration:underline;text-underline-offset:3px;
}
.gate__foot{text-align:center;margin-top:16px;font:400 9px/1.7 var(--mono);color:var(--mut)}

.pay{text-align:center;text-decoration:none}