/* GOOD LAB — shared styles */
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#111214;overflow-y:scroll;scrollbar-gutter:stable}
body{margin:0;background:#111214;color:#f4f4f5;font-family:Manrope,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#ee2429;text-decoration:none;transition:color .15s,background .15s,border-color .15s}
a:hover{color:#ffffff}
img{max-width:100%}
input,textarea{font-family:Manrope,sans-serif}
input::placeholder,textarea::placeholder{color:#6b6d70}

/* content container: full width of the window, side padding scales with the screen */
.wrap{max-width:100%!important}
@media (min-width:1400px){.wrap{padding-left:56px!important;padding-right:56px!important}}
@media (min-width:1900px){.wrap{padding-left:72px!important;padding-right:72px!important}}

/* image slots: fill their positioned parent, crop with cover */
.slot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#1d1e20}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .wrap{padding-left:22px!important;padding-right:22px!important}
  .col-collapse{grid-template-columns:1fr!important}
  .nav-center{display:none!important}
  .h-hero{font-size:34px!important}
  .h-sec{font-size:26px!important}
}
@media (max-width:600px){
  .wrap{padding-left:16px!important;padding-right:16px!important}
  .h-hero{font-size:28px!important}
}

/* ================= Motion layer (app.js ставит классы) ================= */
:root{
  --gl-red:#c71316;
  --gl-red-soft:rgba(199,19,22,0.55);
  --gl-ease:cubic-bezier(.22,.61,.36,1);
}

/* --- индикатор прокрутки --- */
#gl-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,#c71316 0%,#ff6b5e 60%,#ffffff 100%);
  transform:scaleX(0);transform-origin:0 50%;transition:opacity .35s ease;opacity:0}
#gl-progress.gl-on{opacity:1}

/* --- шапка: уплотняется при прокрутке --- */
.gl-ready .gl-header{transition:background .35s var(--gl-ease),box-shadow .35s var(--gl-ease),border-color .35s ease}
.gl-ready .gl-header .wrap{transition:padding .35s var(--gl-ease)}
.gl-header.gl-stuck{background:#0d0e10;box-shadow:0 10px 30px -18px rgba(0,0,0,0.95)}
.gl-header.gl-stuck .wrap{padding-top:12px;padding-bottom:12px}

/* --- подчёркивание пунктов меню --- */
.nav-center a{position:relative;padding-bottom:5px}
.nav-center a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gl-red);
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .35s var(--gl-ease)}
.nav-center a:hover::after,.nav-center a:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}

/* --- появление блоков при прокрутке --- */
.gl-js .gl-reveal{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .75s var(--gl-ease),transform .75s var(--gl-ease);
  transition-delay:var(--gl-delay,0ms);will-change:opacity,transform}
.gl-js .gl-reveal.gl-left{transform:translate3d(-32px,0,0)}
.gl-js .gl-reveal.gl-right{transform:translate3d(32px,0,0)}
.gl-js .gl-reveal.gl-zoom{transform:scale(.955)}
.gl-js .gl-reveal.gl-in{opacity:1;transform:none}

/* --- картинки: проявление после загрузки + зум по наведению --- */
.gl-media{overflow:hidden}
.gl-media .slot{transition:transform 1.2s var(--gl-ease),opacity .8s ease,filter .8s ease}
.gl-media:hover .slot{transform:scale(1.07)}
.gl-js img.slot{opacity:0;filter:blur(14px) saturate(.65)}
.gl-js img.slot.gl-loaded{opacity:1;filter:none}

/* --- живой фон героя --- */
.gl-hero-media{animation:gl-kenburns 26s ease-in-out infinite alternate}
@keyframes gl-kenburns{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.5%,-2%,0)}}
.gl-hero-glow{position:absolute;inset:0;pointer-events:none;opacity:.72;
  background:radial-gradient(46% 52% at 18% 26%, rgba(199,19,22,0.30) 0%, rgba(199,19,22,0) 68%)}

/* --- вход героя --- */
.gl-js .gl-hero-item{opacity:0;transform:translate3d(0,22px,0)}
.gl-js .gl-hero-item.gl-in{opacity:1;transform:none;
  transition:opacity .85s var(--gl-ease),transform .85s var(--gl-ease);transition-delay:var(--gl-delay,0ms)}

/* --- карточки услуг --- */
.hv3{transition:transform .45s var(--gl-ease),border-color .3s ease,box-shadow .45s var(--gl-ease)}
.hv3:hover{transform:translateY(-6px);box-shadow:0 22px 46px -24px rgba(0,0,0,0.95),0 0 0 1px rgba(199,19,22,0.22)}

/* --- кнопки: блик и нажатие --- */
.hv1,.hv2{position:relative;overflow:hidden;
  transition:transform .22s var(--gl-ease),background .25s ease,border-color .25s ease,box-shadow .3s ease,color .2s ease}
