/* =========================
   Bot Flow — MAIN CSS
   ========================= */

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --bg-primary:#0a0a0a;
  --bg-secondary:#111111;
  --bg-card:#1a1a1a;
  --bg-glass:rgba(26,26,26,.8);
  --accent:#3B82F6;
  --accent-light:#60A5FA;
  --accent-dark:#1D4ED8;
  --text-primary:#ffffff;
  --text-secondary:#9CA3AF;
  --text-muted:#6B7280;
  --border:rgba(255,255,255,.1);
  --gradient-primary:linear-gradient(135deg,#3B82F6 0%,#1D4ED8 100%);
  --gradient-secondary:linear-gradient(135deg,#60A5FA 0%,#3B82F6 100%);
  --shadow-sm:0 4px 6px -1px rgba(0,0,0,.3);
  --shadow-lg:0 20px 25px -5px rgba(0,0,0,.4);
  --shadow-glow:0 0 40px rgba(59,130,246,.3);
  --radius:12px;
  --radius-lg:16px;
}

html{ scroll-behavior:smooth; }

body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Inter',sans-serif;
  background:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.6;
  overflow-x:hidden;
  font-feature-settings:'kern' 1, 'liga' 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* =========================
   NAVBAR
   ========================= */
.navbar{
  position:fixed; top:0; left:0; right:0;
  background:var(--bg-glass);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  z-index:1000;
  border-bottom:1px solid var(--border);
  transition:all .3s cubic-bezier(.4,0,.2,1);
}

.navbar.scrolled{
  background:rgba(10,10,10,.95);
  box-shadow:var(--shadow-sm);
}

.nav-container{
  max-width:1200px;
  margin:0 auto;
  padding:1rem 2rem;
  display:flex; justify-content:space-between; align-items:center;

  /* безопасные отступы для iOS выреза */
  padding-left:max(2rem, env(safe-area-inset-left));
  padding-right:max(2rem, env(safe-area-inset-right));
}

.logo{
  font-size:1.5rem; font-weight:700;
  background:var(--gradient-primary);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  text-decoration:none; letter-spacing:-.02em;
}

.nav-menu{ display:flex; list-style:none; gap:2rem; }

.nav-link{
  color:var(--text-secondary); text-decoration:none;
  font-weight:500; font-size:.95rem; position:relative;
  transition:all .3s ease;
}
.nav-link:hover{ color:var(--text-primary); }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-8px; height:2px; width:0;
  background:var(--gradient-primary); transition:width .3s ease;
}
.nav-link:hover::after{ width:100%; }

/* =========================
   MOBILE NAV SYSTEM
   ========================= */

/* По умолчанию (десктоп) прячем бургер/оверлей */
.burger-menu{ display:none; }
.mobile-menu-overlay{ display:none; visibility:hidden; opacity:0; }

/* Кнопка-бургер (геометрия и слой) */
.burger-menu{
  position:relative;
  z-index:1101;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;

  /* внешний вид кнопки (для iOS/Яндекс) */
  background:transparent;
  border:0;
  padding:8px;
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  appearance:none;
  -webkit-appearance:none;
}

/* Линии бургера */
.burger-menu .burger-line{
  display:block;
  width:24px; height:2px;
  background:#fff; border-radius:1px;
  transition:transform .2s ease, opacity .2s ease;
}

