body{margin:0;padding:0;font-family:'Montserrat',sans-serif;background:#0f2027;overflow-x:hidden;}
.neon-bg{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0;background:linear-gradient(120deg,#0f2027 0%,#2c5364 100%);pointer-events:none;}
#neon-canvas{position:absolute;top:230px;left:0;width:100vw;height:340px;pointer-events:none;z-index:0;}
.content{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:48px 20px 40px 20px;display:flex;flex-direction:column;align-items:center;}
header{margin-bottom:36px;width:100%;display:flex;justify-content:center;}
h1 {
    font-size: 2.8rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-align: center;
    color: transparent;
    text-shadow: 0 0 40px #00fff7, 0 8px 24px #001b32;
}
.video-glass{width:430px;height:250px;background:rgba(33,45,68,0.36);border-radius:28px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;margin:10px 0 54px;box-shadow:0 4px 40px #00fff72b,0 2px 16px #000b;border:1.5px solid rgba(18,255,255,0.15);backdrop-filter:blur(10px);}
.main-nav-line{display:flex;gap:34px;justify-content:center;width:100%;margin-bottom:28px;z-index:1;}
.main-btn{width:270px;height:100px;background:rgba(18,255,255,0.21);color:#fff;font-size:1.13rem;font-weight:700;border:none;border-radius:22px;box-shadow:0 0 18px #0ff2;position:relative;overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.25;}
.main-btn::after{content:'';position:absolute;top:-70%;left:-50%;width:200%;height:230%;background:linear-gradient(120deg,#00fff7 0%,#43e97b 100%);opacity:0.18;transform:rotate(-25deg);transition:opacity .25s;z-index:0;}
.main-btn:hover{transform:translateY(-8px) scale(1.05);box-shadow:0 0 32px #00fff7b0,0 0 80px #43e97b55;background:rgba(18,255,255,0.38);}
.premium-block{margin-bottom:26px;}
.premium-btn{border:2px solid #38f9d7;width:270px;height:100px;}
.activity-btns{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;margin-bottom:10px;}
.activity-btn,.back-btn{padding:13px 21px;background:rgba(15,32,39,0.79);color:#38f9d7;font-size:1.08rem;font-weight:600;border:1.5px solid #38f9d7;border-radius:11px;box-shadow:0 0 18px #38f9d744;cursor:pointer;}
.free-spots-glass{width:100%;max-width:950px;margin-top:32px;padding:22px 0;background:rgba(0,255,247,0.09);border-radius:24px;box-shadow:0 0 40px #00fff733,0 4px 22px #001c2b77;backdrop-filter:blur(8px);}
.free-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px;}
.free-btn{background:#fff6;border:1.5px dashed #43e97b;color:#2c5364;font-size:1.05rem;border-radius:8px;padding:8px 17px;cursor:pointer;}
@media (max-width:900px){.video-glass{width:99vw;height:170px;} .main-nav-line{flex-direction:column;gap:18px;} .main-btn,.premium-btn{width:99vw;height:75px;}}

/* Новые стили для кнопок в стиле стекла */
.buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: 30px 0;
}

.nav-glass-btn {
    width: 270px;
    height: 100px;
    background: rgba(33, 45, 68, 0.36);
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 40px #00fff72b, 0 2px 16px #000b;
    border: 1.5px solid rgba(18, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    text-align: center;
    z-index: 1;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
}

.nav-glass-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 50px rgba(0, 255, 247, 0.4), 0 4px 20px rgba(0, 0, 0, 0.8);
}

@media (max-width: 900px) {
    .nav-glass-btn {
    width: 270px;
    height: 100px;
    background: rgba(33, 45, 68, 0.36);
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 40px #00fff72b, 0 2px 16px #000b;
    border: 1.5px solid rgba(18, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    text-align: center;
    z-index: 1;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
}
}


/* Align spans vertically for premium button */
.nav-glass-btn.premium-btn {
    flex-direction: column;
}

/* Neon gradient hover for nav buttons */
@keyframes neonGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.nav-glass-btn:hover {
    background: linear-gradient(120deg, #00fff7, #38f9d7, #43e97b);
    background-size: 300% 300%;
    animation: neonGradient 3s ease infinite;
}

/* Change text color to black on hover for readability */
.nav-glass-btn:hover {
    color: #000 !important;
    transition: color 0.3s ease;
}


/* Статический футер */
.site-footer {
    background: #003366;
    color: #00ffff;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
}


/* Flex layout so footer sits at bottom when content is short */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Allow .content to grow and push footer down */
.content {
  flex: 1;
}

/* Override broken .neon-bg rules */
.neon-bg {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -1 !important;
  background: linear-gradient(120deg, #0f2027 0%, #2c5364 100%) !important;
  pointer-events: none;
}




/* Сделать фон футера прозрачным (без синей полоски) */
.site-footer {
  background: transparent !important;
  color: #00ffff;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
}

/* Модальное окно */
.modal {
    display: none;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: linear-gradient(120deg, #00fff7, #38f9d7, #43e97b);
    background-size: 300% 300%;
    animation: pulse 3s infinite;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    color: #fff;
    box-shadow: 0 0 30px rgba(0, 255, 247, 0.7);
}

.modal-content h2 {
    margin-bottom: 20px;
    font-size: 2rem;
}

.modal-content button {
    background: #0f2027;
    color: #00fff7;
    border: 2px solid #00fff7;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
}

@keyframes pulse {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.back-to-main { margin-top: 0px;
    text-align: center;
}

.back-link {
    color: #00fff7;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid #00fff7;
    padding: 10px 20px;
    border-radius: 10px;
    transition: background 0.3s, color 0.3s;
}

.back-link:hover {
    background: #00fff7;
    color: #0f2027;
}

/* Адаптация под мобильные устройства */
@media (max-width: 600px) {
    .video-glass video {
        width: 95vw;
    }
    .nav-glass-btn {
        width: 95vw;
        height: 80px;
    }
    .back-link {
        font-size: 1rem;
        padding: 8px 16px;
    }
}

.lang-switcher {
    position: fixed;
    top: 20px;
    right: 20px;
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.1);
    padding: 5px 10px;
    border-radius: 8px;
    display: flex;
    gap: 8px;
    z-index: 10;
}
.lang-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.3s;
}
.lang-btn.active,
.lang-btn:hover {
    background: rgba(255,255,255,0.2);
}

/* START H1 STYLE */

.main-header {
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 5;
    margin-top: 20px;
    margin-bottom: 20px;
}
.main-header h1 {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 2px;
    background: linear-gradient(90deg, #00fff7, #00f27a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 10px rgba(0,255,247,0.7), 0 0 20px rgba(0,242,122,0.7);
    margin: 0;
}
/* END H1 STYLE */


/* Neon-style header for main title */

/* Стили для перенесённого на новую строку ARTANOV */
.brand-name {
    display: block;
    text-align: center;
    font-size: 4rem;       /* при необходимости подкорректируйте */
    color: #00fff7;
    margin-top: 20px;
    font-weight: 700;
}
/* === Mobile-only fixes: lock horizontal scroll and center content === */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    touch-action: pan-y !important;
    overscroll-behavior-x: none !important;
  }
  /* Ensure neon background and canvas fill exactly the viewport */
  .neon-bg, #neon-canvas {
    left: 0 !important;
    width: 100% !important;
  }
  /* Add safe-area padding and center main content */
  .content {
    padding: 0 10px !important;
  }
  /* Center video and buttons without changing their desktop styles */
  .video-glass {
    width: 95vw !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .nav-glass-btn, .main-btn, .premium-btn, .activity-btn {
    width: 95vw !important;
    max-width: 270px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Keep language switcher fixed top-right safely */
  .lang-switcher {
    position: fixed !important;
    top: env(safe-area-inset-top, 20px) !important;
    right: env(safe-area-inset-right, 20px) !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
  }
}

/* Добавлено для управления отступами */
.nav-glass-btn.premium-btn {
    gap: 4px;
}
.nav-glass-btn.premium-btn br {
    display: none;
}

/* Ensure back-to-main stays in place and fits on mobile */
@media (max-width: 600px) {
  .back-to-main {
    position: static !important;
    margin-top: 20px;
  }
  .back-link {
    display: inline-block;
    padding: 8px 16px;
    font-size: 1rem;
    max-width: 90vw;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


@media (max-width: 600px) {
}

@media (max-width: 900px) {
}

/* Адаптивный стиль заголовка #main-title */
#main-title {
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  font-weight: 900;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 40px;
  padding: 0 5vw;
  word-break: break-word;
  background: linear-gradient(90deg, #00fff7 0%, #00ff00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 
      0 0 8px rgba(0, 255, 247, 0.7),
      0 0 16px rgba(0, 255, 247, 0.5),
      0 0 24px rgba(0, 255, 247, 0.3);
}