/* Кастомные стили для красивой типографики и производительности */
:root{--primary-font:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif;--secondary-font:'Roboto',-apple-system,BlinkMacSystemFont,sans-serif;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-bold:700;--font-weight-black:800}

/* Базовые стили */
html,body{height:100%!important;width:100%!important;margin:0!important;padding:0!important;overflow-x:hidden!important;font-family:var(--secondary-font)!important;font-weight:var(--font-weight-normal)!important;line-height:1.6!important;letter-spacing:.01em!important;-webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important}

#root{min-height:100vh!important;min-width:100vw!important}

/* Типографика */
h1,h2,h3,h4,h5,h6,.text-3xl,.text-2xl,.text-xl,.text-lg{font-family:var(--primary-font)!important;font-weight:var(--font-weight-bold)!important;letter-spacing:-.02em!important}

p,span,div,a,button{font-family:var(--secondary-font)!important}

.text-3xl,.text-4xl,.text-5xl{font-family:var(--primary-font)!important;font-weight:var(--font-weight-black)!important;line-height:1.1!important}

.text-sm,.text-xs{font-family:var(--secondary-font)!important;font-weight:var(--font-weight-normal)!important;letter-spacing:.015em!important}

.font-medium{font-weight:var(--font-weight-medium)!important}
.font-bold{font-weight:var(--font-weight-bold)!important}
.font-black{font-weight:var(--font-weight-black)!important}

/* Кнопки */
button,.btn,[role="button"]{font-family:var(--primary-font)!important;font-weight:var(--font-weight-medium)!important;letter-spacing:.025em!important;position:relative;overflow:hidden}

/* Отключение анимаций для производительности */
*{animation:none!important;transition:none!important;transform:none!important}

.focus-ring:focus{outline:none;box-shadow:0 0 0 3px rgba(59,130,246,.5)}

/* Отступ для основного контента */
.min-h-screen .flex.flex-col{margin-top:60px!important}

/* Адаптивная типографика */
@media (max-width:640px){
  .min-h-screen .flex.flex-col{margin-top:80px!important}
  .text-3xl,.text-4xl,.text-5xl{line-height:1.2!important;font-size:clamp(2rem,9vw,2.5rem)!important}
  p,span,.text-lg,.text-base{font-size:1.1rem!important;line-height:1.6!important}
  .text-sm{font-size:1rem!important}
  button,.btn,a[role="button"],a{min-height:48px!important;padding:12px 16px!important;font-size:1rem!important;border-radius:12px!important;margin-bottom:8px!important}
  button span:first-child,.btn span:first-child{font-size:1.2rem!important}
  .container-mobile{padding:16px!important;margin:0 8px!important}
  .flex.flex-col{gap:12px!important}
  .absolute.top-4.right-4{top:8px!important;right:8px!important;z-index:50!important}
  .absolute.top-full.right-0{z-index:60!important;background:rgba(75,85,99,.9)!important;backdrop-filter:blur(12px)!important;border:1px solid rgba(255,255,255,.2)!important}
  .absolute.top-full.right-0 button{background:transparent!important;border:none!important;width:100%!important;text-align:left!important}
  .absolute.top-full.right-0 button:hover{background:rgba(255,255,255,.1)!important}
}

@media (min-width:641px) and (max-width:1024px){
  .text-3xl,.text-4xl,.text-5xl{line-height:1.1!important;font-size:clamp(2.5rem,7vw,3.5rem)!important}
  .container-tablet{padding:24px!important;margin:0 16px!important}
}

@media (min-width:1025px){
  .min-h-screen .flex.flex-col{margin-top:70px!important}
  .text-3xl,.text-4xl,.text-5xl{line-height:1.1!important;font-size:clamp(3rem,5vw,4.5rem)!important}
  .container-desktop{padding:32px!important;margin:0 24px!important}
}

@media (min-width:641px){
  button,.btn,a[role="button"],a{min-height:44px!important;padding:10px 20px!important;font-size:.95rem!important;border-radius:10px!important}
}

/* Hover эффекты для десктопа */
@media (hover:hover) and (pointer:fine){
  button:hover,.btn:hover,a[role="button"]:hover,a:hover{background-color:rgba(255,255,255,.1)!important;backdrop-filter:blur(8px)!important;cursor:pointer!important}
}

/* Touch эффекты для мобильных */
@media (hover:none) and (pointer:coarse){
  button:active,.btn:active,a[role="button"]:active,a:active{background-color:rgba(255,255,255,.2)!important;transform:scale(.98)!important}
  button:hover,.btn:hover,a[role="button"]:hover,a:hover{background-color:transparent!important}
}

/* Малые экраны */
@media (max-width:374px){
  .text-3xl,.text-4xl,.text-5xl{font-size:clamp(1.5rem,7vw,2rem)!important}
  button,.btn,a[role="button"],a{font-size:.9rem!important;padding:10px 12px!important}
}

/* 4K+ экраны */
@media (min-width:1920px){
  .text-3xl,.text-4xl,.text-5xl{font-size:clamp(3rem,3.5vw,5rem)!important}
  button,.btn,a[role="button"],a{font-size:1.1rem!important;padding:14px 28px!important}
}

/* GPU оптимизация */
.gpu-accelerated{transform:translateZ(0);backface-visibility:hidden;perspective:1000px}
.animate-container{contain:layout style paint;transform:translateZ(0)}
.reveal-on-scroll,.reveal-on-scroll.revealed{opacity:1}