:root{
  --ink:#fff7ee;
  --dim:rgba(255,247,238,.72);
  --accent:#ffb347;
  --bg:#120c08;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,4vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{
  font-family:"Manrope",system-ui,sans-serif;color:var(--ink);
  background:var(--bg);-webkit-font-smoothing:antialiased;
}
body.is-loading,body.slides{overflow:hidden}
body.slides{touch-action:none;overscroll-behavior:none}

/* ---------- фон ---------- */
.bg{
  position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:blur(calc(var(--b,0) * 7px)) brightness(calc(1 - var(--b,0) * .4));transform:scale(calc(1 + var(--b,0) * .03));will-change:filter,transform;
}
.shade{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 50%,transparent 40%,rgba(10,6,3,.55) 100%),
    linear-gradient(rgba(14,8,4,.2),rgba(14,8,4,.2));
}
/* градиенты под текст: слои с прозрачностью, а не смена background — иначе появляются рывком.
   Видны на нужной стороне и ровно настолько, насколько блок присутствует на экране (--sh задаёт скролл) */
.sh{position:absolute;inset:0;opacity:0}
.sh-h{background:linear-gradient(90deg,rgba(14,8,4,.7) 0%,rgba(14,8,4,.15) 65%)}
.sh-l{background:linear-gradient(90deg,rgba(14,8,4,.78) 0%,rgba(14,8,4,.25) 55%,rgba(14,8,4,.1) 100%)}
.sh-r{background:linear-gradient(270deg,rgba(14,8,4,.78) 0%,rgba(14,8,4,.25) 55%,rgba(14,8,4,.1) 100%)}
.sh-c{background:linear-gradient(rgba(14,8,4,.45),rgba(14,8,4,.45))}
body[data-side="h"] .sh-h,body[data-side="l"] .sh-l,body[data-side="r"] .sh-r,body[data-side="c"] .sh-c{opacity:var(--sh,0)}
.grain{
  position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}
  60%{transform:translate(-5%,-2%)}80%{transform:translate(4%,4%)}100%{transform:translate(0,0)}
}

