@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

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

html {
   scroll-behavior: smooth;
}

/* Доступность: видимый фокус для клавиатурной навигации */
a:focus-visible,
button:focus-visible {
   outline: 2px solid rgba(212, 175, 55, 0.6);
   outline-offset: 3px;
}

.kro-tag:focus-visible {
   outline: 2px solid rgba(245, 158, 11, 0.6);
   outline-offset: 3px;
}

/* ===== Крипта без розовых очков — стилистика medvedevart: премиум, сдержанно, акцент на тексте ===== */
.kro-main,
.kro-step1,
.kro-feature1 {
   /* Палитра: тёмный фон с лёгким тёплым подтоном (премиум, не холодный) */
   --kro-bg: #0a0c10;
   --kro-bg-mid: #0e1116;
   --kro-bg-soft: #13161c;
   --kro-accent: #f59e0b;
   --kro-accent-hover: #fbbf24;
   --kro-glow: rgba(245, 158, 11, 0.08);
   --kro-glow-soft: rgba(245, 158, 11, 0.04);
   /* Текст: иерархия как на medvedevart — основной и приглушённый */
   --kro-text: rgba(255, 255, 255, 0.92);
   --kro-text-muted: rgba(255, 255, 255, 0.52);
   /* Ритм отступов (8px база) */
   --kro-space-1: 8px;
   --kro-space-2: 16px;
   --kro-space-3: 24px;
   --kro-space-4: 32px;
   --kro-space-5: 48px;
   /* DuoView: фиолетовый для премиум */
   --kro-violet: #8b5cf6;
   --kro-violet-soft: rgba(139, 92, 246, 0.25);
   --kro-violet-border: rgba(139, 92, 246, 0.45);
   --kro-cyan: #06b6d4;
   --kro-cyan-soft: rgba(6, 182, 212, 0.2);
   --kro-cyan-border: rgba(6, 182, 212, 0.4);
   --kro-gray-mid: #888888;
   --kro-gray-soft: #cccccc;
}

/* Hero + Footer: утилиты анимации (transition, keyframes) — только главная часть, без Фишки 1 */
.kro-main {
   --kro-ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
   --kro-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   --kro-duration-reveal: 0.7s;
   --kro-duration-reveal-slow: 0.85s;
   --kro-duration-hover: 0.25s;
   --kro-stagger: 0.12s;
   --kro-reveal-y: 44px;
   --kro-scroll-in-y: 52px;
   /* Типографика (medvedevart): акцент — заголовки, основной текст — тело */
   --kro-font-heading: 'Syne', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
   --kro-font-body: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --kro-font-mono: ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

/* Счётчики: @property для возможной CSS-анимации чисел (0→N) */
@property --kro-count {
   syntax: '<integer>';
   initial-value: 0;
   inherits: false;
}

@keyframes kro-fade-up {
   from { opacity: 0; transform: translateY(var(--kro-reveal-y, 28px)); }
   to { opacity: 1; transform: translateY(0); }
}

@keyframes kro-fade-up-scale {
   from { opacity: 0; transform: translateY(var(--kro-scroll-in-y, 40px)) scale(0.98); }
   to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Hero: карточка — лёгкое появление (keyframes один раз при загрузке) */
.kro-step1.kro-reveal-visible .kro-step1-inner {
   animation: kro-hero-card-in 0.8s var(--kro-ease-reveal) forwards;
}

@keyframes kro-hero-card-in {
   from { transform: scale(0.98); }
   to { transform: scale(1); }
}

/* Фишка 1: по референсу — один сдержанный акцент (приглушённый красный), глубина, без шаблонной яркости */
.kro-feature1 {
   --kro-danger: #ff4444;
   --kro-protection: #00cc00;
   --kro-gold: #ffd700;
   /* Мягкий акцент как на референсе: не кислотный красный, а приглушённый #c44 / #b84a4a */
   --kro-accent-muted: #b84a4a;
   --kro-accent-muted-subtle: rgba(184, 74, 74, 0.55);
   --kro-danger-soft: #b84a4a;
   --kro-protection-soft: rgba(55, 95, 55, 0.9);
   --kro-gold-soft: #b84a4a;
   /* Карточки: тёмный серый с лёгким тёплым тоном, тонкая граница */
   --kro-card-bg: rgba(26, 24, 24, 0.82);
   --kro-card-border: rgba(255, 255, 255, 0.055);
   --kro-card-border-accent: rgba(184, 74, 74, 0.18);
   /* Тени слоёв и glow для карточек/блоков (SiteLove-style) */
   --kro-shadow-layer1: 0 2px 8px rgba(0, 0, 0, 0.2);
   --kro-shadow-layer2: 0 8px 24px rgba(0, 0, 0, 0.15);
   --kro-shadow-layer3: 0 16px 48px rgba(0, 0, 0, 0.1);
   --kro-inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.04);
   --kro-btn-hover-y: -3px;
   --kro-btn-active-scale: 0.98;
   --kro-glow-amber-soft: rgba(245, 158, 11, 0.12);
   --kro-glow-red-soft: rgba(184, 74, 74, 0.2);
   --kro-glow-green-soft: rgba(55, 135, 55, 0.2);
   --kro-glow-purple-soft: rgba(139, 92, 246, 0.15);
   --kro-glow-purple: rgba(139, 92, 246, 0.35);
}

.kro-step1 {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 80px 24px 80px;
   position: relative;
   z-index: 1;
   overflow: hidden;
   background: radial-gradient(ellipse 60% 50% at 80% 85%, rgba(255, 255, 255, 0.04) 0%, transparent 50%),
               radial-gradient(ellipse 50% 40% at 15% 25%, rgba(245, 158, 11, 0.03) 0%, transparent 55%),
               radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
               linear-gradient(180deg, var(--kro-bg) 0%, rgba(15, 18, 24, 0.98) 100%);
   transition: opacity var(--kro-duration-reveal) var(--kro-ease-out), transform var(--kro-duration-reveal) var(--kro-ease-out);
}

body.kro-hero-scrolled .kro-step1 {
   opacity: 0.65;
   transform: translateY(-32px);
}

@media (prefers-reduced-motion: reduce) {
   body.kro-hero-scrolled .kro-step1 {
       opacity: 1;
       transform: none;
   }
   .kro-step1-bg {
       transform: none;
       transition: none;
   }
   .kro-step1-bg::before {
       animation: none;
       opacity: 1;
   }
   /* Hero: убираем каскадные задержки, всё появляется сразу */
   .kro-step1.kro-reveal .kro-step1-role,
   .kro-step1.kro-reveal .kro-step1-title,
   .kro-step1.kro-reveal .kro-hero-cases,
   .kro-step1.kro-reveal .kro-hero-live-stats,
   .kro-step1.kro-reveal .kro-hero-primary-cta,
   .kro-step1.kro-reveal .kro-step1-subtitle,
   .kro-step1.kro-reveal .kro-step1-tags,
   .kro-step1.kro-reveal .kro-step1-cta,
   .kro-step1.kro-reveal .kro-step1-cta-note,
   .kro-step1.kro-reveal .kro-step1-cta-secondary,
   .kro-step1.kro-reveal .kro-tag {
      transition-duration: 0.2s;
   }
   .kro-step1.kro-reveal-visible .kro-step1-role,
   .kro-step1.kro-reveal-visible .kro-step1-title,
   .kro-step1.kro-reveal-visible .kro-hero-cases,
   .kro-step1.kro-reveal-visible .kro-hero-live-stats,
   .kro-step1.kro-reveal-visible .kro-hero-primary-cta,
   .kro-step1.kro-reveal-visible .kro-step1-subtitle,
   .kro-step1.kro-reveal-visible .kro-step1-tags,
   .kro-step1.kro-reveal-visible .kro-tag:nth-child(1),
   .kro-step1.kro-reveal-visible .kro-tag:nth-child(2),
   .kro-step1.kro-reveal-visible .kro-tag:nth-child(3),
   .kro-step1.kro-reveal-visible .kro-tag:nth-child(4),
   .kro-step1.kro-reveal-visible .kro-step1-cta,
   .kro-step1.kro-reveal-visible .kro-step1-cta-note,
   .kro-step1.kro-reveal-visible .kro-step1-cta-secondary {
      transition-delay: 0s;
   }
   .kro-tag:hover {
      transform: none;
   }
   .kro-step1-cta:hover,
   .kro-step1-cta:active {
      transform: none;
      box-shadow: 0 0 0 rgba(245, 158, 11, 0);
   }
   .kro-step1-cta:hover::before {
      transform: none;
   }
   .kro-main .news-footer.kro-footer .news-footer-cta:hover,
   .kro-main .news-footer.kro-footer .news-footer-cta:active {
      transform: none;
      box-shadow: 0 0 0 rgba(245, 158, 11, 0);
   }
   .kro-main .news-footer.kro-footer .news-footer-link:hover {
      transform: none;
   }
   .kro-step1.kro-reveal-visible .kro-step1-inner {
      animation: none;
   }
}

/* Плавающая навигация: плавное появление и исчезновение (0.5–0.8 s, в стилистике sitelove) */
/* Плавающий навбар: премиум, сдержанно (medvedevart) — фон из палитры, типографика из переменных */
.kro-floating-nav {
   position: fixed;
   top: 16px;
   left: 50%;
   transform: translateX(-50%) translateY(-28px) scale(0.94);
   width: calc(100% - 32px);
   max-width: 920px;
   z-index: 200;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 24px 12px 24px;
   border-radius: 999px;
   background: rgba(10, 12, 16, 0.92);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
   border: 1px solid rgba(255, 255, 255, 0.06);
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: opacity 0.6s cubic-bezier(0.34, 1.2, 0.64, 1), transform 0.6s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 0.6s ease, visibility 0s linear 0.6s;
}

body.kro-hero-scrolled .kro-floating-nav {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   transform: translateX(-50%) translateY(0) scale(1);
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.06);
   transition: opacity 0.6s cubic-bezier(0.34, 1.2, 0.64, 1), transform 0.6s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 0.6s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
   .kro-floating-nav,
   body.kro-hero-scrolled .kro-floating-nav {
      transition-duration: 0.2s;
      transition-timing-function: ease;
   }
   .kro-floating-nav { transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, visibility 0s linear 0.2s; }
   body.kro-hero-scrolled .kro-floating-nav { transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, visibility 0s; }
}

.kro-floating-nav-brand {
   font-family: var(--kro-font-heading);
   font-size: 15px;
   font-weight: 700;
   color: var(--kro-text);
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   letter-spacing: -0.01em;
   transition: color var(--kro-duration-hover) ease;
}

.kro-floating-nav-brand:hover {
   color: rgba(255, 255, 255, 0.98);
}

.kro-floating-nav-icon {
   width: 24px;
   height: 24px;
   flex-shrink: 0;
   background: rgba(255, 255, 255, 0.2);
   border-radius: 8px;
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cline x1='5' y1='5' x2='19' y2='19' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
   mask-size: 14px 14px;
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cline x1='5' y1='5' x2='19' y2='19' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
   -webkit-mask-size: 14px 14px;
}

.kro-floating-nav-links {
   display: flex;
   align-items: center;
   gap: 8px;
}

.kro-floating-nav-links a {
   font-family: var(--kro-font-body);
   font-size: 13px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.78);
   text-decoration: none;
   padding: 6px 12px;
   border-radius: 999px;
   letter-spacing: 0.02em;
   transition: color var(--kro-duration-hover) ease, background var(--kro-duration-hover) ease, transform var(--kro-duration-hover) ease;
}

.kro-floating-nav-links a:hover {
   color: var(--kro-text);
   background: rgba(255, 255, 255, 0.07);
   transform: translateY(-1px);
}

.kro-floating-nav-sep {
   width: 1px;
   height: 18px;
   margin: 0 8px;
   background: rgba(255, 255, 255, 0.12);
   flex-shrink: 0;
}

.kro-floating-nav-cta {
   font-family: var(--kro-font-body);
   padding: 10px 20px;
   border-radius: 999px;
   background: rgba(245, 158, 11, 0.12);
   border: 1px solid rgba(245, 158, 11, 0.28);
   color: rgba(255, 230, 200, 0.95);
   font-weight: 700;
   font-size: 13px;
   letter-spacing: 0.03em;
   transition: background var(--kro-duration-hover) ease, border-color var(--kro-duration-hover) ease, transform var(--kro-duration-hover) ease, color var(--kro-duration-hover) ease;
}

.kro-floating-nav-cta:hover {
   background: rgba(245, 158, 11, 0.2);
   border-color: rgba(245, 158, 11, 0.4);
   color: #fff;
   transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
   .kro-floating-nav {
       transition: opacity 0.2s ease, visibility 0s;
   }
   body.kro-hero-scrolled .kro-floating-nav {
       transform: translateX(-50%) translateY(0);
   }
}

@media (max-width: 768px) {
   .kro-floating-nav {
      padding: 10px 12px 10px 14px;
      width: calc(100% - 24px);
      top: 12px;
      max-width: none;
   }
   .kro-floating-nav-links {
      gap: 4px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      max-width: calc(100vw - 140px);
   }
   .kro-floating-nav-links::-webkit-scrollbar {
      display: none;
   }
   .kro-floating-nav-links a {
      font-size: 12px;
      padding: 6px 10px;
      white-space: nowrap;
   }
   .kro-floating-nav-sep {
      margin: 0 4px;
      height: 14px;
   }
   .kro-floating-nav-cta {
      padding: 8px 14px;
      font-size: 12px;
      flex-shrink: 0;
   }
}

@media (max-width: 600px) {
   .kro-floating-nav-brand-text {
      display: none;
   }
   .kro-floating-nav-brand::after {
      content: 'Крипта';
      font-family: inherit;
   }
}

.kro-step1-inner {
   width: 100%;
   max-width: 1000px;
   margin: 0 auto;
   position: relative;
   padding: 52px 32px 60px;
   background: rgba(255, 255, 255, 0.025);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border-radius: 20px;
   border: 1px solid rgba(220, 225, 235, 0.08);
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
   transition: box-shadow var(--kro-duration-hover) ease, border-color var(--kro-duration-hover) ease, transform var(--kro-duration-hover) ease;
}

.kro-step1-inner:hover {
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
   border-color: rgba(220, 225, 235, 0.15);
   transform: translateY(-5px);
}

.kro-step1-left {
   margin-bottom: 40px;
}

.kro-step1-right {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
   text-align: center;
}

.kro-step1-cta-note {
   font-family: var(--kro-font-body);
   font-size: 12px;
   color: rgba(255, 255, 255, 0.45);
   line-height: 1.45;
   max-width: 240px;
   margin: 0;
}

.kro-cta-note-mobile {
   display: none;
}

/* Hero: строка-роль — нежнее */
.kro-step1-role {
   font-family: var(--kro-font-body);
   font-size: 13px;
   font-weight: 500;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.55);
   margin: 0 0 16px;
   line-height: 1.45;
}

.kro-step1-cta-secondary {
   font-family: var(--kro-font-body);
   font-size: 13px;
   color: rgba(255, 255, 255, 0.5);
   text-decoration: none;
   margin-top: 4px;
   position: relative;
   transition: color var(--kro-duration-hover) ease;
}

.kro-step1-cta-secondary::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: -2px;
   width: 0;
   height: 1px;
   background: rgba(255, 255, 255, 0.4);
   transition: width var(--kro-duration-hover) var(--kro-ease-reveal);
}

.kro-step1-cta-secondary:hover {
   color: rgba(255, 255, 255, 0.95);
}

.kro-step1-cta-secondary:hover::after {
   width: 100%;
}

.kro-step1-cta-secondary:focus-visible {
   outline: 2px solid rgba(255, 255, 255, 0.5);
   outline-offset: 3px;
}

/* Hero: каскадное появление при .kro-reveal-visible (stagger medvedevart-style) */
.kro-step1.kro-reveal .kro-step1-role,
.kro-step1.kro-reveal .kro-step1-title,
.kro-step1.kro-reveal .kro-hero-cases,
.kro-step1.kro-reveal .kro-hero-live-stats,
.kro-step1.kro-reveal .kro-hero-primary-cta,
.kro-step1.kro-reveal .kro-step1-subtitle,
.kro-step1.kro-reveal .kro-step1-tags,
.kro-step1.kro-reveal .kro-step1-cta,
.kro-step1.kro-reveal .kro-step1-cta-note,
.kro-step1.kro-reveal .kro-step1-cta-secondary,
.kro-step1.kro-reveal .kro-tag {
   opacity: 0;
   transform: translateY(var(--kro-reveal-y));
   transition: opacity var(--kro-duration-reveal) var(--kro-ease-reveal), transform var(--kro-duration-reveal) var(--kro-ease-reveal);
}

.kro-step1.kro-reveal .kro-tag {
   transform: translateY(12px);
}

.kro-step1.kro-reveal-visible .kro-step1-role {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0s;
}

.kro-step1.kro-reveal-visible .kro-step1-title {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0.1s;
}

.kro-step1.kro-reveal-visible .kro-hero-cases {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0.2s;
}

.kro-step1.kro-reveal-visible .kro-hero-live-stats {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0.3s;
}

.kro-step1.kro-reveal-visible .kro-hero-primary-cta {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0.38s;
}

.kro-step1.kro-reveal-visible .kro-step1-subtitle {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0.48s;
}

.kro-step1.kro-reveal-visible .kro-step1-tags {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0.58s;
}

.kro-step1.kro-reveal-visible .kro-tag:nth-child(1) {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0.58s;
}

.kro-step1.kro-reveal-visible .kro-tag:nth-child(2) {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0.68s;
}

.kro-step1.kro-reveal-visible .kro-tag:nth-child(3) {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0.78s;
}

.kro-step1.kro-reveal-visible .kro-tag:nth-child(4) {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0.88s;
}

.kro-step1.kro-reveal-visible .kro-step1-cta {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 1s;
}

.kro-step1.kro-reveal-visible .kro-step1-cta-note {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 1.12s;
}

.kro-step1.kro-reveal-visible .kro-step1-cta-secondary {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 1.24s;
}

@media (min-width: 900px) {
   .kro-step1-inner {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 48px;
      text-align: left;
   }
   .kro-step1-left {
      flex: 1;
      max-width: 520px;
      margin-bottom: 0;
      text-align: left;
   }
   .kro-step1-tags {
      justify-content: flex-start;
   }
   .kro-step1-right {
      flex: 0 0 auto;
      align-items: flex-start;
      text-align: left;
      padding-left: 48px;
      border-left: 1px solid rgba(255, 255, 255, 0.12);
   }
   .kro-step1-cta-note {
      max-width: 260px;
   }
   .kro-step1 {
      text-align: left;
   }
}

.kro-step1-bg {
   position: absolute;
   inset: 0;
   z-index: -1;
   background: radial-gradient(ellipse 80% 60% at 50% 20%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
               linear-gradient(180deg, var(--kro-bg) 0%, rgba(14, 17, 22, 0.98) 45%, var(--kro-bg-soft) 100%);
   transform: translateY(var(--kro-parallax-y, 0));
   transition: transform 0.12s ease-out;
}

/* Янтарный блик с «дыханием» (медленная пульсация атмосферы) */
.kro-step1-bg::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse 42% 32% at 50% 42%, rgba(245, 158, 11, 0.07) 0%, transparent 55%);
   pointer-events: none;
   animation: kro-hero-breathe 20s ease-in-out infinite;
}

@keyframes kro-hero-breathe {
   0%, 100% { opacity: 0.8; }
   50% { opacity: 1; }
}

.kro-step1-bg::after {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.2) 100%);
   pointer-events: none;
}

/* Виньетка + сетка точек Hero */
.kro-step1-bg::after {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.2) 100%),
               radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.018) 1px, transparent 0),
               radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.012) 1px, transparent 0);
   background-size: 100% 100%, 32px 32px, 24px 24px;
   background-position: 0 0, 0 0, 0 0;
   pointer-events: none;
}

