*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--color-bg);color:var(--color-text);}
body{font-family:var(--font-body);-webkit-font-smoothing:antialiased;}
a{color:var(--color-accent);text-decoration:none;}
a:hover{color:var(--color-accent-hover);}
::selection{background:var(--color-accent);color:var(--color-bg);}
input{font-family:inherit;}
button{font-family:inherit;}

@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes floatY2{0%,100%{transform:translateY(0)}50%{transform:translateY(16px)}}
@keyframes glowPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.14)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes trustMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ringPulse{0%{transform:scale(.9);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}

.trust-marquee:hover .trust-track{animation-play-state:paused}
[data-scrollx]::-webkit-scrollbar{display:none;}

/* -------- hover states (ported from style-hover bindings) -------- */
.hov-ghost{transition:background .3s,border-color .3s;}
.hov-ghost:hover{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.28)!important;color:#F5ECE2;}
.hov-cta{transition:transform .3s,filter .3s;}
.hov-cta:hover{transform:translateY(-2px);filter:brightness(1.05);color:inherit;}
a.hov-cta:hover{color:#fff;}
a.hov-cta-dark:hover{color:#1a120b;}
.hov-menu-item{transition:background .25s,color .25s;}
.hov-menu-item:hover{background:rgba(237,120,33,.14);color:#FFB877!important;}
.hov-arrow{transition:background .3s,color .3s,border-color .3s;}
.hov-arrow:hover{background:#ED7821!important;color:#fff!important;border-color:#ED7821!important;}
.hov-foot{transition:color .25s;}
.hov-foot:hover{color:#F5ECE2!important;}
.hov-card{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s;}
.hov-card:hover{transform:translateY(-8px);box-shadow:0 40px 70px -30px rgba(80,40,10,.5);}

/* -------- header dropdown -------- */
.grills-menu{position:absolute;top:calc(100% + 14px);left:-16px;z-index:70;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .28s;}
.grills-wrap:hover .grills-menu{opacity:1;visibility:visible;transform:translateY(0);}

/* -------- плитки моделей в меню «Грили» -------- */
.grill-tile{position:relative;display:block;aspect-ratio:1;border-radius:9px;overflow:hidden;text-decoration:none;background:#F1E7D8;border:1px solid rgba(255,255,255,.1);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s;}
.grill-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9px 9px 6px;}
.grill-tile span{position:absolute;left:10px;bottom:9px;max-width:calc(100% - 18px);z-index:2;font-family:'Oswald',sans-serif;font-weight:600;font-size:12.5px;line-height:1.05;letter-spacing:-.3px;text-transform:uppercase;color:#231A12;background:rgba(241,231,216,.82);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:4px 8px;border-radius:6px;}
.grill-tile:hover{transform:translateY(-3px);box-shadow:0 18px 34px -14px rgba(0,0,0,.55);}
.grill-tile:hover img{transform:none;}

/* -------- burger -------- */
.burger{display:none;position:relative;flex:0 0 auto;width:44px;height:44px;border-radius:8px;background:rgba(255,255,255,.05);border:none;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4.5px;padding:0;}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:#E8DECF;transition:transform .3s,opacity .3s;}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.burger-menu{position:absolute;top:calc(100% + 10px);left:12px;z-index:70;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .28s;}
.burger-menu.open{opacity:1;visibility:visible;transform:translateY(0);}
.burger-menu > div{width:min(300px,calc(100vw - 40px));}
.burger-menu .bm-acc{display:none;}
.call-btn{display:none;}

/* -------- ≤1024: компактная шапка с бургером -------- */
@media (max-width:1024px){
  .burger{display:flex;}
  .hdr-nav .nav-extra{display:none!important;}
}

/* -------- hero slides -------- */
.hero-track{display:grid;}
.hero-slide{grid-area:1 / 1;padding-right:24px;will-change:opacity,transform,filter;opacity:0;transform:translateY(18px);filter:blur(6px);pointer-events:none;transition:opacity .5s ease,transform .6s ease,filter .5s ease;}
.hero-slide.on{opacity:1;transform:translateY(0);filter:blur(0);pointer-events:auto;transition:opacity .85s ease .18s,transform .95s cubic-bezier(.16,.84,.3,1) .18s,filter .85s ease .18s;}
.hero-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity 1s ease;opacity:0;}
.hero-bg-video.on{opacity:1;}

.hero-card{display:flex;align-items:center;height:108px;border-radius:12px;overflow:hidden;cursor:pointer;padding:8px;transition:background .5s ease,box-shadow .5s ease;background:rgba(20,14,10,.34);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:none;}
.hero-card.on{background:linear-gradient(135deg,rgba(255,158,77,.28),rgba(198,66,10,.3));box-shadow:0 16px 34px -14px rgba(198,66,10,.35);}
.hero-card .thumb{width:92px;height:92px;flex:0 0 auto;border-radius:8px;overflow:hidden;background-color:#F2ECE2;background-size:cover;background-repeat:no-repeat;background-position:center;}
.hero-card .panel{overflow:hidden;white-space:nowrap;display:flex;flex-direction:column;justify-content:center;will-change:max-width,opacity,transform;transition:max-width .7s cubic-bezier(.4,0,.2,1),opacity .55s cubic-bezier(.4,0,.2,1),padding .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1);max-width:0px;opacity:0;transform:translateX(-10px);padding-left:0;padding-right:0;}
.hero-card.on .panel{max-width:250px;opacity:1;transform:translateX(0);padding-left:16px;padding-right:18px;}

/* -------- cook tabs -------- */
.cook-tab{padding:13px 24px;border-radius:12px;cursor:pointer;font-weight:800;font-size:14.5px;font-family:'Wix Madefor Text',sans-serif;transition:all .3s;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#E8DECF;box-shadow:none;}
.cook-tab.on{border-color:transparent;background:linear-gradient(135deg,#FF9E4D,#ED7821 55%,#C6420A);color:#1a120b;}
.cook-visual{position:absolute;inset:0;overflow:hidden;background-color:#241812;background-size:cover;background-position:center;opacity:1;transform:scale(1);transition:opacity .24s ease,transform .55s ease;}
.cook-visual.fade{opacity:0;transform:scale(1.05);}
.cook-panel{position:relative;z-index:2;padding:48px 40px;max-width:56%;opacity:1;transform:translateX(0);transition:opacity .24s ease,transform .36s cubic-bezier(.2,.7,.2,1);}
.cook-panel.fade{opacity:0;transform:translateX(-18px);}

/* -------- models grid -------- */
.model-card{position:relative;display:block;border-radius:16px;overflow:hidden;text-decoration:none;transform:scale(1);z-index:1;box-shadow:0 20px 40px -30px rgba(80,40,10,.35);transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s ease,box-shadow .5s ease;}
.models-grid.hovering .model-card{transform:scale(.965);}
.models-grid.hovering .model-card.hover{transform:scale(1.04);z-index:5;box-shadow:0 40px 80px -30px rgba(80,40,10,.5);}
.model-card .card-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1);transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.model-card.hover .card-bg{transform:scale(1.06);}
.model-card .card-prod{position:absolute;background-size:contain;background-repeat:no-repeat;transition:transform .5s ease;}

/* -------- anatomy pins -------- */
.pin{position:absolute;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;cursor:pointer;z-index:5;border:none;padding:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#FF9E4D,#ED7821 55%,#C6420A);box-shadow:0 8px 22px rgba(237,120,33,.5);transition:background .3s ease,box-shadow .3s ease;}
.pin.on{z-index:9;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.45);}
.pin .icon{position:relative;width:22px;height:22px;transform-origin:center;transform:rotate(0deg);transition:transform .4s cubic-bezier(.2,.7,.2,1);}
.pin.on .icon{transform:rotate(45deg);}
.pin .bar-h{position:absolute;top:50%;left:2px;right:2px;height:2.8px;border-radius:2px;transform:translateY(-50%);background:#fff;transition:background .3s ease;}
.pin .bar-v{position:absolute;left:50%;top:2px;bottom:2px;width:2.8px;border-radius:2px;transform:translateX(-50%);background:#fff;transition:background .3s ease;}
.pin.on .bar-h,.pin.on .bar-v{background:linear-gradient(135deg,#FF9E4D,#ED7821 55%,#C6420A);}
.part-popup{position:absolute;z-index:8;}
.part-popup > div{width:min(452px,calc(100vw - 32px))!important;}
@media (max-width:460px){
  .part-popup .popup-img{flex:0 0 92px!important;height:92px!important;}
}
.explode-part{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center center;pointer-events:none;filter:drop-shadow(0 16px 26px rgba(40,20,8,.20));}

/* -------- responsive (ported from design) -------- */
@media (max-width:760px){
  html,body{overflow-x:hidden;}
  /* hero-карточки: только квадраты миниатюр, при нехватке ширины — горизонтальный свайп */
  #hero-cards{flex-wrap:nowrap!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  #hero-cards::-webkit-scrollbar{display:none;}
  .hero-card{flex:0 0 auto;scroll-snap-align:start;}
  .hero-card .panel{display:none;}
  section{padding-top:58px!important;padding-bottom:58px!important;}
  [data-reveal]{padding-left:18px!important;padding-right:18px!important;}
  .m-grid2{grid-template-columns:1fr!important;gap:26px!important;}
  .models-grid{grid-template-columns:1fr 1fr!important;grid-auto-rows:auto!important;gap:12px!important;}
  .model-card{grid-column:auto!important;grid-row:auto!important;}

  /* карточки моделей: тег и текст в потоке, чтобы не наезжали друг на друга */
  .model-card{display:flex;flex-direction:column;min-height:190px;}
  .card-tag{position:static!important;align-self:flex-start;margin:14px 0 10px 14px;}
  .card-content{position:static!important;margin-top:auto;padding:12px 14px 16px!important;max-width:100%!important;}
  .model-card.has-prod .card-content{max-width:68%!important;}
  .model-card h3{font-size:20px!important;}
  .model-card[data-model="bbqguru"] .card-prod,
  .model-card[data-model="icon"] .card-prod{width:80%!important;height:96%!important;right:-14%!important;}
  .recipes-grid{grid-template-columns:1fr 1fr!important;gap:14px!important;}
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:26px!important;}
  .cook-panel{max-width:92%!important;padding:26px 20px!important;}
  .anatomy-card{padding:52px 0!important;}

  /* шапка фиксируется внизу экрана */
  header{top:auto!important;bottom:0;padding:6px 12px calc(10px + env(safe-area-inset-bottom))!important;}
  header > div{gap:6px;padding:8px 10px!important;}
  #logo-img{height:17px!important;}
  #grill-thumb{display:none;}
  .hdr-nav a{padding:10px 8px!important;}
  .nav-acc{display:none!important;}
  .burger-menu .bm-acc{display:block;}
  .call-btn{display:flex;}
  .icon-btn{width:38px!important;height:38px!important;}
  .burger{width:38px;height:38px;}

  /* выпадающие меню открываются вверх */
  .grills-menu{top:auto;bottom:calc(100% + 14px);left:50%;right:auto;transform:translate(-50%,10px);}
  .grills-wrap:hover .grills-menu{transform:translate(-50%,0);}
  .grills-menu > div{width:min(320px,calc(100vw - 40px))!important;grid-template-columns:1fr 1fr!important;}
  .burger-menu{top:auto;bottom:calc(100% + 10px);}

  /* контент начинается сверху без отступа под шапку, а подвал не перекрывается ею */
  .promo-bar{margin:20px auto 0!important;}
  footer{padding-bottom:120px!important;}

  /* «О Monolith»: показатели в 3 строки — цифра слева, подпись справа, бледные разделители.
     display:contents делает цифры и подписи ячейками общей сетки, поэтому обе колонки
     выровнены по левому краю по всем строкам */
  .stats-grid{grid-template-columns:auto 1fr!important;column-gap:0!important;row-gap:0!important;align-items:stretch;}
  .stats-grid > div{display:contents;}
  .stats-grid > div > div{padding:14px 0;display:flex;flex-direction:column;justify-content:center;}
  .stats-grid > div > div:last-child{margin-top:0!important;padding-left:22px;}
  .stats-grid > div:not(:last-child) > div{border-bottom:1px solid rgba(80,40,10,.14);}
  .stats-grid > div:first-child > div{padding-top:0;}
  .stats-grid > div:last-child > div{padding-bottom:0;}

  /* «О Monolith»: левитирующие карточки не выходят за края браузера (16px от края):
     контейнер имеет боковые отступы 18px, поэтому смещение -2px = 16px от края экрана */
  .float-card-left{left:-2px!important;}
  .float-card-right{right:-2px!important;}

  /* hero: карточки слайдера — прижаты к низу hero-экрана, квадраты вдвое меньше */
  #top{flex-direction:column;padding-bottom:0!important;}
  .hero-inner{flex:1;align-content:center;padding:24px 18px!important;grid-template-columns:1fr!important;}
  #hero-cards{position:static!important;width:100%;padding:0 18px 24px;margin:auto 0 0;}
  .hero-card{height:58px;padding:6px;border-radius:10px;}
  .hero-card .thumb{width:46px;height:46px;border-radius:6px;}
}
@media (max-width:460px){
  .models-grid,.footer-grid{grid-template-columns:1fr!important;}
  .recipes-grid{grid-template-columns:1fr 1fr!important;gap:12px!important;}
}

/* -------- узкие смартфоны: шапка ужимается вплоть до 320px -------- */
@media (max-width:400px){
  header{padding:4px 8px calc(8px + env(safe-area-inset-bottom))!important;}
  header > div{gap:4px;padding:6px 8px!important;}
  header a[href="#top"]{flex:0 1 auto!important;min-width:0;}
  #logo-img{height:14px!important;max-width:100%;}
  .hdr-nav{min-width:0;}
  .hdr-nav a{padding:8px 6px!important;font-size:12px;}
  .icon-btn{width:34px!important;height:34px!important;}
  .burger{width:34px;height:34px;}
}

/* -------- поиск в шапке: поле выезжает из-под кнопки, перекрывая меню -------- */
.hdr-search{
  position:absolute;
  top:50%;
  right:108px;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:8px;
  height:44px;
  width:0;
  overflow:hidden;
  padding:0;
  border-radius:8px;
  background:rgba(24,17,12,.97);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12);
  opacity:0;
  pointer-events:none;
  z-index:5;
  transition:width .4s cubic-bezier(.2,.7,.2,1),padding .4s cubic-bezier(.2,.7,.2,1),opacity .28s ease;
}
.hdr-search.open{
  opacity:1;
  pointer-events:auto;
  padding:0 52px 0 14px; /* справа — место под кнопку-крестик (бывшую лупу) */
}
/* лупа превращается в крестик, когда поиск открыт; своя подложка кнопки убирается,
   чтобы не рисовалась «коробка в коробке» поверх поля */
#search-toggle .ico-close{display:none;}
#search-toggle.is-open .ico-search{display:none;}
#search-toggle.is-open .ico-close{display:block;}
#search-toggle.is-open{background:transparent!important;}
.hdr-search .s-ico{flex:0 0 auto;}
.hdr-search input{
  flex:1 1 auto;
  min-width:0;
  height:100%;
  background:transparent;
  border:none;
  outline:none;
  color:#F5ECE2;
  font-family:'Wix Madefor Text',system-ui,sans-serif;
  font-size:14px;
}
.hdr-search input::placeholder{color:#B7A793;}
.hdr-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}
/* мобильная шапка: высота поля равна высоте иконок, отступ справа — под крестик */
@media (max-width:760px){
  .hdr-search{height:38px;}
  .hdr-search.open{padding:0 44px 0 12px;}
}
@media (max-width:400px){
  .hdr-search{height:34px;}
  .hdr-search.open{padding:0 40px 0 12px;}
}
@media (prefers-reduced-motion:reduce){
  .hdr-search{transition:opacity .2s ease;}
}

/* -------- анимация знака Coalla в подвале: моргание + периодическое подмигивание -------- */
.ca-mark{transform-box:fill-box;transform-origin:50% 96%;animation:caTilt 8s ease-in-out infinite;}
.ca-eyeL,.ca-eyeR{transform-box:fill-box;transform-origin:center;}
.ca-eyeL{animation:caBlinkL 8s infinite;}
.ca-eyeR{animation:caBlinkR 8s infinite;}
@keyframes caBlinkL{0%,11%{transform:scaleY(1)}12.5%{transform:scaleY(.1)}14%,48.5%{transform:scaleY(1)}50%{transform:scaleY(.1)}52%,80%{transform:scaleY(1)}81.5%{transform:scaleY(.1)}83%,100%{transform:scaleY(1)}}
@keyframes caBlinkR{0%,11%{transform:scaleY(1)}12.5%{transform:scaleY(.1)}14%,80%{transform:scaleY(1)}81.5%{transform:scaleY(.1)}83%,100%{transform:scaleY(1)}}
@keyframes caTilt{0%,46%,60%,100%{transform:rotate(0)}52%{transform:rotate(-7deg)}}
@media (prefers-reduced-motion:reduce){.ca-mark,.ca-eyeL,.ca-eyeR{animation:none;}}