:root {
  --hero-accent: #FFC700;
  --hero-text: rgba(255, 255, 255, 0.92);
  --hero-muted: rgba(255, 255, 255, 0.7);
  --hero-subtle: rgba(255, 255, 255, 0.55);
  --header-h: 56px;
  --mini-cta-h: 56px;
  --tr-border: rgba(255, 255, 255, 0.06);
  --tr-hover: rgba(255, 255, 255, 0.04);
}

/* ===== Hero Section ===== */
.hero-title .hero-highlight {
  display: block;
  color: var(--hero-accent);
}

.hero-meta {
  color: var(--hero-subtle);
  font-weight: 600;
}

.hero-cta {
  padding: 0.95rem 1.6rem;
  font-weight: 700;
  box-shadow: 0 8px 28px rgba(0, 123, 255, 0.25);
}

.hero-microcopy {
  margin-top: 0.5rem;
  color: var(--hero-subtle);
  font-size: 0.95rem;
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0.85;
}

.hero-trust-label {
  color: var(--hero-subtle);
  font-weight: 600;
  margin-right: 4px;
}

.hero-exchange {
  height: 28px;
  filter: grayscale(100%) brightness(92%);
  opacity: 0.85;
  transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}

.hero-exchange:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.05);
}

.hero-overlay {
  position: relative;
}

.hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(255, 255, 255, 0.06), transparent 60%),
              linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.hero-highlight {
  color: var(--hero-accent);
}

/* ===== Header Styles ===== */
.landing-header {
  backdrop-filter: saturate(150%) blur(6px);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  background: rgba(15, 20, 34, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 30px rgba(6, 11, 25, 0.25);
  z-index: 1045 !important;
}

.landing-header.is-solid {
  background: rgba(15, 20, 34, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 30px rgba(6, 11, 25, 0.25);
}

#kt_landing_menu .nav-link.active {
  color: var(--bs-primary) !important;
  background: transparent !important;
}

#kt_landing_menu .nav-link.active::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--bs-primary);
  border-radius: 2px;
  margin-top: 6px;
}

/* ===== Steps Section ===== */
.steps-line {
  position: relative;
  --steps-line-color: rgba(23, 31, 50, 0.38);
}

.steps-line .col-md-4 {
  position: relative;
  overflow: visible;
}

.steps-line .col-md-4 h4,
.steps-line .col-md-4 .fw-bold {
  position: relative;
  z-index: 10;
  background: inherit;
  padding: 0 0.15rem;
  border-radius: 4px;
}

@media (max-width: 400px) {
  .steps-line .feature-icon img {
    max-width: 90px; /* Еще меньше изображения */
  }
  
  .step-badge {
    width: 32px;
    height: 32px;
    font-size: 1rem;
    top: -3px;
    right: -3px;
  }
}



/* ===== Pricing Section ===== */
.badge.roi-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.75rem 1rem;
  border-radius: 9999px;
  background: radial-gradient(120% 120% at 20% 20%, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.03) 70%),
              linear-gradient(90deg, rgba(241, 65, 108, 0.35), rgba(255, 216, 12, 0.35));
  color: #fff;
  box-shadow: 0 8px 20px rgba(241, 65, 108, 0.25);
}

/* ===== Table Styles ===== */
.table-trades {
  border: 1px solid var(--tr-border);
  border-radius: 16px;
  overflow: clip;
}

.table-trades thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
}

.table-trades tbody tr {
  border-top: 1px solid var(--tr-border);
}

.table-trades tbody tr:hover {
  background: var(--tr-hover);
}

.table-trades .chip-pos {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
  border-radius: 9999px;
  padding: 0.35rem 0.6rem;
  font-weight: 700;
}

.table-trades .chip-neg {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
  border-radius: 9999px;
  padding: 0.35rem 0.6rem;
  font-weight: 700;
}

/* ===== Mini CTA ===== */
.mini-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: -100px;
  z-index: 1030;
  background: linear-gradient(90deg, rgba(15, 20, 34, 0.95), rgba(15, 20, 34, 0.92));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 -10px 30px rgba(6, 11, 25, 0.35);
  transition: transform 0.25s ease, bottom 0.25s ease;
  transform: translateY(100%);
  padding-bottom: max(env(safe-area-inset-bottom), 0px);
}

