/* CSS Custom Properties (Variables) */
:root {
  /* Цветовая схема - Темная тема по умолчанию */
  --color-bg-primary: #0f0f0f; /* Основной фон */
  --color-bg-secondary: #1a1a1a; /* Вторичный фон */
  --color-bg-tertiary: #262626; /* Третичный фон */
  --color-border: #2a2a2a; /* Границы */
  --color-text-primary: #f5f5f4; /* Основной текст */
  --color-text-secondary: #9ca3af; /* Вторичный текст */
  --color-text-muted: #6b7280; /* Приглушенный текст */
  --color-accent: #e6b812; /* Акцентный цвет (желтый) */
  --color-accent-hover: #f7ca3d; /* Акцентный цвет при наведении */
  --color-accent-light: #3a2f0a; /* Темная версия светлого акцентного цвета */

  /* Дополнительные цвета */
  --color-success: #10b981;
  --color-error: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;

  /* Тени для темной темы */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3),
    0 4px 6px -4px rgb(0 0 0 / 0.3);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3),
    0 8px 10px -6px rgb(0 0 0 / 0.3);

  /* Радиусы скругления */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Переходы */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
}

/* Темная тема */
html.dark,
[data-theme="dark"],
.dark-theme {
  --color-bg-primary: #0f0f0f; /* Основной фон */
  --color-bg-secondary: #1a1a1a; /* Вторичный фон */
  --color-bg-tertiary: #262626; /* Третичный фон */
  --color-border: #2a2a2a; /* Границы */
  --color-text-primary: #f5f5f4; /* Основной текст */
  --color-text-secondary: #9ca3af; /* Вторичный текст */
  --color-text-muted: #6b7280; /* Приглушенный текст */
  --color-accent: #e6b812; /* Акцентный цвет (желтый) */
  --color-accent-hover: #f7ca3d; /* Акцентный цвет при наведении */
  --color-accent-light: #3a2f0a; /* Темная версия светлого акцентного цвета */

  /* Тени для темной темы */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3),
    0 4px 6px -4px rgb(0 0 0 / 0.3);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3),
    0 8px 10px -6px rgb(0 0 0 / 0.3);
}

/* Reset и базовые стили */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  transition: color var(--transition-normal);
  position: relative;
  overflow-x: hidden;
}

.dark-theme body::before {
  background: radial-gradient(
      circle at 25% 25%,
      rgba(230, 184, 18, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 75% 75%,
      rgba(230, 184, 18, 0.05) 0%,
      transparent 50%
    );
}

/* Фон для блока hero */
.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.hero-bg-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 30% 40%,
      rgba(230, 184, 18, 0.03) 0%,
      transparent 60%
    ),
    radial-gradient(
      circle at 70% 60%,
      rgba(230, 184, 18, 0.02) 0%,
      transparent 65%
    ),
    radial-gradient(
      circle at 10% 80%,
      rgba(230, 184, 18, 0.015) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 90% 20%,
      rgba(230, 184, 18, 0.01) 0%,
      transparent 55%
    ),
    linear-gradient(
      45deg,
      transparent 30%,
      rgba(230, 184, 18, 0.012) 50%,
      transparent 70%
    );
  animation: gradientShift 12s ease-in-out infinite,
    gradientFlow 20s linear infinite;
  transform: translate(
    var(--scroll-offset-x, 0px),
    var(--scroll-offset-y, 0px)
  );
}