/* Hero-заголовок: Syne — нежнее */
.kro-step1-title {
   font-family: var(--kro-font-heading);
   font-size: clamp(48px, 11vw, 88px);
   font-weight: 700;
   line-height: 1.06;
   letter-spacing: -0.02em;
   margin-bottom: 26px;
   color: rgba(255, 255, 255, 0.94);
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Hero: реальные случаи (top3 из live-counter) + счётчик + главный CTA */
.kro-hero-cases {
   display: grid;
   grid-template-columns: 1fr;
   gap: 12px;
   width: 100%;
   max-width: 640px;
   margin: 0 auto 16px;
   text-align: left;
}

@media (min-width: 720px) {
   .kro-hero-cases {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      max-width: 920px;
   }
}

@media (min-width: 900px) {
   .kro-hero-cases {
      margin-left: 0;
      margin-right: 0;
   }
}

.kro-hero-case-card {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 8px;
   padding: 16px 18px;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   background: rgba(0, 0, 0, 0.25);
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
   transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.kro-hero-case-card:hover {
   border-color: rgba(245, 158, 11, 0.35);
   transform: translateY(-2px);
   box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.kro-hero-case-channel {
   font-family: var(--kro-font-body);
   font-size: clamp(14px, 1.9vw, 16px);
   font-weight: 700;
   color: #fff;
   text-decoration: none;
   word-break: break-word;
   line-height: 1.35;
}

.kro-hero-case-channel:hover {
   color: rgba(245, 158, 11, 0.95);
   text-decoration: underline;
   text-underline-offset: 3px;
}

.kro-hero-case-channel--empty {
   font-weight: 500;
   color: rgba(255, 255, 255, 0.35);
}

.kro-hero-case-status {
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.5);
}

.kro-hero-case-sum {
   font-family: var(--kro-font-heading);
   font-size: clamp(17px, 2.4vw, 20px);
   font-weight: 600;
   color: rgba(255, 210, 170, 0.95);
   font-variant-numeric: tabular-nums;
}

.kro-hero-live-stats {
   font-family: var(--kro-font-body);
   font-size: clamp(13px, 1.6vw, 15px);
   font-weight: 500;
   color: rgba(255, 255, 255, 0.55);
   margin: 0 auto 20px;
   max-width: 920px;
   line-height: 1.5;
   text-align: center;
}

@media (min-width: 900px) {
   .kro-hero-live-stats {
      text-align: left;
      margin-left: 0;
      margin-right: 0;
   }
}

.kro-hero-primary-cta {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   max-width: 420px;
   margin: 0 auto 28px;
   padding: 18px 28px;
   border-radius: 14px;
   font-family: var(--kro-font-heading);
   font-size: clamp(20px, 3.2vw, 26px);
   font-weight: 700;
   letter-spacing: -0.02em;
   text-align: center;
   text-decoration: none;
   color: rgba(12, 10, 8, 0.95);
   background: linear-gradient(135deg, rgba(245, 158, 11, 1) 0%, rgba(234, 120, 40, 0.98) 100%);
   border: 1px solid rgba(255, 200, 120, 0.5);
   box-shadow: 0 8px 32px rgba(245, 158, 11, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
   transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.kro-hero-primary-cta:hover {
   transform: translateY(-2px) scale(1.02);
   filter: brightness(1.06);
   box-shadow: 0 14px 40px rgba(245, 158, 11, 0.45);
}

.kro-hero-primary-cta:focus-visible {
   outline: 3px solid rgba(255, 255, 255, 0.55);
   outline-offset: 3px;
}

@media (min-width: 900px) {
   .kro-hero-primary-cta {
      margin-left: 0;
      margin-right: 0;
   }
}


/* Подзаголовок героя: та же левая опора, что у «Уже проверено…»; акцент как у заголовка (Syne + янтарь) */
.kro-step1-subtitle {
   font-family: var(--kro-font-heading);
   font-size: clamp(16px, 2.15vw, 19px);
   font-weight: 600;
   line-height: 1.45;
   letter-spacing: -0.02em;
   color: rgba(255, 255, 255, 0.78);
   max-width: 920px;
   width: 100%;
   margin: 14px 0 28px;
   padding: 16px 0 0;
   position: relative;
   text-align: left;
}

.kro-step1-subtitle::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   width: min(72px, 18vw);
   height: 3px;
   border-radius: 2px;
   background: linear-gradient(90deg, rgba(245, 158, 11, 0.95) 0%, rgba(245, 158, 11, 0.12) 100%);
}

.kro-step1-subtitle-em {
   color: rgba(255, 210, 170, 0.96);
   font-weight: 700;
   text-shadow: 0 0 28px rgba(245, 158, 11, 0.14);
}

@media (max-width: 899px) {
   .kro-step1-subtitle {
      text-align: center;
      max-width: 520px;
      margin-left: auto;
      margin-right: auto;
   }

   .kro-step1-subtitle::before {
      left: 50%;
      transform: translateX(-50%);
   }
}

.kro-step1-tags {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
   gap: 10px;
   margin-bottom: 0;
   max-width: 520px;
}

.kro-tag {
   font-family: var(--kro-font-body);
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.65);
   padding: 8px 14px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 999px;
   background: transparent;
   transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.kro-tag:hover {
   border-color: rgba(255, 255, 255, 0.28);
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.98);
   transform: translateY(-4px) scale(1.05);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.kro-step1-cta {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   max-width: 280px;
   font-family: var(--kro-font-body);
   font-size: clamp(13px, 1.5vw, 15px);
   font-weight: 600;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: rgba(255, 230, 200, 0.92);
   background-color: rgba(245, 158, 11, 0.12);
   padding: 12px 22px;
   border: 1px solid rgba(245, 158, 11, 0.35);
   border-radius: 999px;
   text-decoration: none;
   transition: border-color var(--kro-duration-hover) ease, background-color var(--kro-duration-hover) ease, color var(--kro-duration-hover) ease, transform var(--kro-duration-hover) ease, box-shadow var(--kro-duration-hover) ease;
   text-align: center;
   line-height: 1.35;
   box-shadow: 0 0 0 rgba(245, 158, 11, 0);
}

.kro-step1-cta::before {
   content: '';
   width: 14px;
   height: 14px;
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f5c88c' stroke-width='2'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat center;
   background-size: contain;
   flex-shrink: 0;
   transition: transform var(--kro-duration-hover) ease;
}

.kro-step1-cta:hover {
   border-color: rgba(245, 158, 11, 0.55);
   background-color: rgba(245, 158, 11, 0.24);
   color: rgba(255, 248, 235, 1);
   transform: translateY(-3px) scale(1.05);
   box-shadow: 0 6px 28px rgba(0, 0, 0, 0.3), 0 0 32px rgba(245, 158, 11, 0.25);
}

.kro-step1-cta:active {
   transform: scale(0.98);
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.kro-step1-cta:hover::before {
   transform: translateX(3px);
}

.kro-step1-cta:focus-visible {
   outline: 2px solid rgba(245, 158, 11, 0.7);
   outline-offset: 3px;
   box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
}

/* Scroll reveal: переменные из набора утилит Hero/Footer */
.kro-reveal {
   opacity: 0;
   transform: translateY(var(--kro-reveal-y));
   transition: opacity var(--kro-duration-reveal) var(--kro-ease-out), transform var(--kro-duration-reveal) var(--kro-ease-out);
}

.kro-reveal.kro-reveal-visible {
   opacity: 1;
   transform: translateY(0);
}

/* Scroll-in: появление при входе во вьюпорт (keyframes-темп 0.5–0.8 s, fade-up + scale) */
.kro-scroll-in {
   opacity: 0;
   transform: translateY(var(--kro-scroll-in-y)) scale(0.98);
   transition: opacity var(--kro-duration-reveal-slow) var(--kro-ease-reveal), transform var(--kro-duration-reveal-slow) var(--kro-ease-reveal);
}

.kro-scroll-in.kro-scroll-in-visible {
   opacity: 1;
   transform: translateY(0) scale(1);
}

/* Футер: каскадное появление (stagger 0.1 s), включая нижнюю полосу */
.news-footer.kro-scroll-in .kro-footer-reveal {
   opacity: 0;
   transform: translateY(28px);
   transition: opacity var(--kro-duration-reveal) var(--kro-ease-reveal), transform var(--kro-duration-reveal) var(--kro-ease-reveal);
}

/* Задержки по классам — работает и без .news-footer-cta на главной */
.news-footer.kro-scroll-in-visible .news-footer-crafted.kro-footer-reveal { opacity: 1; transform: translateY(0); transition-delay: 0s; }
.news-footer.kro-scroll-in-visible .news-footer-links.kro-footer-reveal { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.news-footer.kro-scroll-in-visible .news-footer-cta.kro-footer-reveal { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.news-footer.kro-scroll-in-visible .kro-footer-bottom.kro-footer-reveal { opacity: 1; transform: translateY(0); transition-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
   .kro-scroll-in {
       opacity: 1;
       transform: none;
       transition: none;
   }
   .news-footer.kro-scroll-in .kro-footer-reveal,
   .news-footer.kro-scroll-in-visible .kro-footer-reveal:nth-child(n) {
       opacity: 1;
       transform: none;
       transition: none;
   }
}

.kro-checkers-anchor {
   min-height: 1px;
   padding: 0;
   margin: 0;
}

/* Заголовок секции «Результаты в цифрах» (medvedevart: иерархия заголовок → подзаголовок) */
.kro-f1-metrics-head {
   margin-bottom: 32px;
}

.kro-f1-metrics-title {
   font-family: 'Manrope', 'Inter', sans-serif;
   font-size: clamp(20px, 3vw, 24px);
   font-weight: 700;
   color: rgba(255, 255, 255, 0.95);
   margin-bottom: 8px;
   letter-spacing: 0.02em;
}

.kro-f1-metrics-sub {
   font-size: clamp(14px, 1.6vw, 15px);
   color: rgba(255, 255, 255, 0.6);
   margin: 0;
}

/* Фишка 1: Живой счётчик — карточки метрик, фон с глубиной (отдельный шрифт как на sitelove) */
.kro-feature1 {
   font-family: 'Plus Jakarta Sans', sans-serif;
   padding: 100px 24px 120px;
   text-align: center;
   position: relative;
   overflow: hidden;
}

.kro-feature1-bg {
   position: absolute;
   inset: 0;
   z-index: -1;
   /* Другой тон относительно hero: мягкий красный «денежный» градиент сзади карточек, без точек */
   background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(100, 45, 45, 0.22) 0%, transparent 55%),
               radial-gradient(ellipse 70% 50% at 50% 35%, rgba(72, 48, 42, 0.18) 0%, transparent 55%),
               radial-gradient(ellipse 100% 80% at 50% 50%, rgba(50, 30, 32, 0.15) 0%, transparent 65%),
               linear-gradient(180deg, #140e0f 0%, #110d0e 35%, #0e0b0c 100%);
}

/* Дашборд: LIVE + большая цифра + 3 карточки (тёплый контрастный фон, без сияния) */
.kro-feature1-dashboard {
   max-width: calc(680px + 4cm);
   margin: 0 auto 48px;
   padding: 36px 28px 40px;
   border-radius: 24px;
   background: linear-gradient(165deg, rgba(32, 26, 28, 0.95) 0%, rgba(24, 20, 22, 0.98) 100%);
   border: 1px solid rgba(184, 74, 74, 0.2);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.kro-feature1.kro-reveal .kro-feature1-dashboard {
   opacity: 0;
   transform: translateY(20px) scale(0.98);
   transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.kro-feature1.kro-reveal-visible .kro-feature1-dashboard {
   opacity: 1;
   transform: translateY(0) scale(1);
}

/* Каскадное появление внутри дашборда: дата → цифра → карточки */
.kro-feature1.kro-reveal .kro-feature1-date,
.kro-feature1.kro-reveal .kro-feature1-hero-number {
   opacity: 0;
   transform: translateY(12px);
   transition: opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.kro-feature1.kro-reveal-visible .kro-feature1-date {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0.06s;
}
.kro-feature1.kro-reveal-visible .kro-feature1-hero-number {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0.14s;
}

.kro-feature1.kro-reveal .kro-f1-content-card {
   opacity: 0;
   transform: translateY(20px) scale(0.98);
   transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   transition-delay: 0.08s;
}
.kro-feature1.kro-reveal-visible .kro-f1-content-card {
   opacity: 1;
   transform: translateY(0) scale(1);
}

.kro-feature1-date {
   font-size: clamp(13px, 2.2vw, 15px);
   font-weight: 700;
   color: rgba(255, 255, 255, 0.95);
   letter-spacing: 0.1em;
   text-transform: uppercase;
   display: inline-block;
   border: 1px solid rgba(184, 74, 74, 0.35);
   border-radius: 999px;
   padding: 8px 18px;
   margin-bottom: 28px;
   background: rgba(184, 74, 74, 0.08);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
   transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.25s ease;
}
.kro-feature1-date:hover {
   transform: scale(1.02);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
   border-color: rgba(184, 74, 74, 0.5);
}

.kro-feature1-hero-number {
   margin-bottom: 36px;
   text-align: center;
}

.kro-feature1-hero-value {
   display: block;
   font-size: clamp(36px, 8vw, 56px);
   font-weight: 700;
   color: var(--kro-accent-muted);
   line-height: 1.05;
   font-variant-numeric: tabular-nums;
   text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
   transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.kro-feature1-dashboard:hover .kro-feature1-hero-value {
   transform: scale(1.02);
}

.kro-feature1-hero-label {
   display: block;
   font-size: clamp(14px, 2.2vw, 17px);
   color: rgba(255, 255, 255, 0.78);
   margin-top: 10px;
}

/* Бейджи в стиле sitelove (Zero Knowledge Required · …) */
.kro-f1-badges-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 8px 4px;
   max-width: 560px;
   margin: 0 auto 20px;
}

.kro-f1-badge {
   display: inline-flex;
   align-items: center;
   padding: 6px 12px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.9);
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 999px;
}

/* Мягкая пульсация LIVE-бейджа (оживляет блок без отвлечения) */
.kro-f1-badges-row .kro-f1-badge:first-child {
   animation: kro-live-pulse 2.2s ease-in-out infinite;
}

@keyframes kro-live-pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.88; }
}

@media (prefers-reduced-motion: reduce) {
   .kro-f1-badges-row .kro-f1-badge:first-child {
      animation: none;
   }
}

.kro-f1-badge-sep {
   color: rgba(255, 255, 255, 0.35);
   font-size: 12px;
   margin: 0 2px;
}

.kro-f1-badge-on-card {
   position: absolute;
   top: 12px;
   right: 12px;
   padding: 4px 10px;
   font-size: 10px;
   background: rgba(184, 74, 74, 0.2);
   border-color: rgba(184, 74, 74, 0.4);
}

.kro-f1-loh-card {
   position: relative;
}

.kro-f1-badge-top3 {
   display: inline-block;
   margin-bottom: 10px;
}

.kro-f1-top3-wrap {
   max-width: calc(640px + 4cm);
   margin: 56px auto 28px;
   text-align: center;
}

.kro-feature1-dashboard-sub {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.6);
   margin: 20px auto 0;
   max-width: 560px;
   text-align: center;
}

.kro-f1-source-doc-wrap {
   margin: 14px auto 0;
   max-width: 560px;
   text-align: center;
}

.kro-f1-source-doc-link {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.75);
   text-decoration: underline;
   text-underline-offset: 2px;
}

.kro-feature1-heading-sub {
   font-size: clamp(14px, 1.8vw, 16px);
   color: rgba(255, 255, 255, 0.65);
   margin: 6px 0 0;
   font-weight: 400;
}

.kro-f1-top3-wrap .kro-feature1-heading {
   margin-bottom: 0;
}

.kro-feature1-heading {
   font-size: clamp(20px, 3.2vw, 26px);
   font-weight: 700;
   color: rgba(255, 255, 255, 0.95);
   max-width: calc(640px + 4cm);
   margin: 0 auto 28px;
   letter-spacing: 0.04em;
}

.kro-feature1-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px 20px;
   max-width: 100%;
   margin: 0;
}

.kro-feature1-stat {
   display: flex;
   flex-direction: column;
   gap: 8px;
   align-items: center;
   text-align: center;
}

.kro-feature1.kro-reveal .kro-feature1-stat {
   opacity: 0;
   transform: translateY(12px);
   transition: opacity 0.4s ease, transform 0.4s ease;
}

.kro-feature1.kro-reveal-visible .kro-feature1-stat:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0s; }
.kro-feature1.kro-reveal-visible .kro-feature1-stat:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.06s; }
.kro-feature1.kro-reveal-visible .kro-feature1-stat:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.12s; }

/* Блок «Стоп перед подпиской» — появление каскадом вниз (как чай), по референсу DuoView */
.kro-feature1.kro-reveal .kro-f1-block {
   opacity: 0;
   transform: translateY(14px);
   transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
               transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.kro-feature1.kro-reveal-visible .kro-f1-block.kro-f1-shock { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.kro-feature1.kro-reveal-visible .kro-f1-block.kro-f1-loh { opacity: 1; transform: translateY(0); transition-delay: 0.12s; }
.kro-feature1.kro-reveal-visible .kro-f1-block.kro-f1-math { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.kro-feature1.kro-reveal-visible .kro-f1-block.kro-f1-choice-wrap { opacity: 1; transform: translateY(0); transition-delay: 0.28s; }

/* Каскад внутри блоков (референс sitelove: stagger +50–150 ms) */
.kro-feature1.kro-reveal .kro-f1-loh-card {
   opacity: 0;
   transform: translateY(14px);
   transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.kro-feature1.kro-reveal-visible .kro-f1-loh-card:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.kro-feature1.kro-reveal-visible .kro-f1-loh-card:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.28s; }
.kro-feature1.kro-reveal-visible .kro-f1-loh-card:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.36s; }

.kro-feature1.kro-reveal .kro-f1-choice .kro-f1-choice-btn {
   opacity: 0;
   transform: translateY(12px);
   transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.kro-feature1.kro-reveal-visible .kro-f1-choice .kro-f1-choice-btn:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.34s; }
.kro-feature1.kro-reveal-visible .kro-f1-choice .kro-f1-choice-btn:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.42s; }

.kro-feature1.kro-reveal .kro-f1-shock-heading,
.kro-feature1.kro-reveal .kro-f1-shock-text,
.kro-feature1.kro-reveal .kro-f1-shock-total {
   opacity: 0;
   transform: translateY(10px);
   transition: opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.kro-feature1.kro-reveal-visible .kro-f1-shock-heading { opacity: 1; transform: translateY(0); transition-delay: 0.08s; }
.kro-feature1.kro-reveal-visible .kro-f1-shock-text { opacity: 1; transform: translateY(0); transition-delay: 0.14s; }
.kro-feature1.kro-reveal-visible .kro-f1-shock-total { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
   .kro-feature1.kro-reveal .kro-f1-block,
   .kro-feature1.kro-reveal .kro-feature1-dashboard,
   .kro-feature1.kro-reveal .kro-f1-content-card,
   .kro-feature1.kro-reveal .kro-feature1-date,
   .kro-feature1.kro-reveal .kro-feature1-hero-number,
   .kro-feature1.kro-reveal .kro-f1-loh-card,
   .kro-feature1.kro-reveal .kro-f1-choice .kro-f1-choice-btn,
   .kro-feature1.kro-reveal .kro-f1-shock-heading,
   .kro-feature1.kro-reveal .kro-f1-shock-text,
   .kro-feature1.kro-reveal .kro-f1-shock-total {
       opacity: 1;
       transform: none;
       transition: none;
   }
   .kro-feature1.kro-reveal-visible .kro-f1-block,
   .kro-feature1.kro-reveal-visible .kro-feature1-date,
   .kro-feature1.kro-reveal-visible .kro-feature1-hero-number,
   .kro-feature1.kro-reveal-visible .kro-f1-loh-card,
   .kro-feature1.kro-reveal-visible .kro-f1-choice .kro-f1-choice-btn,
   .kro-feature1.kro-reveal-visible .kro-f1-shock-heading,
   .kro-feature1.kro-reveal-visible .kro-f1-shock-text,
   .kro-feature1.kro-reveal-visible .kro-f1-shock-total { transition-delay: 0s; }
}

.kro-card {
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 12px;
   background: rgba(255, 255, 255, 0.03);
   padding: 20px 24px;
   transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.kro-feature1 .kro-card {
   border-color: var(--kro-card-border);
   background: var(--kro-card-bg);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.06);
   transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.kro-feature1-stat.kro-card:hover,
.kro-feature1-top3 .kro-card:hover {
   border-color: var(--kro-card-border-accent);
   background: rgba(34, 30, 30, 0.94);
   box-shadow: 0 16px 44px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.08);
   transform: translateY(-4px);
   transition-duration: 0.35s;
}

.kro-feature1-stat-value {
   font-size: clamp(18px, 2.6vw, 26px);
   font-weight: 700;
   color: rgba(255, 255, 255, 0.95);
   line-height: 1.2;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-variant-numeric: tabular-nums;
}

.kro-feature1-stat-label {
   font-size: clamp(12px, 1.4vw, 13px);
   color: rgba(255, 255, 255, 0.62);
}
.kro-feature1-source-caption {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.5);
   margin: 10px auto 0;
   max-width: min(560px, 100%);
   line-height: 1.45;
   text-align: center;
}

.kro-f1-system-note {
   font-size: 12px;
   color: rgba(255, 230, 190, 0.88);
   margin: 10px auto 0;
   max-width: 560px;
   line-height: 1.45;
}

.kro-feature1-stat.kro-card {
   padding: 14px 18px;
}

/* Фишка 1: четыре блока (шок, типы лоха, математика, выбор) в одной контент-карточке */
.kro-f1-blocks {
   max-width: 1000px;
   margin: 0 auto 64px;
   padding: 0 24px;
   text-align: left;
}

.kro-f1-content-card {
   padding: 32px 28px 36px;
   border-radius: 22px;
   background: linear-gradient(175deg, rgba(28, 24, 32, 0.9) 0%, rgba(20, 18, 26, 0.94) 100%);
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.05);
   transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s ease, border-color 0.25s ease;
}
.kro-f1-content-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.06);
   border-color: rgba(255, 255, 255, 0.14);
}

