:root {
    --primary-color:#667eea;
     --secondary-color:#764ba2;
     --accent-color:#ffdd57;
     --text-color:#fff;
     --transition-speed:0.3s
}
 @keyframes fadeIn {
    from {
        opacity:0
    }
     to {
        opacity:1
    }
}
 body {
     margin: 0;
     padding: 0;
     font-family: "Arial", sans-serif;
    /* Разрешаем прокрутку по Y, X прячем чтобы не было горизонтального скролла */
     overflow-y: auto;
     overflow-x: hidden;
     position: relative;
    /* Градиент как у тебя */
     background: linear-gradient(135deg, var(--primary-color) 0, var(--secondary-color) 100%);
     color: var(--text-color);
     text-align: center;
     animation: fadeIn 1s ease-in;
    /* На мобильных отключаем перетаскивание страницы "за края" (чуть меньше дёрганий) */
     overscroll-behavior-y: contain;
}
 ::selection {
    background:rgba(255,221,87,0.3);
     color:var(--text-color)
}
#particles-js {
  position: fixed;   /* фиксируем как фон, не участвует в потоке */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
}
.container {
  position: relative;
  z-index: 1;
  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* чтобы контент шёл сверху вниз и мог расти */
  align-items: center;

  /* Минимум — высота экрана, но можно больше (для длинного контента) */
  min-height: 100svh; /* svh корректно учитывает мобильные панели */
  height: auto;

  padding: 20px;

  /* Чуть больше места снизу под кнопки/карточки, учитываем безопасную область айфонов */
  padding-bottom: max(20px, 80px);
  padding-bottom: calc(max(20px, 80px) + env(safe-area-inset-bottom));
}
 .construction-icon {
    font-size:8rem;
     margin-bottom:20px;
     animation:bounceIn 1s ease-in-out;
     will-change:transform
}
#compare-area {
  margin-bottom: 24px;
}
 @keyframes float {
    0%,100% {
        transform:translateY(0)
    }
     50% {
        transform:translateY(-20px)
    }
}
 h1 {
    font-size:3rem;
     font-weight:bold;
     margin-bottom:20px;
     animation:fadeInDown 2s ease-in-out;
     will-change:transform
}
 p {
    font-size:1.5rem;
     margin-bottom:30px;
     animation:fadeInUp 2s ease-in-out;
     will-change:transform
}
 .clock {
    background:rgba(255,255,255,0.1);
     padding:20px;
     border-radius:10px;
     font-size:2.5rem;
     font-weight:bold;
     min-width:300px;
     box-shadow:0 4px 15px rgba(0,0,0,0.2);
     margin-bottom:20px;
     backdrop-filter:blur(5px);
     -webkit-backdrop-filter:blur(5px);
     border:1px solid rgba(255,255,255,0.3)
}
 .timezone-select {
    margin-top:20px;
     background:rgba(255,255,255,0.1);
     padding:10px;
     border-radius:5px;
     color:var(--text-color);
     border:1px solid rgba(255,255,255,0.3);
     font-size:1rem;
     cursor:pointer
}
 .timezone-select option {
    background:var(--primary-color);
     color:var(--text-color)
}
 .timezone-select:focus,.social-links a:focus {
    outline:none;
     box-shadow:0 0 0 3px rgba(255,221,87,0.5)
}
 .timezone-select:hover {
    background:rgba(255,255,255,0.2)
}
 @keyframes clockPulse {
    0% {
        transform:scale(1)
    }
     50% {
        transform:scale(1.02)
    }
     100% {
        transform:scale(1)
    }
}
 .clock:hover {
    animation:clockPulse 2s infinite
}
 ::-webkit-scrollbar {
    width:8px
}
 ::-webkit-scrollbar-track {
    background:rgba(255,255,255,0.1)
}
 ::-webkit-scrollbar-thumb {
    background:rgba(255,255,255,0.2);
     border-radius:4px
}
 .loading {
    opacity:0.7;
     pointer-events:none
}
 .error {
    border:1px solid #ff6b6b;
     background:rgba(255,107,107,0.1)
}
 @media (max-width:768px) {
    .construction-icon {
        font-size:5rem
    }
     h1 {
        font-size:2.5rem
    }
     p {
        font-size:1.2rem
    }
     .clock {
        font-size:2rem;
         min-width:250px;
         padding:15px
    }
     .timezone-select {
        font-size:0.9rem;
         padding:8px
    }
     .social-links a {
        font-size:1.5rem
    }
     h3 {
        font-size:1.5rem
    }
}
 @media (max-width:480px) {
    .construction-icon {
        font-size:4rem
    }
     h1 {
        font-size:2rem
    }
     p {
        font-size:1rem
    }
     .clock {
        font-size:1.5rem;
         min-width:200px;
         padding:10px
    }
}
 @media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi) {
    .construction-icon,.social-links a {
        -webkit-font-smoothing:antialiased;
         -moz-osx-font-smoothing:grayscale
    }
}
 @media (prefers-reduced-motion:reduce) {
    * {
        animation-duration:0.01ms !important;
         animation-iteration-count:1 !important;
         transition-duration:0.01ms !important;
         scroll-behavior:auto !important
    }
}
 @media print {
    .social-links,.timezone-select {
        display:none
    }
     body {
        background:none;
         color:#000
    }
     .clock {
        border:1px solid #000;
         box-shadow:none
    }
}