.mini-cta--show {
  bottom: 0;
  transform: translateY(0);
}

.mini-cta__inner {
  min-height: 56px;
}

.mini-cta__title {
  color: var(--hero-text, #E6E9F0);
  margin-right: 0.75rem;
}

.mini-cta__hint {
  color: var(--hero-subtle, rgba(255, 255, 255, 0.55));
  font-size: 0.95rem;
}

body.has-mini-cta {
  padding-bottom: calc(var(--mini-cta-h) + env(safe-area-inset-bottom));
}

/* ===== FAQ Section ===== */
#faqAccordion .accordion-item {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

#faqAccordion .accordion-item + .accordion-item {
  margin-top: 12px;
}

#faqAccordion .accordion-button {
  background: transparent !important;
  color: #E6E9F0 !important;
  padding: 16px 18px !important;
  box-shadow: none !important;
}

#faqAccordion .accordion-button.collapsed {
  background: rgba(255, 255, 255, 0.03) !important;
}

#faqAccordion .accordion-button:not(.collapsed) {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

#faqAccordion .accordion-button::after {
  filter: invert(1) opacity(0.85) !important;
}

#faqAccordion .accordion-body {
  background: rgba(255, 255, 255, 0.02) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  padding: 16px 18px 18px !important;
}

#faqAccordion.accordion.accordion-flush .accordion-item,
#faqAccordion.accordion.accordion-flush .accordion-button {
  border-radius: 14px !important;
}

html {
  scroll-behavior: smooth;
}

/* ===== Buttons ===== */
.landing-header .btn {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.landing-header .btn-outline-light,
.landing-header .btn-outline-primary,
.landing-header .btn-outline-secondary {
  background: transparent !important;
  border-width: 1px !important;
}

.landing-header .btn-outline-light {
  color: #E6E9F0 !important;
  border-color: rgba(255, 255, 255, 0.70) !important;
}

.landing-header .btn-outline-light:hover,
.landing-header .btn-outline-light:focus {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.25) !important;
}

.landing-header .btn-outline-primary {
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.landing-header .btn-outline-primary:hover,
.landing-header .btn-outline-primary:focus {
  background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.12) !important;
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25) !important;
}

.landing-header .btn-outline-secondary {
  color: var(--bs-secondary, #adb5bd) !important;
  border-color: var(--bs-secondary, #adb5bd) !important;
}

.landing-header .btn-outline-secondary:hover,
.landing-header .btn-outline-secondary:focus {
  background: rgba(173, 181, 189, 0.12) !important;
  border-color: var(--bs-secondary, #adb5bd) !important;
  box-shadow: 0 0 0 0.15rem rgba(173, 181, 189, 0.25) !important;
}

.landing-header.is-solid .btn-outline-light {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

.landing-header.is-solid .btn-outline-light:hover,
.landing-header.is-solid .btn-outline-light:focus {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.38) !important;
  box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.25) !important;
}

.landing-header.is-solid .btn-outline-primary {
  background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.12) !important;
  color: var(--bs-primary) !important;
  border-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.45) !important;
}

.landing-header.is-solid .btn-outline-primary:hover,
.landing-header.is-solid .btn-outline-primary:focus {
  background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.20) !important;
  border-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.55) !important;
  box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25) !important;
}

.landing-header.is-solid .btn-outline-secondary {
  background: rgba(173, 181, 189, 0.12) !important;
  color: #adb5bd !important;
  border-color: rgba(173, 181, 189, 0.45) !important;
}

.landing-header.is-solid .btn-outline-secondary:hover,
.landing-header.is-solid .btn-outline-secondary:focus {
  background: rgba(173, 181, 189, 0.20) !important;
  border-color: rgba(173, 181, 189, 0.55) !important;
  box-shadow: 0 0 0 0.15rem rgba(173, 181, 189, 0.25) !important;
}

