/* =========================================================================
   1. Темы и переменные
   ========================================================================= */
:root {
  --bg-dark:     #0f0f0f;
  --bg-alt-dark: #181818;
  --text-dark:   #f0f0f0;
  --text-muted:  #999;
  --accent:      #0d6efd;
  --speed:       0.6s;
}
[data-theme="dark"] {
  --bg:    var(--bg-dark);
  --bg-alt: var(--bg-alt-dark);
  --text:  var(--text-dark);
  --muted: var(--text-muted);
}
[data-theme="light"] {
  --bg:    #ffffff;
  --bg-alt: #f8f9fa;
  --text:  #212529;
  --muted: #6c757d;
}

/* ==== LIGHT THEME NAVBAR ADJUSTMENTS ==== */
[data-theme="light"] .navbar {
  background: var(--bg-alt);    /* светлый фон шапки */
}

[data-theme="light"] .navbar .navbar-brand {
  color: var(--text) !important;  /* текст логотипа — тёмный */
}

[data-theme="light"] .navbar .btn-outline-light {
  /* в светлой теме меняем .btn-outline-light на синюю рамку и текст */
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

[data-theme="light"] .navbar .btn-outline-light:hover {
  background: var(--accent);
  color: #fff !important;
}


/* =========================================================================
   2. Сброс + Базовые стили
   ========================================================================= */
* {
  margin: 0; padding: 0; box-sizing: border-box;
}
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* =========================================================================
   3. Navbar
   ========================================================================= */
.navbar {
  position: fixed;      /* фиксируем шапку */
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  background: var(--bg-alt) !important;
}
/* даём отступ всему контенту, чтобы шапка не закрывала */
body {
  padding-top: 64px;    /* высота .navbar px-4 py-3 ≈ 56–64px */
}

/* =========================================================================
   4. Секции + Scroll Snap
   ========================================================================= */
html {
  scroll-snap-type: y mandatory;
}
section {
  min-height: 100vh;
  scroll-snap-align: start;
  display: flex; align-items: center; justify-content: center;
  position: relative; padding: 2rem 1rem;
  background: var(--bg);
  color: var(--text);
}

/* =========================================================================
   5. Hero
   ========================================================================= */
.hero {
  background: var(--bg-alt);
  text-align: center;
  padding: 6rem 1rem;
}
.hero-title {
  font-size: 2.5rem;
  opacity: 0; transform: translateY(20px);
  transition: all var(--speed) ease;
}
.hero-subtitle {
  margin-top: 1rem;
  font-size: 1.1rem;
  opacity: 0; transform: translateY(15px);
  transition: all var(--speed) ease 0.2s;
}
.hero .btn-primary {
  margin-top: 1.5rem;
  opacity: 0; transform: scale(0.8);
  transition: all var(--speed) ease 0.4s;
}

/* =========================================================================
   6. Features
   ========================================================================= */
.features {
  background: var(--bg);
}
.features .row > div {
  opacity: 0; transform: translateY(30px);
  transition: all var(--speed) ease;
}

/* =========================================================================
   7. How It Works
   ========================================================================= */
.how-it-works {
  background: var(--bg-alt);
  flex-direction: column;
  overflow: hidden;
}
.section-title {
  font-size: 2rem; margin-bottom: 2rem;
  opacity: 0; transform: translateY(20px);
  transition: all var(--speed) ease;
}
.steps-wrapper {
  width: 100%; position: relative;
}
.step {
  text-align: center; margin: 4rem 0;
  opacity: 0; transform: translateY(40px);
  transition: all var(--speed) ease;
}
.step.visible {
  opacity: 1; transform: translateY(0);
}
.effects-container {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; overflow: hidden;
  z-index: 0;
}

/* =========================================================================
   8. Footer
   ========================================================================= */
footer {
  scroll-snap-align: none !important;
}

/* -------------------------------------------------------------------------
   9. Элементы эффектов — более долгий лайфтайм и плавное исчезание
   ------------------------------------------------------------------------- */
.plane, .bulb, .number, .heart {
  position: absolute;
  opacity: 1;               /* видимы по умолчанию */
  will-change: transform, opacity;
  font-size: 1.2rem;
  transition: transform 2s ease-out, opacity 2s ease-out;  /* продлеваем до 2s */
}


/* ------------- Theme toggle fix ------------- */
.toggle-theme {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1100;
  cursor: pointer;
}

/* =========================================================================
   11. Адаптация: pin & scroll-snap только на мобильных
   ========================================================================= */
@media (max-width: 768px) {
  /* закрепляем блок */
  .how-it-works {
    position: sticky; top: 0; height: 100vh;
  }
  .steps-wrapper {
    overflow-y: auto; height: 100vh;
    scroll-snap-type: y mandatory;
  }
  .step {
    scroll-snap-align: start; min-height: 100vh;
    display: flex; flex-direction: column;
    justify-content: center;
  }
}

/* ====================================================================
   12. Доп. медиазапросы
   ==================================================================== */
@media (max-width: 576px) {
  .hero-title { font-size: 1.8rem; }
  .hero-subtitle { font-size: 0.95rem; }
  .features .row > div { margin-bottom: 2rem; }
  .step h5 { font-size: 1.2rem; }
}


/* ------------------------------------------------------------------
   Hero: фоновые «прикольные фигуры»
   ------------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
}

.hero-shapes {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

.shape {
  position: absolute;
  background: var(--accent);
  opacity: 0.15;
  border-radius: 50%;
  will-change: transform;
}

/* Разные размеры и начальные позиции */
.shape.s1 { width: 200px; height: 200px; top: 10%; left: 5%; }
.shape.s2 { width: 300px; height: 300px; top: 60%; left: 80%; }
.shape.s3 { width: 150px; height: 150px; top: 40%; left: 45%; }
.shape.s4 { width: 100px; height: 100px; top: 75%; left: 20%; }

/* Анимации */
@keyframes float1 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -30px) scale(1.1); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes float2 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 20px) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes float3 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(25px, 25px) rotate(45deg) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes float4 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-20px, -20px) rotate(-30deg) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Привязываем анимации */
.shape.s1 { animation: float1 8s ease-in-out infinite; }
.shape.s2 { animation: float2 12s ease-in-out infinite; }
.shape.s3 { animation: float3 10s ease-in-out infinite; }
.shape.s4 { animation: float4 6s ease-in-out infinite; }


/* 1) Футер — не часть scroll-snap */
footer {
  scroll-snap-align: none !important;
  /* гарантируем потоковый рендеринг */
  position: relative;
  z-index: 10;
}

/* 2) Область контента над футером растягиваем дополнительно */
main, .content-wrapper {
  /* если у вас весь контент в main/контейнере */
  padding-bottom: 4rem; /* оставим пространство, чтобы футер можно было долистать */
}

/* 3) Ограничиваем snap только на секции, а не на весь html */
html {
  scroll-snap-type: none;
}
section {
  scroll-snap-align: start;
}
@media (max-width: 768px) {
  section {
    scroll-snap-type: y mandatory;
  }
}

/* ===========================
   Footer visibility tweak
   =========================== */
[data-theme="light"] footer {
  background: #f1f3f5;      /* светло-серый фон */
  color: #495057 !important;/* более тёмный текст */
}

[data-theme="light"] footer a {
  color: #495057 !important;/* ссылки тоже тёмнее */
  opacity: 0.8;
}
[data-theme="light"] footer a:hover {
  opacity: 1;
}




@media (max-width: 768px) {
  .navbar .container {
    flex-direction: column !important;
  }
  .navbar .btn {
    margin-bottom: 0.5rem;
  }
}