.hv1::after,.hv2::after{content:'';position:absolute;top:0;bottom:0;left:-140%;width:55%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.26) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-18deg)}
.hv1:hover::after,.hv2:hover::after{animation:gl-shine .8s var(--gl-ease)}
@keyframes gl-shine{from{left:-140%}to{left:150%}}
.hv1:hover{box-shadow:0 14px 34px -14px rgba(199,19,22,0.85)}
.hv1:active,.hv2:active{transform:scale(.97)}

/* --- широкие таблицы прокручиваются вбок --- */
.gl-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%}
.gl-table-scroll::-webkit-scrollbar{height:6px}
.gl-table-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.18);border-radius:3px}

/* --- строки прейскуранта --- */
tbody tr{transition:background .25s ease}
tbody tr:hover{background:rgba(199,19,22,0.07)!important}

/* --- поля формы --- */
input:focus,textarea:focus{border-color:var(--gl-red-soft)!important;background:rgba(255,255,255,0.05)!important;
  box-shadow:0 0 0 3px rgba(199,19,22,0.15)}
input,textarea{transition:border-color .25s ease,box-shadow .25s ease,background .25s ease}
button[disabled]{opacity:.65;cursor:progress}

/* --- кнопка «наверх» --- */
#gl-top{position:fixed;right:22px;bottom:22px;z-index:40;width:46px;height:46px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,0.18);border-radius:3px;background:rgba(29,30,32,0.9);backdrop-filter:blur(8px);
  color:#f4f4f5;cursor:pointer;opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .35s var(--gl-ease),transform .35s var(--gl-ease),border-color .25s ease,background .25s ease}
#gl-top.gl-on{opacity:1;transform:none;pointer-events:auto}
#gl-top:hover{border-color:var(--gl-red);background:rgba(199,19,22,0.16)}

/* --- мобильное меню --- */
#gl-burger{display:none;width:42px;height:38px;flex-shrink:0;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,0.18);border-radius:3px;background:transparent;cursor:pointer;padding:0}
#gl-burger span{position:relative;display:block;width:18px;height:2px;background:#f4f4f5;
  transition:background .2s ease,transform .3s var(--gl-ease)}
#gl-burger span::before,#gl-burger span::after{content:'';position:absolute;left:0;width:18px;height:2px;background:#f4f4f5;
  transition:transform .3s var(--gl-ease),top .2s ease}
#gl-burger span::before{top:-6px}
#gl-burger span::after{top:6px}
#gl-burger.gl-open span{background:transparent}
#gl-burger.gl-open span::before{top:0;transform:rotate(45deg)}
#gl-burger.gl-open span::after{top:0;transform:rotate(-45deg)}
#gl-menu{display:none;overflow:hidden;max-height:0;opacity:0;border-top:1px solid rgba(255,255,255,0.08);
  background:rgba(17,18,20,0.98);backdrop-filter:blur(14px);
  transition:max-height .4s var(--gl-ease),opacity .3s ease}
#gl-menu.gl-open{max-height:420px;opacity:1}
#gl-menu .gl-menu-inner{max-width:1240px;margin:0 auto;padding:14px 22px 22px;display:flex;flex-direction:column;gap:2px}
#gl-menu a{padding:14px 2px;border-bottom:1px solid rgba(255,255,255,0.06);color:#c9cacb;
  font-family:'Exo 2',sans-serif;font-weight:600;font-size:14px;letter-spacing:0.12em;text-transform:uppercase;
  opacity:0;transform:translateX(-10px);transition:opacity .35s var(--gl-ease),transform .35s var(--gl-ease),color .2s ease}
#gl-menu.gl-open a{opacity:1;transform:none;transition-delay:var(--gl-delay,0ms)}
#gl-menu a:hover{color:#ffffff}
#gl-menu .gl-menu-call{margin-top:14px;border:none;text-align:center;background:#c71316;color:#ffffff;border-radius:2px;padding:16px}

/* --- отступ под липкую шапку при переходе по якорю --- */
[id]{scroll-margin-top:96px}

@media (max-width:900px){
  #gl-burger{display:flex}
  #gl-menu{display:block}
  #gl-top{right:14px;bottom:14px}
  /* строки «текст слева — кнопка справа» переносятся, а не растягивают страницу */
  .gl-flex-row{flex-wrap:wrap;row-gap:18px}
  /* колонки уже схлопнуты в одну, боковой заезд тут только растянул бы страницу */
  .gl-js .gl-reveal.gl-left,.gl-js .gl-reveal.gl-right{transform:translate3d(0,26px,0)}
  .gl-js .gl-reveal.gl-in{transform:none}
  .gl-table-scroll table{min-width:600px}
  .gl-grid{grid-template-columns:1fr!important}
}
@media (max-width:600px){
  /* телефон живёт в бургер-меню, в узкой шапке он ломает строку */
  .gl-header a[href^="tel:"]{display:none}
  .gl-header .wrap{gap:10px!important;flex-wrap:nowrap!important}
  .gl-header a[style*="Michroma"]{font-size:16px!important}
  .gl-header .hv1{padding:11px 14px!important;font-size:11px!important;letter-spacing:0.06em!important}
  .hv1,.hv2{padding-left:22px!important;padding-right:22px!important}
}