/* Блок 1: Шок-цифры — тёплый акцент, без сияния */
.kro-f1-block.kro-f1-shock {
   background: linear-gradient(180deg, rgba(32, 26, 28, 0.95) 0%, rgba(26, 22, 24, 0.98) 100%);
   border: 1px solid var(--kro-card-border-accent);
   border-radius: 16px;
   padding: 28px;
   margin-bottom: 32px;
   box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
   transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.25s ease;
}
.kro-f1-block.kro-f1-shock:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07);
   border-color: rgba(184, 74, 74, 0.28);
}

.kro-f1-shock-heading {
   font-size: clamp(11px, 1.4vw, 13px);
   font-weight: 600;
   letter-spacing: 0.08em;
   color: rgba(255, 255, 255, 0.6);
   text-transform: uppercase;
   margin: 0 0 8px;
}

.kro-f1-shock-text {
   font-size: clamp(14px, 1.7vw, 16px);
   color: rgba(255, 255, 255, 0.7);
   margin: 0 0 12px;
}

.kro-f1-shock-total {
   font-size: clamp(36px, 5.5vw, 52px);
   font-weight: 800;
   color: var(--kro-accent-muted);
   line-height: 1.1;
   margin: 0;
   text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

/* Блок 2: Твой тип лоха */
.kro-f1-block.kro-f1-loh {
   margin-bottom: 32px;
}

.kro-f1-loh-title {
   font-size: clamp(18px, 2.5vw, 24px);
   font-weight: 700;
   color: rgba(255, 255, 255, 0.95);
   margin-bottom: 20px;
   text-transform: uppercase;
   letter-spacing: 0.04em;
}

.kro-f1-loh-types {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
}

.kro-f1-loh-card {
   background: linear-gradient(180deg, rgba(30, 26, 28, 0.95) 0%, rgba(24, 22, 24, 0.98) 100%);
   border: 1px solid var(--kro-card-border-accent);
   border-radius: 16px;
   padding: 24px;
   text-align: left;
   box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.05);
   transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s ease, border-color 0.25s ease;
}
.kro-f1-loh-card:hover {
   transform: translateY(-5px) scale(1.02);
   box-shadow: 0 16px 44px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.07);
   border-color: rgba(184, 74, 74, 0.35);
   transition-duration: 0.35s;
}

.kro-f1-loh-avatar {
   display: block;
   font-size: 28px;
   line-height: 1;
   margin-bottom: 12px;
   opacity: 0.9;
}

.kro-f1-loh-name {
   font-size: clamp(14px, 1.6vw, 16px);
   font-weight: 700;
   color: var(--kro-accent-muted);
   text-transform: uppercase;
   letter-spacing: 0.03em;
   margin: 0 0 8px;
}

.kro-f1-loh-quote {
   font-size: clamp(13px, 1.5vw, 15px);
   color: rgba(255, 255, 255, 0.68);
   font-style: italic;
   margin: 0 0 8px;
}

.kro-f1-loh-result {
   font-size: clamp(12px, 1.4vw, 14px);
   color: var(--kro-accent-muted-subtle);
   margin: 0;
}

/* Блок 3: Реальная математика — слайдер */
.kro-f1-block.kro-f1-math {
   margin-bottom: 32px;
}

.kro-f1-math-title {
   font-size: clamp(18px, 2.5vw, 24px);
   font-weight: 700;
   color: rgba(255, 255, 255, 0.95);
   margin-bottom: 20px;
   text-transform: uppercase;
   letter-spacing: 0.04em;
}

.kro-f1-math-slider-wrap {
   position: relative;
}

.kro-f1-math-slider {
   overflow: hidden;
   border-radius: 16px;
   background: linear-gradient(180deg, rgba(28, 26, 30, 0.95) 0%, rgba(22, 20, 26, 0.98) 100%);
   border: 1px solid rgba(255, 255, 255, 0.08);
   cursor: grab;
   user-select: none;
   touch-action: pan-y;
   box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.05);
   transition: box-shadow 0.35s ease;
}
.kro-f1-math-slider:hover {
   box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.kro-f1-math-slider.dragging {
   cursor: grabbing;
}

.kro-f1-math-track {
   display: flex;
   width: 300%;
   transition: transform 0.35s ease;
}

.kro-f1-math-slider.dragging .kro-f1-math-track {
   transition: none;
}

.kro-f1-math-slide {
   flex: 0 0 33.333%;
   min-width: 33.333%;
   box-sizing: border-box;
   padding: 24px;
   min-height: 100px;
}

.kro-f1-math-slide-head {
   font-size: clamp(15px, 1.8vw, 18px);
   font-weight: 700;
   color: var(--kro-accent-muted);
   margin: 0 0 12px;
}

.kro-f1-math-slide-body {
   font-size: clamp(14px, 1.6vw, 16px);
   color: rgba(255, 255, 255, 0.7);
   line-height: 1.5;
   margin: 0 0 8px;
}

.kro-f1-math-slide-body:last-child {
   margin-bottom: 0;
}

.kro-f1-math-dots {
   display: flex;
   justify-content: center;
   gap: 12px;
   margin-top: 16px;
}

.kro-f1-math-dot {
   width: 10px;
   height: 10px;
   border-radius: 2px;
   border: 2px solid rgba(255, 255, 255, 0.25);
   background: transparent;
   cursor: pointer;
   padding: 0;
   transition: background 0.2s ease, border-color 0.2s ease;
}

.kro-f1-math-dot:hover {
   border-color: var(--kro-accent-muted);
   background: var(--kro-accent-muted-subtle);
}

.kro-f1-math-dot.is-active {
   background: var(--kro-accent-muted-subtle);
   border-color: var(--kro-accent-muted);
}

/* Блок 4: Твой выбор — SiteLove: кнопки с подъёмом, свечением, active scale */
.kro-f1-block.kro-f1-choice-wrap {
   margin-bottom: 0;
}

.kro-f1-choice {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px;
   margin-bottom: 12px;
}

.kro-f1-choice-btn {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 96px;
   padding: 24px 20px;
   border-radius: 20px;
   text-decoration: none;
   text-align: center;
   font-weight: 700;
   transition: transform 0.25s ease, box-shadow 0.35s ease, border-color 0.25s ease, background 0.25s ease;
   box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.kro-f1-choice-btn:active {
   transform: translateY(0) scale(var(--kro-btn-active-scale));
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.kro-f1-choice-btn:hover {
   transform: translateY(var(--kro-btn-hover-y)) scale(1.02);
}

.kro-f1-choice-red {
   background: linear-gradient(180deg, rgba(184, 74, 74, 0.22) 0%, rgba(184, 74, 74, 0.12) 100%);
   border: 1px solid rgba(184, 74, 74, 0.5);
   color: rgba(255, 255, 255, 0.96);
}
.kro-f1-choice-red:hover {
   background: linear-gradient(180deg, rgba(184, 74, 74, 0.3) 0%, rgba(184, 74, 74, 0.18) 100%);
   border-color: rgba(184, 74, 74, 0.65);
   box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.kro-f1-choice-green {
   background: linear-gradient(180deg, rgba(55, 95, 55, 0.35) 0%, rgba(45, 75, 45, 0.2) 100%);
   border: 1px solid rgba(75, 120, 75, 0.5);
   color: rgba(255, 255, 255, 0.96);
}
.kro-f1-choice-green:hover {
   background: linear-gradient(180deg, rgba(55, 105, 55, 0.45) 0%, rgba(50, 90, 50, 0.28) 100%);
   border-color: rgba(85, 130, 85, 0.65);
   box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.kro-f1-choice-main {
   font-size: clamp(14px, 1.8vw, 18px);
   display: block;
   margin-bottom: 4px;
   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.kro-f1-choice-sub {
   font-size: clamp(12px, 1.4vw, 14px);
   opacity: 0.9;
}

.kro-f1-choice-green .kro-f1-choice-sub {
   opacity: 0.88;
}

.kro-f1-choice-disclaimer {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.4);
   font-style: italic;
   margin: 0;
   text-align: center;
}

.kro-feature1-table-wrap {
   overflow-x: auto;
   max-width: 560px;
   margin: 0 auto;
}

.kro-feature1-table {
   width: 100%;
   border-collapse: collapse;
   font-size: clamp(13px, 1.5vw, 15px);
   text-align: left;
}

.kro-feature1-table th,
.kro-feature1-table td {
   padding: 12px 16px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.kro-feature1-table th {
   font-weight: 600;
   color: rgba(255, 255, 255, 0.85);
}

.kro-feature1-table td {
   color: rgba(255, 255, 255, 0.9);
}

.kro-status-active {
   color: rgba(180, 200, 140, 0.95);
}

.kro-status-removed {
   color: rgba(200, 140, 140, 0.95);
}

.kro-status-block {
   color: rgba(220, 100, 100, 0.95);
}

.kro-feature1-top3 {
   list-style: none;
   padding: 0;
   margin: 0 auto 40px;
   max-width: calc(640px + 4cm);
   text-align: left;
}

.kro-feature1-top3 li {
   margin-bottom: 12px;
   font-size: clamp(15px, 2.2vw, 17px);
   color: rgba(255, 255, 255, 0.95);
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   gap: 10px;
   border-radius: 16px;
   padding: 16px 20px;
   transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.25s ease;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.kro-feature1-top3 li:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
   border-color: rgba(245, 158, 11, 0.25);
}
.kro-feature1-top3 li:last-child {
   margin-bottom: 0;
}

.kro-feature1-top3 .kro-top3-channel {
   flex: 1 1 0;
   min-width: 0;
}

.kro-feature1-top3 .kro-top3-sum {
   flex: 0 0 72px;
   text-align: right;
   font-variant-numeric: tabular-nums;
}

.kro-feature1-top3 .kro-top3-status {
   flex: 0 0 82px;
   text-align: right;
}

.kro-feature1.kro-reveal .kro-feature1-top3 li {
   opacity: 0;
   transform: translateY(12px);
   transition: opacity 0.4s ease, transform 0.4s ease;
}

.kro-feature1.kro-reveal-visible .kro-feature1-top3 li:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0s; }
.kro-feature1.kro-reveal-visible .kro-feature1-top3 li:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.06s; }
.kro-feature1.kro-reveal-visible .kro-feature1-top3 li:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.12s; }

.kro-top3-channel {
   font-weight: 600;
}

.kro-top3-status {
   white-space: nowrap;
}

/* Блок «Проверить канал» — та же ширина, что «Сообщить о разводе» и Топ-3 */
.kro-feature1-check {
   max-width: calc(640px + 4cm);
   width: 100%;
   margin: 0 auto;
   text-align: left;
   position: relative;
   padding: 32px 28px 36px;
   border-radius: 26px;
   background: linear-gradient(165deg, rgba(30, 26, 40, 0.96) 0%, rgba(22, 18, 30, 0.98) 50%, rgba(18, 14, 26, 0.99) 100%);
   border: 1px solid rgba(139, 92, 246, 0.3);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.06);
   transition: box-shadow 0.4s ease, transform 0.35s ease, border-color 0.3s ease;
}
.kro-feature1-check::before {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: inherit;
   pointer-events: none;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.kro-feature1-check:hover {
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.07);
   border-color: rgba(139, 92, 246, 0.45);
   transform: translateY(-2px);
}

.kro-check-tag {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 8px 16px;
   margin-bottom: 14px;
   background: linear-gradient(180deg, rgba(139, 92, 246, 0.18) 0%, rgba(139, 92, 246, 0.08) 100%);
   border: 1px solid rgba(139, 92, 246, 0.45);
   border-radius: 999px;
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: rgba(255, 255, 255, 0.95);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
   transition: box-shadow 0.3s ease, transform 0.2s ease, border-color 0.25s ease;
}
.kro-check-tag:hover {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);
   border-color: rgba(139, 92, 246, 0.6);
   transform: translateY(-1px);
}
.kro-check-tag-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 18px;
   height: 18px;
   background: linear-gradient(180deg, var(--kro-violet) 0%, #7c3aed 100%);
   color: #fff;
   border-radius: 50%;
   font-size: 0.7rem;
   font-weight: 700;
   font-style: italic;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.kro-feature1-check-intro {
   font-size: clamp(1.5rem, 4vw, 2rem);
   font-weight: 700;
   color: #fff;
   margin: 0 0 8px 0;
   line-height: 1.2;
   letter-spacing: -0.02em;
   text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.kro-check-intro-accent {
   background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 35%, #a78bfa 70%, #8b5cf6 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   text-shadow: none;
}

.kro-feature1-check-subtitle {
   font-size: 0.9375rem;
   color: var(--kro-gray-mid);
   margin: 0 0 20px 0;
   line-height: 1.5;
}
.kro-feature1-check-note {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.65);
   margin-bottom: 12px;
   line-height: 1.4;
}

.kro-feature1-check-row {
   display: flex;
   flex-direction: column;
   gap: 12px;
   width: 100%;
}

.kro-feature1-check-row .kro-report-label {
   width: 100%;
   min-width: 0;
}

.kro-feature1-check-row .kro-report-label input {
   width: 100%;
   box-sizing: border-box;
   border-radius: 999px;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kro-feature1-check-row .kro-report-submit {
   width: 100%;
   margin-top: 0;
   border-radius: 999px;
   transition: transform 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease, border-color 0.2s ease;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.kro-feature1-check-row .kro-report-submit:hover {
   transform: translateY(var(--kro-btn-hover-y)) scale(1.02);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.kro-feature1-check-row .kro-report-submit:active {
   transform: translateY(0) scale(var(--kro-btn-active-scale));
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04);
   border-radius: 999px;
}
.kro-feature1-check-row .kro-report-submit:focus {
   border-radius: 999px;
}
.kro-feature1-check-row .kro-report-label input:focus {
   outline: none;
   border-color: rgba(139, 92, 246, 0.5);
   box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.4);
}
.kro-period-prompt {
   color: #fff;
   margin-top: 0.25cm;
   margin-bottom: 0.25cm;
}
.kro-period-btn {
   width: 100%;
   border-radius: 999px;
   transition: transform 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease, border-color 0.2s ease;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2), 0 0 18px var(--kro-glow-amber-soft);
}
.kro-period-btn:hover {
   transform: translateY(var(--kro-btn-hover-y));
   box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25), 0 0 28px var(--kro-glow-amber-soft), 0 0 40px rgba(245, 158, 11, 0.1);
}
.kro-period-btn:active {
   transform: translateY(0) scale(var(--kro-btn-active-scale));
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 0 14px rgba(245, 158, 11, 0.08);
   border-radius: 999px;
}
.kro-period-btn:focus {
   border-radius: 999px;
}

.kro-check-result {
   margin-top: 20px;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.85);
   line-height: 1.55;
   white-space: pre-line;
}
.kro-check-result .kro-result-card {
   white-space: normal;
}
.kro-check-result .kro-check-result-block {
   display: block;
   margin-bottom: 6px;
}
.kro-check-result .kro-check-card {
   margin-top: 8px;
}
.kro-check-result .kro-check-card-title {
   font-weight: 600;
   margin-bottom: 4px;
}
.kro-check-result .kro-check-card-risk {
   margin-bottom: 8px;
   font-size: 13px;
}
.kro-check-result .kro-facts-heading {
   font-weight: 600;
   margin: 10px 0 6px;
   font-size: 13px;
}
.kro-check-result .kro-facts {
   margin: 0 0 10px;
   padding-left: 20px;
   list-style-type: disc;
}
.kro-check-result .kro-facts li {
   margin-bottom: 4px;
}
.kro-check-result .kro-verdict {
   margin: 8px 0 0;
   font-size: 13px;
}

