/* Critical CSS - загружаемый с высоким приоритетом */

/* Font loading optimization - критично для LCP! */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Inter'), local('Inter Regular'), local('Arial'), local('Helvetica');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Inter SemiBold'), local('Inter-SemiBold'), local('Arial'), local('Helvetica');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Inter Bold'), local('Inter-Bold'), local('Arial Bold'), local('Helvetica Bold');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local('Inter ExtraBold'), local('Inter-ExtraBold'), local('Arial Black'), local('Helvetica-Bold');
}

/* SEO typography scope */
.seo-content{font-size:1rem;line-height:1.7;color:inherit}
.seo-content :where(h1,h2,h3,h4,h5,h6){font-weight:700;line-height:1.25;margin:1.2em 0 .6em;color:inherit}
.seo-content h1{font-size:2rem}
.seo-content h2{font-size:1.5rem}
.seo-content h3{font-size:1.25rem}
.seo-content p{margin:.8em 0}
.seo-content a{text-decoration:underline;color:inherit}
.seo-content :where(ul,ol){margin:.8em 0 .8em 1.25em;padding-left:1.25em}
.seo-content ul{list-style:disc}
.seo-content ol{list-style:decimal}
.seo-content li{margin:.3em 0}
.seo-content strong{font-weight:700}
.seo-content em{font-style:italic}
.seo-content hr{margin:1.5em 0;border:0;border-top:1px solid rgba(128,128,128,.25)}

/* Base body styles */
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#fff;
  background: #12192a;
  position: relative;
  min-height: 100vh;
}

/* Убрано для ускорения загрузки логотипа */
/* [data-no-flash]{visibility:hidden} */
/* .hydrated [data-no-flash]{visibility:visible} */

/* Background gradients - optimized for GPU */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(ellipse 800px 600px at 10% 20%, rgba(139,92,246,.22), transparent),
    radial-gradient(ellipse 1000px 800px at 90% 0%, rgba(6,182,212,.18), transparent),
    radial-gradient(ellipse 600px 500px at 50% 100%, rgba(99,102,241,.15), transparent),
    radial-gradient(ellipse 900px 700px at 0% 100%, rgba(236,72,153,.10), transparent),
    linear-gradient(180deg, #141824 0%, #12192a 50%, #171e2e 100%);
  pointer-events: none;
  z-index: 0;
  transform: translateZ(0);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(circle 600px at 30% 20%, rgba(139,92,246,.08), transparent),
    radial-gradient(circle 800px at 70% 80%, rgba(6,182,212,.06), transparent);
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  transform: translateZ(0);
}

.hero{padding:40px 16px}
.container{max-width:1200px;margin:0 auto}

/* CLS fixes */
#blog-preview .card{min-height:340px}
#blog-preview .card div[style*="background"]{width:100%!important;height:160px!important;flex-shrink:0!important}