/* ---------- шапка ---------- */
.top{
  position:fixed;z-index:10;top:0;left:0;right:0;padding:var(--pad);
  display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;
}
.mini-logo{
  font:800 clamp(18px,1.8vw,24px)/.86 "Unbounded",sans-serif;color:var(--ink);text-decoration:none;pointer-events:auto;
  opacity:0;transform:translateY(-10px);transition:opacity .6s var(--ease),transform .6s var(--ease);
}
body:not([data-side="h"]) .mini-logo{opacity:1;transform:none}
.mini-logo span{color:var(--accent)}
.top__right{display:flex;align-items:center;gap:10px}
.cart-btn{
  position:relative;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,247,238,.22);background:rgba(22,13,7,.45);
  color:var(--ink);display:grid;place-items:center;pointer-events:auto;text-decoration:none;transition:background .4s,border-color .4s;
}
.cart-btn:hover{background:rgba(22,13,7,.7);border-color:var(--accent)}
.cart-btn.bump{animation:bump .6s var(--ease)}
@keyframes bump{35%{transform:scale(1.18)}100%{transform:none}}
.cart-count{
  position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--accent);color:#1b0f06;
  font:800 11px/20px "Unbounded",sans-serif;text-align:center;
}
.cart-count[hidden]{display:none}
/* счётчик количества (карточка товара и корзина) */
.qty{display:inline-flex;align-items:center;border:1px solid rgba(255,247,238,.25);border-radius:999px;overflow:hidden}
.qty button{width:42px;height:44px;border:0;background:transparent;color:var(--ink);font:500 20px "Manrope",sans-serif;cursor:pointer;transition:background .3s,color .3s}
.qty button:hover{background:rgba(255,247,238,.1);color:var(--accent)}
.qty input{width:44px;height:44px;border:0;background:transparent;color:var(--ink);font:700 16px "Manrope",sans-serif;text-align:center;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input:focus{outline:none;color:var(--accent)}
.counter{
  position:fixed;z-index:10;left:50%;bottom:var(--pad);transform:translateX(-50%);
  font:500 13px "Unbounded",sans-serif;color:var(--dim);letter-spacing:.05em;pointer-events:none;
  transition:opacity .6s ease;
}
body[data-side="h"] .counter:not(.loading),.counter.hide{opacity:0}
.counter{width:170px;text-align:center}
.counter b{display:inline-block;font-variant-numeric:tabular-nums;transition:opacity .4s,filter .7s var(--ease)}
.counter span{transition:opacity .3s}
.counter.loading b{opacity:.35} /* номер полупрозрачный, пока полоска не дойдёт до конца */
.counter b.roll{animation:roll .8s var(--ease)}
@keyframes roll{from{transform:translateY(70%);opacity:0;filter:blur(4px)}to{transform:none;opacity:1;filter:none}}
/* «загрузка» следующего слайда */
.counter__bar{
  position:absolute;left:0;right:0;bottom:-14px;height:3px;border-radius:2px;overflow:hidden;
  background:rgba(255,247,238,.18);opacity:0;transition:opacity .5s ease;
}
.counter__bar u{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.counter.loading .counter__bar{opacity:1}
.counter b{color:var(--ink);font-weight:800;font-size:22px;margin-right:4px}

/* гамбургер + выпадающее меню */
.menu{position:relative;pointer-events:auto}
.burger{
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,247,238,.22);cursor:pointer;
  background:rgba(22,13,7,.45);position:relative;transition:background .4s,border-color .4s;
}
.burger:hover{background:rgba(22,13,7,.7);border-color:var(--accent)}
.burger i{
  position:absolute;left:15px;right:15px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .6s var(--ease),top .6s var(--ease);
}
.burger i:nth-child(1){top:21px}
.burger i:nth-child(2){top:29px}
.menu.open .burger i:nth-child(1){top:25px;transform:rotate(45deg)}
.menu.open .burger i:nth-child(2){top:25px;transform:rotate(-45deg)}
.menu__list{
  list-style:none;position:absolute;right:0;top:calc(100% + 12px);width:min(300px,calc(100vw - 2 * var(--pad)));
  padding:10px;border-radius:24px;background:rgba(22,13,7,.82);border:1px solid rgba(255,247,238,.16);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 30px 80px rgba(0,0,0,.4);
  visibility:hidden;opacity:0;transform:translateY(-12px) scale(.96);transform-origin:100% 0;
  transition:opacity .35s ease,transform .5s var(--ease),visibility 0s .5s;
}
.menu.open .menu__list{visibility:visible;opacity:1;transform:none;transition:opacity .35s ease,transform .6s var(--ease)}
.menu__list li{opacity:0;transform:translateX(16px);transition:opacity .3s,transform .3s}
.menu.open .menu__list li{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(.05s + var(--k) * .05s)}
.menu__list a{
  display:block;padding:14px 16px;border-radius:16px;color:var(--ink);text-decoration:none;
  font:500 18px "Manrope",sans-serif;transition:background .3s,color .3s,padding .4s var(--ease);
}
.menu__list a.on{color:var(--accent)}
.menu__list a:hover{background:rgba(255,247,238,.1);color:var(--accent);padding-left:22px}

/* ---------- панели ---------- */
.stage{position:fixed;inset:0;z-index:5;pointer-events:none}
.panel{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--pad);visibility:hidden;
}
.panel.on{visibility:visible;pointer-events:auto}
/* уход блока: --out (0..1) задаётся скроллом */
.panel>*{
  translate:0 calc(var(--out,0) * -70px);
  filter:blur(calc(var(--out,0) * 10px)) opacity(calc(1 - var(--out,0)));
}
.panel.on .hintw,.panel .hintw{pointer-events:none}
.panel--r{align-items:flex-end}
.panel--l{align-items:flex-start}
.panel--c{align-items:center;text-align:center}

/* reveal: элементы .rv появляются по очереди */
.rv{
  opacity:0;transform:translateY(28px);filter:blur(8px);
  transition:opacity .5s ease,transform .5s ease,filter .5s ease;
}
.panel.on .rv{
  opacity:1;transform:none;filter:none;
  transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);
  transition-delay:calc(var(--d,0) * 1s);
}

/* строки заголовков: маска + выезд снизу */
.ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.ln>span{
  display:block;transform:translateY(115%) rotate(4deg);transform-origin:0 100%;
  transition:transform .45s ease;
}
.panel.on .ln>span{
  transform:none;
  transition:transform 1.1s var(--ease);transition-delay:calc(var(--d,0) * 1s);
}

.card{
  width:min(560px,100%);padding:clamp(8px,1vw,16px) 0;
  text-shadow:0 2px 24px rgba(10,5,2,.45);
  opacity:0;transform:translateY(40px) scale(.96);
  transition:opacity .4s ease,transform .4s ease;
}
.panel.on .card{opacity:1;transform:none;transition:opacity .9s var(--ease),transform 1.2s var(--ease)}
.panel--l .card{transform-origin:0 50%}
.panel--r .card{transform-origin:100% 50%}