/* Карточка результата — DuoView + скрин: подъём, мягкое свечение, тёплый фон */
.kro-result-card {
   background: linear-gradient(165deg, rgba(38, 32, 28, 0.85) 0%, rgba(28, 24, 22, 0.9) 100%);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 18px;
   padding: 24px 24px 28px;
   margin: 0;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04);
   transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.kro-result-card:hover {
   border-color: rgba(255, 255, 255, 0.1);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 48px rgba(245, 158, 11, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.kro-result-period-banner {
   font-size: clamp(1.1rem, 2.5vw, 1.35rem);
   font-weight: 700;
   color: var(--kro-accent);
   margin: 0 0 18px 0;
   padding: 12px 0;
   border-bottom: 2px solid rgba(245, 158, 11, 0.4);
   letter-spacing: 0.02em;
}
.kro-result-card .kro-result-header {
   margin-bottom: 22px;
   padding-bottom: 18px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.kro-result-card .kro-result-title {
   font-size: clamp(1.05rem, 2.2vw, 1.25rem);
   font-weight: 600;
   color: #fff;
   margin: 0 0 6px 0;
   letter-spacing: 0.01em;
}
.kro-result-card .kro-result-desc {
   font-size: 0.875rem;
   color: var(--kro-gray-soft);
   line-height: 1.5;
   margin: 0 0 10px 0;
}
.kro-result-card .kro-result-meta {
   font-size: 0.6875rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--kro-gray-mid);
}

.kro-result-card .kro-result-source {
   font-size: 0.8125rem;
   color: var(--kro-gray-soft);
   line-height: 1.5;
   margin: 0 0 18px 0;
   padding: 12px 14px;
   background: rgba(255, 255, 255, 0.025);
   border-radius: 10px;
   border-left: 3px solid var(--kro-violet-border);
   box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.kro-result-facts {
   margin: 0 0 18px 0;
   padding: 12px 14px;
   background: rgba(255, 255, 255, 0.02);
   border-radius: 10px;
   border-left: 3px solid rgba(245, 158, 11, 0.6);
}
.kro-result-facts-title {
   font-size: 0.95rem;
   font-weight: 700;
   margin: 0 0 8px 0;
   color: rgba(255, 255, 255, 0.9);
}
.kro-result-facts-list {
   margin: 0;
   padding-left: 20px;
   color: rgba(255, 255, 255, 0.8);
   line-height: 1.6;
   font-size: 0.9rem;
}
.kro-result-facts-list li { margin-bottom: 4px; }

.kro-result-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
}
.kro-result-minicard {
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 14px;
   padding: 16px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);
   transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.kro-result-minicard:hover {
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
   border-color: rgba(255, 255, 255, 0.1);
}
.kro-result-minicard:nth-child(1):hover { border-color: rgba(245, 158, 11, 0.25); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 28px rgba(245, 158, 11, 0.1); }
.kro-result-minicard:nth-child(2):hover { border-color: var(--kro-violet-border); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 28px rgba(139, 92, 246, 0.1); }
.kro-result-minicard:nth-child(3):hover { border-color: var(--kro-cyan-border); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 28px rgba(6, 182, 212, 0.1); }
.kro-result-minicard:nth-child(4):hover { border-color: rgba(245, 158, 11, 0.25); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 28px rgba(245, 158, 11, 0.1); }
.kro-result-minicard:nth-child(5):hover { border-color: var(--kro-violet-border); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 28px rgba(139, 92, 246, 0.1); }
.kro-result-minicard-icon {
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--kro-violet-soft);
   border: 1px solid var(--kro-violet-border);
   border-radius: 12px;
   color: var(--kro-violet);
   font-size: 1rem;
   font-weight: 700;
   margin-bottom: 12px;
   box-shadow: 0 0 16px rgba(139, 92, 246, 0.2);
   transition: box-shadow 0.25s ease;
}
/* Разные акценты + мягкое свечение иконок (как на скрине) */
.kro-result-minicard:nth-child(1) .kro-result-minicard-icon {
   background: rgba(245, 158, 11, 0.22);
   border-color: rgba(245, 158, 11, 0.45);
   color: var(--kro-accent);
   box-shadow: 0 0 18px rgba(245, 158, 11, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.kro-result-minicard:nth-child(2) .kro-result-minicard-icon {
   background: var(--kro-violet-soft);
   border-color: var(--kro-violet-border);
   color: var(--kro-violet);
   box-shadow: 0 0 18px rgba(139, 92, 246, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.kro-result-minicard:nth-child(3) .kro-result-minicard-icon {
   background: var(--kro-cyan-soft);
   border-color: var(--kro-cyan-border);
   color: var(--kro-cyan);
   box-shadow: 0 0 18px rgba(6, 182, 212, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.kro-result-minicard:nth-child(4) .kro-result-minicard-icon {
   background: rgba(245, 158, 11, 0.22);
   border-color: rgba(245, 158, 11, 0.45);
   color: var(--kro-accent);
   box-shadow: 0 0 18px rgba(245, 158, 11, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.kro-result-minicard:nth-child(5) .kro-result-minicard-icon {
   background: var(--kro-violet-soft);
   border-color: var(--kro-violet-border);
   color: var(--kro-violet);
   box-shadow: 0 0 18px rgba(139, 92, 246, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.kro-result-minicard-title {
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--kro-gray-mid);
   margin-bottom: 6px;
}
.kro-result-minicard-value {
   font-size: 0.9375rem;
   color: rgba(255, 255, 255, 0.9);
   line-height: 1.45;
}
.kro-result-minicard-hint {
   font-size: 0.75rem;
   color: var(--kro-gray-mid);
   line-height: 1.4;
   margin: 10px 0 0 0;
}
.kro-result-minicard-value.kro-result-risk-value {
   font-size: clamp(1.5rem, 3.5vw, 2rem);
   font-weight: 700;
   color: var(--kro-accent);
   line-height: 1.2;
}
.kro-result-minicard-value .kro-result-risk-max {
   font-size: 0.75em;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.4);
   margin-left: 2px;
}
.kro-result-minicard-value .kro-result-risk-pending {
   font-size: 0.9em;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.65);
   font-style: italic;
}
.kro-result-card-preview .kro-result-period-banner {
   background: rgba(245, 158, 11, 0.12);
   border-color: rgba(245, 158, 11, 0.3);
}
.kro-result-verdict-badge {
   display: inline-block;
   padding: 6px 12px;
   background: rgba(245, 158, 11, 0.15);
   border: 1px solid rgba(245, 158, 11, 0.45);
   border-radius: 10px;
   font-size: 0.875rem;
   font-weight: 600;
   color: var(--kro-accent);
   box-shadow: 0 0 14px rgba(245, 158, 11, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.kro-result-message {
   margin: 0;
   padding: 16px 20px;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
   border: 1px solid rgba(255, 255, 255, 0.09);
   border-radius: 16px;
   color: rgba(255, 255, 255, 0.9);
   line-height: 1.5;
   font-size: 0.9375rem;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 0 24px rgba(139, 92, 246, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.04);
   transition: box-shadow 0.3s ease;
}
.kro-result-message:hover {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 32px rgba(139, 92, 246, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.kro-check-login-hint {
   margin-top: 14px;
   padding: 12px 14px;
   background: rgba(255, 165, 0, 0.12);
   border: 1px solid rgba(255, 165, 0, 0.35);
   border-radius: 8px;
   font-size: 13px;
}
.kro-check-login-hint .kro-check-login-title {
   margin: 0 0 8px 0;
   color: rgba(255, 255, 255, 0.95);
}
.kro-check-login-hint .kro-check-login-cmd {
   display: block;
   padding: 10px 12px;
   background: rgba(0, 0, 0, 0.35);
   border-radius: 6px;
   font-family: ui-monospace, monospace;
   font-size: 14px;
   color: #f59e0b;
   user-select: all;
}

.kro-feature1-check-screenshot {
   margin-top: 10px;
}
.kro-feature1-check-screenshot input[type="file"] {
   margin-left: 8px;
}

/* Блок «Сообщить о разводе» — SiteLove: luminous контейнер */
.kro-feature1-report {
   max-width: calc(640px + 4cm);
   margin: 0 auto;
   text-align: left;
   position: relative;
   padding: 32px 28px 36px;
   border-radius: 24px;
   background: linear-gradient(165deg, rgba(28, 24, 38, 0.94) 0%, rgba(22, 18, 30, 0.96) 100%);
   border: 1px solid rgba(139, 92, 246, 0.25);
   box-shadow: 0 10px 36px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.05);
   transition: box-shadow 0.4s ease, transform 0.35s ease, border-color 0.3s ease;
}
.kro-feature1-report:hover {
   box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.06);
   border-color: rgba(139, 92, 246, 0.35);
   transform: translateY(-2px);
}

/* Обёртка CTA → «Проверить канал»: та же ширина, что блок «Сообщить о разводе» и Топ-3 */
.kro-f1-cta-check-wrap {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
   max-width: calc(640px + 4cm);
   margin: 0 auto 44px;
   min-height: 200px;
}
.kro-f1-cta-check-wrap > .kro-f1-cta-block,
.kro-f1-cta-check-wrap > .kro-feature1-check {
   grid-area: 1 / 1;
}
.kro-f1-cta-check-wrap > .kro-f1-cta-block {
   transition: opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.kro-f1-cta-check-wrap > .kro-feature1-check.kro-f1-check-reveal {
   opacity: 0;
   transform: translateY(20px);
   pointer-events: none;
   transition: opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.kro-f1-cta-check-wrap.kro-f1-show-check > .kro-f1-cta-block {
   opacity: 0;
   transform: translateY(-12px);
   pointer-events: none;
}
.kro-f1-cta-check-wrap.kro-f1-show-check > .kro-feature1-check.kro-f1-check-reveal {
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
   .kro-f1-cta-check-wrap > .kro-f1-cta-block,
   .kro-f1-cta-check-wrap > .kro-feature1-check.kro-f1-check-reveal {
      transition-duration: 0.15s;
   }
   .kro-f1-cta-check-wrap > .kro-feature1-check.kro-f1-check-reveal { transform: none; }
   .kro-f1-cta-check-wrap.kro-f1-show-check > .kro-f1-cta-block { transform: none; }
}

/* Финальный CTA-блок — та же ширина, что «Проверить канал» и «Сообщить о разводе» */
.kro-f1-cta-block {
   max-width: 100%;
   width: 100%;
   margin: 0 auto;
   padding: 40px 28px 44px;
   border-radius: 24px;
   text-align: center;
   background: linear-gradient(165deg, rgba(32, 26, 28, 0.95) 0%, rgba(24, 20, 22, 0.98) 100%);
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.05);
   transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.kro-f1-cta-block:hover {
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.kro-f1-cta-heading {
   font-size: clamp(20px, 3.2vw, 26px);
   font-weight: 700;
   color: #fff;
   margin: 0 0 10px;
   letter-spacing: 0.02em;
}

.kro-f1-cta-sub {
   font-size: clamp(14px, 1.8vw, 16px);
   color: rgba(255, 255, 255, 0.75);
   margin: 0 0 24px;
   line-height: 1.4;
}

.kro-f1-cta-btn {
   display: inline-block;
   padding: 14px 32px;
   font-size: 15px;
   font-weight: 700;
   font-family: inherit;
   color: #fff;
   cursor: pointer;
   background: linear-gradient(180deg, rgba(245, 158, 11, 0.35) 0%, rgba(245, 158, 11, 0.22) 100%);
   border: 1px solid rgba(245, 158, 11, 0.5);
   border-radius: 999px;
   text-decoration: none;
   transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.kro-f1-cta-btn:hover {
   transform: scale(1.03);
   background: linear-gradient(180deg, rgba(245, 158, 11, 0.45) 0%, rgba(245, 158, 11, 0.28) 100%);
   border-color: rgba(245, 158, 11, 0.6);
   box-shadow: 0 4px 20px rgba(245, 158, 11, 0.2);
}

.kro-feature1-report-intro {
   font-size: clamp(14px, 2vw, 16px);
   color: rgba(255, 255, 255, 0.9);
   margin-bottom: 18px;
   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.kro-report-form {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.kro-report-form .kro-report-label {
   width: 100%;
}

.kro-report-form .kro-report-label input {
   width: 100%;
   box-sizing: border-box;
}

.kro-report-label {
   display: flex;
   flex-direction: column;
   gap: 4px;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.8);
}

.kro-report-label input {
   padding: 10px 12px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.06);
   color: #fff;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
   font-family: inherit;
   font-size: 15px;
}

.kro-report-label input::placeholder {
   color: rgba(255, 255, 255, 0.4);
}

.kro-feature1-report .kro-report-label input:focus {
   outline: none;
   border-color: rgba(139, 92, 246, 0.5);
   box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.4);
}

/* Кнопки отправки — SiteLove: тень, hover подъём + свечение, active вдавливание */
.kro-report-submit {
   margin-top: 8px;
   padding: 14px 24px;
   width: 100%;
   box-sizing: border-box;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   font-size: clamp(13px, 1.5vw, 15px);
   font-weight: 600;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: rgba(255, 235, 210, 0.95);
   background: linear-gradient(180deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.06) 100%);
   border: 1px solid rgba(245, 158, 11, 0.4);
   border-radius: 999px;
   cursor: pointer;
   transition: transform 0.2s ease, border-color 0.25s ease, background 0.25s ease, color 0.2s ease, box-shadow 0.25s ease;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2), 0 0 18px rgba(245, 158, 11, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.kro-report-submit:hover {
   border-color: rgba(245, 158, 11, 0.55);
   background: linear-gradient(180deg, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0.1) 100%);
   color: rgba(255, 248, 235, 1);
   transform: translateY(var(--kro-btn-hover-y));
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 28px rgba(245, 158, 11, 0.15), 0 0 40px rgba(245, 158, 11, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.kro-report-submit:active {
   transform: translateY(0) scale(var(--kro-btn-active-scale));
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 0 14px rgba(245, 158, 11, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.04);
   border-radius: 999px;
}
.kro-report-submit:focus {
   border-radius: 999px;
}

.kro-feature1-report-message {
   margin-top: 16px;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.9);
}

.kro-feature1 .hidden {
   display: none !important;
}

@media (max-width: 600px) {
   .kro-feature1-dashboard {
      padding: 24px 20px 28px;
      margin-left: 16px;
      margin-right: 16px;
      margin-bottom: 40px;
   }
   .kro-feature1-stats {
      grid-template-columns: 1fr;
      gap: 24px;
   }
   .kro-feature1-stat.kro-card {
      width: 100%;
      max-width: 100%;
   }
   .kro-f1-blocks,
   .kro-f1-content-card {
      padding: 24px 20px 28px;
      margin-left: 16px;
      margin-right: 16px;
      max-width: 100%;
      box-sizing: border-box;
   }
   .kro-f1-loh-types {
      grid-template-columns: 1fr;
      gap: 16px;
   }
   .kro-f1-choice {
      grid-template-columns: 1fr;
   }
   .kro-f1-block.kro-f1-shock,
   .kro-f1-loh-card {
      padding: 20px;
   }
   .kro-feature1 {
      padding: 64px 20px 64px;
      padding-left: max(20px, env(safe-area-inset-left));
      padding-right: max(20px, env(safe-area-inset-right));
   }
   .kro-feature1-top3 li {
      overflow: hidden;
      min-width: 0;
   }
   .kro-feature1-top3 .kro-top3-channel {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
   }
   .kro-feature1-check {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
   }
   .kro-result-grid {
      grid-template-columns: 1fr;
   }
   .kro-result-card .kro-result-source {
      font-size: 0.75rem;
      padding: 10px 12px;
   }
   .kro-feature1-check-row .kro-report-label input {
      width: 100%;
      box-sizing: border-box;
   }
   .kro-feature1-report {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
   }
   .kro-feature1-report .kro-report-label input {
      width: 100%;
      box-sizing: border-box;
   }
}

/* На главной (Крипта без розовых очков) не показывать декоративный фон — только тёмный hero */
.kro-main .main-bg-effects {
   display: none !important;
}
.kro-main {
   background: linear-gradient(180deg, var(--kro-bg) 0%, var(--kro-bg-mid) 28%, var(--kro-bg-soft) 100%);
   min-height: 100vh;
   position: relative;
}

/* Виньетка: затемнение по краям (глубина, премиум) */
.kro-main::before {
   content: '';
   position: fixed;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   background: radial-gradient(ellipse 100% 80% at 50% 50%, transparent 45%, rgba(0, 0, 0, 0.25) 100%);
}

/* Зерно: лёгкая текстура (атмосфера, не копируя medvedevart 1:1) */
.kro-main::after {
   content: '';
   position: fixed;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   opacity: 0.035;
   background-image:
      radial-gradient(circle at 10% 20%, rgba(255,255,255,0.4) 0.5px, transparent 0.5px),
      radial-gradient(circle at 90% 80%, rgba(255,255,255,0.35) 0.5px, transparent 0.5px),
      radial-gradient(circle at 40% 60%, rgba(255,255,255,0.3) 0.5px, transparent 0.5px),
      radial-gradient(circle at 70% 30%, rgba(255,255,255,0.35) 0.5px, transparent 0.5px);
   background-size: 3px 3px, 4px 4px, 5px 5px, 3px 4px;
   background-position: 0 0, 1px 1px, 2px 0, 0 2px;
}

.kro-main a:focus-visible,
.kro-main button:focus-visible {
   outline: 2px solid var(--kro-accent);
   outline-offset: 3px;
}

/* На главной навбар скрыт — только hero «Крипта без розовых очков» */
.kro-main .main-nav {
   display: none !important;
}
.kro-main .page {
   padding-top: 0;
}

/* Футер главной: активная нижняя часть — та же атмосфера, что и Hero (премиум, ритм, акценты) */
.kro-main .news-footer.kro-footer {
   display: block;
   width: 100%;
   padding: var(--kro-space-5) var(--kro-space-3) 72px;
   margin: 0;
   text-align: center;
   font-family: var(--kro-font-body);
   position: relative;
   overflow: hidden;
   border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* Фон футера: палитра как у главной + янтарный блик + виньетка + сетка точек */
.kro-main .news-footer.kro-footer .kro-footer-bg {
   position: absolute;
   inset: 0;
   z-index: -1;
   background: radial-gradient(ellipse 32% 22% at 50% 30%, rgba(245, 158, 11, 0.05) 0%, transparent 55%),
               radial-gradient(ellipse 80% 60% at 50% 20%, rgba(255, 255, 255, 0.025) 0%, transparent 50%),
               linear-gradient(180deg, var(--kro-bg) 0%, var(--kro-bg-mid) 25%, var(--kro-bg-soft) 100%);
}

.kro-main .news-footer.kro-footer .kro-footer-bg::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse 100% 70% at 50% 50%, transparent 35%, rgba(0, 0, 0, 0.2) 100%);
   pointer-events: none;
}

.kro-main .news-footer.kro-footer .kro-footer-bg::after {
   content: '';
   position: absolute;
   inset: 0;
   background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.02) 1px, transparent 0),
                     radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.014) 1px, transparent 0);
   background-size: 32px 32px, 24px 24px;
   pointer-events: none;
}

.kro-main .news-footer.kro-footer .news-footer-text {
   font-family: var(--kro-font-heading);
   font-size: clamp(18px, 2.5vw, 22px);
   font-weight: 700;
   color: var(--kro-text);
   margin-bottom: var(--kro-space-2);
   letter-spacing: -0.01em;
}

.kro-main .news-footer.kro-footer .news-footer-crafted {
   font-family: var(--kro-font-body);
   font-size: clamp(17px, 2.1vw, 20px);
   font-weight: 500;
   color: rgba(255, 255, 255, 0.88);
   margin-bottom: var(--kro-space-4);
   letter-spacing: 0.02em;
   line-height: 1.55;
}

.kro-main .news-footer.kro-footer .news-footer-links {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: var(--kro-space-3);
   margin-bottom: var(--kro-space-4);
}

.kro-main .news-footer.kro-footer .news-footer-link {
   font-family: var(--kro-font-body);
   font-size: clamp(14px, 1.6vw, 16px);
   font-weight: 500;
   color: rgba(255, 255, 255, 0.75);
   text-decoration: none;
   letter-spacing: 0.02em;
   position: relative;
   transition: color var(--kro-duration-hover) ease, transform var(--kro-duration-hover) ease;
}

.kro-main .news-footer.kro-footer .news-footer-link::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: -2px;
   width: 0;
   height: 2px;
   background: rgba(255, 255, 255, 0.5);
   transition: width var(--kro-duration-hover) var(--kro-ease-reveal);
}

.kro-main .news-footer.kro-footer .news-footer-link:hover {
   color: rgba(255, 255, 255, 0.98);
   transform: translateY(-2px);
}

.kro-main .news-footer.kro-footer .news-footer-link:hover::after {
   width: 100%;
}

.kro-main .news-footer.kro-footer .news-footer-cta {
   display: inline-block;
   font-family: var(--kro-font-body);
   font-size: clamp(14px, 1.7vw, 16px);
   font-weight: 600;
   letter-spacing: 0.04em;
   color: rgba(255, 230, 200, 0.95);
   background-color: rgba(245, 158, 11, 0.14);
   border: 1px solid rgba(245, 158, 11, 0.38);
   padding: 14px 26px;
   border-radius: 999px;
   text-decoration: none;
   transition: border-color var(--kro-duration-hover) ease, background-color var(--kro-duration-hover) ease, color var(--kro-duration-hover) ease, transform var(--kro-duration-hover) ease, box-shadow var(--kro-duration-hover) ease;
   box-shadow: 0 0 0 rgba(245, 158, 11, 0);
}

.kro-main .news-footer.kro-footer .news-footer-cta:hover {
   border-color: rgba(245, 158, 11, 0.55);
   background-color: rgba(245, 158, 11, 0.24);
   color: rgba(255, 248, 235, 1);
   transform: translateY(-3px) scale(1.05);
   box-shadow: 0 6px 28px rgba(0, 0, 0, 0.3), 0 0 32px rgba(245, 158, 11, 0.22);
}

.kro-main .news-footer.kro-footer .news-footer-cta:active {
   transform: translateY(0) scale(0.98);
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.kro-main .news-footer.kro-footer .news-footer-cta:focus-visible {
   outline: 2px solid rgba(245, 158, 11, 0.7);
   outline-offset: 3px;
   box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
}

/* Нижняя полоса футера: ритм отступов, разделитель, копирайт до самого конца */
.kro-main .news-footer.kro-footer .kro-footer-bottom {
   margin-top: var(--kro-space-5);
   padding-top: var(--kro-space-3);
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   text-align: center;
}

.kro-main .news-footer.kro-footer .kro-footer-legal {
   font-family: var(--kro-font-mono);
   font-size: 12px;
   font-weight: 400;
   color: rgba(255, 255, 255, 0.48);
   letter-spacing: 0.12em;
   margin: 0;
   line-height: 1.5;
}

/* На главной скрыт чат-бот (Crypto AI Assistant) */
.kro-main .chat-widget {
   display: none !important;
   visibility: hidden !important;
   pointer-events: none !important;
}

/* Мобильная главная: без горизонтального скролла, hero — шире блок, приличные отступы; прокрутка вниз не блокируется */
@media (max-width: 768px) {
   html,
   body.kro-main {
      overflow-x: hidden !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: none;
      overscroll-behavior-y: auto;
   }
   .kro-main {
      overflow-x: hidden;
      max-width: 100%;
   }
   .kro-main .page,
   .kro-main .content {
      overflow-x: hidden;
      overflow-y: visible;
      max-width: 100%;
      width: 100%;
      touch-action: pan-y;
   }
   .kro-step1 {
      min-height: 92vh;
      overflow: visible;
      padding: 56px 32px 56px;
      padding-left: max(32px, env(safe-area-inset-left));
      padding-right: max(32px, env(safe-area-inset-right));
   }
   .kro-step1-inner {
      padding: 48px 32px 56px;
      min-width: 0;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      align-items: center;
   }
   .kro-step1-left {
      text-align: center;
      margin-bottom: 40px;
   }
   .kro-step1-title {
      overflow-wrap: break-word;
      word-break: break-word;
      margin-bottom: 28px;
   }
   .kro-step1-subtitle {
      margin-bottom: 36px;
   }
   .kro-step1-tags {
      justify-content: center;
      margin-bottom: 36px;
      gap: 12px;
   }
   .kro-step1-right {
      align-items: center;
      text-align: center;
      gap: 16px;
   }
   .kro-step1-cta-note {
      max-width: 280px;
      margin-left: auto;
      margin-right: auto;
   }
   .kro-cta-note-desktop {
      display: none;
   }
   .kro-cta-note-mobile {
      display: inline;
   }
   .kro-step1-cta {
      max-width: 100%;
      width: 100%;
   }
}

@media (max-width: 480px) {
   .kro-step1 {
      padding: 48px 24px 48px;
      padding-left: max(24px, env(safe-area-inset-left));
      padding-right: max(24px, env(safe-area-inset-right));
   }
   .kro-step1-inner {
      padding: 44px 28px 52px;
   }
   .kro-step1-tags {
      gap: 10px;
   }
   .kro-feature1 {
      padding: 48px 16px 48px;
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
   }
}

/* Apple-style: минималистичная верхняя навигация */
.main-nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 100;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 18px 32px;
   background: rgba(28, 0, 56, 0.85);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.main-nav-brand {
   font-family: 'Raleway', sans-serif;
   font-size: 18px;
   font-weight: 700;
   color: #FFFFFF;
   text-decoration: none;
   letter-spacing: -0.02em;
   display: inline-flex;
   align-items: center;
   gap: 10px;
}

.main-nav-brand-icon {
   width: 28px;
   height: 28px;
   flex-shrink: 0;
   background: #f59e0b;
   border-radius: 8px;
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cline x1='5' y1='5' x2='19' y2='19' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
   mask-size: 18px 18px;
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cline x1='5' y1='5' x2='19' y2='19' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
   -webkit-mask-size: 18px 18px;
}

.main-nav-links {
   display: flex;
   gap: 32px;
}

.main-nav-links a {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.8);
   text-decoration: none;
   transition: color 0.2s ease;
}

.main-nav-links a:hover {
   color: #FFFFFF;
}

.explore-heading {
   font-family: 'Raleway', sans-serif;
   font-size: 28px;
   font-weight: 700;
   color: rgba(255, 255, 255, 0.9);
   margin-bottom: 48px;
   letter-spacing: -0.02em;
}

body {
   font-family: 'Poppins', sans-serif;
   background-image: 
       linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
       linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
       url('assets/crypto-academy-bg-v2.png');
   background-repeat: repeat, repeat, no-repeat;
   background-position: 0 0, 0 0, center top;
   background-size: 50px 50px, 50px 50px, 1750px 9000px;
   background-attachment: fixed, fixed, scroll;
   background-color: #1C0038;
   min-height: 100vh;
   position: relative;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   transform: translateZ(0);
   backface-visibility: hidden;
   /* Гарантируем, что fixed элементы работают правильно */
   transform: none !important;
   will-change: auto !important;
}

body::before {
   content: '';
   position: fixed;
   inset: -40px;
   background: radial-gradient(circle at 20% 20%, rgba(74, 25, 66, 0.18), transparent 60%),
       radial-gradient(circle at 80% 10%, rgba(88, 28, 135, 0.14), transparent 55%),
       radial-gradient(circle at 30% 85%, rgba(74, 25, 66, 0.12), transparent 55%),
       linear-gradient(160deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.8));
   pointer-events: none;
   z-index: 0;
   filter: none;
   transform: translateZ(0);
   will-change: auto;
   backface-visibility: hidden;
}

body::after {
   content: '';
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.12);
   pointer-events: none;
   z-index: 0;
}

/* Крипто-элементы фона - розово-фиолетовая тема */
.crypto-background-elements {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.crypto-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    animation: crypto-float 20s ease-in-out infinite;
    opacity: 0.5 !important;
}

.crypto-orb.orb-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 79, 197, 0.4), rgba(122, 0, 255, 0.3));
    top: 15%;
    left: 10%;
    animation-delay: 0s;
}

.crypto-orb.orb-2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(122, 0, 255, 0.4), rgba(255, 79, 197, 0.3));
    bottom: 20%;
    right: 15%;
    animation-delay: 7s;
}