/* Additional Tailwind utility classes */
.hidden{display:none}
.lg\:flex{display:flex}
.lg\:hidden{display:none}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-1{gap:0.25rem}
.gap-2{gap:0.5rem}
.gap-6{gap:1.5rem}
.gap-1\.5{gap:0.375rem}
.gap-2\.5{gap:0.625rem}
.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.inset-0{inset:0}
.inset-x-0{left:0;right:0}
.top-0{top:0}
.z-10{z-index:10}
.z-40{z-index:40}
.z-50{z-index:50}
.inline-flex{display:inline-flex}
.flex{display:flex}
.flex-col{flex-direction:column}
.overflow-hidden{overflow:hidden}
.rounded-xl{border-radius:0.75rem}
.rounded-lg{border-radius:0.5rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}
.h-8{height:2rem}
.h-9{height:2.25rem}
.h-10{height:2.5rem}
.h-16{height:4rem}
.h-4{height:1rem}
.h-5{height:1.25rem}
.h-\[1px\]{height:1px}
.h-\[2px\]{height:2px}
.w-4{width:1rem}
.w-5{width:1.25rem}
.w-8{width:2rem}
.w-9{width:2.25rem}
.w-10{width:2.5rem}
.w-full{width:100%}
.max-w-7xl{max-width:80rem}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.font-bold{font-weight:700}
.font-medium{font-weight:500}
.text-white{color:rgb(255 255 255)}
.text-white\/80{color:rgb(255 255 255 / 0.8)}
.text-white\/85{color:rgb(255 255 255 / 0.85)}
.text-white\/90{color:rgb(255 255 255 / 0.9)}
.bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}
.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}
.from-slate-800{--tw-gradient-from:#1e293b;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 41 59 / 0))}
.from-purple-500{--tw-gradient-from:#a855f7;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgb(168 85 247 / 0))}
.from-purple-600{--tw-gradient-from:#9333ea;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgb(147 51 234 / 0))}
.from-white{--tw-gradient-from:#fff;--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgb(255 255 255 / 0))}
.via-indigo-900{--tw-gradient-stops:var(--tw-gradient-from), #312e81, var(--tw-gradient-to, rgb(49 46 129 / 0))}
.via-purple-500\/10{--tw-gradient-stops:var(--tw-gradient-from), rgb(168 85 247 / 0.1), var(--tw-gradient-to, rgb(168 85 247 / 0))}
.via-purple-500\/15{--tw-gradient-stops:var(--tw-gradient-from), rgb(168 85 247 / 0.15), var(--tw-gradient-to, rgb(168 85 247 / 0))}
.via-cyan-400{--tw-gradient-stops:var(--tw-gradient-from), #22d3ee, var(--tw-gradient-to, rgb(34 211 238 / 0))}
.to-slate-900{--tw-gradient-to:#0f172a}
.to-cyan-500{--tw-gradient-to:#06b6d4}
.to-cyan-600{--tw-gradient-to:#0891b2}
.to-cyan-200{--tw-gradient-to:#a5f3fc}
.to-cyan-500\/0{--tw-gradient-to:rgb(6 182 212 / 0)}
.to-cyan-100{--tw-gradient-to:#cffafe}
.bg-clip-text{-webkit-background-clip:text;background-clip:text}
.text-transparent{color:transparent}
.-translate-y-2{--tw-translate-y:-0.5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.translate-y-2{--tw-translate-y:0.5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.-translate-y-full{--tw-translate-y:-100%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.opacity-0{opacity:0}
.opacity-75{opacity:0.75}
.invisible{visibility:hidden}
.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
.duration-300{transition-duration:300ms}
.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}
.group:hover .group-hover\:opacity-100{opacity:1}
.group:hover .group-hover\:text-white{color:#fff}
.group:hover .group-hover\:from-purple-500\/30{--tw-gradient-from:rgb(168 85 247 / 0.3)}
.blur{filter:blur(8px)}
.border{border-width:1px}
.border-white\/10{border-color:rgb(255 255 255 / 0.1)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.pointer-events-none{pointer-events:none}
.ml-2{margin-left:0.5rem}
.mt-3{margin-top:0.75rem}
.mt-6{margin-top:1.5rem}
.p-1{padding:0.25rem}
.p-1\.5{padding:0.375rem}
.mx-auto{margin-left:auto;margin-right:auto}
.block{display:block}
.h-auto{height:auto}
.tracking-tight{letter-spacing:-0.025em}
.object-contain{object-fit:contain}
img.h-full.w-full.object-contain{height:100%;width:100%}
.from-purple-500\/20{--tw-gradient-from:rgb(168 85 247 / 0.2);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgb(168 85 247 / 0))}
.to-cyan-500\/20{--tw-gradient-to:rgb(6 182 212 / 0.2)}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.group:hover .group-hover\:bg-white\/15{background-color:rgb(255 255 255 / 0.15)}
.inline-block{display:inline-block}

/* Responsive utilities */
@media (min-width: 640px){
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .sm\:text-lg{font-size:1.125rem;line-height:1.75rem}
}
@media (min-width: 1024px){
  .lg\:flex{display:flex}
  .lg\:hidden{display:none}
  .lg\:px-8{padding-left:2rem;padding-right:2rem}
}
@media (min-width: 768px){
  .md\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}
}