* { font-family: 'Inter', sans-serif; }
:root{
  --bg-1:#0E1030;  /* ночной индиго для контраста */
  --bg-2:#1A2050;  /* мягкий тёмный индиго */
  --card-a:#FBE3FF;/* сахарная вата */
  --card-b:#E0F3FF;/* голубая пастила */
  --card-c:#E7FFF6;/* мята */
  --accent:#FF7ACB;/* клубничная глазурь */
  --accent-2:#9AD8FF;  /* голубой леденец */
  --accent-3:#B8FFE7;  /* мятный мармелад */
  --text:#ffffff;
  --text-soft:#EAEAF6;
  --shadow:0 14px 38px rgba(255,122,203,.18);
  --ring:0 0 0 6px rgba(255,122,203,.18);
  --border:rgba(255,255,255,.15);
}

body{
  color:var(--text);
  background:
radial-gradient(1200px 800px at 20% -10%, rgba(255,122,203,.18), transparent 60%),
radial-gradient(1000px 700px at 85% 0%, rgba(154,216,255,.18), transparent 55%),
linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
}

 
.navbar{
  position:fixed; inset:0 0 auto 0;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  z-index:1000; padding:18px 0;
  box-shadow:0 6px 24px rgba(0,0,0,.25);
  transition: transform 0.3s ease-in-out;
  transform: translateY(0);
}

.navbar.hide {
  transform: translateY(-100%);
}


.hero-section{
  min-height:85vh; display:flex; align-items:center; position:relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: -10%;
  background:
linear-gradient(135deg, rgba(14,16,48,.3), rgba(26,32,80,.2)),
url('ZNF6Sc5v2BYWqY2NVIIw5');
  background-size: cover;
  background-position: center;
  animation: gentleFloat 20s ease-in-out infinite;
  z-index: 0;
}

@keyframes gentleFloat {
  0%, 100% { 
transform: translateY(var(--parallax-offset, 0px)) translate(0, 0) scale(var(--parallax-scale, 1.1)); 
  }
  25% { 
transform: translateY(var(--parallax-offset, 0px)) translate(2%, -2%) scale(var(--parallax-scale, 1.12)); 
  }
  50% { 
transform: translateY(var(--parallax-offset, 0px)) translate(-1%, 1%) scale(var(--parallax-scale, 1.11)); 
  }
  75% { 
transform: translateY(var(--parallax-offset, 0px)) translate(-2%, -1%) scale(var(--parallax-scale, 1.13)); 
  }
}

.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
radial-gradient(ellipse 1000px 800px at 50% 100%, rgba(255,122,203,.15) 0%, transparent 60%),
radial-gradient(ellipse 800px 600px at 20% 50%, rgba(154,216,255,.12) 0%, transparent 50%),
radial-gradient(ellipse 800px 600px at 80% 50%, rgba(184,255,231,.12) 0%, transparent 50%);
  z-index: 0;
  pointer-events: none;
  animation: glowPulse 10s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.hero-section > * {
  position: relative;
  z-index: 2;
}

.candy-float {
  position: absolute;
  font-size: 60px;
  opacity: 0.15;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  filter: drop-shadow(0 0 20px rgba(255,122,203,0.3));
  animation: candyFloat 15s ease-in-out infinite;
}

@keyframes candyFloat {
  0%, 100% { 
transform: translateY(0) scale(1); 
opacity: 0.15;
  }
  25% { 
transform: translateY(-30px) scale(1.05); 
opacity: 0.25;
  }
  50% { 
transform: translateY(-15px) scale(1.02); 
opacity: 0.2;
  }
  75% { 
transform: translateY(-40px) scale(1.08); 
opacity: 0.18;
  }
}

.sparkle-candy {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,122,203,0.6) 40%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  z-index: 1;
  animation: sparkleRise 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sparkleRise {
  0% { 
opacity: 0; 
transform: translateY(0) scale(0);
  }
  20% { 
opacity: 1; 
transform: translateY(-50px) scale(1);
  }
  80% { 
opacity: 0.8; 
transform: translateY(-150px) scale(0.5);
  }
  100% { 
opacity: 0; 
transform: translateY(-200px) scale(0);
  }
}