.crypto-orb.orb-3 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(167, 3, 96, 0.4), rgba(122, 0, 255, 0.3));
    top: 50%;
    right: 25%;
    animation-delay: 14s;
}

.crypto-connection {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 400px;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 79, 197, 0.2) 20%, 
        rgba(122, 0, 255, 0.2) 50%, 
        rgba(255, 79, 197, 0.2) 80%, 
        transparent);
    transform: rotate(25deg);
    animation: connection-pulse 8s ease-in-out infinite;
    filter: blur(1px);
}

@keyframes crypto-float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5 !important;
    }
    33% {
        transform: translate(50px, -30px) scale(1.1);
        opacity: 0.2;
    }
    66% {
        transform: translate(-30px, 50px) scale(0.9);
        opacity: 0.18;
    }
}

@keyframes connection-pulse {
    0%, 100% {
        opacity: 0.2;
        transform: rotate(25deg) scaleX(1);
    }
    50% {
        opacity: 0.3;
        transform: rotate(25deg) scaleX(1.2);
    }
}

/* Крипто-элементы фона - розово-фиолетовая тема */
.crypto-background-elements {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.crypto-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    animation: crypto-float 20s ease-in-out infinite;
    opacity: 0.5 !important;
}

.crypto-orb.orb-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 79, 197, 0.4), rgba(122, 0, 255, 0.3));
    top: 15%;
    left: 10%;
    animation-delay: 0s;
}

.crypto-orb.orb-2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(122, 0, 255, 0.4), rgba(255, 79, 197, 0.3));
    bottom: 20%;
    right: 15%;
    animation-delay: 7s;
}

.crypto-orb.orb-3 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(167, 3, 96, 0.4), rgba(122, 0, 255, 0.3));
    top: 50%;
    right: 25%;
    animation-delay: 14s;
}

.crypto-connection {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 400px;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 79, 197, 0.2) 20%, 
        rgba(122, 0, 255, 0.2) 50%, 
        rgba(255, 79, 197, 0.2) 80%, 
        transparent);
    transform: rotate(25deg);
    animation: connection-pulse 8s ease-in-out infinite;
    filter: blur(1px);
}

@keyframes crypto-float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5 !important;
    }
    33% {
        transform: translate(50px, -30px) scale(1.1);
        opacity: 0.2;
    }
    66% {
        transform: translate(-30px, 50px) scale(0.9);
        opacity: 0.18;
    }
}

@keyframes connection-pulse {
    0%, 100% {
        opacity: 0.2;
        transform: rotate(25deg) scaleX(1);
    }
    50% {
        opacity: 0.3;
        transform: rotate(25deg) scaleX(1.2);
    }
}

/* Блокчейн-сетка в розово-фиолетовых тонах */
body {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
}

.page {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   min-height: 100vh;
   position: relative;
   z-index: 1;
   transform: none !important;
   padding-top: 56px;
}

.hero {
   display: none; /* Скрыт, используется main-hero */
}

/* Старый hero скрыт, используем main-hero в стиле News */

.scroll-section {
   flex: 1;
   overflow-y: auto;
   padding: 40px 20px 60px;
}

.section-header {
   text-align: center;
   margin-bottom: 30px;
}

.section-header h2 {
   color: #FFFFFF;
   font-size: 40px;
   font-weight: 700;
}

.floating-text {
   font-family: 'Raleway', sans-serif;
   font-size: 140px;
   color: #FFFFFF;
   font-weight: 700;
   line-height: 1.15;
   letter-spacing: -0.03em;
   text-align: center;
   max-width: 90vw;
   margin: 0 auto;
   animation: float 25s ease-in-out infinite;
   will-change: transform;
   transform: translateZ(0);
   backface-visibility: hidden;
}

.floating-text span {
   font-style: italic;
   color: #e8c547;
}

@keyframes float {
   0%, 100% {
       transform: translate(0, 0);
   }
   50% {
       transform: translate(8px, -8px);
   }
}

.overlay-section {
   display: flex !important;
   justify-content: center;
   padding: 0 20px;
   margin-top: 6cm;
   will-change: auto;
   transform: translateZ(0);
   contain: layout style paint;
   visibility: visible !important;
   opacity: 1 !important;
   position: relative;
   z-index: 5;
}

.overlay-text {
   font-family: 'Raleway', sans-serif;
   font-size: 67px;
   color: #FFFFFF !important;
   font-weight: 700;
   line-height: 1.4;
   text-align: left;
   margin-left: 20px;
   max-width: 80%;
   opacity: 1 !important;
   visibility: visible !important;
   display: block !important;
   /* Упрощенный стиль - без анимаций */
   animation: none !important;
   will-change: auto !important;
   transform: none !important;
   backface-visibility: visible !important;
   position: relative;
   z-index: 10;
   margin: 0 auto;
   padding: 20px;
   text-shadow: 0 0 15px rgba(167, 3, 96, 0.6), 0 0 25px rgba(167, 3, 96, 0.4);
}

@keyframes pulseGlow {
   0%, 100% {
       text-shadow: 0 0 8px rgba(167, 3, 96, 0.5), 0 0 12px rgba(167, 3, 96, 0.3);
   }
   50% {
       text-shadow: 0 0 25px rgba(167, 3, 96, 1), 0 0 35px rgba(167, 3, 96, 0.8), 0 0 45px rgba(167, 3, 96, 0.5);
   }
}

html {
   scroll-behavior: smooth;
}

/* Hero в стиле News */
.main-hero {
   margin-bottom: 96px;
   max-width: 720px;
   margin-left: auto;
   margin-right: auto;
   padding: 0 24px;
   text-align: center;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.main-hero-title {
   font-family: 'Raleway', sans-serif;
   font-size: clamp(48px, 8vw, 96px);
   font-weight: 700;
   color: #FFFFFF;
   letter-spacing: -0.02em;
   line-height: 1.15;
   margin-bottom: 0;
   text-align: center;
   white-space: nowrap;
}

.main-hero-title span {
   font-style: italic;
   color: #e8c547;
}

.main-hero-description {
   font-family: 'Poppins', sans-serif;
   font-size: 18px;
   color: rgba(255, 255, 255, 0.82);
   line-height: 1.65;
   text-align: center;
   margin-top: 5cm;
}

/* Real data section */
.main-real-data {
   max-width: 900px;
   margin: 0 auto 40px;
   text-align: center;
   padding: 0 24px;
}

.main-real-data-text {
   font-family: 'Poppins', sans-serif;
   font-size: 18px;
   color: rgba(255, 255, 255, 0.82);
   line-height: 1.65;
   margin: 0;
}

/* Built for those section */
.main-built-for {
   max-width: 900px;
   margin: 0 auto 80px;
   text-align: center;
   padding: 0 24px;
}

.main-built-for-text {
   font-family: 'Poppins', sans-serif;
   font-size: 18px;
   color: rgba(255, 255, 255, 0.82);
   line-height: 1.65;
   margin: 0;
}

.clarity-highlight {
   color: #e8c547;
   font-weight: 600;
}

/* Футер в стиле News */
.main-footer {
   padding: 40px 24px 0.5cm;
   margin-top: 180px;
   text-align: center;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   position: relative;
   margin-bottom: 0;
}

.main-footer::before {
   top: 0;
}

.main-footer::before {
   content: '';
   position: absolute;
   left: 50%;
   top: 0;
   transform: translateX(-50%);
   width: 80px;
   height: 2px;
   background: linear-gradient(90deg, transparent, rgba(232, 197, 71, 0.45), transparent);
}

.main-footer-text {
   font-family: 'Poppins', sans-serif;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.58);
   margin: 0;
}

.main-footer-crafted {
   font-family: 'Poppins', sans-serif;
   font-size: 12px;
   color: rgba(255, 255, 255, 0.45);
   margin: 12px 0 0;
   letter-spacing: 0.06em;
}

/* Секция для текста после заголовка (старый класс, оставляем для совместимости) */
.main-text-section {
   padding: 0 20px;
   margin-top: 10cm;
   margin-bottom: 0;
   margin-left: 1cm;
   text-align: center;
   position: relative;
   z-index: 1;
   display: block;
}

.main-text-section > * {
   max-width: 100%;
}

