/**
 * Critical CSS - Above the fold styles only
 * Только критичные стили для первого экрана
 * @version 2.1.0
 */

/* ============================================
   CRITICAL RESET & BASE
   ============================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.5;color:#18181b;background:#d4d4d8;min-height:100vh;-webkit-font-smoothing:antialiased;padding-top:8px}
img{max-width:100%;display:block}

/* ============================================
   CRITICAL HEADER - Visible immediately
   ============================================ */
.site-header{position:sticky;top:12px;z-index:100;max-width:1200px;margin:12px auto 0;padding:4px;background:linear-gradient(135deg,rgba(228,228,231,.95) 0%,rgba(212,212,216,.95) 100%);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:1px solid rgba(255,255,255,.5);border-radius:20px;box-shadow:0 4px 24px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.6)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:12px 28px}
.site-logo a{font-size:21px;font-weight:700;color:#27272a}
.site-logo img{height:32px;width:auto;display:block}
.main-navigation{flex-grow:1}
.nav-menu{display:flex;justify-content:center;gap:8px;list-style:none;margin:0;padding:0}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.skip-to-content{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:#007aff;color:#fff;padding:12px 24px;border-radius:0 0 12px 12px;font-weight:500;z-index:100000;transition:top .2s}
.skip-to-content:focus{top:0}

/* ============================================
   BASE LAYOUT
   ============================================ */
.site-main{min-height:500px;padding:24px 24px 60px}
.content-area{max-width:1200px;margin:0 auto;padding:0}

/* ============================================
   FOUC PREVENTION - Hide until loaded
   ============================================ */
.mobile-logo,.mobile-bottom-nav,.site-footer{display:none}

/* ============================================
   MOBILE CRITICAL STYLES
   ============================================ */
@media (max-width:768px){
.desktop-header,.site-footer{display:none!important}
.mobile-logo{display:block!important}
.site-main{padding-bottom:100px}
.mobile-bottom-nav{display:block!important;position:fixed!important;bottom:0!important;left:16px!important;right:16px!important;z-index:9999!important;background:linear-gradient(135deg,rgba(228,228,231,.98) 0%,rgba(212,212,216,.98) 100%);backdrop-filter:saturate(180%) blur(20px);border:1px solid rgba(255,255,255,.5);border-bottom:none;border-radius:24px 24px 0 0;box-shadow:0 -4px 24px rgba(0,0,0,.1)}
}