.btn-primary{
  background:linear-gradient(135deg, var(--accent) 0%, #FFB6E8 100%);
  color:#2A0931; font-weight:800; text-transform:uppercase;
  padding:14px 28px; border-radius:14px; display:inline-block; text-decoration:none;
  box-shadow:var(--shadow); transition:.25s ease;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 42px rgba(255,122,203,.28); }

.btn-secondary{
  background:linear-gradient(135deg, rgba(154,216,255,.2), rgba(184,255,231,.2));
  border:2px solid rgba(154,216,255,.55);
  color:#EAF6FF; text-transform:uppercase; font-weight:800;
  padding:12px 26px; border-radius:14px; display:inline-block; text-decoration:none;
  transition:.25s ease;
}
.btn-secondary:hover{ box-shadow:0 10px 28px rgba(154,216,255,.28); transform:translateY(-2px); }


.feature-card, .version-card{
  border-radius:18px; padding:26px;
  background:
linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
radial-gradient(120% 120% at 0% 0%, rgba(251,227,255,.45), transparent 60%),
radial-gradient(130% 120% at 100% 0%, rgba(224,243,255,.35), transparent 50%),
radial-gradient(120% 120% at 50% 120%, rgba(231,255,246,.28), transparent 40%);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover, .version-card:hover{ transform:translateY(-6px); box-shadow:0 18px 46px rgba(154,216,255,.25); }

.icon-box{
  width:64px; height:64px; border-radius:14px; margin-bottom:14px;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:28px; color:#2A0931;
  background:linear-gradient(135deg, #FFE2F6 0%, #E2F5FF 100%);
  box-shadow:var(--ring);
} 

.section-padding{ padding:40px 20px; }
@media (max-width:768px){ .section-padding{ padding:60px 20px; } }


.bonus-table{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:14px; }
.bonus-table thead{
  background:linear-gradient(135deg, var(--accent) 0%, #FFB6E8 100%);
  color:#2A0931;
}
.bonus-table th, .bonus-table td{ padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.bonus-table tbody tr{ background:rgba(255,255,255,.03); }
.bonus-table tbody tr:nth-child(even){ background:rgba(255,255,255,.05); }


.faq-item{ background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.faq-question{ padding:18px 20px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight:700; color:var(--text-soft); }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .3s ease; padding:0 20px; color:#EDEDF8; }
.faq-item.active .faq-answer{ max-height:3000px; padding:0 20px 18px; }
.faq-icon{ color:var(--accent); transition:transform .3s ease; }
.faq-item.active .faq-icon{ transform:rotate(180deg); }


  /* === заменить размеры и визуал FAB === */
  .nav-fab{
position:relative; width:68px; height:68px; margin:-28px auto 0;
background:#FFB800; color:#111; border-radius:999px;
display:flex; align-items:center; justify-content:center;
box-shadow:0 8px 20px rgba(255,184,0,.32), inset 0 0 0 2px rgba(255,255,255,.35);
text-decoration:none;
  }
  /* иконка теперь со stroke через currentColor */
  .nav-fab svg{ width:26px; height:26px; color:#111; }
  .nav-fab::before, .nav-fab::after{
content:""; position:absolute; inset:0; border-radius:inherit;
box-shadow:0 0 0 0 rgba(255,184,0,.45);
animation:pulseSmall 2.2s ease-out infinite;
  }
  .nav-fab::after{ animation-delay:.9s; }
  @keyframes pulseSmall{
0%   { transform:scale(1);box-shadow:0 0 0 0 rgba(255,184,0,.45) }
70%  { transform:scale(1.18); box-shadow:0 0 0 12px rgba(255,184,0,0) }
100% { transform:scale(1.18); box-shadow:0 0 0 12px rgba(255,184,0,0) }
  }
  .nav-fab__label{ bottom:-14px; }
  
  /* ===== МЯГКАЯ ТЕМА В ТОН ШАПКИ ===== */
:root{
  --bg-900:#0F1221;
  --bg-800:#151935;
  --panel-glass:rgba(20,24,50,.72); /* фон панели */
  --panel-border:rgba(255,255,255,.06); /* рамка сверху */
  --icon:#C9D1FF;   /* иконки */
  --label:#B9C1E0;  /* подписи */
  --label-dim:#98A3C7;
  --accent-1:#FF9BC2;   /* мягкий розовый */
  --accent-2:#FFD388;   /* тёплый персик */
}

/* фон страницы в тон шапки */
body{ background: radial-gradient(100% 120% at 50% -10%, #1C2150 0%, #0F1221 55%) fixed; }

/* ===== НИЖНЯЯ ПАНЕЛЬ (glassmorphism) ===== */
.mobile-nav{
  position: fixed; left:0; right:0; bottom:0; z-index: 1000;
  padding: max(10px, env(safe-area-inset-bottom)) 14px  calc(6px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(13,17,39,.00) 0%, rgba(13,17,39,.06) 2%) ,
  var(--panel-glass);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--panel-border);
}

/* контейнер кнопок */
.mobile-nav__row{
  max-width: 720px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
}

/* боковые кнопки стали спокойнее */
.nav-btn{
  color:var(--label); text-decoration:none;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  min-width:86px; padding:6px 0 2px;
  border-radius:12px; transition: background .25s ease;
}
.nav-btn:hover{ background: rgba(255,255,255,.03); }
.nav-btn svg{ width:22px; height:22px; color:var(--icon); opacity:.95; }

/* подпись под иконкой */
.nav-btn span{ font-size:12px; line-height:1; color:var(--label-dim); }

/* ===== ЦЕНТРАЛЬНАЯ FAB — МЯГКИЙ ГРАДИЕНТ И ПУЛЬС ===== */
.nav-fab{
  position:relative; width:64px; height:64px; margin:-22px auto 0;
  border-radius:50%;
  background: radial-gradient(120% 120% at 30% 20%, var(--accent-2) 0%, var(--accent-1) 85%);
  box-shadow:
0 10px 28px rgba(255,170,210,.25),
inset 0 0 0 1.5px rgba(255,255,255,.45);
  color:#171A2F;
}
.nav-fab svg{ width:24px; height:24px; color:#1A1D33; }

/* деликатные волны */
.nav-fab::before, .nav-fab::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 0 0 rgba(255,170,210,.35);
  animation:softPulse 2.6s ease-out infinite;
}
.nav-fab::after{ animation-delay:1.1s; }

@keyframes softPulse{
  0%   { transform:scale(1);box-shadow:0 0 0 0 rgba(255,170,210,.35) }
  70%  { transform:scale(1.14); box-shadow:0 0 0 14px rgba(255,170,210,0) }
  100% { transform:scale(1.14); box-shadow:0 0 0 14px rgba(255,170,210,0) }
}

/* подпись под FAB — светлее, но без «кричащего» контраста */
.nav-fab__label{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:-16px; font-size:12px; font-weight:600; color:var(--label);
}

/* поддержка «меньше анимаций» */
@media (prefers-reduced-motion: reduce){
  .nav-fab::before, .nav-fab::after{ animation:none; box-shadow:none; }
}

/* чтобы панель не «резала» переход к фону страницы */
main, .content, .page-wrap{ padding-bottom: 84px; } /* или ваш контейнер */

/*  ===== Mobile Bottom Nav (Sweet Bonanza style) ===== --> */
  /* Показ только на мобилках */
  @media (min-width: 769px){ .mobile-nav { display:none } }

  .mobile-nav{
    position:fixed; left:0; right:0; bottom:0; z-index:9999;
    background:#151515; border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 -8px 24px rgba(0,0,0,.35);
    padding:8px 16px 10px;
  }
  .mobile-nav__row{
    max-width:520px; margin:0 auto;
    display:grid; grid-template-columns:1fr 96px 1fr; align-items:end;
    gap:8px;
  }

  .nav-btn{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; padding:6px 10px 8px; text-decoration:none; user-select:none;
    color:#EDEDED; font:600 12px/1 Inter,system-ui,sans-serif;
  }
  .nav-btn svg{ width:22px; height:22px; fill:#EDEDED; opacity:.9; }
  .nav-btn--ghost{ border-radius:12px; transition:.2s; }
  .nav-btn--ghost:active{ transform:translateY(1px); }
  .nav-btn--ghost:focus-visible{ outline:2px solid #FFB800; outline-offset:4px; }

  /* Центральная пульсирующая кнопка */
  .nav-fab{
    position:relative; width:84px; height:84px; margin:-36px auto 0;
    background:#FFB800; color:#111; border-radius:999px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 24px rgba(255,184,0,.35), inset 0 0 0 2px rgba(255,255,255,.35);
    text-decoration:none;
  }
  .nav-fab svg{ width:28px; height:28px; fill:#111; }
  /* пульсация + мягкое сияние */
  .nav-fab::before, .nav-fab::after{
    content:""; position:absolute; inset:0; border-radius:inherit;
    box-shadow:0 0 0 0 rgba(255,184,0,.45);
    animation:pulse 2.2s ease-out infinite;
  }
  .nav-fab::after{ animation-delay:.9s; }
  @keyframes pulse{
    0%   { transform:scale(1);    box-shadow:0 0 0 0 rgba(255,184,0,.45) }
    70%  { transform:scale(1.22); box-shadow:0 0 0 16px rgba(255,184,0,0) }
    100% { transform:scale(1.22); box-shadow:0 0 0 16px rgba(255,184,0,0) }
  }

  /* подпись под центральной */
  .nav-fab__label{
    position:absolute; left:0; right:0; bottom:-18px;
    text-align:center; font:800 12px/1 Inter,system-ui,sans-serif; color:#fff;
    text-shadow:0 2px 8px rgba(0,0,0,.6);
  }