/* КРИТИЧЕСКИЕ СТИЛИ - точно как в оригинале */

/* Скрытие контента - для предотвращения FOUC */
.layout {
  opacity: 0 !important;
  visibility: hidden !important;
}
.layout.loaded {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Reset и базовые стили - БЕЗ ИЗМЕНЕНИЙ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow:visible;overflow-x:clip;font-family:"Inter Tight",sans-serif;background-color:#EAEAEA;transition:background-color .5s}
body{min-height:100svh;width:100%;font-family:inherit}

/* Переменные - точно как в main.scss */
:root{
  --ease-inout-quart:cubic-bezier(0.77,0,0.175,1);
}

/* Контейнеры - точно как в main.scss */
.container{max-width:1840px;width:100%;display:grid;grid-template-columns:repeat(12,1fr);column-gap:20px;margin:0 auto;height:100%}
.wrapper{width:100%;box-sizing:border-box}

/* Шапка - минимальные стили без изменений */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(247,240,236,0.6);transition:color .3s, background-color .3s ease; height: 70px}

/* Офер - стили для предотвращения FOUC */

/* Типографика - точно как в typography.scss */
.h2{font-family:'Inter Tight',sans-serif;font-weight:medium;line-height:115%}
.t2{font-family:'Inter Tight',sans-serif;line-height:140%;font-weight:medium}
.t3{font-family:'Inter Tight',sans-serif;line-height:140%;font-weight:medium}

/* Кнопки - для предотвращения FOUC */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border:none;border-radius:8px;font-family:'Inter Tight',sans-serif;font-weight:500;text-decoration:none;cursor:pointer;transition:all .3s ease}
.btn.dark{background-color:#D9291A;color:#FFF}
.btn.dark:hover{background-color:#B8221A}

/* UIButton компонент */
.ui-button{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border:none;border-radius:8px;font-family:'Inter Tight',sans-serif;font-weight:500;text-decoration:none;cursor:pointer;transition:all .3s ease}
.ui-button.dark{background-color:#D9291A;color:#FFF}
.ui-button.dark:hover{background-color:#B8221A}

/* Кнопки - ТОЧНО как в Button.vue с правильными цветами */
.button{
  z-index:3;
  min-height:80px;
  background-color:#FFFFFF;
  display:flex;
  cursor:pointer;
  justify-content:space-between;
  padding-right:20px;
  border:1px solid transparent;
  appearance:none;
  text-decoration:none;
}
.button span{padding:20px;align-self:flex-end;color:#26293F;text-align:left}

.button.dark{background-color:#EAEAEA}

/* Layout - минимальные стили */
.layout{background-color:#FFF}
main{display:flex;flex-direction:column}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;height:auto;display:block}

/* ScrollSmoother - НЕ задаем стили, пусть GSAP сам управляет */

/* Scrollbar */
::-webkit-scrollbar{width:0}

/* Оптимизация производительности */
.supports-will-change .animate-element{will-change:transform,opacity}
.in-viewport{opacity:1;transform:translateY(0)}

/* Адаптивность - критические медиа-запросы */
@media(max-width:767.98px){
  .container{grid-template-columns:repeat(2,1fr)}
  .wrapper{padding:0 20px}
}
@media(min-width:768px) and (max-width:1023.98px){
  .container{grid-template-columns:repeat(6,1fr)}
  .wrapper{padding:0 20px}
}
@media(min-width:1024px) and (max-width:1365.98px){
  .wrapper{padding:0 20px}
}
@media(min-width:1366px){
  .wrapper{padding:0 40px}
}