.hero-bg-gradient::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
      circle at 15% 25%,
      rgba(230, 184, 18, 0.25) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 42% 18%,
      rgba(230, 184, 18, 0.22) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 68% 32%,
      rgba(230, 184, 18, 0.28) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 23% 55%,
      rgba(230, 184, 18, 0.2) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 77% 48%,
      rgba(230, 184, 18, 0.26) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 85% 72%,
      rgba(230, 184, 18, 0.23) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 34% 78%,
      rgba(230, 184, 18, 0.27) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 61% 85%,
      rgba(230, 184, 18, 0.21) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 92% 15%,
      rgba(230, 184, 18, 0.24) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 12% 68%,
      rgba(230, 184, 18, 0.22) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 56% 22%,
      rgba(230, 184, 18, 0.25) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 28% 92%,
      rgba(230, 184, 18, 0.2) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 73% 8%,
      rgba(230, 184, 18, 0.26) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 8% 38%,
      rgba(230, 184, 18, 0.23) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 95% 88%,
      rgba(230, 184, 18, 0.24) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 48% 65%,
      rgba(230, 184, 18, 0.21) 1px,
      transparent 1px
    );
  background-size: 180px 180px, 220px 220px, 160px 160px, 240px 240px,
    190px 190px, 170px 170px, 210px 210px, 200px 200px, 150px 150px, 230px 230px,
    180px 180px, 195px 195px, 175px 175px, 205px 205px, 185px 185px, 215px 215px;
  animation: particleFloat 25s linear infinite;
  opacity: 0.6;
}

.hero-bg-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--color-bg-primary) 80%,
    var(--color-bg-primary) 100%
  );
  z-index: 10;
}

.hero-bg-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
      rgba(230, 184, 18, 0.04) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(230, 184, 18, 0.04) 1px, transparent 1px);
  background-size: 120px 120px;
  animation: gridPulse 12s ease-in-out infinite;
  opacity: 0.25;
  transform: translate(
    var(--scroll-offset-x, 0px),
    var(--scroll-offset-y, 0px)
  );
}

.hero-bg-orbs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero-bg-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Контейнер */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn--primary {
  background: linear-gradient(
    135deg,
    var(--color-accent),
    var(--color-accent-hover)
  );
  color: #000;
  border-color: var(--color-accent);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(230, 184, 18, 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.4),
    transparent
  );
  transition: left 0.6s;
}

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

.btn--primary:hover {
  background: linear-gradient(
    135deg,
    var(--color-accent-hover),
    var(--color-accent)
  );
  border-color: var(--color-accent-hover);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(230, 184, 18, 0.4);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border);
  position: relative;
  overflow: hidden;
}

.btn--outline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: var(--color-accent);
  transition: width var(--transition-normal);
  z-index: -1;
}

.btn--outline:hover::before {
  width: 100%;
}

.btn--outline:hover {
  border-color: var(--color-accent);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(230, 184, 18, 0.2);
}

.btn--large {
  padding: 16px 32px;
  font-size: 18px;
}

/* Заголовки */
.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--color-text-primary);
}

/* Header */
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  backdrop-filter: blur(10px);
  z-index: 1000;
}

.header__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.logo h1,
.logo h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-accent);
}

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

.nav a {
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.nav a:hover {
  color: var(--color-accent);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header__buttons {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Mobile Menu */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  gap: 4px;
}

.mobile-menu-toggle span {
  width: 25px;
  height: 3px;
  background-color: var(--color-text-primary);
  transition: all var(--transition-fast);
}

.mobile-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100vh;
  background-color: var(--color-bg-primary);
  z-index: 9999;
  transition: left var(--transition-normal);
}

.mobile-menu.active {
  left: 0;
}

.mobile-menu__content {
  padding: 2rem;
}

.mobile-menu__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--color-text-primary);
}

.mobile-nav ul {
  list-style: none;
  margin-top: 4rem;
}

.mobile-nav li {
  margin-bottom: 2rem;
}

.mobile-nav a {
  font-size: 1.5rem;
  color: var(--color-text-primary);
  text-decoration: none;
}

/* Theme Toggle */
.theme-toggle {
  position: relative;
}

.theme-btn {
  width: 60px;
  height: 32px;
  border-radius: 16px;
  border: 2px solid var(--color-border);
  background: linear-gradient(
    135deg,
    var(--color-bg-secondary),
    var(--color-bg-tertiary)
  );
  cursor: pointer;
  position: relative;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px;
  overflow: hidden;
}

.theme-btn:hover {
  border-color: var(--color-accent);
  transform: scale(1.05);
}