.tag{
  display:inline-block;font:500 12px "Unbounded",sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;
}
.h2{
  font:800 clamp(30px,4.2vw,58px)/1.02 "Unbounded",sans-serif;letter-spacing:-.03em;margin-bottom:22px;
}
.card p{font-size:clamp(15px,1.25vw,18px);line-height:1.6;color:var(--dim)}

.stats{display:flex;gap:clamp(16px,2.5vw,32px);margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,247,238,.16)}
.stats b{display:block;font:800 clamp(24px,2.6vw,36px) "Unbounded",sans-serif;color:var(--ink)}
.stats span{font-size:12px;color:var(--dim);line-height:1.3;display:block;margin-top:4px}

/* ---------- hero ---------- */
.panel--hero{align-items:flex-start}
.logo{
  font:800 clamp(72px,17vh,190px)/.82 "Unbounded",sans-serif;letter-spacing:-.045em;
  text-transform:uppercase;
}
.logo__l{display:block;overflow:hidden;padding:.04em .06em .1em 0;margin-bottom:-.06em}
.logo__l>span{
  display:block;transform:translateY(110%);
  transition:transform .5s ease;
}
.panel.on .logo__l>span{transform:none;transition:transform 1.3s var(--ease)}
.logo__l:nth-child(1)>span{transition-delay:.05s}
.logo__l:nth-child(2)>span{transition-delay:.17s}
.logo__l:nth-child(3)>span{transition-delay:.29s}
body.ready .panel--hero .logo__l:nth-child(2){color:var(--accent)}
.hero__sub{--d:.6;margin-top:clamp(20px,4vh,40px);font-size:clamp(16px,1.6vw,22px);line-height:1.45;color:var(--dim);max-width:360px}
.t-m{display:none}
.hintw{position:absolute;left:var(--pad);bottom:var(--pad)}
.hint{
  --d:.9;display:flex;align-items:center;gap:14px;
  font:500 12px "Unbounded",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.hint i{width:1px;height:46px;background:rgba(255,247,238,.25);position:relative;overflow:hidden}
.hint i::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--accent);animation:drip 1.8s var(--ease) infinite}
@keyframes drip{to{top:110%}}

/* ---------- CTA ---------- */
.card--cta{text-align:center;display:flex;flex-direction:column;align-items:center;width:min(640px,100%)}
.card--cta small{margin-top:18px;color:var(--dim);font-size:14px}
.btn{
  display:inline-flex;align-items:center;gap:16px;padding:18px 28px 18px 34px;border-radius:999px;
  background:var(--accent);color:#1b0f06;text-decoration:none;font:700 16px "Manrope",sans-serif;
}
.btn i{
  font-style:normal;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:#1b0f06;color:var(--accent);transition:transform .5s var(--ease);
}
.btn:hover i{transform:translateX(6px) rotate(-45deg)}
.panel.on .btn{transition-property:opacity,transform,filter,box-shadow}
.btn:hover{box-shadow:0 0 0 8px rgba(255,179,71,.25)}

/* ---------- loader ---------- */
.loader{
  position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:28px;transition:opacity .8s ease .1s,visibility 0s 1s;
}
.loader.done{opacity:0;visibility:hidden}
.loader__logo{font:800 34px/.86 "Unbounded",sans-serif;text-align:center}
.loader__bar{width:160px;height:2px;background:rgba(255,247,238,.15);overflow:hidden;border-radius:2px}
.loader__bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}

/* ---------- мобилка ---------- */
@media (max-width:760px){
  .panel{justify-content:flex-end;padding-bottom:calc(var(--pad) + 52px)}
  .panel--hero{justify-content:center}
  .logo{font-size:min(11vh,18vw)}
  .mini-logo{font-size:18px}
  .panel--r,.panel--l,.panel--c{align-items:stretch}
  .card{width:100%}
  .stats{flex-wrap:wrap}
  .t-d{display:none}
  .t-m{display:inline}
  .sh-h,.sh-l,.sh-r,.sh-c{background:linear-gradient(0deg,rgba(14,8,4,.8) 0%,rgba(14,8,4,.15) 70%)}
}
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
}