.landing-header .btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ===== Mobile Responsive ===== */
@media (max-width: 991.98px) {
  .steps-line .col-md-4:not(:last-child)::after,
  .steps-line .col-md-4:not(:last-child)::before {
    display: none;
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: calc(1.625rem + 1.5vw) !important; /* Более плавная формула */
  }

  
  .min-h-350px {
    min-height: 250px !important;
  }
  
  .py-lg-20 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .fs-lg-3x {
    font-size: 1.5rem !important;
  }
  
  .px-9 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .pricing .card {
    margin-bottom: 1.25rem;
  }
  
  .badge.roi-chip {
    font-size: 1.25rem;
    padding: 0.6rem 0.9rem;
  }
}

@media (max-width: 576px) {
  .display-4 {
    font-size: 2rem;
  }
  
  .btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }
  
  .hero-overlay {
    min-height: calc(100svh - var(--header-h));
    padding-top: 4rem;
    display: flex;
    align-items: center;
  }
  
  .hero-title {
    max-width: 980px;
    line-height: 1.18;
    color: var(--hero-text);
    letter-spacing: 0.2px;
    font-size: calc(1.4rem + 1vw) !important;
  }
  
  .hero-subtitle {
    color: var(--hero-muted);
    font-size: 1.05rem !important;
  }
  
  .steps-line .feature-icon img {
    max-width: 110px;
  }
}

/* ===== Modern Step Connectors ===== */
@media (min-width: 992px) {
  .steps-line {
    --connector-color: linear-gradient(90deg, #FFC700 0%, #FF5E00 50%, #FFC700 100%);
    --connector-glow: 0 0 15px rgba(255, 199, 0, 0.5);
    position: relative;
  }
  
  .steps-line .col-md-4 {
    position: relative;
    z-index: 1;
  }
  
  /* Modern gradient line with glow */
  .steps-line .col-md-4:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -45px;
    width: 90px;
    height: 3px;
    background: var(--connector-color);
    box-shadow: var(--connector-glow);
    transform: translateY(-50%);
    z-index: 2;
    border-radius: 3px;
    animation: connectorPulse 3s ease-in-out infinite;
  }
  
  /* Modern arrow head with gradient */
  .steps-line .col-md-4:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -48px;
    width: 18px;
    height: 18px;
    transform: translateY(-50%) rotate(45deg);
    border-top: 3px solid #FFC700;
    border-right: 3px solid #FFC700;
    z-index: 3;
    box-shadow: var(--connector-glow);
    animation: arrowGlow 2s ease-in-out infinite;
  }
  
  /* Pulse animation for line */
  @keyframes connectorPulse {
    0%, 100% { 
      opacity: 0.8; 
      box-shadow: 0 0 10px rgba(255, 199, 0, 0.4);
    }
    50% { 
      opacity: 1; 
      box-shadow: 0 0 20px rgba(255, 199, 0, 0.8),
                  0 0 30px rgba(255, 199, 0, 0.3);
    }
  }
  
  /* Glow animation for arrow */
  @keyframes arrowGlow {
    0%, 100% { 
      opacity: 0.9;
      box-shadow: 0 0 8px rgba(255, 199, 0, 0.4);
    }
    50% { 
      opacity: 1;
      box-shadow: 0 0 15px rgba(255, 199, 0, 0.8),
                  0 0 25px rgba(255, 199, 0, 0.4);
    }
  }
}

/* For light backgrounds - blue theme */
.bg-white .steps-line,
.bg-body .steps-line {
  --connector-color: linear-gradient(90deg, #0B5FFF 0%, #00D2FF 50%, #0B5FFF 100%);
  --connector-glow: 0 0 15px rgba(11, 95, 255, 0.4);
}

.bg-white .steps-line .col-md-4:not(:last-child)::before,
.bg-body .steps-line .col-md-4:not(:last-child)::before {
  border-top-color: #0B5FFF;
  border-right-color: #0B5FFF;
  box-shadow: 0 0 15px rgba(11, 95, 255, 0.5);
}

/* Hide on mobile */
@media (max-width: 991.98px) {
  .steps-line .col-md-4:not(:last-child)::after,
  .steps-line .col-md-4:not(:last-child)::before {
    display: none !important;
  }
}

/* Step node styling with hover effects */
.step-node {
  position: relative;
  z-index: 5;
  transition: all 0.3s ease;
  padding: 20px;
  border-radius: 16px;
}

.step-node:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
}