.main-text-headline {
   font-family: 'Raleway', sans-serif;
   font-size: 52px;
   font-weight: 700;
   color: #FFFFFF;
   line-height: 1.35;
   letter-spacing: -0.025em;
   margin: 0 0 24px;
   text-align: center;
   width: 100%;
   max-width: 100%;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

/* Стили для overlay-text (используется в index.html) */
.main-text-section .overlay-text {
   font-family: 'Raleway', sans-serif;
   font-size: 24px;
   color: #FFFFFF;
   font-weight: 400;
   line-height: 1.6;
   text-align: center;
   margin: 0 auto;
   max-width: 90%;
   opacity: 1;
   visibility: visible;
   display: block;
   padding: 20px;
   position: relative;
   animation: none !important;
   will-change: auto !important;
   transform: none !important;
   backface-visibility: visible !important;
   contain: none !important;
   text-shadow: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

.main-text-description {
   font-family: 'Poppins', sans-serif;
   font-size: 20px;
   font-weight: 400;
   color: rgba(255, 255, 255, 0.82);
   line-height: 1.75;
   margin: 0;
   text-align: center;
   width: 100%;
   max-width: 100%;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

/* Блок доверия / статистика */
.trust-stats {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: flex-start;
   gap: 80px;
   padding: 60px 24px 80px;
   margin: 0 auto;
   max-width: 900px;
   flex-wrap: wrap;
}

.trust-stat {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   min-width: 140px;
}

.trust-stat-number {
   font-family: 'Raleway', sans-serif;
   font-size: 52px;
   font-weight: 700;
   color: #d4af37;
   text-shadow: 0 0 24px rgba(212, 175, 55, 0.25);
   line-height: 1.2;
   letter-spacing: -0.02em;
   margin-bottom: 8px;
}

.trust-stat-label {
   font-family: 'Poppins', sans-serif;
   font-size: 14px;
   font-weight: 400;
   color: #888888;
   text-transform: uppercase;
   letter-spacing: 0.08em;
}

/* Миссия / философия бренда */
.mission-section {
   padding: 0 24px 80px;
   margin: 0 auto;
   max-width: 640px;
   text-align: center;
}

.mission-text {
   font-family: 'Raleway', sans-serif;
   font-size: 20px;
   font-weight: 700;
   color: rgba(255, 255, 255, 0.85);
   line-height: 1.6;
   margin: 0;
   letter-spacing: 0.02em;
}

.mission-text .accent {
   color: #d4af37;
   font-weight: 700;
}

.trust-stats::before {
   content: '';
   position: absolute;
   left: 50%;
   top: 0;
   transform: translateX(-50%);
   width: 120px;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.trust-badge {
   width: 100%;
   margin-top: 24px;
   font-size: 12px;
   color: rgba(255, 255, 255, 0.45);
   letter-spacing: 0.12em;
   text-transform: uppercase;
   text-align: center;
}

/* Круги навигации — Explore tools */
.explore-section {
   padding: 60px 20px 120px;
   text-align: center;
   min-height: auto;
   display: flex !important;
   flex-direction: column;
   align-items: center;
   gap: 120px;
   margin-top: 0;
   margin-bottom: 0;
   overflow: visible !important;
   position: relative;
   z-index: 10;
   width: 100%;
   box-sizing: border-box;
   visibility: visible !important;
   opacity: 1 !important;
}

.menu-item,
.oval-item {

    display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-decoration: none;
   color: #FFFFFF;
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(255, 255, 255, 0.12);
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
   transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.5s ease, border-color 0.4s ease;
   cursor: pointer;
   box-sizing: border-box;
   will-change: transform;
   margin: 0 auto;
   transform-origin: center;
   backface-visibility: hidden;
   transform: none;
   overflow: visible !important;
   position: relative;
   z-index: 1;
}

.menu-item {
   width: 400px;
   height: 400px;
   border-radius: 50%;
}

.oval-item {
   width: 600px;
   height: 250px;
   border-radius: 50%;
   padding: 20px;
}

.menu-item h3,
.oval-item h3 {
   font-size: 45px;
   font-weight: bold;
   line-height: 1.2;
   margin: 10px 0;
   transition: font-size 0.25s ease;
   text-align: center;
   color: #FFFFFF;
}

.oval-item h3 {
   font-size: 35px;
   line-height: 1.3;
}

.menu-item:hover,
.oval-item:hover {
   transform: scale(1.05);
   z-index: 100 !important;
   position: relative;
   box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
   border-color: rgba(255, 255, 255, 0.25);
   overflow: visible !important;
}

.menu-item.premium:hover {
   border-color: rgba(212, 175, 55, 0.4);
   box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), 0 0 24px rgba(212, 175, 55, 0.08);
}

.menu-item:hover h3 {
   font-size: 52px;
}

.oval-item:hover h3 {
   font-size: 52px;
}

.menu-item p,
.oval-item p {
   font-size: 0;
   margin: 10px 0;
   opacity: 0;
   line-height: 1.5;
   transition: font-size 0.3s ease, opacity 0.3s ease;
   max-height: 0;
   color: #FFFFFF;
}

.menu-item:hover p,
.oval-item:hover p {
   font-size: 14px;
   opacity: 1;
   max-height: 100px;
}

.subscription-banner {
   margin: 80px auto 40px;
   padding: 24px 32px;
   max-width: 960px;
   width: calc(100% - 40px);
   border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 20px;
   background: rgba(0, 0, 0, 0.55);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   backdrop-filter: blur(14px);
   transition: opacity 0.3s ease, transform 0.3s ease;
}

.subscription-banner.hidden {
   opacity: 0;
   pointer-events: none;
   transform: translateY(20px);
   display: none;
}

.subscription-info {
   flex: 1;
}

.subscription-title {
   font-size: 28px;
   color: #FFFFFF;
   margin-bottom: 8px;
}

.subscription-message {
   font-size: 16px;
   color: rgba(255, 255, 255, 0.78);
   line-height: 1.5;
}

.subscription-pay-btn {
   padding: 14px 26px;
   border-radius: 40px;
   border: none;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   background: linear-gradient(135deg, #581c87, #2d1b4e);
   color: #FFFFFF;
   transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.subscription-pay-btn:hover:not(:disabled) {
   transform: scale(1.02) translateY(-2px);
   box-shadow: 0 12px 30px rgba(88, 28, 135, 0.3);
   border-radius: inherit;
   opacity: inherit;
}

.subscription-pay-btn:active:not(:disabled) {
   transform: scale(1) translateY(0);
   border-radius: inherit;
   opacity: inherit;
}

.subscription-pay-btn:disabled {
   opacity: 0.6;
   cursor: progress;
}

/* Chat Subscription Section - Inside Chat Widget */
.chat-subscription-section {
   padding: 15px 20px;
   background: transparent;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}

.chat-subscription-section.hidden {
   display: none;
}

.chat-timer-display {
   font-size: 20px;
   font-weight: 700;
   color: #FFFFFF;
   font-family: 'Raleway', sans-serif;
   letter-spacing: 2px;
   margin: 0;
   text-align: center;
   width: 100%;
}

/* Chat Expired Overlay - Black screen inside chat */
.chat-expired-overlay {
    pointer-events: none; /* Allow clicks to pass through to chat */
   position: absolute;
   inset: 0;
   background: #000000;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   z-index: 10;
   padding: 40px 20px 40px;
   padding-top: 127px;
}

.chat-expired-overlay.hidden {
   display: none;
}

.chat-expired-content {
   text-align: center;
   width: 100%;
   max-width: 400px;
   margin: 0 auto;
   padding: 0 20px;
   pointer-events: auto !important; /* Allow clicks on payment buttons */
   position: relative;
   z-index: 10001;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   margin-top: 0;
}

.chat-expired-text {
   font-size: 22px;
   font-weight: 700;
   color: #FFFFFF;
   font-family: 'Raleway', sans-serif;
   margin-bottom: 40px;
   line-height: 1.5;
   text-align: center;
   width: 100%;
}

.chat-expired-btn {
   padding: 12px 28px;
   border-radius: 8px;
   border: none;
   font-size: 16px;
   font-weight: 700;
   font-family: 'Raleway', sans-serif;
   cursor: pointer;
   background: #2a2a2a;
   color: #FFFFFF;
   border: 1px solid #3a3a3a;
   transition: all 0.2s ease;
   width: 100%;
   max-width: 300px;
}

.chat-expired-btn:hover {
   background: #3a3a3a;
   border-color: #4a4a4a;
   transform: scale(1.02) translateY(-2px);
   border-radius: inherit;
   opacity: inherit;
}

.chat-expired-btn:active {
   transform: scale(1) translateY(0);
   border-radius: inherit;
   opacity: inherit;
}

.chat-expired-btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
}

.payment-method-buttons {
   display: flex;
   flex-direction: column;
   gap: 35px;
   width: 100%;
   max-width: 300px;
   margin: 0 auto;
   align-items: center;
   justify-content: center;
}

.payment-method-btn {
   padding: 12px 28px;
   border-radius: 8px;
   border: none;
   font-size: 16px;
   font-weight: 700;
   pointer-events: auto !important;
   cursor: pointer !important;
   font-family: 'Raleway', sans-serif;
   cursor: pointer;
   pointer-events: auto !important;
   position: relative;
   z-index: 10004;
   background: #2a2a2a;
   color: #FFFFFF;
   border: 1px solid #3a3a3a;
   transition: all 0.2s ease;
   width: 100%;
}

.payment-method-btn:hover:not(:disabled) {
   background: #3a3a3a;
   border-color: #4a4a4a;
   transform: scale(1.02) translateY(-2px);
   box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
   border-radius: inherit;
   opacity: inherit;
}

.payment-method-btn:active:not(:disabled) {
   transform: scale(1) translateY(0);
   border-radius: inherit;
   opacity: inherit;
}

.payment-method-btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
}

/* Subscription Overlay - Black Screen */
.subscription-overlay {
   position: fixed;
   inset: 0;
   background: #000000;
   z-index: 2000;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 1;
   transition: opacity 0.3s ease;
}

.subscription-overlay.hidden {
   opacity: 0;
   pointer-events: none;
   display: none;
}

.subscription-overlay-content {
   text-align: center;
   padding: 40px;
}

.subscription-overlay-text {
   font-size: 24px;
   font-weight: 700;
   color: #FFFFFF;
   font-family: 'Raleway', sans-serif;
   margin-bottom: 30px;
   line-height: 1.5;
}

.subscription-overlay-btn {
   padding: 14px 32px;
   border-radius: 8px;
   border: none;
   font-size: 18px;
   font-weight: 700;
   font-family: 'Raleway', sans-serif;
   cursor: pointer;
   background: #2a2a2a;
   color: #FFFFFF;
   border: 1px solid #3a3a3a;
   transition: all 0.2s ease;
}

.subscription-overlay-btn:hover {
   background: #3a3a3a;
   border-color: #4a4a4a;
   transform: scale(1.02) translateY(-2px);
   border-radius: inherit;
   opacity: inherit;
}

.subscription-overlay-btn:active {
   transform: scale(1) translateY(0);
   border-radius: inherit;
   opacity: inherit;
}

.main-content {
   padding: 0;
}

.crypto-form {
   display: flex;
   flex-direction: column;
   gap: 25px;
}

.form-group {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.form-group label {
   font-weight: 600;
   color: #FFFFFF;
   font-size: 0.95rem;
}

.form-group input,
.form-group select {
   padding: 14px 16px;
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 12px;
   font-size: 1rem;
   transition: all 0.2s ease;
   background: rgba(255, 255, 255, 0.08);
   color: #FFFFFF;
   outline: none;
}

.form-group input[type="range"] {
   height: 6px;
   padding: 0;
   background: linear-gradient(90deg, #6A1B9A, #1A237E);
   border: none;
}

.form-group input:focus,
.form-group select:focus {
   border-color: rgba(255, 255, 255, 0.35);
   box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.07);
}

.form-group input::placeholder {
   color: rgba(255, 255, 255, 0.6);
}

.submit-btn {
   background: linear-gradient(135deg, #1A237E, #6A1B9A);
   color: #FFFFFF;
   border: none;
   padding: 16px;
   border-radius: 12px;
   font-size: 1rem;
   font-weight: 700;
   cursor: pointer;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   margin-top: 10px;
}

.submit-btn:hover {
   transform: scale(1.02) translateY(-2px);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
   border-radius: inherit;
   opacity: inherit;
}

.submit-btn:active {
   transform: scale(1) translateY(-1px);
   border-radius: inherit;
   opacity: inherit;
}

@media (max-width: 768px) {
   html, body {
       overflow-x: hidden !important;
       overscroll-behavior-x: none;
       -webkit-overflow-scrolling: touch;
       width: 100%;
       max-width: 100vw;
       position: relative;
   }
   .page {
       overflow-x: hidden !important;
       max-width: 100vw;
       width: 100%;
   }
   .main-nav {
       padding: 14px 20px;
   }
   .main-nav-links {
       gap: 20px;
   }
   .main-nav-links a {
       font-size: 13px;
   }
   .explore-heading {
       font-size: 22px;
       margin-bottom: 32px;
   }
   .content, .main-text-section, .trust-stats, .mission-section, .explore-section {
       max-width: 100%;
       overflow-wrap: break-word;
   }
   img, video, iframe {
       max-width: 100%;
       height: auto;
   }
}

/* Responsive design */
@media (max-width: 600px) {
   html, body {
       overflow-x: hidden !important;
       overscroll-behavior-x: none;
       overscroll-behavior-y: auto;
   }
   .main-nav-links {
       display: none;
   }
   .hero {
       padding: 40px 16px;
   }

   .floating-text {
       font-size: 56px;
       line-height: 1.15;
   }

   .main-text-headline {
       font-size: 24px;
   }

   .main-text-description {
       font-size: 16px;
       line-height: 1.6;
   }

   .trust-stats {
       gap: 48px;
       padding: 48px 20px 60px;
   }

   .trust-stat-number {
       font-size: 36px;
   }

   .trust-stat-label {
       font-size: 12px;
   }

   .mission-section {
       padding: 0 20px 60px;
   }

   .mission-text {
       font-size: 17px;
   }

   .menu-item {
       width: 320px;
       height: 320px;
   }

   .menu-item h3 {
       font-size: 32px;
   }

   /* Овал на мобильной — мягкий квадрат, чётко влезает в экран */
   .oval-item {
       width: calc(100% - 32px);
       max-width: 100%;
       height: auto;
       min-height: 140px;
       padding: 20px 24px;
       border-radius: 16px;
       margin: 0 auto;
   }

   .oval-item:hover {
       transform: scale(1.02);
   }

   .oval-item h3 {
       font-size: 18px;
       line-height: 1.35;
   }

   .oval-item:hover h3 {
       font-size: 19px;
   }

   .explore-section {
       gap: 100px;
       padding: 60px 16px 100px;
   }

   .main-footer {
       padding: 40px 20px 30px;
       margin-top: 20px;
   }

   .footer-text {
       font-size: 13px;
   }

   .footer-crafted {
       font-size: 11px;
       margin-top: 10px;
   }

   /* Мобильная: меньше фоновых элементов для производительности */
   .blockchain-block.block-2,
   .blockchain-block.block-3,
   .transaction-data.data-2,
   .transaction-data.data-3,
   .transaction-data.data-4,
   .price-chart-line.chart-2,
   .price-chart-line.chart-3,
   .blockchain-connection-line.conn-2,
   .blockchain-connection-line.conn-3,
   .blockchain-connection-line.conn-4,
   .business-indicator.indicator-2,
   .business-indicator.indicator-3,
   .data-line.line-2,
   .data-line.line-3 {
       display: none !important;
   }

   .hero h1 {
       font-size: 26px;
   }

   .section-header h2 {
       font-size: 32px;
   }

   .subscription-banner {
       flex-direction: column;
       align-items: flex-start;
   }

   .subscription-pay-btn {
       width: 100%;
   }
}

.payment-backdrop {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.65);
   z-index: 1200;
   opacity: 1;
   transition: opacity 0.3s ease;
}

.payment-backdrop.hidden {
   opacity: 0;
   pointer-events: none;
   display: none;
}

.payment-modal {
   position: fixed;
   inset: 50% auto auto 50%;
   transform: translate(-50%, -50%);
   max-width: 480px;
   width: calc(100% - 40px);
   background: rgba(10, 10, 10, 0.92);
   border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 20px;
   padding: 28px 28px 32px;
   box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
   z-index: 1300;
   color: #FFFFFF;
   backdrop-filter: blur(18px);
   transition: opacity 0.3s ease, transform 0.3s ease;
}

.payment-modal.hidden {
   opacity: 0;
   pointer-events: none;
   transform: translate(-50%, -40%);
   display: none;
}

.payment-close {
   position: absolute;
   top: 14px;
   right: 16px;
   background: none;
   border: none;
   color: rgba(255, 255, 255, 0.65);
   font-size: 28px;
   cursor: pointer;
   transition: color 0.2s ease;
}

.payment-close:hover {
   color: #FFFFFF;
}

.payment-description {
   font-size: 15px;
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.78);
   margin-bottom: 18px;
}

.payment-details {
   margin: 0 0 24px;
   padding: 0;
}

.payment-details div {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding: 10px 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.payment-details dt {
   font-weight: 600;
   color: rgba(255, 255, 255, 0.85);
}

.payment-details dd {
   margin: 0;
   font-family: 'Poppins', sans-serif;
   font-size: 15px;
   color: rgba(255, 255, 255, 0.9);
   text-align: right;
   word-break: break-all;
}

.copy-btn {
   margin-left: 12px;
   padding: 6px 14px;
   border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.25);
   background: transparent;
   color: #FFFFFF;
   cursor: pointer;
   transition: background 0.2s ease, color 0.2s ease;
}

.copy-btn:hover {
   background: rgba(255, 255, 255, 0.2);
   transform: scale(1.02);
   border-radius: inherit;
   opacity: inherit;
}

.copy-btn:active {
   transform: scale(1);
   border-radius: inherit;
   opacity: inherit;
}

.payment-link {
   display: inline-block;
   width: 100%;
   text-align: center;
   padding: 12px 20px;
   border-radius: 16px;
   background: linear-gradient(135deg, #581c87, #2d1b4e);
   color: #FFFFFF;
   text-decoration: none;
   font-weight: 600;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   margin: 16px 0;
}

.payment-link.hidden {
   display: none;
}

.payment-link:hover {
   transform: scale(1.02) translateY(-1px);
   box-shadow: 0 12px 24px rgba(88, 28, 135, 0.3);
   border-radius: inherit;
   opacity: inherit;
}

.payment-link:active {
   transform: scale(1);
   border-radius: inherit;
   opacity: inherit;
}

.payment-note {
   margin-top: 18px;
   font-size: 13px;
   color: rgba(255, 255, 255, 0.6);
   line-height: 1.6;
}

/* Scroll-triggered reveal — секции плавно появляются при прокрутке */
.scroll-reveal {
   opacity: 0;
   transform: translateY(36px);
   transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
               transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-reveal.scroll-revealed {
   opacity: 1;
   transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
   .scroll-reveal {
       opacity: 1;
       transform: none;
       transition: none;
   }
}

/* Hero, круги навигации и первый блок — сразу видны */
.hero,
.crypto-background-elements,
.explore-section,
.explore-section .menu-item,
.explore-section .oval-item {
   opacity: 1 !important;
}

/* Animation for form elements */
@keyframes fadeInUp {
   from {
       opacity: 0;
       transform: translateY(30px);
   }

   to {
       opacity: 1;
       transform: translateY(0);
   }
}

.form-group {
   animation: fadeInUp 0.6s ease forwards;
}

.form-group:nth-child(1) {
   animation-delay: 0.1s;
}

.form-group:nth-child(2) {
   animation-delay: 0.2s;
}

.form-group:nth-child(3) {
   animation-delay: 0.3s;
}

.submit-btn {
   animation: fadeInUp 0.6s ease 0.4s forwards;
}

/* Chat widget - ALWAYS FIXED IN BOTTOM RIGHT CORNER OF VIEWPORT */
.chat-widget {
   position: fixed !important;
   bottom: 20px !important;
   right: 20px !important;
   top: auto !important;
   left: auto !important;
   z-index: 2147483647 !important;
   display: block !important;
   visibility: visible !important;
   opacity: 1 !important;
   pointer-events: auto !important;
   margin: 0 !important;
   padding: 0 !important;
   transform: none !important;
   will-change: auto !important;
   contain: none !important;
}

.chat-button {
   width: 62px !important;
   height: 62px !important;
   border-radius: 50% !important;
   background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
   border: 2px solid #3a3a3a !important;
   cursor: pointer !important;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   transition: all 0.3s ease !important;
   position: relative !important;
   animation: chat-float 3s ease-in-out infinite !important;
   visibility: visible !important;
   opacity: 1 !important;
}

@keyframes chat-float {
   0%,
   100% {
       transform: translateY(0);
   }

   50% {
       transform: translateY(-10px);
   }
}

.chat-button:hover {
   transform: scale(1.15) translateY(-5px);
   box-shadow: 0 6px 25px rgba(255, 255, 255, 0.2);
   border-color: #4a4a4a;
}

.chat-button:active {
   transform: scale(0.95);
}

.chat-button svg {
   width: 31px;
   height: 31px;
   fill: #FFFFFF;
}

.chat-button::before {
   content: '';
   position: absolute;
   top: -5px;
   right: -5px;
   width: 12px;
   height: 12px;
   background: #888888;
   border-radius: 50%;
   border: 2px solid #1a1a1a;
   animation: pulse-dot 2s ease-in-out infinite;
}

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

   50% {
       transform: scale(1.2);
       opacity: 0.6;
   }
}

.chat-container {
   position: fixed !important;
   bottom: 90px !important;
   right: 20px !important;
   width: 420px !important;
   height: 600px !important;
   background: #1a1a1a !important;
   border: 1px solid #2a2a2a !important;
   border-radius: 15px !important;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
   display: none !important;
   flex-direction: column !important;
   overflow: hidden !important;
   animation: chat-slide-up 0.3s ease !important;
   z-index: 10001 !important;
   pointer-events: auto !important;
}

.chat-container.active {
   display: flex !important;
   visibility: visible !important;
   opacity: 1 !important;
}

@keyframes chat-slide-up {
   0% {
       opacity: 0;
       transform: translateY(30px) scale(0.8);
   }

   100% {
       opacity: 1;
       transform: translateY(0) scale(1);
   }
}

.chat-header {
   background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
   color: #cccccc;
   padding: 22px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid #3a3a3a;
}

.chat-header h3 {
   font-size: 1.3em;
   display: flex;
   align-items: center;
   gap: 10px;
}

.chat-header-icon {
   width: 24px;
   height: 24px;
   flex-shrink: 0;
   background: #f59e0b;
   border-radius: 6px;
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cline x1='5' y1='5' x2='19' y2='19' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
   mask-size: 14px 14px;
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cline x1='5' y1='5' x2='19' y2='19' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
   -webkit-mask-size: 14px 14px;
}

.status-dot {
   width: 8px;
   height: 8px;
   background: #888888;
   border-radius: 50%;
   animation: chat-pulse 2s infinite;
}

@keyframes chat-pulse {
   0%,
   100% {
       opacity: 1;
   }

   50% {
       opacity: 0.5;
   }
}

.close-chat {
   background: none;
   border: none;
   color: #FFFFFF;
   font-size: 26px;
   cursor: pointer;
   width: 34px;
   height: 34px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 5px;
   transition: background 0.3s ease;
}

.close-chat:hover {
   background: rgba(255, 255, 255, 0.2);
}

.chat-messages {
   flex: 1;
   padding: 22px;
   overflow-y: auto;
   background: #0a0a0a;
   display: flex !important;
   flex-direction: column !important;
   width: 100% !important;
   box-sizing: border-box;
}

.message {
   margin-bottom: 16px;
   display: flex !important;
   gap: 9px;
   animation: chat-fade-in 0.3s ease;
   align-items: flex-start;
   width: 100% !important;
   flex-direction: row !important;
   flex-wrap: nowrap !important;
}

@keyframes chat-fade-in {
   from {
       opacity: 0;
       transform: translateY(10px);
   }

   to {
       opacity: 1;
       transform: translateY(0);
   }
}

.message.bot {
   flex-direction: row;
   justify-content: flex-start;
}

.message.user {
   flex-direction: row-reverse;
   justify-content: flex-end;
}

.message-avatar {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   flex-shrink: 0;
   background: transparent;
   border: none;
}

.message-content {
   max-width: 70% !important;
   min-width: 0;
   padding: 13px 17px;
   border-radius: 15px;
   line-height: 1.55;
   font-size: 14.5px;
   word-wrap: break-word;
   display: block !important;
   color: #cccccc;
   flex-shrink: 1;
   box-sizing: border-box;
}

.message.bot .message-content {
   background: #2a2a2a;
   border: 1px solid #3a3a3a;
   border-bottom-left-radius: 5px;
}

.message.user .message-content {
   background: #1a1a1a;
   border: 1px solid #3a3a3a;
   border-bottom-right-radius: 5px;
}

.message-sources {
   margin-top: 8px;
   padding-top: 8px;
   border-top: 1px solid #3a3a3a;
   font-size: 12px;
}

.message-sources a {
   color: #888888;
   text-decoration: none;
   display: block;
   margin: 4px 0;
   transition: color 0.2s ease;
}

.message-sources a:hover {
   color: #cccccc;
   text-decoration: underline;
}

.message-sources a::before {
   content: "🔗 ";
   margin-right: 4px;
}

.chat-input-container {
   pointer-events: auto !important;
   z-index: 10003 !important;
   position: relative !important;
   padding: 22px !important;
   background: #1a1a1a !important;
   border-top: 1px solid #3a3a3a !important;
   pointer-events: auto !important;
   z-index: 10002 !important;
   position: relative !important;
}

.chat-input-wrapper {
   display: flex !important;
   gap: 10px !important;
   pointer-events: auto !important;
   z-index: 10002 !important;
   position: relative !important;
}

.chat-input {
   flex: 1 !important;
   padding: 13px 17px !important;
   border: 2px solid #3a3a3a !important;
   border-radius: 25px !important;
   font-size: 14.5px !important;
   outline: none !important;
   background: #0a0a0a !important;
   color: #cccccc !important;
   transition: border-color 0.3s ease !important;
   pointer-events: auto !important;
   z-index: 10003 !important;
   position: relative !important;
   cursor: text !important;
}

.chat-input::placeholder {
   color: #666666;
}

.chat-input:focus {
   border-color: #5a5a5a;
}

.send-button {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
   border: 2px solid #3a3a3a;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
}

.send-button:hover {
   transform: scale(1.1);
   box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
   border-color: #4a4a4a;
}

.send-button:active {
   transform: scale(0.95);
}

.send-button svg {
   width: 21px;
   height: 21px;
   fill: #FFFFFF;
}

.typing-indicator {
   display: none;
   padding: 12px 16px;
   background: #2a2a2a;
   border: 1px solid #3a3a3a;
   border-radius: 15px;
   border-bottom-left-radius: 5px;
   width: fit-content;
}

.typing-indicator.active {
   display: block;
}

.typing-dots {
   display: flex;
   gap: 4px;
}

.typing-dots span {
   width: 8px;
   height: 8px;
   background: #666666;
   border-radius: 50%;
   animation: chat-typing 1.4s infinite;
}

.typing-dots span:nth-child(2) {
   animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
   animation-delay: 0.4s;
}

@keyframes chat-typing {
   0%,
   60%,
   100% {
       transform: translateY(0);
   }

   30% {
       transform: translateY(-10px);
   }
}

.quick-questions {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 10px;
}

.quick-question-btn {
   padding: 9px 15px;
   background: #2a2a2a;
   border: 1px solid #3a3a3a;
   border-radius: 20px;
   font-size: 12.5px;
   cursor: pointer;
   transition: all 0.3s ease;
   color: #888888;
   font-weight: 500;
}

.quick-question-btn:hover {
   background: #3a3a3a;
   color: #cccccc;
   border-color: #4a4a4a;
   transform: scale(1.02) translateY(-2px);
   box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
   border-radius: inherit;
   opacity: inherit;
}

.quick-question-btn:active {
   transform: scale(1) translateY(0);
   border-radius: inherit;
   opacity: inherit;
}

@media (max-width: 480px) {
   html, body {
       overflow-x: hidden !important;
       overscroll-behavior-x: none;
       overscroll-behavior-y: auto;
   }
   .chat-container {
       width: calc(100vw - 40px);
       height: calc(100vh - 120px);
       right: 20px;
   }
}

/* Блокчейн-блоки - деловой стиль */
.blockchain-block {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 1px solid rgba(100, 150, 255, 0.3);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    animation: block-float 20s ease-in-out infinite;
    box-shadow: 
        0 0 10px rgba(100, 150, 255, 0.2),
        inset 0 0 10px rgba(50, 100, 200, 0.1);
    z-index: 1;
}

.blockchain-block::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(100, 150, 255, 0.4), transparent);
    animation: block-glow 4s ease-in-out infinite;
}

.blockchain-block::after {
    content: '₿';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    color: rgba(150, 200, 255, 0.5);
    font-weight: 700;
    text-shadow: 0 0 5px rgba(100, 150, 255, 0.3);
}

.blockchain-block.block-1 {
    border-color: rgba(100, 150, 255, 0.3);
    top: 25%;
    left: 8%;
    animation-delay: 0s;
}

.blockchain-block.block-2 {
    border-color: rgba(80, 130, 230, 0.3);
    bottom: 30%;
    right: 12%;
    animation-delay: 7s;
}

.blockchain-block.block-3 {
    border-color: rgba(90, 140, 240, 0.3);
    top: 60%;
    left: 15%;
    animation-delay: 14s;
    width: 60px;
    height: 60px;
}

.blockchain-block.block-3::after {
    font-size: 22px;
    content: 'Ξ';
}

@keyframes block-float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.8;
    }
    33% {
        transform: translate(20px, -15px) rotate(5deg);
        opacity: 1;
    }
    66% {
        transform: translate(-15px, 20px) rotate(-5deg);
        opacity: 0.9;
    }
}