.theme-btn__sun,
.theme-btn__moon {
  font-size: 16px;
  transition: all var(--transition-normal);
  z-index: 2;
  position: relative;
}

.theme-btn::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--color-accent),
    var(--color-accent-hover)
  );
  transition: all var(--transition-normal);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dark-theme .theme-btn::after {
  transform: translateX(26px);
}

.light-theme .theme-btn__sun {
  opacity: 1;
  transform: scale(1);
}

.light-theme .theme-btn__moon {
  opacity: 0.5;
  transform: scale(0.8);
}

.dark-theme .theme-btn__sun {
  opacity: 0.5;
  transform: scale(0.8);
}

.dark-theme .theme-btn__moon {
  opacity: 1;
  transform: scale(1);
}

/* Hero Section */
.hero {
  padding: 120px 0;
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(
    180deg,
    var(--color-bg-primary) 0%,
    var(--color-bg-secondary) 30%,
    var(--color-bg-primary) 70%,
    var(--color-bg-primary) 100%
  );
}

/* Hero Background Elements */
.hero__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  transform: translate(var(--mouse-x, 0), var(--mouse-y, 0));
}

.hero__bg-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 30% 40%,
      rgba(230, 184, 18, 0.08) 0%,
      transparent 70%
    ),
    radial-gradient(
      circle at 70% 60%,
      rgba(230, 184, 18, 0.05) 0%,
      transparent 70%
    ),
    linear-gradient(
      45deg,
      transparent 30%,
      rgba(230, 184, 18, 0.03) 50%,
      transparent 70%
    );
  animation: gradientShift 15s ease-in-out infinite;
}

.hero__bg-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
      rgba(230, 184, 18, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(230, 184, 18, 0.05) 1px, transparent 1px);
  background-size: 100px 100px;
  animation: gridMove 20s linear infinite;
  opacity: 0.3;
}

.hero__bg-orbs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bg-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(230, 184, 18, 0.15) 0%,
    rgba(230, 184, 18, 0.08) 40%,
    rgba(230, 184, 18, 0.02) 70%,
    transparent 100%
  );
  box-shadow: 0 0 30px rgba(230, 184, 18, 0.12),
    inset 0 0 15px rgba(230, 184, 18, 0.06);
  animation: orbFloat 20s ease-in-out infinite, orbGlow 6s ease-in-out infinite;
  transform: translate(
    var(--scroll-offset-x, 0px),
    var(--scroll-offset-y, 0px)
  );
  transition: all 0.3s ease-out;
  filter: blur(0.5px);
}

.bg-orb--1 {
  width: 200px;
  height: 200px;
  top: 10%;
  left: 8%;
  animation-delay: 0s;
  animation-duration: 20s;
}

.bg-orb--2 {
  width: 150px;
  height: 150px;
  bottom: 15%;
  right: 12%;
  animation-delay: 5s;
  animation-duration: 25s;
}

.bg-orb--3 {
  width: 250px;
  height: 250px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: 10s;
  animation-duration: 30s;
  opacity: 0.4;
}

.bg-orb--4 {
  width: 120px;
  height: 120px;
  top: 25%;
  right: 15%;
  animation-delay: 15s;
  animation-duration: 18s;
}

.bg-orb--5 {
  width: 100px;
  height: 100px;
  bottom: 35%;
  left: 20%;
  animation-delay: 8s;
  animation-duration: 22s;
}

.bg-orb--6 {
  width: 140px;
  height: 140px;
  top: 70%;
  left: 75%;
  animation-delay: 12s;
  animation-duration: 26s;
}

.hero__bg-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bg-particle {
  position: absolute;
  width: var(--size);
  height: var(--size);
  background: radial-gradient(
    circle,
    var(--color-accent) 0%,
    rgba(230, 184, 18, 0.5) 70%,
    transparent 100%
  );
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 10px rgba(230, 184, 18, 0.6);
  animation: particleFloat var(--duration) ease-in-out infinite,
    particleTwinkle 3s ease-in-out infinite;
  animation-delay: var(--delay);
  transform: translate(
    var(--scroll-offset-x, 0px),
    var(--scroll-offset-y, 0px)
  );
  transition: all 0.3s ease-out;
}