/* Badge styling */
.step-node .badge {
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 199, 0, 0.3);
}

.step-node:hover .badge {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(255, 199, 0, 0.5);
}

/* Image hover effect */
.step-node .feature-icon {
  transition: all 0.3s ease;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
}

.step-node:hover .feature-icon {
  transform: scale(1.05) rotate(5deg);
  filter: drop-shadow(0 8px 25px rgba(255, 199, 0, 0.3));
}

/* Modern step badges */
.step-badge {
  position: absolute;
  top: -5px; /* Было -10px */
  right: -5px; /* Было -10px */
  width: 36px; /* Было 40px */
  height: 36px; /* Было 40px */
  background: linear-gradient(135deg, #FFC700, #FF5E00);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.1rem; /* Было 1.2rem */
  box-shadow: 0 4px 15px rgba(255, 199, 0, 0.4);
  border: 2px solid white; /* Было 3px */
  transition: all 0.3s ease;
}

.step-node:hover .step-badge {
  transform: scale(1.15) rotate(15deg); /* Было 1.2 */
  box-shadow: 0 6px 25px rgba(255, 199, 0, 0.6);
}

/* ===== Анимации появления при скролле ===== */
[data-aos] {
  opacity: 0;
  transition: all 0.8s ease;
}

[data-aos].aos-animate {
  opacity: 1;
  transform: translateY(0) scale(1) !important;
}

[data-aos-delay="100"] { transition-delay: 0.1s; }
[data-aos-delay="200"] { transition-delay: 0.2s; }
[data-aos-delay="300"] { transition-delay: 0.3s; }

[data-aos="fade-up"] {
  transform: translateY(30px);
}

[data-aos="zoom-in"] {
  transform: scale(0.9);
}

.stat-number {
  display: inline-block;
  transition: all 1s ease-out;
}

.product-card {
  transition: all 0.6s ease;
  opacity: 0;
  transform: translateY(50px) scale(0.95);
}

.product-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ===== Микроанимации ===== */
.btn-primary {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(13, 110, 253, 0.3);
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-primary:hover::before {
  left: 100%;
}

.card {
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.feature-icon {
  transition: all 0.4s ease;
}

.feature-icon:hover {
  transform: scale(1.1) rotate(5deg);
  filter: drop-shadow(0 5px 15px rgba(255, 199, 0, 0.3));
}

.btn-cta-glow {
  animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 rgba(13, 110, 253, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(13, 110, 253, 0.6);
  }
  100% {
    box-shadow: 0 0 0 rgba(13, 110, 253, 0.4);
  }
}

.mini-cta--show {
  bottom: 0;
  transform: translateY(0);
  animation: slideInUp 0.5s ease;
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ===== Микроанимации ===== */
.btn-primary {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(13, 110, 253, 0.3);
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-primary:hover::before {
  left: 100%;
}

.card {
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.feature-icon {
  transition: all 0.4s ease;
}

.feature-icon:hover {
  transform: scale(1.1) rotate(5deg);
  filter: drop-shadow(0 5px 15px rgba(255, 199, 0, 0.3));
}

.btn-cta-glow {
  animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 rgba(13, 110, 253, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(13, 110, 253, 0.6);
  }
  100% {
    box-shadow: 0 0 0 rgba(13, 110, 253, 0.4);
  }
}

/* ===== Language Toggle Fix ===== */
.lang-toggle {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 1050;
    transition: all 0.3s ease;
}

.lang-toggle .btn {
    border-radius: 9999px;
    padding: .35rem .75rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.lang-toggle .btn.active {
    pointer-events: none;
    opacity: .9;
}


@media (max-width: 576px) {
    /* Еще больше сдвигаем на очень маленьких экранах */
    .landing-header .flex-equal.text-end.ms-1 {
        margin-right: 70px !important;
    }
    
    /* Еще меньше языковой переключатель */
    .lang-toggle {
        top: 10px;
        right: 10px;
    }
    
    .lang-toggle .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
    }
    
    /* Делаем кнопку регистрации немного меньше */
    .landing-header .flex-equal.text-end.ms-1 .btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
}

/* Дополнительно: скрываем языковой переключатель при скролле на мобильных */
@media (max-width: 991.98px) {
    .lang-toggle.hidden {
        transform: translateY(-100px);
        opacity: 0;
    }
    
    .lang-toggle {
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
}

/* Дополнительные стили для мобильной кнопки */
@media (max-width: 576px) {
    .btn-sm-mobile {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.8rem !important;
    }
}

/* === Fix: языковой переключатель не перекрывает CTA на мобильных === */
:root {
  /* ширина «кармана» под RU/EN; адаптируем через clamp */
  --lang-toggle-w: clamp(104px, 22vw, 168px);
}

@media (max-width: 991.98px) {
  /* резервируем место справа в шапке под RU/EN */
  .landing-header .container {
    padding-right: var(--lang-toggle-w) !important;
  }

  /* не переносим текст в CTA, чтобы она не «расползалась» */
  .landing-header .btn[aria-label="Зарегистрироваться"] {
    white-space: nowrap;
  }
}

/* микроподгонка размеров RU/EN на очень маленьких экранах */
@media (max-width: 576px) {
  .lang-toggle .btn {
    padding: 0.25rem 0.55rem;
    font-size: 0.72rem;
  }
}

.partners-logos .logo {
  width: auto;
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.partners-logos .logo:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* Индивидуальная подгонка */
.partners-logos .logo.bybit {
  height: 30px;
}

.partners-logos .logo.binance {
  height: 36px;
}

/* ===== Анимации для карточек типов трейдеров ===== */
/* Стили для контейнера с карточками */
.row.g-lg-10 .col-lg-4 {
  transition: all 0.4s ease;
}

/* Стили для кругов с иконками */
.symbol-circle {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
  overflow: hidden;
}

/* Стили для текстового содержимого */
.fs-2.fw-bolder,
.text-gray-500.fw-bold {
  transition: all 0.3s ease;
}

/* Состояние при наведении на карточку */
.row.g-lg-10 .col-lg-4:hover {
  transform: translateY(-8px);
}

.row.g-lg-10 .col-lg-4:hover .symbol-circle {
  /* Плавное увеличение */
  transform: scale(1.15) translateY(-5px);
  
  /* Эффект свечения — теперь синий */
  filter: 
    drop-shadow(0 6px 20px rgba(13, 110, 253, 0.4))
    drop-shadow(0 0 25px rgba(13, 110, 253, 0.2));
}

.row.g-lg-10 .col-lg-4:hover .fs-2.fw-bolder,
.row.g-lg-10 .col-lg-4:hover .text-gray-500.fw-bold {
  /* Легкое выделение текста — теперь синий */
  color: #0B5FFF !important;
}

/* Для начинающего трейдера (первая карточка) */
.row.g-lg-10 .col-lg-4:nth-child(1):hover .symbol-circle {
  filter: 
    drop-shadow(0 6px 20px rgba(32, 170, 62, 0.4))
    drop-shadow(0 0 25px rgba(32, 170, 62, 0.2));
}

.row.g-lg-10 .col-lg-4:nth-child(1):hover .fs-2.fw-bolder,
.row.g-lg-10 .col-lg-4:nth-child(1):hover .text-gray-500.fw-bold {
  color: #20AA3E !important;
}

/* Для алгоритмического трейдера (третья карточка) */
.row.g-lg-10 .col-lg-4:nth-child(3):hover .symbol-circle {
  filter: 
    drop-shadow(0 6px 20px rgba(255, 199, 0, 0.4))
    drop-shadow(0 0 25px rgba(255, 199, 0, 0.2));
}

.row.g-lg-10 .col-lg-4:nth-child(3):hover .fs-2.fw-bolder,
.row.g-lg-10 .col-lg-4:nth-child(3):hover .text-gray-500.fw-bold {
  color: #FFC700 !important;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .row.g-lg-10 .col-lg-4:hover {
    transform: translateY(-4px);
  }
  
  .row.g-lg-10 .col-lg-4:hover .symbol-circle {
    transform: scale(1.08) translateY(-3px);
  }
}

/* Дополнительные эффекты для изображений внутри кругов */
.symbol-circle img {
  transition: all 0.4s ease;
}

.row.g-lg-10 .col-lg-4:hover .symbol-circle img {
  transform: scale(1.1);
}

/* Эффект пульсации для иконок */
@keyframes pulse-icon {
  0% { transform: scale(1.15) translateY(-5px); }
  50% { transform: scale(1.2) translateY(-5px); }
  100% { transform: scale(1.15) translateY(-5px); }
}

.row.g-lg-10 .col-lg-4:hover .symbol-circle {
  animation: pulse-icon 2s ease-in-out infinite;
}

/* Плавное появление текста */
.row.g-lg-10 .col-lg-4:hover .text-gray-500.fw-bold {
  transition-delay: 0.1s;
}

/* ===== Анимации для секции "Полный контроль" ===== */
/* Стили для октагональных контейнеров */
.octagon {
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
}

/* Псевдоэлемент для подсветки */
.octagon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(32, 170, 62, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s ease;
  z-index: -1;
  opacity: 0;
}

/* Состояние при наведении на всю карточку */
.text-center:hover .octagon {
  transform: translateY(-8px) scale(1.05);
}

.text-center:hover .octagon::after {
  width: 180px;
  height: 180px;
  opacity: 1;
}

/* Эффект для изображения внутри октагона */
.text-center:hover .octagon {
  filter: 
    drop-shadow(0 8px 25px rgba(32, 170, 62, 0.3))
    drop-shadow(0 0 15px rgba(32, 170, 62, 0.15));
}

/* Индивидуальные цвета подсветки для разных карточек */
/* Полный контроль */
.text-center:nth-child(1):hover .octagon::after {
  background: radial-gradient(circle, rgba(13, 110, 253, 0.15) 0%, transparent 70%);
}

.text-center:nth-child(1):hover .octagon {
  filter: 
    drop-shadow(0 8px 25px rgba(13, 110, 253, 0.3))
    drop-shadow(0 0 15px rgba(13, 110, 253, 0.15));
}

/* Демо-счет */
.text-center:nth-child(2):hover .octagon::after {
  background: radial-gradient(circle, rgba(32, 170, 62, 0.15) 0%, transparent 70%);
}

.text-center:nth-child(2):hover .octagon {
  filter: 
    drop-shadow(0 8px 25px rgba(32, 170, 62, 0.3))
    drop-shadow(0 0 15px rgba(32, 170, 62, 0.15));
}

/* Гибкая настройка */
.text-center:nth-child(3):hover .octagon::after {
  background: radial-gradient(circle, rgba(255, 199, 0, 0.15) 0%, transparent 70%);
}

.text-center:nth-child(3):hover .octagon {
  filter: 
    drop-shadow(0 8px 25px rgba(255, 199, 0, 0.3))
    drop-shadow(0 0 15px rgba(255, 199, 0, 0.15));
}

/* Анимация текста */
.text-center:hover .text-dark.fw-bolder {
  color: #20AA3E !important;
  transition: color 0.3s ease 0.1s;
}

.text-center:nth-child(1):hover .text-dark.fw-bolder {
  color: #0B5FFF !important;
}

.text-center:nth-child(3):hover .text-dark.fw-bolder {
  color: #FFC700 !important;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
  .text-center:hover .octagon {
    transform: translateY(-4px) scale(1.03);
  }
  
  .text-center:hover .octagon::after {
    width: 140px;
    height: 140px;
  }
}

/* Дополнительные эффекты */
@keyframes float-icon {
  0%, 100% { transform: translateY(-8px) scale(1.05); }
  50% { transform: translateY(-12px) scale(1.07); }
}

.text-center:hover .octagon {
  animation: float-icon 3s ease-in-out infinite;
}

/* ===== Анимации для статистических блоков ===== */
/* Контейнеры статистики */
.d-flex.flex-column.flex-center.h-200px {
  position: relative;
  transition: all 0.5s ease;
  z-index: 1;
}

/* Свечение behind octagon */
.d-flex.flex-column.flex-center.h-200px::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(32, 170, 62, 0.25) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: all 0.5s ease;
  z-index: -1;
  opacity: 0;
  filter: blur(20px);
}

/* Лучи behind octagon */
.d-flex.flex-column.flex-center.h-200px::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(32, 170, 62, 0.15) 30deg,
    transparent 60deg,
    rgba(32, 170, 62, 0.2) 90deg,
    transparent 120deg,
    rgba(32, 170, 62, 0.15) 150deg,
    transparent 180deg,
    rgba(32, 170, 62, 0.2) 210deg,
    transparent 240deg,
    rgba(32, 170, 62, 0.15) 270deg,
    transparent 300deg,
    rgba(32, 170, 62, 0.2) 330deg,
    transparent 360deg
  );
  transform: translate(-50%, -50%) scale(0) rotate(0deg);
  transition: all 0.6s ease;
  z-index: -2;
  opacity: 0;
  border-radius: 50%;
}

/* Состояние при наведении */
.d-flex.flex-column.flex-center.h-200px:hover {
  transform: translateY(-8px) scale(1.05);
}

.d-flex.flex-column.flex-center.h-200px:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.d-flex.flex-column.flex-center.h-200px:hover::after {
  opacity: 0.6;
  transform: translate(-50%, -50%) scale(1) rotate(180deg);
}

/* Анимация иконок при наведении */
.d-flex.flex-column.flex-center.h-200px:hover .svg-icon {
  transform: scale(1.2);
  transition: transform 0.4s ease;
}

/* Анимация цифр при наведении */
.d-flex.flex-column.flex-center.h-200px:hover .stat-number {
  color: #20AA3E !important;
  transition: color 0.3s ease 0.1s;
}

/* Анимация текста при наведении */
.d-flex.flex-column.flex-center.h-200px:hover .text-gray-600 {
  color: #E6E9F0 !important;
  transition: color 0.3s ease 0.1s;
}

/* Индивидуальные цвета для разных блоков статистики */
/* Первый блок - Пользователи */
.d-flex.flex-column.flex-center.h-200px:nth-child(1):hover::before {
  background: radial-gradient(circle, rgba(13, 110, 253, 0.3) 0%, transparent 70%);
}

.d-flex.flex-column.flex-center.h-200px:nth-child(1):hover::after {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(13, 110, 253, 0.2) 30deg,
    transparent 60deg,
    rgba(13, 110, 253, 0.25) 90deg,
    transparent 120deg,
    rgba(13, 110, 253, 0.2) 150deg,
    transparent 180deg,
    rgba(13, 110, 253, 0.25) 210deg,
    transparent 240deg,
    rgba(13, 110, 253, 0.2) 270deg,
    transparent 300deg,
    rgba(13, 110, 253, 0.25) 330deg,
    transparent 360deg
  );
}

.d-flex.flex-column.flex-center.h-200px:nth-child(1):hover .stat-number {
  color: #0B5FFF !important;
}

/* Второй блок - Боты (оставляем зеленый по умолчанию) */

/* Третий блок - Объем */
.d-flex.flex-column.flex-center.h-200px:nth-child(3):hover::before {
  background: radial-gradient(circle, rgba(255, 199, 0, 0.3) 0%, transparent 70%);
}

.d-flex.flex-column.flex-center.h-200px:nth-child(3):hover::after {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 199, 0, 0.2) 30deg,
    transparent 60deg,
    rgba(255, 199, 0, 0.25) 90deg,
    transparent 120deg,
    rgba(255, 199, 0, 0.2) 150deg,
    transparent 180deg,
    rgba(255, 199, 0, 0.25) 210deg,
    transparent 240deg,
    rgba(255, 199, 0, 0.2) 270deg,
    transparent 300deg,
    rgba(255, 199, 0, 0.25) 330deg,
    transparent 360deg
  );
}

.d-flex.flex-column.flex-center.h-200px:nth-child(3):hover .stat-number {
  color: #FFC700 !important;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
  .d-flex.flex-column.flex-center.h-200px:hover {
    transform: translateY(-4px) scale(1.03);
  }
  
  .d-flex.flex-column.flex-center.h-200px::before {
    width: 140px;
    height: 140px;
  }
  
  .d-flex.flex-column.flex-center.h-200px::after {
    width: 180px;
    height: 180px;
  }
}

/* Для больших экранов */
@media (min-width: 992px) {
  .d-flex.flex-column.flex-center.h-lg-250px:hover::before {
    width: 220px;
    height: 220px;
  }
  
  .d-flex.flex-column.flex-center.h-lg-250px:hover::after {
    width: 260px;
    height: 260px;
  }
}

.landing-curve svg {
  display: block;
  margin-bottom: -1px; /* убирает наложение */
}

/* Исправление карточек продуктов для мобильных */
@media (max-width: 768px) {
  /* Основная большая картинка */
  .col-lg-6 .overlay-wrapper {
    min-height: 200px !important;
    height: 200px !important;
  }
  
  /* Маленькие картинки */
  .col-lg-6 .col-lg-6 .overlay-wrapper {
    min-height: 150px !important;
    height: 150px !important;
  }
  
  /* Скринеры */
  .col-lg-6 > .overlay-wrapper:last-child {
    min-height: 180px !important;
    height: 180px !important;
  }
  
  /* Текст поверх картинок */
  .overlay-layer .text-white h3 {
    font-size: 1.2rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .overlay-layer .text-white p {
    font-size: 0.9rem !important;
    margin-bottom: 0 !important;
  }
  
  /* Отступы текста */
  .overlay-layer .p-5 {
    padding: 1.5rem !important;
  }
  
  .overlay-layer .p-4 {
    padding: 1rem !important;
  }
  
  /* Грид для маленьких картинок */
  .row.g-10.mb-10 {
    margin-bottom: 1rem !important;
  }
  
  .row.g-10.mb-10 .col-lg-6 {
    margin-bottom: 1rem;
  }
  
  /* Убираем фиксированную высоту для мобильных */
  .h-lg-100, .h-250px {
    height: auto !important;
  }
  
  /* Улучшаем отображение background изображений */
  .bgi-size-cover {
    background-size: contain !important;
    background-position: center center !important;
  }
}

@media (max-width: 576px) {
  /* Еще более компактные размеры для очень маленьких экранов */
  .col-lg-6 .overlay-wrapper {
    min-height: 180px !important;
    height: 180px !important;
  }
  
  .col-lg-6 .col-lg-6 .overlay-wrapper {
    min-height: 130px !important;
    height: 130px !important;
  }
  
  .col-lg-6 > .overlay-wrapper:last-child {
    min-height: 160px !important;
    height: 160px !important;
  }
  
  /* Уменьшаем текст еще больше */
  .overlay-layer .text-white h3 {
    font-size: 1.1rem !important;
  }
  
  .overlay-layer .text-white p {
    font-size: 0.8rem !important;
  }
  
  /* Уменьшаем отступы */
  .overlay-layer .p-5 {
    padding: 1rem !important;
  }
  
  .overlay-layer .p-4 {
    padding: 0.8rem !important;
  }
}

/* Гарантируем, что все картинки будут видимы */
.overlay-wrapper {
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

/* Для очень длинных описаний */
.overlay-layer .text-white {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 768px) {
  .overlay-wrapper.square {
    aspect-ratio: 1 / 1;
    width: 100% !important;
    height: auto !important;
  }

  .overlay-wrapper.rect {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto;
  }
}

.hero-title {
  font-size: 3rem;        /* базовый размер для десктопов */
  line-height: 1.25;      /* компактно, но читаемо */
  max-width: 980px;       /* не растягивается слишком */
  letter-spacing: 0.2px;
}

@media (min-width: 1200px) {
  .hero-title {
    font-size: 3.5rem;    /* крупнее на больших экранах */
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 2.2rem;    /* планшеты */
    line-height: 1.3;
  }
}

@media (max-width: 576px) {
  .hero-title {
    font-size: 1.8rem;    /* телефоны */
    line-height: 1.3;
  }
}