/* Анимация превращения в крест */
.burger-menu.active .burger-line:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.burger-menu.active .burger-line:nth-child(2){ opacity:0; }
.burger-menu.active .burger-line:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* Затемняющий фон + контейнер панели */
.mobile-menu-overlay{
  position:fixed; inset:0;
  z-index:1100; /* ниже бургера */
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
/* активное состояние (показываем) */
.mobile-menu-overlay.active{
  display:block; visibility:visible; opacity:1;
}

/* Сама панель (справа) */
.mobile-menu{
  position:absolute; top:0; right:0;
  width:min(80vw,320px); height:100%;
  background:var(--bg-secondary);
  border-left:1px solid rgba(255,255,255,.1);
  transform:translateX(100%);
  transition:transform .25s ease;
}
/* когда активен overlay — выезжаем */
.mobile-menu-overlay.active .mobile-menu{ transform:translateX(0); }

/* На узких экранах показываем бургер, прячем горизонтальное меню */
@media (max-width:768px){
  .burger-menu{ display:inline-flex; }
  .nav-menu{ display:none; }
}

/* =========================
   HERO
   ========================= */
.hero{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; position:relative; overflow:hidden;
  background:radial-gradient(ellipse at center, rgba(59,130,246,.1) 0%, transparent 70%);
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(600px circle at 50% 0%, rgba(59,130,246,.15), transparent 50%),
    radial-gradient(400px circle at 80% 50%, rgba(29,78,216,.1), transparent 50%);
  animation:heroBackground 8s ease-in-out infinite alternate;
}
@keyframes heroBackground{
  0%{ opacity:.3; transform:scale(1); }
  100%{ opacity:.6; transform:scale(1.05); }
}
.hero-content{ position:relative; z-index:2; max-width:900px; padding:0 2rem; }
.hero-badge{
  display:inline-flex; align-items:center; padding:.5rem 1rem;
  background:rgba(59,130,246,.1); border:1px solid rgba(59,130,246,.3);
  border-radius:999px; color:var(--accent-light); font-size:.875rem; font-weight:500;
  margin-bottom:2rem; opacity:0; animation:slideUp .8s ease .2s forwards;
}
.hero-title{
  font-size:clamp(2.5rem,6vw,4.5rem); font-weight:800; margin-bottom:1.5rem;
  line-height:1.1; letter-spacing:-.02em; opacity:0; animation:slideUp .8s ease .4s forwards;
}
.hero-title .gradient-text{
  background:var(--gradient-primary);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-subtitle{
  font-size:clamp(1.1rem,2.5vw,1.3rem); color:var(--text-secondary);
  margin-bottom:3rem; max-width:600px; margin-left:auto; margin-right:auto;
  opacity:0; animation:slideUp .8s ease .6s forwards;
}
@keyframes slideUp{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:translateY(0); }
}
.hero-cta{ display:flex; flex-direction:column; align-items:center; gap:1rem; opacity:0; animation:slideUp .8s ease .8s forwards; }
.cta-button{
  display:inline-flex; align-items:center; gap:.5rem; padding:1rem 2rem;
  background:var(--gradient-primary); color:#fff; text-decoration:none; border-radius:var(--radius);
  font-weight:600; font-size:1rem; transition:all .3s ease; box-shadow:var(--shadow-lg);
  position:relative; overflow:hidden;
}
.cta-button::before{
  content:''; position:absolute; inset:0; left:-100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition:left .5s;
}
.cta-button:hover::before{ left:100%; }
.cta-button:hover{ transform:translateY(-2px); box-shadow:var(--shadow-glow); }
.hero-note{ color:var(--text-muted); font-size:.875rem; }

/* =========================
   FOOTER
   ========================= */
.footer{
  background:var(--bg-secondary);
  border-top:1px solid var(--border);
  padding:3rem 0 2rem; margin-top:6rem;
}
.footer-content{
  max-width:1200px; margin:0 auto; padding:0 2rem;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:2rem; margin-bottom:2rem;
}
.footer-section h3{ color:var(--accent-light); margin-bottom:1rem; font-weight:600; }
.footer-section a{ color:var(--text-secondary); text-decoration:none; display:block; margin-bottom:.5rem; transition:color .3s ease; }
.footer-section a:hover{ color:var(--accent); }
.footer-bottom{
  text-align:center; padding-top:2rem; border-top:1px solid var(--border);
  color:var(--text-muted); font-size:.875rem; max-width:1200px; margin:0 auto; padding-left:2rem; padding-right:2rem;
}

/* =========================
   LOADING
   ========================= */
.loading{
  position:fixed; inset:0; background:var(--bg-primary);
  display:flex; align-items:center; justify-content:center; z-index:9999; transition:opacity .5s ease;
}
.loading.fade-out{ opacity:0; pointer-events:none; }
.spinner{
  width:40px; height:40px; border:2px solid rgba(59,130,246,.2); border-top:2px solid var(--accent);
  border-radius:50%; animation:spin 1s linear infinite;
}
@keyframes spin{ 0%{ transform:rotate(0); } 100%{ transform:rotate(360deg); } }

/* =========================
   MODAL
   ========================= */
.modal{
  display:none; position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.8); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.modal-content{
  background:var(--bg-card); margin:5% auto; padding:2rem; border-radius:var(--radius-lg);
  width:90%; max-width:600px; border:1px solid var(--border); position:relative;
  animation:modalSlideIn .3s ease; max-height:80vh; overflow-y:auto; overflow-x:hidden;
}
@keyframes modalSlideIn{ from{ opacity:0; transform:translateY(-50px) scale(.9); } to{ opacity:1; transform:translateY(0) scale(1); } }
.close{
  position:absolute; right:1rem; top:1rem; color:var(--text-secondary);
  font-size:2rem; font-weight:bold; cursor:pointer; line-height:1; transition:color .3s ease;
}
.close:hover{ color:var(--accent); }
.modal h2{ color:var(--accent-light); margin-bottom:1.5rem; font-size:1.5rem; }
.modal h3{ color:var(--text-primary); margin:1.5rem 0 .5rem; font-size:1.1rem; }
.modal p{ color:var(--text-secondary); margin-bottom:1rem; line-height:1.6; }
.modal ul{ color:var(--text-secondary); margin:.5rem 0 1rem 1.5rem; line-height:1.6; }
.modal ul li{ margin-bottom:.5rem; }
.modal a{ color:var(--accent); text-decoration:none; }
.modal a:hover{ text-decoration:underline; }

/* Tariff grid */
.tariff-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:1rem; margin:1rem 0; }
.tariff-item{ padding:1rem; border:1px solid var(--border); border-radius:var(--radius); text-align:center; background:rgba(59,130,246,.05); }
.tariff-name{ font-weight:600; color:var(--accent-light); margin-bottom:.5rem; }
.tariff-price{ font-size:1.2rem; font-weight:700; color:var(--text-primary); margin-bottom:.5rem; }
.tariff-description{ font-size:.9rem; color:var(--text-secondary); }

/* Buttons */
.btn{ display:inline-block; padding:.8rem 1.5rem; border-radius:var(--radius); text-decoration:none; font-weight:600; transition:all .3s ease; }
.btn-primary{ background:var(--gradient-primary); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-glow); }

/* Scrollbars */
.modal-content::-webkit-scrollbar{ width:6px; }
.modal-content::-webkit-scrollbar-track{ background:rgba(255,255,255,.05); border-radius:3px; margin:16px 0; }
.modal-content::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:3px; transition:background .3s ease; }
.modal-content::-webkit-scrollbar-thumb:hover{ background:var(--accent-light); }
.modal-content::-webkit-scrollbar-corner{ background:transparent; }
.modal-content{ scrollbar-width:thin; scrollbar-color:var(--accent) rgba(255,255,255,.05); }