.bg-particle:nth-child(1) {
  left: 10%;
  top: 20%;
}
.bg-particle:nth-child(2) {
  left: 70%;
  top: 10%;
}
.bg-particle:nth-child(3) {
  left: 30%;
  top: 60%;
}
.bg-particle:nth-child(4) {
  left: 80%;
  top: 70%;
}
.bg-particle:nth-child(5) {
  left: 50%;
  top: 80%;
}
.bg-particle:nth-child(6) {
  left: 20%;
  top: 40%;
}

.hero__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero__subtitle {
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: 1rem;
  opacity: 0;
  animation: slideInUp 0.6s ease-out 0.2s forwards;
}

.hero__title {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: slideInUp 0.6s ease-out 0.4s forwards;
}

.hero__description {
  font-size: 1.2rem;
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
  opacity: 0;
  animation: slideInUp 0.6s ease-out 0.6s forwards;
}

.hero__actions {
  opacity: 0;
  animation: slideInUp 0.6s ease-out 0.8s forwards;
}

.hero__animation {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  opacity: 0;
  animation: slideInRight 0.6s ease-out 1.3s forwards;
  perspective: 1200px;
}

/* 3D изометрическая сцена */
.isometric-scene {
  position: relative;
  width: 400px;
  height: 400px;
  transform-style: preserve-3d;
}

