/* ===========================
   FONT FACE
   =========================== */
@font-face {
  font-family: 'Octyabrskaya';
  src: url('../fonts/octyabrskaya.eot');
  src: url('../fonts/octyabrskaya.eot?#iefix') format('embedded-opentype'),
       url('../fonts/octyabrskaya.woff2') format('woff2'),
       url('../fonts/octyabrskaya.woff') format('woff'),
       url('../fonts/octyabrskaya.ttf') format('truetype'),
       url('../fonts/octyabrskaya.svg#octyabrskaya') format('svg');
  font-display: swap;
}

/* ===========================
   BASE FONTS
   =========================== */
body, p, span { font-family: 'Proxima Nova Rg', sans-serif; }
input         { font-family: 'Proxima Nova Lt', sans-serif; }

/* ===========================
   X-CLOAK (Alpine.js)
   =========================== */
[x-cloak] { display: none !important; }

/* ===========================
   GRADIENT TEXT
   =========================== */
@keyframes gradientAnimation {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.gradient-text {
  background: linear-gradient(90deg, #000000, #909394, #000000);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientAnimation 5s linear infinite;
}

/* ===========================
   BUTTONS
   =========================== */
.gradient-btn {
  position: relative;
  background: linear-gradient(90deg, rgb(34,183,212), rgb(59,130,246));
  transition: background .3s ease;
}
.gradient-btn:hover {
  background: linear-gradient(90deg, rgb(59,130,246), rgb(34,183,212));
}
.gradient-btn::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, rgb(236,196,16), rgb(190,144,60));
}

/* ===========================
   SITE PICKER
   =========================== */
.site-picker-wrapper select {
  background: transparent !important;
  color: white             !important;
  border: none             !important;
  appearance: none         !important;
  padding-right: 1.5rem;
}
.site-picker-wrapper select:focus {
  outline: none   !important;
  box-shadow: none!important;
}

/* ===========================
   CLIP PATH
   =========================== */
.clip-path-polygon {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%);
}

/* ===========================
   TYPEWRITER EFFECT
   =========================== */
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #000;
  animation: typing 4s steps(40,end) forwards,
             blink-caret .75s step-end infinite;
}
@keyframes typing    { from { width: 0; } to { width: 100%; } }
@keyframes blink-caret { 50% { border-color: #000; } }

/* ===========================
   SWIPER SLIDER
   =========================== */
.hero-slider         { width: 100%; }
.hero-slider .swiper-slide { width: auto; }

/* ===========================
   REDUCED MOTION
   =========================== */
@media (prefers-reduced-motion: reduce) {
  .gradient-text { animation: none; }
}


/* ===========================
   PRELOADER
   =========================== */
#preloader {
  position: fixed;
  inset: 0;                     /* top:0; right:0; bottom:0; left:0; */
  background: #ffffff;          /* или любой фон под лоадер */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
#preloader .spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #3490dc;    /* цвет «спицы» */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}