@keyframes block-glow {
    0%, 100% {
        opacity: 0.2;
    }
    50% {
        opacity: 0.5;
    }
}

/* ========== ДЕЛОВЫЕ КРИПТО-ЭФФЕКТЫ ========== */

/* Блокчейн-сетка (деловая) */
.blockchain-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(100, 150, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 130, 230, 0.08) 1px, transparent 1px);
    background-size: 100px 100px;
    animation: grid-shift 30s linear infinite;
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;
}

@keyframes grid-shift {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100px 100px;
    }
}

/* Данные транзакций (деловые) */
.transaction-data {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: 400;
    color: rgba(150, 200, 255, 0.4);
    text-shadow: 0 0 5px rgba(100, 150, 255, 0.2);
    animation: data-fade 12s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
    letter-spacing: 1px;
}

.transaction-data.data-1 {
    top: 15%;
    left: 5%;
    animation-delay: 0s;
}

.transaction-data.data-2 {
    top: 70%;
    right: 5%;
    animation-delay: 4s;
}

.transaction-data.data-3 {
    bottom: 20%;
    left: 50%;
    animation-delay: 8s;
}

.transaction-data.data-4 {
    top: 40%;
    right: 8%;
    animation-delay: 2s;
}

.transaction-data.data-5 {
    top: 85%;
    left: 15%;
    animation-delay: 6s;
}

@keyframes data-fade {
    0%, 100% {
        opacity: 0.3;
        transform: translateY(0);
    }
    50% {
        opacity: 0.6;
        transform: translateY(-10px);
    }
}

/* График цены (деловой) */
.price-chart-line {
    position: absolute;
    width: 300px;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent,
        rgba(100, 150, 255, 0.3) 20%,
        rgba(80, 130, 230, 0.3) 50%,
        rgba(100, 150, 255, 0.3) 80%,
        transparent);
    border-radius: 1px;
    animation: chart-pulse 15s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
    filter: blur(0.5px);
}

.price-chart-line.chart-1 {
    top: 30%;
    left: 10%;
    transform: rotate(15deg);
    animation-delay: 0s;
}

.price-chart-line.chart-2 {
    bottom: 25%;
    right: 10%;
    transform: rotate(-20deg);
    animation-delay: 7s;
    width: 350px;
}

.price-chart-line.chart-3 {
    top: 55%;
    left: 50%;
    transform: rotate(5deg);
    animation-delay: 10s;
    width: 320px;
}

@keyframes chart-pulse {
    0%, 100% {
        opacity: 0.3;
        transform: rotate(var(--rotation, 0deg)) scaleX(1);
    }
    50% {
        opacity: 0.5;
        transform: rotate(var(--rotation, 0deg)) scaleX(1.1);
    }
}

/* Блокчейн-соединения (тонкие линии) */
.blockchain-connection-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(100, 150, 255, 0.25) 30%, 
        rgba(80, 130, 230, 0.25) 50%, 
        rgba(100, 150, 255, 0.25) 70%, 
        transparent);
    animation: connection-fade 18s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

.blockchain-connection-line.conn-1 {
    width: 400px;
    top: 40%;
    left: 8%;
    transform: rotate(20deg);
    animation-delay: 0s;
}

.blockchain-connection-line.conn-2 {
    width: 350px;
    bottom: 35%;
    right: 8%;
    transform: rotate(-25deg);
    animation-delay: 6s;
}

.blockchain-connection-line.conn-3 {
    width: 380px;
    top: 65%;
    left: 50%;
    transform: rotate(10deg);
    animation-delay: 12s;
}

.blockchain-connection-line.conn-4 {
    width: 300px;
    top: 20%;
    right: 20%;
    transform: rotate(-15deg);
    animation-delay: 9s;
}

@keyframes connection-fade {
    0%, 100% {
        opacity: 0.2;
        transform: rotate(var(--rotation, 0deg)) scaleX(1);
    }
    50% {
        opacity: 0.4;
        transform: rotate(var(--rotation, 0deg)) scaleX(1.2);
    }
}

/* Деловые индикаторы */
.business-indicator {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(100, 150, 255, 0.5);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(100, 150, 255, 0.4);
    animation: indicator-pulse 6s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

.business-indicator.indicator-1 {
    top: 18%;
    left: 12%;
    animation-delay: 0s;
}

.business-indicator.indicator-2 {
    top: 45%;
    right: 15%;
    animation-delay: 2s;
}

.business-indicator.indicator-3 {
    bottom: 30%;
    left: 25%;
    animation-delay: 4s;
}

@keyframes indicator-pulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.3);
    }
}

/* Деловые линии данных */
.data-line {
    position: absolute;
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent,
        rgba(100, 150, 255, 0.2) 50%,
        transparent);
    animation: line-fade 10s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

.data-line.line-1 {
    top: 35%;
    left: 5%;
    transform: rotate(30deg);
    animation-delay: 0s;
}

.data-line.line-2 {
    top: 60%;
    right: 5%;
    transform: rotate(-35deg);
    animation-delay: 3s;
}

.data-line.line-3 {
    bottom: 15%;
    left: 40%;
    transform: rotate(10deg);
    animation-delay: 6s;
}

@keyframes line-fade {
    0%, 100% {
        opacity: 0.2;
        transform: rotate(var(--rotation, 0deg)) scaleX(1);
    }
    50% {
        opacity: 0.4;
        transform: rotate(var(--rotation, 0deg)) scaleX(1.2);
    }
}

/* Крипто-частицы - летающие элементы */
.crypto-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(255, 79, 197, 0.8), rgba(122, 0, 255, 0.4));
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 79, 197, 0.6);
    animation: particle-float 12s ease-in-out infinite;
}

.crypto-particle.particle-1 {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.crypto-particle.particle-2 {
    top: 40%;
    right: 25%;
    animation-delay: 2s;
    width: 8px;
    height: 8px;
}

.crypto-particle.particle-3 {
    bottom: 25%;
    left: 30%;
    animation-delay: 4s;
}

.crypto-particle.particle-4 {
    top: 70%;
    right: 20%;
    animation-delay: 6s;
    width: 5px;
    height: 5px;
}

.crypto-particle.particle-5 {
    top: 50%;
    left: 50%;
    animation-delay: 8s;
}

@keyframes particle-float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }
    25% {
        transform: translate(40px, -30px) scale(1.2);
        opacity: 0.9;
    }
    50% {
        transform: translate(-30px, 40px) scale(0.8);
        opacity: 0.7;
    }
    75% {
        transform: translate(30px, 30px) scale(1.1);
        opacity: 0.8;
    }
}

/* Усиливаем видимость орбов */
.crypto-orb.orb-1 {
    opacity: 0.6 !important;
}

.crypto-orb.orb-2 {
    opacity: 0.55 !important;
}

.crypto-orb.orb-3 {
    opacity: 0.5 !important;
}

/* Яркие крипто-элементы для заметности */
.crypto-glow-circle {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 79, 197, 0.3), transparent 70%);
    filter: blur(30px);
    animation: glow-pulse 4s ease-in-out infinite;
    z-index: 0;
}

.crypto-glow-circle.glow-1 {
    top: 10%;
    right: 20%;
    animation-delay: 0s;
}

.crypto-glow-circle.glow-2 {
    bottom: 15%;
    left: 15%;
    animation-delay: 2s;
    background: radial-gradient(circle, rgba(122, 0, 255, 0.3), transparent 70%);
}

.crypto-pulse-ring {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 3px solid;
    border-radius: 50%;
    animation: ring-pulse 3s ease-in-out infinite;
    z-index: 0;
}

.crypto-pulse-ring.ring-1 {
    border-color: rgba(255, 79, 197, 0.5);
    top: 30%;
    left: 5%;
    animation-delay: 0s;
}

.crypto-pulse-ring.ring-2 {
    border-color: rgba(122, 0, 255, 0.5);
    bottom: 25%;
    right: 8%;
    animation-delay: 1.5s;
}

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

@keyframes ring-pulse {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
}

/* Дополнительные эффекты фона - тёмно-фиолетовый (без синего) */
body::before {
    background: 
        radial-gradient(circle at 20% 20%, rgba(74, 25, 66, 0.15), transparent 60%),
        radial-gradient(circle at 80% 10%, rgba(88, 28, 135, 0.12), transparent 55%),
        radial-gradient(circle at 30% 85%, rgba(74, 25, 66, 0.1), transparent 55%),
        radial-gradient(circle at 70% 70%, rgba(88, 28, 135, 0.08), transparent 50%),
        radial-gradient(circle at 10% 50%, rgba(74, 25, 66, 0.08), transparent 50%),
        linear-gradient(160deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.8));
}

/* Усиливаем блокчейн-сетку */
body {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        url('assets/crypto-academy-bg-v2.png');
}

/* Больше пульсирующих кругов */
.crypto-glow-circle.glow-3 {
    top: 50%;
    left: 10%;
    animation-delay: 1s;
    background: radial-gradient(circle, rgba(255, 79, 197, 0.4), transparent 70%);
    width: 120px;
    height: 120px;
}

.crypto-glow-circle.glow-4 {
    top: 70%;
    right: 25%;
    animation-delay: 3s;
    background: radial-gradient(circle, rgba(122, 0, 255, 0.4), transparent 70%);
    width: 180px;
    height: 180px;
}

.crypto-glow-circle.glow-5 {
    bottom: 10%;
    left: 30%;
    animation-delay: 4s;
    background: radial-gradient(circle, rgba(255, 79, 197, 0.35), transparent 70%);
    width: 140px;
    height: 140px;
}

/* Больше пульсирующих колец */
.crypto-pulse-ring.ring-3 {
    border-color: rgba(255, 79, 197, 0.6);
    top: 15%;
    right: 30%;
    animation-delay: 3s;
    width: 150px;
    height: 150px;
}

.crypto-pulse-ring.ring-4 {
    border-color: rgba(122, 0, 255, 0.6);
    top: 60%;
    left: 25%;
    animation-delay: 4.5s;
    width: 180px;
    height: 180px;
}

/* Летающие крипто-монеты */
.crypto-coin {
    position: absolute;
    font-size: 40px;
    font-weight: 700;
    color: rgba(255, 79, 197, 0.8);
    text-shadow: 
        0 0 20px rgba(255, 79, 197, 0.8),
        0 0 40px rgba(255, 79, 197, 0.5);
    animation: coin-float 15s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

.crypto-coin.coin-1 {
    top: 8%;
    left: 8%;
    animation-delay: 0s;
}

.crypto-coin.coin-2 {
    top: 8%;
    right: 8%;
    animation-delay: 2s;
    color: rgba(122, 0, 255, 0.8);
    text-shadow: 
        0 0 20px rgba(122, 0, 255, 0.8),
        0 0 40px rgba(122, 0, 255, 0.5);
}

.crypto-coin.coin-3 {
    bottom: 8%;
    left: 8%;
    animation-delay: 4s;
    font-size: 35px;
}

.crypto-coin.coin-4 {
    bottom: 8%;
    right: 8%;
    animation-delay: 6s;
    color: rgba(122, 0, 255, 0.8);
    text-shadow: 
        0 0 20px rgba(122, 0, 255, 0.8),
        0 0 40px rgba(122, 0, 255, 0.5);
    font-size: 45px;
}

.crypto-coin.coin-5 {
    top: 15%;
    left: 25%;
    animation-delay: 8s;
    font-size: 38px;
}

.crypto-coin.coin-6 {
    top: 15%;
    right: 25%;
    animation-delay: 10s;
    color: rgba(122, 0, 255, 0.8);
    text-shadow: 
        0 0 20px rgba(122, 0, 255, 0.8),
        0 0 40px rgba(122, 0, 255, 0.5);
}

.crypto-coin.coin-7 {
    bottom: 15%;
    left: 25%;
    animation-delay: 12s;
    font-size: 42px;
}

.crypto-coin.coin-8 {
    bottom: 15%;
    right: 25%;
    animation-delay: 14s;
    color: rgba(122, 0, 255, 0.8);
    text-shadow: 
        0 0 20px rgba(122, 0, 255, 0.8),
        0 0 40px rgba(122, 0, 255, 0.5);
    font-size: 36px;
}

@keyframes coin-float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 0.7;
    }
    25% {
        transform: translate(50px, -40px) rotate(90deg) scale(1.2);
        opacity: 1;
    }
    50% {
        transform: translate(-40px, 50px) rotate(180deg) scale(0.9);
        opacity: 0.8;
    }
    75% {
        transform: translate(40px, 40px) rotate(270deg) scale(1.1);
        opacity: 0.9;
    }
}

/* Делаем орбы еще ярче */
.crypto-orb.orb-1 {
    opacity: 0.7 !important;
    filter: blur(35px);
}

.crypto-orb.orb-2 {
    opacity: 0.65 !important;
    filter: blur(35px);
}

.crypto-orb.orb-3 {
    opacity: 0.6 !important;
    filter: blur(35px);
}

/* Усиливаем пульсирующие круги */
.crypto-glow-circle {
    opacity: 0.6 !important;
}

.crypto-glow-circle.glow-1 {
    opacity: 0.7 !important;
}

.crypto-glow-circle.glow-2 {
    opacity: 0.65 !important;
}

/* Дополнительные летающие монеты BNB, ADA, SOL (оставлено 11 из 16) */
.crypto-coin.coin-9 {
    top: 25%;
    left: 45%;
    animation-delay: 16s;
    color: rgba(255, 193, 7, 0.9);
    text-shadow: 
        0 0 20px rgba(255, 193, 7, 0.8),
        0 0 40px rgba(255, 193, 7, 0.5);
    font-size: 32px;
}

.crypto-coin.coin-10 {
    top: 25%;
    right: 45%;
    animation-delay: 18s;
    color: rgba(0, 172, 193, 0.9);
    text-shadow: 
        0 0 20px rgba(0, 172, 193, 0.8),
        0 0 40px rgba(0, 172, 193, 0.5);
    font-size: 34px;
}

.crypto-coin.coin-11 {
    top: 50%;
    left: 8%;
    animation-delay: 20s;
    font-size: 40px;
}

/* ========== НОВЫЕ КРИПТО-ЭФФЕКТЫ (БЕЗ ГЕОМЕТРИИ) ========== */

/* Блокчейн-цепочка (связанные блоки) */
.blockchain-chain {
    position: absolute;
    display: flex;
    gap: 15px;
    align-items: center;
    animation: chain-float 16s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

.blockchain-chain.chain-1 {
    top: 10%;
    left: 5%;
    animation-delay: 0s;
}

.blockchain-chain.chain-2 {
    bottom: 15%;
    right: 5%;
    animation-delay: 8s;
    flex-direction: row-reverse;
}

.chain-link {
    width: 50px;
    height: 50px;
    border: 2px solid rgba(255, 79, 197, 0.6);
    border-radius: 8px;
    background: rgba(255, 79, 197, 0.1);
    position: relative;
    animation: link-pulse 3s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(255, 79, 197, 0.4);
}

.chain-link::before {
    content: '₿';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: rgba(255, 79, 197, 0.8);
    text-shadow: 0 0 10px rgba(255, 79, 197, 0.8);
}

.chain-link:nth-child(2)::before {
    content: 'Ξ';
    color: rgba(122, 0, 255, 0.8);
    text-shadow: 0 0 10px rgba(122, 0, 255, 0.8);
}

.chain-link:nth-child(3)::before {
    content: '₿';
}

@keyframes chain-float {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0.7;
    }
    50% {
        transform: translate(40px, -30px);
        opacity: 1;
    }
}

@keyframes link-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(255, 79, 197, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 25px rgba(255, 79, 197, 0.7);
    }
}

/* Крипто-данные (летающие хеши) */
.crypto-hash {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 79, 197, 0.7);
    text-shadow: 
        0 0 15px rgba(255, 79, 197, 0.8),
        0 0 30px rgba(255, 79, 197, 0.5);
    animation: hash-drift 22s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
    letter-spacing: 2px;
}

.crypto-hash.hash-1 {
    top: 8%;
    left: 3%;
    animation-delay: 0s;
}

.crypto-hash.hash-2 {
    top: 75%;
    right: 3%;
    animation-delay: 5s;
    color: rgba(122, 0, 255, 0.7);
    text-shadow: 
        0 0 15px rgba(122, 0, 255, 0.8),
        0 0 30px rgba(122, 0, 255, 0.5);
}