/* --- уважение к системной настройке «меньше движения» --- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .gl-js .gl-reveal,.gl-js .gl-hero-item{opacity:1!important;transform:none!important;transition:none!important}
  .gl-js img.slot{opacity:1!important;filter:none!important}
  .gl-hero-media{animation:none!important}
  .gl-media:hover .slot,.hv3:hover{transform:none!important}
  .hv1:hover::after,.hv2:hover::after{animation:none!important}
}


/* Michroma одновесная: вес логотипу добавляет обводка того же цвета.
   0.034 от кегля — та же пропорция, что в векторных файлах бренд-пака. */
a[style*="Michroma"],
div[style*="Michroma"]{-webkit-text-stroke:0.034em currentColor}

/* Надподписи разделов: тот же красный, что в логотипе, на тёмном фоне даёт 4.03:1 —
   ниже нормы 4.5:1. Для мелкого текста берём осветлённый оттенок и кегль побольше. */
.gl-eyebrow{
  font-size:15px!important;
  letter-spacing:0.2em!important;
  color:#ff5449!important;
}
@media (max-width:600px){
  .gl-eyebrow{font-size:13px!important;letter-spacing:0.16em!important}
}

/* ================= Палитра постера GOOD LAB ================= */
:root{
  --gl-red-deep:#b00500;
  --gl-edge:rgba(255,255,255,0.16);
  --gl-steel-1:#ffffff;
  --gl-steel-2:#c9ccd2;
  --gl-steel-3:#8f939b;
  --gl-hexes:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27180%27%20height%3D%27104%27%20viewBox%3D%270%200%20180%20104%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27rgba%28255%2C255%2C255%2C0.05%29%27%20stroke-width%3D%271.4%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M-60%200%20L-30%20-52%20L30%20-52%20L60%200%20L30%2052%20L-30%2052%20Z%27%2F%3E%3Cpath%20d%3D%27M-60%20104%20L-30%2052%20L30%2052%20L60%20104%20L30%20156%20L-30%20156%20Z%27%2F%3E%3Cpath%20d%3D%27M30%2052%20L60%200%20L120%200%20L150%2052%20L120%20104%20L60%20104%20Z%27%2F%3E%3Cpath%20d%3D%27M120%200%20L150%20-52%20L210%20-52%20L240%200%20L210%2052%20L150%2052%20Z%27%2F%3E%3Cpath%20d%3D%27M120%20104%20L150%2052%20L210%2052%20L240%20104%20L210%20156%20L150%20156%20Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* полотно: светлее в центре, глухо-чёрное к краям, поверх — соты */
body{
  background:
    radial-gradient(120% 80% at 50% 0%, #1b1b1f 0%, #0e0e11 45%, #08080a 100%),
    #08080a;
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--gl-hexes);background-repeat:repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,0.5) 60%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,0.5) 60%,transparent 100%);
}
body > div{position:relative;z-index:1}

/* секции с плоской заливкой (класс ставит app.js) пропускают соты сквозь себя */
.gl-surface{background:linear-gradient(180deg,rgba(21,21,25,0.86) 0%,rgba(11,11,14,0.92) 100%)!important}
.gl-surface-deep{background:linear-gradient(180deg,rgba(14,14,17,0.9) 0%,rgba(8,8,10,0.95) 100%)!important}

/* заголовки с металлическим отливом, как «МЫ ОТКРЫЛИСЬ» на постере */
.h-hero,.h-sec{
  background:linear-gradient(180deg,var(--gl-steel-1) 0%,var(--gl-steel-2) 62%,var(--gl-steel-3) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
}

/* карточки услуг: скругление, градиент и светлая кромка по верху */
.hv3{
  border-radius:14px!important;
  background:linear-gradient(180deg,#1c1c21 0%,#101014 100%)!important;
  box-shadow:0 24px 48px -34px #000, inset 0 1px 0 rgba(255,255,255,0.05);
}
.hv3::after{content:'';position:absolute;left:14%;right:14%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gl-edge),transparent);z-index:3}
.hv3{position:relative}

/* кнопки: красный градиент со свечением вместо плоской заливки */
.hv1{
  border-radius:8px!important;
  background:linear-gradient(180deg,#e10600 0%,var(--gl-red-deep) 100%)!important;
  box-shadow:0 10px 24px -14px rgba(225,6,0,0.9), inset 0 1px 0 rgba(255,255,255,0.18);
}
.hv1:hover{filter:brightness(1.14);background:linear-gradient(180deg,#f01a10 0%,#c00600 100%)!important}
.hv2{border-radius:8px!important;background:rgba(255,255,255,0.03)}
.hv2:hover{background:rgba(255,255,255,0.07)}

/* таблицы прейскуранта и плашки — тот же язык форм */
.gl-table-scroll table{border-radius:10px;overflow:hidden}