/* ---------- модальное окно с заявкой ---------- */
button.btn{border:0;cursor:pointer;font-family:"Manrope",sans-serif}
.modal{
  position:fixed;inset:0;margin:auto;width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;
  padding:clamp(24px,4vw,40px);border:1px solid rgba(255,247,238,.18);border-radius:28px;color:var(--ink);
  background:rgba(22,13,7,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 40px 100px rgba(0,0,0,.5);
  opacity:0;transform:translateY(30px) scale(.96);
  transition:opacity .4s ease,transform .6s var(--ease),overlay .6s allow-discrete,display .6s allow-discrete;
}
.modal[open]{opacity:1;transform:none}
@starting-style{.modal[open]{opacity:0;transform:translateY(30px) scale(.96)}}
.modal::backdrop{background:rgba(8,4,2,0);backdrop-filter:blur(0);transition:background .5s ease,backdrop-filter .5s ease,overlay .5s allow-discrete,display .5s allow-discrete}
.modal[open]::backdrop{background:rgba(8,4,2,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@starting-style{.modal[open]::backdrop{background:rgba(8,4,2,0);backdrop-filter:blur(0)}}
.modal__x{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,247,238,.2);background:transparent;cursor:pointer;transition:border-color .3s}
.modal__x:hover{border-color:var(--accent)}
.modal__x i{position:absolute;left:11px;right:11px;top:19px;height:2px;border-radius:2px;background:var(--ink)}
.modal__x i:nth-child(1){transform:rotate(45deg)}.modal__x i:nth-child(2){transform:rotate(-45deg)}
.modal__h{font:800 clamp(24px,3vw,32px)/1.1 "Unbounded",sans-serif;letter-spacing:-.03em;margin-bottom:24px;padding-right:44px}
.fld{display:block;margin-bottom:16px}
.fld span{display:block;font-size:13px;color:var(--dim);margin-bottom:6px}
.fld input,.fld textarea{
  width:100%;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,247,238,.2);background:rgba(255,247,238,.06);
  color:var(--ink);font:500 16px "Manrope",sans-serif;resize:vertical;transition:border-color .3s,background .3s;
}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--accent);background:rgba(255,247,238,.1)}
.fld .bad{border-color:#ff7a59}
.modal__err{color:#ff9d84;font-size:14px;margin-bottom:14px}
.modal__send{margin-top:6px}
.modal__note{display:block;margin-top:14px;font-size:12px;line-height:1.4;color:var(--dim)}
.modal__ok p{color:var(--dim);line-height:1.6;margin-bottom:24px}
.modal .btn i{flex:none}
.modal,.modal *{touch-action:pan-y}

/* ---------- окно про cookie ---------- */
.cookie{
  position:fixed;z-index:90;right:var(--pad);bottom:var(--pad);width:min(400px,calc(100vw - 2 * var(--pad)));
  padding:20px 22px;border-radius:22px;background:rgba(22,13,7,.92);border:1px solid rgba(255,247,238,.18);
  box-shadow:0 24px 60px rgba(0,0,0,.45);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;transform:translateY(30px) scale(.97);pointer-events:none;
  transition:opacity .5s ease,transform .8s var(--ease);
}
.cookie.show{opacity:1;transform:none;pointer-events:auto}
.cookie p{font-size:14px;line-height:1.5;color:var(--dim);margin-bottom:16px}
.cookie a{color:var(--accent);text-decoration:none}
.cookie a:hover{text-decoration:underline}
.cookie__btns{display:flex;gap:10px;flex-wrap:wrap}
.cookie button{
  padding:11px 18px;border-radius:999px;border:1px solid rgba(255,247,238,.25);background:transparent;color:var(--ink);
  font:700 13px "Manrope",sans-serif;cursor:pointer;transition:background .3s,color .3s,border-color .3s;
}
.cookie button:hover{border-color:var(--accent);color:var(--accent)}
.cookie .cookie__ok{background:var(--accent);border-color:var(--accent);color:#1b0f06}
.cookie .cookie__ok:hover{background:#ffc774;color:#1b0f06}

/* ---------- документы: ссылки на главной и в меню ---------- */
.legal{position:fixed;z-index:9;right:var(--pad);bottom:var(--pad);display:flex;gap:18px;font-size:12px}
.legal a{color:var(--dim);text-decoration:none;transition:color .3s}
.legal a:hover{color:var(--accent)}
.menu__list .menu__legal{display:flex;flex-wrap:wrap;gap:6px 14px;padding:12px 16px 6px;margin-top:6px;border-top:1px solid rgba(255,247,238,.14)}
.menu__list .menu__legal a{display:inline;padding:0;font-size:12px;color:var(--dim)}
.menu__list .menu__legal a:hover{background:none;padding:0;color:var(--accent)}
@media (max-width:760px){
  .legal{display:none}
  .cookie{left:var(--pad);right:var(--pad);width:auto}
}