.crypto-hash.hash-3 {
    bottom: 10%;
    left: 8%;
    animation-delay: 10s;
    font-size: 16px;
}


@keyframes hash-drift {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }
    25% {
        transform: translate(80px, -70px) scale(1.2);
        opacity: 0.9;
    }
    50% {
        transform: translate(-70px, 80px) scale(0.9);
        opacity: 0.5;
    }
    75% {
        transform: translate(70px, 70px) scale(1.1);
        opacity: 0.8;
    }
}

/* Крипто-волны (данные блокчейна) */
.crypto-wave {
    position: absolute;
    width: 300px;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent,
        rgba(255, 79, 197, 0.5) 20%,
        rgba(122, 0, 255, 0.5) 50%,
        rgba(255, 79, 197, 0.5) 80%,
        transparent);
    border-radius: 2px;
    animation: wave-flow 14s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
    filter: blur(1.5px);
    box-shadow: 0 0 20px rgba(255, 79, 197, 0.4);
}

.crypto-wave.wave-1 {
    top: 15%;
    left: 2%;
    transform: rotate(20deg);
    animation-delay: 0s;
}

.crypto-wave.wave-2 {
    bottom: 10%;
    right: 2%;
    transform: rotate(-25deg);
    animation-delay: 7s;
    width: 400px;
}

@keyframes wave-flow {
    0%, 100% {
        opacity: 0.4;
        transform: rotate(var(--rotation, 0deg)) scaleX(1);
    }
    50% {
        opacity: 0.8;
        transform: rotate(var(--rotation, 0deg)) scaleX(1.4);
    }
}

/* Дополнительные крипто-символы */
.crypto-symbol {
    position: absolute;
    font-size: 50px;
    font-weight: 700;
    color: rgba(255, 79, 197, 0.7);
    text-shadow: 
        0 0 25px rgba(255, 79, 197, 0.8),
        0 0 50px rgba(255, 79, 197, 0.5);
    animation: symbol-drift 20s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

.crypto-symbol.symbol-1 {
    top: 10%;
    left: 5%;
    animation-delay: 0s;
    color: rgba(255, 79, 197, 0.7);
}

.crypto-symbol.symbol-2 {
    top: 10%;
    right: 5%;
    animation-delay: 4s;
    color: rgba(122, 0, 255, 0.7);
    text-shadow: 
        0 0 25px rgba(122, 0, 255, 0.8),
        0 0 50px rgba(122, 0, 255, 0.5);
    font-size: 45px;
}

.crypto-symbol.symbol-3 {
    bottom: 10%;
    left: 5%;
    animation-delay: 8s;
    font-size: 48px;
}

.crypto-symbol.symbol-4 {
    top: 50%;
    right: 5%;
    animation-delay: 12s;
    color: rgba(255, 193, 7, 0.8);
    text-shadow: 
        0 0 25px rgba(255, 193, 7, 0.8),
        0 0 50px rgba(255, 193, 7, 0.5);
    font-size: 42px;
}

.crypto-symbol.symbol-5 {
    bottom: 10%;
    right: 5%;
    animation-delay: 16s;
    color: rgba(0, 255, 163, 0.8);
    text-shadow: 
        0 0 25px rgba(0, 255, 163, 0.8),
        0 0 50px rgba(0, 255, 163, 0.5);
    font-size: 40px;
}


@keyframes symbol-drift {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 0.6;
    }
    25% {
        transform: translate(70px, -60px) rotate(90deg) scale(1.3);
        opacity: 0.9;
    }
    50% {
        transform: translate(-60px, 70px) rotate(180deg) scale(0.8);
        opacity: 0.5;
    }
    75% {
        transform: translate(60px, 60px) rotate(270deg) scale(1.2);
        opacity: 0.8;
    }
}

/* Крипто-частицы данных */
.data-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(255, 79, 197, 0.9), rgba(122, 0, 255, 0.5));
    border-radius: 50%;
    animation: data-float 14s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
    box-shadow: 0 0 15px rgba(255, 79, 197, 0.6);
}

.data-particle.particle-data-1 {
    top: 30%;
    left: 10%;
    animation-delay: 0s;
}

.data-particle.particle-data-2 {
    top: 30%;
    right: 10%;
    animation-delay: 2s;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, rgba(122, 0, 255, 0.9), rgba(255, 79, 197, 0.5));
    box-shadow: 0 0 15px rgba(122, 0, 255, 0.6);
}

.data-particle.particle-data-3 {
    bottom: 30%;
    left: 50%;
    animation-delay: 4s;
    width: 6px;
    height: 6px;
}


@keyframes data-float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.7;
    }
    25% {
        transform: translate(50px, -45px) scale(1.3);
        opacity: 1;
    }
    50% {
        transform: translate(-45px, 50px) scale(0.8);
        opacity: 0.5;
    }
    75% {
        transform: translate(45px, 45px) scale(1.2);
        opacity: 0.9;
    }
}

/* Крипто-свечение (энергия блокчейна) */
.crypto-energy {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 79, 197, 0.3), transparent 70%);
    animation: energy-pulse 8s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
    filter: blur(25px);
}

.crypto-energy.energy-1 {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.crypto-energy.energy-2 {
    bottom: 20%;
    right: 20%;
    animation-delay: 2.5s;
    background: radial-gradient(circle, rgba(122, 0, 255, 0.3), transparent 70%);
    width: 150px;
    height: 150px;
}


@keyframes energy-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.4);
        opacity: 0.7;
    }
}

/* GPU ускорение для новых крипто-эффектов */
.blockchain-chain,
.crypto-hash,
.crypto-wave,
.crypto-symbol,
.data-particle,
.crypto-energy {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Стили для текстовых монет (BNB, ADA, SOL) */
.crypto-coin.coin-5,
.crypto-coin.coin-8,
.crypto-coin.coin-13 {
    color: rgba(255, 193, 7, 0.9) !important;
    text-shadow: 
        0 0 20px rgba(255, 193, 7, 0.8),
        0 0 40px rgba(255, 193, 7, 0.5) !important;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 2px;
}

.crypto-coin.coin-6,
.crypto-coin.coin-9,
.crypto-coin.coin-14 {
    color: rgba(0, 172, 193, 0.9) !important;
    text-shadow: 
        0 0 20px rgba(0, 172, 193, 0.8),
        0 0 40px rgba(0, 172, 193, 0.5) !important;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 2px;
}

.crypto-coin.coin-7,
.crypto-coin.coin-10,
.crypto-coin.coin-15 {
    color: rgba(0, 255, 163, 0.9) !important;
    text-shadow: 
        0 0 20px rgba(0, 255, 163, 0.8),
        0 0 40px rgba(0, 255, 163, 0.5) !important;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 2px;
}

/* Оптимизация производительности - уменьшаем количество анимаций при скролле */
@media (prefers-reduced-motion: no-preference) {
    .crypto-background-elements {
        contain: layout style paint;
    }
}

/* Отключаем тяжелые эффекты на мобильных */
@media (max-width: 768px) {
    .crypto-orb,
    .crypto-glow-circle,
    .crypto-pulse-ring {
        animation-duration: 30s !important;
    }
    
    .crypto-coin {
        animation-duration: 20s !important;
    }
    
    .blockchain-block {
        animation-duration: 25s !important;
    }
}

/* Оптимизация backdrop-filter */
.blockchain-block {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* Используем GPU ускорение */
.crypto-coin,
.blockchain-block,
.crypto-particle,
.blockchain-chain,
.crypto-hash,
.crypto-wave,
.crypto-symbol,
.data-particle,
.crypto-energy {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Критическая оптимизация - уменьшаем blur для производительности */
.crypto-orb {
    filter: blur(30px) !important;
}

.crypto-glow-circle {
    filter: blur(20px) !important;
}

/* Оптимизация скролла - используем contain */
.page {
    contain: none;
    overflow: visible !important;
}

.hero,
.overlay-section,
.explore-section {
    contain: none;
    will-change: auto;
    overflow: visible !important;
}

/* Отключаем анимации при скролле для лучшей производительности */
@media (prefers-reduced-motion: no-preference) {
    /* Уменьшаем количество одновременно анимируемых элементов */
    .crypto-background-elements > * {
        animation-play-state: running;
    }
}

/* Оптимизация для плавного скролла */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Уменьшаем сложность backdrop-filter */
.blockchain-block {
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

/* Оптимизация фона */
body::before {
    will-change: auto !important;
    transform: translateZ(0) !important;
}

/* Радикальная оптимизация - уменьшаем количество элементов */
@media (max-width: 1400px) {
    .crypto-coin:nth-child(n+11),
    .crypto-glow-circle:nth-child(n+4),
    .crypto-pulse-ring:nth-child(n+3) {
        display: none !important;
    }
}

/* Отключаем тяжелые эффекты при скролле */
.scrolling .crypto-background-elements > * {
    animation-play-state: paused !important;
    will-change: auto !important;
}

/* Упрощаем анимации */
.crypto-orb,
.crypto-glow-circle,
.crypto-pulse-ring {
    animation-timing-function: linear !important;
}

/* Убираем лишние эффекты для производительности */
.crypto-connection {
    display: none;
}

/* Упрощаем блокчейн-блоки */
.blockchain-block {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.4) !important;
}

/* Уменьшаем количество частиц */
.crypto-particle:nth-child(n+4) {
    display: none !important;
}

/* КРИТИЧЕСКАЯ ОПТИМИЗАЦИЯ - отключаем все при скролле */
body.scrolling .crypto-background-elements > * {
    animation: none !important;
    transform: none !important;
    opacity: 0.3 !important;
    will-change: auto !important;
}

body.scrolling .crypto-orb,
body.scrolling .crypto-glow-circle,
body.scrolling .crypto-pulse-ring,
body.scrolling .crypto-coin,
body.scrolling .blockchain-block,
body.scrolling .crypto-particle {
    animation: none !important;
    transform: translateZ(0) !important;
}

/* Убираем blur при скролле - это очень тяжело */
body.scrolling .crypto-orb,
body.scrolling .crypto-glow-circle {
    filter: none !important;
}

/* Упрощаем фон при скролле */
body.scrolling body::before {
    filter: blur(4px) !important;
}

/* Отключаем все backdrop-filter при скролле */
body.scrolling .blockchain-block {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Уменьшаем количество элементов на всех экранах */
.crypto-coin:nth-child(n+6),
.crypto-glow-circle:nth-child(n+3),
.crypto-pulse-ring:nth-child(n+2),
.crypto-particle:nth-child(n+3) {
    display: none !important;
}

/* Убираем connection полностью */
.crypto-connection {
    display: none !important;
}

/* Упрощаем орбы - убираем blur */
.crypto-orb {
    filter: none !important;
    opacity: 0.2 !important;
}

/* Упрощаем круги */
.crypto-glow-circle {
    filter: none !important;
    opacity: 0.15 !important;
}

/* Анимации фоновых элементов включены */

/* Делаем статичными только элементы, которых нет в HTML */
.crypto-orb,
.crypto-glow-circle,
.crypto-pulse-ring,
.crypto-coin,
.crypto-particle,
.crypto-connection {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
}

/* Убираем все blur эффекты */
.crypto-orb,
.crypto-glow-circle {
    filter: none !important;
}

/* Упрощаем фон - убираем blur при скролле */
body::before {
    filter: blur(4px) !important;
    will-change: auto !important;
}

/* Отключаем backdrop-filter везде */
.blockchain-block {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Убираем элементы, которых нет в HTML */
.crypto-connection,
.crypto-particle,
.crypto-glow-circle,
.crypto-pulse-ring,
.crypto-coin {
    display: none !important;
}

/* Оставляем только 2 статичных орба */
.crypto-orb.orb-1,
.crypto-orb.orb-2 {
    display: block !important;
    opacity: 0.15 !important;
    filter: none !important;
    animation: none !important;
    transform: none !important;
}

.crypto-orb.orb-3 {
    display: none !important;
}

/* КРИТИЧЕСКАЯ ОПТИМИЗАЦИЯ СКРОЛЛА - убираем все что может вызывать лаги */
.hero,
.overlay-section {
    contain: layout style paint;
    will-change: auto;
    transform: translateZ(0);
    backface-visibility: hidden;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Отключаем все анимации при скролле */
html {
    scroll-behavior: auto;
}

/* Упрощаем фон при скролле */
body {
    background-attachment: scroll !important;
}

/* Убираем все transform и filter при скролле */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Отключаем все keyframes анимации */
@keyframes float {
    0%, 100% {
        transform: none;
        opacity: 1;
    }
}

@keyframes pulseGlow {
    0%, 100% {
        transform: none;
        opacity: 1;
    }
}

* {
    -webkit-backdrop-filter: none !important;
}

/* ТОЧЕЧНАЯ ОПТИМИЗАЦИЯ - исправляем искажения без ущерба для дизайна */
.hero,
.overlay-section,
.explore-section {
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: scroll-position;
    contain: none;
    overflow: visible !important;
}

/* Исправляем искажения текста */
.floating-text,
.overlay-text {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Исправляем искажения кругляшков */
.menu-item,
.oval-item {
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}

.menu-item:hover,
.oval-item:hover {
    transform: scale(1.08) translateZ(0);
}

/* Убираем искажения фона при скролле */
body::before {
    will-change: auto !important;
}

/* Оптимизация скролла без ущерба для визуала */
html {
    scroll-behavior: smooth;
}

/* ИСПРАВЛЕНИЕ ИСКАЖЕНИЙ - точечная оптимизация */
.hero {
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: scroll-position;
}

.overlay-section {
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: scroll-position;
}

.explore-section {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Исправляем искажения кругляшков */
.menu-item,
.oval-item {
    transform: translateZ(0) !important;
    backface-visibility: hidden;
}

.menu-item:hover,
.oval-item:hover {
    transform: scale(1.05) translateZ(0) !important;
}

/* Убираем искажения при скролле - упрощаем фон */
body::before {
    will-change: auto !important;
    transform: translateZ(0) !important;
}

/* ВОССТАНОВЛЕНИЕ ВСЕХ ЭЛЕМЕНТОВ - возвращаем все что было убрано */
.crypto-orb,
.crypto-glow-circle,
.crypto-pulse-ring,
.crypto-coin,
.blockchain-block,
.crypto-particle {
    display: block !important;
    animation-play-state: running !important;
}

/* Восстанавливаем орбы */
.crypto-orb {
    opacity: 0.4 !important;
    filter: blur(30px) !important;
    animation: crypto-float 20s ease-in-out infinite !important;
}

.crypto-orb.orb-1 {
    opacity: 0.5 !important;
}

.crypto-orb.orb-2 {
    opacity: 0.45 !important;
}

.crypto-orb.orb-3 {
    opacity: 0.4 !important;
    display: block !important;
}

/* Восстанавливаем пульсирующие круги */
.crypto-glow-circle {
    display: block !important;
    opacity: 0.4 !important;
    filter: blur(20px) !important;
    animation: glow-pulse 4s ease-in-out infinite !important;
}

/* Восстанавливаем пульсирующие кольца */
.crypto-pulse-ring {
    display: block !important;
    animation: ring-pulse 3s ease-in-out infinite !important;
}

/* Восстанавливаем блокчейн-блоки */
.blockchain-block {
    display: block !important;
    animation: block-float 15s ease-in-out infinite !important;
    backdrop-filter: blur(2px) !important;
}

/* Восстанавливаем частицы */
.crypto-particle {
    display: block !important;
    animation: particle-float 12s ease-in-out infinite !important;
}

/* Восстанавливаем все монеты */
.crypto-coin {
    display: block !important;
    animation: coin-float 15s ease-in-out infinite !important;
}

/* Правильные цвета для монет */
.crypto-coin.coin-5,
.crypto-coin.coin-8,
.crypto-coin.coin-13 {
    color: rgba(255, 193, 7, 0.9) !important;
    text-shadow: 
        0 0 20px rgba(255, 193, 7, 0.8),
        0 0 40px rgba(255, 193, 7, 0.5) !important;
}

.crypto-coin.coin-6,
.crypto-coin.coin-9,
.crypto-coin.coin-14 {
    color: rgba(0, 172, 193, 0.9) !important;
    text-shadow: 
        0 0 20px rgba(0, 172, 193, 0.8),
        0 0 40px rgba(0, 172, 193, 0.5) !important;
}

.crypto-coin.coin-7,
.crypto-coin.coin-10,
.crypto-coin.coin-15 {
    color: rgba(0, 255, 163, 0.9) !important;
    text-shadow: 
        0 0 20px rgba(0, 255, 163, 0.8),
        0 0 40px rgba(0, 255, 163, 0.5) !important;
}

/* ========== GLOBAL BUTTON HOVER EFFECT - SITE WIDE ========== */
/* Subtle, barely noticeable scale increase (2%) for all buttons on hover */
/* This applies to all buttons across the entire site */

/* General button hover - subtle scale */
button:not(.chat-button):not(.send-button):hover {
    transform: scale(1.02);
    border-radius: inherit;
    opacity: inherit;
    transition: transform 0.2s ease, background 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

button:not(.chat-button):not(.send-button):active,
button:not(.chat-button):not(.send-button):focus {
    transform: scale(1);
    border-radius: inherit;
    opacity: inherit;
    outline: none;
}

/* Subscription and payment buttons */
.subscription-pay-btn:hover:not(:disabled) {
    transform: scale(1.02) translateY(-2px);
    box-shadow: 0 12px 30px rgba(88, 28, 135, 0.3);
    border-radius: inherit;
    opacity: inherit;
}

.subscription-pay-btn:active:not(:disabled) {
    transform: scale(1) translateY(0);
    border-radius: inherit;
    opacity: inherit;
}

/* Submit buttons */
.submit-btn:hover {
    transform: scale(1.02) translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    border-radius: inherit;
    opacity: inherit;
}

.submit-btn:active {
    transform: scale(1) translateY(-1px);
    border-radius: inherit;
    opacity: inherit;
}

/* Payment links */
.payment-link:hover {
    transform: scale(1.02) translateY(-1px);
    box-shadow: 0 12px 24px rgba(88, 28, 135, 0.3);
    border-radius: inherit;
    opacity: inherit;
}

.payment-link:active {
    transform: scale(1);
    border-radius: inherit;
    opacity: inherit;
}

/* Copy buttons */
.copy-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.02);
    border-radius: inherit;
    opacity: inherit;
}

.copy-btn:active {
    transform: scale(1);
    border-radius: inherit;
    opacity: inherit;
}

/* Payment method buttons */
.payment-method-btn:hover:not(:disabled) {
    transform: scale(1.02);
    border-radius: inherit;
    opacity: inherit;
}

.payment-method-btn:active:not(:disabled) {
    transform: scale(1);
    border-radius: inherit;
    opacity: inherit;
}

/* Subscription overlay buttons */
.subscription-overlay-btn:hover {
    transform: scale(1.02);
    border-radius: inherit;
    opacity: inherit;
}

.subscription-overlay-btn:active {
    transform: scale(1);
    border-radius: inherit;
    opacity: inherit;
}

/* Chat expired buttons */
.chat-expired-btn:hover {
    transform: scale(1.02);
    border-radius: inherit;
    opacity: inherit;
}

.chat-expired-btn:active {
    transform: scale(1);
    border-radius: inherit;
    opacity: inherit;
}

/* Футер главной страницы */
.main-footer {
   padding: 60px 24px 40px;
   text-align: center;
   border-top: 1px solid rgba(212, 175, 55, 0.2);
   margin-top: 40px;
   position: relative;
}

.main-footer::before {
   content: '';
   position: absolute;
   left: 50%;
   top: 0;
   transform: translateX(-50%);
   width: 80px;
   height: 2px;
   background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
}

.footer-text {
   font-family: 'Poppins', sans-serif;
   font-size: 14px;
   color: #888888;
   margin: 0;
   letter-spacing: 0.02em;
}

.footer-crafted {
   font-family: 'Poppins', sans-serif;
   font-size: 12px;
   color: rgba(255, 255, 255, 0.35);
   margin: 12px 0 0;
   letter-spacing: 0.06em;
   font-weight: 400;
}