/* 3D платежные карты */
.payment-cards-3d {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.card-3d {
  position: absolute;
  width: 280px;
  height: 175px;
  transform-style: preserve-3d;
  opacity: 0;
  animation: cardSlideIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.card-primary {
  top: 20px;
  left: 20px;
  --card-z: 20px;
  transform: rotateX(-15deg) rotateY(25deg) translateZ(20px);
  animation-delay: 1s;
}

.card-secondary {
  top: 80px;
  left: 80px;
  --card-z: 40px;
  transform: rotateX(-15deg) rotateY(25deg) translateZ(40px);
  animation-delay: 2s;
}

.card-tertiary {
  top: 140px;
  left: 40px;
  --card-z: 60px;
  transform: rotateX(-15deg) rotateY(25deg) translateZ(60px);
  animation-delay: 2.3s;
}

.card-face {
  position: absolute;
  width: 280px;
  height: 175px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  box-sizing: border-box;
}

.card-front {
  background: linear-gradient(
    135deg,
    rgb(230, 184, 18) 0%,
    rgb(212, 166, 17) 50%,
    rgb(230, 184, 18) 100%
  );
  transform: translateZ(3px);
}

.card-secondary .card-front {
  background: linear-gradient(
    135deg,
    rgb(99, 102, 241) 0%,
    rgb(79, 70, 229) 50%,
    rgb(99, 102, 241) 100%
  );
}

.card-tertiary .card-front {
  background: linear-gradient(
    135deg,
    rgb(16, 185, 129) 0%,
    rgb(5, 150, 105) 50%,
    rgb(16, 185, 129) 100%
  );
}

.card-chip {
  width: 36px;
  height: 28px;
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.card-number {
  font-family: "Courier New", monospace;
  font-size: 24px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  letter-spacing: 3px;
}

.card-holder {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.card-logo {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 36px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.payment-card__trend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.trend-arrow {
  color: #22c55e;
  font-weight: 700;
  font-size: 1.1rem;
}

.trend-percent {
  color: #22c55e;
  font-weight: 600;
}

.trend-period {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.payment-card__chart {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(180deg, transparent, var(--color-accent-light));
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  display: flex;
  align-items: end;
  padding: 0.5rem 2rem;
}

.mini-chart {
  display: flex;
  align-items: end;
  gap: 3px;
  width: 100%;
  height: 30px;
}

.chart-bar {
  flex: 1;
  background: var(--color-accent);
  border-radius: 2px 2px 0 0;
  min-height: 4px;
  animation: growUp 0.8s ease-out;
  animation-delay: var(--delay, 0s);
  transform: scaleY(0);
  animation-fill-mode: forwards;
  opacity: 0.8;
}

.chart-bar:nth-child(1) {
  --delay: 1.5s;
}
.chart-bar:nth-child(2) {
  --delay: 1.7s;
}
.chart-bar:nth-child(3) {
  --delay: 1.9s;
}
.chart-bar:nth-child(4) {
  --delay: 2.1s;
}
.chart-bar:nth-child(5) {
  --delay: 2.3s;
}
.chart-bar:nth-child(6) {
  --delay: 2.5s;
}

/* Hero Stats */
.hero__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  opacity: 0;
  animation: slideInRight 0.6s ease-out 1.3s forwards;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  transition: all var(--transition-normal);
  transform: translate(var(--mouse-x, 0), var(--mouse-y, 0));
}

.stat-item:hover {
  transform: translateX(4px);
  border-color: var(--color-accent);
  box-shadow: 0 4px 12px rgba(230, 184, 18, 0.2);
}

.stat-icon {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-light);
  border-radius: var(--radius-md);
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* About Section */
.about {
  padding: 80px 0;
  position: relative;
  opacity: 0;
}

.about__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about__text p {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
}

.about__action {
  margin-top: 2rem;
}

.about__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-animation {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s infinite;
}

.logo-animation__circle {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  opacity: 0.3;
  animation: spin 3s linear infinite;
}

.logo-animation__text {
  font-size: 1.5rem;
  font-weight: 700;
  color: #000;
}

/* Features Section */
.features {
  padding: 80px 0;
  opacity: 0;
}

.features__tabs {
  margin-top: 3rem;
}

.tab-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.tab-btn {
  background-color: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 24px;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-weight: 500;
  color: var(--color-text-primary);
  position: relative;
  overflow: hidden;
}

.tab-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-accent-light),
    transparent
  );
  transition: left 0.6s;
}

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

.tab-btn.active,
.tab-btn:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #000;
  box-shadow: 0 4px 15px rgba(230, 184, 18, 0.3);
  transform: translateY(-2px);
}

.dark-theme .tab-btn {
  color: var(--color-text-primary);
}

.dark-theme .tab-btn.active,
.dark-theme .tab-btn:hover {
  color: #000;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.process-step {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  transition: transform var(--transition-normal);
}

.process-step:hover {
  transform: translateY(-4px);
}

.step-number {
  width: 50px;
  height: 50px;
  background-color: var(--color-accent);
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 auto 1rem;
}

.process-step h4 {
  font-size: 1.125rem;
  color: var(--color-text-primary);
  line-height: 1.4;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.feature-item {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  transition: transform var(--transition-normal);
}

.feature-item:hover {
  transform: translateY(-4px);
}

.feature-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.feature-item h4 {
  font-size: 1.125rem;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
}

.feature-item p {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

/* Services Section */
.services {
  padding: 80px 0;
  opacity: 0;
}

.services__subtitle {
  text-align: left;
  color: var(--color-text-secondary);
  font-size: 1.125rem;
  margin-top: 0.5rem;
  margin-bottom: 3rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.service-card {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.service-card:hover::before {
  opacity: 1;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
  border-color: rgba(230, 184, 18, 0.3);
}

.service-card__icon {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-card__icon-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(230, 184, 18, 0.1);
  border-radius: 50%;
  transition: all var(--transition-normal);
}

.service-card:hover .service-card__icon-bg {
  background: rgba(230, 184, 18, 0.2);
  transform: scale(1.1);
}

.service-card__emoji {
  font-size: 2rem;
  position: relative;
  z-index: 2;
}

.service-card__content {
  text-align: center;
}

.service-card__content h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--color-text-primary);
  font-weight: 700;
}

.service-card__description {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
  line-height: 1.4;
}

.service-card__content ul {
  list-style: none;
  text-align: left;
}

.service-card__content li {
  color: var(--color-text-secondary);
  margin-bottom: 0.6rem;
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.9rem;
  line-height: 1.5;
  transition: color var(--transition-fast);
}

.service-card__content li::before {
  content: "▸";
  color: var(--color-accent);
  position: absolute;
  left: 0;
  font-weight: bold;
}

.service-card:hover .service-card__content li {
  color: var(--color-text-primary);
}

/* Contact Section */
.contact {
  padding: 80px 0;
  opacity: 0;
}

.contact--featured {
  padding: 120px 0;
  position: relative;
}

.contact__content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact__center {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}


/* Иконка */
.contact__icon {
  margin-bottom: 3rem;
  display: flex;
  justify-content: center;
}

.contact__icon-inner {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  border-radius: 50%;
  box-shadow: 0 20px 40px rgba(230, 184, 18, 0.3);
  animation: contactIconPulse 3s ease-in-out infinite;
}

.contact__telegram-icon {
  font-size: 3rem;
  z-index: 2;
}

.contact__icon-glow {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  border-radius: 50%;
  opacity: 0.3;
  filter: blur(10px);
  animation: contactIconGlow 2s ease-in-out infinite alternate;
}

/* Типографика */
.contact__title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, var(--color-text-primary), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.contact__subtitle {
  font-size: 1.5rem;
  color: var(--color-accent);
  margin-bottom: 1rem;
  font-weight: 600;
}

.contact__description {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  margin-bottom: 3rem;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Кнопка */
.contact__action {
  margin-bottom: 3rem;
}

.btn--contact {
  position: relative;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  color: var(--color-bg-primary);
  padding: 1.25rem 2.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(230, 184, 18, 0.3);
  border: none;
}

.btn--contact:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(230, 184, 18, 0.4);
  background: linear-gradient(135deg, var(--color-accent-hover), var(--color-accent));
}

.btn__icon {
  font-size: 1.25rem;
  color: var(--color-bg-primary);
}

.btn__text {
  position: relative;
  z-index: 2;
  color: var(--color-bg-primary);
}

.btn__glow {
  display: none;
}

/* Функции */
.contact__features {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.contact__feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  border: 1px solid rgba(230, 184, 18, 0.2);
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.contact__feature:hover {
  background: rgba(230, 184, 18, 0.1);
  border-color: rgba(230, 184, 18, 0.4);
  color: var(--color-text-primary);
}

.feature__icon {
  font-size: 1.1rem;
}

/* Анимации */

@keyframes contactIconPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes contactIconGlow {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.6;
  }
}

.contact__form h2 {
  margin-bottom: 1rem;
}

.contact__form p {
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: 500;
  color: var(--color-text-primary);
}

.form-group input {
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  font-size: 16px;
  transition: border-color var(--transition-fast);
}

.form-group input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.contact__cards {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-card {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  transition: transform var(--transition-normal);
}

.contact-card:hover {
  transform: translateY(-4px);
}

.contact-card__icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.contact-card h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--color-text-primary);
}

/* Footer */
.footer {
  background-color: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  padding: 2rem 0;
}

.footer__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.footer__logo {
  text-align: center;
}

.footer__copyright {
  text-align: center;
}

.footer__copyright p {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  margin: 0;
}

/* Animations */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes floatingGlow {
  0%,
  100% {
    transform: translateY(0) translateX(0);
    opacity: 0.3;
  }
  25% {
    transform: translateY(-20px) translateX(10px);
    opacity: 0.5;
  }
  50% {
    transform: translateY(0) translateX(-10px);
    opacity: 0.4;
  }
  75% {
    transform: translateY(10px) translateX(5px);
    opacity: 0.6;
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-10deg);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

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

@keyframes glowPulse {
  0%,
  100% {
    box-shadow: 0 0 5px rgba(230, 184, 18, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(230, 184, 18, 0.6),
      0 0 40px rgba(230, 184, 18, 0.3);
  }
}

/* Hover effect for interactive elements */
.interactive-glow:hover {
  animation: glowPulse 1s ease-in-out infinite;
}

/* Enhanced card animations */
.service-card,
.pricing-card,
.contact-card {
  animation: fadeInScale 0.6s ease-out;
}

.service-card:nth-child(1) {
  animation-delay: 0.1s;
}
.service-card:nth-child(2) {
  animation-delay: 0.2s;
}
.service-card:nth-child(3) {
  animation-delay: 0.3s;
}
.service-card:nth-child(4) {
  animation-delay: 0.4s;
}

/* Floating particles effect */
.floating-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background-color: var(--color-accent);
  border-radius: 50%;
  opacity: 0.3;
  animation: floatUp 8s linear infinite;
}

@keyframes floatUp {
  0% {
    transform: translateY(100vh) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-10vh) translateX(-100px);
    opacity: 0;
  }
}

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

@keyframes growUp {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

/* Hero Background Animations */
@keyframes gradientShift {
  0%,
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
  25% {
    opacity: 0.8;
    transform: translateX(10px) translateY(-5px);
  }
  50% {
    opacity: 0.6;
    transform: translateX(-5px) translateY(10px);
  }
  75% {
    opacity: 0.9;
    transform: translateX(-10px) translateY(-5px);
  }
}

@keyframes gridMove {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  50% {
    transform: translateX(30px) translateY(30px) rotate(0.5deg);
  }
  100% {
    transform: translateX(60px) translateY(60px) rotate(0deg);
  }
}

@keyframes gridPulse {
  0%,
  100% {
    opacity: 0.6;
    filter: brightness(1);
  }
  50% {
    opacity: 0.8;
    filter: brightness(1.2);
  }
}

@keyframes gradientFlow {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-10px, -5px) rotate(1deg);
  }
  50% {
    transform: translate(5px, -10px) rotate(-0.5deg);
  }
  75% {
    transform: translate(10px, 5px) rotate(0.5deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes orbGlow {
  0%,
  100% {
    box-shadow: 0 0 30px rgba(230, 184, 18, 0.12),
      inset 0 0 15px rgba(230, 184, 18, 0.06);
    filter: blur(0.5px);
  }
  50% {
    box-shadow: 0 0 45px rgba(230, 184, 18, 0.2),
      inset 0 0 25px rgba(230, 184, 18, 0.1);
    filter: blur(0.3px);
  }
}

@keyframes particleTwinkle {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(230, 184, 18, 0.6);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px rgba(230, 184, 18, 0.9);
    transform: scale(1.2);
  }
}

@keyframes sectionSlideIn {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Улучшенные hover эффекты для карточек */
.service-card,
.pricing-card,
.contact-card {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.service-card:hover,
.pricing-card:hover,
.contact-card:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 0 25px 50px rgba(230, 184, 18, 0.15),
    0 0 0 1px rgba(230, 184, 18, 0.1), 0 0 30px rgba(230, 184, 18, 0.1);
}

@keyframes particleOpacity {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

@keyframes orbFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.7;
  }
  25% {
    transform: translateY(-20px) scale(1.1);
    opacity: 0.4;
  }
  50% {
    transform: translateY(10px) scale(0.9);
    opacity: 0.8;
  }
  75% {
    transform: translateY(-15px) scale(1.05);
    opacity: 0.5;
  }
}

@keyframes particleFloat {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.5);
  }
  15% {
    opacity: 1;
    transform: translateY(40px) scale(0.8);
  }
  50% {
    opacity: 0.9;
    transform: translateY(-20px) scale(1);
  }
  85% {
    opacity: 0.6;
    transform: translateY(-40px) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translateY(-60px) scale(0.3);
  }
}

@keyframes cardSlideIn {
  0% {
    opacity: 0;
    transform: rotateX(-15deg) rotateY(25deg) translateZ(var(--card-z))
      translateY(50px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: rotateX(-15deg) rotateY(25deg) translateZ(var(--card-z))
      translateY(0) scale(1);
  }
}

/* Responsive Design */

@media (max-width: 1024px) and (min-width: 769px) {
  /* 3D карточки для планшетов */
  .card-3d {
    width: 240px;
    height: 150px;
  }

  .card-face {
    width: 240px;
    height: 150px;
    padding: 20px;
  }

  .card-primary {
    top: 15px;
    left: 15px;
    transform: rotateX(-12deg) rotateY(20deg) translateZ(15px);
  }

  .card-secondary {
    top: 50px;
    right: 10px;
    transform: rotateX(8deg) rotateY(-25deg) translateZ(20px);
  }

  .card-tertiary {
    bottom: 25px;
    left: 45%;
    transform: translateX(-50%) rotateX(6deg) rotateY(12deg) translateZ(10px);
  }
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex;
  }

  .nav,
  .header__buttons {
    display: none;
  }

  .hero__content,
  .about__content,
  .contact__content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .contact--featured {
    padding: 80px 0;
  }

  .contact__title {
    font-size: 2.5rem;
  }

  .contact__subtitle {
    font-size: 1.25rem;
  }

  .contact__description {
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .btn--contact {
    padding: 1rem 2rem;
    font-size: 1rem;
  }

  .contact__features {
    gap: 1rem;
  }

  .contact__feature {
    font-size: 0.85rem;
    padding: 0.6rem 1.2rem;
  }

  .contact__icon-inner {
    width: 100px;
    height: 100px;
  }

  .contact__telegram-icon {
    font-size: 2.5rem;
  }

  .hero__cards {
    max-width: 100%;
  }

  .payment-card {
    min-height: auto;
    padding: 1.5rem;
  }

  .payment-card__amount {
    font-size: 1.8rem;
    min-width: auto;
  }

  /* 3D карточки адаптив */
  .card-3d {
    width: 160px;
    height: 100px;
  }

  .card-face {
    width: 160px;
    height: 100px;
    padding: 12px;
    border-radius: 8px;
  }

  .card-primary {
    top: 15px;
    left: 20px;
    transform: rotateX(-8deg) rotateY(12deg) translateZ(8px);
  }

  .card-secondary {
    top: 35px;
    right: 15px;
    transform: rotateX(6deg) rotateY(-15deg) translateZ(12px);
  }

  .card-tertiary {
    top: 60px;
    left: 50%;
    transform: translateX(-50%) rotateX(3deg) rotateY(8deg) translateZ(4px);
  }

  .card-chip {
    width: 20px;
    height: 15px;
  }

  .card-number {
    font-size: 12px;
  }

  .card-holder {
    font-size: 8px;
  }

  .card-logo {
    font-size: 14px;
  }

  /* Уменьшаем контейнер 3D сцены */
  .isometric-scene {
    width: 250px;
    height: 180px;
  }

  .hero__visual {
    max-height: 200px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero__stats {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .stat-item {
    padding: 0.75rem;
  }

  .stat-icon {
    width: 35px;
    height: 35px;
    font-size: 1.25rem;
  }

  .hero__title {
    font-size: 2.5rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .tab-buttons {
    flex-direction: column;
    align-items: center;
  }

  .process-steps {
    grid-template-columns: 1fr;
  }

  .services-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .service-card {
    padding: 1.25rem;
  }

  .service-card__icon {
    width: 50px;
    height: 50px;
    margin-bottom: 1rem;
  }

  .service-card__emoji {
    font-size: 1.75rem;
  }

  .service-card__content h3 {
    font-size: 1.25rem;
  }

  .footer {
    padding: 1.5rem 0;
  }

  .footer__content {
    gap: 0.75rem;
  }

  .container {
    padding: 0 15px;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 100px 0;
  }

  .hero__title {
    font-size: 2rem;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .payment-card {
    padding: 1.5rem;
  }
}

/* Utility Classes */
.text-center {
  text-align: center;
}

.mb-1 {
  margin-bottom: 0.5rem;
}
.mb-2 {
  margin-bottom: 1rem;
}
.mb-3 {
  margin-bottom: 1.5rem;
}
.mb-4 {
  margin-bottom: 2rem;
}

.mt-1 {
  margin-top: 0.5rem;
}
.mt-2 {
  margin-top: 1rem;
}
.mt-3 {
  margin-top: 1.5rem;
}
.mt-4 {
  margin-top: 2rem;
}